@veracity/vui 5.1.1 → 5.2.0-alpha.395258.2606090726

package/dist/rating/rating.js.map

@@ -1 +1 @@
-{"version":3,"file":"rating.js","names":["theme"],"sources":["../../src/rating/rating.tsx"],"sourcesContent":["import type { KeyboardEvent } from 'react'\nimport { useRef, useState } from 'react'\n\nimport Box from '../box'\nimport { vui } from '../core'\nimport Icon from '../icon'\nimport type { ColorGetter } from '../system'\nimport type { Dict } from '../utils'\nimport { mergeRefs } from '../utils'\nimport type { RatingProps } from './rating.types'\nimport theme from './theme'\n\nexport const Rating = vui<'div', RatingProps>((props, ref) => {\n  const {\n    value: propValue = 0,\n    isDisabled = false,\n    max: propMax,\n    onChange,\n    showAll: showAllProp = true,\n    variant = 'yellow',\n    size,\n    ...rest\n  } = props\n  const [hoverValue, setHoverValue] = useState<number | null>(null)\n  const [internalValue, setInternalValue] = useState(propValue || 0)\n  const [focusedStar, setFocusedStar] = useState<number | null>(null)\n  const containerRef = useRef<HTMLDivElement>(null)\n  const isInteractive = !isDisabled && onChange !== undefined\n  const showAll = showAllProp || isInteractive\n\n  const { variants } = (theme as Dict) ?? {}\n  const color = isDisabled ? 'sandstone.79' : variants[variant].color\n\n  if (propValue < 0) {\n    console.error(`Rating: value (${propValue}) cannot be negative`)\n  }\n\n  const value = Math.max(0, propValue)\n  const max = propMax ? propMax : Math.max(value, 5)\n\n  if (value > max) {\n    console.error(`Rating: value (${value}) cannot be greater than max (${max})`)\n  }\n\n  const handleValueChange = (newValue: number) => {\n    if (!isInteractive) return\n    const clampedValue = Math.max(0, Math.min(newValue, max))\n    setInternalValue(clampedValue)\n    onChange?.(clampedValue)\n  }\n\n  const handleStarClick = (clickedValue: number) => {\n    if (!isInteractive) return\n    const newValue = clickedValue === internalValue ? 0 : clickedValue\n    handleValueChange(newValue)\n  }\n\n  const handleStarHover = (hoveredValue: number) => {\n    if (!isInteractive) return\n    setHoverValue(hoveredValue)\n  }\n\n  const handleMouseLeave = () => {\n    if (!isInteractive) return\n    setHoverValue(null)\n  }\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (!isInteractive) return\n    const currentValue = propValue !== undefined ? propValue : internalValue\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowUp':\n        event.preventDefault()\n        handleValueChange(Math.min(currentValue + 1, max))\n        break\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        event.preventDefault()\n        handleValueChange(Math.max(currentValue - 1, 0))\n        break\n      case 'Home':\n        event.preventDefault()\n        handleValueChange(0)\n        break\n      case 'End':\n        event.preventDefault()\n        handleValueChange(max)\n        break\n    }\n  }\n\n  const handleFocus = () => {\n    if (!isInteractive) return\n    if (focusedStar === null) {\n      setFocusedStar(propValue !== undefined ? propValue : internalValue)\n    }\n  }\n\n  const handleBlur = () => {\n    if (!isInteractive) return\n    setFocusedStar(null)\n  }\n\n  const displayValue = hoverValue !== null ? hoverValue : value !== undefined ? value : internalValue\n\n  return (\n    <Box\n      aria-label=\"Rating\"\n      aria-valuemax={max}\n      aria-valuemin={0}\n      aria-valuenow={displayValue}\n      className=\"vui-rating\"\n      focusRing={3}\n      focusRingColor=\"focusColor\"\n      onBlur={handleBlur}\n      onFocus={handleFocus}\n      onKeyDown={handleKeyDown}\n      onMouseLeave={handleMouseLeave}\n      outline=\"none\"\n      ref={mergeRefs(ref, containerRef)}\n      role=\"slider\"\n      tabIndex={isInteractive ? 0 : -1}\n      {...rest}\n    >\n      {Array.from({ length: max }).map((_, index) => {\n        const starValue = index + 1\n        const fullStar = index < displayValue\n        return (\n          <Box\n            className=\"vui-rating-star\"\n            cursor={isInteractive ? 'pointer' : undefined}\n            gap=\"1px\"\n            key={index}\n            onClick={() => handleStarClick(starValue)}\n            onFocus={() => setFocusedStar(starValue)}\n            onMouseEnter={() => handleStarHover(starValue)}\n            tabIndex={-1}\n          >\n            {fullStar ? (\n              <FullStar color={color} size={size} />\n            ) : showAll ? (\n              <EmptyStar color=\"sandstone.79\" size={size} />\n            ) : null}\n          </Box>\n        )\n      })}\n    </Box>\n  )\n})\n\nconst FullStar = (props: { color: ColorGetter; size: RatingProps['size'] }) => (\n  <Icon color={props.color} name=\"uiStar\" size={props.size} />\n)\nconst EmptyStar = (props: { color: ColorGetter; size: RatingProps['size'] }) => (\n  <Icon color={props.color} name=\"uiStar\" size={props.size} />\n)\n\nRating.displayName = 'Rating'\nexport default Rating\n"],"mappings":"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"}
+{"version":3,"file":"rating.js","names":["theme"],"sources":["../../src/rating/rating.tsx"],"sourcesContent":["import type { KeyboardEvent } from 'react'\nimport { useRef, useState } from 'react'\n\nimport Box from '../box'\nimport { vui } from '../core'\nimport Icon from '../icon'\nimport type { ColorGetter } from '../system'\nimport type { Dict } from '../utils'\nimport { mergeRefs } from '../utils'\nimport type { RatingProps } from './rating.types'\nimport theme from './theme'\n\nexport const Rating = vui<'div', RatingProps>((props, ref) => {\n  const {\n    value: propValue = 0,\n    isDisabled = false,\n    max: propMax,\n    onChange,\n    showAll: showAllProp = true,\n    variant = 'yellow',\n    size,\n    ...rest\n  } = props\n  const [hoverValue, setHoverValue] = useState<number | null>(null)\n  const [internalValue, setInternalValue] = useState(propValue || 0)\n  const [focusedStar, setFocusedStar] = useState<number | null>(null)\n  const containerRef = useRef<HTMLDivElement>(null)\n  const isInteractive = !isDisabled && onChange !== undefined\n  const showAll = showAllProp || isInteractive\n\n  const { variants } = (theme as Dict) ?? {}\n  const color = isDisabled ? 'sandstone.79' : variants[variant].color\n\n  if (propValue < 0) {\n    console.error(`Rating: value (${propValue}) cannot be negative`)\n  }\n\n  const value = Math.max(0, propValue)\n  const max = propMax ? propMax : Math.max(value, 5)\n\n  if (value > max) {\n    console.error(`Rating: value (${value}) cannot be greater than max (${max})`)\n  }\n\n  const handleValueChange = (newValue: number) => {\n    if (!isInteractive) return\n    const clampedValue = Math.max(0, Math.min(newValue, max))\n    setInternalValue(clampedValue)\n    onChange?.(clampedValue)\n  }\n\n  const handleStarClick = (clickedValue: number) => {\n    if (!isInteractive) return\n    const newValue = clickedValue === internalValue ? 0 : clickedValue\n    handleValueChange(newValue)\n  }\n\n  const handleStarHover = (hoveredValue: number) => {\n    if (!isInteractive) return\n    setHoverValue(hoveredValue)\n  }\n\n  const handleMouseLeave = () => {\n    if (!isInteractive) return\n    setHoverValue(null)\n  }\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (!isInteractive) return\n    const currentValue = propValue !== undefined ? propValue : internalValue\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowUp':\n        event.preventDefault()\n        handleValueChange(Math.min(currentValue + 1, max))\n        break\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        event.preventDefault()\n        handleValueChange(Math.max(currentValue - 1, 0))\n        break\n      case 'Home':\n        event.preventDefault()\n        handleValueChange(0)\n        break\n      case 'End':\n        event.preventDefault()\n        handleValueChange(max)\n        break\n    }\n  }\n\n  const handleFocus = () => {\n    if (!isInteractive) return\n    if (focusedStar === null) {\n      setFocusedStar(propValue !== undefined ? propValue : internalValue)\n    }\n  }\n\n  const handleBlur = () => {\n    if (!isInteractive) return\n    setFocusedStar(null)\n  }\n\n  const displayValue = hoverValue !== null ? hoverValue : value !== undefined ? value : internalValue\n\n  return (\n    <Box\n      aria-label=\"Rating\"\n      aria-valuemax={max}\n      aria-valuemin={0}\n      aria-valuenow={displayValue}\n      className=\"vui-rating\"\n      focusRing={3}\n      focusRingColor=\"focusColor\"\n      onBlur={handleBlur}\n      onFocus={handleFocus}\n      onKeyDown={handleKeyDown}\n      onMouseLeave={handleMouseLeave}\n      outline=\"none\"\n      ref={mergeRefs(ref, containerRef)}\n      role=\"slider\"\n      tabIndex={isInteractive ? 0 : -1}\n      {...rest}\n    >\n      {Array.from({ length: max }).map((_, index) => {\n        const starValue = index + 1\n        const fullStar = index < displayValue\n        return (\n          <Box\n            className=\"vui-rating-star\"\n            cursor={isInteractive ? 'pointer' : undefined}\n            gap=\"1px\"\n            key={index}\n            onClick={() => handleStarClick(starValue)}\n            onFocus={() => setFocusedStar(starValue)}\n            onMouseEnter={() => handleStarHover(starValue)}\n            tabIndex={-1}\n          >\n            {fullStar ? (\n              <FullStar color={color} size={size} />\n            ) : showAll ? (\n              <EmptyStar color=\"sandstone.79\" size={size} />\n            ) : null}\n          </Box>\n        )\n      })}\n    </Box>\n  )\n})\n\nconst FullStar = (props: { color: ColorGetter; size: RatingProps['size'] }) => (\n  <Icon color={props.color} name=\"uiStar\" size={props.size} />\n)\nconst EmptyStar = (props: { color: ColorGetter; size: RatingProps['size'] }) => (\n  <Icon color={props.color} name=\"uiStar\" size={props.size} />\n)\n\nRating.displayName = 'Rating'\nexport default Rating\n"],"mappings":"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"}

package/dist/rating/theme.js

@@ -24,5 +24,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=theme.js.map

package/dist/select/context.js

@@ -5,5 +5,5 @@ const [SelectProvider, useSelectContext] = createContext({ isOptional: true });
 
 //#endregion
 export { SelectProvider, useSelectContext };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=context.js.map

package/dist/select/select.d.ts

@@ -2,8 +2,8 @@ import { VuiComponent } from "../core/vui.js";
 import { ListProps } from "../list/list.types.js";
 import { ListDivider } from "../list/listDivider.js";
 import { ListHeading } from "../list/listHeading.js";
-import { ButtonProps } from "../button/button.types.js";
 import { BoxProps } from "../box/box.types.js";
+import { ButtonProps } from "../button/button.types.js";
 import { SelectOptionProps, SelectProps } from "./select.types.js";
 //#region src/select/select.d.ts
 /**
@@ -11,7 +11,7 @@ import { SelectOptionProps, SelectProps } from "./select.types.js";
  * When no children are provided, content can be displayed based on 'options' data prop.
  * Supports single select and multi select, as well as controlled and uncontrolled modes.
  */
-declare function Select(props: SelectProps): import("react/jsx-runtime").JSX.Element;
+declare function Select(props: SelectProps): import("react").JSX.Element;
 declare namespace Select {
   var Button: VuiComponent<"button", ButtonProps>;
   var Content: VuiComponent<"div", BoxProps>;

package/dist/select/select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","names":[],"sources":["../../src/select/select.tsx"],"mappings":";;;;;;;;;;;;;iBAuBgB,MAAA,CAAO,KAAA,EAAO,WAAW,+BAAA,GAAA,CAAA,OAAA;AAAA,kBAAzB,MAAA;EAAA,mCAAM,WAAA;EAAA"}
+{"version":3,"file":"select.d.ts","names":[],"sources":["../../src/select/select.tsx"],"mappings":";;;;;;;;;;;;;iBAuBgB,MAAA,CAAO,KAAA,EAAO,WAAW,mBAAA,GAAA,CAAA,OAAA;AAAA,kBAAzB,MAAA;EAAA,mCAAM,WAAA;EAAA"}

package/dist/select/select.js

@@ -117,5 +117,5 @@ Select.displayName = "Select";
 
 //#endregion
 export { Select as default };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=select.js.map

package/dist/select/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","names":[],"sources":["../../src/select/select.tsx"],"sourcesContent":["import { useEffect, useId, useState } from 'react'\n\nimport { Box } from '../box'\nimport { Input } from '../input'\nimport { helpTextSize } from '../input/consts'\nimport HelpText from '../input/helpText'\nimport { Popover } from '../popover'\nimport { __DEV__ } from '../utils'\nimport type { ChangeEvent } from '../utils'\nimport { SelectProvider } from './context'\nimport type { SelectOptionData, SelectProps } from './select.types'\nimport SelectButton from './selectButton'\nimport SelectContent from './selectContent'\nimport SelectGroup from './selectGroup'\nimport SelectLabel from './selectLabel'\nimport SelectOption from './selectOption'\nimport useSelect from './useSelect'\n\n/**\n * Wraps trigger and content elements, providing them with context.\n * When no children are provided, content can be displayed based on 'options' data prop.\n * Supports single select and multi select, as well as controlled and uncontrolled modes.\n */\nexport function Select(props: SelectProps) {\n  const {\n    children,\n    defaultValue,\n    disabled,\n    errorText,\n    closeOnScroll,\n    helpText,\n    id: idProp,\n    isInvalid,\n    isMultiple,\n    label,\n    labelMarkOptional,\n    labelTooltipText,\n    maxHeight,\n    name,\n    onChange,\n    onClose,\n    onOpen,\n    options,\n    matchWidth = true,\n    placeholder = 'Please select',\n    selectedText,\n    readOnly,\n    selectButton,\n    selectButtonProps,\n    showOptionsFilter,\n    size = 'lg',\n    value,\n    variant,\n    ...rest\n  } = props\n\n  const selectProps = useSelect({ defaultValue, isMultiple, onChange, value, options, selectedText, children })\n\n  if (__DEV__ && isMultiple && !Array.isArray(selectProps.value))\n    console.error('<Select /> is used with isMultiple but its value is not an array: ', value)\n\n  const generatedId = useId()\n  const [query, setQuery] = useState<string>('')\n  const [filteredOptions, setFilteredOptions] = useState(options)\n\n  const id = idProp || generatedId\n\n  const context = {\n    disabled,\n    isInvalid,\n    isMultiple,\n    name,\n    options,\n    placeholder,\n    selectedText,\n    readOnly,\n    size,\n    variant,\n    ...selectProps,\n  }\n  const onQueryChange = (e: ChangeEvent) => setQuery(e.target.value?.toLowerCase())\n\n  const filterOptions = (i: SelectOptionData) =>\n    !showOptionsFilter || !query?.length ? true : i?.text?.toLowerCase()?.includes(query)\n\n  useEffect(() => {\n    setFilteredOptions(options?.filter(filterOptions))\n  }, [query, options])\n\n  return (\n    <SelectProvider value={context}>\n      <Box className=\"vui-selectContainer\" column {...rest}>\n        {!!label && (\n          <SelectLabel\n            disabled={disabled}\n            id={id}\n            label={label}\n            labelMarkOptional={labelMarkOptional}\n            labelTooltipText={labelTooltipText}\n          />\n        )}\n        <Popover matchWidth={matchWidth} onClose={onClose} onOpen={onOpen}>\n          <>\n            {selectButton ?? <SelectButton {...selectButtonProps} />}\n            <SelectContent overflow=\"hidden\">\n              {showOptionsFilter && (\n                <Box>\n                  <Input\n                    startIcon=\"uiSearch\"\n                    id={id}\n                    m={1}\n                    mt={0}\n                    onChange={onQueryChange}\n                    placeholder=\"Filter…\"\n                    size={size}\n                    value={query}\n                    w=\"100%\"\n                  />\n                </Box>\n              )}\n              <SelectGroup maxH={maxHeight} overflowY=\"auto\" tabIndex={1000}>\n                {children ??\n                  filteredOptions?.map?.(option => (\n                    <SelectOption closeOnScroll={closeOnScroll} key={option.value} title={option.text} {...option} />\n                  ))}\n              </SelectGroup>\n            </SelectContent>\n          </>\n        </Popover>\n        {!!helpText && <HelpText size={helpTextSize[size]}>{helpText}</HelpText>}\n        {!!errorText && (\n          <HelpText isError size={helpTextSize[size]}>\n            {errorText}\n          </HelpText>\n        )}\n      </Box>\n    </SelectProvider>\n  )\n}\n\nSelect.Button = SelectButton\nSelect.Content = SelectContent\nSelect.Group = SelectGroup\nSelect.Option = SelectOption\nSelect.displayName = 'Select'\n\nexport default Select\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAuBA,SAAgB,OAAO,OAAoB;CACzC,MAAM,EACJ,UACA,cACA,UACA,WACA,eACA,UACA,IAAI,QACJ,WACA,YACA,OACA,mBACA,kBACA,WACA,MACA,UACA,SACA,QACA,SACA,aAAa,MACb,cAAc,iBACd,cACA,UACA,cACA,mBACA,mBACA,OAAO,MACP,OACA,SACA,GAAG,SACD;CAEJ,MAAM,cAAc,UAAU;EAAE;EAAc;EAAY;EAAU;EAAO;EAAS;EAAc;CAAS,CAAC;CAE5G,YAAe,cAAc,CAAC,MAAM,QAAQ,YAAY,KAAK,GAC3D,QAAQ,MAAM,sEAAsE,KAAK;CAE3F,MAAM,cAAc,MAAM;CAC1B,MAAM,CAAC,OAAO,YAAY,SAAiB,EAAE;CAC7C,MAAM,CAAC,iBAAiB,sBAAsB,SAAS,OAAO;CAE9D,MAAM,KAAK,UAAU;CAErB,MAAM,UAAU;EACd;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,GAAG;CACL;CACA,MAAM,iBAAiB,MAAmB,SAAS,EAAE,OAAO,OAAO,YAAY,CAAC;CAEhF,MAAM,iBAAiB,MACrB,CAAC,qBAAqB,CAAC,OAAO,SAAS,OAAO,GAAG,MAAM,YAAY,GAAG,SAAS,KAAK;CAEtF,gBAAgB;EACd,mBAAmB,SAAS,OAAO,aAAa,CAAC;CACnD,GAAG,CAAC,OAAO,OAAO,CAAC;CAEnB,OACE,oBAAC,gBAAD;EAAgB,OAAO;YACrB,qBAAC,KAAD;GAAK,WAAU;GAAsB;GAAO,GAAI;aAAhD;IACG,CAAC,CAAC,SACD,oBAAC,aAAD;KACY;KACN;KACG;KACY;KACD;IACnB;IAEH,oBAAC,SAAD;KAAqB;KAAqB;KAAiB;eACzD,8CACG,gBAAgB,oBAAC,cAAD,EAAc,GAAI,kBAAoB,IACvD,qBAAC,eAAD;MAAe,UAAS;gBAAxB,CACG,qBACC,oBAAC,KAAD,YACE,oBAAC,OAAD;OACE,WAAU;OACN;OACJ,GAAG;OACH,IAAI;OACJ,UAAU;OACV,aAAY;OACN;OACN,OAAO;OACP,GAAE;MACH,GACE,IAEP,oBAAC,aAAD;OAAa,MAAM;OAAW,WAAU;OAAO,UAAU;iBACtD,YACC,iBAAiB,OAAM,WACrB,oBAAC,cAAD;QAA6B;QAAkC,OAAO,OAAO;QAAM,GAAI;OAAS,GAA/C,OAAO,KAAwC,CACjG;MACQ,EACA;OACf;IACK;IACR,CAAC,CAAC,YAAY,oBAAC,UAAD;KAAU,MAAM,aAAa;eAAQ;IAAmB;IACtE,CAAC,CAAC,aACD,oBAAC,UAAD;KAAU;KAAQ,MAAM,aAAa;eAClC;IACO;GAET;;CACS;AAEpB;AAEA,OAAO,SAAS;AAChB,OAAO,UAAU;AACjB,OAAO,QAAQ;AACf,OAAO,SAAS;AAChB,OAAO,cAAc"}
+{"version":3,"file":"select.js","names":[],"sources":["../../src/select/select.tsx"],"sourcesContent":["import { useEffect, useId, useState } from 'react'\n\nimport { Box } from '../box'\nimport { Input } from '../input'\nimport { helpTextSize } from '../input/consts'\nimport HelpText from '../input/helpText'\nimport { Popover } from '../popover'\nimport { __DEV__ } from '../utils'\nimport type { ChangeEvent } from '../utils'\nimport { SelectProvider } from './context'\nimport type { SelectOptionData, SelectProps } from './select.types'\nimport SelectButton from './selectButton'\nimport SelectContent from './selectContent'\nimport SelectGroup from './selectGroup'\nimport SelectLabel from './selectLabel'\nimport SelectOption from './selectOption'\nimport useSelect from './useSelect'\n\n/**\n * Wraps trigger and content elements, providing them with context.\n * When no children are provided, content can be displayed based on 'options' data prop.\n * Supports single select and multi select, as well as controlled and uncontrolled modes.\n */\nexport function Select(props: SelectProps) {\n  const {\n    children,\n    defaultValue,\n    disabled,\n    errorText,\n    closeOnScroll,\n    helpText,\n    id: idProp,\n    isInvalid,\n    isMultiple,\n    label,\n    labelMarkOptional,\n    labelTooltipText,\n    maxHeight,\n    name,\n    onChange,\n    onClose,\n    onOpen,\n    options,\n    matchWidth = true,\n    placeholder = 'Please select',\n    selectedText,\n    readOnly,\n    selectButton,\n    selectButtonProps,\n    showOptionsFilter,\n    size = 'lg',\n    value,\n    variant,\n    ...rest\n  } = props\n\n  const selectProps = useSelect({ defaultValue, isMultiple, onChange, value, options, selectedText, children })\n\n  if (__DEV__ && isMultiple && !Array.isArray(selectProps.value))\n    console.error('<Select /> is used with isMultiple but its value is not an array: ', value)\n\n  const generatedId = useId()\n  const [query, setQuery] = useState<string>('')\n  const [filteredOptions, setFilteredOptions] = useState(options)\n\n  const id = idProp || generatedId\n\n  const context = {\n    disabled,\n    isInvalid,\n    isMultiple,\n    name,\n    options,\n    placeholder,\n    selectedText,\n    readOnly,\n    size,\n    variant,\n    ...selectProps,\n  }\n  const onQueryChange = (e: ChangeEvent) => setQuery(e.target.value?.toLowerCase())\n\n  const filterOptions = (i: SelectOptionData) =>\n    !showOptionsFilter || !query?.length ? true : i?.text?.toLowerCase()?.includes(query)\n\n  useEffect(() => {\n    setFilteredOptions(options?.filter(filterOptions))\n  }, [query, options])\n\n  return (\n    <SelectProvider value={context}>\n      <Box className=\"vui-selectContainer\" column {...rest}>\n        {!!label && (\n          <SelectLabel\n            disabled={disabled}\n            id={id}\n            label={label}\n            labelMarkOptional={labelMarkOptional}\n            labelTooltipText={labelTooltipText}\n          />\n        )}\n        <Popover matchWidth={matchWidth} onClose={onClose} onOpen={onOpen}>\n          <>\n            {selectButton ?? <SelectButton {...selectButtonProps} />}\n            <SelectContent overflow=\"hidden\">\n              {showOptionsFilter && (\n                <Box>\n                  <Input\n                    startIcon=\"uiSearch\"\n                    id={id}\n                    m={1}\n                    mt={0}\n                    onChange={onQueryChange}\n                    placeholder=\"Filter…\"\n                    size={size}\n                    value={query}\n                    w=\"100%\"\n                  />\n                </Box>\n              )}\n              <SelectGroup maxH={maxHeight} overflowY=\"auto\" tabIndex={1000}>\n                {children ??\n                  filteredOptions?.map?.(option => (\n                    <SelectOption closeOnScroll={closeOnScroll} key={option.value} title={option.text} {...option} />\n                  ))}\n              </SelectGroup>\n            </SelectContent>\n          </>\n        </Popover>\n        {!!helpText && <HelpText size={helpTextSize[size]}>{helpText}</HelpText>}\n        {!!errorText && (\n          <HelpText isError size={helpTextSize[size]}>\n            {errorText}\n          </HelpText>\n        )}\n      </Box>\n    </SelectProvider>\n  )\n}\n\nSelect.Button = SelectButton\nSelect.Content = SelectContent\nSelect.Group = SelectGroup\nSelect.Option = SelectOption\nSelect.displayName = 'Select'\n\nexport default Select\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAuBA,SAAgB,OAAO,OAAoB;CACzC,MAAM,EACJ,UACA,cACA,UACA,WACA,eACA,UACA,IAAI,QACJ,WACA,YACA,OACA,mBACA,kBACA,WACA,MACA,UACA,SACA,QACA,SACA,aAAa,MACb,cAAc,iBACd,cACA,UACA,cACA,mBACA,mBACA,OAAO,MACP,OACA,SACA,GAAG,SACD;CAEJ,MAAM,cAAc,UAAU;EAAE;EAAc;EAAY;EAAU;EAAO;EAAS;EAAc;CAAS,CAAC;CAE5G,YAAe,cAAc,CAAC,MAAM,QAAQ,YAAY,KAAK,GAC3D,QAAQ,MAAM,sEAAsE,KAAK;CAE3F,MAAM,cAAc,MAAM;CAC1B,MAAM,CAAC,OAAO,YAAY,SAAiB,EAAE;CAC7C,MAAM,CAAC,iBAAiB,sBAAsB,SAAS,OAAO;CAE9D,MAAM,KAAK,UAAU;CAErB,MAAM,UAAU;EACd;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,GAAG;CACL;CACA,MAAM,iBAAiB,MAAmB,SAAS,EAAE,OAAO,OAAO,YAAY,CAAC;CAEhF,MAAM,iBAAiB,MACrB,CAAC,qBAAqB,CAAC,OAAO,SAAS,OAAO,GAAG,MAAM,YAAY,CAAC,EAAE,SAAS,KAAK;CAEtF,gBAAgB;EACd,mBAAmB,SAAS,OAAO,aAAa,CAAC;CACnD,GAAG,CAAC,OAAO,OAAO,CAAC;CAEnB,OACE,oBAAC,gBAAD;EAAgB,OAAO;YACrB,qBAAC,KAAD;GAAK,WAAU;GAAsB;GAAO,GAAI;aAAhD;IACG,CAAC,CAAC,SACD,oBAAC,aAAD;KACY;KACN;KACG;KACY;KACD;IACnB;IAEH,oBAAC,SAAD;KAAqB;KAAqB;KAAiB;eACzD,8CACG,gBAAgB,oBAAC,cAAD,EAAc,GAAI,kBAAoB,IACvD,qBAAC,eAAD;MAAe,UAAS;gBAAxB,CACG,qBACC,oBAAC,KAAD,YACE,oBAAC,OAAD;OACE,WAAU;OACN;OACJ,GAAG;OACH,IAAI;OACJ,UAAU;OACV,aAAY;OACN;OACN,OAAO;OACP,GAAE;MACH,GACE,IAEP,oBAAC,aAAD;OAAa,MAAM;OAAW,WAAU;OAAO,UAAU;iBACtD,YACC,iBAAiB,OAAM,WACrB,oBAAC,cAAD;QAA6B;QAAkC,OAAO,OAAO;QAAM,GAAI;OAAS,GAA/C,OAAO,KAAwC,CACjG;MACQ,EACA;OACf;IACK;IACR,CAAC,CAAC,YAAY,oBAAC,UAAD;KAAU,MAAM,aAAa;eAAQ;IAAmB;IACtE,CAAC,CAAC,aACD,oBAAC,UAAD;KAAU;KAAQ,MAAM,aAAa;eAClC;IACO;GAET;;CACS;AAEpB;AAEA,OAAO,SAAS;AAChB,OAAO,UAAU;AACjB,OAAO,QAAQ;AACf,OAAO,SAAS;AAChB,OAAO,cAAc"}

package/dist/select/selectButton.js

@@ -75,5 +75,5 @@ SelectButton.displayName = "SelectButton";
 
 //#endregion
 export { SelectButton as default };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=selectButton.js.map

package/dist/select/selectContent.js

@@ -23,5 +23,5 @@ SelectContent.displayName = "SelectContent";
 
 //#endregion
 export { SelectContent as default };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=selectContent.js.map

package/dist/select/selectGroup.js

@@ -25,5 +25,5 @@ SelectGroup.displayName = "SelectGroup";
 
 //#endregion
 export { SelectGroup as default };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=selectGroup.js.map

package/dist/select/selectLabel.js

@@ -22,5 +22,5 @@ SelectLabel.displayName = "SelectLabel";
 
 //#endregion
 export { SelectLabel as default };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=selectLabel.js.map

package/dist/select/selectOption.js

@@ -74,5 +74,5 @@ SelectOption.displayName = "SelectOption";
 
 //#endregion
 export { SelectOption as default };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=selectOption.js.map

package/dist/select/theme.js

@@ -74,5 +74,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=theme.js.map

package/dist/select/useSelect.js

@@ -30,5 +30,5 @@ function useSelect(props) {
 
 //#endregion
 export { useSelect as default, getOptionText };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=useSelect.js.map

package/dist/select/useSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSelect.js","names":[],"sources":["../../src/select/useSelect.tsx"],"sourcesContent":["import { Children, isValidElement, useState } from 'react'\n\nimport type { ChangeEvent } from '../utils'\nimport { toggleItem, useCallbackRef } from '../utils'\nimport type { SelectOptionData, SelectValue } from './select.types'\nimport type { UseSelectProps } from './useSelect.types'\n\nexport const getOptionText = (value: SelectValue, options: SelectOptionData[]) => {\n  const option = options?.find((o: SelectOptionData) => o?.value === value)\n\n  return option?.text || value\n}\n\n/** Handles controlled/uncontrolled value state. Supports single and multiple values. */\nexport default function useSelect(props: UseSelectProps) {\n  const {\n    defaultValue,\n    isMultiple,\n    onChange: onChangeProp,\n    value: valueProp,\n    options = [],\n    selectedText,\n    children,\n  } = props\n\n  // Not using useControlled here, because we need custom value setter when uncontrolled\n  const [stateValue, setStateValue] = useState(defaultValue)\n  const isControlled = valueProp !== undefined\n  const value = isControlled ? valueProp : stateValue\n\n  // Iterating over the children to dynamically obtain the list of available options\n  const dynamicOptions: SelectOptionData[] = []\n  Children.forEach(children, element => {\n    if (!isValidElement(element)) return\n    const option: SelectOptionData = element.props as SelectOptionData\n    if (option.text && option.value) dynamicOptions.push(option)\n  })\n\n  /** Sends a change event to the external consumer, but internal keeps the actual value as primitive or array. */\n  const onChange = useCallbackRef((e: ChangeEvent) => {\n    onChangeProp?.(e)\n\n    if (!isControlled)\n      setStateValue(value => (Array.isArray(value) ? toggleItem(value, e.target.value).sort() : e.target.value))\n  })\n\n  const valueText =\n    isMultiple && Array.isArray(value)\n      ? value[0]\n        ? selectedText && value.length > 1\n          ? selectedText\n          : `${getOptionText(value[0], [...options, ...dynamicOptions])}${\n              value.length > 1 ? ` (+${value.length - 1})` : ''\n            }`\n        : undefined\n      : getOptionText(value as SelectValue, [...options, ...dynamicOptions])\n\n  return { onChange, value, valueText }\n}\n\nexport type UseSelectReturnType = ReturnType<typeof useSelect>\n"],"mappings":";;;;;AAOA,MAAa,iBAAiB,OAAoB,YAAgC;CAGhF,QAFe,SAAS,MAAM,MAAwB,GAAG,UAAU,KAAK,IAEzD,QAAQ;AACzB;;AAGA,SAAwB,UAAU,OAAuB;CACvD,MAAM,EACJ,cACA,YACA,UAAU,cACV,OAAO,WACP,UAAU,CAAC,GACX,cACA,aACE;CAGJ,MAAM,CAAC,YAAY,iBAAiB,SAAS,YAAY;CACzD,MAAM,eAAe,cAAc;CACnC,MAAM,QAAQ,eAAe,YAAY;CAGzC,MAAM,iBAAqC,CAAC;CAC5C,SAAS,QAAQ,WAAU,YAAW;EACpC,IAAI,CAAC,eAAe,OAAO,GAAG;EAC9B,MAAM,SAA2B,QAAQ;EACzC,IAAI,OAAO,QAAQ,OAAO,OAAO,eAAe,KAAK,MAAM;CAC7D,CAAC;CAqBD,OAAO;EAAE,UAlBQ,gBAAgB,MAAmB;GAClD,eAAe,CAAC;GAEhB,IAAI,CAAC,cACH,eAAc,UAAU,MAAM,QAAQ,KAAK,IAAI,WAAW,OAAO,EAAE,OAAO,KAAK,EAAE,KAAK,IAAI,EAAE,OAAO,KAAM;EAC7G,CAagB;EAAG;EAAO,WAVxB,cAAc,MAAM,QAAQ,KAAK,IAC7B,MAAM,KACJ,gBAAgB,MAAM,SAAS,IAC7B,eACA,GAAG,cAAc,MAAM,IAAI,CAAC,GAAG,SAAS,GAAG,cAAc,CAAC,IACxD,MAAM,SAAS,IAAI,MAAM,MAAM,SAAS,EAAE,KAAK,OAEnD,SACF,cAAc,OAAsB,CAAC,GAAG,SAAS,GAAG,cAAc,CAAC;CAErC;AACtC"}
+{"version":3,"file":"useSelect.js","names":[],"sources":["../../src/select/useSelect.tsx"],"sourcesContent":["import { Children, isValidElement, useState } from 'react'\n\nimport type { ChangeEvent } from '../utils'\nimport { toggleItem, useCallbackRef } from '../utils'\nimport type { SelectOptionData, SelectValue } from './select.types'\nimport type { UseSelectProps } from './useSelect.types'\n\nexport const getOptionText = (value: SelectValue, options: SelectOptionData[]) => {\n  const option = options?.find((o: SelectOptionData) => o?.value === value)\n\n  return option?.text || value\n}\n\n/** Handles controlled/uncontrolled value state. Supports single and multiple values. */\nexport default function useSelect(props: UseSelectProps) {\n  const {\n    defaultValue,\n    isMultiple,\n    onChange: onChangeProp,\n    value: valueProp,\n    options = [],\n    selectedText,\n    children,\n  } = props\n\n  // Not using useControlled here, because we need custom value setter when uncontrolled\n  const [stateValue, setStateValue] = useState(defaultValue)\n  const isControlled = valueProp !== undefined\n  const value = isControlled ? valueProp : stateValue\n\n  // Iterating over the children to dynamically obtain the list of available options\n  const dynamicOptions: SelectOptionData[] = []\n  Children.forEach(children, element => {\n    if (!isValidElement(element)) return\n    const option: SelectOptionData = element.props as SelectOptionData\n    if (option.text && option.value) dynamicOptions.push(option)\n  })\n\n  /** Sends a change event to the external consumer, but internal keeps the actual value as primitive or array. */\n  const onChange = useCallbackRef((e: ChangeEvent) => {\n    onChangeProp?.(e)\n\n    if (!isControlled)\n      setStateValue(value => (Array.isArray(value) ? toggleItem(value, e.target.value).sort() : e.target.value))\n  })\n\n  const valueText =\n    isMultiple && Array.isArray(value)\n      ? value[0]\n        ? selectedText && value.length > 1\n          ? selectedText\n          : `${getOptionText(value[0], [...options, ...dynamicOptions])}${\n              value.length > 1 ? ` (+${value.length - 1})` : ''\n            }`\n        : undefined\n      : getOptionText(value as SelectValue, [...options, ...dynamicOptions])\n\n  return { onChange, value, valueText }\n}\n\nexport type UseSelectReturnType = ReturnType<typeof useSelect>\n"],"mappings":";;;;;AAOA,MAAa,iBAAiB,OAAoB,YAAgC;CAGhF,QAFe,SAAS,MAAM,MAAwB,GAAG,UAAU,KAAK,CAAC,CAE5D,EAAE,QAAQ;AACzB;;AAGA,SAAwB,UAAU,OAAuB;CACvD,MAAM,EACJ,cACA,YACA,UAAU,cACV,OAAO,WACP,UAAU,CAAC,GACX,cACA,aACE;CAGJ,MAAM,CAAC,YAAY,iBAAiB,SAAS,YAAY;CACzD,MAAM,eAAe,cAAc;CACnC,MAAM,QAAQ,eAAe,YAAY;CAGzC,MAAM,iBAAqC,CAAC;CAC5C,SAAS,QAAQ,WAAU,YAAW;EACpC,IAAI,CAAC,eAAe,OAAO,GAAG;EAC9B,MAAM,SAA2B,QAAQ;EACzC,IAAI,OAAO,QAAQ,OAAO,OAAO,eAAe,KAAK,MAAM;CAC7D,CAAC;CAqBD,OAAO;EAAE,UAlBQ,gBAAgB,MAAmB;GAClD,eAAe,CAAC;GAEhB,IAAI,CAAC,cACH,eAAc,UAAU,MAAM,QAAQ,KAAK,IAAI,WAAW,OAAO,EAAE,OAAO,KAAK,CAAC,CAAC,KAAK,IAAI,EAAE,OAAO,KAAM;EAC7G,CAagB;EAAG;EAAO,WAVxB,cAAc,MAAM,QAAQ,KAAK,IAC7B,MAAM,KACJ,gBAAgB,MAAM,SAAS,IAC7B,eACA,GAAG,cAAc,MAAM,IAAI,CAAC,GAAG,SAAS,GAAG,cAAc,CAAC,IACxD,MAAM,SAAS,IAAI,MAAM,MAAM,SAAS,EAAE,KAAK,OAEnD,SACF,cAAc,OAAsB,CAAC,GAAG,SAAS,GAAG,cAAc,CAAC;CAErC;AACtC"}

package/dist/sidemenu/context.js

@@ -5,5 +5,5 @@ const [SidemenuProvider, useSidemenuContext] = createContext({ isOptional: true
 
 //#endregion
 export { SidemenuProvider, useSidemenuContext };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=context.js.map

package/dist/sidemenu/sidemenu.js

@@ -94,5 +94,5 @@ Sidemenu.displayName = "Sidemenu";
 
 //#endregion
 export { Sidemenu as default };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=sidemenu.js.map

package/dist/sidemenu/sidemenuItem.js

@@ -112,5 +112,5 @@ SidemenuItem.displayName = "SidemenuItem";
 
 //#endregion
 export { SidemenuItem as default };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=sidemenuItem.js.map

package/dist/sidemenu/sidemenuTop.d.ts

@@ -3,7 +3,7 @@ import { SidemenuTopProps } from "./sidemenu.types.js";
 //#region src/sidemenu/sidemenuTop.d.ts
 /** Top container. */
 declare const SidemenuTop: {
-  (props: SidemenuTopProps): import("react/jsx-runtime").JSX.Element | null;
+  (props: SidemenuTopProps): import("react").JSX.Element | null;
   displayName: string;
 };
 //#endregion

package/dist/sidemenu/sidemenuTop.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidemenuTop.d.ts","names":[],"sources":["../../src/sidemenu/sidemenuTop.tsx"],"mappings":";;;;cAOa,WAAA;EAAA,QAAsB,gBAAgB,+BAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"sidemenuTop.d.ts","names":[],"sources":["../../src/sidemenu/sidemenuTop.tsx"],"mappings":";;;;cAOa,WAAA;EAAA,QAAsB,gBAAgB,mBAAA,GAAA,CAAA,OAAA"}

package/dist/sidemenu/sidemenuTop.js

@@ -30,5 +30,5 @@ SidemenuTop.displayName = "SidemenuTop";
 
 //#endregion
 export { SidemenuTop as default };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=sidemenuTop.js.map

package/dist/sidemenu/theme.js

@@ -41,5 +41,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=theme.js.map

package/dist/sidemenu/useSidemenuItem.js

@@ -22,5 +22,5 @@ const useSidemenuItem = (isExpanded) => {
 
 //#endregion
 export { useSidemenuItem as default };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=useSidemenuItem.js.map

package/dist/sidemenuV2/SidemenuItemContent.js

@@ -16,10 +16,11 @@ const SidemenuItemContent = memo(({ icon, iconSize = "sm", title, isMenuExpanded
 		fontWeight: "500",
 		ml: iconBaseMarginLeft,
 		children: title
-	}), badge && typeof badge === "object" && typeof badge.text === "string" && badge.text.trim() !== "" && /* @__PURE__ */ jsx(Badge, {
+	}), badge && typeof badge === "object" && typeof badge.label === "string" && badge.label.trim() !== "" && /* @__PURE__ */ jsx(Badge, {
 		...badge,
 		"data-link": btoa(badgeLinkUrl ?? "#"),
-		variant: badge.variant ?? "subtleGreen",
+		variant: badge.variant ?? "subtle",
+		color: badge.color ?? "green",
 		size: "sm",
 		minW: "32px",
 		fontSize: "12px",
@@ -44,10 +45,11 @@ const SidemenuItemContent = memo(({ icon, iconSize = "sm", title, isMenuExpanded
 			display: "inline-block",
 			children: title
 		}),
-		badge && typeof badge === "object" && typeof badge.text === "string" && badge.text.trim() !== "" && /* @__PURE__ */ jsx(Badge, {
+		badge && typeof badge === "object" && typeof badge.label === "string" && badge.label.trim() !== "" && /* @__PURE__ */ jsx(Badge, {
 			...badge,
 			"data-link": btoa(badgeLinkUrl ?? "#"),
-			variant: badge.variant ?? "subtleGreen",
+			variant: badge.variant ?? "subtle",
+			color: badge.color ?? "green",
 			size: "sm",
 			minW: "32px",
 			fontSize: "12px",
@@ -61,5 +63,5 @@ SidemenuItemContent.displayName = "SidemenuItemContent";
 
 //#endregion
 export { SidemenuItemContent as default };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=SidemenuItemContent.js.map

package/dist/sidemenuV2/SidemenuItemContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidemenuItemContent.js","names":[],"sources":["../../src/sidemenuV2/SidemenuItemContent.tsx"],"sourcesContent":["import { memo } from 'react'\n\nimport Badge from '../badge'\nimport type { BadgeProps } from '../badge/badge.types'\nimport Box from '../box'\nimport type { IconProp } from '../icon'\nimport Icon from '../icon'\nimport T from '../t'\n\nexport interface SidemenuItemContentProps {\n  icon?: IconProp\n  iconSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n  title?: string\n  isMenuExpanded?: boolean\n  isInPopover?: boolean\n  badge?: Pick<BadgeProps, 'text' | 'variant'>\n  badgeLinkUrl?: string\n}\n\nconst SidemenuItemContent = memo<SidemenuItemContentProps>(\n  ({ icon, iconSize = 'sm', title, isMenuExpanded, isInPopover, badge, badgeLinkUrl }) => {\n    const iconBaseMarginLeft = 13 / 8\n    const iconMarginRight = isMenuExpanded ? 10 / 8 : 20 / 8\n\n    if (isInPopover)\n      return (\n        <>\n          <T isTruncated size=\"sm\" display=\"inline-block\" fontWeight=\"500\" ml={iconBaseMarginLeft}>\n            {title}\n          </T>\n          {badge && typeof badge === 'object' && typeof badge.text === 'string' && badge.text.trim() !== '' && (\n            <Badge\n              {...badge}\n              data-link={btoa(badgeLinkUrl ?? '#')}\n              variant={badge.variant ?? 'subtleGreen'}\n              size=\"sm\"\n              minW=\"32px\"\n              fontSize=\"12px\"\n              lineHeight=\"16px\"\n              ml=\"10px\"\n              mr=\"10px\"\n            />\n          )}\n        </>\n      )\n\n    return (\n      <>\n        <Box ml={iconBaseMarginLeft} mr={iconMarginRight} w=\"20px\" transition=\"margin 0.2s ease-in-out\">\n          {icon && <Icon name={icon} size={iconSize} />}\n        </Box>\n        <T isTruncated size=\"sm\" display=\"inline-block\">\n          {title}\n        </T>\n        {badge && typeof badge === 'object' && typeof badge.text === 'string' && badge.text.trim() !== '' && (\n          <Badge\n            {...badge}\n            data-link={btoa(badgeLinkUrl ?? '#')}\n            variant={badge.variant ?? 'subtleGreen'}\n            size=\"sm\"\n            minW=\"32px\"\n            fontSize=\"12px\"\n            lineHeight=\"16px\"\n            ml=\"10px\"\n            mr=\"10px\"\n          />\n        )}\n      </>\n    )\n  },\n)\n\nSidemenuItemContent.displayName = 'SidemenuItemContent'\n\nexport default SidemenuItemContent\n"],"mappings":";;;;;;;;AAmBA,MAAM,sBAAsB,MACzB,EAAE,MAAM,WAAW,MAAM,OAAO,gBAAgB,aAAa,OAAO,mBAAmB;CACtF,MAAM,qBAAqB,KAAK;CAChC,MAAM,kBAAkB,iBAAiB,KAAK,IAAI,KAAK;CAEvD,IAAI,aACF,OACE,8CACE,oBAAC,GAAD;EAAG;EAAY,MAAK;EAAK,SAAQ;EAAe,YAAW;EAAM,IAAI;YAClE;CACA,IACF,SAAS,OAAO,UAAU,YAAY,OAAO,MAAM,SAAS,YAAY,MAAM,KAAK,KAAK,MAAM,MAC7F,oBAAC,OAAD;EACE,GAAI;EACJ,aAAW,KAAK,gBAAgB,GAAG;EACnC,SAAS,MAAM,WAAW;EAC1B,MAAK;EACL,MAAK;EACL,UAAS;EACT,YAAW;EACX,IAAG;EACH,IAAG;CACJ,EAEH;CAGN,OACE;EACE,oBAAC,KAAD;GAAK,IAAI;GAAoB,IAAI;GAAiB,GAAE;GAAO,YAAW;aACnE,QAAQ,oBAAC,MAAD;IAAM,MAAM;IAAM,MAAM;GAAW;EACzC;EACL,oBAAC,GAAD;GAAG;GAAY,MAAK;GAAK,SAAQ;aAC9B;EACA;EACF,SAAS,OAAO,UAAU,YAAY,OAAO,MAAM,SAAS,YAAY,MAAM,KAAK,KAAK,MAAM,MAC7F,oBAAC,OAAD;GACE,GAAI;GACJ,aAAW,KAAK,gBAAgB,GAAG;GACnC,SAAS,MAAM,WAAW;GAC1B,MAAK;GACL,MAAK;GACL,UAAS;GACT,YAAW;GACX,IAAG;GACH,IAAG;EACJ;CAEH;AAEN,CACF;AAEA,oBAAoB,cAAc"}
+{"version":3,"file":"SidemenuItemContent.js","names":[],"sources":["../../src/sidemenuV2/SidemenuItemContent.tsx"],"sourcesContent":["import { memo } from 'react'\n\nimport Badge from '../badge'\nimport type { BadgeProps } from '../badge/badge.types'\nimport Box from '../box'\nimport type { IconProp } from '../icon'\nimport Icon from '../icon'\nimport T from '../t'\n\nexport interface SidemenuItemContentProps {\n  icon?: IconProp\n  iconSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n  title?: string\n  isMenuExpanded?: boolean\n  isInPopover?: boolean\n  badge?: Pick<BadgeProps, 'label' | 'variant' | 'color'>\n  badgeLinkUrl?: string\n}\n\nconst SidemenuItemContent = memo<SidemenuItemContentProps>(\n  ({ icon, iconSize = 'sm', title, isMenuExpanded, isInPopover, badge, badgeLinkUrl }) => {\n    const iconBaseMarginLeft = 13 / 8\n    const iconMarginRight = isMenuExpanded ? 10 / 8 : 20 / 8\n\n    if (isInPopover)\n      return (\n        <>\n          <T isTruncated size=\"sm\" display=\"inline-block\" fontWeight=\"500\" ml={iconBaseMarginLeft}>\n            {title}\n          </T>\n          {badge && typeof badge === 'object' && typeof badge.label === 'string' && badge.label.trim() !== '' && (\n            <Badge\n              {...badge}\n              data-link={btoa(badgeLinkUrl ?? '#')}\n              variant={badge.variant ?? 'subtle'}\n              color={badge.color ?? 'green'}\n              size=\"sm\"\n              minW=\"32px\"\n              fontSize=\"12px\"\n              lineHeight=\"16px\"\n              ml=\"10px\"\n              mr=\"10px\"\n            />\n          )}\n        </>\n      )\n\n    return (\n      <>\n        <Box ml={iconBaseMarginLeft} mr={iconMarginRight} w=\"20px\" transition=\"margin 0.2s ease-in-out\">\n          {icon && <Icon name={icon} size={iconSize} />}\n        </Box>\n        <T isTruncated size=\"sm\" display=\"inline-block\">\n          {title}\n        </T>\n        {badge && typeof badge === 'object' && typeof badge.label === 'string' && badge.label.trim() !== '' && (\n          <Badge\n            {...badge}\n            data-link={btoa(badgeLinkUrl ?? '#')}\n            variant={badge.variant ?? 'subtle'}\n            color={badge.color ?? 'green'}\n            size=\"sm\"\n            minW=\"32px\"\n            fontSize=\"12px\"\n            lineHeight=\"16px\"\n            ml=\"10px\"\n            mr=\"10px\"\n          />\n        )}\n      </>\n    )\n  },\n)\n\nSidemenuItemContent.displayName = 'SidemenuItemContent'\n\nexport default SidemenuItemContent\n"],"mappings":";;;;;;;;AAmBA,MAAM,sBAAsB,MACzB,EAAE,MAAM,WAAW,MAAM,OAAO,gBAAgB,aAAa,OAAO,mBAAmB;CACtF,MAAM,qBAAqB,KAAK;CAChC,MAAM,kBAAkB,iBAAiB,KAAK,IAAI,KAAK;CAEvD,IAAI,aACF,OACE,8CACE,oBAAC,GAAD;EAAG;EAAY,MAAK;EAAK,SAAQ;EAAe,YAAW;EAAM,IAAI;YAClE;CACA,IACF,SAAS,OAAO,UAAU,YAAY,OAAO,MAAM,UAAU,YAAY,MAAM,MAAM,KAAK,MAAM,MAC/F,oBAAC,OAAD;EACE,GAAI;EACJ,aAAW,KAAK,gBAAgB,GAAG;EACnC,SAAS,MAAM,WAAW;EAC1B,OAAO,MAAM,SAAS;EACtB,MAAK;EACL,MAAK;EACL,UAAS;EACT,YAAW;EACX,IAAG;EACH,IAAG;CACJ,EAEH;CAGN,OACE;EACE,oBAAC,KAAD;GAAK,IAAI;GAAoB,IAAI;GAAiB,GAAE;GAAO,YAAW;aACnE,QAAQ,oBAAC,MAAD;IAAM,MAAM;IAAM,MAAM;GAAW;EACzC;EACL,oBAAC,GAAD;GAAG;GAAY,MAAK;GAAK,SAAQ;aAC9B;EACA;EACF,SAAS,OAAO,UAAU,YAAY,OAAO,MAAM,UAAU,YAAY,MAAM,MAAM,KAAK,MAAM,MAC/F,oBAAC,OAAD;GACE,GAAI;GACJ,aAAW,KAAK,gBAAgB,GAAG;GACnC,SAAS,MAAM,WAAW;GAC1B,OAAO,MAAM,SAAS;GACtB,MAAK;GACL,MAAK;GACL,UAAS;GACT,YAAW;GACX,IAAG;GACH,IAAG;EACJ;CAEH;AAEN,CACF;AAEA,oBAAoB,cAAc"}

package/dist/sidemenuV2/context.d.ts

@@ -31,7 +31,7 @@ declare const SidemenuStateProvider: ({
   variant,
   size,
   isDark
-}: SidemenuStateProviderProps) => import("react/jsx-runtime").JSX.Element;
+}: SidemenuStateProviderProps) => import("react").JSX.Element;
 //#endregion
 export { SidemenuStateProvider, useSidemenuContext };
 

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

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","names":[],"sources":["../../src/sidemenuV2/context.tsx"],"mappings":";;;;UAMiB,oBAAA,SAA6B,IAAI;EAEhD,OAAA;EACA,IAAA;EACA,cAAA;EAGA,aAAA,GAAgB,MAAA;EAChB,eAAA,IAAmB,MAAA,UAAgB,MAAA;EACnC,aAAA,IAAiB,MAAA;EAGjB,aAAA,IAAiB,UAAA;EACjB,gBAAA,IAAoB,UAAA;EAGpB,cAAA;EACA,kBAAA;EACA,gBAAA;AAAA;AAAA,UA0CQ,0BAAA;EACR,QAAA,EAAU,SAAS;EACnB,iBAAA;EACA,gBAAA,IAAoB,UAAA;EACpB,OAAA;EACA,IAAA;EACA,MAAA;AAAA;AAAA,cAGK,gBAAA,kBAAgB,QAAA,CAAA,oBAAA,GAAE,kBAAA,QAAkB,oBAA6D;AAAA,cAG3F,qBAAA;EAAyB,QAAA;EAAA,iBAAA;EAAA,gBAAA;EAAA,OAAA;EAAA,IAAA;EAAA;AAAA,GAOnC,0BAAA,iCAA0B,GAAA,CAAA,OAAA"}
+{"version":3,"file":"context.d.ts","names":[],"sources":["../../src/sidemenuV2/context.tsx"],"mappings":";;;;UAMiB,oBAAA,SAA6B,IAAI;EAEhD,OAAA;EACA,IAAA;EACA,cAAA;EAGA,aAAA,GAAgB,MAAA;EAChB,eAAA,IAAmB,MAAA,UAAgB,MAAA;EACnC,aAAA,IAAiB,MAAA;EAGjB,aAAA,IAAiB,UAAA;EACjB,gBAAA,IAAoB,UAAA;EAGpB,cAAA;EACA,kBAAA;EACA,gBAAA;AAAA;AAAA,UA0CQ,0BAAA;EACR,QAAA,EAAU,SAAS;EACnB,iBAAA;EACA,gBAAA,IAAoB,UAAA;EACpB,OAAA;EACA,IAAA;EACA,MAAA;AAAA;AAAA,cAGK,gBAAA,kBAAgB,QAAA,CAAA,oBAAA,GAAE,kBAAA,QAAkB,oBAA6D;AAAA,cAG3F,qBAAA;EAAyB,QAAA;EAAA,iBAAA;EAAA,gBAAA;EAAA,OAAA;EAAA,IAAA;EAAA;AAAA,GAOnC,0BAAA,qBAA0B,GAAA,CAAA,OAAA"}

package/dist/sidemenuV2/context.js

@@ -106,5 +106,5 @@ const SidemenuStateProvider = ({ children, isExpandedInitial = true, onExpandedC
 
 //#endregion
 export { SidemenuStateProvider, useSidemenuContext };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=context.js.map

package/dist/sidemenuV2/sidemenuItemV2.js

@@ -231,5 +231,5 @@ SidemenuItemV2.displayName = "SidemenuItemV2";
 
 //#endregion
 export { SidemenuItemV2 as default };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=sidemenuItemV2.js.map

package/dist/sidemenuV2/sidemenuItemV2.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidemenuItemV2.js","names":["colors"],"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    }),\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      // Apply button theme styles from SideMenuV2 theme (replaces removed menuLight/menuDark variants)\n      ...(styles && 'button' in styles && styles.button ? styles.button : {}),\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: 'tertiaryBrand', // Use base variant, theme overrides applied above\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: 'tertiaryBrand', // Use base variant, styling from parent\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])\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":";;;;;;;;;;;;;;;;AAgBA,MAAa,iBAAiB,OAAO,GAA2B;;mBAE9C,MAAK,GAAG,MAAM,EAAE,UAAU,EAAE;;;mBAG5B,MAAK,GAAG,MAAM,EAAE,UAAU,EAAE;;;AAK9C,MAAM,mBAAmB,EACvB,QACA,WACA,cACA,iBACA,MACA,OACA,gBACA,eAWA,oBAAC,SAAD;CAAS,QAAQ,CAAC,cAAoC,CAAC;CAAG,WAAU;CAAc,SAAQ;YACtF,EAAE,aACF,qBAAC,gBAAD;EAAgB,YAAY,SAASA,eAAO,QAAQ,OAAOA,eAAO,QAAQ;YAA1E,CACE,oBAAC,QAAQ,SAAT;GAAiB,IAAI;GAAK,WAAW,GAAG,6BAA6B,SAAS;aAC5E,oBAAC,QAAD;IACE,GAAI;IACJ,YAAY,aAAa,SAAS,mBAAmB;IACrD,UAAU;IACV,WAAW,GAAG,eAAe;cAE7B,oBAAC,qBAAD;KACQ;KACN,UAAU,aAAa;KAChB;KACS;IACjB;GACK;EACO,IACjB,oBAAC,QAAQ,SAAT;GAAiB,WAAU;GAAO,WAAW,GAAG,6BAA6B,SAAS;aACpF,qBAAC,KAAD;IAAK,eAAc;IAAS,gBAAe;IAAQ,GAAE;cAArD,CACE,oBAAC,QAAD;KACE,GAAI;KACJ,iBAAiB;KACjB,MAAM;KACN,UAAU,UAAU;KACpB,WAAW,GAAG,eAAe;eAE7B,oBAAC,qBAAD;MAA4B;MAAO,aAAa;KAAO;IACjD,IACP,QACE;;EACU,EACH;;AAEX;;AAIX,MAAa,iBAAiB,KAAoC,OAAO,QAAQ;CAC/E,MAAM,EACJ,UACA,WACA,WAAW,OACX,MACA,WAAW,OACX,aAAa,MACb,QACA,QAAQ,GACR,WAAW,OACX,SACA,YACA,UACA,OACA,GAAG,SACD,iBAAiB,KAAK;CAG1B,MAAM,iBAAiB,UAAU,mBAAmB,OAAO,KAAK,KAAK,QAAQ,KAAK,OAAO,EAAE,SAAS,EAAE,EAAE,OAAO,GAAG,CAAC;CAEnH,MAAM,EAAE,QAAQ,gBAAgB,QAAQ,MAAM,eAAe,kBAAkB,gBAAgB,cAAc;CAG7G,MAAM,kBAAkB;CAExB,gBAAgB;EAGd,IAAI,gBAAgB;GAClB,IAAI,eAAe,WAAW;GAC9B,IAAI,CAAC,eAAe,aAAa;EACnC;CACF,GAAG;EAAC;EAAe;EAAU;EAAY;CAAc,CAAC;CAGxD,MAAM,iBAAiB,cAAc;EACnC,MAAM,cAAc,CAAC,CAAC;EAmBtB,OAAO;GAVL;GACA,sBATyB,eAAe,CAAC;GAUzC,qBARwB,eAAe,iBAAiB;GASxD,wBAR6B,eAAe;GAS5C,YARiB,QAAQ,IAAK,OAAkB;GAShD,UARe,QAAQ,IAAK,OAAkB;GAS9C,YAAY;GACZ,kBAAkB,CAAC,eAAe;EAGxB;CACd,GAAG;EAAC;EAAU;EAAe;EAAgB;EAAU;EAAM;CAAK,CAAC;CAGnE,MAAM,cAAc,eACX,EACL,aAAa,SAAS,mBAAmB,eAC3C,IACA,CAAC,MAAM,CACT;CAGA,MAAM,cAAc,aACjB,UAAsB;EACrB,IAAI,CAAC,eAAe,YAAY;GAC9B,MAAM,YAAY,MAAM;GACxB,KACG,UAAU,UAAU,SAAS,aAAa,KAAK,UAAU,UAAU,SAAS,SAAS,MACtF,OAAO,WAAW,gBACjB,UAAU,eAAe,QAAQ,QAAQ,WAAW,QAAQ,OAC7D;IACA,MAAM,MAAM,KAAK,UAAU,eAAe,QAAQ,QAAQ,WAAW,QAAQ,QAAQ,EAAE;IACvF,OAAO,KAAK,KAAK,UAAU,qBAAqB;GAClD,OAAO;IACL,OAAO,kBAAkB;IACzB,UAAU;GACZ;EACF;EACA,gBAAgB;CAClB,GACA,CAAC,SAAS,eAAe,UAAU,CACrC;CAGA,MAAM,eAAe,eACZ;EAEL,GAAI,UAAU,UAAU,UAAU,OAAO,OAAO,OAAO,OAAO,CAAC;EAG/D,GAAI,UAAU,YAAY,UAAU,OAAO,SAAS,OAAO,SAAS,CAAC;EAGrE,iBAAiB,kBAAkB,YAAY,cAAc;EAG7D,oBAAoB;EAGpB,MAAM,eAAe;EACrB,GAAG,eAAe,eAAe,OAAO,KAAK;EAC7C,UAAU,eAAe;EACzB,SAAS;EAGT,SAAS;EACT,UAAU,eAAe;EAGzB,MAAM;EACN,UAAU,eAAe,aAAa,KAAK;EAC3C,iBAAiB,eAAe;EAChC,gBAAgB;EAGhB,GAAG;CACL,IACA;EAEE;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAGA,MAAM,oBAAoB,cAAc;EACtC,MAAM,aAAa;EAInB,OAAO;GACL,cAHgB,aAAa,aAAa;GAI1C,WAAW;GACX,SAAS;GACT,MAPkB,aAAa,iBAAiB;GAQhD,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,GAAG;GACH,QAAQ;GACR,IAAI;GACJ,SAAS;GACT,UAAU;EACZ;CACF,GAAG,CAAC,aAAa,CAAC;CAGlB,MAAM,sBACJ,oBAAC,iBAAD;EACU;EACG;EACG;EACG;EACX;EACC;EACS;YAEf,WAAW,WAAW;CACR;CAInB,MAAM,qBAAqB;EACzB,IAAI,UAAU,KAAK,CAAC,gBAClB,OACE,oBAAC,SAAD;GAAS,MAAM;GAAO,WAAU;GAAQ,QAAQ,CAAC,GAAG,IAAI;aACtD,qBAAC,QAAD;IACE,WAAW,GAAG,mCAAmC,mBAAmB,6BAA6B,SAAS;IAC1G,GAAI;IACJ,UAAU;cAHZ;KAKE,oBAAC,qBAAD;MAA2B;MAAM,UAAU,aAAa;KAAW;KAClE,kBAAkB,eAAe,0BAA0B,oBAAC,QAAD,EAAQ,GAAI,kBAAoB;KAAG;IACzF;;EACD;EAIb,OACE,qBAAC,QAAD;GACE,WAAW,GAAG,mCAAmC,mBAAmB,6BAA6B,SAAS;GAC1G,GAAI;GACJ,UAAU;GACV,OAAO,CAAC,iBAAiB,QAAQ;aAJnC;IAME,oBAAC,qBAAD;KACQ;KACN,UAAU,aAAa;KAChB;KACS;KAChB,OAAO,MAAM;KACb,cAAc,MAAM;IACrB;IACA,kBAAkB,eAAe,0BAA0B,oBAAC,QAAD,EAAQ,GAAI,kBAAoB;IAAG;GAEzF;;CAGZ;CAGA,MAAM,uBACJ,oBAAC,KAAD;EAAK,eAAc;EAAS,gBAAe;EAAQ,GAAE;EAClD;CACE;CAGP,MAAM,oBAAoB,QAAQ,CAAC,kBAAkB,UAAU,KAAK,CAAC,CAAC,QAAQ;CAC9E,MAAM,qBAAqB,eAAe;CAE1C,OACE,qBAAC,KAAD;EAAK,eAAc;EAAc;EAAK,GAAE;EAAO,IAAI,WAAW,SAAS;EAAG,IAAI;YAA9E;GACG,qBAAqB,cAAc;GACnC,CAAC,qBAAqB,aAAa;GACnC,sBAAsB,eAAe;EACnC;;AAET,CAAC;AAED,eAAe,cAAc"}
+{"version":3,"file":"sidemenuItemV2.js","names":["colors"],"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    }),\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      // Apply button theme styles from SideMenuV2 theme (replaces removed menuLight/menuDark variants)\n      ...(styles && 'button' in styles && styles.button ? styles.button : {}),\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: 'tertiaryBrand', // Use base variant, theme overrides applied above\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: 'tertiaryBrand', // Use base variant, styling from parent\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])\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

@@ -3,7 +3,7 @@ import { SidemenuTopPropsV2 } from "./sidemenuV2.types.js";
 //#region src/sidemenuV2/sidemenuTopV2.d.ts
 /** Top container. */
 declare const SidemenuTopV2: {
-  (props: SidemenuTopPropsV2): import("react/jsx-runtime").JSX.Element | null;
+  (props: SidemenuTopPropsV2): import("react").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"],"mappings":";;;;cAOa,aAAA;EAAA,QAAwB,kBAAkB,+BAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"sidemenuTopV2.d.ts","names":[],"sources":["../../src/sidemenuV2/sidemenuTopV2.tsx"],"mappings":";;;;cAOa,aAAA;EAAA,QAAwB,kBAAkB,mBAAA,GAAA,CAAA,OAAA"}

package/dist/sidemenuV2/sidemenuTopV2.js

@@ -30,5 +30,5 @@ SidemenuTopV2.displayName = "SidemenuTopV2";
 
 //#endregion
 export { SidemenuTopV2 as default };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=sidemenuTopV2.js.map

package/dist/sidemenuV2/sidemenuV2.js

@@ -231,5 +231,5 @@ SidemenuV2.displayName = "SidemenuV2";
 
 //#endregion
 export { SidemenuV2 as default };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=sidemenuV2.js.map

package/dist/sidemenuV2/sidemenuV2.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidemenuV2.js","names":[],"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        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        {children}\n      </SidemenuInner>\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 key=\"sidemenu-toggle-button\" {...toggleButtonProps}>\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":[],"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        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        {children}\n      </SidemenuInner>\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 key=\"sidemenu-toggle-button\" {...toggleButtonProps}>\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":";;;;;;;;;;;;;;;;AAkBA,MAAa,aAAa,KAA6B,OAAO,QAAQ;CACpE,MAAM,EACJ,oBAAoB,MACpB,kBACA,MACA,UAAU,SACV,UACA,WACA,OACA,cACA,UACA,OACA,KACA,YACA,GAAG,cACD;CAEJ,OACE,oBAAC,uBAAD;EACqB;EACD;EACT;EACH;EACN,QAAQ,YAAY;YAEpB,oBAAC,eAAD;GACO;GAEM;GACJ;GACO;GACJ;GACJ;GACG;GACF;GACF;GACO;GACZ,GAAI;GAEH;EACY;CACM;AAE3B,CAAC;AAMD,MAAM,gBAAgB,KAA6B,OAAO,QAAQ;CAChE,MAAM,EACJ,UACA,WACA,OACA,cACA,WAAW,OACX,MACA,UAAU,SACV,aACA,KACA,YACA,GAAG,SACD;CAIJ,MAAM,EAAE,iBAAiB,OAAO,kBADhB,mBACwC,KAAK,CAAC;CAG9D,MAAM,SAAS,eAAe,cAAc,KAAK;CAGjD,MAAM,aAAa,eACV;EACL,QAAQ,YAAY;EACpB,UAAU,CAAC,CAAC;EACZ,iBAAiB,CAAC,CAAC,SAAS,MAAM,SAAS;EAC3C,cAAc;EACE;CAClB,IACA;EAAC;EAAS;EAAO;EAAU;CAAc,CAC3C;CAGA,MAAM,iBAAiB,cAAc;EAEnC,MAAM,oBAAoB,OAAO,gBAAgB,CAAC;EAClD,MAAM,cAAc,QAAQ;EAE5B,MAAM,yBADc,OAAe,QAAQ,gBAAgB,CAAC,EACpB,CAAC,gBAAgB,CAAC;EAG1D,MAAM,eAAe;GACnB,YAAY,sBAAsB,cAAc,kBAAkB,cAAc;GAChF,aAAa,sBAAsB,eAAe,kBAAkB,eAAe;GACnF,2BAA2B,kBAAkB,6BAA6B;GAC1E,eAAe,kBAAkB,iBAAiB;GAClD,gBAAgB,kBAAkB,kBAAkB;EACtD;EAGA,MAAM,sBAAsB,UAAmB,aAA2B;GACxE,IAAI,CAAC,UAAU,OAAO;GAEtB,IAAI,OAAO,aAAa,UAAU,OAAO;GACzC,IAAI,OAAO,aAAa,UAAU,OAAO,GAAG,SAAS;GAErD,OAAO;EACT;EAEA,OAAO;GACL,WAAW,WAAW,iBAAiB;GACvC,sBAAsB,WAAW,iBAAiB,SAAS;GAC3D,2BAA2B,WAAW,iBAAiB,aAAa;GACpE,qBAAqB,OAAO,cAAc,YAAY,WAAW,SAAS,kBAAkB;GAC5F,iBAAiB,WAAW,iBAAiB,kBAAkB;GAC/D,qBAAqB,aAAa;GAClC,6BAA6B,WAAW,iBACpC,aAAa,cAAc,aAAa,4BACxC,aAAa;GACjB,oBAAoB,aAAa;GACjC,mBAAmB,WAAW,iBAAiB,aAAa,gBAAgB,aAAa;GACzF,cAAc,WAAW,eAAe,WAAW;GACnD,iBAAiB,mBAAmB,WAAW,cAAc,GAAG;EAClE;CACF,GAAG;EAAC;EAAY;EAAO;EAAK;EAAQ;CAAI,CAAC;CAGzC,MAAM,aAAa,cACX,WAAW,eAAe,wBAChC,CAAC,eAAe,oBAAoB,CACtC;CAGA,MAAM,eAAe,kBAAkB;EACrC,MAAM,mBAAmB,CAAC,WAAW;EAGrC,IAAI,gBAAgB,CAAC,aAAa,UAAU,WAAW,cAAc,GACnE;EAIF,gBAAgB,gBAAgB;CAClC,GAAG;EAAC,WAAW;EAAgB;EAAc;CAAa,CAAC;CAG3D,MAAM,kBAAkB,aACrB,SAA8B;EAE7B,IAAI,gBAAgB,MAAM,MAAM;GAC9B,MAAM,oBAAoB,aAAa,cAAc,WAAW,cAAc;GAC9E,IAAI,OAAO,sBAAsB,aAAa,sBAAsB,WAAW,gBAC7E,gBAAgB,iBAAiB;EAErC;EAEA,MAAM,UAAU;EAEhB,IAAI,MAAM,MAAM,aAAa,KAAK,IAAI;CACxC,GACA;EAAC;EAAY;EAAc,WAAW;EAAgB;CAAa,CACrE;CAGA,MAAM,oBAAoB,cAAc;EACtC,QAAQ,SAAS,CAAC,EAAC,CAAE,QAAoC,UAAU,MAAM,UAAU;GACjF,MAAM,SAAS,KAAK,UAAU,KAAK,QAAQ,mBAAmB,KAAK,OAAO,KAAK,SAAS,CAAC,KAAK,QAAQ;GACtG,SAAS,gBAAgB,gBAAgB,IAAI;GAC7C,OAAO;EACT,GAAG,CAAC,CAAC;CACP,GAAG,CAAC,OAAO,eAAe,CAAC;CAG3B,MAAM,gBAAgB,cAAc;EAClC,IAAI,CAAC,WAAW,iBAAiB,OAAO;EAExC,OAAO,OAAO,OAAO,MAA2B,UAAkB;GAEhE,MAAM,SAAS,KAAK,UAAU,KAAK,QAAQ,mBAAmB,KAAK,OAAO,KAAK,SAAS,CAAC,KAAK,QAAQ;GAKtG,OACE,oBAAC,gBAAD;IACE,UAJuB,KAAK,aAAa,SAAY,KAAK,WAAW,aAAa,MAAM,QAAQ,EAAE;IAKlG,UAAU,KAAK;IAEP;IACR,OAAO,KAAK,SAAS;IACrB,GAAI;IACJ,SAAS,kBAAkB;GAC5B,GALM,MAKN;EAEL,CAAC;CACH,GAAG;EAAC,WAAW;EAAiB,WAAW;EAAgB;EAAO;EAAU;CAAiB,CAAC;CAG9F,MAAM,aAAa,cAEf,GACE,gBACA,iBAAiB,WACjB,WAAW,kBAAkB,0BAC7B,CAAC,WAAW,kBAAkB,2BAC9B,WAAW,UAAU,sBACrB,WAAW,gBAAgB,wBAC3B,SACF,GACF;EAAC;EAAS;EAAY;CAAS,CACjC;CAGA,MAAM,iBAAiB,eACd;EACL,WAAW;EACX,eAAe;EACf,WAAW;EACX,UAAU,eAAe;EACzB;EACA,KAAK,eAAe;EACpB,oBAAoB;EACpB,oBAAoB;EACpB,GAAG,eAAe;EAElB,GAAG,OAAO;EACV,GAAG;CACL,IACA;EACE;EACA,eAAe;EACf,eAAe;EACf,eAAe;EACf;EACA,OAAO;EACP;CACF,CACF;CAGA,MAAM,oBAAoB,eACjB;EACL,iBAAiB,WAAW;EAC5B,cAAc,eAAe;EAC7B,QAAQ;EACR,cAAc;EACd,gBAAgB,eAAe;EAC/B,WAAW,GAAG,eAAe,mBAAmB;EAChD,UAAU;EACV,SAAS;EACT,IAAI,eAAe;EACnB,IAAI,GAAG,eAAe,4BAA4B;EAClD,MAAM;EACN,SAAS,eAAe;EACxB,GAAG,eAAe;EAClB,YAAY;EACZ,YAAY,OAAO,cAAc,cAAc;CACjD,IACA;EACE,eAAe;EACf,eAAe;EACf,eAAe;EACf,eAAe;EACf,eAAe;EACf,eAAe;EACf,eAAe;EACf,WAAW;EACX;EACA,OAAO;CACT,CACF;CAEA,OACE,qBAAC,KAAD;EAAK,WAAU;EAAI,GAAI;YAAvB,CACE,oBAAC,KAAD;GACE,WAAU;GACV,eAAc;GACd,UAAU;GACV,gBAAe;GACf;GACA,WAAU;GACV,WAAU;GACV,GAAE;GACF,MAAK;GACL,cAAW;aAEV;EACE,IAEL,oBAAC,KAAD;GACE,WAAU;GACV,gBAAgB,WAAW,iBAAiB,aAAa;GACzD,WAAU;aAEV,oBAAC,QAAD;IAAqC,GAAI;cACvC,oBAAC,MAAD;KAAM,MAAM;KAAY,MAAK;KAAK,eAAY;IAAQ;GAChD,GAFI,wBAEJ;EACL,EACF;;AAET,CAAC;AAKD,WAAW,OAAO;AAClB,WAAW,MAAM;AACjB,WAAW,cAAc"}

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

@@ -67,7 +67,7 @@ type SidemenuItemV2Props = BoxProps & {
   title: string; /** Subtitle or description */
   subtitle?: string; /** Tooltip content (shown when collapsed) */
   tooltip?: string | ReactNode; /** Badge configuration */
-  badge?: Pick<BadgeProps, 'text' | 'variant'>;
+  badge?: Pick<BadgeProps, 'label' | 'variant' | 'color'>;
   badgeLinkUrl?: string; /** Keyboard shortcut display */
   shortcut?: string; /** Item visibility @default true */
   visible?: boolean; /** Item priority for sorting @default 0 */

package/dist/sidemenuV2/theme.js

@@ -138,5 +138,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=theme.js.map

package/dist/sidemenuV2/useSidemenuItem.js

@@ -34,5 +34,5 @@ const useSidemenuItem = (itemId) => {
 
 //#endregion
 export { useSidemenuItem as default };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=useSidemenuItem.js.map

package/dist/skeleton/skeleton.js

@@ -30,5 +30,5 @@ Skeleton.displayName = "Skeleton";
 
 //#endregion
 export { SkeletonBase, Skeleton as default };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# 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          aria-hidden=\"true\"\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,KAAK;CACjE,MAAM,SAAS,eAAe,YAAY,KAAK;CAE/C,MAAM,MAAM,MAAM,MAAM,EAAE,KAAK,CAAC;CAEhC,MAAM,eAAe,gBAAgB,EACnC,GAAG,MAAM,YAAY,WAAW,OAAO,IAAI,OAC7C,CAAC;CAED,OACE,0CACG,IAAI,KAAK,GAAG,MACX,oBAAC,cAAD;EACE,eAAY;EACZ,WAAW,GAAG,gBAAgB,SAAS;EAElC;EACL,GAAI;EACJ,GAAI;EACJ,GAAI;CACL,GALM,CAKN,CACF,EACD;AAEN,CAAC;AAED,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          aria-hidden=\"true\"\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,KAAK;CACjE,MAAM,SAAS,eAAe,YAAY,KAAK;CAE/C,MAAM,MAAM,MAAM,MAAM,CAAC,CAAC,KAAK,CAAC;CAEhC,MAAM,eAAe,gBAAgB,EACnC,GAAG,MAAM,YAAY,WAAW,OAAO,IAAI,OAC7C,CAAC;CAED,OACE,0CACG,IAAI,KAAK,GAAG,MACX,oBAAC,cAAD;EACE,eAAY;EACZ,WAAW,GAAG,gBAAgB,SAAS;EAElC;EACL,GAAI;EACJ,GAAI;EACJ,GAAI;CACL,GALM,CAKN,CACF,EACD;AAEN,CAAC;AAED,SAAS,cAAc"}