@bspk/ui 1.2.0 → 1.3.1

package/dist/hooks/useCombobox.js

@@ -1,104 +0,0 @@
-import { useState } from 'react';
-import { useFloating } from './useFloating';
-import { useId } from './useId';
-import { EVENT_KEY } from '../utils/keyboard';
-import { scrollElementIntoView } from '../utils/scrollElementIntoView';
-function useKeyDownNavigation(containerElement, setShow, disabled) {
-    const [activeIndex, setActiveIndex] = useState(-1);
-    const itemElements = Array.from(containerElement?.children || []);
-    const selectedId = itemElements[activeIndex]?.id;
-    const onKeyDownCapture = (event) => {
-        if (disabled)
-            return false;
-        if (event.key === EVENT_KEY.Tab || event.key === EVENT_KEY.Escape) {
-            setShow(false);
-            return true;
-        }
-        if (event.key !== EVENT_KEY.Enter && event.key !== EVENT_KEY[' '] && !event.key.startsWith('Arrow'))
-            return false;
-        if (event.key.startsWith('Arrow') && !containerElement) {
-            event.preventDefault();
-            setShow(true);
-            setActiveIndex(0);
-            return true;
-        }
-        if (!containerElement?.children.length)
-            return false;
-        event.preventDefault();
-        if ((event.key === EVENT_KEY[' '] || event.key === EVENT_KEY.Enter) && activeIndex !== -1) {
-            itemElements[activeIndex].click();
-            return true;
-        }
-        let next = 0;
-        if (event.key === EVENT_KEY.ArrowUp || event.key === EVENT_KEY.ArrowLeft)
-            next = activeIndex - 1;
-        if (event.key === EVENT_KEY.ArrowDown || event.key === EVENT_KEY.ArrowRight)
-            next = activeIndex + 1;
-        if (next < 0)
-            next = itemElements.length - 1;
-        if (next >= itemElements.length)
-            next = 0;
-        itemElements.forEach((el, index) => {
-            if (index === next)
-                el.setAttribute('data-selected', 'true');
-            else
-                el.removeAttribute('data-selected');
-        });
-        scrollElementIntoView(itemElements[next], containerElement);
-        setActiveIndex(next);
-        return true;
-    };
-    return { onKeyDownCapture, selectedId, activeIndex };
-}
-/**
- * Utility hook to manage a combobox component.
- *
- * It provides functionality for showing/hiding the menu, handling keyboard navigation, and managing ARIA attributes.
- *
- * @param {UseComboboxProps} props - The properties to configure the combobox.
- * @returns An object containing props for the menu and toggle elements, and a function to close the menu.
- */
-export function useCombobox({ placement = 'bottom', refWidth = true, disabled, readOnly, offsetOptions, }) {
-    const menuId = useId();
-    const [show, setShow] = useState(false);
-    const { floatingStyles, middlewareData, elements } = useFloating({
-        placement,
-        strategy: 'fixed',
-        offsetOptions,
-        refWidth,
-        hide: !show,
-    });
-    const { onKeyDownCapture, activeIndex, selectedId } = useKeyDownNavigation(elements.floating, setShow, disabled || readOnly);
-    return {
-        activeIndex,
-        menuProps: {
-            'data-placement': middlewareData?.offset?.placement,
-            id: menuId,
-            role: 'listbox',
-            style: floatingStyles,
-            tabIndex: -1,
-            onOutsideClick: () => setShow(false),
-        },
-        toggleProps: {
-            'aria-activedescendant': selectedId || undefined,
-            'aria-controls': menuId,
-            'aria-disabled': disabled || undefined,
-            'aria-expanded': show,
-            'aria-haspopup': 'listbox',
-            'aria-owns': menuId,
-            'aria-readonly': readOnly || undefined,
-            role: 'combobox',
-            tabIndex: 0,
-            onClick: () => {
-                setShow((prev) => !prev);
-            },
-            onKeyDownCapture,
-        },
-        closeMenu: () => setShow(false),
-        openMenu: () => setShow(true),
-        isOpen: show,
-        elements,
-    };
-}
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
-//# sourceMappingURL=useCombobox.js.map

package/dist/hooks/useCombobox.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useCombobox.js","sourceRoot":"","sources":["../../src/hooks/useCombobox.ts"],"names":[],"mappings":"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"}

package/dist/hooks/useKeyNavigation.d.ts

@@ -1,17 +0,0 @@
-import { Dispatch, DOMAttributes, SetStateAction } from 'react';
-export type UseKeyNavigationProps = {
-    /** The callback function to call when a tab is selected (Enter or Space keys). */
-    onSelect: (activeId?: string) => void;
-};
-/**
- * Custom hook to handle keyboard navigation for a list of elements.
- *
- * This hook provides functionality to navigate through elements using arrow keys and select an element with the Enter
- * or Space key, or onClick.
- */
-export declare function useKeyNavigation<T extends HTMLElement>({ onSelect, }: UseKeyNavigationProps): {
-    handleKeyDown: DOMAttributes<T>['onKeyDown'];
-    activeElementId: string | null;
-    setElements: (newElements: HTMLElement[]) => void;
-    setActiveElementId: Dispatch<SetStateAction<string | null>>;
-};

package/dist/hooks/useKeyNavigation.js

@@ -1,46 +0,0 @@
-import { useRef, useState } from 'react';
-import { useOutsideClick } from './useOutsideClick';
-import { handleKeyDown } from '../utils/handleKeyDown';
-/**
- * Custom hook to handle keyboard navigation for a list of elements.
- *
- * This hook provides functionality to navigate through elements using arrow keys and select an element with the Enter
- * or Space key, or onClick.
- */
-export function useKeyNavigation({ onSelect, }) {
-    const elements = useRef([]);
-    const setElements = (newElements) => {
-        elements.current = newElements;
-    };
-    const [activeElementId, setActiveElementId] = useState(null);
-    useOutsideClick({
-        elements: elements.current,
-        callback: () => setActiveElementId(null),
-    });
-    const handleIncrement = (increment) => () => {
-        let currentElement = elements.current[0];
-        if (activeElementId)
-            currentElement = elements.current.find((el) => el.id === activeElementId) || elements.current[0];
-        const activeIndex = elements.current.indexOf(currentElement);
-        const nextindex = (activeIndex + increment + elements.current.length) % elements.current.length;
-        setActiveElementId(elements.current[nextindex].id);
-    };
-    const handleSelect = () => () => {
-        if (activeElementId)
-            onSelect(activeElementId);
-    };
-    return {
-        setElements,
-        handleKeyDown: handleKeyDown({
-            ArrowRight: handleIncrement(1),
-            ArrowDown: handleIncrement(1),
-            ArrowUp: handleIncrement(-1),
-            ArrowLeft: handleIncrement(-1),
-            Enter: handleSelect(),
-            Space: handleSelect(),
-        }, { preventDefault: true, stopPropagation: true }),
-        activeElementId,
-        setActiveElementId,
-    };
-}
-//# sourceMappingURL=useKeyNavigation.js.map

package/dist/hooks/useKeyNavigation.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useKeyNavigation.js","sourceRoot":"","sources":["../../src/hooks/useKeyNavigation.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2C,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAClF,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAOtD;;;;;GAKG;AACH,MAAM,UAAU,gBAAgB,CAAwB,EACpD,QAAQ,GACY;IAMpB,MAAM,QAAQ,GAAG,MAAM,CAAgB,EAAE,CAAC,CAAC;IAC3C,MAAM,WAAW,GAAG,CAAC,WAA0B,EAAE,EAAE;QAC/C,QAAQ,CAAC,OAAO,GAAG,WAAW,CAAC;IACnC,CAAC,CAAC;IAEF,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAE5E,eAAe,CAAC;QACZ,QAAQ,EAAE,QAAQ,CAAC,OAAO;QAC1B,QAAQ,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,IAAI,CAAC;KAC3C,CAAC,CAAC;IAEH,MAAM,eAAe,GAAG,CAAC,SAAiB,EAAE,EAAE,CAAC,GAAS,EAAE;QACtD,IAAI,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QACzC,IAAI,eAAe;YACf,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,eAAe,CAAC,IAAI,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QAErG,MAAM,WAAW,GAAG,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;QAC7D,MAAM,SAAS,GAAG,CAAC,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC;QAChG,kBAAkB,CAAC,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC;IACvD,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,GAAG,EAAE;QAC5B,IAAI,eAAe;YAAE,QAAQ,CAAC,eAAe,CAAC,CAAC;IACnD,CAAC,CAAC;IAEF,OAAO;QACH,WAAW;QACX,aAAa,EAAE,aAAa,CACxB;YACI,UAAU,EAAE,eAAe,CAAC,CAAC,CAAC;YAC9B,SAAS,EAAE,eAAe,CAAC,CAAC,CAAC;YAC7B,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;YAC5B,SAAS,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;YAC9B,KAAK,EAAE,YAAY,EAAE;YACrB,KAAK,EAAE,YAAY,EAAE;SACxB,EACD,EAAE,cAAc,EAAE,IAAI,EAAE,eAAe,EAAE,IAAI,EAAE,CAClD;QACD,eAAe;QACf,kBAAkB;KACrB,CAAC;AACN,CAAC"}

package/src/components/Accordion/AccordionSection.tsx

@@ -1,128 +0,0 @@
-import { SvgKeyboardArrowDown } from '@bspk/icons/KeyboardArrowDown';
-import { SvgKeyboardArrowUp } from '@bspk/icons/KeyboardArrowUp';
-import { ReactNode } from 'react';
-import './accordion.scss';
-import { Txt } from '-/components/Txt';
-
-export type AccordionSectionProps = {
-    /**
-     * The content of the accordion.
-     *
-     * @required
-     */
-    children: ReactNode;
-    /**
-     * The title of the accordion.
-     *
-     * @required
-     */
-    title: string;
-    /** The title of the accordion. */
-    subTitle?: string;
-    /**
-     * The leading element to display in the Accordion title.
-     *
-     * Leading elements may only be one of the following [Icon](/icons), Img, Avatar.
-     *
-     * @exampleType select
-     * @options Icon, Img, Avatar
-     */
-    leading?: ReactNode;
-    /**
-     * The trailing element to display in the accordion header.
-     *
-     * @exampleType select
-     * @options Tag
-     */
-    trailing?: ReactNode;
-    /**
-     * If the accordion is open.
-     *
-     * @default false
-     * @required
-     */
-    isOpen?: boolean;
-    /**
-     * Fires when the accordion state changes.
-     *
-     * @required
-     */
-    toggleOpen: () => void;
-    /**
-     * If true, a divider will be shown below the accordion header.
-     *
-     * @default true
-     */
-    divider?: boolean;
-    /**
-     * Indicates whether the accordion is disabled.
-     *
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * The unique identifier for the accordion item.
-     *
-     * @required
-     */
-    id: string;
-};
-
-/**
- * A vertical stack of collapsible panels or that allows customers to expand or collapse each panel individually to
- * reveal or hide their content.
- *
- * @example
- *     import { Accordion } from '@bspk/ui/Accordion';
- *
- *     function Example() {
- *         return (
- *             <Accordion title="Accordion Title" subTitle="Accordion Subtitle">
- *                 Accordion Content
- *             </Accordion>
- *         );
- *     }
- *
- * @name Accordion
- * @phase WorkInProgress
- */
-export function AccordionSection({
-    children,
-    title,
-    subTitle,
-    leading,
-    isOpen = false,
-    toggleOpen,
-    divider = true,
-    trailing,
-    disabled = false,
-    id,
-}: AccordionSectionProps) {
-    return (
-        <section
-            data-accordion-section
-            data-disabled={disabled || undefined}
-            data-divider={divider || undefined}
-            id={id}
-        >
-            <button
-                aria-expanded={isOpen ? true : false}
-                data-accordion-header
-                disabled={disabled}
-                onClick={!disabled ? toggleOpen : undefined}
-            >
-                <span data-accordion-header-body>
-                    {leading ?? null}
-                    <span data-accordion-title-wrapper>
-                        <Txt variant="labels-base">{title}</Txt>
-                        {!!subTitle && <Txt variant="body-x-small">{subTitle}</Txt>}
-                    </span>
-                    {trailing ?? null}
-                </span>
-                {isOpen ? <SvgKeyboardArrowUp /> : <SvgKeyboardArrowDown />}
-            </button>
-            {isOpen && <div data-accordion-content>{children}</div>}
-            <div data-not-a-divider-divider />
-        </section>
-    );
-}

package/src/components/Combobox/Combobox.tsx

@@ -1,224 +0,0 @@
-import { ReactNode, useMemo } from 'react';
-import { ListItems } from './ListItems';
-import { ListItemProps } from '-/components/ListItem';
-import { Menu, MenuProps } from '-/components/Menu';
-import { Modal, ModalProps } from '-/components/Modal';
-import { ToggleProps, useCombobox, UseComboboxProps } from '-/hooks/useCombobox';
-import { useId } from '-/hooks/useId';
-import { useUIContext } from '-/hooks/useUIContext';
-import { CommonProps, ElementProps } from '-/types/common';
-import { cssWithVars } from '-/utils/cwv';
-
-const DEFAULT = {
-    selectAll: 'Select All',
-};
-
-export const MIN_ITEM_COUNT = 3;
-export const MAX_ITEM_COUNT = 10;
-
-/** The props for the listbox items. */
-export type ComboboxItemProps = CommonProps<'disabled'> &
-    ListItemProps & {
-        /** The content to display in the listbox item. */
-        label: string;
-        /** The value of the listbox item. */
-        value: string;
-    };
-
-export type ComboboxProps<Item extends ComboboxItemProps = ComboboxItemProps> = CommonProps<'id' | 'owner'> &
-    Pick<MenuProps, 'itemDisplayCount'> &
-    Pick<ModalProps, 'description'> &
-    Pick<UseComboboxProps, 'disabled' | 'offsetOptions' | 'readOnly' | 'refWidth'> & {
-        /**
-         * Content to display in the listbox.
-         *
-         * @example
-         *     [
-         *         { value: '1', label: 'Option 1' },
-         *         { value: '2', label: 'Option 2' },
-         *         { value: '3', label: 'Option 3' },
-         *         { value: '4', label: 'Option 4' },
-         *         { value: '5', label: 'Option 5' },
-         *         { value: '6', label: 'Option 6' },
-         *         { value: '7', label: 'Option 7' },
-         *         { value: '8', label: 'Option 8' },
-         *         { value: '9', label: 'Option 9' },
-         *         { value: '10', label: 'Option 10' },
-         *     ];
-         *
-         * @type Array<MenuItem>
-         */
-        items?: Item[];
-        /**
-         * Array of selected values
-         *
-         * @type Array<string>
-         */
-        value?: Array<string>;
-        /**
-         * Whether the listbox allows multiple selections.
-         *
-         * @default false
-         */
-        isMulti?: boolean;
-        /**
-         * The label for the "Select All" option.
-         *
-         * Ignored if `isMulti` is false.
-         *
-         * If `isMulti` is `true`, defaults to "Select All". If a string, it will be used as the label. If false the
-         * select all option will not be rendered.
-         *
-         * @default false
-         */
-        selectAll?: boolean | string;
-        /**
-         * The function to call when the selected values change.
-         *
-         * @example
-         *     (selectedValues, event) => setState({ selectedValues });
-         *
-         * @required
-         */
-        onChange: (selectedValues: string[], event?: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-        /**
-         * The children of the listbox added after the items.
-         *
-         * Usually only used for showing no items found.
-         */
-        children: (params: { setReference: (node: HTMLElement) => void; toggleProps: ToggleProps }) => ReactNode;
-        /**
-         * The label for the select element, used for accessibility, and the dropdown modal header.
-         *
-         * @required
-         */
-        label: string;
-    };
-
-/**
- * A utility widget that allows users to select one or more items from a list of choices.
- *
- * @name Combobox
- * @phase Utility
- */
-export function Combobox<Item extends ComboboxItemProps>({
-    itemDisplayCount,
-    items = [],
-    onChange,
-    value: selectedValues = [],
-    disabled,
-    id: idProp,
-    isMulti,
-    selectAll: selectAllProp,
-    children,
-    readOnly,
-    refWidth,
-    offsetOptions = 4,
-    description,
-    owner,
-    label,
-    ...props
-}: ElementProps<ComboboxProps<Item>, 'div'>) {
-    const menuId = useId(idProp);
-    const { isMobile } = useUIContext();
-
-    const { toggleProps, activeIndex, menuProps, closeMenu, isOpen, elements } = useCombobox({
-        refOutsideClick: !isMobile,
-        refWidth,
-        placement: 'bottom-start',
-        disabled,
-        readOnly,
-        offsetOptions,
-    });
-
-    const selectAll = useMemo((): string | false => {
-        if (!isMulti) return false;
-        if (selectAllProp && typeof selectAllProp === 'string') return selectAllProp;
-        return selectAllProp === true ? DEFAULT.selectAll : false;
-    }, [isMulti, selectAllProp]);
-
-    const allSelected = useMemo(
-        () => !!(items.length && items.every((item) => selectedValues.includes(item.value))),
-        [items, selectedValues],
-    );
-
-    if (!isOpen) return <>{children({ toggleProps, setReference: elements.setReference })}</>;
-
-    /* data-bspk="combobox" -- I don't need a wrapper here and this passes lint. :) */
-    return (
-        <>
-            {children({ toggleProps, setReference: elements.setReference })}
-            {isMobile ? (
-                <Modal
-                    description={description}
-                    header={label}
-                    onClose={closeMenu}
-                    open={isOpen}
-                    owner={owner || undefined}
-                >
-                    <div
-                        aria-multiselectable={isMulti || undefined}
-                        id={menuId}
-                        role="listbox"
-                        style={{ display: 'contents' }}
-                    >
-                        <ListItems
-                            activeIndex={activeIndex}
-                            allSelected={allSelected}
-                            data-testid="listbox-items"
-                            isMulti={isMulti}
-                            items={items}
-                            menuId={menuId}
-                            onChange={(next) => {
-                                onChange(next);
-                                if (!isMulti) closeMenu();
-                            }}
-                            selectAll={selectAll}
-                            selectedValues={selectedValues}
-                        />
-                    </div>
-                </Modal>
-            ) : (
-                <Menu
-                    aria-multiselectable={isMulti || undefined}
-                    data-bspk="listbox"
-                    data-disabled={disabled || undefined}
-                    data-no-items={!items.length || undefined}
-                    id={menuId}
-                    innerRef={(node) => {
-                        elements.setFloating(node);
-                    }}
-                    itemCount={items.length}
-                    itemDisplayCount={itemDisplayCount}
-                    onOutsideClick={closeMenu}
-                    role="listbox"
-                    style={cssWithVars({
-                        ...props.style,
-                        ...menuProps.style,
-                    })}
-                    tabIndex={-1}
-                >
-                    <ListItems
-                        activeIndex={activeIndex}
-                        allSelected={allSelected}
-                        data-testid="listbox-items"
-                        isMulti={isMulti}
-                        items={items}
-                        menuId={menuId}
-                        onChange={(nextValue) => {
-                            onChange(nextValue);
-                            if (!isMulti) closeMenu();
-                        }}
-                        selectAll={selectAll}
-                        selectedValues={selectedValues}
-                    />
-                </Menu>
-            )}
-        </>
-    );
-}
-
-// ListItems component to render the items in the listbox or modal.
-// This is a separate component to keep the Combobox component clean and focused on its main functionality
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Combobox/ListItems.tsx

@@ -1,107 +0,0 @@
-import { Checkbox } from '-/components/Checkbox';
-import { ListItem } from '-/components/ListItem';
-
-type Item = {
-    value: string;
-    label: string;
-    disabled?: boolean;
-    trailing?: React.ReactNode;
-};
-
-export type ListItemsProps<I extends Item> = {
-    /** Whether the listbox allows multiple selections. */
-    isMulti?: boolean;
-    /** The items to display in the listbox. */
-    items?: I[];
-    /** The index of the currently active item. */
-    activeIndex?: number;
-    /** The values that are currently selected. */
-    selectedValues?: string[];
-    /** Callback function when the selected values change. */
-    onChange?: (nextSelectedValues: string[], event?: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-    /** The label for the "Select All" option. */
-    selectAll?: string | false;
-    /** The ID of the menu for accessibility purposes. */
-    menuId?: string;
-    /** Whether all items are selected in a multi-select scenario. */
-    allSelected?: boolean;
-};
-
-export function ListItems<I extends Item>({
-    isMulti = false,
-    items = [],
-    activeIndex,
-    selectedValues = [],
-    onChange,
-    selectAll = false,
-    menuId = '',
-    allSelected = false,
-}: ListItemsProps<I>) {
-    const multiSelectValue = (selected: boolean, itemValue: string) => {
-        return selected ? selectedValues.filter((value) => value !== itemValue) : [...selectedValues, itemValue];
-    };
-
-    return (
-        <>
-            {isMulti && selectAll && (
-                <ListItem
-                    as="label"
-                    data-selected={allSelected || undefined}
-                    key="select-all"
-                    label={selectAll}
-                    onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
-                        onChange?.(allSelected ? [] : items.map((item) => item.value), event);
-                    }}
-                    tabIndex={-1}
-                    trailing={
-                        <Checkbox
-                            aria-label={selectAll}
-                            checked={!!allSelected}
-                            indeterminate={!allSelected && selectedValues.length > 0}
-                            name=""
-                            onChange={(checked) => {
-                                onChange?.(checked ? items.map((item) => item.value) : []);
-                            }}
-                            value=""
-                        />
-                    }
-                />
-            )}
-            {items.map((item, index) => {
-                const selected = Boolean(Array.isArray(selectedValues) && selectedValues.includes(item.value));
-                return (
-                    <ListItem
-                        {...item}
-                        active={activeIndex === index || undefined}
-                        aria-disabled={item.disabled || undefined}
-                        aria-selected={selected || undefined}
-                        as={isMulti ? 'label' : 'button'}
-                        disabled={item.disabled || undefined}
-                        id={`${menuId}-item-${index}`}
-                        key={`${menuId}-item-${index}`}
-                        label={item.label}
-                        onClick={(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-                            onChange?.(isMulti ? multiSelectValue(selected, item.value) : [item.value], event);
-                        }}
-                        tabIndex={-1}
-                        trailing={
-                            isMulti ? (
-                                <Checkbox
-                                    aria-label={item.label}
-                                    checked={selected}
-                                    name={item.value}
-                                    onChange={(checked) => {
-                                        onChange?.(multiSelectValue(checked, item.value));
-                                    }}
-                                    value={item.value}
-                                />
-                            ) : (
-                                item.trailing || undefined
-                            )
-                        }
-                    />
-                );
-            })}
-        </>
-    );
-}

package/src/components/Combobox/index.tsx

@@ -1 +0,0 @@
-export * from './Combobox';