@westpac/ui 1.0.0-canary.9 → 1.0.0

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

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

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

@@ -0,0 +1,7 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    slots: {
+        underlay: 'fixed inset-0 bg-black/5',
+        overlay: 'z-10 flex flex-col overflow-hidden rounded-xl border border-border-muted-soft bg-background-white shadow'
+    }
+});

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { AriaPopoverProps } from 'react-aria';
+export type MultiSelectPopoverProps = {
+    children: React.ReactNode;
+    className?: string;
+} & Omit<AriaPopoverProps, 'popoverRef' | 'triggerRef'>;

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

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

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

@@ -0,0 +1,2 @@
+import type { MultiSelectSearchbarProps } from './multi-select-searchbar.types.js';
+export declare function MultiSelectSearchbar({ filterText, setFilterText, closeBtnRef, }: Pick<MultiSelectSearchbarProps, 'filterText' | 'setFilterText' | 'closeBtnRef'>): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,74 @@
+import React, { useContext, useCallback } from 'react';
+import { Button } from '../../../../components/button/index.js';
+import { ClearIcon, SearchIcon } from '../../../../components/icon/index.js';
+import { InputGroup } from '../../../../components/input-group/index.js';
+import { Input } from '../../../input/index.js';
+import { MultiSelectContext } from '../../multi-select.component.js';
+import { styles as searchbarStyles } from './multi-select-searchbar.styles.js';
+export function MultiSelectSearchbar({ filterText, setFilterText, closeBtnRef }) {
+    const { size, inputRef, selectAllRef, listBoxRef } = useContext(MultiSelectContext);
+    const styles = searchbarStyles();
+    const handleInputKeyDown = useCallback((e)=>{
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            if (selectAllRef.current) {
+                selectAllRef.current.focus();
+            } else {
+                var _listBoxRef_current;
+                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 === 'Escape' && filterText.length > 0) {
+            e.stopPropagation();
+            setFilterText('');
+        }
+        if (e.key === 'Tab' && filterText.length > 0) {
+            var _closeBtnRef_current;
+            e.preventDefault();
+            e.stopPropagation();
+            (_closeBtnRef_current = closeBtnRef.current) === null || _closeBtnRef_current === void 0 ? void 0 : _closeBtnRef_current.focus();
+        }
+    }, [
+        filterText.length,
+        setFilterText,
+        selectAllRef,
+        listBoxRef,
+        closeBtnRef
+    ]);
+    return React.createElement("div", {
+        className: styles.searchInputWrapper()
+    }, React.createElement(InputGroup, {
+        before: {
+            icon: (props)=>React.createElement(SearchIcon, {
+                    ...props,
+                    color: "muted"
+                })
+        },
+        after: filterText.length > 0 && {
+            inset: true,
+            element: React.createElement(Button, {
+                onClick: ()=>{
+                    var _inputRef_current;
+                    setFilterText('');
+                    (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
+                },
+                look: "unstyled",
+                className: styles.clearButton(),
+                ref: closeBtnRef,
+                "aria-label": "Clear filter text"
+            }, React.createElement(ClearIcon, {
+                color: "muted",
+                size: "small"
+            }))
+        },
+        "aria-label": "Filter options"
+    }, React.createElement(Input, {
+        ref: inputRef,
+        size: size,
+        value: filterText,
+        onChange: (e)=>setFilterText(e.target.value),
+        onKeyDown: handleInputKeyDown,
+        tabIndex: -1
+    })));
+}

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

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

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

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

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

@@ -0,0 +1,6 @@
+import { ButtonRef } from '../../../../components/button/button.types.js';
+export type MultiSelectSearchbarProps = {
+    filterText: string;
+    setFilterText: (text: string) => void;
+    closeBtnRef: React.RefObject<ButtonRef>;
+};

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

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

package/dist/components/multi-select/index.d.ts

@@ -0,0 +1,2 @@
+export { MultiSelect, MultiSelectItem, MultiSelectSection } from './multi-select.component.js';
+export { type MultiSelectValue } from './multi-select.types.js';

package/dist/components/multi-select/index.js

@@ -0,0 +1 @@
+export { MultiSelect, MultiSelectItem, MultiSelectSection } from './multi-select.component.js';

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { MultiSelectContextProps, MultiSelectItemProps, MultiSelectProps, MultiSelectValue } from './multi-select.types.js';
+export declare const MultiSelectContext: React.Context<MultiSelectContextProps>;
+export declare function BaseMultiSelect<T extends MultiSelectValue = MultiSelectValue>({ size, listBoxProps, selectionMode, selectedKeys, onSelectionChange, placeholder, showSingleSectionTitle, placement, portalContainer, id, ...props }: MultiSelectProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare const MultiSelect: React.MemoExoticComponent<typeof BaseMultiSelect>;
+export declare const MultiSelectItem: (props: MultiSelectItemProps) => JSX.Element;
+export { Section as MultiSelectSection } from 'react-stately';

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

@@ -0,0 +1,95 @@
+'use client';
+import React, { useRef, useState, memo, createContext } from 'react';
+import { useFilter, useOverlayTrigger } from 'react-aria';
+import { Item, useListState, useOverlayTriggerState } from 'react-stately';
+import { MultiSelectDropdown } from './components/multi-select-dropdown/multi-select-dropdown.component.js';
+import { MultiSelectListBoxTrigger } from './components/multi-select-list-box-trigger/multi-select-list-box-trigger.component.js';
+import { styles as multiSelectStyles } from './multi-select.styles.js';
+import { filterNodes } from './utils/filter-nodes.js';
+export const MultiSelectContext = createContext({
+    overlayState: {},
+    listState: {},
+    listBoxRef: {
+        current: null
+    },
+    buttonRef: {
+        current: null
+    },
+    popoverRef: {
+        current: null
+    },
+    selectAllRef: {
+        current: null
+    },
+    inputRef: {
+        current: null
+    },
+    filterText: '',
+    overlayProps: {}
+});
+export function BaseMultiSelect({ size = 'medium', listBoxProps, selectionMode = 'multiple', selectedKeys, onSelectionChange, placeholder = 'Select', showSingleSectionTitle = false, placement, portalContainer, id, ...props }) {
+    const [filterText, setFilterText] = useState('');
+    const filter = useFilter({
+        sensitivity: 'base'
+    });
+    const listState = useListState({
+        ...props,
+        selectedKeys,
+        selectionMode,
+        onSelectionChange,
+        filter: (nodes)=>filterNodes(nodes, filterText, (value, string)=>filter.contains(value, string))
+    });
+    const inputRef = useRef(null);
+    const buttonRef = useRef(null);
+    const popoverRef = useRef(null);
+    const selectAllRef = useRef(null);
+    const listBoxRef = useRef(null);
+    const overlayState = useOverlayTriggerState({
+        onOpenChange: (isOpen)=>{
+            if (isOpen) {
+                requestAnimationFrame(()=>{
+                    var _inputRef_current;
+                    (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
+                });
+            }
+            if (!isOpen) {
+                var _buttonRef_current;
+                (_buttonRef_current = buttonRef.current) === null || _buttonRef_current === void 0 ? void 0 : _buttonRef_current.focus();
+            }
+        }
+    });
+    const { triggerProps, overlayProps } = useOverlayTrigger({
+        type: 'dialog'
+    }, overlayState, buttonRef);
+    const styles = multiSelectStyles({});
+    return React.createElement(MultiSelectContext.Provider, {
+        value: {
+            filterText,
+            size,
+            overlayState,
+            listState,
+            buttonRef,
+            popoverRef,
+            placement,
+            selectAllRef,
+            listBoxRef,
+            inputRef,
+            overlayProps,
+            portalContainer
+        }
+    }, React.createElement("div", {
+        className: styles.root()
+    }, React.createElement(MultiSelectListBoxTrigger, {
+        placeholder: placeholder,
+        selectedKeys: selectedKeys,
+        showSingleSectionTitle: showSingleSectionTitle,
+        triggerProps: triggerProps,
+        id: id
+    }), overlayState.isOpen && React.createElement(MultiSelectDropdown, {
+        setFilterText: setFilterText,
+        ...listBoxProps
+    })));
+}
+export const MultiSelect = memo(BaseMultiSelect);
+export const MultiSelectItem = Item;
+export { Section as MultiSelectSection } from 'react-stately';

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

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

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

@@ -0,0 +1,6 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    slots: {
+        root: 'relative flex flex-col gap-1'
+    }
+});

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

@@ -0,0 +1,61 @@
+import { DOMProps } from '@react-types/shared';
+import { Key, ReactNode, RefObject } from 'react';
+import { AriaListBoxOptions, AriaPopoverProps } from 'react-aria';
+import { ItemProps, ListProps, ListState, OverlayTriggerState } from 'react-stately';
+import { MultiSelectSize } from './components/multi-select-list-box-trigger/multi-select-list-box-trigger.types.js';
+export type MultiSelectContextProps<T extends object = object> = {
+    size?: MultiSelectSize;
+    overlayState: OverlayTriggerState;
+    listState: ListState<T>;
+    buttonRef: RefObject<HTMLButtonElement>;
+    listBoxRef: RefObject<HTMLUListElement>;
+    popoverRef: RefObject<HTMLDivElement>;
+    selectAllRef: RefObject<HTMLInputElement>;
+    inputRef: RefObject<HTMLInputElement>;
+    filterText: string;
+    overlayProps: DOMProps;
+    placement?: AriaPopoverProps['placement'];
+    portalContainer?: Element;
+};
+export type MultiSelectItemProps<T extends object = object> = {
+    description?: string;
+} & ItemProps<T>;
+export type MultiSelectValue = {
+    textValue?: string;
+    content?: ReactNode;
+    key: Key;
+    description?: string;
+};
+export type MultiSelectProps<T> = {
+    /**
+     * Props for the list box within the multi-select
+     */
+    listBoxProps?: Omit<AriaListBoxOptions<T>, 'state' | 'selectionMode'>;
+    /**
+     * id for the base multi-select container for accessibility/other uses
+     */
+    id?: string;
+    /**
+     * Placeholder text for the input
+     */
+    placeholder?: string;
+    /**
+     * Manual placement of the dropdown, will flip automatically if there is not enough space
+     * @default bottom
+     */
+    placement?: AriaPopoverProps['placement'];
+    /**
+     * Element where the popover will be rendered, by default it will be into the body
+     */
+    portalContainer?: Element;
+    /**
+     * Whether to show the section for the selected option in the field i.e. "Transaction: Savings" rather than "Savings"
+     * NOTE: Only works with single selectionMode multi-selects
+     */
+    showSingleSectionTitle?: boolean;
+    /**
+     * Size of input
+     * @default medium
+     */
+    size?: MultiSelectSize;
+} & ListProps<T>;

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

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

package/dist/components/multi-select/utils/filter-nodes.d.ts

@@ -0,0 +1,2 @@
+import { Node } from '@react-types/shared';
+export declare function filterNodes<T>(nodes: Iterable<Node<T>>, filterText: string, contains: (value: string, search: string) => boolean): Iterable<Node<T>>;

package/dist/components/multi-select/utils/filter-nodes.js

@@ -0,0 +1,25 @@
+export function filterNodes(nodes, filterText, contains) {
+    if (!filterText) return nodes;
+    const arr = Array.from(nodes);
+    return arr.flatMap((node)=>{
+        if (node.type !== 'section') {
+            var _node_textValue;
+            return contains((_node_textValue = node.textValue) !== null && _node_textValue !== void 0 ? _node_textValue : '', filterText) ? [
+                node
+            ] : [];
+        }
+        const childNodesArr = Array.from(node.childNodes || []);
+        const matchedChildren = childNodesArr.filter((child)=>{
+            var _child_textValue;
+            return contains((_child_textValue = child.textValue) !== null && _child_textValue !== void 0 ? _child_textValue : '', filterText);
+        });
+        if (matchedChildren.length === 0) return [];
+        const sectionWithMatches = {
+            ...node,
+            childNodes: matchedChildren
+        };
+        return [
+            sectionWithMatches
+        ];
+    });
+}

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

@@ -1,9 +1,8 @@
 export declare const styles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "inline-block shrink-0 leading-none", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "inline-block shrink-0 leading-none", unknown, unknown, undefined>>;
 export declare const fill: import("tailwind-variants").TVReturnType<{
     mode: {
-        dark: string;
-        light: string;
-        reversed: string;
+        base: string;
+        mono: string;
         duo: string;
     };
     highlight: {
@@ -14,9 +13,8 @@ export declare const fill: import("tailwind-variants").TVReturnType<{
     };
 }, undefined, "", {
     mode: {
-        dark: string;
-        light: string;
-        reversed: string;
+        base: string;
+        mono: string;
         duo: string;
     };
     highlight: {
@@ -27,9 +25,8 @@ export declare const fill: import("tailwind-variants").TVReturnType<{
     };
 }, undefined, import("tailwind-variants").TVReturnType<{
     mode: {
-        dark: string;
-        light: string;
-        reversed: string;
+        base: string;
+        mono: string;
         duo: string;
     };
     highlight: {

package/dist/components/pictogram/pictogram.styles.js

@@ -6,9 +6,8 @@ export const fill = tv({
     base: '',
     variants: {
         mode: {
-            dark: 'fill-surface-pictogram-base',
-            light: 'fill-surface-mono',
-            reversed: 'fill-surface-reversed',
+            base: 'fill-surface-pictogram-base',
+            mono: 'fill-surface-mono',
             duo: ''
         },
         highlight: {

package/dist/components/pictogram/pictogram.types.d.ts

@@ -1,5 +1,5 @@
 import { type SVGAttributes } from 'react';
-export type PictogramMode = 'dark' | 'light' | 'duo' | 'reversed';
+export type PictogramMode = 'base' | 'mono' | 'duo';
 export type PictogramProps = SVGAttributes<SVGElement> & {
     /**
      * SVG copyright year

package/dist/components/popover/components/panel/panel.component.d.ts

@@ -1,5 +1,5 @@
 import { type PanelProps } from './panel.types.js';
-export declare function BasePanel({ state, heading, headingTag: Tag, content, placement, id, triggerRef, portal, }: PanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function BasePanel({ state, heading, headingTag: Tag, content, placement, id, triggerRef, onClose, open, portal, }: PanelProps): import("react/jsx-runtime").JSX.Element;
 /**
  * @private
  */

package/dist/components/popover/components/panel/panel.component.js

@@ -1,5 +1,4 @@
-import React, { useRef } from 'react';
-import { FocusScope } from 'react-aria';
+import React, { useEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { useBreakpoint } from '../../../../hook/breakpoints.hook.js';
 import { resolveResponsiveVariant } from '../../../../utils/breakpoint.util.js';
@@ -7,41 +6,60 @@ import { Button } from '../../../button/index.js';
 import { CloseIcon } from '../../../icon/index.js';
 import { usePanel } from './panel.hook.js';
 import { styles as panelStyles } from './panel.styles.js';
-export function BasePanel({ state, heading, headingTag: Tag = 'h1', content, placement = 'bottom', id, triggerRef, portal }) {
+export function BasePanel({ state, heading, headingTag: Tag = 'h1', content, placement = 'top', id, triggerRef, onClose, open, portal }) {
     const popoverRef = useRef(null);
     const arrowRef = useRef(null);
     const breakpoint = useBreakpoint();
-    const resolvedPlacement = resolveResponsiveVariant(placement, breakpoint);
-    const { popoverPosition, arrowPosition } = usePanel({
+    const headingRef = useRef(null);
+    const buttonRef = useRef(null);
+    const { popoverPosition, arrowPosition, localPlacement } = usePanel({
         state,
-        placement: resolvedPlacement,
+        placement,
         triggerRef,
-        portal
+        portal,
+        popoverRef
     });
+    const resolvedPlacement = resolveResponsiveVariant(localPlacement, breakpoint);
     const styles = panelStyles({
         placement: resolvedPlacement
     });
-    return React.createElement(FocusScope, {
-        autoFocus: true,
-        restoreFocus: true
-    }, React.createElement("div", {
+    useEffect(()=>{
+        if (state.isOpen && !open) {
+            if (headingRef.current) {
+                headingRef.current.focus();
+            } else {
+                var _buttonRef_current;
+                (_buttonRef_current = buttonRef.current) === null || _buttonRef_current === void 0 ? void 0 : _buttonRef_current.focus();
+            }
+        }
+    }, [
+        state.isOpen
+    ]);
+    return React.createElement("div", {
         style: popoverPosition,
         className: styles.popover(),
         "test-id": "popover",
         id: id,
-        ref: popoverRef
+        ref: popoverRef,
+        role: "dialog"
     }, React.createElement("div", {
         className: styles.content()
     }, heading && React.createElement(Tag, {
-        tabIndex: 0,
-        className: styles.heading()
+        className: styles.heading(),
+        tabIndex: -1,
+        ref: headingRef
     }, heading), React.createElement("div", {
         className: styles.body(),
-        tabIndex: 0
+        id: "popover-content"
     }, content), React.createElement(Button, {
         look: "link",
+        tag: "button",
         size: "small",
-        onClick: ()=>state.close(),
+        ref: buttonRef,
+        onClick: ()=>{
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+            state.close();
+        },
         className: styles.closeBtn(),
         iconAfter: ()=>React.createElement(CloseIcon, {
                 color: "primary",
@@ -55,7 +73,7 @@ export function BasePanel({ state, heading, headingTag: Tag = 'h1', content, pla
         style: arrowPosition,
         "test-id": "arrow",
         ref: arrowRef
-    })));
+    }));
 }
 export function Panel({ portal = false, ...props }) {
     if (portal) {

package/dist/components/popover/components/panel/panel.hook.d.ts

@@ -1,9 +1,11 @@
+import { RefObject } from 'react';
 import { PanelProps } from './panel.types.js';
 export type PanelHookProps = {
     placement: PanelProps['placement'];
     portal: PanelProps['portal'];
     state: PanelProps['state'];
     triggerRef: PanelProps['triggerRef'];
+    popoverRef?: RefObject<HTMLDivElement>;
 };
 /**
  * Custom hook to calculate the position of a popover panel relative to its trigger element.
@@ -11,7 +13,7 @@ export type PanelHookProps = {
  * @returns {Object} return.popoverPosition - The calculated position styles for the popover.
  * @returns {Object} return.arrowPosition - The calculated position styles for the popover arrow.
  */
-export declare function usePanel({ state, placement, triggerRef, portal }: PanelHookProps): {
+export declare function usePanel({ state, placement, triggerRef, portal, popoverRef }: PanelHookProps): {
     popoverPosition: {
         bottom: string;
         left: number;
@@ -36,4 +38,5 @@ export declare function usePanel({ state, placement, triggerRef, portal }: Panel
     arrowPosition: {
         left: string;
     };
+    localPlacement: import("../../../../types/responsive-variants.types.js").ResponsiveVariants<"bottom" | "top"> | undefined;
 };