@nova-design-system/nova-react 3.0.0-beta.36 → 3.0.0-beta.37

package/README.md

@@ -1,42 +1,247 @@
 # Nova Components React
 
-**Nova Components React** is a lightweight wrapper for React that allows you to use the native UI elements from the Nova UI package seamlessly within your React applications.
+**Nova Components React** provides an easy way to use [Nova’s native Web Components](https://www.npmjs.com/package/@nova-design-system/nova-webcomponents) within your React applications.
+
+- [Nova Components React](#nova-components-react)
+  - [Key Features](#key-features)
+  - [Installation](#installation)
+  - [Setup Using Tailwind (Recommended)](#setup-using-tailwind-recommended)
+    - [1. Install Tailwind CSS and the Vite Plugin](#1-install-tailwind-css-and-the-vite-plugin)
+    - [2. Configure the Vite Plugin](#2-configure-the-vite-plugin)
+    - [3. Create `tailwind.config.ts`](#3-create-tailwindconfigts)
+    - [4. Configure Tailwind and Nova Plugin in `index.css`](#4-configure-tailwind-and-nova-plugin-in-indexcss)
+    - [5. Include the Nova Tokens (Spark or Ocean)](#5-include-the-nova-tokens-spark-or-ocean)
+    - [6. Use Nova Components with Tailwind Utilities](#6-use-nova-components-with-tailwind-utilities)
+    - [7. Setup the Nova Font](#7-setup-the-nova-font)
+    - [Creating Your Own Style Components with Tailwind](#creating-your-own-style-components-with-tailwind)
+  - [Setup Without Tailwind (Not Recommended)](#setup-without-tailwind-not-recommended)
+    - [1. Include Nova Tokens and Nova Utilities](#1-include-nova-tokens-and-nova-utilities)
+    - [2. Use Nova Components](#2-use-nova-components)
+  - [Nova Font Pro Integration](#nova-font-pro-integration)
+    - [Option 1: Import in Global CSS (Recommended)](#option-1-import-in-global-css-recommended)
+    - [Option 2: HTML Integration](#option-2-html-integration)
+
+
+---
+
+## Key Features
+
+- **Lightweight Integration**: Leverage Nova Web Components with minimal configuration in React.
+- **Customizable Styling**: Use Tailwind (recommended) or Nova’s utility classes to quickly style components.
+- **Dark Mode Ready**: Toggle dark mode by adding the `dark` class to your `body` element.
+- **Nova Font Pro Support**: Easily integrate Nova’s custom font for a consistent design experience.
+
+---
 
 ## Installation
 
-To get started, install the necessary packages using your package manager of choice:
+Install the necessary packages using the package manager of your choice:
 
 ```bash
 npm install @nova-design-system/nova-webcomponents @nova-design-system/nova-base @nova-design-system/nova-react
 ```
-
-or
-
+**or**
 ```bash
 yarn add @nova-design-system/nova-webcomponents @nova-design-system/nova-base @nova-design-system/nova-react
 ```
 
-**Yarn Peer Dependency**
+> **Note for Yarn Users**
+> Yarn **does not automatically** install peer dependencies. You must install the following peer dependency manually:
+> ```bash
+> yarn add @stencil/react-output-target
+> ```
+
+---
+
+## Setup Using Tailwind (Recommended)
+
+We highly recommend using Tailwind CSS for styling, as it ensures an optimized bundle size and a powerful utility-first workflow. Nova offers a dedicated Tailwind plugin and theme, allowing you to seamlessly integrate Nova’s design tokens with Tailwind’s utility classes for a consistent and efficient styling workflow.
 
-If you’re using Yarn, note that it **does not automatically** install peer dependencies. You will need to install the following peer dependency manually:
+> **Tailwind Version**
+> This guide is written for Tailwind v4. While compatible with v3, some features may not work as expected.
+
+Below is an example setup using Vite + React. If you’re using another framework or bundler, please refer to the [Tailwind Installation Guide](https://tailwindcss.com/docs/installation).
+
+### 1. Install Tailwind CSS and the Vite Plugin
 
 ```bash
-yarn add @stencil/react-output-target
+npm install tailwindcss @tailwindcss/vite
+```
+
+> Use the **[Tailwind CSS IntelliSense Extension](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)** to get full autocomplete support for Tailwind and Nova tokens.
+
+### 2. Configure the Vite Plugin
+
+Add the tailwindcss plugin to your `vite.config.ts`:
+
+```ts
+import { defineConfig } from 'vite'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+  plugins: [
+    tailwindcss(),
+  ],
+})
 ```
 
-## Setup
+### 3. Create `tailwind.config.ts`
 
-After installing the packages, you'll need to include the Nova UI CSS and define the custom elements in your `main.tsx` or `index.tsx` file:
+In the root of your project, create a `tailwind.config.ts` (or `.js`) file and include the Nova theme:
 
-```typescript
-import '@nova-design-system/nova-base/dist/css/nova-utils.css';
-import '@nova-design-system/nova-base/dist/css/spark.css'; // or ocean.css
-import { defineCustomElements } from '@nova-design-system/nova-webcomponents/loader';
+```ts
+import type { Config } from 'tailwindcss'
+import { novaTailwindTheme } from "@nova-design-system/nova-base/theme"
 
-defineCustomElements();
+export default {
+  theme: novaTailwindTheme,
+} satisfies Config
 ```
 
-This setup ensures that all the necessary Nova web-components are available in your application.
+### 4. Configure Tailwind and Nova Plugin in `index.css`
+
+```css
+@import 'tailwindcss';
+
+@config "../tailwind.config.ts";
+@plugin "@nova-design-system/nova-base/theme/plugin";
+@custom-variant dark (&:where(.dark, .dark *));
+```
+
+> **Dark Mode**
+> To enable dark mode, add the `dark` class to the `<body>` element.
+
+### 5. Include the Nova Tokens (Spark or Ocean)
+
+In your main entry point (`main.tsx` or `index.tsx`), import one of the Nova tokens CSS files:
+
+```ts
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+
+import "@nova-design-system/nova-base/dist/css/spark.css"; // or ocean.css
+import './index.css'
+
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+)
+```
+
+### 6. Use Nova Components with Tailwind Utilities
+
+```tsx
+import { useState } from 'react'
+import { NvButton } from "@nova-design-system/nova-react"
+
+const MyComponent: React.FC = () => {
+  const [count, setCount] = useState(0)
+
+  return (
+    <div className="flex items-center justify-center">
+      <NvButton danger onClick={() => setCount(count + 1)}>
+        Count is {count}
+      </NvButton>
+    </div>
+  )
+}
+
+export default MyComponent
+```
+
+### 7. Setup the Nova Font
+
+Follow the steps in the [Nova Font Pro Integration](#nova-font-pro-integration) section below.
+
+---
+
+### Creating Your Own Style Components with Tailwind
+
+If you find you’re repeating the same set of utility classes for certain UI elements (e.g., a card component), you can group them using Tailwind’s `@apply` keyword:
+
+```css
+/* any css file */
+.card {
+  @apply bg-gray-50 dark:bg-gray-500 p-4 rounded-md shadow-sm;
+}
+```
+
+Then in your markup, instead of:
+
+```jsx
+<div className="bg-gray-50 dark:bg-gray-500 p-4 rounded-md shadow-sm">
+  {/* Content */}
+</div>
+<div className="bg-gray-50 dark:bg-gray-500 p-4 rounded-md shadow-sm">
+  {/* Content */}
+</div>
+```
+
+You can use your new `card` class:
+
+```jsx
+<div className="card">
+  {/* Content */}
+</div>
+<div className="card">
+  {/* Content */}
+</div>
+```
+
+This ensures consistent styling and keeps your markup clean. Any colors or spacing used will reference the correct Nova Tokens.
+
+---
+
+## Setup Without Tailwind (Not Recommended)
+
+If you don’t plan to use Tailwind, Nova provides a large utility CSS file for quick prototyping. Be aware that this approach will increase your CSS bundle size, offer less options, and lacks the flexibility and optimizations of Tailwind.
+
+### 1. Include Nova Tokens and Nova Utilities
+
+In your entry point (`main.tsx`):
+
+```ts
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+
+import '@nova-design-system/nova-base/dist/css/spark.css' // or ocean.css
+import '@nova-design-system/nova-base/dist/css/nova-utils.css'
+import './index.css'
+
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+)
+```
+
+### 2. Use Nova Components
+
+```tsx
+import { useState } from 'react'
+import { NvButton } from "@nova-design-system/nova-react"
+
+const MyComponent: React.FC = () => {
+  const [count, setCount] = useState(0)
+
+  return (
+    <div className="flex items-center justify-center">
+      <NvButton danger onClick={() => setCount(count + 1)}>
+        Count is {count}
+      </NvButton>
+    </div>
+  )
+}
+
+export default MyComponent
+```
+
+---
 
 ## Nova Font Pro Integration
 
@@ -47,14 +252,14 @@ This setup ensures that all the necessary Nova web-components are available in y
  Once you have the URL, you can integrate it using any of these methods:
 
 ### Option 1: Import in Global CSS (Recommended)
-In your main CSS file (e.g., `src/index.css` or `src/App.css`):
+In your main CSS file (e.g., `src/index.css`):
 
 ```css
 @import url('https://novaassets.azureedge.net/fonts/nova-fonts-pro.css');
 ```
 
 ### Option 2: HTML Integration
-In your `public/index.html`:
+In your `index.html`:
 
 ```html
 <!DOCTYPE html>
@@ -69,27 +274,3 @@ In your `public/index.html`:
 ```
 
 The `nova-fonts-pro.css` file includes both font definitions and the `font-family` rule for the `body`, automatically applying the fonts across your React application.
-
-## Usage
-
-With everything set up, you can start using Nova components in your React application. Here's a quick example:
-
-```typescript
-import { NvButton } from '@nova-design-system/nova-react';
-
-const MyComponent = () => {
-  const [count, setCount] = useState(0);
-
-  return (
-    <NvButton danger onClick={() => setCount(count + 1)}>
-      count is {count}
-    </NvButton>
-  );
-};
-```
-
-In this example, the `NvButton` component is imported and used just like any other React component. The `danger` prop and `onClick` handler are passed to customize its behavior.
-
-## Conclusion
-
-Nova Components React provides an easy way to integrate Nova's native web components into your React projects, enabling you to leverage the power of Nova UI with the flexibility of React. For more detailed documentation and examples, refer to the official Nova documentation.

package/dist/generated/components.js

@@ -13,6 +13,9 @@ import { NvDatagridcolumn as NvDatagridcolumnElement, defineCustomElement as def
 import { NvDatagriddatacell as NvDatagriddatacellElement, defineCustomElement as defineNvDatagriddatacell } from "@nova-design-system/nova-webcomponents/dist/components/nv-datagriddatacell.js";
 import { NvDatagridhead as NvDatagridheadElement, defineCustomElement as defineNvDatagridhead } from "@nova-design-system/nova-webcomponents/dist/components/nv-datagridhead.js";
 import { NvDatagridrow as NvDatagridrowElement, defineCustomElement as defineNvDatagridrow } from "@nova-design-system/nova-webcomponents/dist/components/nv-datagridrow.js";
+import { NvDialog as NvDialogElement, defineCustomElement as defineNvDialog } from "@nova-design-system/nova-webcomponents/dist/components/nv-dialog.js";
+import { NvDialogfooter as NvDialogfooterElement, defineCustomElement as defineNvDialogfooter } from "@nova-design-system/nova-webcomponents/dist/components/nv-dialogfooter.js";
+import { NvDialogheader as NvDialogheaderElement, defineCustomElement as defineNvDialogheader } from "@nova-design-system/nova-webcomponents/dist/components/nv-dialogheader.js";
 import { NvFieldcheckbox as NvFieldcheckboxElement, defineCustomElement as defineNvFieldcheckbox } from "@nova-design-system/nova-webcomponents/dist/components/nv-fieldcheckbox.js";
 import { NvFielddropdown as NvFielddropdownElement, defineCustomElement as defineNvFielddropdown } from "@nova-design-system/nova-webcomponents/dist/components/nv-fielddropdown.js";
 import { NvFielddropdownitem as NvFielddropdownitemElement, defineCustomElement as defineNvFielddropdownitem } from "@nova-design-system/nova-webcomponents/dist/components/nv-fielddropdownitem.js";
@@ -24,7 +27,7 @@ import { NvFieldradio as NvFieldradioElement, defineCustomElement as defineNvFie
 import { NvFieldselect as NvFieldselectElement, defineCustomElement as defineNvFieldselect } from "@nova-design-system/nova-webcomponents/dist/components/nv-fieldselect.js";
 import { NvFieldtext as NvFieldtextElement, defineCustomElement as defineNvFieldtext } from "@nova-design-system/nova-webcomponents/dist/components/nv-fieldtext.js";
 import { NvFieldtextarea as NvFieldtextareaElement, defineCustomElement as defineNvFieldtextarea } from "@nova-design-system/nova-webcomponents/dist/components/nv-fieldtextarea.js";
-import { NvFieldtoggle as NvFieldtoggleElement, defineCustomElement as defineNvFieldtoggle } from "@nova-design-system/nova-webcomponents/dist/components/nv-fieldtoggle.js";
+import { NvFieldtime as NvFieldtimeElement, defineCustomElement as defineNvFieldtime } from "@nova-design-system/nova-webcomponents/dist/components/nv-fieldtime.js";
 import { NvIcon as NvIconElement, defineCustomElement as defineNvIcon } from "@nova-design-system/nova-webcomponents/dist/components/nv-icon.js";
 import { NvIconbutton as NvIconbuttonElement, defineCustomElement as defineNvIconbutton } from "@nova-design-system/nova-webcomponents/dist/components/nv-iconbutton.js";
 import { NvLoader as NvLoaderElement, defineCustomElement as defineNvLoader } from "@nova-design-system/nova-webcomponents/dist/components/nv-loader.js";
@@ -39,6 +42,7 @@ import { NvTablecolumn as NvTablecolumnElement, defineCustomElement as defineNvT
 import { NvTabledatacell as NvTabledatacellElement, defineCustomElement as defineNvTabledatacell } from "@nova-design-system/nova-webcomponents/dist/components/nv-tabledatacell.js";
 import { NvTablehead as NvTableheadElement, defineCustomElement as defineNvTablehead } from "@nova-design-system/nova-webcomponents/dist/components/nv-tablehead.js";
 import { NvTablerow as NvTablerowElement, defineCustomElement as defineNvTablerow } from "@nova-design-system/nova-webcomponents/dist/components/nv-tablerow.js";
+import { NvToggle as NvToggleElement, defineCustomElement as defineNvToggle } from "@nova-design-system/nova-webcomponents/dist/components/nv-toggle.js";
 import { NvTooltip as NvTooltipElement, defineCustomElement as defineNvTooltip } from "@nova-design-system/nova-webcomponents/dist/components/nv-tooltip.js";
 import { createComponent } from '@stencil/react-output-target/runtime';
 import React from 'react';
@@ -148,6 +152,30 @@ export const NvDatagridrow = createComponent({
     events: {},
     defineCustomElement: defineNvDatagridrow
 });
+export const NvDialog = createComponent({
+    tagName: 'nv-dialog',
+    elementClass: NvDialogElement,
+    react: React,
+    events: { onClose: 'close' },
+    defineCustomElement: defineNvDialog
+});
+export const NvDialogfooter = createComponent({
+    tagName: 'nv-dialogfooter',
+    elementClass: NvDialogfooterElement,
+    react: React,
+    events: {
+        onNvDialogCanceled: 'nvDialogCanceled',
+        onNvDialogConfirmed: 'nvDialogConfirmed'
+    },
+    defineCustomElement: defineNvDialogfooter
+});
+export const NvDialogheader = createComponent({
+    tagName: 'nv-dialogheader',
+    elementClass: NvDialogheaderElement,
+    react: React,
+    events: {},
+    defineCustomElement: defineNvDialogheader
+});
 export const NvFieldcheckbox = createComponent({
     tagName: 'nv-fieldcheckbox',
     elementClass: NvFieldcheckboxElement,
@@ -232,12 +260,12 @@ export const NvFieldtextarea = createComponent({
     events: { onValueChanged: 'valueChanged' },
     defineCustomElement: defineNvFieldtextarea
 });
-export const NvFieldtoggle = createComponent({
-    tagName: 'nv-fieldtoggle',
-    elementClass: NvFieldtoggleElement,
+export const NvFieldtime = createComponent({
+    tagName: 'nv-fieldtime',
+    elementClass: NvFieldtimeElement,
     react: React,
-    events: { onCheckedChanged: 'checkedChanged' },
-    defineCustomElement: defineNvFieldtoggle
+    events: { onValueChanged: 'valueChanged' },
+    defineCustomElement: defineNvFieldtime
 });
 export const NvIcon = createComponent({
     tagName: 'nv-icon',
@@ -337,6 +365,13 @@ export const NvTablerow = createComponent({
     events: {},
     defineCustomElement: defineNvTablerow
 });
+export const NvToggle = createComponent({
+    tagName: 'nv-toggle',
+    elementClass: NvToggleElement,
+    react: React,
+    events: { onCheckedChanged: 'checkedChanged' },
+    defineCustomElement: defineNvToggle
+});
 export const NvTooltip = createComponent({
     tagName: 'nv-tooltip',
     elementClass: NvTooltipElement,

package/dist/types/generated/components.d.ts

@@ -13,6 +13,9 @@ import { NvDatagridcolumn as NvDatagridcolumnElement } from "@nova-design-system
 import { NvDatagriddatacell as NvDatagriddatacellElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-datagriddatacell.js";
 import { NvDatagridhead as NvDatagridheadElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-datagridhead.js";
 import { NvDatagridrow as NvDatagridrowElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-datagridrow.js";
+import { NvDialog as NvDialogElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-dialog.js";
+import { NvDialogfooter as NvDialogfooterElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-dialogfooter.js";
+import { NvDialogheader as NvDialogheaderElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-dialogheader.js";
 import { NvFieldcheckbox as NvFieldcheckboxElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-fieldcheckbox.js";
 import { NvFielddropdown as NvFielddropdownElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-fielddropdown.js";
 import { NvFielddropdownitem as NvFielddropdownitemElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-fielddropdownitem.js";
@@ -24,7 +27,7 @@ import { NvFieldradio as NvFieldradioElement } from "@nova-design-system/nova-we
 import { NvFieldselect as NvFieldselectElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-fieldselect.js";
 import { NvFieldtext as NvFieldtextElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-fieldtext.js";
 import { NvFieldtextarea as NvFieldtextareaElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-fieldtextarea.js";
-import { NvFieldtoggle as NvFieldtoggleElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-fieldtoggle.js";
+import { NvFieldtime as NvFieldtimeElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-fieldtime.js";
 import { NvIcon as NvIconElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-icon.js";
 import { NvIconbutton as NvIconbuttonElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-iconbutton.js";
 import { NvLoader as NvLoaderElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-loader.js";
@@ -39,6 +42,7 @@ import { NvTablecolumn as NvTablecolumnElement } from "@nova-design-system/nova-
 import { NvTabledatacell as NvTabledatacellElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-tabledatacell.js";
 import { NvTablehead as NvTableheadElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-tablehead.js";
 import { NvTablerow as NvTablerowElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-tablerow.js";
+import { NvToggle as NvToggleElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-toggle.js";
 import { NvTooltip as NvTooltipElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-tooltip.js";
 import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
 type NvAlertEvents = {
@@ -77,6 +81,17 @@ type NvDatagridheadEvents = NonNullable<unknown>;
 export declare const NvDatagridhead: StencilReactComponent<NvDatagridheadElement, NvDatagridheadEvents>;
 type NvDatagridrowEvents = NonNullable<unknown>;
 export declare const NvDatagridrow: StencilReactComponent<NvDatagridrowElement, NvDatagridrowEvents>;
+type NvDialogEvents = {
+    onClose: EventName<CustomEvent<void>>;
+};
+export declare const NvDialog: StencilReactComponent<NvDialogElement, NvDialogEvents>;
+type NvDialogfooterEvents = {
+    onNvDialogCanceled: EventName<CustomEvent<void>>;
+    onNvDialogConfirmed: EventName<CustomEvent<void>>;
+};
+export declare const NvDialogfooter: StencilReactComponent<NvDialogfooterElement, NvDialogfooterEvents>;
+type NvDialogheaderEvents = NonNullable<unknown>;
+export declare const NvDialogheader: StencilReactComponent<NvDialogheaderElement, NvDialogheaderEvents>;
 type NvFieldcheckboxEvents = {
     onCheckedChanged: EventName<CustomEvent<boolean>>;
 };
@@ -128,10 +143,10 @@ type NvFieldtextareaEvents = {
     onValueChanged: EventName<CustomEvent<string>>;
 };
 export declare const NvFieldtextarea: StencilReactComponent<NvFieldtextareaElement, NvFieldtextareaEvents>;
-type NvFieldtoggleEvents = {
-    onCheckedChanged: EventName<CustomEvent<boolean>>;
+type NvFieldtimeEvents = {
+    onValueChanged: EventName<CustomEvent<string>>;
 };
-export declare const NvFieldtoggle: StencilReactComponent<NvFieldtoggleElement, NvFieldtoggleEvents>;
+export declare const NvFieldtime: StencilReactComponent<NvFieldtimeElement, NvFieldtimeEvents>;
 type NvIconEvents = NonNullable<unknown>;
 export declare const NvIcon: StencilReactComponent<NvIconElement, NvIconEvents>;
 type NvIconbuttonEvents = NonNullable<unknown>;
@@ -166,6 +181,10 @@ type NvTableheadEvents = NonNullable<unknown>;
 export declare const NvTablehead: StencilReactComponent<NvTableheadElement, NvTableheadEvents>;
 type NvTablerowEvents = NonNullable<unknown>;
 export declare const NvTablerow: StencilReactComponent<NvTablerowElement, NvTablerowEvents>;
+type NvToggleEvents = {
+    onCheckedChanged: EventName<CustomEvent<boolean>>;
+};
+export declare const NvToggle: StencilReactComponent<NvToggleElement, NvToggleEvents>;
 type NvTooltipEvents = NonNullable<unknown>;
 export declare const NvTooltip: StencilReactComponent<NvTooltipElement, NvTooltipEvents>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nova-design-system/nova-react",
-  "version": "3.0.0-beta.36",
+  "version": "3.0.0-beta.37",
   "description": "Nova is a design system created by Elia Group to empower creators to efficiently build solutions that people love to use.",
   "author": "Elia Group",
   "homepage": "https://nova.eliagroup.io",
@@ -30,8 +30,6 @@
   "devDependencies": {
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "@storybook/react": "8.4.7",
-    "@storybook/react-vite": "8.4.7",
     "nova-utils": "*",
     "nova-storybook-utils": "*",
     "@nova-design-system/nova-webcomponents": "*"