@veracity/vui 4.0.3 → 5.0.0-alpha.375407.2603121328

package/dist/select/select.js

@@ -31,7 +31,7 @@ function Select(props) {
 		selectedText,
 		children
 	});
-	if (__DEV__ && isMultiple && !Array.isArray(selectProps.value)) console.error("<Select /> is used with isMultiple but its value is not an array: ", value);
+	if (true && isMultiple && !Array.isArray(selectProps.value)) console.error("<Select /> is used with isMultiple but its value is not an array: ", value);
 	const generatedId = useId();
 	const [query, setQuery] = useState("");
 	const [filteredOptions, setFilteredOptions] = useState(options);
@@ -117,5 +117,5 @@ Select.displayName = "Select";
 
 //#endregion
 export { Select as default };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# 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                    iconLeft=\"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;EAAU,CAAC;AAE7G,KAAI,WAAW,cAAc,CAAC,MAAM,QAAQ,YAAY,MAAM,CAC5D,SAAQ,MAAM,sEAAsE,MAAM;CAE5F,MAAM,cAAc,OAAO;CAC3B,MAAM,CAAC,OAAO,YAAY,SAAiB,GAAG;CAC9C,MAAM,CAAC,iBAAiB,sBAAsB,SAAS,QAAQ;CAE/D,MAAM,KAAK,UAAU;CAErB,MAAM,UAAU;EACd;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,GAAG;EACJ;CACD,MAAM,iBAAiB,MAAmB,SAAS,EAAE,OAAO,OAAO,aAAa,CAAC;CAEjF,MAAM,iBAAiB,MACrB,CAAC,qBAAqB,CAAC,OAAO,SAAS,OAAO,GAAG,MAAM,aAAa,EAAE,SAAS,MAAM;AAEvF,iBAAgB;AACd,qBAAmB,SAAS,OAAO,cAAc,CAAC;IACjD,CAAC,OAAO,QAAQ,CAAC;AAEpB,QACE,oBAAC;EAAe,OAAO;YACrB,qBAAC;GAAI,WAAU;GAAsB;GAAO,GAAI;;IAC7C,CAAC,CAAC,SACD,oBAAC;KACW;KACN;KACG;KACY;KACD;MAClB;IAEJ,oBAAC;KAAoB;KAAqB;KAAiB;eACzD,8CACG,gBAAgB,oBAAC,gBAAa,GAAI,oBAAqB,EACxD,qBAAC;MAAc,UAAS;iBACrB,qBACC,oBAAC,iBACC,oBAAC;OACC,UAAS;OACL;OACJ,GAAG;OACH,IAAI;OACJ,UAAU;OACV,aAAY;OACN;OACN,OAAO;OACP,GAAE;QACF,GACE,EAER,oBAAC;OAAY,MAAM;OAAW,WAAU;OAAO,UAAU;iBACtD,YACC,iBAAiB,OAAM,WACrB,oBAAC;QAA4B;QAAkC,OAAO,OAAO;QAAM,GAAI;UAAtC,OAAO,MAAyC,CACjG;QACQ;OACA,IACf;MACK;IACT,CAAC,CAAC,YAAY,oBAAC;KAAS,MAAM,aAAa;eAAQ;MAAoB;IACvE,CAAC,CAAC,aACD,oBAAC;KAAS;KAAQ,MAAM,aAAa;eAClC;MACQ;;IAET;GACS;;AAIrB,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                    iconLeft=\"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;EAAU,CAAC;AAE7G,aAAe,cAAc,CAAC,MAAM,QAAQ,YAAY,MAAM,CAC5D,SAAQ,MAAM,sEAAsE,MAAM;CAE5F,MAAM,cAAc,OAAO;CAC3B,MAAM,CAAC,OAAO,YAAY,SAAiB,GAAG;CAC9C,MAAM,CAAC,iBAAiB,sBAAsB,SAAS,QAAQ;CAE/D,MAAM,KAAK,UAAU;CAErB,MAAM,UAAU;EACd;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,GAAG;EACJ;CACD,MAAM,iBAAiB,MAAmB,SAAS,EAAE,OAAO,OAAO,aAAa,CAAC;CAEjF,MAAM,iBAAiB,MACrB,CAAC,qBAAqB,CAAC,OAAO,SAAS,OAAO,GAAG,MAAM,aAAa,EAAE,SAAS,MAAM;AAEvF,iBAAgB;AACd,qBAAmB,SAAS,OAAO,cAAc,CAAC;IACjD,CAAC,OAAO,QAAQ,CAAC;AAEpB,QACE,oBAAC,gBAAD;EAAgB,OAAO;YACrB,qBAAC,KAAD;GAAK,WAAU;GAAsB;GAAO,GAAI;aAAhD;IACG,CAAC,CAAC,SACD,oBAAC,aAAD;KACY;KACN;KACG;KACY;KACD;KAClB;IAEJ,oBAAC,SAAD;KAAqB;KAAqB;KAAiB;eACzD,8CACG,gBAAgB,oBAAC,cAAD,EAAc,GAAI,mBAAqB,GACxD,qBAAC,eAAD;MAAe,UAAS;gBAAxB,CACG,qBACC,oBAAC,KAAD,YACE,oBAAC,OAAD;OACE,UAAS;OACL;OACJ,GAAG;OACH,IAAI;OACJ,UAAU;OACV,aAAY;OACN;OACN,OAAO;OACP,GAAE;OACF,GACE,GAER,oBAAC,aAAD;OAAa,MAAM;OAAW,WAAU;OAAO,UAAU;iBACtD,YACC,iBAAiB,OAAM,WACrB,oBAAC,cAAD;QAA6B;QAAkC,OAAO,OAAO;QAAM,GAAI;QAAU,EAAhD,OAAO,MAAyC,CACjG;OACQ,EACA;QACf;KACK;IACT,CAAC,CAAC,YAAY,oBAAC,UAAD;KAAU,MAAM,aAAa;eAAQ;KAAoB;IACvE,CAAC,CAAC,aACD,oBAAC,UAAD;KAAU;KAAQ,MAAM,aAAa;eAClC;KACQ;IAET;;EACS;;AAIrB,OAAO,SAAS;AAChB,OAAO,UAAU;AACjB,OAAO,QAAQ;AACf,OAAO,SAAS;AAChB,OAAO,cAAc"}

package/dist/select/select.types.d.ts

@@ -1,12 +1,8 @@
 import { ThemingProps } from "../theme/types.js";
 import { SystemProps } from "../system/system.js";
-import "../system/index.js";
 import { ListItemProps, ListProps } from "../list/list.types.js";
-import "../list/index.js";
 import { ButtonProps } from "../button/button.types.js";
-import "../button/index.js";
 import { PopoverContentProps, PopoverProps } from "../popover/popover.types.js";
-import "../popover/index.js";
 import { UseSelectProps } from "./useSelect.types.js";
 import { UseSelectReturnType } from "./useSelect.js";
 import { ReactNode } from "react";

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

@@ -1 +1 @@
-{"version":3,"file":"select.types.d.ts","names":[],"sources":["../../src/select/select.types.ts"],"mappings":";;;;;;;;;;;;;;KAUY,iBAAA,GAAoB,WAAA;AAAA,KAEpB,kBAAA,GAAqB,mBAAA;AAAA,KAErB,aAAA,GAAgB,IAAA,CAC1B,WAAA,oHAGA,mBAAA;AAAA,KAEU,gBAAA,GAAmB,SAAA;AAAA,KAEnB,WAAA,GAAc,YAAA,aACxB,WAAA,GACA,YAAA,GACA,cAAA;2DAEE,QAAA,YAjByB;EAmBzB,aAAA,YAnB4B;EAqB5B,SAAA,YAAqB,KAAA,CAAM,SAAA,EAnBnB;EAqBR,QAAA,GAAW,KAAA,CAAM,SAAA;EAEjB,EAAA,WAvBgD;EAyBhD,SAAA,YAvBqB;EAyBrB,SAAA,WAxBF;EA0BE,IAAA,WAvBF;EAyBE,KAAA,YAAiB,KAAA,CAAM,SAAA,EAzBN;EA2BjB,iBAAA,YA9BF;EAgCE,gBAAA,WA7BiB;EA+BjB,UAAA,YA7BQ;EA+BR,OAAA,GAAU,gBAAA;EAEV,WAAA,WAjCoC;EAmCpC,YAAA,WAjCmB;EAmCnB,QAAA,YAnCsB;EAqCtB,YAAA,GAAe,SAAA,EAnCjB;EAqCE,iBAAA;AAAA;AAAA,KAGQ,gBAAA;EArBS,uCAuBnB,QAAA,YAPiB;EASjB,IAAA,UAT0B;EAW1B,KAAA,EAAO,WAAA;AAAA;AAAA,KAGG,iBAAA,GAAoB,aAAA;EAhD9B,+CAkDA,aAAA,YA9CE;EAgDF,KAAA,GAAQ,WAAA,EA9Ce;EAgDvB,KAAA;AAAA;AAAA,KAGU,gBAAA,GAAmB,IAAA,CAAK,WAAA;AAAA,KAExB,WAAA"}
+{"version":3,"file":"select.types.d.ts","names":[],"sources":["../../src/select/select.types.ts"],"mappings":";;;;;;;;;;KAUY,iBAAA,GAAoB,WAAA;AAAA,KAEpB,kBAAA,GAAqB,mBAAA;AAAA,KAErB,aAAA,GAAgB,IAAA,CAC1B,WAAA,oHAGA,mBAAA;AAAA,KAEU,gBAAA,GAAmB,SAAA;AAAA,KAEnB,WAAA,GAAc,YAAA,aACxB,WAAA,GACA,YAAA,GACA,cAAA;2DAEE,QAAA,YAjBQ;EAmBR,aAAA;EAEA,SAAA,YAAqB,KAAA,CAAM,SAAA,EArBY;EAuBvC,QAAA,GAAW,KAAA,CAAM,SAAA,WArBS;EAuB1B,EAAA,WAvB6B;EAyB7B,SAAA,YAvBQ;EAyBR,SAAA;EAEA,IAAA,WA3BwB;EA6BxB,KAAA,YAAiB,KAAA,CAAM,SAAA,EAzBN;EA2BjB,iBAAA,YA/BwB;EAiCxB,gBAAA,WA7BF;EA+BE,UAAA,YA/BiB;EAiCjB,OAAA,GAAU,gBAAA,IA/Bc;EAiCxB,WAAA,WAjC2B;EAmC3B,YAAA,WAjCQ;EAmCR,QAAA;EAEA,YAAA,GAAe,SAAA,EApCjB;EAsCE,iBAAA;AAAA;AAAA,KAGQ,gBAAA;EA/BG,uCAiCb,QAAA,YAfY;EAiBZ,IAAA,UAT0B;EAW1B,KAAA,EAAO,WAAA;AAAA;AAAA,KAGG,iBAAA,GAAoB,aAAA;EAjD9B,+CAmDA,aAAA,YAhDE;EAkDF,KAAA,GAAQ,WAAA,EA9CN;EAgDF,KAAA;AAAA;AAAA,KAGU,gBAAA,GAAmB,IAAA,CAAK,WAAA;AAAA,KAExB,WAAA"}

package/dist/select/selectButton.d.ts

@@ -1,7 +1,5 @@
 import { VuiComponent } from "../core/vui.js";
 import { ButtonProps } from "../button/button.types.js";
-import "../index.js";
-
 //#region src/select/selectButton.d.ts
 /**
  * Displays a custom button component, which opens a popover on click.

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

@@ -1 +1 @@
-{"version":3,"file":"selectButton.d.ts","names":[],"sources":["../../src/select/selectButton.tsx"],"mappings":";;;;;;;;;;cAYa,YAAA,EAAY,YAAA,WAkEvB,WAAA"}
+{"version":3,"file":"selectButton.d.ts","names":[],"sources":["../../src/select/selectButton.tsx"],"mappings":";;;;;;;;cAYa,YAAA,EAAY,YAAA,WAkEvB,WAAA"}

package/dist/select/selectButton.js

@@ -74,5 +74,5 @@ SelectButton.displayName = "SelectButton";
 
 //#endregion
 export { SelectButton as default };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=selectButton.js.map

package/dist/select/selectButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"selectButton.js","names":[],"sources":["../../src/select/selectButton.tsx"],"sourcesContent":["import Button, { LineButton } from '../button'\nimport { useStyleConfig, vui } from '../core'\nimport { PopoverTrigger } from '../popover'\nimport { cs, ellipsisOverflow } from '../utils'\nimport { useSelectContext } from './context'\nimport type { SelectButtonProps } from './select.types'\n\n/**\n * Displays a custom button component, which opens a popover on click.\n * Text within the button is either selected value or placeholder.\n * Includes special styling for disabled, readOnly and invalid states.\n */\nexport const SelectButton = vui<'button', SelectButtonProps>((props, ref) => {\n  const { className, ...rest } = props\n  const { disabled, isInvalid, placeholder, readOnly, valueText } = useSelectContext() ?? {}\n  const styles = useStyleConfig('Select', useSelectContext())\n\n  const text = valueText || placeholder\n\n  const disabledProps = disabled\n    ? {\n        activeBg: 'sandstone.79',\n        cursor: 'not-allowed',\n        backgroundColor: 'sandstone.79',\n        borderColor: 'sandstone.79',\n        hoverBg: 'sandstone.79',\n        hoverBorderColor: 'sandstone.79',\n        activeBorderColor: 'sandstone.79',\n      }\n    : undefined\n\n  const readOnlyProps = readOnly\n    ? {\n        activeBg: 'sandstone.95',\n        bg: 'sandstone.95',\n        color: 'seaBlue.main',\n        cursor: 'auto',\n        disabled: true,\n        hoverBg: 'sandstone.95',\n        opacity: 1,\n      }\n    : undefined\n\n  const isInvalidProps = isInvalid\n    ? {\n        borderColor: 'energyRed.45',\n        hoverBorderColor: 'energyRed.45',\n      }\n    : undefined\n\n  const textColor = 'sandstone.10'\n  const iconColor = disabled ? 'sandstone.10' : 'seaBlue.main'\n\n  return (\n    <PopoverTrigger\n      as={LineButton}\n      bg=\"white\"\n      className={cs('vui-selectButton', className)}\n      disabled={disabled}\n      focusRing={2}\n      fontWeight=\"regular\"\n      iconRight={<Button.Icon color={iconColor} ml=\"auto\" name=\"uiAngleDown\" />}\n      isFullWidth\n      px={1}\n      ref={ref}\n      text={\n        <Button.Text color={textColor} {...ellipsisOverflow}>\n          {text}\n        </Button.Text>\n      }\n      userSelect=\"text\"\n      {...styles.button}\n      {...disabledProps}\n      {...readOnlyProps}\n      {...isInvalidProps}\n      {...rest}\n    />\n  )\n})\n\nSelectButton.displayName = 'SelectButton'\nexport default SelectButton\n"],"mappings":";;;;;;;;;;;;;;;AAYA,MAAa,eAAe,KAAkC,OAAO,QAAQ;CAC3E,MAAM,EAAE,WAAW,GAAG,SAAS;CAC/B,MAAM,EAAE,UAAU,WAAW,aAAa,UAAU,cAAc,kBAAkB,IAAI,EAAE;CAC1F,MAAM,SAAS,eAAe,UAAU,kBAAkB,CAAC;CAE3D,MAAM,OAAO,aAAa;CAE1B,MAAM,gBAAgB,WAClB;EACE,UAAU;EACV,QAAQ;EACR,iBAAiB;EACjB,aAAa;EACb,SAAS;EACT,kBAAkB;EAClB,mBAAmB;EACpB,GACD;CAEJ,MAAM,gBAAgB,WAClB;EACE,UAAU;EACV,IAAI;EACJ,OAAO;EACP,QAAQ;EACR,UAAU;EACV,SAAS;EACT,SAAS;EACV,GACD;CAEJ,MAAM,iBAAiB,YACnB;EACE,aAAa;EACb,kBAAkB;EACnB,GACD;CAEJ,MAAM,YAAY;CAClB,MAAM,YAAY,WAAW,iBAAiB;AAE9C,QACE,oBAAC;EACC,IAAI;EACJ,IAAG;EACH,WAAW,GAAG,oBAAoB,UAAU;EAClC;EACV,WAAW;EACX,YAAW;EACX,WAAW,oBAAC,OAAO;GAAK,OAAO;GAAW,IAAG;GAAO,MAAK;IAAgB;EACzE;EACA,IAAI;EACC;EACL,MACE,oBAAC,OAAO;GAAK,OAAO;GAAW,GAAI;aAChC;IACW;EAEhB,YAAW;EACX,GAAI,OAAO;EACX,GAAI;EACJ,GAAI;EACJ,GAAI;EACJ,GAAI;GACJ;EAEJ;AAEF,aAAa,cAAc"}
+{"version":3,"file":"selectButton.js","names":[],"sources":["../../src/select/selectButton.tsx"],"sourcesContent":["import Button, { LineButton } from '../button'\nimport { useStyleConfig, vui } from '../core'\nimport { PopoverTrigger } from '../popover'\nimport { cs, ellipsisOverflow } from '../utils'\nimport { useSelectContext } from './context'\nimport type { SelectButtonProps } from './select.types'\n\n/**\n * Displays a custom button component, which opens a popover on click.\n * Text within the button is either selected value or placeholder.\n * Includes special styling for disabled, readOnly and invalid states.\n */\nexport const SelectButton = vui<'button', SelectButtonProps>((props, ref) => {\n  const { className, ...rest } = props\n  const { disabled, isInvalid, placeholder, readOnly, valueText } = useSelectContext() ?? {}\n  const styles = useStyleConfig('Select', useSelectContext())\n\n  const text = valueText || placeholder\n\n  const disabledProps = disabled\n    ? {\n        activeBg: 'sandstone.79',\n        cursor: 'not-allowed',\n        backgroundColor: 'sandstone.79',\n        borderColor: 'sandstone.79',\n        hoverBg: 'sandstone.79',\n        hoverBorderColor: 'sandstone.79',\n        activeBorderColor: 'sandstone.79',\n      }\n    : undefined\n\n  const readOnlyProps = readOnly\n    ? {\n        activeBg: 'sandstone.95',\n        bg: 'sandstone.95',\n        color: 'seaBlue.main',\n        cursor: 'auto',\n        disabled: true,\n        hoverBg: 'sandstone.95',\n        opacity: 1,\n      }\n    : undefined\n\n  const isInvalidProps = isInvalid\n    ? {\n        borderColor: 'energyRed.45',\n        hoverBorderColor: 'energyRed.45',\n      }\n    : undefined\n\n  const textColor = 'sandstone.10'\n  const iconColor = disabled ? 'sandstone.10' : 'seaBlue.main'\n\n  return (\n    <PopoverTrigger\n      as={LineButton}\n      bg=\"white\"\n      className={cs('vui-selectButton', className)}\n      disabled={disabled}\n      focusRing={2}\n      fontWeight=\"regular\"\n      iconRight={<Button.Icon color={iconColor} ml=\"auto\" name=\"uiAngleDown\" />}\n      isFullWidth\n      px={1}\n      ref={ref}\n      text={\n        <Button.Text color={textColor} {...ellipsisOverflow}>\n          {text}\n        </Button.Text>\n      }\n      userSelect=\"text\"\n      {...styles.button}\n      {...disabledProps}\n      {...readOnlyProps}\n      {...isInvalidProps}\n      {...rest}\n    />\n  )\n})\n\nSelectButton.displayName = 'SelectButton'\nexport default SelectButton\n"],"mappings":";;;;;;;;;;;;;;;AAYA,MAAa,eAAe,KAAkC,OAAO,QAAQ;CAC3E,MAAM,EAAE,WAAW,GAAG,SAAS;CAC/B,MAAM,EAAE,UAAU,WAAW,aAAa,UAAU,cAAc,kBAAkB,IAAI,EAAE;CAC1F,MAAM,SAAS,eAAe,UAAU,kBAAkB,CAAC;CAE3D,MAAM,OAAO,aAAa;CAE1B,MAAM,gBAAgB,WAClB;EACE,UAAU;EACV,QAAQ;EACR,iBAAiB;EACjB,aAAa;EACb,SAAS;EACT,kBAAkB;EAClB,mBAAmB;EACpB,GACD;CAEJ,MAAM,gBAAgB,WAClB;EACE,UAAU;EACV,IAAI;EACJ,OAAO;EACP,QAAQ;EACR,UAAU;EACV,SAAS;EACT,SAAS;EACV,GACD;CAEJ,MAAM,iBAAiB,YACnB;EACE,aAAa;EACb,kBAAkB;EACnB,GACD;CAEJ,MAAM,YAAY;CAClB,MAAM,YAAY,WAAW,iBAAiB;AAE9C,QACE,oBAAC,gBAAD;EACE,IAAI;EACJ,IAAG;EACH,WAAW,GAAG,oBAAoB,UAAU;EAClC;EACV,WAAW;EACX,YAAW;EACX,WAAW,oBAAC,OAAO,MAAR;GAAa,OAAO;GAAW,IAAG;GAAO,MAAK;GAAgB;EACzE;EACA,IAAI;EACC;EACL,MACE,oBAAC,OAAO,MAAR;GAAa,OAAO;GAAW,GAAI;aAChC;GACW;EAEhB,YAAW;EACX,GAAI,OAAO;EACX,GAAI;EACJ,GAAI;EACJ,GAAI;EACJ,GAAI;EACJ;EAEJ;AAEF,aAAa,cAAc"}

package/dist/select/selectContent.d.ts

@@ -1,7 +1,5 @@
 import { VuiComponent } from "../core/vui.js";
 import { BoxProps } from "../box/box.types.js";
-import "../index.js";
-
 //#region src/select/selectContent.d.ts
 /** Extends PopoverContent to display given content is an overlaying box. */
 declare const SelectContent: VuiComponent<"div", BoxProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"selectContent.d.ts","names":[],"sources":["../../src/select/selectContent.tsx"],"mappings":";;;;;;cAOa,aAAA,EAAa,YAAA,QAcxB,QAAA"}
+{"version":3,"file":"selectContent.d.ts","names":[],"sources":["../../src/select/selectContent.tsx"],"mappings":";;;;cAOa,aAAA,EAAa,YAAA,QAcxB,QAAA"}

package/dist/select/selectContent.js

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

package/dist/select/selectContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"selectContent.js","names":[],"sources":["../../src/select/selectContent.tsx"],"sourcesContent":["import { useStyleConfig, vui } from '../core'\nimport { PopoverContent } from '../popover'\nimport { cs } from '../utils'\nimport { useSelectContext } from './context'\nimport type { SelectContentProps } from './select.types'\n\n/** Extends PopoverContent to display given content is an overlaying box. */\nexport const SelectContent = vui<'div', SelectContentProps>((props, ref) => {\n  const { className, ...rest } = props\n  const styles = useStyleConfig('Select', useSelectContext())\n\n  return (\n    <PopoverContent\n      className={cs('vui-selectContent', className)}\n      column\n      py={1}\n      ref={ref}\n      {...styles.content}\n      {...rest}\n    />\n  )\n})\n\nSelectContent.displayName = 'SelectContent'\n\nexport default SelectContent\n"],"mappings":";;;;;;;;;AAOA,MAAa,gBAAgB,KAAgC,OAAO,QAAQ;CAC1E,MAAM,EAAE,WAAW,GAAG,SAAS;CAC/B,MAAM,SAAS,eAAe,UAAU,kBAAkB,CAAC;AAE3D,QACE,oBAAC;EACC,WAAW,GAAG,qBAAqB,UAAU;EAC7C;EACA,IAAI;EACC;EACL,GAAI,OAAO;EACX,GAAI;GACJ;EAEJ;AAEF,cAAc,cAAc"}
+{"version":3,"file":"selectContent.js","names":[],"sources":["../../src/select/selectContent.tsx"],"sourcesContent":["import { useStyleConfig, vui } from '../core'\nimport { PopoverContent } from '../popover'\nimport { cs } from '../utils'\nimport { useSelectContext } from './context'\nimport type { SelectContentProps } from './select.types'\n\n/** Extends PopoverContent to display given content is an overlaying box. */\nexport const SelectContent = vui<'div', SelectContentProps>((props, ref) => {\n  const { className, ...rest } = props\n  const styles = useStyleConfig('Select', useSelectContext())\n\n  return (\n    <PopoverContent\n      className={cs('vui-selectContent', className)}\n      column\n      py={1}\n      ref={ref}\n      {...styles.content}\n      {...rest}\n    />\n  )\n})\n\nSelectContent.displayName = 'SelectContent'\n\nexport default SelectContent\n"],"mappings":";;;;;;;;;AAOA,MAAa,gBAAgB,KAAgC,OAAO,QAAQ;CAC1E,MAAM,EAAE,WAAW,GAAG,SAAS;CAC/B,MAAM,SAAS,eAAe,UAAU,kBAAkB,CAAC;AAE3D,QACE,oBAAC,gBAAD;EACE,WAAW,GAAG,qBAAqB,UAAU;EAC7C;EACA,IAAI;EACC;EACL,GAAI,OAAO;EACX,GAAI;EACJ;EAEJ;AAEF,cAAc,cAAc"}

package/dist/select/selectGroup.d.ts

@@ -1,8 +1,6 @@
 import { VuiComponent } from "../core/vui.js";
-import "../core/index.js";
 import { ListDivider } from "../list/listDivider.js";
 import { ListHeading } from "../list/listHeading.js";
-import "../list/index.js";
 import { SelectGroupProps } from "./select.types.js";
 
 //#region src/select/selectGroup.d.ts

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

@@ -1 +1 @@
-{"version":3,"file":"selectGroup.d.ts","names":[],"sources":["../../src/select/selectGroup.tsx"],"mappings":";;;;;;;;;cAQa,WAAA,EAKP,YAAA,OAAmB,gBAAA;EACvB,OAAA,SAAgB,WAAA;EAChB,OAAA,SAAgB,WAAA;AAAA"}
+{"version":3,"file":"selectGroup.d.ts","names":[],"sources":["../../src/select/selectGroup.tsx"],"mappings":";;;;;;;cAQa,WAAA,EAKP,YAAA,OAAmB,gBAAA;EACvB,OAAA,SAAgB,WAAA;EAChB,OAAA,SAAgB,WAAA;AAAA"}

package/dist/select/selectGroup.js

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

package/dist/select/selectGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"selectGroup.js","names":[],"sources":["../../src/select/selectGroup.tsx"],"sourcesContent":["import type { VuiComponent } from '../core'\nimport { useStyleConfig, vui } from '../core'\nimport { List, ListDivider, ListHeading } from '../list'\nimport { cs } from '../utils'\nimport { useSelectContext } from './context'\nimport type { SelectGroupProps } from './select.types'\n\n/** Displays a list of options with optional heading to describe an individual group. */\nexport const SelectGroup = vui<'ul', SelectGroupProps>((props, ref) => {\n  const { className, ...rest } = props\n  const styles = useStyleConfig('Select', useSelectContext())\n\n  return <List className={cs('vui-selectGroup', 'vui-allowScroll', className)} ref={ref} {...styles.group} {...rest} />\n}) as VuiComponent<'ul', SelectGroupProps> & {\n  Divider: typeof ListDivider\n  Heading: typeof ListHeading\n}\n\nSelectGroup.Divider = ListDivider\nSelectGroup.Heading = ListHeading\n\nSelectGroup.displayName = 'SelectGroup'\n\nexport default SelectGroup\n"],"mappings":";;;;;;;;;;;AAQA,MAAa,cAAc,KAA6B,OAAO,QAAQ;CACrE,MAAM,EAAE,WAAW,GAAG,SAAS;CAC/B,MAAM,SAAS,eAAe,UAAU,kBAAkB,CAAC;AAE3D,QAAO,oBAAC;EAAK,WAAW,GAAG,mBAAmB,mBAAmB,UAAU;EAAO;EAAK,GAAI,OAAO;EAAO,GAAI;GAAQ;EACrH;AAKF,YAAY,UAAU;AACtB,YAAY,UAAU;AAEtB,YAAY,cAAc"}
+{"version":3,"file":"selectGroup.js","names":[],"sources":["../../src/select/selectGroup.tsx"],"sourcesContent":["import type { VuiComponent } from '../core'\nimport { useStyleConfig, vui } from '../core'\nimport { List, ListDivider, ListHeading } from '../list'\nimport { cs } from '../utils'\nimport { useSelectContext } from './context'\nimport type { SelectGroupProps } from './select.types'\n\n/** Displays a list of options with optional heading to describe an individual group. */\nexport const SelectGroup = vui<'ul', SelectGroupProps>((props, ref) => {\n  const { className, ...rest } = props\n  const styles = useStyleConfig('Select', useSelectContext())\n\n  return <List className={cs('vui-selectGroup', 'vui-allowScroll', className)} ref={ref} {...styles.group} {...rest} />\n}) as VuiComponent<'ul', SelectGroupProps> & {\n  Divider: typeof ListDivider\n  Heading: typeof ListHeading\n}\n\nSelectGroup.Divider = ListDivider\nSelectGroup.Heading = ListHeading\n\nSelectGroup.displayName = 'SelectGroup'\n\nexport default SelectGroup\n"],"mappings":";;;;;;;;;;;AAQA,MAAa,cAAc,KAA6B,OAAO,QAAQ;CACrE,MAAM,EAAE,WAAW,GAAG,SAAS;CAC/B,MAAM,SAAS,eAAe,UAAU,kBAAkB,CAAC;AAE3D,QAAO,oBAAC,MAAD;EAAM,WAAW,GAAG,mBAAmB,mBAAmB,UAAU;EAAO;EAAK,GAAI,OAAO;EAAO,GAAI;EAAQ;EACrH;AAKF,YAAY,UAAU;AACtB,YAAY,UAAU;AAEtB,YAAY,cAAc"}

package/dist/select/selectLabel.js

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

package/dist/select/selectLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"selectLabel.js","names":[],"sources":["../../src/select/selectLabel.tsx"],"sourcesContent":["import { useStyleConfig } from '../core'\nimport Label from '../label'\nimport { isString } from '../utils'\nimport { useSelectContext } from './context'\nimport type { SelectLabelProps } from './select.types'\n\nexport const SelectLabel = ({ disabled, id, label, labelMarkOptional, labelTooltipText }: SelectLabelProps) => {\n  const styles = useStyleConfig('Select', useSelectContext())\n  return isString(label) ? (\n    <Label\n      aria-disabled={disabled}\n      className=\"vui-input-label\"\n      htmlFor={id}\n      markAsOptional={labelMarkOptional}\n      mb={0.5}\n      text={label}\n      tooltipText={labelTooltipText}\n      {...styles.label}\n    />\n  ) : (\n    label\n  )\n}\n\nSelectLabel.displayName = 'SelectLabel'\n\nexport default SelectLabel\n"],"mappings":";;;;;;;AAMA,MAAa,eAAe,EAAE,UAAU,IAAI,OAAO,mBAAmB,uBAAyC;CAC7G,MAAM,SAAS,eAAe,UAAU,kBAAkB,CAAC;AAC3D,QAAO,SAAS,MAAM,GACpB,oBAAC;EACC,iBAAe;EACf,WAAU;EACV,SAAS;EACT,gBAAgB;EAChB,IAAI;EACJ,MAAM;EACN,aAAa;EACb,GAAI,OAAO;GACX,GAEF;;AAIJ,YAAY,cAAc"}
+{"version":3,"file":"selectLabel.js","names":[],"sources":["../../src/select/selectLabel.tsx"],"sourcesContent":["import { useStyleConfig } from '../core'\nimport Label from '../label'\nimport { isString } from '../utils'\nimport { useSelectContext } from './context'\nimport type { SelectLabelProps } from './select.types'\n\nexport const SelectLabel = ({ disabled, id, label, labelMarkOptional, labelTooltipText }: SelectLabelProps) => {\n  const styles = useStyleConfig('Select', useSelectContext())\n  return isString(label) ? (\n    <Label\n      aria-disabled={disabled}\n      className=\"vui-input-label\"\n      htmlFor={id}\n      markAsOptional={labelMarkOptional}\n      mb={0.5}\n      text={label}\n      tooltipText={labelTooltipText}\n      {...styles.label}\n    />\n  ) : (\n    label\n  )\n}\n\nSelectLabel.displayName = 'SelectLabel'\n\nexport default SelectLabel\n"],"mappings":";;;;;;;AAMA,MAAa,eAAe,EAAE,UAAU,IAAI,OAAO,mBAAmB,uBAAyC;CAC7G,MAAM,SAAS,eAAe,UAAU,kBAAkB,CAAC;AAC3D,QAAO,SAAS,MAAM,GACpB,oBAAC,OAAD;EACE,iBAAe;EACf,WAAU;EACV,SAAS;EACT,gBAAgB;EAChB,IAAI;EACJ,MAAM;EACN,aAAa;EACb,GAAI,OAAO;EACX,IAEF;;AAIJ,YAAY,cAAc"}

package/dist/select/selectOption.d.ts

@@ -1,7 +1,5 @@
 import { VuiComponent } from "../core/vui.js";
 import { SelectOptionProps } from "./select.types.js";
-import "../index.js";
-
 //#region src/select/selectOption.d.ts
 /**
  * Displays a select option as a list item. By default, closes popover when option is selected.

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

@@ -1 +1 @@
-{"version":3,"file":"selectOption.d.ts","names":[],"sources":["../../src/select/selectOption.tsx"],"mappings":";;;;;;;;;AAgBA;cAAa,YAAA,EAAY,YAAA,OAAA,iBAAA"}
+{"version":3,"file":"selectOption.d.ts","names":[],"sources":["../../src/select/selectOption.tsx"],"mappings":";;;;;;;AAgBA;cAAa,YAAA,EAAY,YAAA,OAAA,iBAAA"}

package/dist/select/selectOption.js

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

package/dist/select/selectOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"selectOption.js","names":[],"sources":["../../src/select/selectOption.tsx"],"sourcesContent":["import { useEffect } from 'react'\n\nimport { Checkbox } from '../checkbox'\nimport { useStyleConfig, vui } from '../core'\nimport { List, ListItem } from '../list'\nimport { usePopoverContext } from '../popover'\nimport type { KeyboardEvent, MouseEvent } from '../utils'\nimport { cs, ellipsisOverflow, useCallbackRef } from '../utils'\nimport { useSelectContext } from './context'\nimport type { SelectOptionProps } from './select.types'\n\n/**\n * Displays a select option as a list item. By default, closes popover when option is selected.\n * In multi-select mode, displays a checkbox and doesn't close popover.\n * 'onChange' is triggered with a modified click event, which adds 'value' and 'name' properties.\n */\nexport const SelectOption = vui<'li', SelectOptionProps>((props, ref) => {\n  const { children, closeOnScroll, className, disabled, title, onClick: onClickProp, value: valueProp, ...rest } = props\n  const { close } = usePopoverContext() ?? {}\n  const { isMultiple, name, onChange, value } = useSelectContext() ?? {}\n  const styles = useStyleConfig('Select', useSelectContext())\n\n  const isSelected = Array.isArray(value) && valueProp ? value.includes(valueProp) : value === valueProp\n\n  const hide = () => close?.()\n\n  const onClick = useCallbackRef((e: MouseEvent<HTMLLIElement> | KeyboardEvent<HTMLLIElement>) => {\n    const nativeEvent = e.nativeEvent || e\n    const clonedEvent = new (nativeEvent.constructor as any)(nativeEvent.type, nativeEvent)\n\n    Object.defineProperty(clonedEvent, 'target', {\n      writable: true,\n      value: { value: valueProp, name },\n    })\n\n    onClickProp?.(e as MouseEvent<HTMLLIElement>)\n    onChange?.(clonedEvent)\n    !isMultiple && hide()\n  })\n\n  const onKeyDown = useCallbackRef((e: KeyboardEvent<HTMLLIElement>) => e.key === 'Enter' && onClick(e))\n\n  const onScroll = (e: Event) => !(e.target as HTMLElement)?.className?.includes('vui-allowScroll') && hide()\n\n  // Hiding the popover on scroll\n  useEffect(() => {\n    if (closeOnScroll) document.addEventListener('scroll', onScroll, true)\n\n    return () => {\n      if (closeOnScroll) document.removeEventListener('scroll', onScroll, true)\n    }\n  }, [closeOnScroll])\n\n  return (\n    <ListItem\n      activeBg=\"skyBlue.active\"\n      className={cs('vui-selectOption', className)}\n      disabled={disabled}\n      hoverBg=\"skyBlue.hover\"\n      isInteractive\n      isSelected={isSelected}\n      onClick={onClick}\n      onKeyDown={onKeyDown}\n      ref={ref}\n      selectedBg=\"skyBlue.selected\"\n      tabIndex={0}\n      title={title}\n      value={valueProp}\n      {...styles.option}\n      {...rest}\n      {...ellipsisOverflow}\n    >\n      {children ??\n        (isMultiple && (\n          <>\n            <Checkbox checked={isSelected} disabled={disabled} mr={1} {...styles.option} />\n            <List.Text>{props.text}</List.Text>\n          </>\n        ))}\n    </ListItem>\n  )\n})\n\nSelectOption.displayName = 'SelectOption'\n\nexport default SelectOption\n"],"mappings":";;;;;;;;;;;;;;;;;;AAgBA,MAAa,eAAe,KAA8B,OAAO,QAAQ;CACvE,MAAM,EAAE,UAAU,eAAe,WAAW,UAAU,OAAO,SAAS,aAAa,OAAO,WAAW,GAAG,SAAS;CACjH,MAAM,EAAE,UAAU,mBAAmB,IAAI,EAAE;CAC3C,MAAM,EAAE,YAAY,MAAM,UAAU,UAAU,kBAAkB,IAAI,EAAE;CACtE,MAAM,SAAS,eAAe,UAAU,kBAAkB,CAAC;CAE3D,MAAM,aAAa,MAAM,QAAQ,MAAM,IAAI,YAAY,MAAM,SAAS,UAAU,GAAG,UAAU;CAE7F,MAAM,aAAa,SAAS;CAE5B,MAAM,UAAU,gBAAgB,MAAgE;EAC9F,MAAM,cAAc,EAAE,eAAe;EACrC,MAAM,cAAc,IAAK,YAAY,YAAoB,YAAY,MAAM,YAAY;AAEvF,SAAO,eAAe,aAAa,UAAU;GAC3C,UAAU;GACV,OAAO;IAAE,OAAO;IAAW;IAAM;GAClC,CAAC;AAEF,gBAAc,EAA+B;AAC7C,aAAW,YAAY;AACvB,GAAC,cAAc,MAAM;GACrB;CAEF,MAAM,YAAY,gBAAgB,MAAoC,EAAE,QAAQ,WAAW,QAAQ,EAAE,CAAC;CAEtG,MAAM,YAAY,MAAa,CAAE,EAAE,QAAwB,WAAW,SAAS,kBAAkB,IAAI,MAAM;AAG3G,iBAAgB;AACd,MAAI,cAAe,UAAS,iBAAiB,UAAU,UAAU,KAAK;AAEtE,eAAa;AACX,OAAI,cAAe,UAAS,oBAAoB,UAAU,UAAU,KAAK;;IAE1E,CAAC,cAAc,CAAC;AAEnB,QACE,oBAAC;EACC,UAAS;EACT,WAAW,GAAG,oBAAoB,UAAU;EAClC;EACV,SAAQ;EACR;EACY;EACH;EACE;EACN;EACL,YAAW;EACX,UAAU;EACH;EACP,OAAO;EACP,GAAI,OAAO;EACX,GAAI;EACJ,GAAI;YAEH,aACE,cACC,8CACE,oBAAC;GAAS,SAAS;GAAsB;GAAU,IAAI;GAAG,GAAI,OAAO;IAAU,EAC/E,oBAAC,KAAK,kBAAM,MAAM,OAAiB,IAClC;GAEE;EAEb;AAEF,aAAa,cAAc"}
+{"version":3,"file":"selectOption.js","names":[],"sources":["../../src/select/selectOption.tsx"],"sourcesContent":["import { useEffect } from 'react'\n\nimport { Checkbox } from '../checkbox'\nimport { useStyleConfig, vui } from '../core'\nimport { List, ListItem } from '../list'\nimport { usePopoverContext } from '../popover'\nimport type { KeyboardEvent, MouseEvent } from '../utils'\nimport { cs, ellipsisOverflow, useCallbackRef } from '../utils'\nimport { useSelectContext } from './context'\nimport type { SelectOptionProps } from './select.types'\n\n/**\n * Displays a select option as a list item. By default, closes popover when option is selected.\n * In multi-select mode, displays a checkbox and doesn't close popover.\n * 'onChange' is triggered with a modified click event, which adds 'value' and 'name' properties.\n */\nexport const SelectOption = vui<'li', SelectOptionProps>((props, ref) => {\n  const { children, closeOnScroll, className, disabled, title, onClick: onClickProp, value: valueProp, ...rest } = props\n  const { close } = usePopoverContext() ?? {}\n  const { isMultiple, name, onChange, value } = useSelectContext() ?? {}\n  const styles = useStyleConfig('Select', useSelectContext())\n\n  const isSelected = Array.isArray(value) && valueProp ? value.includes(valueProp) : value === valueProp\n\n  const hide = () => close?.()\n\n  const onClick = useCallbackRef((e: MouseEvent<HTMLLIElement> | KeyboardEvent<HTMLLIElement>) => {\n    const nativeEvent = e.nativeEvent || e\n    const clonedEvent = new (nativeEvent.constructor as any)(nativeEvent.type, nativeEvent)\n\n    Object.defineProperty(clonedEvent, 'target', {\n      writable: true,\n      value: { value: valueProp, name },\n    })\n\n    onClickProp?.(e as MouseEvent<HTMLLIElement>)\n    onChange?.(clonedEvent)\n    !isMultiple && hide()\n  })\n\n  const onKeyDown = useCallbackRef((e: KeyboardEvent<HTMLLIElement>) => e.key === 'Enter' && onClick(e))\n\n  const onScroll = (e: Event) => !(e.target as HTMLElement)?.className?.includes('vui-allowScroll') && hide()\n\n  // Hiding the popover on scroll\n  useEffect(() => {\n    if (closeOnScroll) document.addEventListener('scroll', onScroll, true)\n\n    return () => {\n      if (closeOnScroll) document.removeEventListener('scroll', onScroll, true)\n    }\n  }, [closeOnScroll])\n\n  return (\n    <ListItem\n      activeBg=\"skyBlue.active\"\n      className={cs('vui-selectOption', className)}\n      disabled={disabled}\n      hoverBg=\"skyBlue.hover\"\n      isInteractive\n      isSelected={isSelected}\n      onClick={onClick}\n      onKeyDown={onKeyDown}\n      ref={ref}\n      selectedBg=\"skyBlue.selected\"\n      tabIndex={0}\n      title={title}\n      value={valueProp}\n      {...styles.option}\n      {...rest}\n      {...ellipsisOverflow}\n    >\n      {children ??\n        (isMultiple && (\n          <>\n            <Checkbox checked={isSelected} disabled={disabled} mr={1} {...styles.option} />\n            <List.Text>{props.text}</List.Text>\n          </>\n        ))}\n    </ListItem>\n  )\n})\n\nSelectOption.displayName = 'SelectOption'\n\nexport default SelectOption\n"],"mappings":";;;;;;;;;;;;;;;;;;AAgBA,MAAa,eAAe,KAA8B,OAAO,QAAQ;CACvE,MAAM,EAAE,UAAU,eAAe,WAAW,UAAU,OAAO,SAAS,aAAa,OAAO,WAAW,GAAG,SAAS;CACjH,MAAM,EAAE,UAAU,mBAAmB,IAAI,EAAE;CAC3C,MAAM,EAAE,YAAY,MAAM,UAAU,UAAU,kBAAkB,IAAI,EAAE;CACtE,MAAM,SAAS,eAAe,UAAU,kBAAkB,CAAC;CAE3D,MAAM,aAAa,MAAM,QAAQ,MAAM,IAAI,YAAY,MAAM,SAAS,UAAU,GAAG,UAAU;CAE7F,MAAM,aAAa,SAAS;CAE5B,MAAM,UAAU,gBAAgB,MAAgE;EAC9F,MAAM,cAAc,EAAE,eAAe;EACrC,MAAM,cAAc,IAAK,YAAY,YAAoB,YAAY,MAAM,YAAY;AAEvF,SAAO,eAAe,aAAa,UAAU;GAC3C,UAAU;GACV,OAAO;IAAE,OAAO;IAAW;IAAM;GAClC,CAAC;AAEF,gBAAc,EAA+B;AAC7C,aAAW,YAAY;AACvB,GAAC,cAAc,MAAM;GACrB;CAEF,MAAM,YAAY,gBAAgB,MAAoC,EAAE,QAAQ,WAAW,QAAQ,EAAE,CAAC;CAEtG,MAAM,YAAY,MAAa,CAAE,EAAE,QAAwB,WAAW,SAAS,kBAAkB,IAAI,MAAM;AAG3G,iBAAgB;AACd,MAAI,cAAe,UAAS,iBAAiB,UAAU,UAAU,KAAK;AAEtE,eAAa;AACX,OAAI,cAAe,UAAS,oBAAoB,UAAU,UAAU,KAAK;;IAE1E,CAAC,cAAc,CAAC;AAEnB,QACE,oBAAC,UAAD;EACE,UAAS;EACT,WAAW,GAAG,oBAAoB,UAAU;EAClC;EACV,SAAQ;EACR;EACY;EACH;EACE;EACN;EACL,YAAW;EACX,UAAU;EACH;EACP,OAAO;EACP,GAAI,OAAO;EACX,GAAI;EACJ,GAAI;YAEH,aACE,cACC,8CACE,oBAAC,UAAD;GAAU,SAAS;GAAsB;GAAU,IAAI;GAAG,GAAI,OAAO;GAAU,GAC/E,oBAAC,KAAK,MAAN,YAAY,MAAM,MAAiB,EAClC;EAEE;EAEb;AAEF,aAAa,cAAc"}

package/dist/select/theme.js

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

package/dist/select/useSelect.d.ts

@@ -1,5 +1,4 @@
 import { ChangeEvent } from "../utils/types.js";
-import "../utils/index.js";
 import { UseSelectProps } from "./useSelect.types.js";
 import { SelectOptionData, SelectValue } from "./select.types.js";
 

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

@@ -1 +1 @@
-{"version":3,"file":"useSelect.d.ts","names":[],"sources":["../../src/select/useSelect.tsx"],"mappings":";;;;;;cAOa,aAAA,GAAiB,KAAA,EAAO,WAAA,EAAa,OAAA,EAAS,gBAAA,OAAkB,WAAA;;iBAOrD,SAAA,CAAU,KAAA,EAAO,cAAA;gBAyBH,WAAA;;;;KAqB1B,mBAAA,GAAsB,UAAA,QAAkB,SAAA"}
+{"version":3,"file":"useSelect.d.ts","names":[],"sources":["../../src/select/useSelect.tsx"],"mappings":";;;;;cAOa,aAAA,GAAiB,KAAA,EAAO,WAAA,EAAa,OAAA,EAAS,gBAAA,OAAkB,WAAA;;iBAOrD,SAAA,CAAU,KAAA,EAAO,cAAA;gBAyBH,WAAA;;;;KAqB1B,mBAAA,GAAsB,UAAA,QAAkB,SAAA"}

package/dist/select/useSelect.js

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

package/dist/select/useSelect.types.d.ts

@@ -1,7 +1,5 @@
 import { ChangeEvent } from "../utils/types.js";
-import "../utils/index.js";
 import { ButtonProps } from "../button/button.types.js";
-import "../button/index.js";
 import { SelectOptionData, SelectValue } from "./select.types.js";
 import { ReactNode } from "react";
 

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

@@ -1 +1 @@
-{"version":3,"file":"useSelect.types.d.ts","names":[],"sources":["../../src/select/useSelect.types.ts"],"mappings":";;;;;;;;KAMY,cAAA;qDAEV,KAAA,GAAQ,WAAA,GAAc,WAAA;EAEtB,YAAA,GAAe,WAAA,GAAc,WAAA,IAJL;EAMxB,UAAA,YAJQ;EAMR,OAAA,GAAU,gBAAA,IAJK;EAMf,QAAA,GAAW,SAAA,EAFD;EAIV,iBAAA,GAAoB,WAAA,EAAA;EAEpB,YAAA;EAO0B;;;;;;EAA1B,QAAA,IAAY,CAAA,EAAG,WAAA;AAAA"}
+{"version":3,"file":"useSelect.types.d.ts","names":[],"sources":["../../src/select/useSelect.types.ts"],"mappings":";;;;;;KAMY,cAAA;qDAEV,KAAA,GAAQ,WAAA,GAAc,WAAA;EAEtB,YAAA,GAAe,WAAA,GAAc,WAAA,IAJL;EAMxB,UAAA,YAJQ;EAMR,OAAA,GAAU,gBAAA,IAJK;EAMf,QAAA,GAAW,SAAA,EAFD;EAIV,iBAAA,GAAoB,WAAA,EAAA;EAEpB,YAAA;EAO0B;;;;;;EAA1B,QAAA,IAAY,CAAA,EAAG,WAAA;AAAA"}

package/dist/sidemenu/context.js

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

package/dist/sidemenu/sidemenu.d.ts

@@ -1,5 +1,4 @@
 import { VuiComponent } from "../core/vui.js";
-import "../core/index.js";
 import { SidemenuProps } from "./sidemenu.types.js";
 import { SidemenuItem } from "./sidemenuItem.js";
 import { SidemenuTop } from "./sidemenuTop.js";

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

@@ -1 +1 @@
-{"version":3,"file":"sidemenu.d.ts","names":[],"sources":["../../src/sidemenu/sidemenu.tsx"],"mappings":";;;;;;;;cAea,QAAA,EA6FP,YAAA,QAAoB,aAAA;EACxB,GAAA,SAAY,WAAA;EACZ,IAAA,SAAa,YAAA;AAAA"}
+{"version":3,"file":"sidemenu.d.ts","names":[],"sources":["../../src/sidemenu/sidemenu.tsx"],"mappings":";;;;;;;cAea,QAAA,EA6FP,YAAA,QAAoB,aAAA;EACxB,GAAA,SAAY,WAAA;EACZ,IAAA,SAAa,YAAA;AAAA"}

package/dist/sidemenu/sidemenu.js

@@ -6,7 +6,6 @@ import vui from "../core/vui.js";
 import Box from "../box/box.js";
 import Icon from "../icon/icon.js";
 import Button from "../button/button.js";
-import { collapsedWidth, expandedWidth } from "./consts.js";
 import { SidemenuProvider } from "./context.js";
 import SidemenuItem from "./sidemenuItem.js";
 import SidemenuTop from "./sidemenuTop.js";
@@ -16,7 +15,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/sidemenu/sidemenu.tsx
 /** A collapsible side menu for navigation. */
 const Sidemenu = vui((props, ref) => {
-	const { children, className, items, isExpanded = false, isSticky = false, size, variant, width = expandedWidth, onNavigate, ...rest } = props;
+	const { children, className, items, isExpanded = false, isSticky = false, size, variant, width = 240, onNavigate, ...rest } = props;
 	const [isExpandedHorizontally, setIsExpandedHorizontally] = useState(isExpanded);
 	const context = useMemo(() => filterUndefined({
 		size,
@@ -33,7 +32,7 @@ const Sidemenu = vui((props, ref) => {
 		setIsExpandedHorizontally(isExpanded);
 	}, [isExpanded]);
 	const onToggle = () => setIsExpandedHorizontally(!isExpandedHorizontally);
-	const w = isExpandedHorizontally ? width : collapsedWidth;
+	const w = isExpandedHorizontally ? width : 52;
 	const icon = `falArrow${isExpandedHorizontally ? "Left" : "Right"}`;
 	const justifyContent = isExpandedHorizontally ? "flex-end" : "center";
 	function onItemClick(item) {
@@ -59,7 +58,7 @@ const Sidemenu = vui((props, ref) => {
 				flexDirection: "column",
 				flexGrow: 1,
 				justifyContent: "flex-start",
-				minW: expandedWidth,
+				minW: 240,
 				overflowX: "hidden",
 				overflowY: "auto",
 				w: "100%",
@@ -94,5 +93,5 @@ Sidemenu.displayName = "Sidemenu";
 
 //#endregion
 export { Sidemenu as default };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=sidemenu.js.map

package/dist/sidemenu/sidemenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidemenu.js","names":[],"sources":["../../src/sidemenu/sidemenu.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react'\n\nimport Box from '../box'\nimport Button from '../button'\nimport type { VuiComponent } from '../core'\nimport { useStyleConfig, vui } from '../core'\nimport Icon from '../icon'\nimport { cs, filterUndefined, isActivePath } from '../utils'\nimport { collapsedWidth, expandedWidth } from './consts'\nimport { SidemenuProvider } from './context'\nimport type { SidemenuItemProps, SidemenuProps } from './sidemenu.types'\nimport SidemenuItem from './sidemenuItem'\nimport SidemenuTop from './sidemenuTop'\n\n/** A collapsible side menu for navigation. */\nexport const Sidemenu = vui<'div', SidemenuProps>((props, ref) => {\n  const {\n    children,\n    className,\n    items,\n    isExpanded = false,\n    isSticky = false,\n    size,\n    variant,\n    width = expandedWidth,\n    onNavigate,\n    ...rest\n  } = props\n\n  const [isExpandedHorizontally, setIsExpandedHorizontally] = useState(isExpanded)\n  const context = useMemo(\n    () => filterUndefined({ size, variant, isExpandedHorizontally }),\n    [size, variant, isExpandedHorizontally],\n  )\n\n  const styles = useStyleConfig('Sidemenu', props)\n\n  const isDark = variant === 'dark'\n\n  useEffect(() => {\n    setIsExpandedHorizontally(isExpanded)\n  }, [isExpanded])\n\n  const onToggle = () => setIsExpandedHorizontally(!isExpandedHorizontally)\n\n  const w = isExpandedHorizontally ? width : collapsedWidth\n  const icon = `falArrow${isExpandedHorizontally ? 'Left' : 'Right'}`\n  const justifyContent = isExpandedHorizontally ? 'flex-end' : 'center'\n\n  function onItemClick(item: SidemenuItemProps) {\n    item?.onClick?.()\n    if (item?.path) onNavigate?.(item.path)\n  }\n\n  return (\n    <SidemenuProvider value={context}>\n      <Box\n        className={cs('vui-sidemenu', className)}\n        elevation=\"3\"\n        flexDirection=\"column\"\n        minWidth={0}\n        overflowX=\"hidden\"\n        position={isSticky ? 'sticky' : 'static'}\n        ref={ref}\n        top={isSticky ? (top ? top : 0) : 'auto'}\n        transitionDuration=\"normal\"\n        w={w}\n        {...styles.container}\n        {...rest}\n      >\n        <Box\n          flexDirection=\"column\"\n          flexGrow={1}\n          justifyContent=\"flex-start\"\n          minW={expandedWidth}\n          overflowX=\"hidden\"\n          overflowY=\"auto\"\n          w=\"100%\"\n        >\n          {items\n            ? items?.map?.((item: SidemenuItemProps, key: number) => (\n                <SidemenuItem\n                  isActive={isActivePath(item?.path)}\n                  key={key}\n                  {...item}\n                  onClick={() => onItemClick(item)}\n                />\n              ))\n            : children}\n        </Box>\n        <Box className=\"vui-sidemenu-bottom\" w=\"100%\" {...styles.bottom}>\n          <Button\n            aria-label={isExpandedHorizontally ? 'Collapse' : 'Expand'}\n            borderRadius={0}\n            justifyContent={justifyContent}\n            minH={size === 'lg' ? '56px' : '40px'}\n            onClick={onToggle}\n            pl={0}\n            size=\"md\"\n            variant={isDark ? 'tertiaryLight' : 'tertiaryDark'}\n            w=\"100%\"\n          >\n            <Icon name={icon} />\n          </Button>\n        </Box>\n      </Box>\n    </SidemenuProvider>\n  )\n}) as VuiComponent<'div', SidemenuProps> & {\n  Top: typeof SidemenuTop\n  Item: typeof SidemenuItem\n}\n\nSidemenu.Top = SidemenuTop\nSidemenu.Item = SidemenuItem\nSidemenu.displayName = 'Sidemenu'\n\nexport default Sidemenu\n"],"mappings":";;;;;;;;;;;;;;;;;AAeA,MAAa,WAAW,KAA2B,OAAO,QAAQ;CAChE,MAAM,EACJ,UACA,WACA,OACA,aAAa,OACb,WAAW,OACX,MACA,SACA,QAAQ,eACR,YACA,GAAG,SACD;CAEJ,MAAM,CAAC,wBAAwB,6BAA6B,SAAS,WAAW;CAChF,MAAM,UAAU,cACR,gBAAgB;EAAE;EAAM;EAAS;EAAwB,CAAC,EAChE;EAAC;EAAM;EAAS;EAAuB,CACxC;CAED,MAAM,SAAS,eAAe,YAAY,MAAM;CAEhD,MAAM,SAAS,YAAY;AAE3B,iBAAgB;AACd,4BAA0B,WAAW;IACpC,CAAC,WAAW,CAAC;CAEhB,MAAM,iBAAiB,0BAA0B,CAAC,uBAAuB;CAEzE,MAAM,IAAI,yBAAyB,QAAQ;CAC3C,MAAM,OAAO,WAAW,yBAAyB,SAAS;CAC1D,MAAM,iBAAiB,yBAAyB,aAAa;CAE7D,SAAS,YAAY,MAAyB;AAC5C,QAAM,WAAW;AACjB,MAAI,MAAM,KAAM,cAAa,KAAK,KAAK;;AAGzC,QACE,oBAAC;EAAiB,OAAO;YACvB,qBAAC;GACC,WAAW,GAAG,gBAAgB,UAAU;GACxC,WAAU;GACV,eAAc;GACd,UAAU;GACV,WAAU;GACV,UAAU,WAAW,WAAW;GAC3B;GACL,KAAK,WAAY,MAAM,MAAM,IAAK;GAClC,oBAAmB;GAChB;GACH,GAAI,OAAO;GACX,GAAI;cAEJ,oBAAC;IACC,eAAc;IACd,UAAU;IACV,gBAAe;IACf,MAAM;IACN,WAAU;IACV,WAAU;IACV,GAAE;cAED,QACG,OAAO,OAAO,MAAyB,QACrC,oBAAC;KACC,UAAU,aAAa,MAAM,KAAK;KAElC,GAAI;KACJ,eAAe,YAAY,KAAK;OAF3B,IAGL,CACF,GACF;KACA,EACN,oBAAC;IAAI,WAAU;IAAsB,GAAE;IAAO,GAAI,OAAO;cACvD,oBAAC;KACC,cAAY,yBAAyB,aAAa;KAClD,cAAc;KACE;KAChB,MAAM,SAAS,OAAO,SAAS;KAC/B,SAAS;KACT,IAAI;KACJ,MAAK;KACL,SAAS,SAAS,kBAAkB;KACpC,GAAE;eAEF,oBAAC,QAAK,MAAM,OAAQ;MACb;KACL;IACF;GACW;EAErB;AAKF,SAAS,MAAM;AACf,SAAS,OAAO;AAChB,SAAS,cAAc"}
+{"version":3,"file":"sidemenu.js","names":[],"sources":["../../src/sidemenu/sidemenu.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react'\n\nimport Box from '../box'\nimport Button from '../button'\nimport type { VuiComponent } from '../core'\nimport { useStyleConfig, vui } from '../core'\nimport Icon from '../icon'\nimport { cs, filterUndefined, isActivePath } from '../utils'\nimport { collapsedWidth, expandedWidth } from './consts'\nimport { SidemenuProvider } from './context'\nimport type { SidemenuItemProps, SidemenuProps } from './sidemenu.types'\nimport SidemenuItem from './sidemenuItem'\nimport SidemenuTop from './sidemenuTop'\n\n/** A collapsible side menu for navigation. */\nexport const Sidemenu = vui<'div', SidemenuProps>((props, ref) => {\n  const {\n    children,\n    className,\n    items,\n    isExpanded = false,\n    isSticky = false,\n    size,\n    variant,\n    width = expandedWidth,\n    onNavigate,\n    ...rest\n  } = props\n\n  const [isExpandedHorizontally, setIsExpandedHorizontally] = useState(isExpanded)\n  const context = useMemo(\n    () => filterUndefined({ size, variant, isExpandedHorizontally }),\n    [size, variant, isExpandedHorizontally],\n  )\n\n  const styles = useStyleConfig('Sidemenu', props)\n\n  const isDark = variant === 'dark'\n\n  useEffect(() => {\n    setIsExpandedHorizontally(isExpanded)\n  }, [isExpanded])\n\n  const onToggle = () => setIsExpandedHorizontally(!isExpandedHorizontally)\n\n  const w = isExpandedHorizontally ? width : collapsedWidth\n  const icon = `falArrow${isExpandedHorizontally ? 'Left' : 'Right'}`\n  const justifyContent = isExpandedHorizontally ? 'flex-end' : 'center'\n\n  function onItemClick(item: SidemenuItemProps) {\n    item?.onClick?.()\n    if (item?.path) onNavigate?.(item.path)\n  }\n\n  return (\n    <SidemenuProvider value={context}>\n      <Box\n        className={cs('vui-sidemenu', className)}\n        elevation=\"3\"\n        flexDirection=\"column\"\n        minWidth={0}\n        overflowX=\"hidden\"\n        position={isSticky ? 'sticky' : 'static'}\n        ref={ref}\n        top={isSticky ? (top ? top : 0) : 'auto'}\n        transitionDuration=\"normal\"\n        w={w}\n        {...styles.container}\n        {...rest}\n      >\n        <Box\n          flexDirection=\"column\"\n          flexGrow={1}\n          justifyContent=\"flex-start\"\n          minW={expandedWidth}\n          overflowX=\"hidden\"\n          overflowY=\"auto\"\n          w=\"100%\"\n        >\n          {items\n            ? items?.map?.((item: SidemenuItemProps, key: number) => (\n                <SidemenuItem\n                  isActive={isActivePath(item?.path)}\n                  key={key}\n                  {...item}\n                  onClick={() => onItemClick(item)}\n                />\n              ))\n            : children}\n        </Box>\n        <Box className=\"vui-sidemenu-bottom\" w=\"100%\" {...styles.bottom}>\n          <Button\n            aria-label={isExpandedHorizontally ? 'Collapse' : 'Expand'}\n            borderRadius={0}\n            justifyContent={justifyContent}\n            minH={size === 'lg' ? '56px' : '40px'}\n            onClick={onToggle}\n            pl={0}\n            size=\"md\"\n            variant={isDark ? 'tertiaryLight' : 'tertiaryDark'}\n            w=\"100%\"\n          >\n            <Icon name={icon} />\n          </Button>\n        </Box>\n      </Box>\n    </SidemenuProvider>\n  )\n}) as VuiComponent<'div', SidemenuProps> & {\n  Top: typeof SidemenuTop\n  Item: typeof SidemenuItem\n}\n\nSidemenu.Top = SidemenuTop\nSidemenu.Item = SidemenuItem\nSidemenu.displayName = 'Sidemenu'\n\nexport default Sidemenu\n"],"mappings":";;;;;;;;;;;;;;;;AAeA,MAAa,WAAW,KAA2B,OAAO,QAAQ;CAChE,MAAM,EACJ,UACA,WACA,OACA,aAAa,OACb,WAAW,OACX,MACA,SACA,aACA,YACA,GAAG,SACD;CAEJ,MAAM,CAAC,wBAAwB,6BAA6B,SAAS,WAAW;CAChF,MAAM,UAAU,cACR,gBAAgB;EAAE;EAAM;EAAS;EAAwB,CAAC,EAChE;EAAC;EAAM;EAAS;EAAuB,CACxC;CAED,MAAM,SAAS,eAAe,YAAY,MAAM;CAEhD,MAAM,SAAS,YAAY;AAE3B,iBAAgB;AACd,4BAA0B,WAAW;IACpC,CAAC,WAAW,CAAC;CAEhB,MAAM,iBAAiB,0BAA0B,CAAC,uBAAuB;CAEzE,MAAM,IAAI,yBAAyB;CACnC,MAAM,OAAO,WAAW,yBAAyB,SAAS;CAC1D,MAAM,iBAAiB,yBAAyB,aAAa;CAE7D,SAAS,YAAY,MAAyB;AAC5C,QAAM,WAAW;AACjB,MAAI,MAAM,KAAM,cAAa,KAAK,KAAK;;AAGzC,QACE,oBAAC,kBAAD;EAAkB,OAAO;YACvB,qBAAC,KAAD;GACE,WAAW,GAAG,gBAAgB,UAAU;GACxC,WAAU;GACV,eAAc;GACd,UAAU;GACV,WAAU;GACV,UAAU,WAAW,WAAW;GAC3B;GACL,KAAK,WAAY,MAAM,MAAM,IAAK;GAClC,oBAAmB;GAChB;GACH,GAAI,OAAO;GACX,GAAI;aAZN,CAcE,oBAAC,KAAD;IACE,eAAc;IACd,UAAU;IACV,gBAAe;IACf;IACA,WAAU;IACV,WAAU;IACV,GAAE;cAED,QACG,OAAO,OAAO,MAAyB,QACrC,oBAAC,cAAD;KACE,UAAU,aAAa,MAAM,KAAK;KAElC,GAAI;KACJ,eAAe,YAAY,KAAK;KAChC,EAHK,IAGL,CACF,GACF;IACA,GACN,oBAAC,KAAD;IAAK,WAAU;IAAsB,GAAE;IAAO,GAAI,OAAO;cACvD,oBAAC,QAAD;KACE,cAAY,yBAAyB,aAAa;KAClD,cAAc;KACE;KAChB,MAAM,SAAS,OAAO,SAAS;KAC/B,SAAS;KACT,IAAI;KACJ,MAAK;KACL,SAAS,SAAS,kBAAkB;KACpC,GAAE;eAEF,oBAAC,MAAD,EAAM,MAAM,MAAQ;KACb;IACL,EACF;;EACW;EAErB;AAKF,SAAS,MAAM;AACf,SAAS,OAAO;AAChB,SAAS,cAAc"}

package/dist/sidemenu/sidemenu.types.d.ts

@@ -1,10 +1,7 @@
 import { ThemingProps } from "../theme/types.js";
 import { SystemProps } from "../system/system.js";
-import "../system/index.js";
 import { IconProp } from "../icon/icon.types.js";
-import "../icon/index.js";
 import { BoxProps } from "../box/box.types.js";
-import "../box/index.js";
 import { ReactNode } from "react";
 
 //#region src/sidemenu/sidemenu.types.d.ts

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

@@ -1 +1 @@
-{"version":3,"file":"sidemenu.types.d.ts","names":[],"sources":["../../src/sidemenu/sidemenu.types.ts"],"mappings":";;;;;;;;;;KAOY,mBAAA;AAAA,KAEA,aAAA,GAAgB,WAAA,GAC1B,YAAA;kCAEE,KAAA,GAAQ,iBAAA;EAER,UAAA;EACA,QAAA;EAEA,UAAA,IAAc,EAAA,mBAVa;EAY3B,KAAA;AAAA;AAAA,KAGQ,iBAAA,GAAoB,QAAA;EAbJ,wBAe1B,SAAA,WAZU;EAcV,QAAA,GAAW,SAAA,EAdgB;EAgB3B,IAAA,GAAO,QAAA,EAlBP;EAoBA,QAAA,gBAlBU;EAoBV,QAAA,YAjBE;EAmBF,UAAA,YAjBgB;EAmBhB,OAAA,eAjBO;EAmBP,UAAA,eAhBU;EAkBV,QAAA;EAEA,IAAA,WAhBW;EAkBX,KAAA;AAAA;AAAA,KAGU,gBAAA,GAAmB,QAAA;EAzBC,wBA2B9B,SAAA,WAvBA;EAyBA,QAAA,GAAW,SAAA,EAvBX;EAyBA,SAAA,GAAY,SAAA;AAAA"}
+{"version":3,"file":"sidemenu.types.d.ts","names":[],"sources":["../../src/sidemenu/sidemenu.types.ts"],"mappings":";;;;;;;KAOY,mBAAA;AAAA,KAEA,aAAA,GAAgB,WAAA,GAC1B,YAAA;kCAEE,KAAA,GAAQ,iBAAA;EAER,UAAA;EACA,QAAA,YAR2B;EAU3B,UAAA,IAAc,EAAA,mBAVa;EAY3B,KAAA;AAAA;AAAA,KAGQ,iBAAA,GAAoB,QAAA;0BAE9B,SAAA,WAdA;EAgBA,QAAA,GAAW,SAAA,EAdgB;EAgB3B,IAAA,GAAO,QAAA,EAnBmB;EAqB1B,QAAA,gBAlBE;EAoBF,QAAA,YAlBE;EAoBF,UAAA,YAjBE;EAmBF,OAAA,eAjBE;EAmBF,UAAA,eAnBO;EAqBP,QAAA,eAlB2B;EAoB3B,IAAA,WApB8B;EAsB9B,KAAA;AAAA;AAAA,KAGU,gBAAA,GAAmB,QAAA;EAnBd,wBAqBf,SAAA,WAzBA;EA2BA,QAAA,GAAW,SAAA,EAzBA;EA2BX,SAAA,GAAY,SAAA;AAAA"}

package/dist/sidemenu/sidemenuItem.d.ts

@@ -1,5 +1,4 @@
 import { VuiComponent } from "../core/vui.js";
-import "../core/index.js";
 import { SidemenuItemProps } from "./sidemenu.types.js";
 
 //#region src/sidemenu/sidemenuItem.d.ts

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

@@ -1 +1 @@
-{"version":3,"file":"sidemenuItem.d.ts","names":[],"sources":["../../src/sidemenu/sidemenuItem.tsx"],"mappings":";;;;;;cAgBa,YAAA,EAqGP,YAAA,QAAoB,iBAAA"}
+{"version":3,"file":"sidemenuItem.d.ts","names":[],"sources":["../../src/sidemenu/sidemenuItem.tsx"],"mappings":";;;;;cAgBa,YAAA,EAqGP,YAAA,QAAoB,iBAAA"}

package/dist/sidemenu/sidemenuItem.js

@@ -6,7 +6,6 @@ import Icon from "../icon/icon.js";
 import T from "../t/t.js";
 import Button from "../button/button.js";
 import Popover from "../popover/popover.js";
-import { collapsedWidth, expandedWidth } from "./consts.js";
 import useSidemenuItem from "./useSidemenuItem.js";
 import { useEffect } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -68,7 +67,7 @@ const SidemenuItem = vui((props, ref) => {
 		ref,
 		w: "100%",
 		children: [!hasChildrenExpanded && children ? /* @__PURE__ */ jsxs(Popover, {
-			offset: [0, collapsedWidth - expandedWidth - 2],
+			offset: [0, 52 - 240 - 2],
 			placement: "right-start",
 			trigger: "mouseenter",
 			children: [/* @__PURE__ */ jsx(Popover.Trigger, {
@@ -111,5 +110,5 @@ SidemenuItem.displayName = "SidemenuItem";
 
 //#endregion
 export { SidemenuItem as default };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=sidemenuItem.js.map

package/dist/sidemenu/sidemenuItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidemenuItem.js","names":[],"sources":["../../src/sidemenu/sidemenuItem.tsx"],"sourcesContent":["import type { MouseEvent } from 'react'\nimport { useEffect } from 'react'\n\nimport Box from '../box'\nimport Button from '../button'\nimport type { VuiComponent } from '../core'\nimport { omitThemingProps, vui } from '../core'\nimport Icon from '../icon'\nimport { Popover } from '../popover'\nimport T from '../t'\nimport { cs } from '../utils'\nimport { collapsedWidth, expandedWidth } from './consts'\nimport type { SidemenuItemProps } from './sidemenu.types'\nimport useSidemenuItem from './useSidemenuItem'\n\n/** A menu item. */\nexport const SidemenuItem = vui<'button', SidemenuItemProps>((props, ref) => {\n  const {\n    className,\n    children,\n    icon,\n    iconSize = 'md',\n    isActive,\n    isExpanded = true,\n    pl = 0,\n    py = 0,\n    onClick,\n    onCollapse,\n    onExpand,\n    title,\n    ...rest\n  } = omitThemingProps(props)\n\n  const { isExpandedVertically, setIsExpandedVertically, isDark, size, isExpandedHorizontally, styles } =\n    useSidemenuItem(isExpanded)\n\n  useEffect(() => {\n    if (isExpandedVertically) onExpand?.()\n    if (!isExpandedVertically) onCollapse?.()\n  }, [isExpandedVertically])\n\n  const hasChildrenExpanded = !!children && isExpandedHorizontally\n\n  const InnerContent = () => (\n    <Box centerV px={1.5} py={1} w=\"100%\" whiteSpace=\"pre\">\n      <Icon ml={iconSize === 'sm' ? '4px' : 0} name={icon} size={iconSize} />\n      <T isTruncated ml={2}>\n        {title}\n      </T>\n    </Box>\n  )\n\n  const toggle = (e: MouseEvent<HTMLButtonElement>) => {\n    e.preventDefault()\n    e.stopPropagation()\n    setIsExpandedVertically(!isExpandedVertically)\n  }\n\n  const buttonStyles = {\n    alignItems: 'center',\n    border: 'none',\n    borderRadius: 0,\n    borderLeft: !hasChildrenExpanded && children ? 'none' : '3px solid transparent',\n    borderLeftColor: isActive ? (isDark ? 'digiGreen.main' : 'seaBlue.main') : undefined,\n    bg: isDark ? 'darkBlue.main' : isActive ? 'skyBlue.95' : 'white',\n    color: hasChildrenExpanded ? 'seaBlue.main' : isDark ? 'digiGreen.main' : 'sandstone.10',\n    h: 'auto',\n    justifyContent: 'space-between',\n    onClick: () => onClick?.(),\n    pl,\n    py,\n    size: 'md',\n    variant: isDark ? 'tertiaryLight' : 'tertiaryDark',\n    w: '100%',\n    ...styles.item,\n    minH: size === 'lg' ? '56px' : '40px',\n    hoverBg: isDark ? 'seaBlue.main' : 'skyBlue.90',\n    ...rest,\n  }\n\n  return (\n    <Box flexDirection=\"column\" ref={ref} w=\"100%\">\n      {!hasChildrenExpanded && children ? (\n        <Popover offset={[0, collapsedWidth - expandedWidth - 2]} placement=\"right-start\" trigger=\"mouseenter\">\n          <Popover.Trigger as={Box} className={cs('vui-sidemenu-item-popover', className)}>\n            <Box {...buttonStyles} borderLeft={`3px solid ${isDark ? 'digiGreen.main' : 'seaBlue.main'}`}>\n              <InnerContent />\n            </Box>\n          </Popover.Trigger>\n          <Popover.Content elevation=\"none\">\n            <Box flexDirection=\"column\" justifyContent=\"start\" w=\"100%\">\n              {children}\n            </Box>\n          </Popover.Content>\n        </Popover>\n      ) : (\n        <Button className={cs('vui-sidemenu-item', className)} {...buttonStyles}>\n          <InnerContent />\n          {hasChildrenExpanded && (\n            <Button\n              aria-label={isExpandedVertically ? 'Collapse' : 'Expand'}\n              className=\"vui-sidemenu-item-expand\"\n              icon={isExpandedVertically ? 'falChevronUp' : 'falChevronDown'}\n              onClick={toggle}\n              size=\"sm\"\n              variant={isDark ? 'tertiaryLight' : 'tertiaryDark'}\n            />\n          )}\n        </Button>\n      )}\n      {!!children && hasChildrenExpanded && isExpandedVertically && (\n        <Box flexDirection=\"column\" justifyContent=\"start\" w=\"100%\">\n          {children}\n        </Box>\n      )}\n    </Box>\n  )\n}) as VuiComponent<'div', SidemenuItemProps>\n\nSidemenuItem.displayName = 'SidemenuItem'\n\nexport default SidemenuItem\n"],"mappings":";;;;;;;;;;;;;;;AAgBA,MAAa,eAAe,KAAkC,OAAO,QAAQ;CAC3E,MAAM,EACJ,WACA,UACA,MACA,WAAW,MACX,UACA,aAAa,MACb,KAAK,GACL,KAAK,GACL,SACA,YACA,UACA,OACA,GAAG,SACD,iBAAiB,MAAM;CAE3B,MAAM,EAAE,sBAAsB,yBAAyB,QAAQ,MAAM,wBAAwB,WAC3F,gBAAgB,WAAW;AAE7B,iBAAgB;AACd,MAAI,qBAAsB,aAAY;AACtC,MAAI,CAAC,qBAAsB,eAAc;IACxC,CAAC,qBAAqB,CAAC;CAE1B,MAAM,sBAAsB,CAAC,CAAC,YAAY;CAE1C,MAAM,qBACJ,qBAAC;EAAI;EAAQ,IAAI;EAAK,IAAI;EAAG,GAAE;EAAO,YAAW;aAC/C,oBAAC;GAAK,IAAI,aAAa,OAAO,QAAQ;GAAG,MAAM;GAAM,MAAM;IAAY,EACvE,oBAAC;GAAE;GAAY,IAAI;aAChB;IACC;GACA;CAGR,MAAM,UAAU,MAAqC;AACnD,IAAE,gBAAgB;AAClB,IAAE,iBAAiB;AACnB,0BAAwB,CAAC,qBAAqB;;CAGhD,MAAM,eAAe;EACnB,YAAY;EACZ,QAAQ;EACR,cAAc;EACd,YAAY,CAAC,uBAAuB,WAAW,SAAS;EACxD,iBAAiB,WAAY,SAAS,mBAAmB,iBAAkB;EAC3E,IAAI,SAAS,kBAAkB,WAAW,eAAe;EACzD,OAAO,sBAAsB,iBAAiB,SAAS,mBAAmB;EAC1E,GAAG;EACH,gBAAgB;EAChB,eAAe,WAAW;EAC1B;EACA;EACA,MAAM;EACN,SAAS,SAAS,kBAAkB;EACpC,GAAG;EACH,GAAG,OAAO;EACV,MAAM,SAAS,OAAO,SAAS;EAC/B,SAAS,SAAS,iBAAiB;EACnC,GAAG;EACJ;AAED,QACE,qBAAC;EAAI,eAAc;EAAc;EAAK,GAAE;aACrC,CAAC,uBAAuB,WACvB,qBAAC;GAAQ,QAAQ,CAAC,GAAG,iBAAiB,gBAAgB,EAAE;GAAE,WAAU;GAAc,SAAQ;cACxF,oBAAC,QAAQ;IAAQ,IAAI;IAAK,WAAW,GAAG,6BAA6B,UAAU;cAC7E,oBAAC;KAAI,GAAI;KAAc,YAAY,aAAa,SAAS,mBAAmB;eAC1E,oBAAC,iBAAe;MACZ;KACU,EAClB,oBAAC,QAAQ;IAAQ,WAAU;cACzB,oBAAC;KAAI,eAAc;KAAS,gBAAe;KAAQ,GAAE;KAClD;MACG;KACU;IACV,GAEV,qBAAC;GAAO,WAAW,GAAG,qBAAqB,UAAU;GAAE,GAAI;cACzD,oBAAC,iBAAe,EACf,uBACC,oBAAC;IACC,cAAY,uBAAuB,aAAa;IAChD,WAAU;IACV,MAAM,uBAAuB,iBAAiB;IAC9C,SAAS;IACT,MAAK;IACL,SAAS,SAAS,kBAAkB;KACpC;IAEG,EAEV,CAAC,CAAC,YAAY,uBAAuB,wBACpC,oBAAC;GAAI,eAAc;GAAS,gBAAe;GAAQ,GAAE;GAClD;IACG;GAEJ;EAER;AAEF,aAAa,cAAc"}
+{"version":3,"file":"sidemenuItem.js","names":[],"sources":["../../src/sidemenu/sidemenuItem.tsx"],"sourcesContent":["import type { MouseEvent } from 'react'\nimport { useEffect } from 'react'\n\nimport Box from '../box'\nimport Button from '../button'\nimport type { VuiComponent } from '../core'\nimport { omitThemingProps, vui } from '../core'\nimport Icon from '../icon'\nimport { Popover } from '../popover'\nimport T from '../t'\nimport { cs } from '../utils'\nimport { collapsedWidth, expandedWidth } from './consts'\nimport type { SidemenuItemProps } from './sidemenu.types'\nimport useSidemenuItem from './useSidemenuItem'\n\n/** A menu item. */\nexport const SidemenuItem = vui<'button', SidemenuItemProps>((props, ref) => {\n  const {\n    className,\n    children,\n    icon,\n    iconSize = 'md',\n    isActive,\n    isExpanded = true,\n    pl = 0,\n    py = 0,\n    onClick,\n    onCollapse,\n    onExpand,\n    title,\n    ...rest\n  } = omitThemingProps(props)\n\n  const { isExpandedVertically, setIsExpandedVertically, isDark, size, isExpandedHorizontally, styles } =\n    useSidemenuItem(isExpanded)\n\n  useEffect(() => {\n    if (isExpandedVertically) onExpand?.()\n    if (!isExpandedVertically) onCollapse?.()\n  }, [isExpandedVertically])\n\n  const hasChildrenExpanded = !!children && isExpandedHorizontally\n\n  const InnerContent = () => (\n    <Box centerV px={1.5} py={1} w=\"100%\" whiteSpace=\"pre\">\n      <Icon ml={iconSize === 'sm' ? '4px' : 0} name={icon} size={iconSize} />\n      <T isTruncated ml={2}>\n        {title}\n      </T>\n    </Box>\n  )\n\n  const toggle = (e: MouseEvent<HTMLButtonElement>) => {\n    e.preventDefault()\n    e.stopPropagation()\n    setIsExpandedVertically(!isExpandedVertically)\n  }\n\n  const buttonStyles = {\n    alignItems: 'center',\n    border: 'none',\n    borderRadius: 0,\n    borderLeft: !hasChildrenExpanded && children ? 'none' : '3px solid transparent',\n    borderLeftColor: isActive ? (isDark ? 'digiGreen.main' : 'seaBlue.main') : undefined,\n    bg: isDark ? 'darkBlue.main' : isActive ? 'skyBlue.95' : 'white',\n    color: hasChildrenExpanded ? 'seaBlue.main' : isDark ? 'digiGreen.main' : 'sandstone.10',\n    h: 'auto',\n    justifyContent: 'space-between',\n    onClick: () => onClick?.(),\n    pl,\n    py,\n    size: 'md',\n    variant: isDark ? 'tertiaryLight' : 'tertiaryDark',\n    w: '100%',\n    ...styles.item,\n    minH: size === 'lg' ? '56px' : '40px',\n    hoverBg: isDark ? 'seaBlue.main' : 'skyBlue.90',\n    ...rest,\n  }\n\n  return (\n    <Box flexDirection=\"column\" ref={ref} w=\"100%\">\n      {!hasChildrenExpanded && children ? (\n        <Popover offset={[0, collapsedWidth - expandedWidth - 2]} placement=\"right-start\" trigger=\"mouseenter\">\n          <Popover.Trigger as={Box} className={cs('vui-sidemenu-item-popover', className)}>\n            <Box {...buttonStyles} borderLeft={`3px solid ${isDark ? 'digiGreen.main' : 'seaBlue.main'}`}>\n              <InnerContent />\n            </Box>\n          </Popover.Trigger>\n          <Popover.Content elevation=\"none\">\n            <Box flexDirection=\"column\" justifyContent=\"start\" w=\"100%\">\n              {children}\n            </Box>\n          </Popover.Content>\n        </Popover>\n      ) : (\n        <Button className={cs('vui-sidemenu-item', className)} {...buttonStyles}>\n          <InnerContent />\n          {hasChildrenExpanded && (\n            <Button\n              aria-label={isExpandedVertically ? 'Collapse' : 'Expand'}\n              className=\"vui-sidemenu-item-expand\"\n              icon={isExpandedVertically ? 'falChevronUp' : 'falChevronDown'}\n              onClick={toggle}\n              size=\"sm\"\n              variant={isDark ? 'tertiaryLight' : 'tertiaryDark'}\n            />\n          )}\n        </Button>\n      )}\n      {!!children && hasChildrenExpanded && isExpandedVertically && (\n        <Box flexDirection=\"column\" justifyContent=\"start\" w=\"100%\">\n          {children}\n        </Box>\n      )}\n    </Box>\n  )\n}) as VuiComponent<'div', SidemenuItemProps>\n\nSidemenuItem.displayName = 'SidemenuItem'\n\nexport default SidemenuItem\n"],"mappings":";;;;;;;;;;;;;;AAgBA,MAAa,eAAe,KAAkC,OAAO,QAAQ;CAC3E,MAAM,EACJ,WACA,UACA,MACA,WAAW,MACX,UACA,aAAa,MACb,KAAK,GACL,KAAK,GACL,SACA,YACA,UACA,OACA,GAAG,SACD,iBAAiB,MAAM;CAE3B,MAAM,EAAE,sBAAsB,yBAAyB,QAAQ,MAAM,wBAAwB,WAC3F,gBAAgB,WAAW;AAE7B,iBAAgB;AACd,MAAI,qBAAsB,aAAY;AACtC,MAAI,CAAC,qBAAsB,eAAc;IACxC,CAAC,qBAAqB,CAAC;CAE1B,MAAM,sBAAsB,CAAC,CAAC,YAAY;CAE1C,MAAM,qBACJ,qBAAC,KAAD;EAAK;EAAQ,IAAI;EAAK,IAAI;EAAG,GAAE;EAAO,YAAW;YAAjD,CACE,oBAAC,MAAD;GAAM,IAAI,aAAa,OAAO,QAAQ;GAAG,MAAM;GAAM,MAAM;GAAY,GACvE,oBAAC,GAAD;GAAG;GAAY,IAAI;aAChB;GACC,EACA;;CAGR,MAAM,UAAU,MAAqC;AACnD,IAAE,gBAAgB;AAClB,IAAE,iBAAiB;AACnB,0BAAwB,CAAC,qBAAqB;;CAGhD,MAAM,eAAe;EACnB,YAAY;EACZ,QAAQ;EACR,cAAc;EACd,YAAY,CAAC,uBAAuB,WAAW,SAAS;EACxD,iBAAiB,WAAY,SAAS,mBAAmB,iBAAkB;EAC3E,IAAI,SAAS,kBAAkB,WAAW,eAAe;EACzD,OAAO,sBAAsB,iBAAiB,SAAS,mBAAmB;EAC1E,GAAG;EACH,gBAAgB;EAChB,eAAe,WAAW;EAC1B;EACA;EACA,MAAM;EACN,SAAS,SAAS,kBAAkB;EACpC,GAAG;EACH,GAAG,OAAO;EACV,MAAM,SAAS,OAAO,SAAS;EAC/B,SAAS,SAAS,iBAAiB;EACnC,GAAG;EACJ;AAED,QACE,qBAAC,KAAD;EAAK,eAAc;EAAc;EAAK,GAAE;YAAxC,CACG,CAAC,uBAAuB,WACvB,qBAAC,SAAD;GAAS,QAAQ,CAAC,cAAoC,EAAE;GAAE,WAAU;GAAc,SAAQ;aAA1F,CACE,oBAAC,QAAQ,SAAT;IAAiB,IAAI;IAAK,WAAW,GAAG,6BAA6B,UAAU;cAC7E,oBAAC,KAAD;KAAK,GAAI;KAAc,YAAY,aAAa,SAAS,mBAAmB;eAC1E,oBAAC,cAAD,EAAgB;KACZ;IACU,GAClB,oBAAC,QAAQ,SAAT;IAAiB,WAAU;cACzB,oBAAC,KAAD;KAAK,eAAc;KAAS,gBAAe;KAAQ,GAAE;KAClD;KACG;IACU,EACV;OAEV,qBAAC,QAAD;GAAQ,WAAW,GAAG,qBAAqB,UAAU;GAAE,GAAI;aAA3D,CACE,oBAAC,cAAD,EAAgB,GACf,uBACC,oBAAC,QAAD;IACE,cAAY,uBAAuB,aAAa;IAChD,WAAU;IACV,MAAM,uBAAuB,iBAAiB;IAC9C,SAAS;IACT,MAAK;IACL,SAAS,SAAS,kBAAkB;IACpC,EAEG;MAEV,CAAC,CAAC,YAAY,uBAAuB,wBACpC,oBAAC,KAAD;GAAK,eAAc;GAAS,gBAAe;GAAQ,GAAE;GAClD;GACG,EAEJ;;EAER;AAEF,aAAa,cAAc"}

package/dist/sidemenu/sidemenuTop.js

@@ -1,7 +1,6 @@
 import { cs } from "../utils/styles.js";
 import { omitThemingProps, useStyleConfig } from "../core/theme.js";
 import Box from "../box/box.js";
-import { collapsedWidth } from "./consts.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/sidemenu/sidemenuTop.tsx
@@ -19,7 +18,7 @@ const SidemenuTop = (props) => {
 		children: [!!leftSlot && /* @__PURE__ */ jsx(Box, {
 			alignItems: "center",
 			className: "vui-sidemenu-top-left",
-			minW: collapsedWidth,
+			minW: 52,
 			children: leftSlot
 		}), !!rightSlot && /* @__PURE__ */ jsx(Box, {
 			className: "vui-sidemenu-top-left",
@@ -31,5 +30,5 @@ SidemenuTop.displayName = "SidemenuTop";
 
 //#endregion
 export { SidemenuTop as default };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# sourceMappingURL=sidemenuTop.js.map

package/dist/sidemenu/sidemenuTop.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidemenuTop.js","names":[],"sources":["../../src/sidemenu/sidemenuTop.tsx"],"sourcesContent":["import { Box } from '../box'\nimport { omitThemingProps, useStyleConfig } from '../core'\nimport { cs } from '../utils'\nimport { collapsedWidth } from './consts'\nimport type { SidemenuTopProps } from './sidemenu.types'\n\n/** Top container. */\nexport const SidemenuTop = (props: SidemenuTopProps) => {\n  const { className, leftSlot, rightSlot, ...rest } = omitThemingProps(props)\n  const styles = useStyleConfig('Sidemenu', props)\n\n  if (!leftSlot && !rightSlot) return null\n\n  return (\n    <Box className={cs('vui-sidemenu-top', className)} mb={1} w=\"100%\" {...styles.sidemenuTop} {...rest}>\n      {!!leftSlot && (\n        <Box alignItems=\"center\" className=\"vui-sidemenu-top-left\" minW={collapsedWidth}>\n          {leftSlot}\n        </Box>\n      )}\n      {!!rightSlot && <Box className=\"vui-sidemenu-top-left\">{rightSlot}</Box>}\n    </Box>\n  )\n}\n\nSidemenuTop.displayName = 'SidemenuTop'\n\nexport default SidemenuTop\n"],"mappings":";;;;;;;;AAOA,MAAa,eAAe,UAA4B;CACtD,MAAM,EAAE,WAAW,UAAU,WAAW,GAAG,SAAS,iBAAiB,MAAM;CAC3E,MAAM,SAAS,eAAe,YAAY,MAAM;AAEhD,KAAI,CAAC,YAAY,CAAC,UAAW,QAAO;AAEpC,QACE,qBAAC;EAAI,WAAW,GAAG,oBAAoB,UAAU;EAAE,IAAI;EAAG,GAAE;EAAO,GAAI,OAAO;EAAa,GAAI;aAC5F,CAAC,CAAC,YACD,oBAAC;GAAI,YAAW;GAAS,WAAU;GAAwB,MAAM;aAC9D;IACG,EAEP,CAAC,CAAC,aAAa,oBAAC;GAAI,WAAU;aAAyB;IAAgB;GACpE;;AAIV,YAAY,cAAc"}
+{"version":3,"file":"sidemenuTop.js","names":[],"sources":["../../src/sidemenu/sidemenuTop.tsx"],"sourcesContent":["import { Box } from '../box'\nimport { omitThemingProps, useStyleConfig } from '../core'\nimport { cs } from '../utils'\nimport { collapsedWidth } from './consts'\nimport type { SidemenuTopProps } from './sidemenu.types'\n\n/** Top container. */\nexport const SidemenuTop = (props: SidemenuTopProps) => {\n  const { className, leftSlot, rightSlot, ...rest } = omitThemingProps(props)\n  const styles = useStyleConfig('Sidemenu', props)\n\n  if (!leftSlot && !rightSlot) return null\n\n  return (\n    <Box className={cs('vui-sidemenu-top', className)} mb={1} w=\"100%\" {...styles.sidemenuTop} {...rest}>\n      {!!leftSlot && (\n        <Box alignItems=\"center\" className=\"vui-sidemenu-top-left\" minW={collapsedWidth}>\n          {leftSlot}\n        </Box>\n      )}\n      {!!rightSlot && <Box className=\"vui-sidemenu-top-left\">{rightSlot}</Box>}\n    </Box>\n  )\n}\n\nSidemenuTop.displayName = 'SidemenuTop'\n\nexport default SidemenuTop\n"],"mappings":";;;;;;;AAOA,MAAa,eAAe,UAA4B;CACtD,MAAM,EAAE,WAAW,UAAU,WAAW,GAAG,SAAS,iBAAiB,MAAM;CAC3E,MAAM,SAAS,eAAe,YAAY,MAAM;AAEhD,KAAI,CAAC,YAAY,CAAC,UAAW,QAAO;AAEpC,QACE,qBAAC,KAAD;EAAK,WAAW,GAAG,oBAAoB,UAAU;EAAE,IAAI;EAAG,GAAE;EAAO,GAAI,OAAO;EAAa,GAAI;YAA/F,CACG,CAAC,CAAC,YACD,oBAAC,KAAD;GAAK,YAAW;GAAS,WAAU;GAAwB;aACxD;GACG,GAEP,CAAC,CAAC,aAAa,oBAAC,KAAD;GAAK,WAAU;aAAyB;GAAgB,EACpE;;;AAIV,YAAY,cAAc"}

package/dist/sidemenu/theme.js

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

package/dist/sidemenu/useSidemenuItem.js

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

package/dist/sidemenuV2/SidemenuItemContent.js

@@ -61,5 +61,5 @@ SidemenuItemContent.displayName = "SidemenuItemContent";
 
 //#endregion
 export { SidemenuItemContent as default };
-globalThis.__vuiVersion__ = "4.0.3"
+globalThis.__vuiVersion__ = "5.0.0-beta.1"
 //# 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;AAEvD,KAAI,YACF,QACE,8CACE,oBAAC;EAAE;EAAY,MAAK;EAAK,SAAQ;EAAe,YAAW;EAAM,IAAI;YAClE;GACC,EACH,SAAS,OAAO,UAAU,YAAY,OAAO,MAAM,SAAS,YAAY,MAAM,KAAK,MAAM,KAAK,MAC7F,oBAAC;EACC,GAAI;EACJ,aAAW,KAAK,gBAAgB,IAAI;EACpC,SAAS,MAAM,WAAW;EAC1B,MAAK;EACL,MAAK;EACL,UAAS;EACT,YAAW;EACX,IAAG;EACH,IAAG;GACH,IAEH;AAGP,QACE;EACE,oBAAC;GAAI,IAAI;GAAoB,IAAI;GAAiB,GAAE;GAAO,YAAW;aACnE,QAAQ,oBAAC;IAAK,MAAM;IAAM,MAAM;KAAY;IACzC;EACN,oBAAC;GAAE;GAAY,MAAK;GAAK,SAAQ;aAC9B;IACC;EACH,SAAS,OAAO,UAAU,YAAY,OAAO,MAAM,SAAS,YAAY,MAAM,KAAK,MAAM,KAAK,MAC7F,oBAAC;GACC,GAAI;GACJ,aAAW,KAAK,gBAAgB,IAAI;GACpC,SAAS,MAAM,WAAW;GAC1B,MAAK;GACL,MAAK;GACL,UAAS;GACT,YAAW;GACX,IAAG;GACH,IAAG;IACH;KAEH;EAGR;AAED,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, '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;AAEvD,KAAI,YACF,QACE,8CACE,oBAAC,GAAD;EAAG;EAAY,MAAK;EAAK,SAAQ;EAAe,YAAW;EAAM,IAAI;YAClE;EACC,GACH,SAAS,OAAO,UAAU,YAAY,OAAO,MAAM,SAAS,YAAY,MAAM,KAAK,MAAM,KAAK,MAC7F,oBAAC,OAAD;EACE,GAAI;EACJ,aAAW,KAAK,gBAAgB,IAAI;EACpC,SAAS,MAAM,WAAW;EAC1B,MAAK;EACL,MAAK;EACL,UAAS;EACT,YAAW;EACX,IAAG;EACH,IAAG;EACH,EAEH;AAGP,QACE;EACE,oBAAC,KAAD;GAAK,IAAI;GAAoB,IAAI;GAAiB,GAAE;GAAO,YAAW;aACnE,QAAQ,oBAAC,MAAD;IAAM,MAAM;IAAM,MAAM;IAAY;GACzC;EACN,oBAAC,GAAD;GAAG;GAAY,MAAK;GAAK,SAAQ;aAC9B;GACC;EACH,SAAS,OAAO,UAAU,YAAY,OAAO,MAAM,SAAS,YAAY,MAAM,KAAK,MAAM,KAAK,MAC7F,oBAAC,OAAD;GACE,GAAI;GACJ,aAAW,KAAK,gBAAgB,IAAI;GACpC,SAAS,MAAM,WAAW;GAC1B,MAAK;GACL,MAAK;GACL,UAAS;GACT,YAAW;GACX,IAAG;GACH,IAAG;GACH;EAEH;EAGR;AAED,oBAAoB,cAAc"}

package/dist/sidemenuV2/context.d.ts

@@ -1,5 +1,4 @@
 import { Dict } from "../utils/types.js";
-import "../utils/index.js";
 import * as react from "react";
 import { ReactNode } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";

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,IAAA;EAE5C,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,SAAA;EACV,iBAAA;EACA,gBAAA,IAAoB,UAAA;EACpB,OAAA;EACA,IAAA;EACA,MAAA;AAAA;AAAA,cAGK,gBAAA,EAAgB,KAAA,CAAA,QAAA,CAAA,oBAAA,GAAE,kBAAA,QAAkB,oBAAA;AAAA,cAG9B,qBAAA;EAAyB,QAAA;EAAA,iBAAA;EAAA,gBAAA;EAAA,OAAA;EAAA,IAAA;EAAA;AAAA,GAOnC,0BAAA,KAA0B,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"context.d.ts","names":[],"sources":["../../src/sidemenuV2/context.tsx"],"mappings":";;;;;;UAMiB,oBAAA,SAA6B,IAAA;EAE5C,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,SAAA;EACV,iBAAA;EACA,gBAAA,IAAoB,UAAA;EACpB,OAAA;EACA,IAAA;EACA,MAAA;AAAA;AAAA,cAGK,gBAAA,EAAgB,KAAA,CAAA,QAAA,CAAA,oBAAA,GAAE,kBAAA,QAAkB,oBAAA;AAAA,cAG9B,qBAAA;EAAyB,QAAA;EAAA,iBAAA;EAAA,gBAAA;EAAA,OAAA;EAAA,IAAA;EAAA;AAAA,GAOnC,0BAAA,KAA0B,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/sidemenuV2/context.js

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