@veracity/vui 3.2.0 → 4.0.0-alpha.366771.2601090922

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":";;;;;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"}
+{"version":3,"file":"context.js","names":["newState: Record<string, boolean>","createContext"],"sources":["../../src/sidemenuV2/context.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport { useEffect, useMemo, useState, useCallback, useReducer, useRef } 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  // Internal state with initial value from prop\n  const [isExpanded, setIsExpanded] = useState(isExpandedInitial)\n\n  // Track if this is an external change (not from internal toggle)\n  const isInternalChangeRef = useRef(false)\n\n  // Sync internal state when isExpandedInitial changes externally\n  useEffect(() => {\n    if (!isInternalChangeRef.current) {\n      setIsExpanded(isExpandedInitial)\n    }\n    isInternalChangeRef.current = false\n  }, [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      isInternalChangeRef.current = true // Mark as internal change to prevent sync loop\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,sBAAsB,OAAO,MAAM;AAGzC,iBAAgB;AACd,MAAI,CAAC,oBAAoB,QACvB,eAAc,kBAAkB;AAElC,sBAAoB,UAAU;IAC7B,CAAC,kBAAkB,CAAC;CAGvB,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,sBAAoB,UAAU;AAC9B,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

@@ -1,3 +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";
+import { SidemenuV2 } from "./sidemenuV2.js";

package/dist/sidemenuV2/index.js

@@ -0,0 +1,4 @@
+import { SidemenuStateProvider, useSidemenuContext } from "./context.js";
+import { SidemenuV2 } from "./sidemenuV2.js";
+
+globalThis.__vuiVersion__ = "4.0.0-beta.1"

package/dist/sidemenuV2/sidemenuItemV2.d.ts

@@ -8,4 +8,5 @@ import "styled-components";
 declare const SidemenuItemV2: VuiComponent<"div", SidemenuItemV2Props>;
 //#endregion
 export { SidemenuItemV2 };
+
 //# sourceMappingURL=sidemenuItemV2.d.ts.map

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"sidemenuItemV2.d.ts","names":[],"sources":["../../src/sidemenuV2/sidemenuItemV2.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAmFa,cAAA,cAkOa,EAApB,YAAoB,CAAA,KAAA,EAAA,mBAAR,CAAA"}

package/dist/sidemenuV2/sidemenuItemV2.js

@@ -1,13 +1,20 @@
 import { generateMenuItemId } from "../utils/string.js";
 import colors_default from "../theme/foundations/colors.js";
 import { cs } from "../utils/styles.js";
+import "../utils/index.js";
 import { omitThemingProps, th } from "../core/theme.js";
 import { styled } from "../core/styled.js";
 import { vui } from "../core/vui.js";
+import "../theme/index.js";
 import box_default from "../box/box.js";
+import "../box/index.js";
 import button_default from "../button/button.js";
+import "../button/index.js";
+import "../core/index.js";
 import Popover from "../popover/popover.js";
+import "../popover/index.js";
 import tooltip_default from "../tooltip/tooltip.js";
+import "../tooltip/index.js";
 import { collapsedWidth, expandedWidth } from "./consts.js";
 import SidemenuItemContent_default from "./SidemenuItemContent.js";
 import useSidemenuItem_default from "./useSidemenuItem.js";
@@ -19,7 +26,7 @@ const PopoverHovered = styled.div`
   &:hover .vui-sidemenu-item-popover .vui-button.vui-button {
     background: ${(p) => th.color(p.hoverColor)};
   }
-  &:hover div:last-child .tippy-content .vui-sidemenu-item-content > .vui-box > .vui-button.vui-button {
+  &:hover div:last-child .vui-sidemenu-item-content > .vui-box > .vui-button.vui-button {
     background: ${(p) => th.color(p.hoverColor)};
   }
 `;
@@ -68,7 +75,7 @@ const SidemenuPopover = ({ isDark, className, buttonStyles, isExactlyActive, ico
 });
 /** 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 { 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;
@@ -237,5 +244,5 @@ var sidemenuItemV2_default = SidemenuItemV2;
 
 //#endregion
 export { sidemenuItemV2_default as default };
-globalThis.__vuiVersion__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# 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 .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,12 +1,13 @@
 import { SidemenuTopPropsV2 } from "./sidemenuV2.types.js";
-import * as react_jsx_runtime16 from "react/jsx-runtime";
+import * as react_jsx_runtime14 from "react/jsx-runtime";
 
 //#region src/sidemenuV2/sidemenuTopV2.d.ts
 /** Top container. */
 declare const SidemenuTopV2: {
-  (props: SidemenuTopPropsV2): react_jsx_runtime16.JSX.Element | null;
+  (props: SidemenuTopPropsV2): react_jsx_runtime14.JSX.Element | null;
   displayName: string;
 };
 //#endregion
 export { SidemenuTopV2 };
+
 //# sourceMappingURL=sidemenuTopV2.d.ts.map

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"}
+{"version":3,"file":"sidemenuTopV2.d.ts","names":[],"sources":["../../src/sidemenuV2/sidemenuTopV2.tsx"],"sourcesContent":[],"mappings":";;;;;cAOa;UAAwB,qBAAkB,mBAAA,CAAA,GAAA,CAAA,OAAA;EAA1C,WAAA,EAAA,MAgBZ"}

package/dist/sidemenuV2/sidemenuTopV2.js

@@ -1,13 +1,16 @@
 import { cs } from "../utils/styles.js";
+import "../utils/index.js";
 import { omitThemingProps, useStyleConfig } from "../core/theme.js";
 import { Box } from "../box/box.js";
+import "../box/index.js";
+import "../core/index.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 { className, leftSlot, rightSlot, ...rest } = omitThemingProps(props);
 	const styles = useStyleConfig("Sidemenu", props);
 	if (!leftSlot && !rightSlot) return null;
 	return /* @__PURE__ */ jsxs(Box, {
@@ -32,5 +35,5 @@ var sidemenuTopV2_default = SidemenuTopV2;
 
 //#endregion
 export { sidemenuTopV2_default as default };
-globalThis.__vuiVersion__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# 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":";;;;;;;;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"}
+{"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,WAAW,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

@@ -13,4 +13,5 @@ declare const SidemenuV2: VuiComponent<"div", SidemenuV2Props> & {
 };
 //#endregion
 export { SidemenuV2 };
+
 //# sourceMappingURL=sidemenuV2.d.ts.map

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"sidemenuV2.d.ts","names":[],"sources":["../../src/sidemenuV2/sidemenuV2.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;cAkBa,YA0CP,oBAAoB;EA1Cb,IAAA,EAAA,OA2CE,cAEd;EAHyB,GAAA,EAAA,OAEZ,aAFY;CAApB"}

package/dist/sidemenuV2/sidemenuV2.js

@@ -1,11 +1,16 @@
 import { generateMenuItemId } from "../utils/string.js";
 import { cs } from "../utils/styles.js";
 import { isActivePath } from "../utils/window.js";
+import "../utils/index.js";
 import { useStyleConfig } from "../core/theme.js";
 import { vui } from "../core/vui.js";
 import box_default from "../box/box.js";
+import "../box/index.js";
 import icon_default from "../icon/icon.js";
+import "../icon/index.js";
 import button_default from "../button/button.js";
+import "../button/index.js";
+import "../core/index.js";
 import { collapsedWidth, expandedWidth } from "./consts.js";
 import { SidemenuStateProvider, useSidemenuContext } from "./context.js";
 import sidemenuItemV2_default from "./sidemenuItemV2.js";
@@ -16,7 +21,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/sidemenuV2/sidemenuV2.tsx
 /** A collapsible side menu for navigation. */
 const SidemenuV2 = vui((props, ref) => {
-	const { isExpandedInitial = true, onExpandedChange, size, variant = "light", children, className, items, shouldExpand, isSticky, width, top, onNavigate,...restProps } = props;
+	const { isExpandedInitial = true, onExpandedChange, size, variant = "light", children, className, items, shouldExpand, isSticky, width, top, onNavigate, ...restProps } = props;
 	return /* @__PURE__ */ jsx(SidemenuStateProvider, {
 		isExpandedInitial,
 		onExpandedChange,
@@ -40,7 +45,7 @@ const SidemenuV2 = vui((props, ref) => {
 	});
 });
 const SidemenuInner = vui((props, ref) => {
-	const { children, className, items, shouldExpand, isSticky = false, size, variant = "light", width = expandedWidth, top, onNavigate,...rest } = props;
+	const { children, className, items, shouldExpand, isSticky = false, size, variant = "light", width = expandedWidth, top, onNavigate, ...rest } = props;
 	const { isMenuExpanded = false, setIsExpanded } = useSidemenuContext() || {};
 	const styles = useStyleConfig("SidemenuV2", props);
 	const conditions = useMemo(() => ({
@@ -232,5 +237,5 @@ SidemenuV2.displayName = "SidemenuV2";
 
 //#endregion
 export { SidemenuV2 };
-globalThis.__vuiVersion__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=sidemenuV2.js.map

package/dist/sidemenuV2/sidemenuV2.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidemenuV2.js","names":["isSticky","SidemenuItemV2","Box","Button","Icon","SidemenuTopV2"],"sources":["../../src/sidemenuV2/sidemenuV2.tsx"],"sourcesContent":["import { useMemo, useCallback } from 'react'\n\nimport Box from '../box'\nimport Button from '../button'\nimport { useStyleConfig, vui } from '../core'\nimport type { VuiComponent } from '../core'\nimport Icon from '../icon'\nimport { cs, isActivePath, generateMenuItemId } from '../utils'\nimport { collapsedWidth, expandedWidth } from './consts'\nimport { SidemenuStateProvider, useSidemenuContext } from './context'\nimport SidemenuItemV2 from './sidemenuItemV2'\nimport SidemenuTopV2 from './sidemenuTopV2'\nimport type { SidemenuItemV2Props, SidemenuV2Props } from './sidemenuV2.types'\n\n// Re-export context provider and hook\nexport { SidemenuStateProvider, useSidemenuContext }\n\n/** A collapsible side menu for navigation. */\nexport const SidemenuV2 = vui<'div', SidemenuV2Props>((props, ref) => {\n  const {\n    isExpandedInitial = true, // Uncontrolled: only affects initial state\n    onExpandedChange, // Extract this to prevent it from being passed to DOM\n    size,\n    variant = 'light',\n    children,\n    className,\n    items,\n    shouldExpand,\n    isSticky,\n    width,\n    top,\n    onNavigate,\n    ...restProps // Only DOM-safe props remain\n  } = props\n\n  return (\n    <SidemenuStateProvider\n      isExpandedInitial={isExpandedInitial}\n      onExpandedChange={onExpandedChange}\n      variant={variant}\n      size={size}\n      isDark={variant === 'dark'}\n    >\n      <SidemenuInner\n        ref={ref}\n        // Only pass DOM-safe props, not onExpandedChange\n        children={children}\n        className={className}\n        items={items}\n        shouldExpand={shouldExpand}\n        isSticky={isSticky}\n        size={size}\n        variant={variant}\n        width={width}\n        top={top}\n        onNavigate={onNavigate}\n        {...restProps} // Remaining DOM-safe props\n      />\n    </SidemenuStateProvider>\n  )\n}) as VuiComponent<'div', SidemenuV2Props> & {\n  Item: typeof SidemenuItemV2\n  Top: typeof SidemenuTopV2\n}\n\n// Inner component that uses context\nconst SidemenuInner = vui<'div', SidemenuV2Props>((props, ref) => {\n  const {\n    children,\n    className,\n    items,\n    shouldExpand, // Callback: fine-grained control over expansion\n    isSticky = false,\n    size,\n    variant = 'light',\n    width = expandedWidth,\n    top,\n    onNavigate,\n    ...rest\n  } = props\n\n  // Get state from context\n  const context = useSidemenuContext()\n  const { isMenuExpanded = false, setIsExpanded } = context || {}\n\n  // Get styles configuration early\n  const styles = useStyleConfig('SidemenuV2', props)\n\n  // Memoized boolean conditions\n  const conditions = useMemo(\n    () => ({\n      isDark: variant === 'dark',\n      hasItems: !!items,\n      shouldShowItems: !!items && items.length > 0,\n      isMenuSticky: isSticky,\n      isMenuExpanded: isMenuExpanded,\n    }),\n    [variant, items, isSticky, isMenuExpanded],\n  )\n\n  // Memoized computed values for styling and behavior\n  const computedValues = useMemo(() => {\n    // Get toggle button config from theme\n    const toggleButtonTheme = styles.toggleButton || {}\n    const currentSize = size || 'md' // Ensure we have a valid size\n    const sizeStyles = (styles as any).sizes?.[currentSize] || {}\n    const toggleButtonSizeTheme = sizeStyles.toggleButton || {}\n\n    // Merge base theme with size-specific overrides\n    const toggleConfig = {\n      baseHeight: toggleButtonSizeTheme.baseHeight || toggleButtonTheme.baseHeight || 52,\n      basePadding: toggleButtonSizeTheme.basePadding || toggleButtonTheme.basePadding || 2,\n      expandedPaddingMultiplier: toggleButtonTheme.expandedPaddingMultiplier || 5,\n      expandedWidth: toggleButtonTheme.expandedWidth || '52px',\n      collapsedWidth: toggleButtonTheme.collapsedWidth || '100%',\n    }\n\n    // Helper function for consistent top position formatting\n    const getMenuTopPosition = (isSticky: boolean, topValue?: any): string => {\n      if (!isSticky) return 'auto'\n\n      if (typeof topValue === 'string') return topValue\n      if (typeof topValue === 'number') return `${topValue}px`\n\n      return '0px' // fallback for undefined/null/complex types\n    }\n\n    return {\n      menuWidth: conditions.isMenuExpanded ? width : collapsedWidth,\n      toggleArrowDirection: conditions.isMenuExpanded ? 'Left' : 'Right',\n      toggleButtonJustification: conditions.isMenuExpanded ? 'flex-end' : 'center',\n      toggleButtonVariant: styles.toggleButton?.variant || (conditions.isDark ? 'tertiaryLight' : 'tertiaryDark'),\n      toggleAriaLabel: conditions.isMenuExpanded ? 'Collapse menu' : 'Expand menu',\n      toggleButtonPadding: toggleConfig.basePadding,\n      toggleButtonVerticalPadding: conditions.isMenuExpanded\n        ? toggleConfig.basePadding * toggleConfig.expandedPaddingMultiplier\n        : toggleConfig.basePadding,\n      toggleButtonHeight: toggleConfig.baseHeight,\n      toggleButtonWidth: conditions.isMenuExpanded ? toggleConfig.expandedWidth : toggleConfig.collapsedWidth,\n      menuPosition: conditions.isMenuSticky ? 'sticky' : 'static',\n      menuTopPosition: getMenuTopPosition(conditions.isMenuSticky, top),\n    }\n  }, [conditions, width, top, styles, size])\n\n  // Memoized icon name\n  const toggleIcon = useMemo(\n    () => `falArrow${computedValues.toggleArrowDirection}` as const,\n    [computedValues.toggleArrowDirection],\n  )\n\n  // Stable callback for toggle (simplified)\n  const handleToggle = useCallback(() => {\n    const newExpandedState = !conditions.isMenuExpanded\n\n    // Check if expansion should be allowed via callback\n    if (shouldExpand && !shouldExpand('toggle', conditions.isMenuExpanded)) {\n      return // Block the toggle\n    }\n\n    // Update state via context\n    setIsExpanded?.(newExpandedState)\n  }, [conditions.isMenuExpanded, shouldExpand, setIsExpanded])\n\n  // Stable callback for item click - with expansion control\n  const handleItemClick = useCallback(\n    (item: SidemenuItemV2Props) => {\n      // Early return for clarity\n      if (shouldExpand && item?.path) {\n        const shouldExpandOnNav = shouldExpand('navigation', conditions.isMenuExpanded)\n        if (typeof shouldExpandOnNav === 'boolean' && shouldExpandOnNav !== conditions.isMenuExpanded) {\n          setIsExpanded?.(shouldExpandOnNav)\n        }\n      }\n      // Call item click handler\n      item?.onClick?.()\n      // Navigate if path exists\n      if (item?.path) onNavigate?.(item.path)\n    },\n    [onNavigate, shouldExpand, conditions.isMenuExpanded, setIsExpanded],\n  )\n\n  // Create stable item click handlers\n  const itemClickHandlers = useMemo(() => {\n    return (items ?? []).reduce<Record<string, () => void>>((handlers, item, index) => {\n      const itemId = item.itemId || item.path || generateMenuItemId(item.title, item.level || 0) || `item-${index}`\n      handlers[itemId] = () => handleItemClick(item)\n      return handlers\n    }, {})\n  }, [items, handleItemClick])\n\n  // Memoized items rendering\n  const renderedItems = useMemo(() => {\n    if (!conditions.shouldShowItems) return children\n\n    return items?.map?.((item: SidemenuItemV2Props, index: number) => {\n      // Use consistent itemId generation that matches the component's logic\n      const itemId = item.itemId || item.path || generateMenuItemId(item.title, item.level || 0) || `item-${index}`\n\n      // Use explicit isActive prop if provided, otherwise calculate from path\n      const calculatedIsActive = item.isActive !== undefined ? item.isActive : isActivePath(item?.path || '')\n\n      return (\n        <SidemenuItemV2\n          isActive={calculatedIsActive}\n          onBottom={item.onBottom}\n          key={itemId}\n          itemId={itemId}\n          level={item.level || 0}\n          {...item}\n          onClick={itemClickHandlers[itemId]}\n        />\n      )\n    })\n  }, [conditions.shouldShowItems, conditions.isMenuExpanded, items, children, itemClickHandlers])\n\n  // Memoized CSS class names\n  const cssClasses = useMemo(\n    () =>\n      cs(\n        'vui-sidemenu',\n        `vui-sidemenu--${variant}`,\n        conditions.isMenuExpanded && 'vui-sidemenu--expanded',\n        !conditions.isMenuExpanded && 'vui-sidemenu--collapsed',\n        conditions.isDark && 'vui-sidemenu--dark',\n        conditions.isMenuSticky && 'vui-sidemenu--sticky',\n        className,\n      ),\n    [variant, conditions, className],\n  )\n\n  // Memoized container props\n  const containerProps = useMemo(\n    () => ({\n      className: cssClasses,\n      flexDirection: 'column' as const,\n      overflowX: 'hidden' as const,\n      position: computedValues.menuPosition,\n      ref,\n      top: computedValues.menuTopPosition,\n      transitionDuration: 'normal' as const,\n      transitionProperty: 'width' as const,\n      w: computedValues.menuWidth,\n\n      ...styles.container,\n      ...rest,\n    }),\n    [\n      cssClasses,\n      computedValues.menuPosition,\n      computedValues.menuTopPosition,\n      computedValues.menuWidth,\n      ref,\n      styles.container,\n      rest,\n    ],\n  )\n\n  // Memoized toggle button props with complete dependencies\n  const toggleButtonProps = useMemo(\n    () => ({\n      'aria-expanded': conditions.isMenuExpanded,\n      'aria-label': computedValues.toggleAriaLabel,\n      border: 0,\n      borderRadius: 0,\n      justifyContent: computedValues.toggleButtonJustification,\n      minHeight: `${computedValues.toggleButtonHeight}px`,\n      minWidth: 0,\n      onClick: handleToggle,\n      px: computedValues.toggleButtonPadding,\n      py: `${computedValues.toggleButtonVerticalPadding}px`,\n      size: 'lg' as const,\n      variant: computedValues.toggleButtonVariant,\n      w: computedValues.toggleButtonWidth,\n      flexShrink: 0,\n      transition: styles.toggleButton?.transition || 'padding 0.2s ease-in-out, width 0.2s ease-in-out',\n    }),\n    [\n      computedValues.toggleAriaLabel,\n      computedValues.toggleButtonJustification,\n      computedValues.toggleButtonVariant,\n      computedValues.toggleButtonPadding,\n      computedValues.toggleButtonVerticalPadding,\n      computedValues.toggleButtonHeight,\n      computedValues.toggleButtonWidth,\n      conditions.isMenuExpanded,\n      handleToggle,\n      styles.toggleButton,\n    ],\n  )\n\n  return (\n    <Box elevation=\"1\" {...containerProps}>\n      <Box\n        className=\"vui-sidemenu-content\"\n        flexDirection=\"column\"\n        flexGrow={1}\n        justifyContent=\"flex-start\"\n        minW={expandedWidth}\n        overflowX=\"hidden\"\n        overflowY=\"auto\"\n        w=\"100%\"\n        role=\"navigation\"\n        aria-label=\"Main navigation\"\n      >\n        {renderedItems}\n      </Box>\n\n      <Box\n        className=\"vui-sidemenu-bottom\"\n        justifyContent={conditions.isMenuExpanded ? 'flex-end' : 'flex-start'}\n        borderTop=\"1px solid sandstone.main\"\n      >\n        <Button {...toggleButtonProps} key={'sidemenu-toggle-button'}>\n          <Icon name={toggleIcon} size=\"sm\" aria-hidden=\"true\" />\n        </Button>\n      </Box>\n    </Box>\n  )\n}) as VuiComponent<'div', SidemenuV2Props> & {\n  Top: typeof SidemenuTopV2\n  Item: typeof SidemenuItemV2\n}\n\nSidemenuV2.Item = SidemenuItemV2\nSidemenuV2.Top = SidemenuTopV2\nSidemenuV2.displayName = 'SidemenuV2'\n\nexport default SidemenuV2\n"],"mappings":"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"}
+{"version":3,"file":"sidemenuV2.js","names":["isSticky","SidemenuItemV2","Box","Button","Icon","SidemenuTopV2"],"sources":["../../src/sidemenuV2/sidemenuV2.tsx"],"sourcesContent":["import { useMemo, useCallback } from 'react'\n\nimport Box from '../box'\nimport Button from '../button'\nimport { useStyleConfig, vui } from '../core'\nimport type { VuiComponent } from '../core'\nimport Icon from '../icon'\nimport { cs, isActivePath, generateMenuItemId } from '../utils'\nimport { collapsedWidth, expandedWidth } from './consts'\nimport { SidemenuStateProvider, useSidemenuContext } from './context'\nimport SidemenuItemV2 from './sidemenuItemV2'\nimport SidemenuTopV2 from './sidemenuTopV2'\nimport type { SidemenuItemV2Props, SidemenuV2Props } from './sidemenuV2.types'\n\n// Re-export context provider and hook\nexport { SidemenuStateProvider, useSidemenuContext }\n\n/** A collapsible side menu for navigation. */\nexport const SidemenuV2 = vui<'div', SidemenuV2Props>((props, ref) => {\n  const {\n    isExpandedInitial = true, // Uncontrolled: only affects initial state\n    onExpandedChange, // Extract this to prevent it from being passed to DOM\n    size,\n    variant = 'light',\n    children,\n    className,\n    items,\n    shouldExpand,\n    isSticky,\n    width,\n    top,\n    onNavigate,\n    ...restProps // Only DOM-safe props remain\n  } = props\n\n  return (\n    <SidemenuStateProvider\n      isExpandedInitial={isExpandedInitial}\n      onExpandedChange={onExpandedChange}\n      variant={variant}\n      size={size}\n      isDark={variant === 'dark'}\n    >\n      <SidemenuInner\n        ref={ref}\n        // Only pass DOM-safe props, not onExpandedChange\n        children={children}\n        className={className}\n        items={items}\n        shouldExpand={shouldExpand}\n        isSticky={isSticky}\n        size={size}\n        variant={variant}\n        width={width}\n        top={top}\n        onNavigate={onNavigate}\n        {...restProps} // Remaining DOM-safe props\n      />\n    </SidemenuStateProvider>\n  )\n}) as VuiComponent<'div', SidemenuV2Props> & {\n  Item: typeof SidemenuItemV2\n  Top: typeof SidemenuTopV2\n}\n\n// Inner component that uses context\nconst SidemenuInner = vui<'div', SidemenuV2Props>((props, ref) => {\n  const {\n    children,\n    className,\n    items,\n    shouldExpand, // Callback: fine-grained control over expansion\n    isSticky = false,\n    size,\n    variant = 'light',\n    width = expandedWidth,\n    top,\n    onNavigate,\n    ...rest\n  } = props\n\n  // Get state from context\n  const context = useSidemenuContext()\n  const { isMenuExpanded = false, setIsExpanded } = context || {}\n\n  // Get styles configuration early\n  const styles = useStyleConfig('SidemenuV2', props)\n\n  // Memoized boolean conditions\n  const conditions = useMemo(\n    () => ({\n      isDark: variant === 'dark',\n      hasItems: !!items,\n      shouldShowItems: !!items && items.length > 0,\n      isMenuSticky: isSticky,\n      isMenuExpanded: isMenuExpanded,\n    }),\n    [variant, items, isSticky, isMenuExpanded],\n  )\n\n  // Memoized computed values for styling and behavior\n  const computedValues = useMemo(() => {\n    // Get toggle button config from theme\n    const toggleButtonTheme = styles.toggleButton || {}\n    const currentSize = size || 'md' // Ensure we have a valid size\n    const sizeStyles = (styles as any).sizes?.[currentSize] || {}\n    const toggleButtonSizeTheme = sizeStyles.toggleButton || {}\n\n    // Merge base theme with size-specific overrides\n    const toggleConfig = {\n      baseHeight: toggleButtonSizeTheme.baseHeight || toggleButtonTheme.baseHeight || 52,\n      basePadding: toggleButtonSizeTheme.basePadding || toggleButtonTheme.basePadding || 2,\n      expandedPaddingMultiplier: toggleButtonTheme.expandedPaddingMultiplier || 5,\n      expandedWidth: toggleButtonTheme.expandedWidth || '52px',\n      collapsedWidth: toggleButtonTheme.collapsedWidth || '100%',\n    }\n\n    // Helper function for consistent top position formatting\n    const getMenuTopPosition = (isSticky: boolean, topValue?: any): string => {\n      if (!isSticky) return 'auto'\n\n      if (typeof topValue === 'string') return topValue\n      if (typeof topValue === 'number') return `${topValue}px`\n\n      return '0px' // fallback for undefined/null/complex types\n    }\n\n    return {\n      menuWidth: conditions.isMenuExpanded ? width : collapsedWidth,\n      toggleArrowDirection: conditions.isMenuExpanded ? 'Left' : 'Right',\n      toggleButtonJustification: conditions.isMenuExpanded ? 'flex-end' : 'center',\n      toggleButtonVariant: styles.toggleButton?.variant || (conditions.isDark ? 'tertiaryLight' : 'tertiaryDark'),\n      toggleAriaLabel: conditions.isMenuExpanded ? 'Collapse menu' : 'Expand menu',\n      toggleButtonPadding: toggleConfig.basePadding,\n      toggleButtonVerticalPadding: conditions.isMenuExpanded\n        ? toggleConfig.basePadding * toggleConfig.expandedPaddingMultiplier\n        : toggleConfig.basePadding,\n      toggleButtonHeight: toggleConfig.baseHeight,\n      toggleButtonWidth: conditions.isMenuExpanded ? toggleConfig.expandedWidth : toggleConfig.collapsedWidth,\n      menuPosition: conditions.isMenuSticky ? 'sticky' : 'static',\n      menuTopPosition: getMenuTopPosition(conditions.isMenuSticky, top),\n    }\n  }, [conditions, width, top, styles, size])\n\n  // Memoized icon name\n  const toggleIcon = useMemo(\n    () => `falArrow${computedValues.toggleArrowDirection}` as const,\n    [computedValues.toggleArrowDirection],\n  )\n\n  // Stable callback for toggle (simplified)\n  const handleToggle = useCallback(() => {\n    const newExpandedState = !conditions.isMenuExpanded\n\n    // Check if expansion should be allowed via callback\n    if (shouldExpand && !shouldExpand('toggle', conditions.isMenuExpanded)) {\n      return // Block the toggle\n    }\n\n    // Update state via context\n    setIsExpanded?.(newExpandedState)\n  }, [conditions.isMenuExpanded, shouldExpand, setIsExpanded])\n\n  // Stable callback for item click - with expansion control\n  const handleItemClick = useCallback(\n    (item: SidemenuItemV2Props) => {\n      // Early return for clarity\n      if (shouldExpand && item?.path) {\n        const shouldExpandOnNav = shouldExpand('navigation', conditions.isMenuExpanded)\n        if (typeof shouldExpandOnNav === 'boolean' && shouldExpandOnNav !== conditions.isMenuExpanded) {\n          setIsExpanded?.(shouldExpandOnNav)\n        }\n      }\n      // Call item click handler\n      item?.onClick?.()\n      // Navigate if path exists\n      if (item?.path) onNavigate?.(item.path)\n    },\n    [onNavigate, shouldExpand, conditions.isMenuExpanded, setIsExpanded],\n  )\n\n  // Create stable item click handlers\n  const itemClickHandlers = useMemo(() => {\n    return (items ?? []).reduce<Record<string, () => void>>((handlers, item, index) => {\n      const itemId = item.itemId || item.path || generateMenuItemId(item.title, item.level || 0) || `item-${index}`\n      handlers[itemId] = () => handleItemClick(item)\n      return handlers\n    }, {})\n  }, [items, handleItemClick])\n\n  // Memoized items rendering\n  const renderedItems = useMemo(() => {\n    if (!conditions.shouldShowItems) return children\n\n    return items?.map?.((item: SidemenuItemV2Props, index: number) => {\n      // Use consistent itemId generation that matches the component's logic\n      const itemId = item.itemId || item.path || generateMenuItemId(item.title, item.level || 0) || `item-${index}`\n\n      // Use explicit isActive prop if provided, otherwise calculate from path\n      const calculatedIsActive = item.isActive !== undefined ? item.isActive : isActivePath(item?.path || '')\n\n      return (\n        <SidemenuItemV2\n          isActive={calculatedIsActive}\n          onBottom={item.onBottom}\n          key={itemId}\n          itemId={itemId}\n          level={item.level || 0}\n          {...item}\n          onClick={itemClickHandlers[itemId]}\n        />\n      )\n    })\n  }, [conditions.shouldShowItems, conditions.isMenuExpanded, items, children, itemClickHandlers])\n\n  // Memoized CSS class names\n  const cssClasses = useMemo(\n    () =>\n      cs(\n        'vui-sidemenu',\n        `vui-sidemenu--${variant}`,\n        conditions.isMenuExpanded && 'vui-sidemenu--expanded',\n        !conditions.isMenuExpanded && 'vui-sidemenu--collapsed',\n        conditions.isDark && 'vui-sidemenu--dark',\n        conditions.isMenuSticky && 'vui-sidemenu--sticky',\n        className,\n      ),\n    [variant, conditions, className],\n  )\n\n  // Memoized container props\n  const containerProps = useMemo(\n    () => ({\n      className: cssClasses,\n      flexDirection: 'column' as const,\n      overflowX: 'hidden' as const,\n      position: computedValues.menuPosition,\n      ref,\n      top: computedValues.menuTopPosition,\n      transitionDuration: 'normal' as const,\n      transitionProperty: 'width' as const,\n      w: computedValues.menuWidth,\n\n      ...styles.container,\n      ...rest,\n    }),\n    [\n      cssClasses,\n      computedValues.menuPosition,\n      computedValues.menuTopPosition,\n      computedValues.menuWidth,\n      ref,\n      styles.container,\n      rest,\n    ],\n  )\n\n  // Memoized toggle button props with complete dependencies\n  const toggleButtonProps = useMemo(\n    () => ({\n      'aria-expanded': conditions.isMenuExpanded,\n      'aria-label': computedValues.toggleAriaLabel,\n      border: 0,\n      borderRadius: 0,\n      justifyContent: computedValues.toggleButtonJustification,\n      minHeight: `${computedValues.toggleButtonHeight}px`,\n      minWidth: 0,\n      onClick: handleToggle,\n      px: computedValues.toggleButtonPadding,\n      py: `${computedValues.toggleButtonVerticalPadding}px`,\n      size: 'lg' as const,\n      variant: computedValues.toggleButtonVariant,\n      w: computedValues.toggleButtonWidth,\n      flexShrink: 0,\n      transition: styles.toggleButton?.transition || 'padding 0.2s ease-in-out, width 0.2s ease-in-out',\n    }),\n    [\n      computedValues.toggleAriaLabel,\n      computedValues.toggleButtonJustification,\n      computedValues.toggleButtonVariant,\n      computedValues.toggleButtonPadding,\n      computedValues.toggleButtonVerticalPadding,\n      computedValues.toggleButtonHeight,\n      computedValues.toggleButtonWidth,\n      conditions.isMenuExpanded,\n      handleToggle,\n      styles.toggleButton,\n    ],\n  )\n\n  return (\n    <Box elevation=\"1\" {...containerProps}>\n      <Box\n        className=\"vui-sidemenu-content\"\n        flexDirection=\"column\"\n        flexGrow={1}\n        justifyContent=\"flex-start\"\n        minW={expandedWidth}\n        overflowX=\"hidden\"\n        overflowY=\"auto\"\n        w=\"100%\"\n        role=\"navigation\"\n        aria-label=\"Main navigation\"\n      >\n        {renderedItems}\n      </Box>\n\n      <Box\n        className=\"vui-sidemenu-bottom\"\n        justifyContent={conditions.isMenuExpanded ? 'flex-end' : 'flex-start'}\n        borderTop=\"1px solid sandstone.main\"\n      >\n        <Button {...toggleButtonProps} key={'sidemenu-toggle-button'}>\n          <Icon name={toggleIcon} size=\"sm\" aria-hidden=\"true\" />\n        </Button>\n      </Box>\n    </Box>\n  )\n}) as VuiComponent<'div', SidemenuV2Props> & {\n  Top: typeof SidemenuTopV2\n  Item: typeof SidemenuItemV2\n}\n\nSidemenuV2.Item = SidemenuItemV2\nSidemenuV2.Top = SidemenuTopV2\nSidemenuV2.displayName = 'SidemenuV2'\n\nexport default SidemenuV2\n"],"mappings":"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"}

package/dist/sidemenuV2/sidemenuV2.types.d.ts

@@ -1,11 +1,11 @@
 import { ThemingProps } from "../theme/types.js";
 import { SystemProps } from "../system/system.js";
 import "../system/index.js";
-import { BoxProps } from "../box/box.types.js";
-import "../box/index.js";
 import { IconProp } from "../icon/icon.types.js";
 import "../icon/index.js";
 import { BadgeProps } from "../badge/badge.types.js";
+import { BoxProps } from "../box/box.types.js";
+import "../box/index.js";
 import { ComponentProps, ReactNode } from "react";
 
 //#region src/sidemenuV2/sidemenuV2.types.d.ts
@@ -323,4 +323,5 @@ type SidemenuItemComponentV2Props = ComponentProps<'button'> & SidemenuItemV2Pro
 type SidemenuTopComponentV2Props = ComponentProps<'div'> & SidemenuTopV2Props;
 //#endregion
 export { SidemenuCollapseModeV2, SidemenuComponentV2Props, SidemenuContextV2Value, SidemenuExpandEventV2, SidemenuFlatItemV2, SidemenuGroupV2Props, SidemenuItemBadgeV2Props, SidemenuItemClickEventV2, SidemenuItemComponentV2Props, SidemenuItemV2Props, SidemenuItemWithChildrenV2, SidemenuOrientationV2, SidemenuSizeV2, SidemenuTopComponentV2Props, SidemenuTopPropsV2, SidemenuTopV2Props, SidemenuV2Props, SidemenuVariantV2, UseSidemenuItemV2Return, UseSidemenuV2Return };
+
 //# sourceMappingURL=sidemenuV2.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"sidemenuV2.types.d.ts","names":[],"sources":["../../src/sidemenuV2/sidemenuV2.types.ts"],"sourcesContent":[],"mappings":"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"}
+{"version":3,"file":"sidemenuV2.types.d.ts","names":[],"sources":["../../src/sidemenuV2/sidemenuV2.types.ts"],"sourcesContent":[],"mappings":"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"}

package/dist/sidemenuV2/theme.js

@@ -107,5 +107,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=theme.js.map

package/dist/sidemenuV2/useSidemenuItem.js

@@ -1,4 +1,5 @@
 import { useStyleConfig } from "../core/theme.js";
+import "../core/index.js";
 import { useSidemenuContext } from "./context.js";
 import { useCallback, useMemo } from "react";
 
@@ -35,5 +36,5 @@ var useSidemenuItem_default = useSidemenuItem;
 
 //#endregion
 export { useSidemenuItem_default as default };
-globalThis.__vuiVersion__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=useSidemenuItem.js.map

package/dist/sidemenuV2/useSidemenuItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSidemenuItem.js","names":[],"sources":["../../src/sidemenuV2/useSidemenuItem.ts"],"sourcesContent":["import { useMemo, useCallback } from 'react'\n\nimport { useStyleConfig } from '../core'\nimport { useSidemenuContext } from './context'\n\nconst useSidemenuItem = (itemId?: string) => {\n  const sidemenuContext = useSidemenuContext()\n  const styles = useStyleConfig('SidemenuV2', sidemenuContext)\n\n  const isSubmenuOpen = useMemo(() => {\n    return itemId ? (sidemenuContext?.submenuStates?.[itemId] ?? false) : false\n  }, [itemId, sidemenuContext?.submenuStates])\n\n  const handleToggleSubmenu = useCallback(() => {\n    if (itemId && sidemenuContext?.toggleSubmenu) {\n      sidemenuContext.toggleSubmenu(itemId)\n    }\n  }, [itemId, sidemenuContext?.toggleSubmenu])\n\n  // Fallback values if context is missing\n  const isDark = sidemenuContext?.variant === 'dark'\n  const size = sidemenuContext?.size ?? 'lg'\n  const isMenuExpanded = sidemenuContext?.isMenuExpanded ?? true\n\n  // Memoize the entire return object to prevent unnecessary re-renders\n  return useMemo(\n    () => ({\n      isDark,\n      size,\n      styles,\n      isMenuExpanded,\n      isSubmenuOpen,\n      toggleSubmenu: handleToggleSubmenu,\n    }),\n    [isDark, size, styles, isMenuExpanded, isSubmenuOpen, handleToggleSubmenu],\n  )\n}\n\nexport default useSidemenuItem\n"],"mappings":";;;;;AAKA,MAAM,mBAAmB,WAAoB;CAC3C,MAAM,kBAAkB,oBAAoB;CAC5C,MAAM,SAAS,eAAe,cAAc,gBAAgB;CAE5D,MAAM,gBAAgB,cAAc;AAClC,SAAO,SAAU,iBAAiB,gBAAgB,WAAW,QAAS;IACrE,CAAC,QAAQ,iBAAiB,cAAc,CAAC;CAE5C,MAAM,sBAAsB,kBAAkB;AAC5C,MAAI,UAAU,iBAAiB,cAC7B,iBAAgB,cAAc,OAAO;IAEtC,CAAC,QAAQ,iBAAiB,cAAc,CAAC;CAG5C,MAAM,SAAS,iBAAiB,YAAY;CAC5C,MAAM,OAAO,iBAAiB,QAAQ;CACtC,MAAM,iBAAiB,iBAAiB,kBAAkB;AAG1D,QAAO,eACE;EACL;EACA;EACA;EACA;EACA;EACA,eAAe;EAChB,GACD;EAAC;EAAQ;EAAM;EAAQ;EAAgB;EAAe;EAAoB,CAC3E;;AAGH,8BAAe"}
+{"version":3,"file":"useSidemenuItem.js","names":[],"sources":["../../src/sidemenuV2/useSidemenuItem.ts"],"sourcesContent":["import { useMemo, useCallback } from 'react'\n\nimport { useStyleConfig } from '../core'\nimport { useSidemenuContext } from './context'\n\nconst useSidemenuItem = (itemId?: string) => {\n  const sidemenuContext = useSidemenuContext()\n  const styles = useStyleConfig('SidemenuV2', sidemenuContext)\n\n  const isSubmenuOpen = useMemo(() => {\n    return itemId ? (sidemenuContext?.submenuStates?.[itemId] ?? false) : false\n  }, [itemId, sidemenuContext?.submenuStates])\n\n  const handleToggleSubmenu = useCallback(() => {\n    if (itemId && sidemenuContext?.toggleSubmenu) {\n      sidemenuContext.toggleSubmenu(itemId)\n    }\n  }, [itemId, sidemenuContext?.toggleSubmenu])\n\n  // Fallback values if context is missing\n  const isDark = sidemenuContext?.variant === 'dark'\n  const size = sidemenuContext?.size ?? 'lg'\n  const isMenuExpanded = sidemenuContext?.isMenuExpanded ?? true\n\n  // Memoize the entire return object to prevent unnecessary re-renders\n  return useMemo(\n    () => ({\n      isDark,\n      size,\n      styles,\n      isMenuExpanded,\n      isSubmenuOpen,\n      toggleSubmenu: handleToggleSubmenu,\n    }),\n    [isDark, size, styles, isMenuExpanded, isSubmenuOpen, handleToggleSubmenu],\n  )\n}\n\nexport default useSidemenuItem\n"],"mappings":";;;;;;AAKA,MAAM,mBAAmB,WAAoB;CAC3C,MAAM,kBAAkB,oBAAoB;CAC5C,MAAM,SAAS,eAAe,cAAc,gBAAgB;CAE5D,MAAM,gBAAgB,cAAc;AAClC,SAAO,SAAU,iBAAiB,gBAAgB,WAAW,QAAS;IACrE,CAAC,QAAQ,iBAAiB,cAAc,CAAC;CAE5C,MAAM,sBAAsB,kBAAkB;AAC5C,MAAI,UAAU,iBAAiB,cAC7B,iBAAgB,cAAc,OAAO;IAEtC,CAAC,QAAQ,iBAAiB,cAAc,CAAC;CAG5C,MAAM,SAAS,iBAAiB,YAAY;CAC5C,MAAM,OAAO,iBAAiB,QAAQ;CACtC,MAAM,iBAAiB,iBAAiB,kBAAkB;AAG1D,QAAO,eACE;EACL;EACA;EACA;EACA;EACA;EACA,eAAe;EAChB,GACD;EAAC;EAAQ;EAAM;EAAQ;EAAgB;EAAe;EAAoB,CAC3E;;AAGH,8BAAe"}

package/dist/skeleton/index.d.ts

@@ -1,2 +1,2 @@
 import { SkeletonProps } from "./skeleton.types.js";
-import { Skeleton, SkeletonBase } from "./skeleton.js";
+import { Skeleton, SkeletonBase } from "./skeleton.js";

package/dist/skeleton/index.js

@@ -0,0 +1,3 @@
+import { Skeleton, SkeletonBase } from "./skeleton.js";
+
+globalThis.__vuiVersion__ = "4.0.0-beta.1"

package/dist/skeleton/skeleton.d.ts

@@ -3,14 +3,15 @@ import { VuiComponent } from "../core/vui.js";
 import "../core/index.js";
 import { SkeletonProps } from "./skeleton.types.js";
 import "../index.js";
-import * as styled_components412 from "styled-components";
+import * as styled_components375 from "styled-components";
 
 //#region src/skeleton/skeleton.d.ts
-declare const SkeletonBase: styled_components412.StyledComponent<"div", styled_components412.DefaultTheme, SystemProps, never>;
+declare const SkeletonBase: styled_components375.StyledComponent<"div", styled_components375.DefaultTheme, SystemProps, never>;
 /**
  * Displays one or more animated skeleton elements to signify loading content.
  */
 declare const Skeleton: VuiComponent<"div", SkeletonProps>;
 //#endregion
 export { Skeleton, SkeletonBase };
+
 //# sourceMappingURL=skeleton.d.ts.map

package/dist/skeleton/skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.d.ts","names":[],"sources":["../../src/skeleton/skeleton.tsx"],"sourcesContent":[],"mappings":";;;;;;;;cAKa,cAAY,oBAAA,CAAA,uBAExB,oBAAA,CAFwB,YAAA,CAAA,CAAA,WAAA,CAAA;;;;cAMZ,UAwBP,oBAAoB"}
+{"version":3,"file":"skeleton.d.ts","names":[],"sources":["../../src/skeleton/skeleton.tsx"],"sourcesContent":[],"mappings":";;;;;;;;cAKa,cAAY,oBAAA,CAAA,uBAExB,oBAAA,CAFwB,YAAA,EAAA,WAAA;;;;cAMZ,UAwBP,oBAAoB"}

package/dist/skeleton/skeleton.js

@@ -1,8 +1,10 @@
 import { filterUndefined } from "../utils/object.js";
 import { cs } from "../utils/styles.js";
+import "../utils/index.js";
 import { omitThemingProps, useStyleConfig } from "../core/theme.js";
 import { styled } from "../core/styled.js";
 import { vui } from "../core/vui.js";
+import "../core/index.js";
 import { Fragment, jsx } from "react/jsx-runtime";
 
 //#region src/skeleton/skeleton.tsx
@@ -13,7 +15,7 @@ const SkeletonBase = styled.divBox`
 * Displays one or more animated skeleton elements to signify loading content.
 */
 const Skeleton = vui((props, ref) => {
-	const { className, repeat = 1,...rest } = omitThemingProps(props);
+	const { className, repeat = 1, ...rest } = omitThemingProps(props);
 	const styles = useStyleConfig("Skeleton", props);
 	const arr = Array(repeat).fill(0);
 	const aliasedProps = filterUndefined({ w: props.variant === "circle" ? styles.h : void 0 });
@@ -29,5 +31,5 @@ Skeleton.displayName = "Skeleton";
 
 //#endregion
 export { Skeleton, SkeletonBase };
-globalThis.__vuiVersion__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=skeleton.js.map

package/dist/skeleton/skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.js","names":[],"sources":["../../src/skeleton/skeleton.tsx"],"sourcesContent":["import type { VuiComponent } from '../core'\nimport { omitThemingProps, styled, useStyleConfig, vui } from '../core'\nimport { cs, filterUndefined } from '../utils'\nimport type { SkeletonProps } from './skeleton.types'\n\nexport const SkeletonBase = styled.divBox`\n  animation: vui-pulse 1.5s ease-in-out 0.5s infinite;\n`\n/**\n * Displays one or more animated skeleton elements to signify loading content.\n */\nexport const Skeleton = vui<'div', SkeletonProps>((props, ref) => {\n  const { className, repeat = 1, ...rest } = omitThemingProps(props)\n  const styles = useStyleConfig('Skeleton', props)\n\n  const arr = Array(repeat).fill(0)\n\n  const aliasedProps = filterUndefined({\n    w: props.variant === 'circle' ? styles.h : undefined,\n  })\n\n  return (\n    <>\n      {arr.map((_, i) => (\n        <SkeletonBase\n          className={cs('vui-skeleton', className)}\n          key={i}\n          ref={ref}\n          {...styles}\n          {...aliasedProps}\n          {...rest}\n        />\n      ))}\n    </>\n  )\n}) as VuiComponent<'div', SkeletonProps>\n\nSkeleton.displayName = 'Skeleton'\n\nexport default Skeleton\n"],"mappings":";;;;;;;;AAKA,MAAa,eAAe,OAAO,MAAM;;;;;;AAMzC,MAAa,WAAW,KAA2B,OAAO,QAAQ;CAChE,MAAM,EAAE,WAAW,SAAS,EAAG,GAAG,SAAS,iBAAiB,MAAM;CAClE,MAAM,SAAS,eAAe,YAAY,MAAM;CAEhD,MAAM,MAAM,MAAM,OAAO,CAAC,KAAK,EAAE;CAEjC,MAAM,eAAe,gBAAgB,EACnC,GAAG,MAAM,YAAY,WAAW,OAAO,IAAI,QAC5C,CAAC;AAEF,QACE,0CACG,IAAI,KAAK,GAAG,MACX,oBAAC;EACC,WAAW,GAAG,gBAAgB,UAAU;EAEnC;EACL,GAAI;EACJ,GAAI;EACJ,GAAI;IAJC,EAKL,CACF,GACD;EAEL;AAEF,SAAS,cAAc"}
+{"version":3,"file":"skeleton.js","names":[],"sources":["../../src/skeleton/skeleton.tsx"],"sourcesContent":["import type { VuiComponent } from '../core'\nimport { omitThemingProps, styled, useStyleConfig, vui } from '../core'\nimport { cs, filterUndefined } from '../utils'\nimport type { SkeletonProps } from './skeleton.types'\n\nexport const SkeletonBase = styled.divBox`\n  animation: vui-pulse 1.5s ease-in-out 0.5s infinite;\n`\n/**\n * Displays one or more animated skeleton elements to signify loading content.\n */\nexport const Skeleton = vui<'div', SkeletonProps>((props, ref) => {\n  const { className, repeat = 1, ...rest } = omitThemingProps(props)\n  const styles = useStyleConfig('Skeleton', props)\n\n  const arr = Array(repeat).fill(0)\n\n  const aliasedProps = filterUndefined({\n    w: props.variant === 'circle' ? styles.h : undefined,\n  })\n\n  return (\n    <>\n      {arr.map((_, i) => (\n        <SkeletonBase\n          className={cs('vui-skeleton', className)}\n          key={i}\n          ref={ref}\n          {...styles}\n          {...aliasedProps}\n          {...rest}\n        />\n      ))}\n    </>\n  )\n}) as VuiComponent<'div', SkeletonProps>\n\nSkeleton.displayName = 'Skeleton'\n\nexport default Skeleton\n"],"mappings":";;;;;;;;;;AAKA,MAAa,eAAe,OAAO,MAAM;;;;;;AAMzC,MAAa,WAAW,KAA2B,OAAO,QAAQ;CAChE,MAAM,EAAE,WAAW,SAAS,GAAG,GAAG,SAAS,iBAAiB,MAAM;CAClE,MAAM,SAAS,eAAe,YAAY,MAAM;CAEhD,MAAM,MAAM,MAAM,OAAO,CAAC,KAAK,EAAE;CAEjC,MAAM,eAAe,gBAAgB,EACnC,GAAG,MAAM,YAAY,WAAW,OAAO,IAAI,QAC5C,CAAC;AAEF,QACE,0CACG,IAAI,KAAK,GAAG,MACX,oBAAC;EACC,WAAW,GAAG,gBAAgB,UAAU;EAEnC;EACL,GAAI;EACJ,GAAI;EACJ,GAAI;IAJC,EAKL,CACF,GACD;EAEL;AAEF,SAAS,cAAc"}

package/dist/skeleton/skeleton.types.d.ts

@@ -13,4 +13,5 @@ type SkeletonProps = SystemProps & ThemingProps<'Skeleton'> & {
 };
 //#endregion
 export { SkeletonProps };
+
 //# sourceMappingURL=skeleton.types.d.ts.map

package/dist/skeleton/skeleton.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.types.d.ts","names":[],"sources":["../../src/skeleton/skeleton.types.ts"],"sourcesContent":[],"mappings":";;;;;KAGY,aAAA,CAAA,CAAA,CAAgB,cAC1B;;;EADU,CAAA,CAAA,CAAA,CAAA,SAAA,CAAA,KAAA,CAAA,MAAA,CAAA,GAAA,CAAA,IAAA,CAAA,SAAA,CAAA,CAAA,CAAA,UAAA,CAAA,CAAA"}
+{"version":3,"file":"skeleton.types.d.ts","names":[],"sources":["../../src/skeleton/skeleton.types.ts"],"sourcesContent":[],"mappings":";;;;;KAGY,aAAA,GAAgB,cAC1B;;;EADU"}

package/dist/skeleton/theme.js

@@ -26,5 +26,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=theme.js.map

package/dist/spinner/consts.js

@@ -13,5 +13,5 @@ const spinnerSpeedMapping = {
 
 //#endregion
 export { spinnerPositionMapping, spinnerSpeedMapping };
-globalThis.__vuiVersion__ = "3.2.0"
+globalThis.__vuiVersion__ = "4.0.0-beta.1"
 //# sourceMappingURL=consts.js.map

package/dist/spinner/index.d.ts

@@ -1,2 +1,2 @@
 import { SpinnerProps } from "./spinner.types.js";
-import { Spinner, SpinnerCircle } from "./spinner.js";
+import { Spinner, SpinnerCircle } from "./spinner.js";

package/dist/spinner/index.js

@@ -0,0 +1,3 @@
+import { Spinner, SpinnerCircle } from "./spinner.js";
+
+globalThis.__vuiVersion__ = "4.0.0-beta.1"

package/dist/spinner/spinner.d.ts

@@ -2,10 +2,10 @@ import { SystemProps } from "../system/system.js";
 import { VuiComponent } from "../core/vui.js";
 import { SpinnerProps } from "./spinner.types.js";
 import "../index.js";
-import * as styled_components422 from "styled-components";
+import * as styled_components386 from "styled-components";
 
 //#region src/spinner/spinner.d.ts
-declare const SpinnerCircle: styled_components422.StyledComponent<"div", styled_components422.DefaultTheme, SystemProps, never>;
+declare const SpinnerCircle: styled_components386.StyledComponent<"div", styled_components386.DefaultTheme, SystemProps, never>;
 /**
  * Displays a spinning circular element with optional text to signify loading content.
  *
@@ -14,4 +14,5 @@ declare const SpinnerCircle: styled_components422.StyledComponent<"div", styled_
 declare const Spinner: VuiComponent<"div", SpinnerProps>;
 //#endregion
 export { Spinner, SpinnerCircle };
+
 //# sourceMappingURL=spinner.d.ts.map