@westpac/ui 1.0.0-canary.8 → 1.0.0

package/dist/components/icon/index.js

@@ -6,14 +6,18 @@ export { AlertIcon } from './components/alert-icon.js';
 export { AndroidIcon } from './components/android-icon.js';
 export { AppleIcon } from './components/apple-icon.js';
 export { ArchiveBoxIcon } from './components/archive-box-icon.js';
+export { ArrowBackIcon } from './components/arrow-back-icon.js';
 export { ArrowBackCircleIcon } from './components/arrow-back-circle-icon.js';
+export { ArrowDownIcon } from './components/arrow-down-icon.js';
 export { ArrowDownCircleIcon } from './components/arrow-down-circle-icon.js';
 export { ArrowForkIcon } from './components/arrow-fork-icon.js';
+export { ArrowForwardIcon } from './components/arrow-forward-icon.js';
 export { ArrowForwardCircleIcon } from './components/arrow-forward-circle-icon.js';
 export { ArrowLeftIcon } from './components/arrow-left-icon.js';
 export { ArrowRightIcon } from './components/arrow-right-icon.js';
 export { ArrowSplitIcon } from './components/arrow-split-icon.js';
 export { ArrowThreadReplyIcon } from './components/arrow-thread-reply-icon.js';
+export { ArrowUpIcon } from './components/arrow-up-icon.js';
 export { ArrowUpCircleIcon } from './components/arrow-up-circle-icon.js';
 export { AtmIcon } from './components/atm-icon.js';
 export { AttacheCaseIcon } from './components/attache-case-icon.js';

package/dist/components/index.d.ts

@@ -46,3 +46,4 @@ export * from './pass-code-view/index.js';
 export * from './progress-indicator/index.js';
 export * from './header/index.js';
 export * from './footer/index.js';
+export * from './multi-select/index.js';

package/dist/components/index.js

@@ -46,3 +46,4 @@ export * from './pass-code-view/index.js';
 export * from './progress-indicator/index.js';
 export * from './header/index.js';
 export * from './footer/index.js';
+export * from './multi-select/index.js';

package/dist/components/input-group/components/input-group-supporting-text/input-group-supporting-text.styles.d.ts

@@ -1 +1 @@
-export declare const styles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "mt-1 text-xs text-text-muted", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "mt-1 text-xs text-text-muted", unknown, unknown, undefined>>;
+export declare const styles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "mt-1 text-text-muted", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "mt-1 text-text-muted", unknown, unknown, undefined>>;

package/dist/components/input-group/components/input-group-supporting-text/input-group-supporting-text.styles.js

@@ -1,4 +1,4 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
-    base: 'mt-1 text-xs text-text-muted'
+    base: 'mt-1 text-text-muted'
 });

package/dist/components/link/link.styles.d.ts

@@ -2,8 +2,6 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     type: {
         inline: {
             base: string;
-            iconBefore: string;
-            iconAfter: string;
         };
         standalone: {
             base: string;
@@ -28,8 +26,6 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     type: {
         inline: {
             base: string;
-            iconBefore: string;
-            iconAfter: string;
         };
         standalone: {
             base: string;
@@ -54,8 +50,6 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     type: {
         inline: {
             base: string;
-            iconBefore: string;
-            iconAfter: string;
         };
         standalone: {
             base: string;

package/dist/components/link/link.styles.js

@@ -1,19 +1,17 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'inline-flex bg-[transparent] hover:underline',
-        iconBefore: 'mr-1',
-        iconAfter: 'ml-1'
+        base: 'bg-[transparent] hover:underline',
+        iconBefore: 'relative bottom-[0.1em] mr-1',
+        iconAfter: 'relative bottom-[0.1em] ml-1'
     },
     variants: {
         type: {
             inline: {
-                base: 'items-baseline text-text-link',
-                iconBefore: 'self-center',
-                iconAfter: 'self-center'
+                base: 'inline text-text-link'
             },
             standalone: {
-                base: 'items-center text-text-body'
+                base: 'text-text-body'
             }
         },
         underline: {

package/dist/components/modal/components/modal-dialog/components/modal-dialog-body/modal-dialog-body.styles.js

@@ -23,7 +23,7 @@ export const styles = tv({
         },
         canScroll: {
             true: {
-                base: 'shadow-[0px_-4px_5px_-2px_inset] shadow-black/30 dark:shadow-black/75'
+                base: 'shadow-[0px_-4px_5px_-2px_inset] shadow-black/30'
             }
         },
         scrollAtBottom: {

package/dist/components/modal/components/modal-dialog/modal-dialog.styles.js

@@ -43,7 +43,7 @@ export const styles = tv({
         },
         scrolled: {
             true: {
-                title: 'shadow-[0px_2px_5px_0px] shadow-black/30 dark:shadow-black/75'
+                title: 'shadow-[0px_2px_5px_0px] shadow-black/30'
             }
         }
     },

package/dist/components/multi-select/components/multi-select-dropdown/multi-select-dropdown.component.d.ts

@@ -0,0 +1,2 @@
+import { MultiSelectDropdownProps } from './multi-select-dropdown.types.js';
+export declare function MultiSelectDropdown<T extends object = object>({ setFilterText, ...props }: MultiSelectDropdownProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/multi-select/components/multi-select-dropdown/multi-select-dropdown.component.js

@@ -0,0 +1,20 @@
+'use client';
+import React, { useContext, useRef } from 'react';
+import { MultiSelectListBox } from '../../components/multi-select-list-box/multi-select-list-box.component.js';
+import { MultiSelectContext } from '../../multi-select.component.js';
+import { MultiSelectPopover } from '../multi-select-popover/multi-select-popover.component.js';
+import { MultiSelectSearchbar } from '../multi-select-searchbar/multi-select-searchbar.component.js';
+export function MultiSelectDropdown({ setFilterText, ...props }) {
+    const { filterText, listBoxRef } = useContext(MultiSelectContext);
+    const closeBtnRef = useRef(null);
+    return React.createElement(MultiSelectPopover, null, React.createElement(MultiSelectSearchbar, {
+        filterText: filterText,
+        setFilterText: setFilterText,
+        closeBtnRef: closeBtnRef
+    }), React.createElement(MultiSelectListBox, {
+        ...props,
+        "aria-label": "multiselect list",
+        escapeKeyBehavior: "none",
+        listBoxRef: listBoxRef
+    }));
+}

package/dist/components/multi-select/components/multi-select-dropdown/multi-select-dropdown.styles.d.ts

@@ -0,0 +1,37 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            popover?: import("tailwind-merge").ClassNameValue;
+            clearButton?: import("tailwind-merge").ClassNameValue;
+            searchInputWrapper?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            popover?: import("tailwind-merge").ClassNameValue;
+            clearButton?: import("tailwind-merge").ClassNameValue;
+            searchInputWrapper?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    popover: string;
+    searchInputWrapper: string;
+    clearButton: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            popover?: import("tailwind-merge").ClassNameValue;
+            clearButton?: import("tailwind-merge").ClassNameValue;
+            searchInputWrapper?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    popover: string;
+    searchInputWrapper: string;
+    clearButton: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    popover: string;
+    searchInputWrapper: string;
+    clearButton: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/components/multi-select/components/multi-select-dropdown/multi-select-dropdown.styles.js

@@ -0,0 +1,8 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    slots: {
+        popover: 'shadow',
+        searchInputWrapper: 'border-b border-b-border-muted-soft p-2',
+        clearButton: 'mb-0.5 px-2'
+    }
+});

package/dist/components/multi-select/components/multi-select-dropdown/multi-select-dropdown.types.d.ts

@@ -0,0 +1,5 @@
+import { Dispatch, SetStateAction } from 'react';
+import { AriaListBoxOptions } from 'react-aria';
+export type MultiSelectDropdownProps<T> = {
+    setFilterText: Dispatch<SetStateAction<string>>;
+} & AriaListBoxOptions<T>;

package/dist/components/multi-select/components/multi-select-dropdown/multi-select-dropdown.types.js

@@ -0,0 +1 @@
+export { };

package/dist/components/multi-select/components/multi-select-list-box/components/multi-select-list-box-section/multi-select-list-box-section.component.d.ts

@@ -0,0 +1,2 @@
+import type { MultiSelectSectionProps } from './multi-select-list-box-section.types.js';
+export declare function MultiSelectListBoxSection<T>({ section }: MultiSelectSectionProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/multi-select/components/multi-select-list-box/components/multi-select-list-box-section/multi-select-list-box-section.component.js

@@ -0,0 +1,31 @@
+'use client';
+import React, { useContext, useMemo } from 'react';
+import { useListBoxSection } from 'react-aria';
+import { MultiSelectContext } from '../../../../multi-select.component.js';
+import { MultiSelectOption } from '../multi-select-option/multi-select-option.component.js';
+import { styles as listBoxStyles } from './multi-select-list-box-section.styles.js';
+export function MultiSelectListBoxSection({ section }) {
+    const { listState } = useContext(MultiSelectContext);
+    const { itemProps, headingProps, groupProps } = useListBoxSection({
+        heading: section.rendered,
+        'aria-label': section['aria-label']
+    });
+    const styles = listBoxStyles();
+    const childNodes = useMemo(()=>{
+        var _listState_collection;
+        return (listState === null || listState === void 0 ? void 0 : (_listState_collection = listState.collection) === null || _listState_collection === void 0 ? void 0 : _listState_collection.getChildren) ? [
+            ...listState.collection.getChildren(section.key)
+        ] : [];
+    }, [
+        section.key,
+        listState === null || listState === void 0 ? void 0 : listState.collection
+    ]);
+    return React.createElement(React.Fragment, null, React.createElement("li", itemProps, section.rendered && React.createElement("span", {
+        ...headingProps,
+        className: styles.span(),
+        tabIndex: -1
+    }, section.rendered), React.createElement("ul", groupProps, childNodes.map((node)=>React.createElement(MultiSelectOption, {
+            key: node.key,
+            item: node
+        })))));
+}

package/dist/components/multi-select/components/multi-select-list-box/components/multi-select-list-box-section/multi-select-list-box-section.styles.d.ts

@@ -0,0 +1,25 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            span?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            span?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    span: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            span?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    span: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    span: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/components/multi-select/components/multi-select-list-box/components/multi-select-list-box-section/multi-select-list-box-section.styles.js

@@ -0,0 +1,6 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    slots: {
+        span: 'flex h-6 items-center bg-surface-muted-faint px-2 align-middle typography-body-10 text-text-hero'
+    }
+});

package/dist/components/multi-select/components/multi-select-list-box/components/multi-select-list-box-section/multi-select-list-box-section.types.d.ts

@@ -0,0 +1,4 @@
+import type { Node } from '@react-types/shared';
+export type MultiSelectSectionProps<T> = {
+    section: Node<T>;
+};

package/dist/components/multi-select/components/multi-select-list-box/components/multi-select-list-box-section/multi-select-list-box-section.types.js

@@ -0,0 +1 @@
+export { };

package/dist/components/multi-select/components/multi-select-list-box/components/multi-select-option/multi-select-option.component.d.ts

@@ -0,0 +1,2 @@
+import { MultiSelectOptionProps } from './multi-select-option.types.js';
+export declare function MultiSelectOption<T>({ item }: MultiSelectOptionProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/multi-select/components/multi-select-list-box/components/multi-select-option/multi-select-option.component.js

@@ -0,0 +1,62 @@
+'use client';
+import React, { useCallback, useContext, useRef } from 'react';
+import { mergeProps, useFocusRing, useOption } from 'react-aria';
+import { TickIcon } from '../../../../../icon/index.js';
+import { MultiSelectContext } from '../../../../multi-select.component.js';
+import { styles as optionStyles } from './multi-select-option.styles.js';
+export function MultiSelectOption({ item }) {
+    var _item_props;
+    const { listState, selectAllRef, inputRef } = useContext(MultiSelectContext);
+    const selectionMode = listState.selectionManager.selectionMode;
+    const ref = useRef(null);
+    const { optionProps, isDisabled, isSelected } = useOption({
+        key: item.key
+    }, listState, ref);
+    const { isFocusVisible, focusProps } = useFocusRing();
+    const styles = optionStyles({
+        disabled: isDisabled,
+        selectionMode,
+        isFocusVisible
+    });
+    const handleButtonKeyDown = useCallback((e)=>{
+        if (e.key === 'ArrowUp' && item.index === 0) {
+            e.preventDefault();
+            if (selectAllRef.current) {
+                var _selectAllRef_current;
+                (_selectAllRef_current = selectAllRef.current) === null || _selectAllRef_current === void 0 ? void 0 : _selectAllRef_current.focus();
+            } else {
+                var _inputRef_current;
+                (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
+            }
+        }
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            listState.selectionManager.toggleSelection(item.key);
+        }
+    }, [
+        listState.selectionManager
+    ]);
+    return React.createElement("li", {
+        ...mergeProps(optionProps, focusProps),
+        ref: ref,
+        className: styles.root(),
+        onKeyDown: handleButtonKeyDown,
+        "aria-checked": selectionMode === 'multiple' ? isSelected : undefined,
+        "aria-selected": selectionMode === 'single' ? isSelected : undefined,
+        tabIndex: 0
+    }, React.createElement("div", {
+        className: styles.itemContainer()
+    }, React.createElement("div", {
+        className: styles.flexZero()
+    }, React.createElement("div", {
+        className: styles.checkbox()
+    }, isSelected && React.createElement(TickIcon, {
+        size: "small",
+        "aria-hidden": "true",
+        color: "hero"
+    }))), React.createElement("div", {
+        className: styles.body()
+    }, item.rendered)), ((_item_props = item.props) === null || _item_props === void 0 ? void 0 : _item_props.description) && React.createElement("div", {
+        className: styles.description()
+    }, item.props.description));
+}

package/dist/components/multi-select/components/multi-select-list-box/components/multi-select-option/multi-select-option.styles.d.ts

@@ -0,0 +1,82 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    selectionMode: {
+        none: {};
+        multiple: {
+            checkbox: string;
+        };
+        single: {
+            checkbox: string;
+        };
+    };
+    isFocusVisible: {
+        true: {
+            root: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    checkbox: string;
+    body: string;
+    flexZero: string;
+    itemContainer: string;
+    description: string;
+}, undefined, {
+    selectionMode: {
+        none: {};
+        multiple: {
+            checkbox: string;
+        };
+        single: {
+            checkbox: string;
+        };
+    };
+    isFocusVisible: {
+        true: {
+            root: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    checkbox: string;
+    body: string;
+    flexZero: string;
+    itemContainer: string;
+    description: string;
+}, import("tailwind-variants").TVReturnType<{
+    selectionMode: {
+        none: {};
+        multiple: {
+            checkbox: string;
+        };
+        single: {
+            checkbox: string;
+        };
+    };
+    isFocusVisible: {
+        true: {
+            root: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    checkbox: string;
+    body: string;
+    flexZero: string;
+    itemContainer: string;
+    description: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/components/multi-select/components/multi-select-list-box/components/multi-select-option/multi-select-option.styles.js

@@ -0,0 +1,32 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    slots: {
+        root: 'flex cursor-pointer flex-col justify-between bg-background-white p-2 text-sm text-text-body transition-[background-color] hover:bg-surface-muted-faint',
+        checkbox: 'size-4',
+        body: '-mt-0.5 flex flex-1 items-center typography-body-9',
+        flexZero: 'flex-0',
+        itemContainer: 'flex gap-1',
+        description: 'relative ml-5 typography-body-10 text-text-muted'
+    },
+    variants: {
+        selectionMode: {
+            none: {},
+            multiple: {
+                checkbox: 'flex items-center justify-center rounded border border-border-hero bg-background-white'
+            },
+            single: {
+                checkbox: 'flex items-center justify-center'
+            }
+        },
+        isFocusVisible: {
+            true: {
+                root: 'bg-surface-muted-faint focus-outline -outline-offset-2'
+            }
+        },
+        disabled: {
+            true: {
+                root: 'cursor-not-allowed text-text-muted'
+            }
+        }
+    }
+});

package/dist/components/multi-select/components/multi-select-list-box/components/multi-select-option/multi-select-option.types.d.ts

@@ -0,0 +1,8 @@
+import type { Node } from '@react-types/shared';
+export type MultiSelectOptionProps<T> = {
+    item: Omit<Node<T>, 'props'> & {
+        props?: {
+            description?: string;
+        };
+    };
+};

package/dist/components/multi-select/components/multi-select-list-box/components/multi-select-option/multi-select-option.types.js

@@ -0,0 +1 @@
+export { };

package/dist/components/multi-select/components/multi-select-list-box/components/multi-select-select-all-option/multi-select-select-all-option.component.d.ts

@@ -0,0 +1 @@
+export declare function MultiSelectSelectAllOption(): import("react/jsx-runtime").JSX.Element;

package/dist/components/multi-select/components/multi-select-list-box/components/multi-select-select-all-option/multi-select-select-all-option.component.js

@@ -0,0 +1,93 @@
+'use client';
+import React, { useCallback, useContext, useMemo } from 'react';
+import { useOption, useFocusRing, mergeProps } from 'react-aria';
+import { TickIcon } from '../../../../../icon/index.js';
+import { MultiSelectContext } from '../../../../multi-select.component.js';
+import { styles as selectAllOptionStyles } from './multi-select-select-all-option.styles.js';
+export function MultiSelectSelectAllOption() {
+    const { listState, selectAllRef, listBoxRef, inputRef } = useContext(MultiSelectContext);
+    const allItemsAreSelected = useMemo(()=>listState.selectionManager.isSelectAll, [
+        listState.selectionManager.isSelectAll
+    ]);
+    const withOneSelectionOrMore = useMemo(()=>!![
+            ...listState.selectionManager.selectedKeys
+        ].length, [
+        listState.selectionManager.selectedKeys
+    ]);
+    const handleSelectionChange = useCallback(()=>{
+        if (!allItemsAreSelected) {
+            listState.selectionManager.setSelectedKeys(new Set([
+                ...listState.selectionManager.selectedKeys,
+                ...listState.selectionManager.collection.getKeys()
+            ]));
+            return;
+        }
+        return listState.selectionManager.clearSelection();
+    }, [
+        allItemsAreSelected,
+        listState.selectionManager
+    ]);
+    const { optionProps } = useOption({
+        key: 'select-all'
+    }, listState, selectAllRef);
+    const { isFocusVisible, focusProps } = useFocusRing();
+    const styles = selectAllOptionStyles({
+        selected: withOneSelectionOrMore,
+        isFocusVisible
+    });
+    const handleInputKeyDown = useCallback((e)=>{
+        if (e.key === 'ArrowDown') {
+            var _listBoxRef_current;
+            e.preventDefault();
+            const firstItem = (_listBoxRef_current = listBoxRef.current) === null || _listBoxRef_current === void 0 ? void 0 : _listBoxRef_current.querySelector('[data-key]');
+            firstItem === null || firstItem === void 0 ? void 0 : firstItem.focus();
+        }
+        if (e.key === 'ArrowUp') {
+            var _inputRef_current;
+            e.preventDefault();
+            (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
+        }
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            handleSelectionChange();
+        }
+    }, [
+        handleSelectionChange,
+        listBoxRef,
+        inputRef
+    ]);
+    let ariaChecked;
+    if (allItemsAreSelected) {
+        ariaChecked = 'true';
+    } else if (withOneSelectionOrMore) {
+        ariaChecked = 'mixed';
+    } else {
+        ariaChecked = 'false';
+    }
+    return React.createElement("div", {
+        className: styles.listItem(),
+        key: "select-all",
+        ...mergeProps(optionProps, focusProps),
+        ref: selectAllRef,
+        onClick: handleSelectionChange,
+        onKeyDown: (e)=>{
+            handleInputKeyDown(e);
+        },
+        role: "option",
+        "aria-checked": ariaChecked,
+        "aria-label": "Select all options"
+    }, React.createElement("div", {
+        className: styles.button()
+    }, React.createElement("div", {
+        className: styles.checkbox(),
+        role: "presentation"
+    }, allItemsAreSelected && React.createElement(TickIcon, {
+        size: "small",
+        "aria-hidden": "true",
+        color: "hero"
+    }), !allItemsAreSelected && withOneSelectionOrMore && React.createElement("div", {
+        className: styles.indeterminate()
+    })), React.createElement("span", {
+        className: styles.label()
+    }, "Select all")));
+}

package/dist/components/multi-select/components/multi-select-list-box/components/multi-select-select-all-option/multi-select-select-all-option.styles.d.ts

@@ -0,0 +1,64 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    selected: {
+        true: {
+            listItem: string;
+        };
+        false: {
+            listItem: string;
+        };
+    };
+    isFocusVisible: {
+        true: {
+            listItem: string;
+        };
+        false: {};
+    };
+}, {
+    listItem: string;
+    button: string;
+    checkbox: string;
+    indeterminate: string;
+    label: string;
+}, undefined, {
+    selected: {
+        true: {
+            listItem: string;
+        };
+        false: {
+            listItem: string;
+        };
+    };
+    isFocusVisible: {
+        true: {
+            listItem: string;
+        };
+        false: {};
+    };
+}, {
+    listItem: string;
+    button: string;
+    checkbox: string;
+    indeterminate: string;
+    label: string;
+}, import("tailwind-variants").TVReturnType<{
+    selected: {
+        true: {
+            listItem: string;
+        };
+        false: {
+            listItem: string;
+        };
+    };
+    isFocusVisible: {
+        true: {
+            listItem: string;
+        };
+        false: {};
+    };
+}, {
+    listItem: string;
+    button: string;
+    checkbox: string;
+    indeterminate: string;
+    label: string;
+}, undefined, unknown, unknown, undefined>>;