@veracity/vui 3.0.0-beta.8 → 3.0.0

package/dist/sidemenuV2/context.js

@@ -1,2 +1,104 @@
-import{createContext as e}from"../utils/react.js";import{useCallback as t,useMemo as n,useReducer as r,useState as i}from"react";import{jsx as a}from"react/jsx-runtime";const o=(e,t)=>{let n;switch(t.type){case`SET_SUBMENU`:if(e[t.itemId]===t.isOpen)return e;n={...e,[t.itemId]:t.isOpen};break;case`TOGGLE_SUBMENU`:{let r=e[t.itemId]||!1;n={...e,[t.itemId]:!r};break}case`RESTORE_STATE`:n=t.state;break;case`RESET_ALL`:n={};break;default:return e}return n},[s,c]=e({isOptional:!0}),l=({children:e,isExpandedInitial:c=!0,onExpandedChange:l,variant:u,size:d,isDark:f})=>{let[p,m]=i(c),[h,g]=r(o,{}),_=t((e,t)=>{g({type:`SET_SUBMENU`,itemId:e,isOpen:t})},[]),v=t(e=>{g({type:`TOGGLE_SUBMENU`,itemId:e})},[]),y=t(e=>{m(e),l?.(e)},[l]),b=t(()=>{g({type:`RESET_ALL`});let e=c;m(e),l?.(e)},[c,l]),x=t(()=>{let e=c;m(e),l?.(e)},[c,l]),S=t(()=>{g({type:`RESET_ALL`})},[]);return a(s,{value:n(()=>({size:d,variant:u,isDark:f,isMenuExpanded:p,submenuStates:h,setSubmenuState:_,toggleSubmenu:v,setIsExpanded:y,onExpandedChange:l,resetAllStates:b,resetExpansionOnly:x,resetSubmenuOnly:S}),[d,u,f,p,h,_,v,y,l,b,x,S]),children:e})};export{l as SidemenuStateProvider,c as useSidemenuContext};globalThis.__vuiVersion__=`3.0.0-beta.8`;
+import { createContext as createContext$1 } from "../utils/react.js";
+import { useCallback, useMemo, useReducer, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/sidemenuV2/context.tsx
+const submenuReducer = (state, action) => {
+	let newState;
+	switch (action.type) {
+		case "SET_SUBMENU":
+			if (state[action.itemId] === action.isOpen) return state;
+			newState = {
+				...state,
+				[action.itemId]: action.isOpen
+			};
+			break;
+		case "TOGGLE_SUBMENU": {
+			const currentValue = state[action.itemId] || false;
+			newState = {
+				...state,
+				[action.itemId]: !currentValue
+			};
+			break;
+		}
+		case "RESTORE_STATE":
+			newState = action.state;
+			break;
+		case "RESET_ALL":
+			newState = {};
+			break;
+		default: return state;
+	}
+	return newState;
+};
+const [SidemenuProvider, useSidemenuContext] = createContext$1({ isOptional: true });
+const SidemenuStateProvider = ({ children, isExpandedInitial = true, onExpandedChange, variant, size, isDark }) => {
+	const [isExpanded, setIsExpanded] = useState(isExpandedInitial);
+	const [submenuStates, dispatchSubmenu] = useReducer(submenuReducer, {});
+	const setSubmenuState = useCallback((itemId, isOpen) => {
+		dispatchSubmenu({
+			type: "SET_SUBMENU",
+			itemId,
+			isOpen
+		});
+	}, []);
+	const toggleSubmenu = useCallback((itemId) => {
+		dispatchSubmenu({
+			type: "TOGGLE_SUBMENU",
+			itemId
+		});
+	}, []);
+	const handleSetIsExpanded = useCallback((newIsExpanded) => {
+		setIsExpanded(newIsExpanded);
+		onExpandedChange?.(newIsExpanded);
+	}, [onExpandedChange]);
+	const resetAllStates = useCallback(() => {
+		dispatchSubmenu({ type: "RESET_ALL" });
+		const defaultExpanded = isExpandedInitial;
+		setIsExpanded(defaultExpanded);
+		onExpandedChange?.(defaultExpanded);
+	}, [isExpandedInitial, onExpandedChange]);
+	const resetExpansionOnly = useCallback(() => {
+		const defaultExpanded = isExpandedInitial;
+		setIsExpanded(defaultExpanded);
+		onExpandedChange?.(defaultExpanded);
+	}, [isExpandedInitial, onExpandedChange]);
+	const resetSubmenuOnly = useCallback(() => {
+		dispatchSubmenu({ type: "RESET_ALL" });
+	}, []);
+	return /* @__PURE__ */ jsx(SidemenuProvider, {
+		value: useMemo(() => ({
+			size,
+			variant,
+			isDark,
+			isMenuExpanded: isExpanded,
+			submenuStates,
+			setSubmenuState,
+			toggleSubmenu,
+			setIsExpanded: handleSetIsExpanded,
+			onExpandedChange,
+			resetAllStates,
+			resetExpansionOnly,
+			resetSubmenuOnly
+		}), [
+			size,
+			variant,
+			isDark,
+			isExpanded,
+			submenuStates,
+			setSubmenuState,
+			toggleSubmenu,
+			handleSetIsExpanded,
+			onExpandedChange,
+			resetAllStates,
+			resetExpansionOnly,
+			resetSubmenuOnly
+		]),
+		children
+	});
+};
+
+//#endregion
+export { SidemenuStateProvider, useSidemenuContext };
+globalThis.__vuiVersion__ = "3.0.0"
 //# sourceMappingURL=context.js.map

package/dist/sidemenuV2/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":["newState: Record<string, boolean>","createContext"],"sources":["../../src/sidemenuV2/context.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport { useMemo, useState, useCallback, useReducer } from 'react'\n\nimport type { Dict } from '../utils'\nimport { createContext } from '../utils'\n\nexport interface SidemenuContextValue extends Dict {\n  // Existing properties\n  variant?: string\n  size?: string\n  isMenuExpanded?: boolean\n\n  // Submenu state management\n  submenuStates?: Record<string, boolean>\n  setSubmenuState?: (itemId: string, isOpen: boolean) => void\n  toggleSubmenu?: (itemId: string) => void\n\n  // Expansion state management\n  setIsExpanded?: (isExpanded: boolean) => void\n  onExpandedChange?: (isExpanded: boolean) => void\n\n  // Memoized reset functions\n  resetAllStates?: () => void\n  resetExpansionOnly?: () => void\n  resetSubmenuOnly?: () => void\n}\n\n// Submenu state reducer for more stable state management\ntype SubmenuAction =\n  | { type: 'SET_SUBMENU'; itemId: string; isOpen: boolean }\n  | { type: 'TOGGLE_SUBMENU'; itemId: string }\n  | { type: 'RESET_ALL' }\n  | { type: 'RESTORE_STATE'; state: Record<string, boolean> }\n\nconst submenuReducer = (state: Record<string, boolean>, action: SubmenuAction): Record<string, boolean> => {\n  let newState: Record<string, boolean>\n\n  switch (action.type) {\n    case 'SET_SUBMENU': {\n      if (state[action.itemId] === action.isOpen) {\n        return state // Return same reference if no change\n      }\n      newState = { ...state, [action.itemId]: action.isOpen }\n      break\n    }\n    case 'TOGGLE_SUBMENU': {\n      const currentValue = state[action.itemId] || false\n      newState = { ...state, [action.itemId]: !currentValue }\n      break\n    }\n    case 'RESTORE_STATE': {\n      newState = action.state\n      break\n    }\n    case 'RESET_ALL': {\n      newState = {}\n      break\n    }\n    default:\n      return state\n  }\n\n  // Submenu states are now persisted in context only\n  return newState\n}\n\ninterface SidemenuStateProviderProps {\n  children: ReactNode\n  isExpandedInitial?: boolean\n  onExpandedChange?: (isExpanded: boolean) => void\n  variant?: string\n  size?: string\n  isDark?: boolean\n}\n\nconst [SidemenuProvider, useSidemenuContext] = createContext<SidemenuContextValue>({ isOptional: true })\n\n// Enhanced provider that manages state\nexport const SidemenuStateProvider = ({\n  children,\n  isExpandedInitial = true,\n  onExpandedChange,\n  variant,\n  size,\n  isDark,\n}: SidemenuStateProviderProps) => {\n  // Pure uncontrolled state without persistence - context only\n  const [isExpanded, setIsExpanded] = useState(isExpandedInitial)\n\n  // Initialize submenu states as empty - persisted in context only\n  const [submenuStates, dispatchSubmenu] = useReducer(submenuReducer, {})\n\n  // Submenu state management functions using reducer dispatch - memoized\n  const setSubmenuState = useCallback((itemId: string, isOpen: boolean) => {\n    dispatchSubmenu({ type: 'SET_SUBMENU', itemId, isOpen })\n  }, [])\n\n  const toggleSubmenu = useCallback((itemId: string) => {\n    dispatchSubmenu({ type: 'TOGGLE_SUBMENU', itemId })\n  }, [])\n\n  // Enhanced setIsExpanded that handles callbacks - memoized\n  const handleSetIsExpanded = useCallback(\n    (newIsExpanded: boolean) => {\n      setIsExpanded(newIsExpanded)\n      onExpandedChange?.(newIsExpanded)\n    },\n    [onExpandedChange],\n  )\n\n  // Memoized reset functions for external use\n  const resetAllStates = useCallback(() => {\n    dispatchSubmenu({ type: 'RESET_ALL' })\n    const defaultExpanded = isExpandedInitial\n    setIsExpanded(defaultExpanded)\n    onExpandedChange?.(defaultExpanded)\n  }, [isExpandedInitial, onExpandedChange])\n\n  const resetExpansionOnly = useCallback(() => {\n    const defaultExpanded = isExpandedInitial\n    setIsExpanded(defaultExpanded)\n    onExpandedChange?.(defaultExpanded)\n  }, [isExpandedInitial, onExpandedChange])\n\n  const resetSubmenuOnly = useCallback(() => {\n    dispatchSubmenu({ type: 'RESET_ALL' })\n  }, [])\n\n  // Memoized context value with all state management functions\n  const contextValue = useMemo(\n    () => ({\n      size,\n      variant,\n      isDark,\n      isMenuExpanded: isExpanded,\n      submenuStates,\n      setSubmenuState,\n      toggleSubmenu,\n      setIsExpanded: handleSetIsExpanded,\n      onExpandedChange,\n      resetAllStates,\n      resetExpansionOnly,\n      resetSubmenuOnly,\n    }),\n    [\n      size,\n      variant,\n      isDark,\n      isExpanded,\n      submenuStates,\n      setSubmenuState,\n      toggleSubmenu,\n      handleSetIsExpanded,\n      onExpandedChange,\n      resetAllStates,\n      resetExpansionOnly,\n      resetSubmenuOnly,\n    ],\n  )\n\n  return <SidemenuProvider value={contextValue}>{children}</SidemenuProvider>\n}\n\nexport { SidemenuProvider, useSidemenuContext }\n"],"mappings":"yKAkCA,MAAM,GAAkB,EAAgC,IAAmD,CACzG,IAAIA,EAEJ,OAAQ,EAAO,KAAf,CACE,IAAK,cACH,GAAI,EAAM,EAAO,UAAY,EAAO,OAClC,OAAO,EAET,EAAW,CAAE,GAAG,GAAQ,EAAO,QAAS,EAAO,OAAQ,CACvD,MAEF,IAAK,iBAAkB,CACrB,IAAM,EAAe,EAAM,EAAO,SAAW,GAC7C,EAAW,CAAE,GAAG,GAAQ,EAAO,QAAS,CAAC,EAAc,CACvD,MAEF,IAAK,gBACH,EAAW,EAAO,MAClB,MAEF,IAAK,YACH,EAAW,EAAE,CACb,MAEF,QACE,OAAO,EAIX,OAAO,GAYH,CAAC,EAAkB,GAAsBC,EAAoC,CAAE,WAAY,GAAM,CAAC,CAG3F,GAAyB,CACpC,WACA,oBAAoB,GACpB,mBACA,UACA,OACA,YACgC,CAEhC,GAAM,CAAC,EAAY,GAAiB,EAAS,EAAkB,CAGzD,CAAC,EAAe,GAAmB,EAAW,EAAgB,EAAE,CAAC,CAGjE,EAAkB,GAAa,EAAgB,IAAoB,CACvE,EAAgB,CAAE,KAAM,cAAe,SAAQ,SAAQ,CAAC,EACvD,EAAE,CAAC,CAEA,EAAgB,EAAa,GAAmB,CACpD,EAAgB,CAAE,KAAM,iBAAkB,SAAQ,CAAC,EAClD,EAAE,CAAC,CAGA,EAAsB,EACzB,GAA2B,CAC1B,EAAc,EAAc,CAC5B,IAAmB,EAAc,EAEnC,CAAC,EAAiB,CACnB,CAGK,EAAiB,MAAkB,CACvC,EAAgB,CAAE,KAAM,YAAa,CAAC,CACtC,IAAM,EAAkB,EACxB,EAAc,EAAgB,CAC9B,IAAmB,EAAgB,EAClC,CAAC,EAAmB,EAAiB,CAAC,CAEnC,EAAqB,MAAkB,CAC3C,IAAM,EAAkB,EACxB,EAAc,EAAgB,CAC9B,IAAmB,EAAgB,EAClC,CAAC,EAAmB,EAAiB,CAAC,CAEnC,EAAmB,MAAkB,CACzC,EAAgB,CAAE,KAAM,YAAa,CAAC,EACrC,EAAE,CAAC,CAkCN,OAAO,EAAC,EAAA,CAAiB,MA/BJ,OACZ,CACL,OACA,UACA,SACA,eAAgB,EAChB,gBACA,kBACA,gBACA,cAAe,EACf,mBACA,iBACA,qBACA,mBACD,EACD,CACE,EACA,EACA,EACA,EACA,EACA,EACA,EACA,EACA,EACA,EACA,EACA,EACD,CACF,CAE8C,YAA4B"}
+{"version":3,"file":"context.js","names":["newState: Record<string, boolean>","createContext"],"sources":["../../src/sidemenuV2/context.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport { useMemo, useState, useCallback, useReducer } from 'react'\n\nimport type { Dict } from '../utils'\nimport { createContext } from '../utils'\n\nexport interface SidemenuContextValue extends Dict {\n  // Existing properties\n  variant?: string\n  size?: string\n  isMenuExpanded?: boolean\n\n  // Submenu state management\n  submenuStates?: Record<string, boolean>\n  setSubmenuState?: (itemId: string, isOpen: boolean) => void\n  toggleSubmenu?: (itemId: string) => void\n\n  // Expansion state management\n  setIsExpanded?: (isExpanded: boolean) => void\n  onExpandedChange?: (isExpanded: boolean) => void\n\n  // Memoized reset functions\n  resetAllStates?: () => void\n  resetExpansionOnly?: () => void\n  resetSubmenuOnly?: () => void\n}\n\n// Submenu state reducer for more stable state management\ntype SubmenuAction =\n  | { type: 'SET_SUBMENU'; itemId: string; isOpen: boolean }\n  | { type: 'TOGGLE_SUBMENU'; itemId: string }\n  | { type: 'RESET_ALL' }\n  | { type: 'RESTORE_STATE'; state: Record<string, boolean> }\n\nconst submenuReducer = (state: Record<string, boolean>, action: SubmenuAction): Record<string, boolean> => {\n  let newState: Record<string, boolean>\n\n  switch (action.type) {\n    case 'SET_SUBMENU': {\n      if (state[action.itemId] === action.isOpen) {\n        return state // Return same reference if no change\n      }\n      newState = { ...state, [action.itemId]: action.isOpen }\n      break\n    }\n    case 'TOGGLE_SUBMENU': {\n      const currentValue = state[action.itemId] || false\n      newState = { ...state, [action.itemId]: !currentValue }\n      break\n    }\n    case 'RESTORE_STATE': {\n      newState = action.state\n      break\n    }\n    case 'RESET_ALL': {\n      newState = {}\n      break\n    }\n    default:\n      return state\n  }\n\n  // Submenu states are now persisted in context only\n  return newState\n}\n\ninterface SidemenuStateProviderProps {\n  children: ReactNode\n  isExpandedInitial?: boolean\n  onExpandedChange?: (isExpanded: boolean) => void\n  variant?: string\n  size?: string\n  isDark?: boolean\n}\n\nconst [SidemenuProvider, useSidemenuContext] = createContext<SidemenuContextValue>({ isOptional: true })\n\n// Enhanced provider that manages state\nexport const SidemenuStateProvider = ({\n  children,\n  isExpandedInitial = true,\n  onExpandedChange,\n  variant,\n  size,\n  isDark,\n}: SidemenuStateProviderProps) => {\n  // Pure uncontrolled state without persistence - context only\n  const [isExpanded, setIsExpanded] = useState(isExpandedInitial)\n\n  // Initialize submenu states as empty - persisted in context only\n  const [submenuStates, dispatchSubmenu] = useReducer(submenuReducer, {})\n\n  // Submenu state management functions using reducer dispatch - memoized\n  const setSubmenuState = useCallback((itemId: string, isOpen: boolean) => {\n    dispatchSubmenu({ type: 'SET_SUBMENU', itemId, isOpen })\n  }, [])\n\n  const toggleSubmenu = useCallback((itemId: string) => {\n    dispatchSubmenu({ type: 'TOGGLE_SUBMENU', itemId })\n  }, [])\n\n  // Enhanced setIsExpanded that handles callbacks - memoized\n  const handleSetIsExpanded = useCallback(\n    (newIsExpanded: boolean) => {\n      setIsExpanded(newIsExpanded)\n      onExpandedChange?.(newIsExpanded)\n    },\n    [onExpandedChange],\n  )\n\n  // Memoized reset functions for external use\n  const resetAllStates = useCallback(() => {\n    dispatchSubmenu({ type: 'RESET_ALL' })\n    const defaultExpanded = isExpandedInitial\n    setIsExpanded(defaultExpanded)\n    onExpandedChange?.(defaultExpanded)\n  }, [isExpandedInitial, onExpandedChange])\n\n  const resetExpansionOnly = useCallback(() => {\n    const defaultExpanded = isExpandedInitial\n    setIsExpanded(defaultExpanded)\n    onExpandedChange?.(defaultExpanded)\n  }, [isExpandedInitial, onExpandedChange])\n\n  const resetSubmenuOnly = useCallback(() => {\n    dispatchSubmenu({ type: 'RESET_ALL' })\n  }, [])\n\n  // Memoized context value with all state management functions\n  const contextValue = useMemo(\n    () => ({\n      size,\n      variant,\n      isDark,\n      isMenuExpanded: isExpanded,\n      submenuStates,\n      setSubmenuState,\n      toggleSubmenu,\n      setIsExpanded: handleSetIsExpanded,\n      onExpandedChange,\n      resetAllStates,\n      resetExpansionOnly,\n      resetSubmenuOnly,\n    }),\n    [\n      size,\n      variant,\n      isDark,\n      isExpanded,\n      submenuStates,\n      setSubmenuState,\n      toggleSubmenu,\n      handleSetIsExpanded,\n      onExpandedChange,\n      resetAllStates,\n      resetExpansionOnly,\n      resetSubmenuOnly,\n    ],\n  )\n\n  return <SidemenuProvider value={contextValue}>{children}</SidemenuProvider>\n}\n\nexport { SidemenuProvider, useSidemenuContext }\n"],"mappings":";;;;;AAkCA,MAAM,kBAAkB,OAAgC,WAAmD;CACzG,IAAIA;AAEJ,SAAQ,OAAO,MAAf;EACE,KAAK;AACH,OAAI,MAAM,OAAO,YAAY,OAAO,OAClC,QAAO;AAET,cAAW;IAAE,GAAG;KAAQ,OAAO,SAAS,OAAO;IAAQ;AACvD;EAEF,KAAK,kBAAkB;GACrB,MAAM,eAAe,MAAM,OAAO,WAAW;AAC7C,cAAW;IAAE,GAAG;KAAQ,OAAO,SAAS,CAAC;IAAc;AACvD;;EAEF,KAAK;AACH,cAAW,OAAO;AAClB;EAEF,KAAK;AACH,cAAW,EAAE;AACb;EAEF,QACE,QAAO;;AAIX,QAAO;;AAYT,MAAM,CAAC,kBAAkB,sBAAsBC,gBAAoC,EAAE,YAAY,MAAM,CAAC;AAGxG,MAAa,yBAAyB,EACpC,UACA,oBAAoB,MACpB,kBACA,SACA,MACA,aACgC;CAEhC,MAAM,CAAC,YAAY,iBAAiB,SAAS,kBAAkB;CAG/D,MAAM,CAAC,eAAe,mBAAmB,WAAW,gBAAgB,EAAE,CAAC;CAGvE,MAAM,kBAAkB,aAAa,QAAgB,WAAoB;AACvE,kBAAgB;GAAE,MAAM;GAAe;GAAQ;GAAQ,CAAC;IACvD,EAAE,CAAC;CAEN,MAAM,gBAAgB,aAAa,WAAmB;AACpD,kBAAgB;GAAE,MAAM;GAAkB;GAAQ,CAAC;IAClD,EAAE,CAAC;CAGN,MAAM,sBAAsB,aACzB,kBAA2B;AAC1B,gBAAc,cAAc;AAC5B,qBAAmB,cAAc;IAEnC,CAAC,iBAAiB,CACnB;CAGD,MAAM,iBAAiB,kBAAkB;AACvC,kBAAgB,EAAE,MAAM,aAAa,CAAC;EACtC,MAAM,kBAAkB;AACxB,gBAAc,gBAAgB;AAC9B,qBAAmB,gBAAgB;IAClC,CAAC,mBAAmB,iBAAiB,CAAC;CAEzC,MAAM,qBAAqB,kBAAkB;EAC3C,MAAM,kBAAkB;AACxB,gBAAc,gBAAgB;AAC9B,qBAAmB,gBAAgB;IAClC,CAAC,mBAAmB,iBAAiB,CAAC;CAEzC,MAAM,mBAAmB,kBAAkB;AACzC,kBAAgB,EAAE,MAAM,aAAa,CAAC;IACrC,EAAE,CAAC;AAkCN,QAAO,oBAAC;EAAiB,OA/BJ,eACZ;GACL;GACA;GACA;GACA,gBAAgB;GAChB;GACA;GACA;GACA,eAAe;GACf;GACA;GACA;GACA;GACD,GACD;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CACF;EAE8C;GAA4B"}

package/dist/sidemenuV2/index.d.ts

@@ -0,0 +1,3 @@
+import { SidemenuStateProvider, useSidemenuContext } from "./context.js";
+import { SidemenuCollapseModeV2, SidemenuComponentV2Props, SidemenuContextV2Value, SidemenuExpandEventV2, SidemenuFlatItemV2, SidemenuGroupV2Props, SidemenuItemBadgeV2Props, SidemenuItemClickEventV2, SidemenuItemComponentV2Props, SidemenuItemV2Props, SidemenuItemWithChildrenV2, SidemenuOrientationV2, SidemenuSizeV2, SidemenuTopComponentV2Props, SidemenuTopPropsV2, SidemenuTopV2Props, SidemenuV2Props, SidemenuVariantV2, UseSidemenuItemV2Return, UseSidemenuV2Return } from "./sidemenuV2.types.js";
+import { SidemenuV2 } from "./sidemenuV2.js";

package/dist/sidemenuV2/sidemenuItemV2.d.ts

@@ -1,9 +1,9 @@
 import { VuiComponent } from "../core/vui.js";
+import "../core/index.js";
 import { SidemenuItemV2Props } from "./sidemenuV2.types.js";
 import "styled-components";
 
 //#region src/sidemenuV2/sidemenuItemV2.d.ts
-
 /** A menu item. */
 declare const SidemenuItemV2: VuiComponent<"div", SidemenuItemV2Props>;
 //#endregion

package/dist/sidemenuV2/sidemenuItemV2.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidemenuItemV2.d.ts","names":[],"sources":["../../src/sidemenuV2/sidemenuItemV2.tsx"],"sourcesContent":[],"mappings":";;;;;;AAmFA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,IAAA,CAAA,CAAA,CAAA;AAkO8C,OAAA,CAAA,KAAA,CAlOjC,cAkOiC,CAAA,CAAxC,YAAwC,CAAA,CAAA,GAAA,CAAA,CAAA,CAApB,mBAAoB,CAAA"}
+{"version":3,"file":"sidemenuItemV2.d.ts","names":[],"sources":["../../src/sidemenuV2/sidemenuItemV2.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAmFa,OAAA,CAAA,KAAA,CAAA,cAkOa,CAAA,CAApB,YAAoB,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA,mBAAR,CAAA"}

package/dist/sidemenuV2/sidemenuItemV2.js

@@ -1,9 +1,241 @@
-import{generateMenuItemId as e}from"../utils/string.js";import t from"../theme/foundations/colors.js";import{cs as n}from"../utils/styles.js";import{omitThemingProps as r,th as i}from"../core/theme.js";import{styled as a}from"../core/styled.js";import{vui as o}from"../core/vui.js";import s from"../box/box.js";import c from"../button/button.js";import l from"../popover/popover.js";import u from"../tooltip/tooltip.js";import{collapsedWidth as d,expandedWidth as f}from"./consts.js";import p from"./SidemenuItemContent.js";import m from"./useSidemenuItem.js";import{useCallback as h,useEffect as g,useMemo as _}from"react";import{jsx as v,jsxs as y}from"react/jsx-runtime";const b=a.div`
+import { generateMenuItemId } from "../utils/string.js";
+import colors_default from "../theme/foundations/colors.js";
+import { cs } from "../utils/styles.js";
+import { omitThemingProps, th } from "../core/theme.js";
+import { styled } from "../core/styled.js";
+import { vui } from "../core/vui.js";
+import box_default from "../box/box.js";
+import button_default from "../button/button.js";
+import Popover from "../popover/popover.js";
+import tooltip_default from "../tooltip/tooltip.js";
+import { collapsedWidth, expandedWidth } from "./consts.js";
+import SidemenuItemContent_default from "./SidemenuItemContent.js";
+import useSidemenuItem_default from "./useSidemenuItem.js";
+import { useCallback, useEffect, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/sidemenuV2/sidemenuItemV2.tsx
+const PopoverHovered = styled.div`
   &:hover .vui-sidemenu-item-popover .vui-button.vui-button {
-    background: ${e=>i.color(e.hoverColor)};
+    background: ${(p) => th.color(p.hoverColor)};
   }
   &:hover div:last-child .tippy-content .vui-sidemenu-item-content > .vui-box > .vui-button.vui-button {
-    background: ${e=>i.color(e.hoverColor)};
+    background: ${(p) => th.color(p.hoverColor)};
   }
-`,x=({isDark:e,className:r,buttonStyles:i,isExactlyActive:a,icon:o,title:u,isMenuExpanded:m,children:h})=>v(l,{offset:[0,d-f-2],placement:`right-start`,trigger:`mouseenter`,children:({isOpen:d})=>y(b,{hoverColor:e?t.seaBlue.main:t.skyBlue.selected,children:[v(l.Trigger,{as:s,className:n(`vui-sidemenu-item-popover`,r),children:v(c,{...i,borderLeft:`3px solid ${e?`digiGreen.main`:`seaBlue.main`}`,isActive:a,className:n(`focusAsBorder`),children:v(p,{icon:o,iconSize:i.iconSize,title:u,isMenuExpanded:m})})}),v(l.Content,{elevation:`none`,className:n(`vui-sidemenu-item-content`,r),children:y(s,{flexDirection:`column`,justifyContent:`start`,w:`100%`,children:[v(c,{...i,borderLeftColor:`transparent!important`,minW:`240px`,isActive:d&&a,className:n(`focusAsBorder`),children:v(p,{title:u,isInPopover:!0})}),h]})})]})}),S=o((t,i)=>{let{children:a,className:o,disabled:l=!1,icon:d,isActive:f=!1,isExpanded:b=!0,itemId:S,level:C=0,onBottom:w=!1,onClick:T,onCollapse:E,onExpand:D,title:O,...k}=r(t),A=S||e(O,C)||`item-${Math.random().toString(36).substr(2,9)}`,{isDark:j,isMenuExpanded:M,styles:N,size:P,isSubmenuOpen:F,toggleSubmenu:I}=m(A),L=f;g(()=>{M&&(F&&D?.(),F||E?.())},[F,D,E,M]);let R=_(()=>{let e=!!a;return{hasChildren:e,hasChildrenCollapsed:e&&!F,hasChildrenExpanded:e&&F&&M,shouldShowExpandButton:e&&M,buttonSize:C<1?`lg`:`md`,iconSize:C<1?`sm`:`xs`,isDisabled:l,shouldShowBorder:!e||F}},[a,F,M,l,P,C]),z=_(()=>({activeColor:j?`digiGreen.main`:`seaBlue.main`,buttonVariant:j?`menuDark`:`menuLight`}),[j]),B=h(e=>{if(!R.isDisabled){let t=e.target;if((t.classList.contains(`vui-tagText`)||t.classList.contains(`vui-tag`))&&typeof window<`u`&&(t.parentElement?.dataset.link||t?.dataset.link)){let e=atob(t.parentElement?.dataset.link??t?.dataset.link??``);window.open(e,`_blank`,`noopener,noreferrer`)}else e?.stopPropagation?.(),T?.()}I?.()},[T,R.isDisabled]),V=_(()=>({...N&&`item`in N&&N.item?N.item:{},borderLeftColor:L?z.activeColor:`transparent`,transitionProperty:`background-color, border-color, color, transform, opacity`,size:R.buttonSize,h:R.buttonSize===`lg`?40:36,iconSize:R.iconSize,variant:z.buttonVariant,onClick:B,disabled:R.isDisabled,role:`button`,tabIndex:R.isDisabled?-1:0,"aria-disabled":R.isDisabled,"aria-pressed":L,...k}),[N,R,L,z,B,k]),H=_(()=>{let e=F,t=e?`falChevronUp`:`falChevronDown`,n=e?`Collapse`:`Expand`;return{"aria-label":n,className:`vui-sidemenu-item-expand`,variant:z.buttonVariant,icon:t,size:`sm`,pl:`4px`,pr:`16px`,ml:`auto`,h:`100%`,border:`none`,bg:`transparent`,hoverBg:`transparent`,activeBg:`transparent`}},[F,z.buttonVariant]),U=()=>v(x,{isDark:j,className:o,buttonStyles:V,isExactlyActive:L,icon:d,title:O,isMenuExpanded:M,children:a||void 0}),W=()=>C===0&&!M?v(u,{text:O,placement:`right`,offset:[0,-200],children:y(c,{className:n(`vui-sidemenu-item focusAsBorder`,L&&`vui-sidemenu-item--active`,o),...V,isActive:L,children:[v(p,{icon:d,iconSize:V.iconSize}),M&&R.shouldShowExpandButton&&v(c,{...H}),` `]})}):y(c,{className:n(`vui-sidemenu-item focusAsBorder`,L&&`vui-sidemenu-item--active`,o),...V,isActive:L,title:M?void 0:O,children:[v(p,{icon:d,iconSize:V.iconSize,title:O,isMenuExpanded:M,badge:t.badge,badgeLinkUrl:t.badgeLinkUrl}),M&&R.shouldShowExpandButton&&v(c,{...H}),` `]}),G=()=>v(s,{flexDirection:`column`,justifyContent:`start`,w:`100%`,children:a}),K=!!(!M&&C===0&&a),q=R.hasChildrenExpanded;return y(s,{flexDirection:`column`,ref:i,w:`100%`,mt:w?`auto`:0,id:A,children:[K&&U(),!K&&W(),q&&G()]})});S.displayName=`SidemenuItemV2`;var C=S;export{C as default};globalThis.__vuiVersion__=`3.0.0-beta.8`;
+`;
+const SidemenuPopover = ({ isDark, className, buttonStyles, isExactlyActive, icon, title, isMenuExpanded, children }) => /* @__PURE__ */ jsx(Popover, {
+	offset: [0, collapsedWidth - expandedWidth - 2],
+	placement: "right-start",
+	trigger: "mouseenter",
+	children: ({ isOpen }) => /* @__PURE__ */ jsxs(PopoverHovered, {
+		hoverColor: isDark ? colors_default.seaBlue.main : colors_default.skyBlue.selected,
+		children: [/* @__PURE__ */ jsx(Popover.Trigger, {
+			as: box_default,
+			className: cs("vui-sidemenu-item-popover", className),
+			children: /* @__PURE__ */ jsx(button_default, {
+				...buttonStyles,
+				borderLeft: `3px solid ${isDark ? "digiGreen.main" : "seaBlue.main"}`,
+				isActive: isExactlyActive,
+				className: cs("focusAsBorder"),
+				children: /* @__PURE__ */ jsx(SidemenuItemContent_default, {
+					icon,
+					iconSize: buttonStyles.iconSize,
+					title,
+					isMenuExpanded
+				})
+			})
+		}), /* @__PURE__ */ jsx(Popover.Content, {
+			elevation: "none",
+			className: cs("vui-sidemenu-item-content", className),
+			children: /* @__PURE__ */ jsxs(box_default, {
+				flexDirection: "column",
+				justifyContent: "start",
+				w: "100%",
+				children: [/* @__PURE__ */ jsx(button_default, {
+					...buttonStyles,
+					borderLeftColor: "transparent!important",
+					minW: "240px",
+					isActive: isOpen && isExactlyActive,
+					className: cs("focusAsBorder"),
+					children: /* @__PURE__ */ jsx(SidemenuItemContent_default, {
+						title,
+						isInPopover: true
+					})
+				}), children]
+			})
+		})]
+	})
+});
+/** A menu item. */
+const SidemenuItemV2 = vui((props, ref) => {
+	const { children, className, disabled = false, icon, isActive = false, isExpanded = true, itemId, level = 0, onBottom = false, onClick, onCollapse, onExpand, title,...rest } = omitThemingProps(props);
+	const computedItemId = itemId || generateMenuItemId(title, level) || `item-${Math.random().toString(36).substr(2, 9)}`;
+	const { isDark, isMenuExpanded, styles, size, isSubmenuOpen, toggleSubmenu } = useSidemenuItem_default(computedItemId);
+	const isExactlyActive = isActive;
+	useEffect(() => {
+		if (isMenuExpanded) {
+			if (isSubmenuOpen) onExpand?.();
+			if (!isSubmenuOpen) onCollapse?.();
+		}
+	}, [
+		isSubmenuOpen,
+		onExpand,
+		onCollapse,
+		isMenuExpanded
+	]);
+	const computedStates = useMemo(() => {
+		const hasChildren = !!children;
+		return {
+			hasChildren,
+			hasChildrenCollapsed: hasChildren && !isSubmenuOpen,
+			hasChildrenExpanded: hasChildren && isSubmenuOpen && isMenuExpanded,
+			shouldShowExpandButton: hasChildren && isMenuExpanded,
+			buttonSize: level < 1 ? "lg" : "md",
+			iconSize: level < 1 ? "sm" : "xs",
+			isDisabled: disabled,
+			shouldShowBorder: !hasChildren || isSubmenuOpen
+		};
+	}, [
+		children,
+		isSubmenuOpen,
+		isMenuExpanded,
+		disabled,
+		size,
+		level
+	]);
+	const themeValues = useMemo(() => ({
+		activeColor: isDark ? "digiGreen.main" : "seaBlue.main",
+		buttonVariant: isDark ? "menuDark" : "menuLight"
+	}), [isDark]);
+	const handleClick = useCallback((event) => {
+		if (!computedStates.isDisabled) {
+			const targetTag = event.target;
+			if ((targetTag.classList.contains("vui-tagText") || targetTag.classList.contains("vui-tag")) && typeof window !== "undefined" && (targetTag.parentElement?.dataset.link || targetTag?.dataset.link)) {
+				const url = atob(targetTag.parentElement?.dataset.link ?? targetTag?.dataset.link ?? "");
+				window.open(url, "_blank", "noopener,noreferrer");
+			} else {
+				event?.stopPropagation?.();
+				onClick?.();
+			}
+		}
+		toggleSubmenu?.();
+	}, [onClick, computedStates.isDisabled]);
+	const buttonStyles = useMemo(() => ({
+		...styles && "item" in styles && styles.item ? styles.item : {},
+		borderLeftColor: isExactlyActive ? themeValues.activeColor : "transparent",
+		transitionProperty: "background-color, border-color, color, transform, opacity",
+		size: computedStates.buttonSize,
+		h: computedStates.buttonSize === "lg" ? 40 : 36,
+		iconSize: computedStates.iconSize,
+		variant: themeValues.buttonVariant,
+		onClick: handleClick,
+		disabled: computedStates.isDisabled,
+		role: "button",
+		tabIndex: computedStates.isDisabled ? -1 : 0,
+		"aria-disabled": computedStates.isDisabled,
+		"aria-pressed": isExactlyActive,
+		...rest
+	}), [
+		styles,
+		computedStates,
+		isExactlyActive,
+		themeValues,
+		handleClick,
+		rest
+	]);
+	const expandButtonProps = useMemo(() => {
+		const isExpanded$1 = isSubmenuOpen;
+		const chevronIcon = isExpanded$1 ? "falChevronUp" : "falChevronDown";
+		const ariaLabel = isExpanded$1 ? "Collapse" : "Expand";
+		return {
+			"aria-label": ariaLabel,
+			className: "vui-sidemenu-item-expand",
+			variant: themeValues.buttonVariant,
+			icon: chevronIcon,
+			size: "sm",
+			pl: "4px",
+			pr: "16px",
+			ml: "auto",
+			h: "100%",
+			border: "none",
+			bg: "transparent",
+			hoverBg: "transparent",
+			activeBg: "transparent"
+		};
+	}, [isSubmenuOpen, themeValues.buttonVariant]);
+	const renderPopover = () => /* @__PURE__ */ jsx(SidemenuPopover, {
+		isDark,
+		className,
+		buttonStyles,
+		isExactlyActive,
+		icon,
+		title,
+		isMenuExpanded,
+		children: children ? children : void 0
+	});
+	const renderButton = () => {
+		if (level === 0 && !isMenuExpanded) return /* @__PURE__ */ jsx(tooltip_default, {
+			text: title,
+			placement: "right",
+			offset: [0, -200],
+			children: /* @__PURE__ */ jsxs(button_default, {
+				className: cs("vui-sidemenu-item focusAsBorder", isExactlyActive && "vui-sidemenu-item--active", className),
+				...buttonStyles,
+				isActive: isExactlyActive,
+				children: [
+					/* @__PURE__ */ jsx(SidemenuItemContent_default, {
+						icon,
+						iconSize: buttonStyles.iconSize
+					}),
+					isMenuExpanded && computedStates.shouldShowExpandButton && /* @__PURE__ */ jsx(button_default, { ...expandButtonProps }),
+					" "
+				]
+			})
+		});
+		return /* @__PURE__ */ jsxs(button_default, {
+			className: cs("vui-sidemenu-item focusAsBorder", isExactlyActive && "vui-sidemenu-item--active", className),
+			...buttonStyles,
+			isActive: isExactlyActive,
+			title: !isMenuExpanded ? title : void 0,
+			children: [
+				/* @__PURE__ */ jsx(SidemenuItemContent_default, {
+					icon,
+					iconSize: buttonStyles.iconSize,
+					title,
+					isMenuExpanded,
+					badge: props.badge,
+					badgeLinkUrl: props.badgeLinkUrl
+				}),
+				isMenuExpanded && computedStates.shouldShowExpandButton && /* @__PURE__ */ jsx(button_default, { ...expandButtonProps }),
+				" "
+			]
+		});
+	};
+	const renderChildren = () => /* @__PURE__ */ jsx(box_default, {
+		flexDirection: "column",
+		justifyContent: "start",
+		w: "100%",
+		children
+	});
+	const shouldShowPopover = Boolean(!isMenuExpanded && level === 0 && !!children);
+	const shouldShowChildren = computedStates.hasChildrenExpanded;
+	return /* @__PURE__ */ jsxs(box_default, {
+		flexDirection: "column",
+		ref,
+		w: "100%",
+		mt: onBottom ? "auto" : 0,
+		id: computedItemId,
+		children: [
+			shouldShowPopover && renderPopover(),
+			!shouldShowPopover && renderButton(),
+			shouldShowChildren && renderChildren()
+		]
+	});
+});
+SidemenuItemV2.displayName = "SidemenuItemV2";
+var sidemenuItemV2_default = SidemenuItemV2;
+
+//#endregion
+export { sidemenuItemV2_default as default };
+globalThis.__vuiVersion__ = "3.0.0"
 //# sourceMappingURL=sidemenuItemV2.js.map

package/dist/sidemenuV2/sidemenuItemV2.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidemenuItemV2.js","names":["colors","Box","Button","SidemenuItemContent","useSidemenuItem","isExpanded","Tooltip"],"sources":["../../src/sidemenuV2/sidemenuItemV2.tsx"],"sourcesContent":["import type { MouseEvent } from 'react'\nimport { useEffect, useMemo, useCallback } from 'react'\n\nimport Box from '../box'\nimport Button from '../button'\nimport type { VuiComponent } from '../core'\nimport { omitThemingProps, styled, th, vui } from '../core'\nimport Popover from '../popover'\nimport { colors } from '../theme'\nimport Tooltip from '../tooltip'\nimport { cs, generateMenuItemId } from '../utils'\nimport { collapsedWidth, expandedWidth } from './consts'\nimport SidemenuItemContent from './SidemenuItemContent'\nimport type { SidemenuItemV2Props } from './sidemenuV2.types'\nimport useSidemenuItem from './useSidemenuItem'\n\nexport const PopoverHovered = styled.div<{ hoverColor: string }>`\n  &:hover .vui-sidemenu-item-popover .vui-button.vui-button {\n    background: ${p => th.color(p.hoverColor)};\n  }\n  &:hover div:last-child .tippy-content .vui-sidemenu-item-content > .vui-box > .vui-button.vui-button {\n    background: ${p => th.color(p.hoverColor)};\n  }\n`\n\n// SidemenuPopover component extracted from inline Popover logic\nconst SidemenuPopover = ({\n  isDark,\n  className,\n  buttonStyles,\n  isExactlyActive,\n  icon,\n  title,\n  isMenuExpanded,\n  children,\n}: {\n  isDark: boolean\n  className?: string\n  buttonStyles: any\n  isExactlyActive: boolean\n  icon?: any\n  title: string\n  isMenuExpanded: boolean\n  children: React.ReactNode\n}) => (\n  <Popover offset={[0, collapsedWidth - expandedWidth - 2]} placement=\"right-start\" trigger=\"mouseenter\">\n    {({ isOpen }: { isOpen: boolean }) => (\n      <PopoverHovered hoverColor={isDark ? colors.seaBlue.main : colors.skyBlue.selected}>\n        <Popover.Trigger as={Box} className={cs('vui-sidemenu-item-popover', className)}>\n          <Button\n            {...buttonStyles}\n            borderLeft={`3px solid ${isDark ? 'digiGreen.main' : 'seaBlue.main'}`}\n            isActive={isExactlyActive}\n            className={cs('focusAsBorder')}\n          >\n            <SidemenuItemContent\n              icon={icon}\n              iconSize={buttonStyles.iconSize}\n              title={title}\n              isMenuExpanded={isMenuExpanded}\n            />\n          </Button>\n        </Popover.Trigger>\n        <Popover.Content elevation=\"none\" className={cs('vui-sidemenu-item-content', className)}>\n          <Box flexDirection=\"column\" justifyContent=\"start\" w=\"100%\">\n            <Button\n              {...buttonStyles}\n              borderLeftColor={'transparent!important'}\n              minW={'240px'}\n              isActive={isOpen && isExactlyActive}\n              className={cs('focusAsBorder')}\n            >\n              <SidemenuItemContent title={title} isInPopover={true} />\n            </Button>\n            {children}\n          </Box>\n        </Popover.Content>\n      </PopoverHovered>\n    )}\n  </Popover>\n)\n\n/** A menu item. */\nexport const SidemenuItemV2 = vui<'button', SidemenuItemV2Props>((props, ref) => {\n  const {\n    children,\n    className,\n    disabled = false,\n    icon,\n    isActive = false,\n    isExpanded = true,\n    itemId,\n    level = 0,\n    onBottom = false,\n    onClick,\n    onCollapse,\n    onExpand,\n    title,\n    ...rest\n  } = omitThemingProps(props)\n\n  // Use consistent itemId generation - prioritize provided itemId, then use utility function\n  const computedItemId = itemId || generateMenuItemId(title, level) || `item-${Math.random().toString(36).substr(2, 9)}`\n\n  const { isDark, isMenuExpanded, styles, size, isSubmenuOpen, toggleSubmenu } = useSidemenuItem(computedItemId)\n\n  // Use the isActive prop directly - parent should handle exact path matching\n  const isExactlyActive = isActive\n\n  useEffect(() => {\n    // Only call onExpand/onCollapse if the main menu is expanded\n    // This prevents child items from expanding the main menu when it's collapsed\n    if (isMenuExpanded) {\n      if (isSubmenuOpen) onExpand?.()\n      if (!isSubmenuOpen) onCollapse?.()\n    }\n  }, [isSubmenuOpen, onExpand, onCollapse, isMenuExpanded])\n\n  // Memoized computed values for better performance\n  const computedStates = useMemo(() => {\n    const hasChildren = !!children\n    const isSubmenuCollapsed = hasChildren && !isSubmenuOpen\n    // Only allow submenu expansion when main menu is expanded\n    const isSubmenuExpanded = hasChildren && isSubmenuOpen && isMenuExpanded\n    const shouldShowExpandButton = hasChildren && isMenuExpanded\n    const buttonSize = level < 1 ? ('lg' as const) : ('md' as const)\n    const iconSize = level < 1 ? ('sm' as const) : ('xs' as const)\n\n    const states = {\n      hasChildren,\n      hasChildrenCollapsed: isSubmenuCollapsed,\n      hasChildrenExpanded: isSubmenuExpanded,\n      shouldShowExpandButton,\n      buttonSize,\n      iconSize,\n      isDisabled: disabled,\n      shouldShowBorder: !hasChildren || isSubmenuOpen,\n    }\n\n    return states\n  }, [children, isSubmenuOpen, isMenuExpanded, disabled, size, level])\n\n  // Memoized theme values to prevent recalculation\n  const themeValues = useMemo(\n    () => ({\n      activeColor: isDark ? 'digiGreen.main' : 'seaBlue.main',\n      buttonVariant: isDark ? 'menuDark' : 'menuLight',\n    }),\n    [isDark],\n  )\n\n  // Optimized stable callback\n  const handleClick = useCallback(\n    (event: MouseEvent) => {\n      if (!computedStates.isDisabled) {\n        const targetTag = event.target as HTMLElement\n        if (\n          (targetTag.classList.contains('vui-tagText') || targetTag.classList.contains('vui-tag')) &&\n          typeof window !== 'undefined' &&\n          (targetTag.parentElement?.dataset.link || targetTag?.dataset.link)\n        ) {\n          const url = atob(targetTag.parentElement?.dataset.link ?? targetTag?.dataset.link ?? '')\n          window.open(url, '_blank', 'noopener,noreferrer')\n        } else {\n          event?.stopPropagation?.()\n          onClick?.()\n        }\n      }\n      toggleSubmenu?.()\n    },\n    [onClick, computedStates.isDisabled],\n  )\n\n  // Memoized button styles - Major performance improvement\n  const buttonStyles = useMemo(\n    () => ({\n      // Get base item styles from theme\n      ...(styles && 'item' in styles && styles.item ? styles.item : {}),\n\n      // Dynamic border color based on active state\n      borderLeftColor: isExactlyActive ? themeValues.activeColor : 'transparent',\n\n      // Animation properties (enhanced from theme)\n      transitionProperty: 'background-color, border-color, color, transform, opacity',\n\n      // Button specific properties\n      size: computedStates.buttonSize,\n      h: computedStates.buttonSize === 'lg' ? 40 : 36,\n      iconSize: computedStates.iconSize,\n      variant: themeValues.buttonVariant,\n\n      // Event handlers\n      onClick: handleClick,\n      disabled: computedStates.isDisabled,\n\n      // Accessibility\n      role: 'button',\n      tabIndex: computedStates.isDisabled ? -1 : 0,\n      'aria-disabled': computedStates.isDisabled,\n      'aria-pressed': isExactlyActive,\n\n      // Merge custom props\n      ...rest,\n    }),\n    [\n      // Dependencies grouped logically - simplified since computedStates contains most values\n      styles,\n      computedStates,\n      isExactlyActive,\n      themeValues,\n      handleClick,\n      rest,\n    ],\n  )\n\n  // Memoized expand/collapse button properties\n  const expandButtonProps = useMemo(() => {\n    const isExpanded = isSubmenuOpen\n    const chevronIcon = isExpanded ? 'falChevronUp' : 'falChevronDown'\n    const ariaLabel = isExpanded ? 'Collapse' : 'Expand'\n\n    return {\n      'aria-label': ariaLabel,\n      className: 'vui-sidemenu-item-expand',\n      variant: themeValues.buttonVariant,\n      icon: chevronIcon,\n      size: 'sm' as const,\n      pl: '4px',\n      pr: '16px',\n      ml: 'auto',\n      h: '100%',\n      border: 'none',\n      bg: 'transparent',\n      hoverBg: 'transparent',\n      activeBg: 'transparent',\n    }\n  }, [isSubmenuOpen, themeValues.buttonVariant])\n\n  // Helper: Render collapsed popover\n  const renderPopover = () => (\n    <SidemenuPopover\n      isDark={isDark}\n      className={className}\n      buttonStyles={buttonStyles}\n      isExactlyActive={isExactlyActive}\n      icon={icon}\n      title={title}\n      isMenuExpanded={isMenuExpanded}\n    >\n      {children ? children : undefined}\n    </SidemenuPopover>\n  )\n\n  // Helper: Render expanded button\n  const renderButton = () => {\n    if (level === 0 && !isMenuExpanded) {\n      return (\n        <Tooltip text={title} placement=\"right\" offset={[0, -200]}>\n          <Button\n            className={cs('vui-sidemenu-item focusAsBorder', isExactlyActive && 'vui-sidemenu-item--active', className)}\n            {...buttonStyles}\n            isActive={isExactlyActive}\n          >\n            <SidemenuItemContent icon={icon} iconSize={buttonStyles.iconSize} />\n            {isMenuExpanded && computedStates.shouldShowExpandButton && <Button {...expandButtonProps} />}{' '}\n          </Button>\n        </Tooltip>\n      )\n    }\n\n    return (\n      <Button\n        className={cs('vui-sidemenu-item focusAsBorder', isExactlyActive && 'vui-sidemenu-item--active', className)}\n        {...buttonStyles}\n        isActive={isExactlyActive}\n        title={!isMenuExpanded ? title : undefined}\n      >\n        <SidemenuItemContent\n          icon={icon}\n          iconSize={buttonStyles.iconSize}\n          title={title}\n          isMenuExpanded={isMenuExpanded}\n          badge={props.badge}\n          badgeLinkUrl={props.badgeLinkUrl}\n        />\n        {isMenuExpanded && computedStates.shouldShowExpandButton && <Button {...expandButtonProps} />}{' '}\n        {/* Expand/Collapse button */}\n      </Button>\n    )\n    // No leftover return, handled above\n  }\n\n  // Helper: Render expanded children\n  const renderChildren = () => (\n    <Box flexDirection=\"column\" justifyContent=\"start\" w=\"100%\">\n      {children}\n    </Box>\n  )\n\n  const shouldShowPopover = Boolean(!isMenuExpanded && level === 0 && !!children)\n  const shouldShowChildren = computedStates.hasChildrenExpanded\n\n  return (\n    <Box flexDirection=\"column\" ref={ref} w=\"100%\" mt={onBottom ? 'auto' : 0} id={computedItemId}>\n      {shouldShowPopover && renderPopover()}\n      {!shouldShowPopover && renderButton()}\n      {shouldShowChildren && renderChildren()}\n    </Box>\n  )\n}) as VuiComponent<'div', SidemenuItemV2Props>\n\nSidemenuItemV2.displayName = 'SidemenuItemV2'\n\nexport default SidemenuItemV2\n"],"mappings":"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"}
+{"version":3,"file":"sidemenuItemV2.js","names":["colors","Box","Button","SidemenuItemContent","useSidemenuItem","isExpanded","Tooltip"],"sources":["../../src/sidemenuV2/sidemenuItemV2.tsx"],"sourcesContent":["import type { MouseEvent } from 'react'\nimport { useEffect, useMemo, useCallback } from 'react'\n\nimport Box from '../box'\nimport Button from '../button'\nimport type { VuiComponent } from '../core'\nimport { omitThemingProps, styled, th, vui } from '../core'\nimport Popover from '../popover'\nimport { colors } from '../theme'\nimport Tooltip from '../tooltip'\nimport { cs, generateMenuItemId } from '../utils'\nimport { collapsedWidth, expandedWidth } from './consts'\nimport SidemenuItemContent from './SidemenuItemContent'\nimport type { SidemenuItemV2Props } from './sidemenuV2.types'\nimport useSidemenuItem from './useSidemenuItem'\n\nexport const PopoverHovered = styled.div<{ hoverColor: string }>`\n  &:hover .vui-sidemenu-item-popover .vui-button.vui-button {\n    background: ${p => th.color(p.hoverColor)};\n  }\n  &:hover div:last-child .tippy-content .vui-sidemenu-item-content > .vui-box > .vui-button.vui-button {\n    background: ${p => th.color(p.hoverColor)};\n  }\n`\n\n// SidemenuPopover component extracted from inline Popover logic\nconst SidemenuPopover = ({\n  isDark,\n  className,\n  buttonStyles,\n  isExactlyActive,\n  icon,\n  title,\n  isMenuExpanded,\n  children,\n}: {\n  isDark: boolean\n  className?: string\n  buttonStyles: any\n  isExactlyActive: boolean\n  icon?: any\n  title: string\n  isMenuExpanded: boolean\n  children: React.ReactNode\n}) => (\n  <Popover offset={[0, collapsedWidth - expandedWidth - 2]} placement=\"right-start\" trigger=\"mouseenter\">\n    {({ isOpen }: { isOpen: boolean }) => (\n      <PopoverHovered hoverColor={isDark ? colors.seaBlue.main : colors.skyBlue.selected}>\n        <Popover.Trigger as={Box} className={cs('vui-sidemenu-item-popover', className)}>\n          <Button\n            {...buttonStyles}\n            borderLeft={`3px solid ${isDark ? 'digiGreen.main' : 'seaBlue.main'}`}\n            isActive={isExactlyActive}\n            className={cs('focusAsBorder')}\n          >\n            <SidemenuItemContent\n              icon={icon}\n              iconSize={buttonStyles.iconSize}\n              title={title}\n              isMenuExpanded={isMenuExpanded}\n            />\n          </Button>\n        </Popover.Trigger>\n        <Popover.Content elevation=\"none\" className={cs('vui-sidemenu-item-content', className)}>\n          <Box flexDirection=\"column\" justifyContent=\"start\" w=\"100%\">\n            <Button\n              {...buttonStyles}\n              borderLeftColor={'transparent!important'}\n              minW={'240px'}\n              isActive={isOpen && isExactlyActive}\n              className={cs('focusAsBorder')}\n            >\n              <SidemenuItemContent title={title} isInPopover={true} />\n            </Button>\n            {children}\n          </Box>\n        </Popover.Content>\n      </PopoverHovered>\n    )}\n  </Popover>\n)\n\n/** A menu item. */\nexport const SidemenuItemV2 = vui<'button', SidemenuItemV2Props>((props, ref) => {\n  const {\n    children,\n    className,\n    disabled = false,\n    icon,\n    isActive = false,\n    isExpanded = true,\n    itemId,\n    level = 0,\n    onBottom = false,\n    onClick,\n    onCollapse,\n    onExpand,\n    title,\n    ...rest\n  } = omitThemingProps(props)\n\n  // Use consistent itemId generation - prioritize provided itemId, then use utility function\n  const computedItemId = itemId || generateMenuItemId(title, level) || `item-${Math.random().toString(36).substr(2, 9)}`\n\n  const { isDark, isMenuExpanded, styles, size, isSubmenuOpen, toggleSubmenu } = useSidemenuItem(computedItemId)\n\n  // Use the isActive prop directly - parent should handle exact path matching\n  const isExactlyActive = isActive\n\n  useEffect(() => {\n    // Only call onExpand/onCollapse if the main menu is expanded\n    // This prevents child items from expanding the main menu when it's collapsed\n    if (isMenuExpanded) {\n      if (isSubmenuOpen) onExpand?.()\n      if (!isSubmenuOpen) onCollapse?.()\n    }\n  }, [isSubmenuOpen, onExpand, onCollapse, isMenuExpanded])\n\n  // Memoized computed values for better performance\n  const computedStates = useMemo(() => {\n    const hasChildren = !!children\n    const isSubmenuCollapsed = hasChildren && !isSubmenuOpen\n    // Only allow submenu expansion when main menu is expanded\n    const isSubmenuExpanded = hasChildren && isSubmenuOpen && isMenuExpanded\n    const shouldShowExpandButton = hasChildren && isMenuExpanded\n    const buttonSize = level < 1 ? ('lg' as const) : ('md' as const)\n    const iconSize = level < 1 ? ('sm' as const) : ('xs' as const)\n\n    const states = {\n      hasChildren,\n      hasChildrenCollapsed: isSubmenuCollapsed,\n      hasChildrenExpanded: isSubmenuExpanded,\n      shouldShowExpandButton,\n      buttonSize,\n      iconSize,\n      isDisabled: disabled,\n      shouldShowBorder: !hasChildren || isSubmenuOpen,\n    }\n\n    return states\n  }, [children, isSubmenuOpen, isMenuExpanded, disabled, size, level])\n\n  // Memoized theme values to prevent recalculation\n  const themeValues = useMemo(\n    () => ({\n      activeColor: isDark ? 'digiGreen.main' : 'seaBlue.main',\n      buttonVariant: isDark ? 'menuDark' : 'menuLight',\n    }),\n    [isDark],\n  )\n\n  // Optimized stable callback\n  const handleClick = useCallback(\n    (event: MouseEvent) => {\n      if (!computedStates.isDisabled) {\n        const targetTag = event.target as HTMLElement\n        if (\n          (targetTag.classList.contains('vui-tagText') || targetTag.classList.contains('vui-tag')) &&\n          typeof window !== 'undefined' &&\n          (targetTag.parentElement?.dataset.link || targetTag?.dataset.link)\n        ) {\n          const url = atob(targetTag.parentElement?.dataset.link ?? targetTag?.dataset.link ?? '')\n          window.open(url, '_blank', 'noopener,noreferrer')\n        } else {\n          event?.stopPropagation?.()\n          onClick?.()\n        }\n      }\n      toggleSubmenu?.()\n    },\n    [onClick, computedStates.isDisabled],\n  )\n\n  // Memoized button styles - Major performance improvement\n  const buttonStyles = useMemo(\n    () => ({\n      // Get base item styles from theme\n      ...(styles && 'item' in styles && styles.item ? styles.item : {}),\n\n      // Dynamic border color based on active state\n      borderLeftColor: isExactlyActive ? themeValues.activeColor : 'transparent',\n\n      // Animation properties (enhanced from theme)\n      transitionProperty: 'background-color, border-color, color, transform, opacity',\n\n      // Button specific properties\n      size: computedStates.buttonSize,\n      h: computedStates.buttonSize === 'lg' ? 40 : 36,\n      iconSize: computedStates.iconSize,\n      variant: themeValues.buttonVariant,\n\n      // Event handlers\n      onClick: handleClick,\n      disabled: computedStates.isDisabled,\n\n      // Accessibility\n      role: 'button',\n      tabIndex: computedStates.isDisabled ? -1 : 0,\n      'aria-disabled': computedStates.isDisabled,\n      'aria-pressed': isExactlyActive,\n\n      // Merge custom props\n      ...rest,\n    }),\n    [\n      // Dependencies grouped logically - simplified since computedStates contains most values\n      styles,\n      computedStates,\n      isExactlyActive,\n      themeValues,\n      handleClick,\n      rest,\n    ],\n  )\n\n  // Memoized expand/collapse button properties\n  const expandButtonProps = useMemo(() => {\n    const isExpanded = isSubmenuOpen\n    const chevronIcon = isExpanded ? 'falChevronUp' : 'falChevronDown'\n    const ariaLabel = isExpanded ? 'Collapse' : 'Expand'\n\n    return {\n      'aria-label': ariaLabel,\n      className: 'vui-sidemenu-item-expand',\n      variant: themeValues.buttonVariant,\n      icon: chevronIcon,\n      size: 'sm' as const,\n      pl: '4px',\n      pr: '16px',\n      ml: 'auto',\n      h: '100%',\n      border: 'none',\n      bg: 'transparent',\n      hoverBg: 'transparent',\n      activeBg: 'transparent',\n    }\n  }, [isSubmenuOpen, themeValues.buttonVariant])\n\n  // Helper: Render collapsed popover\n  const renderPopover = () => (\n    <SidemenuPopover\n      isDark={isDark}\n      className={className}\n      buttonStyles={buttonStyles}\n      isExactlyActive={isExactlyActive}\n      icon={icon}\n      title={title}\n      isMenuExpanded={isMenuExpanded}\n    >\n      {children ? children : undefined}\n    </SidemenuPopover>\n  )\n\n  // Helper: Render expanded button\n  const renderButton = () => {\n    if (level === 0 && !isMenuExpanded) {\n      return (\n        <Tooltip text={title} placement=\"right\" offset={[0, -200]}>\n          <Button\n            className={cs('vui-sidemenu-item focusAsBorder', isExactlyActive && 'vui-sidemenu-item--active', className)}\n            {...buttonStyles}\n            isActive={isExactlyActive}\n          >\n            <SidemenuItemContent icon={icon} iconSize={buttonStyles.iconSize} />\n            {isMenuExpanded && computedStates.shouldShowExpandButton && <Button {...expandButtonProps} />}{' '}\n          </Button>\n        </Tooltip>\n      )\n    }\n\n    return (\n      <Button\n        className={cs('vui-sidemenu-item focusAsBorder', isExactlyActive && 'vui-sidemenu-item--active', className)}\n        {...buttonStyles}\n        isActive={isExactlyActive}\n        title={!isMenuExpanded ? title : undefined}\n      >\n        <SidemenuItemContent\n          icon={icon}\n          iconSize={buttonStyles.iconSize}\n          title={title}\n          isMenuExpanded={isMenuExpanded}\n          badge={props.badge}\n          badgeLinkUrl={props.badgeLinkUrl}\n        />\n        {isMenuExpanded && computedStates.shouldShowExpandButton && <Button {...expandButtonProps} />}{' '}\n        {/* Expand/Collapse button */}\n      </Button>\n    )\n    // No leftover return, handled above\n  }\n\n  // Helper: Render expanded children\n  const renderChildren = () => (\n    <Box flexDirection=\"column\" justifyContent=\"start\" w=\"100%\">\n      {children}\n    </Box>\n  )\n\n  const shouldShowPopover = Boolean(!isMenuExpanded && level === 0 && !!children)\n  const shouldShowChildren = computedStates.hasChildrenExpanded\n\n  return (\n    <Box flexDirection=\"column\" ref={ref} w=\"100%\" mt={onBottom ? 'auto' : 0} id={computedItemId}>\n      {shouldShowPopover && renderPopover()}\n      {!shouldShowPopover && renderButton()}\n      {shouldShowChildren && renderChildren()}\n    </Box>\n  )\n}) as VuiComponent<'div', SidemenuItemV2Props>\n\nSidemenuItemV2.displayName = 'SidemenuItemV2'\n\nexport default SidemenuItemV2\n"],"mappings":"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"}

package/dist/sidemenuV2/sidemenuTopV2.d.ts

@@ -1,10 +1,10 @@
 import { SidemenuTopPropsV2 } from "./sidemenuV2.types.js";
-import * as react_jsx_runtime15 from "react/jsx-runtime";
+import * as react_jsx_runtime16 from "react/jsx-runtime";
 
 //#region src/sidemenuV2/sidemenuTopV2.d.ts
 /** Top container. */
 declare const SidemenuTopV2: {
-  (props: SidemenuTopPropsV2): react_jsx_runtime15.JSX.Element | null;
+  (props: SidemenuTopPropsV2): react_jsx_runtime16.JSX.Element | null;
   displayName: string;
 };
 //#endregion

package/dist/sidemenuV2/sidemenuTopV2.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidemenuTopV2.d.ts","names":[],"sources":["../../src/sidemenuV2/sidemenuTopV2.tsx"],"sourcesContent":[],"mappings":";;;;;cAOa;UAAwB,qBAAkB,mBAAA,CAAA,GAAA,CAAA,OAAA,CAAA,CAAA;EAA1C,WAAA,CAAA,CAAA,MAgBZ;CAAA"}
+{"version":3,"file":"sidemenuTopV2.d.ts","names":[],"sources":["../../src/sidemenuV2/sidemenuTopV2.tsx"],"sourcesContent":[],"mappings":";;;;;cAOa;UAAwB,qBAAkB,mBAAA,CAAA,GAAA,CAAA,OAAA,CAAA,CAAA;EAA1C,WAAA,CAAA,CAAA,MAgBZ"}

package/dist/sidemenuV2/sidemenuTopV2.js

@@ -1,2 +1,36 @@
-import{cs as e}from"../utils/styles.js";import{omitThemingProps as t,useStyleConfig as n}from"../core/theme.js";import{Box as r}from"../box/box.js";import{collapsedWidth as i}from"./consts.js";import{jsx as a,jsxs as o}from"react/jsx-runtime";const s=s=>{let{className:c,leftSlot:l,rightSlot:u,...d}=t(s),f=n(`Sidemenu`,s);return!l&&!u?null:o(r,{className:e(`vui-sidemenu-top`,c),mb:1,w:`100%`,...f.sidemenuTop,...d,children:[!!l&&a(r,{alignItems:`center`,className:`vui-sidemenu-top-left`,minW:i,children:l}),!!u&&a(r,{className:`vui-sidemenu-top-left`,children:u})]})};s.displayName=`SidemenuTopV2`;var c=s;export{c as default};globalThis.__vuiVersion__=`3.0.0-beta.8`;
+import { cs } from "../utils/styles.js";
+import { omitThemingProps, useStyleConfig } from "../core/theme.js";
+import { Box } from "../box/box.js";
+import { collapsedWidth } from "./consts.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/sidemenuV2/sidemenuTopV2.tsx
+/** Top container. */
+const SidemenuTopV2 = (props) => {
+	const { className, leftSlot, rightSlot,...rest } = omitThemingProps(props);
+	const styles = useStyleConfig("Sidemenu", props);
+	if (!leftSlot && !rightSlot) return null;
+	return /* @__PURE__ */ jsxs(Box, {
+		className: cs("vui-sidemenu-top", className),
+		mb: 1,
+		w: "100%",
+		...styles.sidemenuTop,
+		...rest,
+		children: [!!leftSlot && /* @__PURE__ */ jsx(Box, {
+			alignItems: "center",
+			className: "vui-sidemenu-top-left",
+			minW: collapsedWidth,
+			children: leftSlot
+		}), !!rightSlot && /* @__PURE__ */ jsx(Box, {
+			className: "vui-sidemenu-top-left",
+			children: rightSlot
+		})]
+	});
+};
+SidemenuTopV2.displayName = "SidemenuTopV2";
+var sidemenuTopV2_default = SidemenuTopV2;
+
+//#endregion
+export { sidemenuTopV2_default as default };
+globalThis.__vuiVersion__ = "3.0.0"
 //# sourceMappingURL=sidemenuTopV2.js.map

package/dist/sidemenuV2/sidemenuTopV2.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidemenuTopV2.js","names":[],"sources":["../../src/sidemenuV2/sidemenuTopV2.tsx"],"sourcesContent":["import { Box } from '../box'\nimport { omitThemingProps, useStyleConfig } from '../core'\nimport { cs } from '../utils'\nimport { collapsedWidth } from './consts'\nimport type { SidemenuTopPropsV2 } from './sidemenuV2.types'\n\n/** Top container. */\nexport const SidemenuTopV2 = (props: SidemenuTopPropsV2) => {\n  const { className, leftSlot, rightSlot, ...rest } = omitThemingProps(props)\n  const styles = useStyleConfig('Sidemenu', props)\n\n  if (!leftSlot && !rightSlot) return null\n\n  return (\n    <Box className={cs('vui-sidemenu-top', className)} mb={1} w=\"100%\" {...styles.sidemenuTop} {...rest}>\n      {!!leftSlot && (\n        <Box alignItems=\"center\" className=\"vui-sidemenu-top-left\" minW={collapsedWidth}>\n          {leftSlot}\n        </Box>\n      )}\n      {!!rightSlot && <Box className=\"vui-sidemenu-top-left\">{rightSlot}</Box>}\n    </Box>\n  )\n}\n\nSidemenuTopV2.displayName = 'SidemenuTopV2'\n\nexport default SidemenuTopV2\n"],"mappings":"mPAOA,MAAa,EAAiB,GAA8B,CAC1D,GAAM,CAAE,YAAW,WAAU,YAAW,GAAG,GAAS,EAAiB,EAAM,CACrE,EAAS,EAAe,WAAY,EAAM,CAIhD,MAFI,CAAC,GAAY,CAAC,EAAkB,KAGlC,EAAC,EAAA,CAAI,UAAW,EAAG,mBAAoB,EAAU,CAAE,GAAI,EAAG,EAAE,OAAO,GAAI,EAAO,YAAa,GAAI,YAC5F,CAAC,CAAC,GACD,EAAC,EAAA,CAAI,WAAW,SAAS,UAAU,wBAAwB,KAAM,WAC9D,GACG,CAEP,CAAC,CAAC,GAAa,EAAC,EAAA,CAAI,UAAU,iCAAyB,GAAgB,CAAA,EACpE,EAIV,EAAc,YAAc,gBAE5B,IAAA,EAAe"}
+{"version":3,"file":"sidemenuTopV2.js","names":[],"sources":["../../src/sidemenuV2/sidemenuTopV2.tsx"],"sourcesContent":["import { Box } from '../box'\nimport { omitThemingProps, useStyleConfig } from '../core'\nimport { cs } from '../utils'\nimport { collapsedWidth } from './consts'\nimport type { SidemenuTopPropsV2 } from './sidemenuV2.types'\n\n/** Top container. */\nexport const SidemenuTopV2 = (props: SidemenuTopPropsV2) => {\n  const { className, leftSlot, rightSlot, ...rest } = omitThemingProps(props)\n  const styles = useStyleConfig('Sidemenu', props)\n\n  if (!leftSlot && !rightSlot) return null\n\n  return (\n    <Box className={cs('vui-sidemenu-top', className)} mb={1} w=\"100%\" {...styles.sidemenuTop} {...rest}>\n      {!!leftSlot && (\n        <Box alignItems=\"center\" className=\"vui-sidemenu-top-left\" minW={collapsedWidth}>\n          {leftSlot}\n        </Box>\n      )}\n      {!!rightSlot && <Box className=\"vui-sidemenu-top-left\">{rightSlot}</Box>}\n    </Box>\n  )\n}\n\nSidemenuTopV2.displayName = 'SidemenuTopV2'\n\nexport default SidemenuTopV2\n"],"mappings":";;;;;;;;AAOA,MAAa,iBAAiB,UAA8B;CAC1D,MAAM,EAAE,WAAW,UAAU,UAAW,GAAG,SAAS,iBAAiB,MAAM;CAC3E,MAAM,SAAS,eAAe,YAAY,MAAM;AAEhD,KAAI,CAAC,YAAY,CAAC,UAAW,QAAO;AAEpC,QACE,qBAAC;EAAI,WAAW,GAAG,oBAAoB,UAAU;EAAE,IAAI;EAAG,GAAE;EAAO,GAAI,OAAO;EAAa,GAAI;aAC5F,CAAC,CAAC,YACD,oBAAC;GAAI,YAAW;GAAS,WAAU;GAAwB,MAAM;aAC9D;IACG,EAEP,CAAC,CAAC,aAAa,oBAAC;GAAI,WAAU;aAAyB;IAAgB;GACpE;;AAIV,cAAc,cAAc;AAE5B,4BAAe"}

package/dist/sidemenuV2/sidemenuV2.d.ts

@@ -1,4 +1,5 @@
 import { VuiComponent } from "../core/vui.js";
+import "../core/index.js";
 import { SidemenuStateProvider, useSidemenuContext } from "./context.js";
 import { SidemenuV2Props } from "./sidemenuV2.types.js";
 import { SidemenuItemV2 } from "./sidemenuItemV2.js";

package/dist/sidemenuV2/sidemenuV2.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidemenuV2.d.ts","names":[],"sources":["../../src/sidemenuV2/sidemenuV2.tsx"],"sourcesContent":[],"mappings":";;;;;;;;AAkBa,OAAA,CAAA,KAAA,CAAA,UA6CZ,CAAA,CAHK,YAGL,CAAA,CAAA,GAAA,CAAA,CAAA,CAHyB,eAGzB,CAAA,CAAA,CAAA,CAAA;EAAA,IAAA,CAAA,CAAA,MAAA,CAFc,cAEd;KAHyB,CAAA,CAAA,MAAA,CAEZ,aAFY"}
+{"version":3,"file":"sidemenuV2.d.ts","names":[],"sources":["../../src/sidemenuV2/sidemenuV2.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;cAkBa,YA0CP,oBAAoB;EA1Cb,IAAA,CAAA,CAAA,MAAA,CA2CE,cAEd;EAHyB,GAAA,CAAA,CAAA,MAAA,CAEZ,aAFY;CAApB"}