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

package/components/search/v3/Search.vue.js

@@ -1,5 +1,5 @@
 import { defineComponent, openBlock, createElementBlock, normalizeClass, unref, createBlock, createCommentVNode, createElementVNode } from 'vue';
-import Icon from '../../icon/Icon.vue.js';
+import Icon from '../../icon/v3/Icon.vue.js';
 import { SearchTestIdModifiers } from '../../../testids/index.vue.js';
 import { searchCommon } from '../common/Search.common.vue.js';
 /* empty css                                                        */import _export_sfc from '../../../_virtual/plugin-vue_export-helper.vue.js';
@@ -65,6 +65,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var Search = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5ec84660"]]);
+var Search = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-64d62abc"]]);
 
 export { Search as default };

package/components/search/v4/SearchV4.vue.js

@@ -1,5 +1,5 @@
 import { defineComponent, openBlock, createElementBlock, normalizeClass, unref, createBlock, createCommentVNode, createElementVNode } from 'vue';
-import Icon from '../../icon/Icon.vue.js';
+import Icon from '../../icon/v3/Icon.vue.js';
 import { SearchTestIdModifiers } from '../../../testids/index.vue.js';
 import { searchCommon } from '../common/Search.common.vue.js';
 /* empty css                                                          */import _export_sfc from '../../../_virtual/plugin-vue_export-helper.vue.js';
@@ -65,6 +65,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var Search = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-2c679efe"]]);
+var Search = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-534adcc0"]]);
 
 export { Search as default };

package/components/shared/FieldHelpText.vue.d.ts

@@ -0,0 +1,42 @@
+import { FeedbackVariant } from '@/components/shared/commonTypes';
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    text: string;
+    variant?: FeedbackVariant;
+    testId?: string;
+    showIcon?: boolean;
+}>, {
+    text: string;
+    variant: any;
+    testId: string;
+    showIcon: 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<{
+    text: string;
+    variant?: FeedbackVariant;
+    testId?: string;
+    showIcon?: boolean;
+}>, {
+    text: string;
+    variant: any;
+    testId: string;
+    showIcon: boolean;
+}>>>, {
+    text: string;
+    testId: string;
+    variant: FeedbackVariant;
+    showIcon: 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/shared/FieldHelpText.vue.js

@@ -0,0 +1,54 @@
+import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, unref, createBlock, createCommentVNode, createVNode, withCtx, createTextVNode, toDisplayString } from 'vue';
+import Icon from '../icon/v3/Icon.vue.js';
+import Typography from '../typography/v4/Typography.vue.js';
+import { FieldHelpTextTestIdModifiers } from '../../testids/index.vue.js';
+/* empty css                                                               */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
+
+import "../../FieldHelpText.vue_vue_type_style_index_0_scoped_true_lang.css";
+const _hoisted_1 = ["data-testid"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "FieldHelpText",
+  props: {
+    text: { default: "" },
+    variant: { default: null },
+    testId: { default: "" },
+    showIcon: { type: Boolean, default: true }
+  },
+  setup(__props) {
+    const props = __props;
+    const iconName = computed(() => {
+      const iconsMap = {
+        warning: "warning-v4",
+        error: "warning-octagon",
+        success: "check-circle"
+      };
+      return props.variant ? iconsMap[props.variant] : "info-v4";
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["field-help", [`field-help--${__props.variant}`]]),
+        "data-testid": `${__props.testId}-${unref(FieldHelpTextTestIdModifiers).CONTAINER}`
+      }, [
+        __props.showIcon ? (openBlock(), createBlock(unref(Icon), {
+          key: 0,
+          class: "help-icon",
+          name: unref(iconName),
+          "font-size": "sm",
+          "data-testid": `${__props.testId}-${unref(FieldHelpTextTestIdModifiers).ICON}`
+        }, null, 8, ["name", "data-testid"])) : createCommentVNode("", true),
+        createVNode(unref(Typography), {
+          variant: "caption",
+          "data-testid": `${__props.testId}-${unref(FieldHelpTextTestIdModifiers).TEXT}`
+        }, {
+          default: withCtx(() => [
+            createTextVNode(toDisplayString(__props.text), 1)
+          ]),
+          _: 1
+        }, 8, ["data-testid"])
+      ], 10, _hoisted_1);
+    };
+  }
+});
+var FieldHelpText = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-09631350"]]);
+
+export { FieldHelpText as default };

package/components/shared/FieldLabel.vue.d.ts

@@ -0,0 +1,52 @@
+import { TooltipPositions } from '@is-ssp/tooltip/Tooltip.types';
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    label: string;
+    mandatory?: boolean;
+    disabled?: boolean;
+    hoverHelpText?: string;
+    hoverHelpTextPlacement?: TooltipPositions;
+    testId?: string;
+}>, {
+    label: string;
+    testId: string;
+    mandatory: boolean;
+    disabled: boolean;
+    hoverHelpText: string;
+    hoverHelpTextPlacement: 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<{
+    label: string;
+    mandatory?: boolean;
+    disabled?: boolean;
+    hoverHelpText?: string;
+    hoverHelpTextPlacement?: TooltipPositions;
+    testId?: string;
+}>, {
+    label: string;
+    testId: string;
+    mandatory: boolean;
+    disabled: boolean;
+    hoverHelpText: string;
+    hoverHelpTextPlacement: string;
+}>>>, {
+    label: string;
+    testId: string;
+    disabled: boolean;
+    mandatory: boolean;
+    hoverHelpText: string;
+    hoverHelpTextPlacement: TooltipPositions;
+}>;
+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/shared/FieldLabel.vue.js

@@ -0,0 +1,70 @@
+import { defineComponent, openBlock, createElementBlock, normalizeClass, unref, createVNode, withCtx, createTextVNode, toDisplayString, createBlock, createCommentVNode } from 'vue';
+import Icon from '../icon/v3/Icon.vue.js';
+import _sfc_main$1 from '../tooltip/Tooltip.vue.js';
+import Typography from '../typography/v4/Typography.vue.js';
+import { FieldLabelTestIdModifiers } from '../../testids/index.vue.js';
+/* empty css                                                            */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
+
+import "../../FieldLabel.vue_vue_type_style_index_0_scoped_true_lang.css";
+const _hoisted_1 = ["data-testid"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "FieldLabel",
+  props: {
+    label: { default: "" },
+    mandatory: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    hoverHelpText: { default: "" },
+    hoverHelpTextPlacement: { default: "top" },
+    testId: { default: "" }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["field-label", { "field-label--disabled": __props.disabled }]),
+        "data-testid": `${__props.testId}-${unref(FieldLabelTestIdModifiers).CONTAINER}`
+      }, [
+        createVNode(unref(Typography), {
+          class: "label",
+          variant: "inputLabel",
+          "data-testid": `${__props.testId}-${unref(FieldLabelTestIdModifiers).TEXT}`
+        }, {
+          default: withCtx(() => [
+            createTextVNode(toDisplayString(__props.label), 1)
+          ]),
+          _: 1
+        }, 8, ["data-testid"]),
+        __props.mandatory ? (openBlock(), createBlock(unref(Typography), {
+          key: 0,
+          variant: "h3",
+          class: "mandatory",
+          "data-testid": `${__props.testId}-${unref(FieldLabelTestIdModifiers).MANDATORY}`
+        }, {
+          default: withCtx(() => [
+            createTextVNode("*")
+          ]),
+          _: 1
+        }, 8, ["data-testid"])) : createCommentVNode("", true),
+        __props.hoverHelpText ? (openBlock(), createBlock(unref(_sfc_main$1), {
+          key: 1,
+          triggers: ["hover"],
+          text: __props.hoverHelpText,
+          placement: __props.hoverHelpTextPlacement,
+          "data-testid": `${__props.testId}-${unref(FieldLabelTestIdModifiers).TOOLTIP}`,
+          "test-id": __props.testId
+        }, {
+          default: withCtx(() => [
+            createVNode(unref(Icon), {
+              class: "info-icon",
+              name: "question",
+              "font-size": "sm"
+            })
+          ]),
+          _: 1
+        }, 8, ["text", "placement", "data-testid", "test-id"])) : createCommentVNode("", true)
+      ], 10, _hoisted_1);
+    };
+  }
+});
+var FieldLabel = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5cc9cf9a"]]);
+
+export { FieldLabel as default };

package/components/shared/commonTypes.d.ts

@@ -0,0 +1,2 @@
+export declare const FEEDBACK_VARIANTS: readonly ["error", "success", "warning"];
+export type FeedbackVariant = (typeof FEEDBACK_VARIANTS)[number];

package/components/snackbar/Snackbar.vue.js

@@ -1,8 +1,8 @@
 import { defineComponent, ref, computed, onMounted, openBlock, createBlock, Transition, withCtx, withDirectives, createElementVNode, normalizeClass, unref, normalizeStyle, createElementBlock, createVNode, resolveDynamicComponent, createCommentVNode, toDisplayString, renderSlot, createTextVNode, vShow, withModifiers } from 'vue';
 import { useEventListener, useTimeoutFn } from '@vueuse/core';
-import Icon from '../icon/Icon.vue.js';
-import Close from '../icon/icons/Close.vue.js';
-import Check from '../icon/icons/Check.vue.js';
+import Icon from '../icon/v3/Icon.vue.js';
+import Close from '../icon/v3/icons/Close.vue.js';
+import Check from '../icon/v3/icons/Check.vue.js';
 /* empty css                                                                     */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
 import Text from '../typography/Text.vue.js';
 /* empty css                                                                   */import IconButton from '../button/v3/IconButton.vue.js';
@@ -177,6 +177,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var SnackbarConstructor = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-fdd11e8e"]]);
+var SnackbarConstructor = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-0efe5a7a"]]);
 
 export { SnackbarConstructor as default };

package/components/table/Table.vue.js

@@ -2,7 +2,7 @@ import { defineComponent, useCssVars, unref, ref, provide, computed, useSlots, o
 import { TableTestIdModifiers } from '../../testids/index.vue.js';
 /* empty css                                                                     */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
 import Text from '../typography/Text.vue.js';
-/* empty css                                                            *//* empty css                                                                   *//* empty css                                                                           *//* empty css                                                                       */import ScrollButton from '../button/v3/ScrollButton.vue.js';
+/* empty css                                                               *//* empty css                                                                   *//* empty css                                                                           *//* empty css                                                                       */import ScrollButton from '../button/v3/ScrollButton.vue.js';
 import Skeleton from '../skeleton/Skeleton.vue.js';
 import EmptyState from '../emptyState/EmptyState.vue.js';
 import TableHeaderSorter from './TableHeaderSorter.vue.js';

package/components/tabs/Tabs.vue.js

@@ -2,10 +2,10 @@ import { defineComponent, useCssVars, unref, ref, computed, openBlock, createEle
 import { TabsTestIdModifiers } from '../../testids/index.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 Icon from '../icon/v3/Icon.vue.js';
 /* empty css                                                      */
 import "../../Tabs.vue_vue_type_style_index_0_scoped_true_lang.css";
-const _withScopeId = (n) => (pushScopeId("data-v-c22c2836"), n = n(), popScopeId(), n);
+const _withScopeId = (n) => (pushScopeId("data-v-11ec8566"), n = n(), popScopeId(), n);
 const _hoisted_1 = ["data-testid"];
 const _hoisted_2 = ["data-testid", "onClick", "onMouseover"];
 const _hoisted_3 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("div", { class: "tabs-border-line" }, null, -1));
@@ -26,10 +26,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props, { emit }) {
     const props = __props;
     useCssVars((_ctx) => ({
-      "99d50838": unref(selectedTabPosition),
-      "1eedbceb": unref(selectedTabWidth),
-      "c715bc60": unref(selectedTabCenter),
-      "e8e3bca4": unref(hoveredTabCenter)
+      "24698272": unref(selectedTabPosition),
+      "88d81dc6": unref(selectedTabWidth),
+      "d6d51844": unref(selectedTabCenter),
+      "283455e0": unref(hoveredTabCenter)
     }));
     const tabsNewList = ref([]);
     const hoveredTab = ref(null);
@@ -124,6 +124,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var Tabs = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c22c2836"]]);
+var Tabs = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-11ec8566"]]);
 
 export { Tabs as default };

package/components/tooltip/Tooltip.types.d.ts

@@ -0,0 +1,2 @@
+export declare const TOOLTIP_POSITIONS: readonly ["auto", "auto-start", "auto-end", "top", "top-start", "top-end", "right", "right-start", "right-end", "bottom", "bottom-start", "bottom-end", "left", "left-start", "left-end"];
+export type TooltipPositions = (typeof TOOLTIP_POSITIONS)[number];

package/components/tooltip/Tooltip.vue.d.ts

@@ -1,10 +1,11 @@
+import { TooltipPositions } from './Tooltip.types';
 declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     text?: string;
     header?: string;
     delay?: number;
     triggers?: ("hover" | "click" | "focus" | "touch")[];
     forceShowWithTruncate?: boolean;
-    placement?: "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";
+    placement?: TooltipPositions;
     theme?: string;
     disabled?: boolean;
     testId?: string;
@@ -24,7 +25,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     delay?: number;
     triggers?: ("hover" | "click" | "focus" | "touch")[];
     forceShowWithTruncate?: boolean;
-    placement?: "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";
+    placement?: TooltipPositions;
     theme?: string;
     disabled?: boolean;
     testId?: string;
@@ -46,7 +47,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     delay: number;
     triggers: ("hover" | "click" | "focus" | "touch")[];
     forceShowWithTruncate: boolean;
-    placement: "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";
+    placement: TooltipPositions;
     disabled: boolean;
 }>;
 export default _default;

package/components/tooltip/index.d.ts

@@ -35,7 +35,7 @@ declare const TooltipTypes: () => import("vue").DefineComponent<{
         default: boolean;
     };
     placement: {
-        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">;
+        type: import("vue").PropType<"auto" | "auto-start" | "auto-end" | "top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end">;
     } & {
         default: string;
     };
@@ -81,7 +81,7 @@ declare const TooltipTypes: () => import("vue").DefineComponent<{
         default: boolean;
     };
     placement: {
-        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">;
+        type: import("vue").PropType<"auto" | "auto-start" | "auto-end" | "top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end">;
     } & {
         default: string;
     };
@@ -98,7 +98,7 @@ declare const TooltipTypes: () => import("vue").DefineComponent<{
     delay: number;
     triggers: ("hover" | "click" | "focus" | "touch")[];
     forceShowWithTruncate: boolean;
-    placement: "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";
+    placement: "auto" | "auto-start" | "auto-end" | "top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end";
     disabled: boolean;
 }>[];
 export { default as Tooltip } from './Tooltip.vue';

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

@@ -3,7 +3,7 @@ declare const TypographyTypesV4: () => import("vue").DefineComponent<{
         type: import("vue").PropType<boolean>;
     };
     variant: {
-        type: import("vue").PropType<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "title" | "overline" | "body1" | "body2" | "subtitle1" | "subtitle2" | "tableLabel" | "inputLabel" | "tabLabel1" | "tabLabel2" | "chipLabel" | "chart1" | "chart2">;
+        type: import("vue").PropType<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "title" | "body1" | "body2" | "subtitle1" | "subtitle2" | "tableLabel" | "inputLabel" | "tabLabel1" | "tabLabel2" | "chipLabel" | "chart1" | "chart2" | "overline">;
     } & {
         default: string;
     };
@@ -12,12 +12,12 @@ declare const TypographyTypesV4: () => import("vue").DefineComponent<{
         type: import("vue").PropType<boolean>;
     };
     variant: {
-        type: import("vue").PropType<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "title" | "overline" | "body1" | "body2" | "subtitle1" | "subtitle2" | "tableLabel" | "inputLabel" | "tabLabel1" | "tabLabel2" | "chipLabel" | "chart1" | "chart2">;
+        type: import("vue").PropType<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "title" | "body1" | "body2" | "subtitle1" | "subtitle2" | "tableLabel" | "inputLabel" | "tabLabel1" | "tabLabel2" | "chipLabel" | "chart1" | "chart2" | "overline">;
     } & {
         default: string;
     };
 }>>, {
-    variant: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "title" | "overline" | "body1" | "body2" | "subtitle1" | "subtitle2" | "tableLabel" | "inputLabel" | "tabLabel1" | "tabLabel2" | "chipLabel" | "chart1" | "chart2";
+    variant: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "title" | "body1" | "body2" | "subtitle1" | "subtitle2" | "tableLabel" | "inputLabel" | "tabLabel1" | "tabLabel2" | "chipLabel" | "chart1" | "chart2" | "overline";
 }>[];
 export { default as Typography } from './Typography.vue';
 export { TypographyTypesV4 };

package/composables/index.d.ts

@@ -1,3 +1,4 @@
 export * from './useToggle';
 export * from './useSearch';
 export * from './useId';
+export * from './useStorage';

package/composables/useStorage.d.ts

@@ -0,0 +1,5 @@
+export declare enum StorageType {
+    LocalStorage = 0,
+    SessionStorage = 1
+}
+export declare function useStorage(key: string, type?: StorageType, val?: any): any;

package/composables/useStorage.vue.js

@@ -0,0 +1,42 @@
+import { ref, watch } from 'vue';
+
+function useStorage(key, type = 1 /* SessionStorage */, val = null) {
+  const storageType = type === 0 /* LocalStorage */ ? localStorage : sessionStorage;
+  const storedValue = read();
+  if (storedValue) {
+    val = ref(storedValue);
+  } else {
+    val = ref(val);
+    write();
+  }
+  watch(val, () => {
+    write();
+  });
+  function read() {
+    const storedValue2 = storageType.getItem(key);
+    return storedValue2 ? JSON.parse(decodeBase64(storedValue2)) : null;
+  }
+  function write() {
+    if (val.value === "" || val.value === null) {
+      storageType.removeItem(key);
+      return;
+    }
+    storageType.setItem(key, encodeBase64(JSON.stringify(val.value)));
+  }
+  function encodeBase64(data) {
+    return btoa(
+      encodeURIComponent(data).replace(
+        /%([0-9A-F]{2})/g,
+        (match, p1) => String.fromCharCode(Number("0x" + p1))
+      )
+    );
+  }
+  function decodeBase64(data) {
+    return decodeURIComponent(
+      atob(data).split("").map((c) => "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2)).join("")
+    );
+  }
+  return val;
+}
+
+export { useStorage };

package/design-foundation.stories/border-radius/BorderRadiusWrapper.vue.d.ts

@@ -1,4 +1,2 @@
-import '../../style/v4/colors.css';
-import '../../style/v4/border-radius.css';
 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/design-foundation.stories/breakpoints/BreakpointsData.d.ts

@@ -0,0 +1,5 @@
+export declare const breakpointsData: {
+    name: string;
+    text: string;
+    type: string;
+}[];

package/design-foundation.stories/breakpoints/BreakpointsStoryWrapper.vue.d.ts

@@ -0,0 +1,2 @@
+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/design-foundation.stories/breakpoints/index.d.ts

@@ -0,0 +1 @@
+export { default as BreakpointsStoryWrapper } from './BreakpointsStoryWrapper.vue';

package/design-foundation.stories/colors/ColorsData.d.ts

@@ -1,19 +1,19 @@
 export declare const colorPaletteLight: {
     background: {
         default: string;
-        neutral: string;
         paper: string;
-        modalElevation: string;
-        paperElevation0: string;
-        paperElevation1: string;
-        paperElevation2: string;
-        paperElevation3: string;
-        paperElevation4: string;
-        paperElevation5: string;
-        paperElevation6: string;
-        paperElevation7: string;
-        paperElevation8: string;
-        paperElevation9: string;
+        backdrop: string;
+        'modal-elevation': string;
+        'modal-elevation-0': string;
+        'modal-elevation-1': string;
+        'modal-elevation-2': string;
+        'modal-elevation-3': string;
+        'modal-elevation-4': string;
+        'modal-elevation-5': string;
+        'modal-elevation-6': string;
+        'modal-elevation-7': string;
+        'modal-elevation-8': string;
+        'modal-elevation-9': string;
     };
     action: {
         primary: string;
@@ -31,21 +31,21 @@ export declare const colorPaletteLight: {
         dark: string;
         outlinedBorder: string;
         contrastText: string;
+        buttonContrastText: string;
     };
     common: {
         white: string;
         black: string;
         inverseWhite: string;
         inverseBlack: string;
+        divider: string;
+        'divider-elevation-0': string;
     };
     text: {
         primary: string;
         secondary: string;
         disabled: string;
     };
-    divider: {
-        divider: string;
-    };
     primary: {
         lighter: string;
         light: string;
@@ -54,10 +54,9 @@ export declare const colorPaletteLight: {
         main50p: string;
         dark: string;
         darker: string;
-        hover: string;
-        selected: string;
         outlinedBorder: string;
         contrastText: string;
+        buttonContrastText: string;
     };
     info: {
         lighter: string;
@@ -67,9 +66,9 @@ export declare const colorPaletteLight: {
         main50p: string;
         dark: string;
         darker: string;
-        hover: string;
         outlinedBorder: string;
         contrastText: string;
+        buttonContrastText: string;
     };
     success: {
         lighter: string;
@@ -79,9 +78,9 @@ export declare const colorPaletteLight: {
         main50p: string;
         dark: string;
         darker: string;
-        hover: string;
         outlinedBorder: string;
         contrastText: string;
+        buttonContrastText: string;
     };
     warning: {
         lighter: string;
@@ -91,9 +90,9 @@ export declare const colorPaletteLight: {
         main50p: string;
         dark: string;
         darker: string;
-        hover: string;
         outlinedBorder: string;
         contrastText: string;
+        buttonContrastText: string;
     };
     error: {
         lighter: string;
@@ -103,9 +102,9 @@ export declare const colorPaletteLight: {
         main50p: string;
         dark: string;
         darker: string;
-        hover: string;
         outlinedBorder: string;
         contrastText: string;
+        buttonContrastText: string;
     };
     'A/B test': {
         'A Control': string;

package/design-foundation.stories/elevations/ElevationStoryWrapper.vue.d.ts

@@ -1,4 +1,2 @@
-import '../../style/v4/colors.css';
-import '../../style/v4/elevations.css';
 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/design-foundation.stories/grid-layout/GridLayoutStoryWrapper.vue.d.ts

@@ -0,0 +1,15 @@
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    mode?: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    mode?: string;
+}>>>, {}>;
+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;
+    };
+};

package/design-foundation.stories/grid-layout/index.d.ts

@@ -0,0 +1 @@
+export { default as GridLayoutStoryWrapper } from './GridLayoutStoryWrapper.vue';

package/design-foundation.stories/icons/iconsData.d.ts

@@ -0,0 +1,14 @@
+declare const assetsPath = "https://fusion.ironsrc.net/assets/icons/";
+declare const iconsBrandedData: {
+    name: string;
+    path: string;
+}[];
+declare const iconsADUnitData: {
+    name: string;
+    path: string;
+}[];
+declare const iconsABTestData: {
+    name: string;
+    path: string;
+}[];
+export { assetsPath, iconsBrandedData, iconsADUnitData, iconsABTestData };