vira 32.1.2 → 32.2.1

package/dist/elements/pop-up/vira-menu-item.element.d.ts

@@ -35,4 +35,4 @@ export declare const ViraMenuItem: import("element-vir").DeclarativeElementDefin
      * gated by `keepOpenAfterInteraction`.
      */
     activate: import("element-vir").DefineElementEvent<undefined>;
-}, "vira-menu-item-selected" | "vira-menu-item-disabled" | "vira-menu-item-enabled" | "vira-menu-item-default-icon" | "vira-menu-item-default-styles", "vira-menu-item-icon-gap" | "vira-menu-item-padding" | "vira-menu-item-border-radius", readonly [], readonly []>;
+}, "vira-menu-item-selected" | "vira-menu-item-disabled" | "vira-menu-item-enabled" | "vira-menu-item-default-icon" | "vira-menu-item-default-styles", "vira-menu-item-icon-gap" | "vira-menu-item-padding", readonly [], readonly []>;

package/dist/elements/pop-up/vira-menu-item.element.js

@@ -1,11 +1,13 @@
 import { assertWrap } from '@augment-vir/assert';
 import { css, defineElementEvent, html } from 'element-vir';
 import { listenTo } from 'typed-event-target';
-import { Check24Icon } from '../../icons/icon-svgs/24/check-24.icon.js';
+import { lucideIcons } from '../../icons/lucide-icons.js';
+import { createSizedIcon } from '../../icons/sized-icon.js';
 import { viraFormCssVars } from '../../styles/form-styles.js';
 import { noUserSelect } from '../../styles/index.js';
 import { defineViraElement } from '../../util/define-vira-element.js';
 import { ViraIcon } from '../vira-icon.element.js';
+const selectedCheckIcon = createSizedIcon(lucideIcons.Check, 16);
 /**
  * An element for an individual menu item.
  *
@@ -47,9 +49,8 @@ export const ViraMenuItem = defineViraElement()({
     },
     cssVars: {
         /** Horizontal gap between a menu item's icon and its label. */
-        'vira-menu-item-icon-gap': '8px',
-        'vira-menu-item-padding': '6px 8px',
-        'vira-menu-item-border-radius': '4px',
+        'vira-menu-item-icon-gap': '3px',
+        'vira-menu-item-padding': '8px 12px 8px 0',
     },
     styles({ hostClasses, cssVars }) {
         return css `
@@ -59,10 +60,9 @@ export const ViraMenuItem = defineViraElement()({
                 ${noUserSelect};
                 box-sizing: border-box;
                 max-width: 100%;
+                padding-left: calc(${cssVars['vira-menu-item-icon-gap'].value} * 2);
                 gap: ${cssVars['vira-menu-item-icon-gap'].value};
                 overflow: hidden;
-                padding: ${cssVars['vira-menu-item-padding'].value};
-                border-radius: ${cssVars['vira-menu-item-border-radius'].value};
                 align-items: center;
                 text-align: left;
             }
@@ -95,7 +95,7 @@ export const ViraMenuItem = defineViraElement()({
             }
 
             ${ViraIcon} {
-                width: 24px;
+                width: 16px;
                 aspect-ratio: 1;
                 align-items: center;
                 justify-content: center;
@@ -112,12 +112,21 @@ export const ViraMenuItem = defineViraElement()({
             }
 
             .slot-wrapper {
+                padding: ${cssVars['vira-menu-item-padding'].value};
                 display: flex;
                 flex-grow: 1;
                 overflow: hidden;
                 text-overflow: ellipsis;
                 white-space: nowrap;
                 min-width: 0;
+
+                & > slot {
+                    display: block;
+                    flex-grow: 1;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    min-width: 0;
+                }
             }
         `;
     },
@@ -224,7 +233,7 @@ export const ViraMenuItem = defineViraElement()({
     render({ inputs }) {
         return html `
             <${ViraIcon.assign({
-            icon: inputs.iconOverride || Check24Icon,
+            icon: inputs.iconOverride || selectedCheckIcon,
         })}></${ViraIcon}>
             <div class="slot-wrapper">
                 <slot>&nbsp;</slot>

package/dist/elements/pop-up/vira-menu.element.d.ts

@@ -33,4 +33,4 @@ export declare const ViraMenu: import("element-vir").DeclarativeElementDefinitio
     direction: ViraMenuPopUpDirection;
     /** @default PopUpMenuCornerStyle.Directional */
     cornerStyle: ViraMenuCornerStyle;
-}>, {}, {}, "vira-menu-open-upwards" | "vira-menu-rounded" | "vira-menu-square", "vira-menu-padding", readonly [], readonly []>;
+}>, {}, {}, "vira-menu-open-upwards" | "vira-menu-rounded" | "vira-menu-square", "vira-menu-", readonly [], readonly []>;

package/dist/elements/pop-up/vira-menu.element.js

@@ -46,15 +46,11 @@ export const ViraMenu = defineViraElement()({
             return inputs.cornerStyle === ViraMenuCornerStyle.AllSquare;
         },
     },
-    cssVars: {
-        'vira-menu-padding': '4px',
-    },
-    styles({ hostClasses, cssVars }) {
+    styles({ hostClasses }) {
         return css `
             :host {
                 display: flex;
                 flex-direction: column;
-                padding: ${cssVars['vira-menu-padding'].value};
                 max-width: 100%;
                 max-height: 100%;
                 overflow-y: auto;

package/dist/elements/vira-card.element.js

@@ -29,7 +29,7 @@ export const ViraCard = defineViraElement()({
     },
     cssVars: {
         'vira-card-border': css `1px solid ${viraFormCssVars['vira-form-border-color'].value}`,
-        'vira-card-padding': '24px',
+        'vira-card-padding': '20px',
     },
     styles({ hostClasses, cssVars }) {
         return css `

package/dist/elements/vira-checkbox.element.js

@@ -41,7 +41,7 @@ export const ViraCheckbox = defineViraElement()({
             }
 
             .custom-checkbox {
-                height: 24px;
+                height: 20px;
                 aspect-ratio: 1;
                 box-sizing: border-box;
             }
@@ -50,7 +50,7 @@ export const ViraCheckbox = defineViraElement()({
                 width: 100%;
                 height: 100%;
                 box-sizing: border-box;
-                ${viraIconCssVars['vira-icon-stroke-width'].name}: 3px;
+                ${viraIconCssVars['vira-icon-stroke-width'].name}: 2px;
                 opacity: 0;
             }
 
@@ -151,7 +151,7 @@ export const ViraCheckbox = defineViraElement()({
                 gap: 8px;
 
                 & .label-text {
-                    padding-block: calc((24px - 1em) / 2);
+                    padding-block: calc((20px - 1em) / 2);
                 }
             }
         `;

package/dist/elements/vira-collapsible-card.element.js

@@ -63,11 +63,11 @@ export const ViraCollapsibleCard = defineViraElement()({
                 }
 
                 & .card-header {
-                    padding: 8px 16px;
+                    padding: 6px 12px;
                 }
 
                 & .card-content {
-                    padding: 8px 16px 8px 16px;
+                    padding: 6px 12px 6px 12px;
                 }
             }
 
@@ -104,12 +104,12 @@ export const ViraCollapsibleCard = defineViraElement()({
                 }
 
                 .card-header {
-                    padding: 8px 0 !important;
+                    padding: 6px 0 !important;
                 }
 
                 .card-content {
                     overflow: visible !important;
-                    padding: 8px 0 16px 0 !important;
+                    padding: 6px 0 12px 0 !important;
                 }
 
                 .open-caret {

package/dist/elements/vira-date-input.element.js

@@ -57,7 +57,7 @@ export const ViraDateInput = defineViraElement()({
             input {
                 box-sizing: border-box;
                 width: 100%;
-                padding: 4px 8px;
+                padding: 3px 6px;
                 font-size: inherit;
                 border: 1px solid ${viraFormCssVars['vira-form-border-color'].value};
                 border-radius: ${viraFormCssVars['vira-form-radius'].value};

package/dist/elements/vira-drawer.element.js

@@ -124,7 +124,7 @@ export const ViraDrawer = defineViraElement()({
                     }
 
                     & .header {
-                        padding: 8px 24px 16px;
+                        padding: 6px 20px 12px;
                         display: flex;
                         gap: 16px;
                         align-items: flex-start;
@@ -138,7 +138,7 @@ export const ViraDrawer = defineViraElement()({
                             overflow: hidden;
 
                             & h1 {
-                                font-size: 20px;
+                                font-size: 18px;
                             }
                         }
 
@@ -160,7 +160,7 @@ export const ViraDrawer = defineViraElement()({
                     }
 
                     & .body {
-                        padding: 0 24px 24px;
+                        padding: 0 20px 20px;
                         overflow: auto;
                         overscroll-behavior: contain;
                     }

package/dist/elements/vira-dropdown.element.d.ts

@@ -31,6 +31,7 @@ export declare const ViraDropdown: import("element-vir").DeclarativeElementDefin
 } & PopUpTriggerPosition>, {
     /** `undefined` means the pop up is not currently showing. */
     showPopUpResult: ShowPopUpResult | undefined;
+    shouldSelectOnMouseUp: boolean;
     /**
      * Used to couple the label and trigger together. This is not applied if no label is
      * provided.

package/dist/elements/vira-dropdown.element.js

@@ -1,11 +1,13 @@
 import { check } from '@augment-vir/assert';
 import { filterMap, randomString } from '@augment-vir/common';
+import { extractEventTarget } from '@augment-vir/web';
 import { classMap, css, defineElementEvent, html, ifDefined, listen, nothing, testId, } from 'element-vir';
 import { ChevronUp16Icon } from '../icons/index.js';
 import { viraFormCssVars } from '../styles/form-styles.js';
 import { noUserSelect, viraAnimationDurations } from '../styles/index.js';
 import { defineViraElement } from '../util/define-vira-element.js';
 import { renderMenuItemEntries } from '../util/pop-up-helpers.js';
+import { ViraMenuItem } from './pop-up/vira-menu-item.element.js';
 import { ViraMenu, ViraMenuPopUpDirection } from './pop-up/vira-menu.element.js';
 import { HorizontalAnchor, ViraPopUpTrigger, } from './pop-up/vira-pop-up-trigger.element.js';
 import { ViraIcon } from './vira-icon.element.js';
@@ -118,6 +120,7 @@ export const ViraDropdown = defineViraElement()({
         return {
             /** `undefined` means the pop up is not currently showing. */
             showPopUpResult: undefined,
+            shouldSelectOnMouseUp: false,
             /**
              * Used to couple the label and trigger together. This is not applied if no label is
              * provided.
@@ -149,6 +152,19 @@ export const ViraDropdown = defineViraElement()({
             : inputs.isMultiSelect && selectedOptions.length > 1
                 ? `${selectedOptions.length} Selected`
                 : selectedOptions[0]?.label || '';
+        function selectOption(option) {
+            const newSelectedValues = inputs.isMultiSelect
+                ? selectedOptions.includes(option)
+                    ? filterMap(selectedOptions, (selectedOption) => selectedOption.value, (value, selectedOption) => selectedOption !== option)
+                    : [
+                        ...selectedOptions.map((selectedOption) => selectedOption.value),
+                        option.value,
+                    ]
+                : [option.value];
+            dispatch(new events.selectedValuesChange({
+                detail: newSelectedValues,
+            }));
+        }
         const menuTemplate = html `
             <${ViraMenu.assign({
             direction: state.showPopUpResult?.popDown
@@ -156,22 +172,27 @@ export const ViraDropdown = defineViraElement()({
                 : ViraMenuPopUpDirection.Upwards,
         })}
                 slot=${ViraPopUpTrigger.slotNames['vira-pop-up-trigger-pop-up']}
+                ${listen('mouseup', (event) => {
+            if (state.shouldSelectOnMouseUp) {
+                const menuItem = event
+                    .composedPath()
+                    .find((eventTarget) => {
+                    return eventTarget instanceof ViraMenuItem;
+                });
+                const option = menuItem
+                    ? inputs.options[Array.from(extractEventTarget(event, ViraMenu).querySelectorAll(ViraMenuItem.tagName)).indexOf(menuItem)]
+                    : undefined;
+                if (check.isDefined(option) && !option.disabled) {
+                    selectOption(option);
+                }
+            }
+        })}
             >
                 ${renderMenuItemEntries(inputs.options.map((option) => {
             return {
                 content: option.label,
                 onClick() {
-                    const newSelectedValues = inputs.isMultiSelect
-                        ? selectedOptions.includes(option)
-                            ? filterMap(selectedOptions, (selectedOption) => selectedOption.value, (value, selectedOption) => selectedOption !== option)
-                            : [
-                                ...selectedOptions.map((selectedOption) => selectedOption.value),
-                                option.value,
-                            ]
-                        : [option.value];
-                    dispatch(new events.selectedValuesChange({
-                        detail: newSelectedValues,
-                    }));
+                    selectOption(option);
                 },
                 disabled: option.disabled,
                 selected: selectedOptions.includes(option),
@@ -199,6 +220,13 @@ export const ViraDropdown = defineViraElement()({
             updateState({
                 showPopUpResult: event.detail,
             });
+        })}
+                ${listen('mouseup', () => {
+            if (state.shouldSelectOnMouseUp) {
+                updateState({
+                    shouldSelectOnMouseUp: false,
+                });
+            }
         })}
             >
                 <div
@@ -210,6 +238,13 @@ export const ViraDropdown = defineViraElement()({
                     id=${ifDefined(inputs.label ? state.randomId : undefined)}
                     aria-label=${ifDefined(inputs.label || undefined)}
                     ${testId(testIds.trigger)}
+                    ${listen('mousedown', () => {
+            if (!state.showPopUpResult) {
+                updateState({
+                    shouldSelectOnMouseUp: true,
+                });
+            }
+        })}
                 >
                     ${leadingIconTemplate}
                     <span

package/dist/elements/vira-input.element.js

@@ -37,8 +37,8 @@ export var ViraInputType;
 export const ViraInput = defineViraElement()({
     tagName: 'vira-input',
     cssVars: {
-        'vira-input-padding-horizontal': '12px',
-        'vira-input-padding-vertical': '4px',
+        'vira-input-padding-horizontal': '10px',
+        'vira-input-padding-vertical': '3px',
     },
     styles({ hostClasses, cssVars }) {
         return css `

package/dist/elements/vira-modal.element.js

@@ -91,7 +91,7 @@ export const ViraModal = defineViraElement()({
                     flex-direction: column;
 
                     & .header {
-                        padding: 16px 24px;
+                        padding: 12px 20px;
                         display: flex;
                         gap: 16px;
                         align-items: flex-start;
@@ -105,11 +105,11 @@ export const ViraModal = defineViraElement()({
                             overflow: hidden;
 
                             & h1 {
-                                font-size: 24px;
+                                font-size: 20px;
                             }
 
                             & sub {
-                                font-size: 16px;
+                                font-size: 14px;
                                 color: ${viraFormCssVars['vira-form-secondary-body-foreground']
             .value};
                             }
@@ -132,7 +132,7 @@ export const ViraModal = defineViraElement()({
                         }
                     }
                     & .body {
-                        padding: 16px 24px;
+                        padding: 12px 20px;
                         overflow: auto;
                         overscroll-behavior: contain;
                     }
@@ -150,7 +150,7 @@ export const ViraModal = defineViraElement()({
                     & .modal-content-wrapper {
                         & .header,
                         & .body {
-                            padding: 12px 16px;
+                            padding: 10px 12px;
                         }
                     }
                 }

package/dist/elements/vira-select.element.js

@@ -48,9 +48,9 @@ export const ViraSelect = defineViraElement()({
         valueChange: defineElementEvent(),
     },
     cssVars: {
-        'vira-select-padding-horizontal': '12px',
-        'vira-select-padding-vertical': '4px',
-        'vira-select-icon-padding': '44px',
+        'vira-select-padding-horizontal': '10px',
+        'vira-select-padding-vertical': '3px',
+        'vira-select-icon-padding': '40px',
     },
     hostClasses: {
         'vira-select-disabled'({ inputs }) {
@@ -75,7 +75,7 @@ export const ViraSelect = defineViraElement()({
                 position: relative;
                 display: inline-flex;
                 width: 223px;
-                height: 32px;
+                height: 28px;
                 box-sizing: border-box;
                 color: ${viraFormCssVars['vira-form-foreground-color'].value};
             }
@@ -120,7 +120,7 @@ export const ViraSelect = defineViraElement()({
                     box-sizing: border-box;
                     /* Prevent the left pixel of text getting cut off. */
                     padding-left: 0.5px;
-                    padding-right: 28px;
+                    padding-right: 24px;
                     overflow: hidden;
                     text-overflow: ellipsis;
 
@@ -149,7 +149,7 @@ export const ViraSelect = defineViraElement()({
             }
 
             .trigger-icon {
-                width: 24px;
+                width: 20px;
                 aspect-ratio: 1;
             }
 
@@ -166,7 +166,7 @@ export const ViraSelect = defineViraElement()({
                     cursor: pointer;
 
                     & select {
-                        padding: ${cssVars['vira-select-padding-vertical'].value} 31px
+                        padding: ${cssVars['vira-select-padding-vertical'].value} 27px
                             ${cssVars['vira-select-padding-vertical'].value}
                             ${cssVars['vira-select-padding-horizontal'].value};
 

package/dist/elements/vira-tabs.element.js

@@ -410,7 +410,7 @@ export const ViraTabs = defineViraElement()({
 
             .tab-item ${ViraLink} {
                 display: flex;
-                padding: 8px 16px;
+                padding: 6px 12px;
             }
 
             .tab-more {
@@ -439,9 +439,9 @@ export const ViraTabs = defineViraElement()({
             }
 
             .tab-group-label {
-                font-size: 11px;
+                font-size: 10px;
                 font-weight: ${viraFontCssVars['vira-font-weight-medium'].value};
-                padding: 8px 16px 4px;
+                padding: 6px 12px 4px;
                 color: ${viraTheme.colors['vira-grey-foreground-header'].foreground.value};
             }
 

package/dist/elements/vira-tag.element.js

@@ -153,7 +153,7 @@ export const ViraTag = defineViraElement()({
         'vira-tag-disabled-border-color': viraTheme.colors['vira-grey-behind-bg-decoration'].background.value,
         'vira-tag-border-radius': '1000px',
         'vira-tag-gap': '6px',
-        'vira-tag-horizontal-padding': '12px',
+        'vira-tag-horizontal-padding': '10px',
         'vira-tag-border-width': '1px',
     },
     events: {
@@ -427,11 +427,11 @@ export const ViraTag = defineViraElement()({
 
             ${hostClasses['vira-tag-size-small'].selector} {
                 ${cssVars['vira-tag-gap'].name}: 4px;
-                ${cssVars['vira-tag-horizontal-padding'].name}: 8px;
+                ${cssVars['vira-tag-horizontal-padding'].name}: 6px;
             }
 
             ${hostClasses['vira-tag-size-large'].selector} {
-                ${cssVars['vira-tag-horizontal-padding'].name}: 16px;
+                ${cssVars['vira-tag-horizontal-padding'].name}: 12px;
             }
 
             ${hostClasses['vira-tag-disabled'].selector} {

package/dist/elements/vira-text-area.element.js

@@ -17,8 +17,8 @@ import { filterTextInputValue, textInputListener, } from '../util/shared-text-in
 export const ViraTextArea = defineViraElement()({
     tagName: 'vira-text-area',
     cssVars: {
-        'vira-text-area-padding-horizontal': '12px',
-        'vira-text-area-padding-vertical': '8px',
+        'vira-text-area-padding-horizontal': '10px',
+        'vira-text-area-padding-vertical': '6px',
     },
     styles({ hostClasses, cssVars }) {
         return css `

package/dist/styles/form-styles.d.ts

@@ -25,9 +25,9 @@ export declare const viraFormCssVars: import("lit-css-vars").CssVarDefinitions<{
     readonly 'vira-form-positive-active-color': import("element-vir").CSSResult;
     readonly 'vira-form-success-color': import("element-vir").CSSResult;
     readonly 'vira-form-label-font-weight': import("element-vir").CSSResult;
-    readonly 'vira-form-small-text-size': "14px";
+    readonly 'vira-form-small-text-size': "12px";
     readonly 'vira-form-medium-text-size': "14px";
-    readonly 'vira-form-large-text-size': "22px";
+    readonly 'vira-form-large-text-size': "16px";
     readonly 'vira-form-radius': "6px";
     readonly 'vira-form-wrapper-radius': "12px";
     readonly 'vira-form-focus-outline-color': import("element-vir").CSSResult;

package/dist/styles/form-styles.js

@@ -32,9 +32,9 @@ export const viraFormCssVars = defineCssVars({
     'vira-form-positive-active-color': viraTheme.colors['vira-green-behind-bg-body'].background.value,
     'vira-form-success-color': viraTheme.colors['vira-green-behind-bg-non-body'].background.value,
     'vira-form-label-font-weight': viraFontCssVars['vira-font-weight-bold'].value,
-    'vira-form-small-text-size': '14px',
+    'vira-form-small-text-size': '12px',
     'vira-form-medium-text-size': '14px',
-    'vira-form-large-text-size': '22px',
+    'vira-form-large-text-size': '16px',
     'vira-form-radius': defaultViraFormRadius,
     'vira-form-wrapper-radius': '12px',
     'vira-form-focus-outline-color': viraTheme.colors['vira-brand-foreground-header'].foreground.value,

package/dist/styles/form-variants.d.ts

@@ -66,15 +66,15 @@ export declare const standaloneThemeColorNames: ("red" | "yellow" | "green" | "t
  * @category Internal
  */
 export declare enum ViraSize {
-    /** @default 40px tall */
+    /** @default 36px tall */
     Large = "large",
     /**
      * This is the default.
      *
-     * @default 32px tall
+     * @default 28px tall
      */
     Medium = "medium",
-    /** @default 24px tall */
+    /** @default 20px tall */
     Small = "small",
     /**
      * No size styles will be applied at all. All related CSS vars are free to customize to your

package/dist/styles/form-variants.js

@@ -80,15 +80,15 @@ export const standaloneThemeColorNames = getObjectTypedValues(ViraThemeColorName
  */
 export var ViraSize;
 (function (ViraSize) {
-    /** @default 40px tall */
+    /** @default 36px tall */
     ViraSize["Large"] = "large";
     /**
      * This is the default.
      *
-     * @default 32px tall
+     * @default 28px tall
      */
     ViraSize["Medium"] = "medium";
-    /** @default 24px tall */
+    /** @default 20px tall */
     ViraSize["Small"] = "small";
     /**
      * No size styles will be applied at all. All related CSS vars are free to customize to your
@@ -137,7 +137,7 @@ export const viraEmphasisVariants = [
  * @category Internal
  */
 export const viraSizeHeights = {
-    [ViraSize.Large]: 40,
-    [ViraSize.Medium]: 32,
-    [ViraSize.Small]: 24,
+    [ViraSize.Large]: 36,
+    [ViraSize.Medium]: 28,
+    [ViraSize.Small]: 20,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vira",
-    "version": "32.1.2",
+    "version": "32.2.1",
     "description": "A simple and highly versatile design system using element-vir.",
     "keywords": [
         "design",
@@ -38,9 +38,9 @@
         "test:docs": "virmator docs check"
     },
     "dependencies": {
-        "@augment-vir/assert": "^32.3.0",
-        "@augment-vir/common": "^32.3.0",
-        "@augment-vir/web": "^32.3.0",
+        "@augment-vir/assert": "^32.3.1",
+        "@augment-vir/common": "^32.3.1",
+        "@augment-vir/web": "^32.3.1",
         "@electrovir/color": "^2.0.0",
         "@electrovir/local-storage-client": "^0.1.1",
         "date-vir": "^9.1.1",
@@ -51,10 +51,10 @@
         "observavir": "^2.3.3",
         "page-active": "^1.0.4",
         "spa-router-vir": "^6.8.0",
-        "typed-event-target": "^4.3.3"
+        "typed-event-target": "^4.3.4"
     },
     "devDependencies": {
-        "@augment-vir/test": "^32.3.0",
+        "@augment-vir/test": "^32.3.1",
         "@web/dev-server-esbuild": "^2.0.0",
         "@web/test-runner": "^1.0.0",
         "@web/test-runner-commands": "^1.0.1",
@@ -62,12 +62,12 @@
         "@web/test-runner-visual-regression": "^1.0.1",
         "esbuild": "^0.28.2",
         "istanbul-smart-text-reporter": "^1.1.5",
-        "lucide-static": "^1.42.0",
+        "lucide-static": "^1.46.0",
         "markdown-code-example-inserter": "^3.0.6",
         "theme-vir": "^29.0.0",
         "typedoc": "^0.28.20",
         "typescript": "^6.0.3",
-        "vite": "^8.2.2",
+        "vite": "^8.3.0",
         "vite-tsconfig-paths": "^6.1.1"
     },
     "peerDependencies": {