@ironsource/shared-ui 2.0.0-rc.0 → 2.0.0-rc.1

package/components/autocompleteDropdown/AutocompleteDropdown.vue.js

@@ -1,8 +1,9 @@
 import { defineComponent, ref, computed, watch, nextTick, openBlock, createBlock, unref, mergeProps, withModifiers, withCtx, createVNode, renderSlot, createTextVNode, toDisplayString } from 'vue';
-import Dropdown from '../dropdown/Dropdown.vue.js';
+import Dropdown from '../dropdown/v3/Dropdown.vue.js';
 /* empty css                                                                     */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
 /* empty css                                                                  *//* empty css                                                            *//* empty css                                                                    */import '@vue/shared';
-/* empty css                                                                  *//* empty css                                                                 *//* empty css                                                                    *//* empty css                                                                    *//* empty css                                                                       */import GroupOption from './GroupOption.vue.js';
+/* empty css                                                                         *//* empty css                                                                        *//* empty css                                                                   *//* empty css                                                                           *//* empty css                                                                       *//* empty css                                                                               */import 'floating-vue';
+/* empty css                                                      *//* empty css                                                                         *//* empty css                                                                              */import GroupOption from './GroupOption.vue.js';
 import AutocompleteInput from './AutocompleteInput.vue.js';
 import { DEFAULT_PLACEHOLDER, GROUP_OPTION_FLAG } from './consts.vue.js';
 import { useKeyboardNavigation } from './useKeyboardNavigation.vue.js';
@@ -144,6 +145,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var AutocompleteDropdown = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5c2ad255"]]);
+var AutocompleteDropdown = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-74e20077"]]);
 
 export { AutocompleteDropdown as default };

package/components/autocompleteDropdown/AutocompleteInput.vue.js

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed, watch, openBlock, createElementBlock, normalizeClass, unref, withModifiers, Fragment, renderList, renderSlot, createVNode, withCtx, createTextVNode, toDisplayString, createElementVNode } from 'vue';
 import Icon from '../icon/Icon.vue.js';
 import Text from '../typography/Text.vue.js';
-import { useDropdownContext } from '../dropdown/DropdownContext.vue.js';
+import { useDropdownContext } from '../dropdown/common/DropdownContext.vue.js';
 import { DEFAULT_PLACEHOLDER } from './consts.vue.js';
 import { AutocompleteInputTestIdModifiers } from '../../testids/index.vue.js';
 /* empty css                                                                   */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
@@ -94,6 +94,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var AutocompleteInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-b95f1c9c"]]);
+var AutocompleteInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a73b488c"]]);
 
 export { AutocompleteInput as default };

package/components/autocompleteDropdown/GroupOption.vue.js

@@ -2,7 +2,7 @@ import { defineComponent, ref, onMounted, onUnmounted, openBlock, createElementB
 import { NOOP } from '@vue/shared';
 /* empty css                                                                     */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
 import Text from '../typography/Text.vue.js';
-import { useDropdownContext } from '../dropdown/DropdownContext.vue.js';
+import { useDropdownContext } from '../dropdown/common/DropdownContext.vue.js';
 import { useId } from '../../composables/useId.vue.js';
 /* empty css                                                             */
 import "../../GroupOption.vue_vue_type_style_index_0_scoped_true_lang.css";
@@ -37,6 +37,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var GroupOption = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-76680bfa"]]);
+var GroupOption = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-52c8859b"]]);
 
 export { GroupOption as default };

package/components/button/common/ButtonBase.vue.d.ts

@@ -0,0 +1,48 @@
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'small' | 'medium' | 'large' | 'extraLarge';
+    variant?: 'solid' | 'border' | 'borderless' | 'ghost' | 'link' | 'colorized' | 'contained' | 'outlined' | 'text';
+    theme?: 'secondary' | 'third' | 'primary' | 'default' | 'danger' | 'info' | 'success' | 'warning';
+    loading?: boolean;
+    isTruncated?: boolean;
+    strong?: boolean;
+}>, {
+    size: string;
+    variant: string;
+    theme: string;
+    loading: boolean;
+    strong: 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<{
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'small' | 'medium' | 'large' | 'extraLarge';
+    variant?: 'solid' | 'border' | 'borderless' | 'ghost' | 'link' | 'colorized' | 'contained' | 'outlined' | 'text';
+    theme?: 'secondary' | 'third' | 'primary' | 'default' | 'danger' | 'info' | 'success' | 'warning';
+    loading?: boolean;
+    isTruncated?: boolean;
+    strong?: boolean;
+}>, {
+    size: string;
+    variant: string;
+    theme: string;
+    loading: boolean;
+    strong: boolean;
+}>>>, {
+    strong: boolean;
+    theme: 'secondary' | 'third' | 'primary' | 'default' | 'danger' | 'info' | 'success' | 'warning';
+    size: 'xs' | 'sm' | 'md' | 'lg' | 'small' | 'medium' | 'large' | 'extraLarge';
+    variant: 'solid' | 'border' | 'borderless' | 'ghost' | 'link' | 'colorized' | 'contained' | 'outlined' | 'text';
+    loading: boolean;
+}>;
+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 ? P[K] & {
+        default: D[K];
+    } : P[K];
+};

package/components/button/{ButtonBase.vue.js → common/ButtonBase.vue.js}

@@ -1,11 +1,11 @@
 import { defineComponent, computed, openBlock, createElementBlock, mergeProps, renderSlot, createVNode, unref, withCtx, createCommentVNode } from 'vue';
-/* empty css                                                                     */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
-import Text from '../typography/Text.vue.js';
-import Icon from '../icon/Icon.vue.js';
-import { sizeToFont } from './consts.vue.js';
-import LoaderDotsIcon from './icon/LoaderDotsIcon.vue.js';
+/* empty css                                                                        */import _export_sfc from '../../../_virtual/plugin-vue_export-helper.vue.js';
+import Text from '../../typography/Text.vue.js';
+import Icon from '../../icon/Icon.vue.js';
+import { sizeToFont } from '../consts.vue.js';
+import LoaderDotsIcon from '../icon/LoaderDotsIcon.vue.js';
 /* empty css                                                            */
-import "../../ButtonBase.vue_vue_type_style_index_0_scoped_true_lang.css";
+import "../../../ButtonBase.vue_vue_type_style_index_0_scoped_true_lang.css";
 const _hoisted_1 = { key: 0 };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "ButtonBase",
@@ -58,6 +58,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var ButtonBase = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-2650dac1"]]);
+var ButtonBase = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-1ca3a54c"]]);
 
 export { ButtonBase as default };

package/components/button/{Button.vue.d.ts → common/ButtonSuper.vue.d.ts}

@@ -2,7 +2,7 @@ import { IconName } from '@/components/icon';
 declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     leftIconName?: IconName;
     rightIconName?: IconName;
-    size?: 'sm' | 'md' | 'lg';
+    size?: 'sm' | 'md' | 'lg' | 'small' | 'medium' | 'large' | 'extraLarge';
     testId?: string;
 }>, {
     leftIconName: any;
@@ -12,7 +12,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
 }>, {}, 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<{
     leftIconName?: IconName;
     rightIconName?: IconName;
-    size?: 'sm' | 'md' | 'lg';
+    size?: 'sm' | 'md' | 'lg' | 'small' | 'medium' | 'large' | 'extraLarge';
     testId?: string;
 }>, {
     leftIconName: any;
@@ -20,7 +20,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     size: string;
     testId: string;
 }>>>, {
-    size: 'sm' | 'md' | 'lg';
+    size: 'sm' | 'md' | 'lg' | 'small' | 'medium' | 'large' | 'extraLarge';
     testId: string;
     leftIconName: IconName;
     rightIconName: IconName;

package/components/button/{ButtonBase.vue.d.ts → v3/Button.vue.d.ts}

@@ -1,35 +1,51 @@
+import { IconName } from '@/components/icon';
 declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    size?: 'xs' | 'sm' | 'md' | 'lg';
+    size?: 'sm' | 'md' | 'lg';
     variant?: 'solid' | 'border' | 'borderless' | 'ghost' | 'link' | 'colorized';
     theme?: 'primary' | 'secondary' | 'third' | 'danger';
     loading?: boolean;
     isTruncated?: boolean;
     strong?: boolean;
+    leftIconName?: IconName;
+    rightIconName?: IconName;
+    testId?: string;
 }>, {
     size: string;
     variant: string;
     theme: string;
     loading: boolean;
     strong: boolean;
+    leftIconName: any;
+    rightIconName: any;
+    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<{
-    size?: 'xs' | 'sm' | 'md' | 'lg';
+    size?: 'sm' | 'md' | 'lg';
     variant?: 'solid' | 'border' | 'borderless' | 'ghost' | 'link' | 'colorized';
     theme?: 'primary' | 'secondary' | 'third' | 'danger';
     loading?: boolean;
     isTruncated?: boolean;
     strong?: boolean;
+    leftIconName?: IconName;
+    rightIconName?: IconName;
+    testId?: string;
 }>, {
     size: string;
     variant: string;
     theme: string;
     loading: boolean;
     strong: boolean;
+    leftIconName: any;
+    rightIconName: any;
+    testId: string;
 }>>>, {
-    size: 'xs' | 'sm' | 'md' | 'lg';
     strong: boolean;
-    variant: 'solid' | 'border' | 'borderless' | 'ghost' | 'link' | 'colorized';
     theme: 'primary' | 'secondary' | 'third' | 'danger';
+    size: 'sm' | 'md' | 'lg';
+    testId: string;
+    variant: 'solid' | 'border' | 'borderless' | 'ghost' | 'link' | 'colorized';
     loading: boolean;
+    leftIconName: IconName;
+    rightIconName: IconName;
 }>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/components/button/v3/Button.vue.js

@@ -0,0 +1,102 @@
+import { defineComponent, computed, openBlock, createElementBlock, mergeProps, renderSlot, createVNode, unref, createSlots, withCtx, createElementVNode, normalizeClass, createBlock, createCommentVNode } from 'vue';
+/* empty css                                                                        */import _export_sfc from '../../../_virtual/plugin-vue_export-helper.vue.js';
+import Text from '../../typography/Text.vue.js';
+import Icon from '../../icon/Icon.vue.js';
+import { sizeToFont, iconSizeMap } from '../consts.vue.js';
+import LoaderDotsIcon from '../icon/LoaderDotsIcon.vue.js';
+/* empty css                                                        */
+import "../../../Button.vue_vue_type_style_index_0_scoped_true_lang.css";
+const _hoisted_1 = ["data-testid"];
+const _hoisted_2 = { key: 0 };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "Button",
+  props: {
+    size: { default: "md" },
+    variant: { default: "solid" },
+    theme: { default: "primary" },
+    loading: { type: Boolean, default: false },
+    isTruncated: { type: Boolean },
+    strong: { type: Boolean, default: true },
+    leftIconName: { default: null },
+    rightIconName: { default: null },
+    testId: { default: "" }
+  },
+  setup(__props) {
+    const props = __props;
+    const loaderWidthLargeInPixel = 32;
+    const loaderWidthMedSmallInPixel = 24;
+    const loaderWidth = computed(
+      () => props.size === "lg" ? loaderWidthLargeInPixel + "px" : loaderWidthMedSmallInPixel + "px"
+    );
+    const textSize = computed(() => sizeToFont[props.size]);
+    const computedIconWidth = computed(() => `${iconSizeMap[props.size]}px`);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("button", mergeProps({
+        class: [[
+          __props.size,
+          __props.theme,
+          __props.variant,
+          { loading: __props.loading },
+          {
+            "with-left-icon": !!__props.leftIconName,
+            "with-right-icon": !!__props.rightIconName
+          }
+        ], "button-wrap"],
+        "data-testid": props.testId
+      }, _ctx.$attrs), [
+        !__props.loading ? (openBlock(), createElementBlock("span", _hoisted_2, [
+          renderSlot(_ctx.$slots, "content", {}, () => [
+            createVNode(unref(Text), {
+              size: unref(textSize),
+              strong: __props.strong,
+              class: "content"
+            }, createSlots({
+              default: withCtx(() => [
+                createElementVNode("div", {
+                  class: normalizeClass({
+                    flex: __props.leftIconName || __props.rightIconName
+                  })
+                }, [
+                  __props.leftIconName ? (openBlock(), createBlock(unref(Icon), {
+                    key: 0,
+                    name: __props.leftIconName,
+                    "font-size": unref(computedIconWidth)
+                  }, null, 8, ["name", "font-size"])) : createCommentVNode("", true),
+                  renderSlot(_ctx.$slots, "default", {}, void 0, true),
+                  __props.rightIconName ? (openBlock(), createBlock(unref(Icon), {
+                    key: 1,
+                    name: __props.rightIconName,
+                    "font-size": unref(computedIconWidth)
+                  }, null, 8, ["name", "font-size"])) : createCommentVNode("", true)
+                ], 2)
+              ]),
+              _: 2
+            }, [
+              _ctx.$slots.loader ? {
+                name: "loader",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "loader", {}, void 0, true)
+                ]),
+                key: "0"
+              } : void 0
+            ]), 1032, ["size", "strong"])
+          ], true)
+        ])) : createCommentVNode("", true),
+        __props.loading ? renderSlot(_ctx.$slots, "loader", { key: 1 }, () => [
+          createVNode(unref(Icon), {
+            "font-size": unref(loaderWidth),
+            class: "loading"
+          }, {
+            default: withCtx(() => [
+              createVNode(LoaderDotsIcon)
+            ]),
+            _: 1
+          }, 8, ["font-size"])
+        ], true) : createCommentVNode("", true)
+      ], 16, _hoisted_1);
+    };
+  }
+});
+var Button = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-4bb422e4"]]);
+
+export { Button as default };

package/components/button/{IconButton.vue.js → v3/IconButton.vue.js}

@@ -1,11 +1,11 @@
 import { defineComponent, computed, openBlock, createBlock, mergeProps, withCtx, createElementVNode, normalizeClass, renderSlot, createVNode, unref } from 'vue';
-import Icon from '../icon/Icon.vue.js';
-import ButtonBase from './ButtonBase.vue.js';
-import { loaderSizeMap } from './consts.vue.js';
-import LoaderCircleIcon from './icon/LoaderCircleIcon.vue.js';
-/* empty css                                                            */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
+import Icon from '../../icon/Icon.vue.js';
+import ButtonBase from '../common/ButtonBase.vue.js';
+import { loaderSizeMap } from '../consts.vue.js';
+import LoaderCircleIcon from '../icon/LoaderCircleIcon.vue.js';
+/* empty css                                                            */import _export_sfc from '../../../_virtual/plugin-vue_export-helper.vue.js';
 
-import "../../IconButton.vue_vue_type_style_index_0_scoped_true_lang.css";
+import "../../../IconButton.vue_vue_type_style_index_0_scoped_true_lang.css";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "IconButton",
   props: {
@@ -46,6 +46,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var IconButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-1d38d347"]]);
+var IconButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e3fa1ea6"]]);
 
 export { IconButton as default };

package/components/button/{ScrollButton.vue.js → v3/ScrollButton.vue.js}

@@ -1,10 +1,10 @@
 import { defineComponent, openBlock, createBlock, unref, normalizeClass, withCtx, createVNode, createCommentVNode } from 'vue';
-import Icon from '../icon/Icon.vue.js';
-/* empty css                                                                     */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
-/* empty css                                                                  *//* empty css                                                            *//* empty css                                                        */import IconButton from './IconButton.vue.js';
-import _sfc_main$1 from '../tooltip/Tooltip.vue.js';
+import Icon from '../../icon/Icon.vue.js';
+/* empty css                                                                        */import _export_sfc from '../../../_virtual/plugin-vue_export-helper.vue.js';
+/* empty css                                                                     *//* empty css                                                        */import IconButton from './IconButton.vue.js';
+import _sfc_main$1 from '../../tooltip/Tooltip.vue.js';
 /* empty css                                                              */
-import "../../ScrollButton.vue_vue_type_style_index_0_scoped_true_lang.css";
+import "../../../ScrollButton.vue_vue_type_style_index_0_scoped_true_lang.css";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "ScrollButton",
   props: {
@@ -43,6 +43,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var ScrollButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-1a43437e"]]);
+var ScrollButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-fbd33082"]]);
 
 export { ScrollButton as default };

package/components/button/v3/index.d.ts

@@ -0,0 +1,79 @@
+import Button from './Button.vue';
+import IconButton from './IconButton.vue';
+import ScrollButton from './ScrollButton.vue';
+declare const ButtonTypes: () => (import("vue").DefineComponent<{
+    size: {
+        type: import("vue").PropType<"md" | "sm" | "lg">;
+    } & {
+        default: string;
+    };
+    variant: {
+        type: import("vue").PropType<"link" | "solid" | "border" | "borderless" | "ghost" | "colorized">;
+    } & {
+        default: string;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    size: {
+        type: import("vue").PropType<"md" | "sm" | "lg">;
+    } & {
+        default: string;
+    };
+    variant: {
+        type: import("vue").PropType<"link" | "solid" | "border" | "borderless" | "ghost" | "colorized">;
+    } & {
+        default: string;
+    };
+}>>, {
+    size: "md" | "sm" | "lg";
+    variant: "link" | "solid" | "border" | "borderless" | "ghost" | "colorized";
+}> | import("vue").DefineComponent<{
+    show: {
+        type: import("vue").PropType<boolean>;
+    } & {
+        default: boolean;
+    };
+    iconName: {
+        type: import("vue").PropType<string>;
+    } & {
+        default: string;
+    };
+    tooltipText: {
+        type: import("vue").PropType<string>;
+    } & {
+        default: string;
+    };
+    position: {
+        type: import("vue").PropType<"bottom-right" | "bottom-left" | "top-right" | "top-left">;
+    } & {
+        default: string;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "scrolled"[], "scrolled", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    show: {
+        type: import("vue").PropType<boolean>;
+    } & {
+        default: boolean;
+    };
+    iconName: {
+        type: import("vue").PropType<string>;
+    } & {
+        default: string;
+    };
+    tooltipText: {
+        type: import("vue").PropType<string>;
+    } & {
+        default: string;
+    };
+    position: {
+        type: import("vue").PropType<"bottom-right" | "bottom-left" | "top-right" | "top-left">;
+    } & {
+        default: string;
+    };
+}>> & {
+    onScrolled?: (...args: any[]) => any;
+}, {
+    show: boolean;
+    iconName: string;
+    tooltipText: string;
+    position: "bottom-right" | "bottom-left" | "top-right" | "top-left";
+}>)[];
+export { Button, IconButton, ScrollButton, ButtonTypes };

package/components/button/v4/ButtonV4.vue.d.ts

@@ -0,0 +1,57 @@
+import { IconName } from '@/components/icon';
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    size?: 'small' | 'medium' | 'large' | 'extraLarge';
+    variant?: 'contained' | 'outlined' | 'text';
+    color?: 'primary' | 'default' | 'danger' | 'info' | 'success' | 'warning';
+    testId?: string;
+    loading?: boolean;
+    leftIconName?: IconName;
+    rightIconName?: IconName;
+}>, {
+    leftIconName: any;
+    rightIconName: any;
+    loading: boolean;
+    size: string;
+    testId: string;
+    variant: string;
+    color: 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<{
+    size?: 'small' | 'medium' | 'large' | 'extraLarge';
+    variant?: 'contained' | 'outlined' | 'text';
+    color?: 'primary' | 'default' | 'danger' | 'info' | 'success' | 'warning';
+    testId?: string;
+    loading?: boolean;
+    leftIconName?: IconName;
+    rightIconName?: IconName;
+}>, {
+    leftIconName: any;
+    rightIconName: any;
+    loading: boolean;
+    size: string;
+    testId: string;
+    variant: string;
+    color: string;
+}>>>, {
+    size: 'small' | 'medium' | 'large' | 'extraLarge';
+    testId: string;
+    variant: 'contained' | 'outlined' | 'text';
+    loading: boolean;
+    leftIconName: IconName;
+    rightIconName: IconName;
+    color: 'primary' | 'default' | 'danger' | 'info' | 'success' | 'warning';
+}>;
+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 ? P[K] & {
+        default: D[K];
+    } : P[K];
+};

package/components/button/v4/ButtonV4.vue.js

@@ -0,0 +1,99 @@
+import { defineComponent, computed, openBlock, createElementBlock, mergeProps, renderSlot, createVNode, unref, createSlots, withCtx, createElementVNode, normalizeClass, createBlock, createCommentVNode } from 'vue';
+/* empty css                                                                        */import _export_sfc from '../../../_virtual/plugin-vue_export-helper.vue.js';
+import Text from '../../typography/Text.vue.js';
+import Icon from '../../icon/Icon.vue.js';
+import { sizeToFont, iconSizeMap } from '../consts.vue.js';
+import LoaderDotsIcon from '../icon/LoaderDotsIcon.vue.js';
+/* empty css                                                          */
+import "../../../ButtonV4.vue_vue_type_style_index_0_scoped_true_lang.css";
+const _hoisted_1 = ["data-testid"];
+const _hoisted_2 = { key: 0 };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ButtonV4",
+  props: {
+    size: { default: "medium" },
+    variant: { default: "contained" },
+    color: { default: "primary" },
+    testId: { default: "" },
+    loading: { type: Boolean, default: false },
+    leftIconName: { default: null },
+    rightIconName: { default: null }
+  },
+  setup(__props) {
+    const props = __props;
+    const loaderWidthLargeInPixel = 32;
+    const loaderWidthMedSmallInPixel = 24;
+    const loaderWidth = computed(
+      () => props.size === "large" ? loaderWidthLargeInPixel + "px" : loaderWidthMedSmallInPixel + "px"
+    );
+    const textSize = computed(() => sizeToFont[props.size]);
+    const computedIconWidth = computed(() => `${iconSizeMap[props.size]}px`);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("button", mergeProps({
+        class: [[
+          __props.size,
+          __props.color,
+          __props.variant,
+          { loading: __props.loading },
+          {
+            "with-left-icon": !!__props.leftIconName,
+            "with-right-icon": !!__props.rightIconName
+          }
+        ], "button-wrap"],
+        "data-testid": props.testId
+      }, _ctx.$attrs), [
+        !__props.loading ? (openBlock(), createElementBlock("span", _hoisted_2, [
+          renderSlot(_ctx.$slots, "content", {}, () => [
+            createVNode(unref(Text), {
+              size: unref(textSize),
+              class: "content"
+            }, createSlots({
+              default: withCtx(() => [
+                createElementVNode("div", {
+                  class: normalizeClass({
+                    flex: __props.leftIconName || __props.rightIconName
+                  })
+                }, [
+                  __props.leftIconName ? (openBlock(), createBlock(unref(Icon), {
+                    key: 0,
+                    name: __props.leftIconName,
+                    "font-size": unref(computedIconWidth)
+                  }, null, 8, ["name", "font-size"])) : createCommentVNode("", true),
+                  renderSlot(_ctx.$slots, "default", {}, void 0, true),
+                  __props.rightIconName ? (openBlock(), createBlock(unref(Icon), {
+                    key: 1,
+                    name: __props.rightIconName,
+                    "font-size": unref(computedIconWidth)
+                  }, null, 8, ["name", "font-size"])) : createCommentVNode("", true)
+                ], 2)
+              ]),
+              _: 2
+            }, [
+              _ctx.$slots.loader ? {
+                name: "loader",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "loader", {}, void 0, true)
+                ]),
+                key: "0"
+              } : void 0
+            ]), 1032, ["size"])
+          ], true)
+        ])) : createCommentVNode("", true),
+        __props.loading ? renderSlot(_ctx.$slots, "loader", { key: 1 }, () => [
+          createVNode(unref(Icon), {
+            "font-size": unref(loaderWidth),
+            class: "loading"
+          }, {
+            default: withCtx(() => [
+              createVNode(LoaderDotsIcon)
+            ]),
+            _: 1
+          }, 8, ["font-size"])
+        ], true) : createCommentVNode("", true)
+      ], 16, _hoisted_1);
+    };
+  }
+});
+var Button = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-2972de6e"]]);
+
+export { Button as default };