@mezzanine-ui/react 1.0.0-beta.4 → 1.0.0-beta.5

package/Form/useSelectValueControl.js

@@ -9,55 +9,67 @@ function useSelectBaseValueControl(props) {
         equalityFn,
         value: valueProp,
     });
-    return {
-        value,
-        onChange: (chooseOption) => {
+    if (mode === 'multiple') {
+        const onChangeMultiple = (chooseOption) => {
             var _a;
             if (!chooseOption) {
-                if (mode === 'multiple') {
-                    return [];
-                }
-                return null;
+                return [];
             }
-            let newValue = mode === 'multiple' ? [] : null;
-            switch (mode) {
-                case 'multiple': {
-                    const existedValueIdx = ((_a = value) !== null && _a !== void 0 ? _a : []).findIndex((v) => v.id === chooseOption.id);
-                    if (~existedValueIdx) {
-                        newValue = [
-                            ...value.slice(0, existedValueIdx),
-                            ...value.slice(existedValueIdx + 1),
-                        ];
-                    }
-                    else {
-                        newValue = [...value, chooseOption];
-                    }
-                    if (typeof onChange === 'function')
-                        onChange(newValue);
-                    break;
+            let newValue = [];
+            if (Array.isArray(chooseOption)) {
+                newValue = chooseOption;
+            }
+            else {
+                const existedValueIdx = ((_a = value) !== null && _a !== void 0 ? _a : []).findIndex((v) => v.id === chooseOption.id);
+                if (~existedValueIdx) {
+                    newValue = [
+                        ...value.slice(0, existedValueIdx),
+                        ...value.slice(existedValueIdx + 1),
+                    ];
                 }
-                default: {
-                    newValue = chooseOption;
-                    if (typeof onClose === 'function') {
-                        /** single selection should close modal when clicked */
-                        onClose();
-                    }
-                    if (typeof onChange === 'function')
-                        onChange(newValue);
-                    break;
+                else {
+                    newValue = [...value, chooseOption];
                 }
             }
+            if (typeof onChange === 'function')
+                onChange(newValue);
             setValue(newValue);
             return newValue;
-        },
+        };
+        return {
+            value: value,
+            onChange: onChangeMultiple,
+            onClear: (e) => {
+                e.stopPropagation();
+                setValue([]);
+                onChange === null || onChange === void 0 ? void 0 : onChange([]);
+                if (typeof onClearProp === 'function') {
+                    onClearProp(e);
+                }
+            },
+        };
+    }
+    const onChangeSingle = (chooseOption) => {
+        if (!chooseOption) {
+            return null;
+        }
+        const newValue = chooseOption;
+        if (typeof onClose === 'function') {
+            /** single selection should close modal when clicked */
+            onClose();
+        }
+        if (typeof onChange === 'function')
+            onChange(newValue);
+        setValue(newValue);
+        return newValue;
+    };
+    return {
+        value: value,
+        onChange: onChangeSingle,
         onClear: (e) => {
             e.stopPropagation();
-            if (mode === 'multiple') {
-                setValue([]);
-            }
-            else {
-                setValue(null);
-            }
+            setValue(null);
+            onChange === null || onChange === void 0 ? void 0 : onChange(null);
             if (typeof onClearProp === 'function') {
                 onClearProp(e);
             }

package/Popper/Popper.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef, useRef, useImperativeHandle, useEffect, useCallback } from 'react';
-import { useFloating, arrow } from '@floating-ui/react-dom';
+import { useFloating, arrow, autoUpdate } from '@floating-ui/react-dom';
 import { spacingPrefix } from '@mezzanine-ui/system/spacing';
 import { getElement } from '../utils/getElement.js';
 import { useComposeRefs } from '../hooks/useComposeRefs.js';
@@ -15,6 +15,7 @@ const Popper = forwardRef(function Popper(props, ref) {
     const anchorEl = getElement(anchor);
     const floatingReturn = useFloating({
         ...options,
+        whileElementsMounted: autoUpdate,
         middleware: [
             ...((_a = options === null || options === void 0 ? void 0 : options.middleware) !== null && _a !== void 0 ? _a : []),
             (arrow$1 === null || arrow$1 === void 0 ? void 0 : arrow$1.enabled)

package/Scrollbar/Scrollbar.js

@@ -1,4 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
+import 'overlayscrollbars/overlayscrollbars.css';
 import { forwardRef, useEffect, useMemo, useCallback } from 'react';
 import { OverlayScrollbars, ClickScrollPlugin } from 'overlayscrollbars';
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';

package/Select/Select.d.ts

@@ -1,33 +1,52 @@
+import { DropdownOption, DropdownType } from '@mezzanine-ui/core/dropdown/dropdown';
 import { SelectInputSize } from '@mezzanine-ui/core/select';
+import React, { ReactElement } from 'react';
 import { FormElementFocusHandlers } from '../Form';
-import { MenuProps } from '../Menu';
-import { PopperProps } from '../Popper';
-import { SelectValue } from './typings';
-import { PickRenameMulti } from '../utils/general';
-import { SelectTriggerProps, SelectTriggerInputProps } from './SelectTrigger';
-export interface SelectBaseProps extends Omit<SelectTriggerProps, 'active' | 'inputProps' | 'mode' | 'onBlur' | 'onChange' | 'onClick' | 'onFocus' | 'onKeyDown' | 'onScroll' | 'readOnly' | 'renderValue' | 'value'>, FormElementFocusHandlers, PickRenameMulti<Pick<MenuProps, 'itemsInView' | 'maxHeight' | 'role' | 'size'>, {
-    maxHeight: 'menuMaxHeight';
-    role: 'menuRole';
-    size: 'menuSize';
-}>, PickRenameMulti<Pick<PopperProps, 'options' | 'disablePortal'>, {
-    options: 'popperOptions';
-    disablePortal: 'disablePortal';
-}>, Pick<MenuProps, 'children'> {
+import { SelectTriggerInputProps, SelectTriggerProps, SelectValue } from './typings';
+export interface SelectBaseProps extends Omit<SelectTriggerProps, 'active' | 'inputProps' | 'mode' | 'onBlur' | 'onChange' | 'onClick' | 'onFocus' | 'onKeyDown' | 'onScroll' | 'type' | 'renderValue' | 'value'>, FormElementFocusHandlers {
+    /**
+     * The children of select (Option components).
+     * If `options` is provided, this will be ignored.
+     */
+    children?: ReactElement | ReactElement[];
+    /**
+     * Direct options array for dropdown (supports tree structure).
+     * If provided, `children` will be ignored and `type` will be automatically set.
+     */
+    options?: DropdownOption[];
+    /**
+     * The type of dropdown.
+     * @default 'default'
+     */
+    type?: DropdownType;
     /**
      * The other native props for input element.
      */
     inputProps?: Omit<SelectTriggerInputProps, 'onBlur' | 'onChange' | 'onFocus' | 'placeholder' | 'role' | 'value' | `aria-${'controls' | 'expanded' | 'owns'}`>;
+    /**
+     * Whether to disable portal.
+     */
+    disablePortal?: boolean;
+    /**
+     * The max height of the dropdown list.
+     */
+    menuMaxHeight?: number | string;
     /**
      * Popup menu scroll listener
      */
-    onMenuScroll?: (computed: {
+    onScroll?: (computed: {
         scrollTop: number;
         maxScrollTop: number;
-    }, target: HTMLUListElement) => void;
+    }, target: HTMLDivElement) => void;
     /**
      * select input placeholder
      */
     placeholder?: string;
+    /**
+     * Whether the input is readonly.
+     * @default false
+     */
+    readOnly?: boolean;
     /**
      * To customize rendering select input value
      */
@@ -54,7 +73,7 @@ export type SelectMultipleProps = SelectBaseProps & {
     /**
      * The change event handler of input element.
      */
-    onChange?(newOptions: SelectValue[]): any;
+    onChange?(newOptions: SelectValue[]): void;
     /**
      * To customize rendering select input value
      */
@@ -77,7 +96,7 @@ export type SelectSingleProps = SelectBaseProps & {
     /**
      * The change event handler of input element.
      */
-    onChange?(newOptions: SelectValue): any;
+    onChange?(newOptions: SelectValue | null): void;
     /**
      * To customize rendering select input value
      */
@@ -89,5 +108,5 @@ export type SelectSingleProps = SelectBaseProps & {
     value?: SelectValue | null;
 };
 export type SelectProps = SelectMultipleProps | SelectSingleProps;
-declare const Select: import("react").ForwardRefExoticComponent<(Omit<SelectMultipleProps, "ref"> | Omit<SelectSingleProps, "ref">) & import("react").RefAttributes<HTMLDivElement>>;
+declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLDivElement>>;
 export default Select;

package/Select/Select.js

@@ -1,41 +1,34 @@
 'use client';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useContext, useState, useRef, useCallback, useMemo } from 'react';
+import { jsx } from 'react/jsx-runtime';
 import { selectClasses } from '@mezzanine-ui/core/select';
 import isArray from 'lodash/isArray';
+import React, { forwardRef, useContext, useState, useCallback, useRef, useMemo, Children } from 'react';
+import { useSelectValueControl } from '../Form/useSelectValueControl.js';
 import { useComposeRefs } from '../hooks/useComposeRefs.js';
+import Option from './Option.js';
 import { SelectControlContext } from './SelectControlContext.js';
-import { useSelectValueControl } from '../Form/useSelectValueControl.js';
-import { useClickAway } from '../hooks/useClickAway.js';
 import SelectTrigger from './SelectTrigger.js';
 import { FormControlContext } from '../Form/FormControlContext.js';
-import InputTriggerPopper from '../_internal/InputTriggerPopper/InputTriggerPopper.js';
-import Menu from '../Menu/Menu.js';
+import Dropdown from '../Dropdown/Dropdown.js';
 import cx from 'clsx';
 
-const MENU_ID = 'mzn-select-menu-id';
 const Select = forwardRef(function Select(props, ref) {
-    var _a, _b;
     const { disabled: disabledFromFormControl, fullWidth: fullWidthFromFormControl, required: requiredFromFormControl, severity, } = useContext(FormControlContext) || {};
-    const { children, className, clearable = false, defaultValue, disabled = disabledFromFormControl || false, disablePortal = false, error = severity === 'error' || false, fullWidth = fullWidthFromFormControl || false, inputProps, inputRef, itemsInView = 4, menuMaxHeight, menuRole = 'listbox', menuSize, mode = 'single', onBlur, onChange: onChangeProp, onClear: onClearProp, onFocus, onMenuScroll, placeholder = '', popperOptions = {}, prefix, renderValue, required = requiredFromFormControl || false, size, suffixActionIcon, value: valueProp, } = props;
+    const { children, className, clearable = false, defaultValue, disabled = disabledFromFormControl || false, disablePortal = false, error = severity === 'error' || false, fullWidth = fullWidthFromFormControl || false, inputProps, inputRef, menuMaxHeight, mode = 'single', onBlur, onChange: onChangeProp, onClear: onClearProp, onFocus, onScroll, options: optionsProp, placeholder = '', prefix, readOnly = false, renderValue, required = requiredFromFormControl || false, size, suffixActionIcon, type = 'default', value: valueProp, } = props;
     const [open, toggleOpen] = useState(false);
-    const onOpen = () => {
+    const onOpen = useCallback(() => {
+        // Prevent opening when readOnly is true
+        if (readOnly) {
+            return;
+        }
         onFocus === null || onFocus === void 0 ? void 0 : onFocus();
         toggleOpen(true);
-    };
-    const onClose = () => {
+    }, [onFocus, readOnly]);
+    const onClose = useCallback(() => {
         onBlur === null || onBlur === void 0 ? void 0 : onBlur();
         toggleOpen(false);
-    };
-    const onToggleOpen = () => {
-        if (open) {
-            onClose();
-        }
-        else {
-            onOpen();
-        }
-    };
-    const { onChange, onClear, value } = useSelectValueControl({
+    }, [onBlur]);
+    const { onChange, onClear: onClearFromControl, value } = useSelectValueControl({
         defaultValue,
         mode,
         onChange: onChangeProp,
@@ -43,9 +36,99 @@ const Select = forwardRef(function Select(props, ref) {
         onClose,
         value: valueProp,
     });
+    // Wrap onClear and delegate to control hook
+    const onClear = useCallback((e) => {
+        onClearFromControl(e);
+    }, [onClearFromControl]);
     const nodeRef = useRef(null);
-    const controlRef = useRef(null);
-    const composedRef = useComposeRefs([ref, controlRef]);
+    const composedRef = useComposeRefs([ref, nodeRef]);
+    // Helper function to recursively add checkbox to all options in tree structure
+    const addCheckboxToTreeOptions = useCallback((opts) => {
+        return opts.map((opt) => ({
+            ...opt,
+            showCheckbox: true,
+            checkSite: 'prefix',
+            children: opt.children
+                ? addCheckboxToTreeOptions(opt.children)
+                : undefined,
+        }));
+    }, []);
+    const getAllDescendantIds = useCallback((option) => {
+        const ids = new Set();
+        const collect = (opt) => {
+            ids.add(String(opt.id));
+            if (opt.children && opt.children.length > 0) {
+                opt.children.forEach(collect);
+            }
+        };
+        collect(option);
+        return Array.from(ids);
+    }, []);
+    const findOptionById = useCallback((id, opts) => {
+        for (const opt of opts) {
+            if (String(opt.id) === id) {
+                return opt;
+            }
+            if (opt.children) {
+                const found = findOptionById(id, opt.children);
+                if (found) {
+                    return found;
+                }
+            }
+        }
+        return null;
+    }, []);
+    // Convert children (Option components) to DropdownOption format
+    // Or use provided options directly
+    const options = useMemo(() => {
+        // If options prop is provided, use it directly
+        if (optionsProp) {
+            // In tree mode (multiple mode with tree structure), ensure all options have checkbox
+            if (mode === 'multiple') {
+                const hasTreeStructure = optionsProp.some((opt) => opt.children && opt.children.length > 0);
+                if (hasTreeStructure) {
+                    return addCheckboxToTreeOptions(optionsProp);
+                }
+            }
+            return optionsProp;
+        }
+        // Otherwise, convert children to options
+        if (!children)
+            return [];
+        return Children.toArray(children)
+            .filter((child) => {
+            var _a;
+            return (React.isValidElement(child) &&
+                (child.type === Option || ((_a = child.type) === null || _a === void 0 ? void 0 : _a.displayName) === 'Option'));
+        })
+            .map((child) => {
+            const props = child.props;
+            return {
+                id: props.value,
+                name: props.children,
+                showCheckbox: mode === 'multiple',
+                checkSite: mode === 'multiple' ? 'prefix' : 'suffix',
+            };
+        });
+    }, [children, mode, optionsProp, addCheckboxToTreeOptions]);
+    // Determine dropdown type based on options structure and mode
+    // Tree mode is only available in multiple mode
+    const dropdownType = useMemo(() => {
+        if (optionsProp && mode === 'multiple') {
+            // If options prop is provided and mode is multiple, check if it has tree structure
+            const hasTreeStructure = optionsProp.some((opt) => opt.children && opt.children.length > 0);
+            return hasTreeStructure ? 'tree' : type;
+        }
+        return type;
+    }, [optionsProp, type, mode]);
+    const dropdownValue = useMemo(() => {
+        if (!value)
+            return undefined;
+        if (Array.isArray(value)) {
+            return value.map((v) => String(v.id));
+        }
+        return String(value.id);
+    }, [value]);
     function getPlaceholder() {
         if (typeof renderValue === 'function') {
             return renderValue(value);
@@ -55,23 +138,15 @@ const Select = forwardRef(function Select(props, ref) {
         }
         return placeholder;
     }
-    useClickAway(() => {
-        if (!open)
-            return;
-        return () => {
-            onClose();
-        };
-    }, nodeRef, [nodeRef, open, toggleOpen]);
-    const onClickTextField = () => {
-        if (!disabled) {
-            onToggleOpen();
-        }
-    };
     /**
      * keyboard events for a11y
      * (@todo keyboard event map into option selection when menu is opened)
      */
     const onKeyDownTextField = (evt) => {
+        // Prevent keyboard events from opening when readOnly is true
+        if (readOnly) {
+            return;
+        }
         /** for a11y to open menu via keyboard */
         switch (evt.code) {
             case 'Enter':
@@ -94,23 +169,62 @@ const Select = forwardRef(function Select(props, ref) {
             }
         }
     };
-    /** menu onScroll listener */
-    const onMenuScrollCallback = useCallback(async (evt) => {
-        evt.stopPropagation();
-        if (onMenuScroll) {
-            const target = evt.target;
-            const maxScrollTop = target.scrollHeight - target.getBoundingClientRect().height;
-            onMenuScroll({
-                scrollTop: target.scrollTop,
-                maxScrollTop,
-            }, target);
+    const handleDropdownSelect = useCallback((option) => {
+        if (mode === 'multiple' && dropdownType === 'tree') {
+            const onChangeMultiple = onChange;
+            const currentValues = Array.isArray(value) ? value : [];
+            const allDescendantIds = getAllDescendantIds(option);
+            const allDescendantValues = allDescendantIds.map((id) => {
+                const foundOption = findOptionById(id, options);
+                return {
+                    id,
+                    name: (foundOption === null || foundOption === void 0 ? void 0 : foundOption.name) || id,
+                };
+            });
+            const selectedDescendantIds = allDescendantIds.filter((id) => currentValues.some((v) => String(v.id) === id));
+            const allSelected = selectedDescendantIds.length === allDescendantIds.length;
+            if (allSelected) {
+                // Deselect all descendants in a single update
+                const descendantIdSet = new Set(allDescendantIds.map((id) => String(id)));
+                const nextValues = currentValues.filter((v) => !descendantIdSet.has(String(v.id)));
+                onChangeMultiple(nextValues);
+            }
+            else {
+                // Select all descendants that are not yet selected in a single update
+                const existingIdSet = new Set(currentValues.map((v) => String(v.id)));
+                const valuesToAdd = allDescendantValues.filter((descValue) => !existingIdSet.has(String(descValue.id)));
+                const nextValues = [...currentValues, ...valuesToAdd];
+                onChangeMultiple(nextValues);
+            }
+        }
+        else {
+            // Normal selection logic for non-tree mode
+            const selectValue = {
+                id: String(option.id),
+                name: String(option.name),
+            };
+            if (mode === 'multiple') {
+                onChange(selectValue);
+            }
+            else {
+                onChange(selectValue);
+                onClose();
+            }
+        }
+    }, [mode, onChange, onClose, value, dropdownType, getAllDescendantIds, findOptionById, options]);
+    const handleVisibilityChange = useCallback((isOpen) => {
+        if (isOpen && readOnly) {
+            return;
+        }
+        if (isOpen) {
+            onOpen();
+        }
+        else {
+            onClose();
         }
-    }, [onMenuScroll]);
+    }, [onOpen, onClose, readOnly]);
     const resolvedInputProps = {
         ...inputProps,
-        'aria-controls': MENU_ID,
-        'aria-expanded': open,
-        'aria-owns': MENU_ID,
         placeholder: getPlaceholder(),
         role: 'combobox',
     };
@@ -118,7 +232,7 @@ const Select = forwardRef(function Select(props, ref) {
         onChange,
         value,
     }), [onChange, value]);
-    return (jsx(SelectControlContext.Provider, { value: context, children: jsxs("div", { ref: nodeRef, className: cx(selectClasses.host, fullWidth && selectClasses.hostFullWidth), children: [jsx(SelectTrigger, { ref: composedRef, active: open, className: className, clearable: clearable, disabled: disabled, error: error, fullWidth: fullWidth, inputRef: inputRef, mode: mode, onTagClose: onChange, onClear: onClear, onClick: onClickTextField, onKeyDown: onKeyDownTextField, prefix: prefix, readOnly: true, renderValue: renderValue, required: required, inputProps: resolvedInputProps, size: size, suffixActionIcon: suffixActionIcon, value: value }), jsx(InputTriggerPopper, { anchor: controlRef, className: selectClasses.popper, disablePortal: disablePortal, open: open, options: popperOptions, sameWidth: true, children: jsx(Menu, { id: MENU_ID, "aria-activedescendant": Array.isArray(value) ? ((_b = (_a = value === null || value === void 0 ? void 0 : value[0]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : '') : value === null || value === void 0 ? void 0 : value.id, itemsInView: itemsInView, maxHeight: menuMaxHeight, onScroll: onMenuScrollCallback, role: menuRole, size: menuSize, style: { border: 0 }, children: children }) })] }) }));
+    return (jsx(SelectControlContext.Provider, { value: context, children: jsx("div", { ref: nodeRef, className: cx(selectClasses.host, fullWidth && selectClasses.hostFullWidth), children: jsx(Dropdown, { disabled: readOnly || disabled, disablePortal: disablePortal, maxHeight: menuMaxHeight, mode: mode, onScroll: onScroll, onSelect: handleDropdownSelect, onVisibilityChange: handleVisibilityChange, open: readOnly ? false : open, options: options, sameWidth: true, type: dropdownType, value: dropdownValue, children: jsx(SelectTrigger, { ref: composedRef, active: !readOnly && open, className: className, clearable: clearable, disabled: disabled, error: error, fullWidth: fullWidth, inputRef: inputRef, mode: mode, onTagClose: onChange, onClear: onClear, onKeyDown: onKeyDownTextField, prefix: prefix, readOnly: readOnly, ...(mode === 'single' && renderValue ? { renderValue } : {}), required: required, inputProps: resolvedInputProps, size: size, suffixActionIcon: suffixActionIcon, value: value === null ? undefined : value }) }) }) }));
 });
 
 export { Select as default };

package/Select/index.d.ts

@@ -1,14 +1,13 @@
-export * from './typings';
+export { default as OptionGroup } from '../Menu/MenuItemGroup';
+export type { MenuItemGroupProps as OptionGroupProps } from '../Menu/MenuItemGroup';
+export { default as Option } from './Option';
+export type { OptionProps } from './Option';
+export { default } from './Select';
+export type { SelectProps } from './Select';
 export { SelectControlContext } from './SelectControlContext';
 export { default as SelectTrigger } from './SelectTrigger';
-export type { SelectTriggerProps, SelectTriggerInputProps, } from './SelectTrigger';
 export { default as SelectTriggerTags } from './SelectTriggerTags';
 export type { SelectTriggerTagsProps } from './SelectTriggerTags';
-export type { SelectProps } from './Select';
-export { default } from './Select';
-export { default as Option } from './Option';
-export type { OptionProps } from './Option';
-export { default as OptionGroup } from '../Menu/MenuItemGroup';
-export type { MenuItemGroupProps as OptionGroupProps } from '../Menu/MenuItemGroup';
-export type { TreeSelectProps } from './TreeSelect';
 export { default as TreeSelect } from './TreeSelect';
+export type { TreeSelectProps } from './TreeSelect';
+export * from './typings';

package/Select/index.js

@@ -1,7 +1,7 @@
+export { default as OptionGroup } from '../Menu/MenuItemGroup.js';
+export { default as Option } from './Option.js';
+export { default } from './Select.js';
 export { SelectControlContext } from './SelectControlContext.js';
 export { default as SelectTrigger } from './SelectTrigger.js';
 export { default as SelectTriggerTags } from './SelectTriggerTags.js';
-export { default } from './Select.js';
-export { default as Option } from './Option.js';
-export { default as OptionGroup } from '../Menu/MenuItemGroup.js';
 export { default as TreeSelect } from './TreeSelect.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mezzanine-ui/react",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.5",
   "description": "React components for mezzanine-ui",
   "author": "Mezzanine",
   "repository": {
@@ -31,9 +31,9 @@
     "@floating-ui/dom": "^1.7.4",
     "@floating-ui/react-dom": "^2.1.6",
     "@hello-pangea/dnd": "^18.0.1",
-    "@mezzanine-ui/core": "1.0.0-beta.4",
-    "@mezzanine-ui/icons": "1.0.0-beta.4",
-    "@mezzanine-ui/system": "1.0.0-beta.4",
+    "@mezzanine-ui/core": "1.0.0-beta.5",
+    "@mezzanine-ui/icons": "1.0.0-beta.5",
+    "@mezzanine-ui/system": "1.0.0-beta.5",
     "@tanstack/react-virtual": "^3.13.13",
     "@types/react-transition-group": "^4.4.12",
     "clsx": "^2.1.1",