@ironsource/shared-ui 2.0.0-rc.2 → 2.0.0-rc.4

package/components/toggle/Toggle.vue2.js

@@ -0,0 +1,95 @@
+ import "../../Toggle.vue_vue_type_style_index_0_scoped_d97166d1_lang.css"; import { defineComponent as h, useCssVars as v, openBlock as l, createElementBlock as m, createElementVNode as a, unref as t, normalizeClass as i, createCommentVNode as s, createVNode as V, withCtx as o, createTextVNode as c, toDisplayString as n, createBlock as f } from "vue";
+import "../typography/Heading.vue.js";
+import u from "../typography/Text.vue.js";
+import { COLORS as b } from "../../consts/colors.js";
+import { ToggleTestIdModifiers as d } from "../../testids/index.js";
+const $ = ["data-testid"], k = ["data-testid"], E = { class: "toggle-head" }, I = ["disabled", "checked", "data-testid"], z = /* @__PURE__ */ h({
+  __name: "Toggle",
+  props: {
+    modelValue: { type: Boolean },
+    activeText: { default: void 0 },
+    inactiveText: { default: void 0 },
+    errorText: { default: void 0 },
+    helperText: { default: void 0 },
+    isDisabled: { type: Boolean, default: !1 },
+    isLoading: { type: Boolean, default: !1 },
+    color: { default: b.PRIMARY_500 },
+    testId: { default: "" }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: x }) {
+    const r = e;
+    v((g) => ({
+      "2dc32b31": e.color
+    }));
+    const T = () => {
+      r.isDisabled || x("update:modelValue", !r.modelValue);
+    };
+    return (g, y) => (l(), m("div", null, [
+      a("div", {
+        class: "toggle-wrap",
+        "data-testid": `${e.testId}-${t(d).WRAPPER}`
+      }, [
+        a("div", {
+          class: i(["toggle-body", { "toggle-active": e.modelValue, "toggle-disabled": e.isDisabled }]),
+          "data-testid": `${e.testId}-${t(d).BODY}`,
+          onClick: T
+        }, [
+          a("div", E, [
+            e.isLoading ? (l(), m("span", {
+              key: 0,
+              class: i(["loader", {
+                "loader-active": e.modelValue
+              }])
+            }, null, 2)) : s("", !0)
+          ])
+        ], 10, k),
+        a("input", {
+          type: "checkbox",
+          disabled: e.isDisabled,
+          checked: e.modelValue,
+          "data-testid": `${e.testId}-${t(d).FIELD}`,
+          class: "checkbox"
+        }, null, 8, I),
+        V(t(u), {
+          size: "sm",
+          "is-truncated": "",
+          class: i(["item-text", { "text-disabled": e.isDisabled }]),
+          "test-id": `${e.testId}-${t(d).TEXT}`
+        }, {
+          default: o(() => [
+            c(n(e.modelValue ? e.activeText : e.inactiveText), 1)
+          ]),
+          _: 1
+        }, 8, ["class", "test-id"])
+      ], 8, $),
+      a("div", null, [
+        e.helperText ? (l(), f(t(u), {
+          key: 0,
+          size: "caption",
+          class: "helper-text",
+          "test-id": `${e.testId}-${t(d).HELPER_TEXT}`
+        }, {
+          default: o(() => [
+            c(n(e.helperText), 1)
+          ]),
+          _: 1
+        }, 8, ["test-id"])) : s("", !0),
+        e.errorText ? (l(), f(t(u), {
+          key: 1,
+          size: "caption",
+          class: i(["error-text", { "error-and-help": !!e.helperText }]),
+          "test-id": `${e.testId}-${t(d).ERROR_TEXT}`
+        }, {
+          default: o(() => [
+            c(n(e.errorText), 1)
+          ]),
+          _: 1
+        }, 8, ["class", "test-id"])) : s("", !0)
+      ])
+    ]));
+  }
+});
+export {
+  z as default
+};

package/components/toggle/index.js

@@ -0,0 +1,6 @@
+import o from "./Toggle.vue.js";
+const g = () => [o];
+export {
+  o as Toggle,
+  g as ToggleTypes
+};

package/components/tooltip/TextWithTitleContent.vue.js

@@ -0,0 +1,7 @@
+import t from "./TextWithTitleContent.vue2.js";
+/* empty css                           */import e from "../../_virtual/_plugin-vue_export-helper.js";
+// import "../../TextWithTitleContent.vue_vue_type_style_index_0_scoped_7da6e1ca_lang.css"; //*');
+const a = /* @__PURE__ */ e(t, [["__scopeId", "data-v-7da6e1ca"]]);
+export {
+  a as default
+};

package/components/tooltip/TextWithTitleContent.vue2.js

@@ -0,0 +1,46 @@
+ import "../../TextWithTitleContent.vue_vue_type_style_index_0_scoped_7da6e1ca_lang.css"; import { defineComponent as l, openBlock as f, createElementBlock as m, createElementVNode as o, createVNode as n, unref as t, withCtx as d, createTextVNode as i, toDisplayString as r } from "vue";
+import "../typography/Heading.vue.js";
+import a from "../typography/Text.vue.js";
+import { TooltipTestIdModifiers as c } from "../../testids/index.js";
+const u = { class: "content-wrap" }, p = { class: "content-header" }, T = { class: "content-body" }, g = /* @__PURE__ */ l({
+  __name: "TextWithTitleContent",
+  props: {
+    text: null,
+    header: null,
+    testId: { default: "" }
+  },
+  setup(e) {
+    const s = e;
+    return (_, h) => (f(), m("div", u, [
+      o("div", p, [
+        n(t(a), {
+          size: "md",
+          "is-truncated": !1,
+          strong: "",
+          "test-id": `${s.testId}-${t(c).TEXT}`
+        }, {
+          default: d(() => [
+            i(r(e.header), 1)
+          ]),
+          _: 1
+        }, 8, ["test-id"])
+      ]),
+      o("div", T, [
+        n(t(a), {
+          size: "xs",
+          "is-truncated": !1,
+          strong: "",
+          "test-id": `${s.testId}-${t(c).TEXT}`
+        }, {
+          default: d(() => [
+            i(r(e.text), 1)
+          ]),
+          _: 1
+        }, 8, ["test-id"])
+      ])
+    ]));
+  }
+});
+export {
+  g as default
+};

package/components/tooltip/Tooltip.vue.js

@@ -0,0 +1,84 @@
+import { defineComponent as y, ref as r, useSlots as v, watch as m, openBlock as n, createBlock as s, unref as a, mergeProps as w, withCtx as u, renderSlot as h, createTextVNode as g, toDisplayString as S, createElementVNode as k, nextTick as $ } from "vue";
+import I from "./TextWithTitleContent.vue.js";
+import "../typography/Heading.vue.js";
+import W from "../typography/Text.vue.js";
+import { Tooltip as b } from "floating-vue";
+import { TooltipTestIdModifiers as x } from "../../testids/index.js";
+const N = /* @__PURE__ */ y({
+  __name: "Tooltip",
+  props: {
+    text: { default: null },
+    header: { default: null },
+    delay: { default: 0 },
+    triggers: { default: () => ["hover"] },
+    forceShowWithTruncate: { type: Boolean, default: !1 },
+    placement: { default: "top" },
+    theme: { default: "default" },
+    disabled: { type: Boolean, default: !1 },
+    testId: { default: "" }
+  },
+  setup(e) {
+    const o = e, i = r(!1), l = r(null), d = r(null), T = v(), f = () => i.value ? o.text : null, c = async () => {
+      if (i.value = !0, await $(), !o.forceShowWithTruncate) {
+        const t = d.value?.children && d.value.children[0];
+        (t && window.getComputedStyle(t, null).getPropertyValue("text-overflow")) === "ellipsis" && (i.value = t.offsetWidth < t.scrollWidth);
+      }
+    };
+    return m(
+      () => o.text,
+      async () => {
+        await c(), l.value = f();
+      },
+      { immediate: !0 }
+    ), m(
+      () => T.default,
+      async () => {
+        await c(), l.value = f();
+      },
+      { immediate: !0 }
+    ), (t, p) => (n(), s(a(b), w(t.$props, {
+      theme: e.theme,
+      "no-auto-focus": "",
+      triggers: e.triggers,
+      delay: { show: e.delay, hide: 0 },
+      placement: e.placement,
+      disabled: e.disabled || e.text && !l.value,
+      "data-testid": `${e.testId}-${a(x).TRIGGER}`,
+      "auto-hide": ""
+    }), {
+      popper: u(() => [
+        h(t.$slots, "tooltip", { text: l.value }, () => [
+          e.header ? (n(), s(I, {
+            key: 1,
+            text: e.text,
+            header: e.header
+          }, null, 8, ["text", "header"])) : (n(), s(a(W), {
+            key: 0,
+            size: "sm",
+            "is-truncated": !1,
+            strong: "",
+            "test-id": `${e.testId}-${a(x).TEXT}`
+          }, {
+            default: u(() => [
+              g(S(l.value), 1)
+            ]),
+            _: 1
+          }, 8, ["test-id"]))
+        ])
+      ]),
+      default: u(() => [
+        k("div", {
+          ref_key: "container",
+          ref: d,
+          class: "container"
+        }, [
+          h(t.$slots, "default")
+        ], 512)
+      ]),
+      _: 3
+    }, 16, ["theme", "triggers", "delay", "placement", "disabled", "data-testid"]));
+  }
+});
+export {
+  N as default
+};

package/components/tooltip/Tooltip.vue2.js

@@ -0,0 +1,5 @@
+import e from "./Tooltip.vue.js";
+/* empty css              */console.log('global// import "../../Tooltip.vue_vue_type_style_index_0_lang.css"; //');
+export {
+  e as default
+};

package/components/tooltip/index.js

@@ -0,0 +1,7 @@
+import "./Tooltip.vue2.js";
+import o from "./Tooltip.vue.js";
+const i = () => [o];
+export {
+  o as Tooltip,
+  i as TooltipTypes
+};

package/components/typography/Heading.vue.js

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

package/components/typography/Heading.vue2.js

@@ -0,0 +1,25 @@
+ import "../../Heading.vue_vue_type_style_index_0_scoped_19878c4b_lang.css"; import { defineComponent as r, computed as o, openBlock as s, createBlock as d, resolveDynamicComponent as i, unref as a, normalizeClass as c, withCtx as u, renderSlot as f } from "vue";
+import { HeaderTestIdModifiers as m } from "../../testids/index.js";
+const C = /* @__PURE__ */ r({
+  __name: "Heading",
+  props: {
+    isTruncated: { type: Boolean },
+    level: { default: "1" },
+    testId: { default: "" }
+  },
+  setup(e) {
+    const t = e, l = o(() => t.level === "label" ? "label" : `h${t.level}`);
+    return (n, p) => (s(), d(i(a(l)), {
+      class: c(["heading", { truncate: e.isTruncated }]),
+      "data-testid": `${e.testId}-${a(m).HEADER}`
+    }, {
+      default: u(() => [
+        f(n.$slots, "default", {}, void 0, !0)
+      ]),
+      _: 3
+    }, 8, ["class", "data-testid"]));
+  }
+});
+export {
+  C as default
+};

package/components/typography/Text.vue.js

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

package/components/typography/Text.vue2.js

@@ -0,0 +1,23 @@
+ import "../../Text.vue_vue_type_style_index_0_scoped_94bd409b_lang.css"; import { defineComponent as r, computed as a, openBlock as d, createElementBlock as i, normalizeClass as c, unref as e, renderSlot as l } from "vue";
+import { TextTestIdModifiers as u } from "../../testids/index.js";
+const m = ["data-testid"], x = /* @__PURE__ */ r({
+  __name: "Text",
+  props: {
+    isTruncated: { type: Boolean },
+    strong: { type: Boolean },
+    size: { default: "md" },
+    testId: { default: "" }
+  },
+  setup(t) {
+    const s = t, o = a(() => `text-size-${s.size}`);
+    return (n, f) => (d(), i("span", {
+      class: c(["text", { strong: t.strong, [e(o)]: !0, truncate: t.isTruncated }]),
+      "data-testid": `${t.testId}-${e(u).TEXT}`
+    }, [
+      l(n.$slots, "default", {}, void 0, !0)
+    ], 10, m));
+  }
+});
+export {
+  x as default
+};

package/components/typography/index.js

@@ -0,0 +1,8 @@
+import o from "./Heading.vue.js";
+import p from "./Text.vue.js";
+const e = () => [o, p];
+export {
+  o as Heading,
+  p as Text,
+  e as TypographyTypes
+};

package/components/typography/v4/Typography.vue.js

@@ -0,0 +1,7 @@
+import o from "./Typography.vue2.js";
+/* empty css                 */import p from "../../../_virtual/_plugin-vue_export-helper.js";
+// import "../../../Typography.vue_vue_type_style_index_0_scoped_94f65484_lang.css"; //*');
+const t = /* @__PURE__ */ p(o, [["__scopeId", "data-v-94f65484"]]);
+export {
+  t as default
+};

package/components/typography/v4/Typography.vue2.js

@@ -0,0 +1,58 @@
+ import "../../../Typography.vue_vue_type_style_index_0_scoped_94f65484_lang.css"; import { defineComponent as i, computed as a, openBlock as c, createBlock as f, resolveDynamicComponent as h, unref as n, normalizeClass as b, withCtx as u, renderSlot as d } from "vue";
+const v = /* @__PURE__ */ i({
+  __name: "Typography",
+  props: {
+    isTruncated: { type: Boolean },
+    variant: { default: "body1" }
+  },
+  setup(e) {
+    const t = e, o = {
+      title: "font-title",
+      h1: "font-heading-1",
+      h2: "font-heading-2",
+      h3: "font-heading-3",
+      h4: "font-heading-4",
+      h5: "font-heading-5",
+      h6: "font-heading-6",
+      body1: "font-body-1",
+      body2: "font-body-2",
+      subtitle1: "font-subtitle-1",
+      subtitle2: "font-subtitle-2",
+      button: "font-button",
+      caption: "font-caption",
+      tableLabel: "font-table-label",
+      inputLabel: "font-input-label",
+      tabLabel1: "font-tab-label1",
+      tabLabel2: "font-tab-label2",
+      chipLabel: "font-chip-label",
+      chart1: "font-chart-1",
+      chart2: "font-chart-2",
+      overline: "font-overline"
+    }, l = a(() => {
+      switch (t.variant) {
+        case "title":
+          return "h1";
+        case "h1":
+        case "h2":
+        case "h3":
+        case "h4":
+        case "h5":
+        case "h6":
+          return t.variant;
+        default:
+          return "span";
+      }
+    }), r = a(() => o[t.variant]);
+    return (s, p) => (c(), f(h(n(l)), {
+      class: b({ [n(r)]: !0, truncate: e.isTruncated })
+    }, {
+      default: u(() => [
+        d(s.$slots, "default", {}, void 0, !0)
+      ]),
+      _: 3
+    }, 8, ["class"]));
+  }
+});
+export {
+  v as default
+};

package/components/typography/v4/index.js

@@ -0,0 +1,6 @@
+import p from "./Typography.vue.js";
+const r = () => [p];
+export {
+  p as Typography,
+  r as TypographyTypesV4
+};

package/design-foundation.stories/colors/ColorsStoryWrapper.vue.d.ts

@@ -1,3 +1,3 @@
-import '../../style/v4/colors.css';
+import '../../style/v4/colors.scss';
 declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
 export default _default;

package/index.js

@@ -0,0 +1,185 @@
+import './MenuItem.vue_vue_type_style_index_0_scoped_c7e837fa_lang.css';
+import { AppTriggerTypes as T } from "./components/appTrigger/index.js";
+import { AutocompleteDropdownTypes as c } from "./components/autocompleteDropdown/index.js";
+import { MenuItemTypes as I } from "./components/menuItem/index.js";
+import { MenuTypes as E } from "./components/menu/index.js";
+import { AppIconTypes as $ } from "./components/appIcon/index.js";
+import { RadioButtonTypes as F } from "./components/radioButton/index.js";
+import { Snackbar as C } from "./components/snackbar/index.js";
+import { FloatingToolbarTypes as B } from "./components/floatingToolbar/index.js";
+import { IncludeExcludeTypes as P } from "./components/includeExclude/index.js";
+import { CssBaselineTypes as w } from "./components/cssBaseline/index.js";
+import { ID_INJECTION_KEY as H, useId as O } from "./composables/useId.js";
+import { EmptyStateTypes as N } from "./components/emptyState/index.js";
+import { TableTypes as G } from "./components/table/index.js";
+import { DialogTypes as K } from "./components/dialog/index.js";
+import { FilterPanelTypes as Y } from "./components/filtersPanel/index.js";
+import { FilterDropdownTypes as q } from "./components/filterDropdown/index.js";
+import { TabsTypes as L } from "./components/tabs/index.js";
+import { CheckboxTypes as U } from "./components/checkbox/index.js";
+import { IconTypes as X } from "./components/icon/index.js";
+import { SkeletonTypes as ee } from "./components/skeleton/index.js";
+import { TypographyTypes as re } from "./components/typography/index.js";
+import { TypographyTypesV4 as pe } from "./components/typography/v4/index.js";
+import { PopoverTypes as fe } from "./components/popover/index.js";
+import * as e from "./components/button/v3/index.js";
+import * as o from "./components/button/v4/index.js";
+import * as r from "./components/chip/v3/index.js";
+import * as t from "./components/chip/v4/index.js";
+import * as p from "./components/switch/v3/index.js";
+import * as a from "./components/switch/v4/index.js";
+import * as f from "./components/dropdown/v3/index.js";
+import * as m from "./components/dropdown/v4/index.js";
+import * as x from "./components/search/v3/index.js";
+import * as s from "./components/search/v4/index.js";
+import * as l from "./components/input/v3/index.js";
+import * as d from "./components/input/v4/index.js";
+import { ToggleTypes as xe } from "./components/toggle/index.js";
+import { TooltipTypes as le } from "./components/tooltip/index.js";
+import { TextAreaTypes as ue } from "./components/textArea/index.js";
+import { EditableTypes as ie } from "./components/table-cells/index.js";
+import { useToggle as ye } from "./composables/useToggle.js";
+import { useSearch as ge } from "./composables/useSearch.js";
+import { DateRangeTypes as be } from "./components/dateRange/index.js";
+import { DatePickerTypes as De } from "./components/datePicker/index.js";
+import { BannerTypes as Ae } from "./components/banner/index.js";
+import { default as ke } from "./components/appTrigger/AppTrigger.vue.js";
+import { default as he } from "./components/autocompleteDropdown/AutocompleteDropdown.vue.js";
+import { default as Se } from "./components/menuItem/MenuItem.vue.js";
+import { default as Re } from "./components/menu/Menu.vue.js";
+import { default as Me } from "./components/appIcon/AppIcon.vue.js";
+import { default as Oe } from "./components/radioButton/RadioButton.vue.js";
+import { default as Ne } from "./components/radioButton/RadioGroup.vue.js";
+import { snackbarEmits as Ge, snackbarTypes as Je } from "./components/snackbar/snackbar.types.js";
+import { default as Ve } from "./components/floatingToolbar/FloatingToolbar.vue.js";
+import { default as je } from "./components/includeExclude/IncludeExclude.vue.js";
+import { default as ze } from "./components/includeExclude/IncludeExcludeDragDrop.vue.js";
+import { default as Qe } from "./components/includeExclude/IncludeExcludeOption.vue.js";
+import { default as We } from "./components/includeExclude/IncludeExcludeOptionDraggable.vue.js";
+import { default as Ze } from "./components/includeExclude/IncludeExcludeAppTrigger.vue.js";
+import { default as oo } from "./components/includeExclude/IncludeExcludeAppHeader.vue.js";
+import { default as to } from "./components/includeExclude/IncludeExcludeChipFilter.vue.js";
+import { default as ao } from "./components/cssBaseline/CssBaseline.vue.js";
+import { default as mo } from "./components/emptyState/EmptyState.vue.js";
+import { default as so } from "./components/table/Table.vue.js";
+import { TableContext as uo } from "./components/table/TableContext.js";
+import { default as io } from "./components/dialog/Dialog.vue.js";
+import { Reason as yo } from "./components/dialog/Reason.js";
+import { default as go } from "./components/filtersPanel/FiltersPanel.vue.js";
+import { default as bo } from "./components/filtersPanel/FilterSearchInput.vue.js";
+import { useHiddenFilter as Do } from "./components/filtersPanel/useHiddenFilter.js";
+import { default as Ao } from "./components/filterDropdown/FilterDropdown.vue.js";
+import { default as ko } from "./components/filterDropdown/AddFilterButton.vue.js";
+import { default as ho } from "./components/tabs/Tabs.vue.js";
+import { default as So } from "./components/checkbox/Checkbox.vue.js";
+import { default as Ro } from "./components/icon/Icon.vue.js";
+import { icons as Mo } from "./components/icon/icons/index.js";
+import { default as Oo } from "./components/skeleton/Skeleton.vue.js";
+import { default as No } from "./components/typography/Heading.vue.js";
+import { default as Go } from "./components/typography/Text.vue.js";
+import { default as Ko } from "./components/typography/v4/Typography.vue.js";
+import { default as Yo } from "./components/popover/Popover.vue.js";
+import { default as qo } from "./components/toggle/Toggle.vue.js";
+import { default as Lo } from "./components/tooltip/Tooltip.vue.js";
+import { default as Uo } from "./components/textArea/TextArea.vue.js";
+import { default as Xo } from "./components/table-cells/Editable.vue.js";
+import { EditableContext as er, useEditableContext as or } from "./components/table-cells/EditableContext.js";
+import { default as tr } from "./components/dateRange/DateRange.vue.js";
+import { default as ar } from "./components/datePicker/DatePicker.vue.js";
+import { default as mr } from "./components/banner/Banner.vue.js";
+const u = {
+  ...r,
+  ...t,
+  ...p,
+  ...a,
+  ...e,
+  ...o,
+  ...f,
+  ...m,
+  ...x,
+  ...s,
+  ...l,
+  ...d
+};
+export {
+  ko as AddFilterButton,
+  Me as AppIcon,
+  $ as AppIconTypes,
+  ke as AppTrigger,
+  T as AppTriggerTypes,
+  he as AutocompleteDropdown,
+  c as AutocompleteDropdownTypes,
+  mr as Banner,
+  Ae as BannerTypes,
+  So as Checkbox,
+  U as CheckboxTypes,
+  ao as CssBaseline,
+  w as CssBaselineTypes,
+  ar as DatePicker,
+  De as DatePickerTypes,
+  tr as DateRange,
+  be as DateRangeTypes,
+  io as Dialog,
+  K as DialogTypes,
+  Xo as Editable,
+  er as EditableContext,
+  ie as EditableTypes,
+  mo as EmptyState,
+  N as EmptyStateTypes,
+  Ao as FilterDropdown,
+  q as FilterDropdownTypes,
+  Y as FilterPanelTypes,
+  bo as FilterSearchInput,
+  go as FiltersPanel,
+  Ve as FloatingToolbar,
+  B as FloatingToolbarTypes,
+  No as Heading,
+  H as ID_INJECTION_KEY,
+  Ro as Icon,
+  X as IconTypes,
+  je as IncludeExclude,
+  oo as IncludeExcludeAppHeader,
+  Ze as IncludeExcludeAppTrigger,
+  to as IncludeExcludeChipFilter,
+  ze as IncludeExcludeDragDrop,
+  Qe as IncludeExcludeOption,
+  We as IncludeExcludeOptionDraggable,
+  P as IncludeExcludeTypes,
+  Re as Menu,
+  Se as MenuItem,
+  I as MenuItemTypes,
+  E as MenuTypes,
+  Yo as Popover,
+  fe as PopoverTypes,
+  Oe as RadioButton,
+  F as RadioButtonTypes,
+  Ne as RadioGroup,
+  yo as Reason,
+  Oo as Skeleton,
+  ee as SkeletonTypes,
+  C as Snackbar,
+  so as Table,
+  uo as TableContext,
+  G as TableTypes,
+  ho as Tabs,
+  L as TabsTypes,
+  Go as Text,
+  Uo as TextArea,
+  ue as TextAreaTypes,
+  qo as Toggle,
+  xe as ToggleTypes,
+  Lo as Tooltip,
+  le as TooltipTypes,
+  Ko as Typography,
+  re as TypographyTypes,
+  pe as TypographyTypesV4,
+  u as default,
+  Mo as icons,
+  Ge as snackbarEmits,
+  Je as snackbarTypes,
+  or as useEditableContext,
+  Do as useHiddenFilter,
+  O as useId,
+  ge as useSearch,
+  ye as useToggle
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ironsource/shared-ui",
-  "version": "2.0.0-rc.2",
+  "version": "2.0.0-rc.4",
   "engines": {
     "npm": ">=7.0.0",
     "node": ">=16.0.0"
@@ -120,6 +120,7 @@
     "nodejs-file-downloader": "^4.12.1",
     "npm": "^10.2.3",
     "postcss": "^8.4.31",
+    "prepend-file": "^2.0.1",
     "prettier": "^3.1.0",
     "prismjs": "^1.29.0",
     "puppeteer": "^21.5.1",
@@ -191,7 +192,7 @@
     "./percentageInput": "./components/input/v3/PercentageInput.vue.js",
     "./textArea": "./components/textArea/TextArea.vue.js",
     "./styleguide": "./styleguide.scss",
-    "./commonCssVariables": "./commonCssVariables.scss",
+    "./styleguideV4": "./style/styleguideV4.scss",
     "./banner": "./components/banner/Banner.vue.js",
     "./typography": "./components/typography/v4/Typography.vue.js"
   },

package/style/v4/grid.css

@@ -0,0 +1 @@
+.light-theme-v4{--background-default: #FFFFFF;--background-paper: hsl(0, 0%, 99.0%);--background-model-elevation: #FFFFFF;--background-backdrop: hsla(0, 0%, 0%, 0.11);--background-paper-elevation-0: hsl(0, 0%, 97.5%);--background-paper-elevation-1: hsl(0, 0%, 94.6%);--background-paper-elevation-2: hsl(0, 0%, 92.0%);--background-paper-elevation-3: hsl(0, 0%, 89.5%);--background-paper-elevation-4: hsl(0, 0%, 86.8%);--background-paper-elevation-5: hsl(0, 0%, 83.0%);--background-paper-elevation-6: hsl(0, 0%, 73.2%);--background-paper-elevation-7: hsl(0, 0%, 55.2%);--background-paper-elevation-8: hsl(0, 0%, 50.3%);--background-paper-elevation-9: hsl(0, 0%, 39.3%);--action-primary: hsl(0, 0%, 12.5%);--action-active: hsl(0, 0%, 50.3%);--action-hover: hsla(0, 0%, 0%, 0.05);--action-selected: hsla(0, 0%, 92%, 1);--action-disabled: hsla(0, 0%, 87%, 1);--action-disabled-background: hsla(0, 0%, 95%, 1);--action-focus: hsl(0, 0%, 92.0%);--action-outlined-border: hsla(0, 0%, 73%, 1);--default-light: hsl(0, 0%, 89.5%);--default-main: hsl(0 0% 94.51%);--default-dark: hsl(0, 0%, 92.0%);--default-outlined-border: hsl(0, 0%, 73.2%);--default-contrast-text: hsl(0, 0%, 12.5%);--default-button-contrast-text: hsla(0, 0%, 0%, 1);--common-white: #FFFFFF;--common-black: #000000;--common-inverse-white: #FFFFFF;--common-inverse-black: #000000;--common-divider: hsl(0, 0%, 86.8%);--common-divider-elevation-0: hsla(0, 0%, 89%, 1);--text-primary: hsl(0, 0%, 12.5%);--text-secondary: hsl(0, 0%, 39.3%);--text-disabled: hsl(0 0% 73.33%);--primary-lighter: hsl(209, 100%, 96.5%);--primary-light: hsl(209, 95.0%, 90.1%);--primary-main: hsl(206, 100%, 50.0%);--primary-main-8-p: hsla(206, 100%, 50%, 0.08);--primary-main-50-p: hsla(206, 100%, 50%, 0.5);--primary-dark: hsl(208, 93.5%, 47.4%);--primary-darker: hsl(211, 90.0%, 42.0%);--primary-outlined-border: hsl(206, 100%, 50.0%);--primary-contrast-text: hsl(216, 71.0%, 23.0%);--primary-button-contrast-text: hsla(0, 0%, 100%, 1);--info-lighter: hsl(223, 98.4%, 97.1%);--info-light: hsl(224, 87.1%, 92.0%);--info-main: hsl(226, 70.0%, 55.5%);--info-main-8-p: hsla(226, 70%, 55.5%, 0.08);--info-main-50-p: hsla(226, 70%, 55.5%, 0.5);--info-dark: hsl(226, 58.6%, 51.3%);--info-darker: hsl(226, 55.0%, 45.0%);--info-outlined-border: hsl(226, 70.0%, 55.5%);--info-contrast-text: hsl(226, 50.0%, 24.0%);--info-button-contrast-text: hsla(0, 0%, 100%, 1);--success-lighter: hsl(139, 55.2%, 94.5%);--success-light: hsl(141, 43.7%, 86.0%);--success-main: hsl(151, 55.0%, 41.5%);--success-main-8-p: hsla(151, 55%, 41.5%, 0.08);--success-main-50-p: hsla(151, 55%, 41.5%, 0.5);--success-dark: hsl(152, 57.5%, 37.6%);--success-darker: hsl(153, 67.0%, 28.5%);--success-outlined-border: hsl(151, 55.0%, 41.5%);--success-contrast-text: hsl(155, 40.0%, 16.5%);--success-button-contrast-text: hsla(0, 0%, 100%, 1);--warning-lighter: hsl(45, 100%, 90.8%);--warning-light: hsl(40, 100%, 81.5%);--warning-main: hsl(42, 100%, 62.0%);--warning-main-8-p: hsla(42, 100%, 62%, 0.08);--warning-main-50-p: hsla(42, 100%, 62%, 0.5);--warning-dark: hsl(42, 100%, 55.0%);--warning-darker: hsl(25, 50.0%, 38.0%);--warning-outlined-border: hsl(42, 100%, 62.0%);--warning-contrast-text: hsl(25, 40.0%, 22.0%);--warning-button-contrast-text: hsla(24, 40%, 22%, 1);--error-lighter: hsl(360, 100%, 96.8%);--error-light: hsl(360, 90.2%, 91.9%);--error-main: hsl(358, 75.0%, 59.0%);--error-main-8-p: hsla(358, 75%, 59%, 0.08);--error-main-50-p: hsla(358, 75%, 59%, 0.5);--error-dark: hsl(358, 67.4%, 54.6%);--error-darker: hsl(358, 65.0%, 47.0%);--error-outlined-border: hsl(358, 75.0%, 59.0%);--error-contrast-text: hsl(350, 63.0%, 24.0%);--error-button-contrast-text: hsla(0, 0%, 100%, 1);--aba: #FFC134;--abb: #4F4FF5}.light-theme-v4{--border-radius-xs: 2px;--border-radius-sm: 4px;--border-radius-md: 6px;--border-radius-lg: 8px;--border-radius-xl: 16px;--border-radius-full: 100px}.light-theme-v4{--elevation-xs: 0px 1px 2px rgba(16, 24, 40, 0.05);--elevation-sm: 0px 1px 2px rgba(16, 24, 40, 0.06), 0px 1px 3px rgba(16, 24, 40, 0.1);--elevation-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.12);--elevation-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08);--elevation-xl: 0px 8px 8px -4px rgba(16, 24, 40, 0.03), 0px 20px 24px -6px rgba(16, 24, 40, 0.08);--elevation-xxl: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);--elevation-xxxl: 0px 19px 32px 2px rgba(44, 45, 45, 0.14);--elevation-sl: 0px 27px 27px 2px rgba(44, 45, 45, 0.14)}.light-theme-v4{--spacing-tokenset: 0px;--spacing-25: 2px;--spacing-50: 4px;--spacing-75: 6px;--spacing-100: 8px;--spacing-125: 10px;--spacing-150: 12px;--spacing-200: 16px;--spacing-250: 20px;--spacing-300: 24px;--spacing-400: 32px;--spacing-500: 40px;--spacing-600: 48px;--spacing-700: 56px;--spacing-800: 64px;--spacing-900: 72px;--spacing-1000: 80px}/*# sourceMappingURL=grid.css.map */

package/style/v4/grid.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["colors.scss","border-radius.scss","elevations.scss","spacings.scss"],"names":[],"mappings":"AAAA,gBACE,8BACA,sCACA,sCACA,6CACA,kDACA,kDACA,kDACA,kDACA,kDACA,kDACA,kDACA,kDACA,kDACA,kDAEA,oCACA,mCACA,sCACA,uCACA,uCACA,kDACA,kCACA,8CAEA,mCACA,iCACA,kCACA,6CACA,2CACA,mDAEA,wBACA,wBACA,gCACA,gCACA,oCACA,kDAEA,kCACA,oCACA,kCAEA,yCACA,wCACA,sCACA,+CACA,+CACA,uCACA,yCACA,iDACA,gDACA,qDAEA,uCACA,qCACA,oCACA,6CACA,6CACA,oCACA,sCACA,+CACA,6CACA,kDAEA,0CACA,wCACA,uCACA,gDACA,gDACA,uCACA,yCACA,kDACA,gDACA,qDAEA,wCACA,sCACA,qCACA,8CACA,8CACA,qCACA,wCACA,gDACA,+CACA,sDAEA,uCACA,sCACA,qCACA,4CACA,4CACA,qCACA,uCACA,gDACA,8CACA,mDAEA,eACA,eCnGF,gBACI,wBACA,wBACA,wBACA,wBACA,yBACA,4BCNJ,gBACE,mDACA,sFACA,wDACA,0DACA,mGACA,4DACA,2DACA,yDCRF,gBACE,wBACA,kBACA,kBACA,kBACA,mBACA,oBACA,oBACA,oBACA,oBACA,oBACA,oBACA,oBACA,oBACA,oBACA,oBACA,oBACA","file":"grid.css"}