@rotki/ui-library 0.10.0 → 0.11.0

package/dist/theme/index.es.js

@@ -17,11 +17,11 @@ const u = Object.fromEntries(
       t.map((p) => [
         p,
         {
-          DEFAULT: `rgba(var(--rui-${r}-${p}-main), <alpha-value>)`,
           darker: `rgba(var(--rui-${r}-${p}-darker), <alpha-value>)`,
+          DEFAULT: `rgba(var(--rui-${r}-${p}-main), <alpha-value>)`,
           lighter: `rgba(var(--rui-${r}-${p}-lighter), <alpha-value>)`,
-          tint: `color-mix(in srgb, white calc(<alpha-value> * 100%), rgb(var(--rui-${r}-${p}-main)))`,
-          shade: `color-mix(in srgb, black calc(<alpha-value> * 100%), rgb(var(--rui-${r}-${p}-main)))`
+          shade: `color-mix(in srgb, black calc(<alpha-value> * 100%), rgb(var(--rui-${r}-${p}-main)))`,
+          tint: `color-mix(in srgb, white calc(<alpha-value> * 100%), rgb(var(--rui-${r}-${p}-main)))`
         }
       ])
     )
@@ -30,11 +30,11 @@ const u = Object.fromEntries(
   t.map((r) => [
     r,
     {
-      DEFAULT: `rgba(var(--rui-${r}-main), <alpha-value>)`,
       darker: `rgba(var(--rui-${r}-darker), <alpha-value>)`,
+      DEFAULT: `rgba(var(--rui-${r}-main), <alpha-value>)`,
       lighter: `rgba(var(--rui-${r}-lighter), <alpha-value>)`,
-      tint: `color-mix(in srgb, white calc(<alpha-value> * 100%), rgb(var(--rui-${r}-main)))`,
-      shade: `color-mix(in srgb, black calc(<alpha-value> * 100%), rgb(var(--rui-${r}-main)))`
+      shade: `color-mix(in srgb, black calc(<alpha-value> * 100%), rgb(var(--rui-${r}-main)))`,
+      tint: `color-mix(in srgb, white calc(<alpha-value> * 100%), rgb(var(--rui-${r}-main)))`
     }
   ])
 ), x = Object.fromEntries(
@@ -43,19 +43,19 @@ const u = Object.fromEntries(
     {
       text: {
         DEFAULT: `var(--rui-${r}-text-primary)`,
-        secondary: `var(--rui-${r}-text-secondary)`,
-        disabled: `var(--rui-${r}-text-disabled)`
+        disabled: `var(--rui-${r}-text-disabled)`,
+        secondary: `var(--rui-${r}-text-secondary)`
       }
     }
   ])
 ), n = {
   text: {
     DEFAULT: "var(--rui-text-primary)",
-    secondary: "var(--rui-text-secondary)",
-    disabled: "var(--rui-text-disabled)"
+    disabled: "var(--rui-text-disabled)",
+    secondary: "var(--rui-text-secondary)"
   }
 }, w = o(
-  ({ addUtilities: r, matchUtilities: p, addVariant: e }) => {
+  ({ addUtilities: r, addVariant: p, matchUtilities: e }) => {
     r({
       ".text-body-1": {
         "@apply text-base": {}
@@ -63,22 +63,10 @@ const u = Object.fromEntries(
       ".text-body-2": {
         "@apply text-sm": {}
       },
-      ".text-subtitle-1": {
-        "@apply text-base": {},
-        "line-height": "1.75rem"
-      },
-      ".text-subtitle-2": {
-        "@apply text-sm font-medium": {},
-        "line-height": "1.25rem"
-      },
       ".text-caption": {
         "@apply text-xs": {},
         "line-height": "1.25rem"
       },
-      ".text-overline": {
-        "@apply text-xs uppercase": {},
-        "line-height": "2rem"
-      },
       ".text-h1": {
         "@apply text-8xl font-light": {},
         "line-height": "7rem"
@@ -102,8 +90,20 @@ const u = Object.fromEntries(
       ".text-h6": {
         "@apply text-xl font-medium": {},
         "line-height": "2rem"
+      },
+      ".text-overline": {
+        "@apply text-xs uppercase": {},
+        "line-height": "2rem"
+      },
+      ".text-subtitle-1": {
+        "@apply text-base": {},
+        "line-height": "1.75rem"
+      },
+      ".text-subtitle-2": {
+        "@apply text-sm font-medium": {},
+        "line-height": "1.25rem"
       }
-    }), p(
+    }), e(
       Object.fromEntries(
         ["bg-tint", "bg-shade", "text-tint", "text-shade"].map((i) => [
           i,
@@ -112,38 +112,13 @@ const u = Object.fromEntries(
           })
         ])
       )
-    ), e("color-mix-supported", "@supports (color-mix())");
+    ), p("color-mix-supported", "@supports (color-mix())");
   },
   {
     theme: {
       extend: {
-        colors: {
-          rui: {
-            ...u,
-            ...a,
-            ...x,
-            light: {
-              ...a.light,
-              ...x.light
-            },
-            dark: {
-              ...a.dark,
-              ...x.dark
-            },
-            ...v,
-            ...n
-          }
-        },
         boxShadow: {
           1: "0px 2px 1px -1px var(--rui-shadow-primary), 0px 1px 1px var(--rui-shadow-secondary), 0px 1px 3px var(--rui-shadow-tertiary)",
-          2: "0px 3px 1px -2px var(--rui-shadow-primary), 0px 2px 2px var(--rui-shadow-secondary), 0px 1px 5px var(--rui-shadow-tertiary)",
-          3: "0px 3px 3px -2px var(--rui-shadow-primary), 0px 3px 4px var(--rui-shadow-secondary), 0px 1px 8px var(--rui-shadow-tertiary)",
-          4: "0px 2px 4px -1px var(--rui-shadow-primary), 0px 4px 5px var(--rui-shadow-secondary), 0px 1px 10px var(--rui-shadow-tertiary)",
-          5: "0px 3px 5px -1px var(--rui-shadow-primary), 0px 5px 8px var(--rui-shadow-secondary), 0px 1px 14px var(--rui-shadow-tertiary)",
-          6: "0px 3px 5px -1px var(--rui-shadow-primary), 0px 6px 10px var(--rui-shadow-secondary), 0px 1px 18px var(--rui-shadow-tertiary)",
-          7: "0px 4px 5px -2px var(--rui-shadow-primary), 0px 7px 10px 1px var(--rui-shadow-secondary), 0px 2px 16px 1px var(--rui-shadow-tertiary)",
-          8: "0px 5px 5px -3px var(--rui-shadow-primary), 0px 8px 10px 1px var(--rui-shadow-secondary), 0px 3px 14px 2px var(--rui-shadow-tertiary)",
-          9: "0px 5px 6px -3px var(--rui-shadow-primary), 0px 9px 12px 1px var(--rui-shadow-secondary), 0px 3px 16px 2px var(--rui-shadow-tertiary)",
           10: "0px 6px 6px -3px var(--rui-shadow-primary), 0px 10px 14px 1px var(--rui-shadow-secondary), 0px 4px 18px 3px var(--rui-shadow-tertiary)",
           11: "0px 6px 7px -4px var(--rui-shadow-primary), 0px 11px 15px 1px var(--rui-shadow-secondary), 0px 4px 20px 3px var(--rui-shadow-tertiary)",
           12: "0px 7px 8px -4px var(--rui-shadow-primary), 0px 12px 17px 2px var(--rui-shadow-secondary), 0px 5px 22px 4px var(--rui-shadow-tertiary)",
@@ -154,11 +129,36 @@ const u = Object.fromEntries(
           17: "0px 8px 11px -5px var(--rui-shadow-primary), 0px 17px 26px 2px var(--rui-shadow-secondary), 0px 6px 32px 5px var(--rui-shadow-tertiary)",
           18: "0px 9px 11px -5px var(--rui-shadow-primary), 0px 18px 28px 2px var(--rui-shadow-secondary), 0px 7px 34px 6px var(--rui-shadow-tertiary)",
           19: "0px 9px 12px -6px var(--rui-shadow-primary), 0px 19px 29px 2px var(--rui-shadow-secondary), 0px 7px 36px 6px var(--rui-shadow-tertiary)",
+          2: "0px 3px 1px -2px var(--rui-shadow-primary), 0px 2px 2px var(--rui-shadow-secondary), 0px 1px 5px var(--rui-shadow-tertiary)",
           20: "0px 10px 13px -6px var(--rui-shadow-primary), 0px 20px 31px 3px var(--rui-shadow-secondary), 0px 8px 38px 7px var(--rui-shadow-tertiary)",
           21: "0px 10px 13px -6px var(--rui-shadow-primary), 0px 21px 33px 3px var(--rui-shadow-secondary), 0px 8px 40px 7px var(--rui-shadow-tertiary)",
           22: "0px 10px 14px -6px var(--rui-shadow-primary), 0px 22px 35px 3px var(--rui-shadow-secondary), 0px 8px 42px 7px var(--rui-shadow-tertiary)",
           23: "0px 11px 14px -7px var(--rui-shadow-primary), 0px 23px 36px 3px var(--rui-shadow-secondary), 0px 9px 44px 8px var(--rui-shadow-tertiary)",
-          24: "0px 11px 15px -7px var(--rui-shadow-primary), 0px 24px 38px 3px var(--rui-shadow-secondary), 0px 9px 46px 8px var(--rui-shadow-tertiary)"
+          24: "0px 11px 15px -7px var(--rui-shadow-primary), 0px 24px 38px 3px var(--rui-shadow-secondary), 0px 9px 46px 8px var(--rui-shadow-tertiary)",
+          3: "0px 3px 3px -2px var(--rui-shadow-primary), 0px 3px 4px var(--rui-shadow-secondary), 0px 1px 8px var(--rui-shadow-tertiary)",
+          4: "0px 2px 4px -1px var(--rui-shadow-primary), 0px 4px 5px var(--rui-shadow-secondary), 0px 1px 10px var(--rui-shadow-tertiary)",
+          5: "0px 3px 5px -1px var(--rui-shadow-primary), 0px 5px 8px var(--rui-shadow-secondary), 0px 1px 14px var(--rui-shadow-tertiary)",
+          6: "0px 3px 5px -1px var(--rui-shadow-primary), 0px 6px 10px var(--rui-shadow-secondary), 0px 1px 18px var(--rui-shadow-tertiary)",
+          7: "0px 4px 5px -2px var(--rui-shadow-primary), 0px 7px 10px 1px var(--rui-shadow-secondary), 0px 2px 16px 1px var(--rui-shadow-tertiary)",
+          8: "0px 5px 5px -3px var(--rui-shadow-primary), 0px 8px 10px 1px var(--rui-shadow-secondary), 0px 3px 14px 2px var(--rui-shadow-tertiary)",
+          9: "0px 5px 6px -3px var(--rui-shadow-primary), 0px 9px 12px 1px var(--rui-shadow-secondary), 0px 3px 16px 2px var(--rui-shadow-tertiary)"
+        },
+        colors: {
+          rui: {
+            ...u,
+            ...a,
+            ...x,
+            dark: {
+              ...a.dark,
+              ...x.dark
+            },
+            light: {
+              ...a.light,
+              ...x.light
+            },
+            ...v,
+            ...n
+          }
         }
       }
     }

package/dist/{theme-V5yenaDk.js → theme-DT8UjYf9.js}

@@ -2,7 +2,7 @@ import { RiArrowDownLine as $, RiArrowDropDownFill as y, RiArrowLeftDoubleLine a
 import { RiDatabase2Line as M } from "./icons/icons_2.es.js";
 import { RiAlertFill as S, RiAlertLine as O, RiCheckLine as j, RiCheckboxBlankCircleFill as U, RiCheckboxBlankCircleLine as V, RiCheckboxBlankLine as W, RiCheckboxCircleFill as q, RiCheckboxCircleLine as G, RiCheckboxFill as P, RiCheckboxIndeterminateFill as z, RiCloseCircleLine as H, RiCloseFill as J, RiCloseLine as K, RiErrorWarningFill as N, RiErrorWarningLine as Q, RiEyeLine as X, RiEyeOffLine as Y, RiInformationFill as Z, RiInformationLine as _, RiRadioButtonLine as ee, RiMoreFill as ie } from "./icons/icons_5.es.js";
 import { createGlobalState as re, useColorMode as te } from "@vueuse/core";
-import { ref as C, computed as u, watch as oe } from "vue";
+import { ref as C, computed as m, watch as oe } from "vue";
 import { set as f, get as e } from "@vueuse/shared";
 import { c as ne } from "./colors-ikihApJv.js";
 const Re = re(() => {
@@ -42,60 +42,59 @@ const Re = re(() => {
     f(i, {
       ...e(i),
       ...Object.fromEntries(
-        [...t, ...a].map(({ name: s, path: m }) => [s, m])
+        [...t, ...a].map(({ name: s, path: u }) => [s, u])
       )
     });
   } };
 }), r = {
   auto: "auto",
-  light: "light",
-  dark: "dark"
-}, L = (t) => Object.fromEntries(
-  ne.map((i) => [
-    i,
-    {
-      DEFAULT: `var(--rui-${t}-${i}-main)`,
-      lighter: `var(--rui-${t}-${i}-lighter)`,
-      darker: `var(--rui-${t}-${i}-darker)`
-    }
-  ])
-), b = {
-  light: L("light"),
-  dark: L("dark")
-}, d = C({ ...b }), fe = () => {
-  const { store: t, state: i, system: h } = te(), a = u(
-    () => e(t) === r.auto
-  ), s = u(
-    () => e(a) && e(h) === r.light || e(i) === r.light
-  ), m = u(
-    () => e(a) && e(h) === r.dark || e(i) === r.dark
-  ), g = u(() => e(s) ? e(d).light : e(d).dark), c = (l) => {
-    f(t, l || r.auto);
+  dark: "dark",
+  light: "light"
+};
+function L(t) {
+  return Object.fromEntries(
+    ne.map((i) => [
+      i,
+      {
+        darker: `var(--rui-${t}-${i}-darker)`,
+        DEFAULT: `var(--rui-${t}-${i}-main)`,
+        lighter: `var(--rui-${t}-${i}-lighter)`
+      }
+    ])
+  );
+}
+const b = {
+  dark: L("dark"),
+  light: L("light")
+}, d = C({ ...b });
+function fe() {
+  const { state: t, store: i, system: h } = te(), a = m(
+    () => e(i) === r.auto
+  ), s = m(
+    () => e(a) && e(h) === r.light || e(t) === r.light
+  ), u = m(
+    () => e(a) && e(h) === r.dark || e(t) === r.dark
+  ), g = m(() => e(s) ? e(d).light : e(d).dark), c = (l) => {
+    f(i, l || r.auto);
   }, p = () => {
-    e(a) ? c(r.light) : e(s) ? c(r.dark) : e(m) && c(r.auto);
+    e(a) ? c(r.light) : e(s) ? c(r.dark) : e(u) && c(r.auto);
   }, k = (l) => {
     f(d, l);
   };
   return {
-    isAutoControlled: a,
-    isLight: s,
-    isDark: m,
     config: d,
-    theme: g,
-    store: t,
-    state: i,
     init: (l) => {
       c(l.mode ?? r.auto), k(l.config ?? { ...b }), typeof window < "u" && oe(
         [s, g],
         ([w, x]) => {
           const A = Object.entries(x).map(([o, n]) => ({
-            [`--rui-${o}-main`]: n.DEFAULT,
+            [`--rui-${o}-darker`]: n.darker,
             [`--rui-${o}-lighter`]: n.lighter,
-            [`--rui-${o}-darker`]: n.darker
+            [`--rui-${o}-main`]: n.DEFAULT
           })).reduce((o, n) => ({ ...o, ...n }), {}), R = w ? r.light : r.dark, F = {
+            "--rui-text-disabled": `var(--rui-${R}-text-disabled)`,
             "--rui-text-primary": `var(--rui-${R}-text-primary)`,
-            "--rui-text-secondary": `var(--rui-${R}-text-secondary)`,
-            "--rui-text-disabled": `var(--rui-${R}-text-disabled)`
+            "--rui-text-secondary": `var(--rui-${R}-text-secondary)`
           };
           Object.entries({
             ...A,
@@ -107,11 +106,17 @@ const Re = re(() => {
         { immediate: !0 }
       );
     },
+    isAutoControlled: a,
+    isDark: u,
+    isLight: s,
     setThemeConfig: k,
-    toggleThemeMode: p,
-    switchThemeScheme: c
+    state: t,
+    store: i,
+    switchThemeScheme: c,
+    theme: g,
+    toggleThemeMode: p
   };
-};
+}
 export {
   r as T,
   fe as a,

package/dist/types/stepper.d.ts

@@ -1,11 +1,11 @@
 export declare const StepperState: {
-    readonly inactive: "inactive";
     readonly active: "active";
     readonly done: "done";
     readonly error: "error";
-    readonly warning: "warning";
+    readonly inactive: "inactive";
     readonly info: "info";
     readonly success: "success";
+    readonly warning: "warning";
 };
 export type StepperState = (typeof StepperState)[keyof typeof StepperState];
 export interface StepperStep {
@@ -15,7 +15,7 @@ export interface StepperStep {
     loading?: boolean;
 }
 export declare const StepperOrientation: {
-    readonly vertical: "vertical";
     readonly horizontal: "horizontal";
+    readonly vertical: "vertical";
 };
 export type StepperOrientation = (typeof StepperOrientation)[keyof typeof StepperOrientation];

package/dist/types/theme.d.ts

@@ -1,10 +1,10 @@
-import { type BasicColorSchema } from '@vueuse/core';
-import { type GeneratedIcon } from '../types/icons';
+import type { BasicColorSchema } from '@vueuse/core';
+import type { GeneratedIcon } from '../types/icons';
 import type { ComputedRef, Ref } from 'vue';
 export declare const ThemeMode: {
     readonly auto: "auto";
-    readonly light: "light";
     readonly dark: "dark";
+    readonly light: "light";
 };
 export type ThemeMode = (typeof ThemeMode)[keyof typeof ThemeMode];
 export interface ColorIntensity {

package/dist/utils/form-text-detail.d.ts

@@ -1,8 +1,8 @@
-import { type MaybeRef } from '@vueuse/shared';
-export declare const useFormTextDetail: (errorMessages: MaybeRef<string | string[]>, successMessages: MaybeRef<string | string[]>) => {
+import type { MaybeRef } from '@vueuse/shared';
+export declare function useFormTextDetail(errorMessages: MaybeRef<string | string[]>, successMessages: MaybeRef<string | string[]>): {
     formattedErrorMessages: globalThis.ComputedRef<string[]>;
     formattedSuccessMessages: globalThis.ComputedRef<string[]>;
     hasError: globalThis.ComputedRef<boolean>;
-    hasSuccess: globalThis.ComputedRef<boolean>;
     hasMessages: globalThis.ComputedRef<boolean>;
+    hasSuccess: globalThis.ComputedRef<boolean>;
 };

package/dist/utils/generate-id.d.ts

@@ -2,4 +2,4 @@ export declare const useGlobalId: () => {
     count: globalThis.Ref<number>;
     nextId: () => number;
 };
-export declare const generateId: (prefix?: string) => string;
+export declare function generateId(prefix?: string): string;

package/dist/utils/helpers.d.ts

@@ -1,4 +1,4 @@
-import { type SetupContext } from 'vue';
+import type { SetupContext } from 'vue';
 interface CurrencyOptions {
     currency?: string;
     locale?: string;
@@ -12,31 +12,31 @@ type SetupContextAttrsKeys = (keyof SetupContextAttrs)[];
  * @param {number} amount
  * @param {CurrencyOptions} options
  */
-export declare const formatCurrency: (amount: number | string, { currency, style, fractionDigits, locale, }: CurrencyOptions) => string;
+export declare function formatCurrency(amount: number | string, { currency, fractionDigits, locale, style, }: CurrencyOptions): string;
 /**
  * Format number value
  * @param {number} amount
  * @param {CurrencyOptions} options
  */
-export declare const formatNumber: (amount: number | string, { fractionDigits }: CurrencyOptions) => string;
+export declare function formatNumber(amount: number | string, { fractionDigits }: CurrencyOptions): string;
 /**
  * Format number value without fraction
  * @param {number} amount
  */
-export declare const formatInteger: (amount: number | string) => string;
+export declare function formatInteger(amount: number | string): string;
 /**
  * Generates and returns the array of root allowed attributes
  * @param {SetupContextAttrs} data
  * @returns {SetupContextAttrsKeys}
  */
-export declare const getRootKeys: (data: SetupContextAttrs) => SetupContextAttrsKeys;
+export declare function getRootKeys(data: SetupContextAttrs): SetupContextAttrsKeys;
 /**
  * Picks only required attributes for root element
  * @param {SetupContextAttrs} data
  * @param {SetupContextAttrsKeys} include
  * @returns {Pick<SetupContextAttrs, any>}
  */
-export declare const getRootAttrs: (data: SetupContextAttrs, include?: SetupContextAttrsKeys) => Pick<{
+export declare function getRootAttrs(data: SetupContextAttrs, include?: SetupContextAttrsKeys): Pick<{
     [x: string]: unknown;
 }, string>;
 /**
@@ -45,7 +45,7 @@ export declare const getRootAttrs: (data: SetupContextAttrs, include?: SetupCont
  * @param {SetupContextAttrsKeys} exclude
  * @returns {Omit<SetupContextAttrs, any>}
  */
-export declare const getNonRootAttrs: (data: SetupContextAttrs, exclude?: SetupContextAttrsKeys) => Omit<{
+export declare function getNonRootAttrs(data: SetupContextAttrs, exclude?: SetupContextAttrsKeys): Omit<{
     [x: string]: unknown;
 }, string>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rotki/ui-library",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "packageManager": "pnpm@8.14.1",
   "description": "A vue design system and component library for rotki",
   "type": "module",
@@ -25,44 +25,44 @@
   ],
   "module": "dist/index.es.js",
   "types": "dist/index.d.ts",
-  "typesVersions": {
-    "*": {
-      "theme": [
-        "./dist/theme/index.d.ts"
-      ],
-      "composables": [
-        "./dist/composables/index.d.ts"
-      ],
-      "components": [
-        "./dist/components/index.d.ts"
-      ]
-    }
-  },
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.es.js",
-      "default": "./dist/index.es.js",
-      "types": "./dist/index.d.ts"
+      "default": "./dist/index.es.js"
     },
     "./theme": {
+      "types": "./dist/theme/index.d.ts",
       "import": "./dist/theme/index.es.js",
-      "default": "./dist/theme/index.es.js",
-      "types": "./dist/theme/index.d.ts"
+      "default": "./dist/theme/index.es.js"
     },
     "./components": {
+      "types": "./dist/components/index.d.ts",
       "import": "./dist/components/index.es.js",
-      "default": "./dist/components/index.es.js",
-      "types": "./dist/components/index.d.ts"
+      "default": "./dist/components/index.es.js"
     },
     "./composables": {
+      "types": "./dist/composables/index.d.ts",
       "import": "./dist/composables/index.es.js",
-      "default": "./dist/composables/index.es.js",
-      "types": "./dist/composables/index.d.ts"
+      "default": "./dist/composables/index.es.js"
     },
     "./style.css": {
       "default": "./dist/style.css"
     }
   },
+  "typesVersions": {
+    "*": {
+      "theme": [
+        "./dist/theme/index.d.ts"
+      ],
+      "composables": [
+        "./dist/composables/index.d.ts"
+      ],
+      "components": [
+        "./dist/components/index.d.ts"
+      ]
+    }
+  },
   "peerDependencies": {
     "@vueuse/core": ">10.0.0",
     "@vueuse/shared": ">10.0.0",
@@ -79,32 +79,33 @@
     "@fontsource/roboto": "5.0.8",
     "@headlessui/vue": "1.7.17",
     "@popperjs/core": "2.11.8",
-    "@rotki/eslint-config": "1.1.2",
-    "@storybook/addon-docs": "7.6.8",
-    "@storybook/addon-essentials": "7.6.8",
-    "@storybook/addon-interactions": "7.6.8",
-    "@storybook/addon-links": "7.6.8",
-    "@storybook/addon-themes": "7.6.8",
-    "@storybook/addons": "7.6.8",
-    "@storybook/blocks": "7.6.8",
+    "@rotki/eslint-config": "2.4.4",
+    "@storybook/addon-docs": "7.6.10",
+    "@storybook/addon-essentials": "7.6.10",
+    "@storybook/addon-interactions": "7.6.10",
+    "@storybook/addon-links": "7.6.10",
+    "@storybook/addon-themes": "7.6.10",
+    "@storybook/addons": "7.6.10",
+    "@storybook/blocks": "7.6.10",
     "@storybook/testing-library": "0.2.2",
-    "@storybook/vue3": "7.6.8",
-    "@storybook/vue3-vite": "7.6.8",
-    "@types/node": "20.11.1",
+    "@storybook/vue3": "7.6.10",
+    "@storybook/vue3-vite": "7.6.10",
+    "@types/node": "20.11.5",
     "@vitejs/plugin-vue": "5.0.3",
-    "@vitest/coverage-v8": "1.2.0",
-    "@vitest/ui": "1.2.0",
+    "@vitest/coverage-v8": "1.2.1",
+    "@vitest/ui": "1.2.1",
     "@vue/test-utils": "2.4.3",
     "@vue/tsconfig": "0.5.1",
     "@vueuse/core": "10.7.2",
     "@vueuse/math": "10.7.2",
     "@vueuse/shared": "10.7.2",
     "argparse": "2.0.1",
-    "autoprefixer": "10.4.16",
+    "autoprefixer": "10.4.17",
     "babel-loader": "9.1.3",
-    "bumpp": "9.2.1",
-    "css-loader": "6.9.0",
+    "bumpp": "9.3.0",
+    "css-loader": "6.9.1",
     "eslint": "8.56.0",
+    "eslint-plugin-cypress": "2.15.1",
     "eslint-plugin-storybook": "0.6.15",
     "fast-glob": "3.3.2",
     "fast-xml-parser": "4.3.3",
@@ -116,15 +117,15 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "remixicon": "4.1.0",
-    "sass": "1.69.7",
+    "sass": "1.70.0",
     "scule": "1.2.0",
-    "storybook": "7.6.8",
+    "storybook": "7.6.10",
     "tailwindcss": "3.4.1",
     "tsc-alias": "1.8.8",
     "typescript": "5.3.3",
     "unplugin-auto-import": "0.17.3",
-    "vite": "5.0.11",
-    "vitest": "1.2.0",
+    "vite": "5.0.12",
+    "vitest": "1.2.1",
     "vue": "3.3.13",
     "vue-loader": "17.4.2",
     "vue-router": "4.2.4",
@@ -137,12 +138,12 @@
     "*.{js,cjs,ts,vue,yml,json,md}": "eslint"
   },
   "scripts": {
-    "build:prod": "node scripts/dist-build.cjs",
+    "build:prod": "node scripts/dist-build.mjs",
     "build": "pnpm run generate-icons && vite build",
     "build:storybook": "STORYBOOK=true storybook build",
     "build:tailwind": "tailwindcss -o dist/style.css --minify",
     "build:types": "vue-tsc -p tsconfig.build.json",
-    "generate-icons": "node scripts/generate-icons.cjs",
+    "generate-icons": "node scripts/generate-icons.mjs",
     "resolve:alias": "tsc-alias -p tsconfig.build.json",
     "dev": "vite",
     "lint": "eslint .",