@moneyforward/mfui-components 3.1.0 → 3.3.0

package/dist/src/SelectBox/SelectBox.js

@@ -1,12 +1,14 @@
 'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
-import { Dropdown as DropdownIcon } from '@moneyforward/mfui-icons-react';
+import { Dropdown as DropdownIcon, Error } from '@moneyforward/mfui-icons-react';
 import { ClearButton } from '../shared/ClearButton';
 import { FocusIndicator } from '../FocusIndicator';
 import { selectBoxSlotRecipe } from '../../styled-system/recipes';
 import { Typography } from '../Typography';
 import { SearchBox } from '../SearchBox';
+import { Button } from '../Button';
+import { ProgressIndicator } from '../ProgressIndicator';
 import { useSearchBox } from './hooks/useSearchBox';
 import { Skeleton } from '../Skeleton';
 import { useFocusTrap } from '../utilities/dom/useFocusTrap';
@@ -22,6 +24,7 @@ import { SelectBoxOptionComponent } from './SelectBoxOption';
 import { SelectBoxOptionGroup } from './SelectBoxOptionGroup';
 import { isOptionDisabled } from './utils/isSelectableOption';
 import { useVirtualizedOptions } from './hooks/useVirtualizedOptions';
+import { useInfiniteScroll } from '../utilities/dom/useInfiniteScroll';
 const DEFAULT_SCROLL_OPTIONS = {
     behavior: 'auto',
     block: 'center',
@@ -35,7 +38,7 @@ const SKELETON_ITEM_COUNT = 4;
 export const SelectBox = forwardRef((props, ref) => {
     const { id, triggerProps, clearButtonProps, enableClearButton = false, size, options = [], defaultValue, 
     // eslint-disable-next-line @typescript-eslint/no-deprecated
-    placeholder, emptyMessage, disabled, invalid, targetDOMNode, name, onChange, onBlur, value, enableSearchOptions = false, notFoundMessage, searchBoxProps, loading = false, onSearchOptions, renderDisplayValue, renderOption, renderPopoverContent, enableAutoScrollToSelectedOption, popoverContentProps, popoverWrapperProps, onOpenStateChanged, showGroupOptionDivider, triggerWrapperProps, enableAutoUnmount = true, enableConstrainedPopoverWidth = false, enableVirtualization = false, virtualizationOptions, } = props;
+    placeholder, emptyMessage, disabled, invalid, targetDOMNode, name, onChange, onBlur, value, enableSearchOptions = false, notFoundMessage, searchBoxProps, loading = false, onSearchOptions, renderDisplayValue, renderOption, renderPopoverContent, enableAutoScrollToSelectedOption, popoverContentProps, popoverWrapperProps, onOpenStateChanged, showGroupOptionDivider, triggerWrapperProps, enableAutoUnmount = true, enableConstrainedPopoverWidth = false, enableVirtualization = false, virtualizationOptions, infiniteScroll, } = props;
     const classes = selectBoxSlotRecipe({ size, showGroupOptionDivider });
     const triggerRef = useRef(null);
     const listBoxId = useId();
@@ -117,6 +120,25 @@ export const SelectBox = forwardRef((props, ref) => {
         estimateSize: virtualizationOptions?.estimateSize,
         overscan: virtualizationOptions?.overscan,
     });
+    // Extract infinite scroll configuration with defaults
+    const baseEnabledInfiniteScroll = infiniteScroll?.enabled ?? false;
+    const onLoadMore = infiniteScroll?.onLoadMore;
+    const hasNextPage = infiniteScroll?.hasNextPage ?? true;
+    const hasPreviousPage = infiniteScroll?.hasPreviousPage ?? true;
+    const infiniteScrollThreshold = infiniteScroll?.threshold ?? 100;
+    const infiniteScrollErrorMessage = infiniteScroll?.errorMessage ?? '読み込みに失敗しました';
+    const infiniteScrollRetryButtonText = infiniteScroll?.retryButtonText ?? '再読み込み';
+    // Initialize infinite scroll
+    const { isLoading: isInfiniteScrollLoading, error: infiniteScrollError, handleScroll: handleInfiniteScroll, retryLoad: retryInfiniteScroll, } = useInfiniteScroll({
+        onLoadMore,
+        hasNextPage,
+        hasPreviousPage,
+    }, {
+        enabled: baseEnabledInfiniteScroll,
+        threshold: infiniteScrollThreshold,
+    });
+    // Disable infinite scroll when there's an error
+    const enableInfiniteScroll = baseEnabledInfiniteScroll && !infiniteScrollError;
     const handleSelectOption = useCallback((option) => {
         if (isOptionDisabled(option))
             return;
@@ -186,10 +208,10 @@ export const SelectBox = forwardRef((props, ref) => {
         if (renderDisplayValue) {
             return renderDisplayValue(localSelectedOption);
         }
-        if (placeholder && !localSelectedOption) {
-            return _jsx(Typography, { variant: "controlLabel", children: placeholder });
+        if (localSelectedOption) {
+            return (_jsx(Typography, { variant: "controlLabel", className: cx(classes.displayValue, 'mfui-SelectBox__displayValue'), children: localSelectedOption.label }));
         }
-        return (_jsx(Typography, { variant: "controlLabel", children: localSelectedOption ? localSelectedOption.label : placeholder }));
+        return (_jsx(Typography, { variant: "controlLabel", className: cx(classes.placeholder, 'mfui-SelectBox__placeholder'), children: placeholder }));
     };
     const searchNode = enableSearchOptions ? (_jsx("div", { className: cx(classes.menuHeader, 'mfui-SelectBox__menuHeader'), children: _jsx(SearchBox, { ref: searchInputRef, enableClearButton: true, value: searchText, textBoxSize: "small", autoComplete: "off", onChange: onSearchTextChange, ...searchBoxProps }) })) : null;
     // Render virtualized items - extracted for better maintainability
@@ -266,7 +288,23 @@ export const SelectBox = forwardRef((props, ref) => {
                 : options.length > 0
                     ? notFoundMessage
                     : emptyMessage }) })), [classes.emptyMessage, enableSearchOptions, searchText, notFoundMessage, options.length, emptyMessage]);
-    const optionsNode = (_jsx("div", { ref: scrollWrapperRef, className: cx(classes.scrollWrapper, 'mfui-SelectBox__scrollWrapper'), children: _jsx("ul", { role: "listbox", id: listBoxId, className: cx(classes.listBox, 'mfui-SelectBox__listBox'), tabIndex: -1, style: isVirtualized
+    // Render infinite scroll error message with retry button
+    const renderInfiniteScrollError = useCallback(() => infiniteScrollError ? (_jsxs("li", { className: cx(classes.infiniteScrollError, 'mfui-SelectBox__infiniteScrollError'), role: "alert", children: [_jsxs("div", { className: cx(classes.infiniteScrollErrorMessage, 'mfui-SelectBox__infiniteScrollErrorMessage'), "aria-live": "polite", children: [_jsx(Error, { "aria-hidden": true, className: cx(classes.infiniteScrollErrorIcon, 'mfui-SelectBox__infiniteScrollErrorIcon') }), _jsx(Typography, { variant: "body", children: infiniteScrollErrorMessage })] }), _jsx("div", { className: cx(classes.infiniteScrollErrorButton, 'mfui-SelectBox__infiniteScrollErrorButton'), children: _jsx(Button, { size: "small", onClick: (event) => {
+                        event.stopPropagation();
+                        retryInfiniteScroll();
+                    }, children: infiniteScrollRetryButtonText }) })] })) : null, [
+        infiniteScrollError,
+        classes.infiniteScrollError,
+        classes.infiniteScrollErrorIcon,
+        classes.infiniteScrollErrorMessage,
+        classes.infiniteScrollErrorButton,
+        retryInfiniteScroll,
+        infiniteScrollErrorMessage,
+        infiniteScrollRetryButtonText,
+    ]);
+    // Render infinite scroll loading indicator
+    const renderInfiniteScrollLoading = useCallback(() => isInfiniteScrollLoading && enableInfiniteScroll ? (_jsx("div", { className: cx(classes.infiniteScrollLoading, 'mfui-SelectBox__infiniteScrollLoading'), children: _jsx(ProgressIndicator, {}) })) : null, [isInfiniteScrollLoading, enableInfiniteScroll, classes.infiniteScrollLoading]);
+    const optionsNode = (_jsx("div", { ref: scrollWrapperRef, className: cx(classes.scrollWrapper, 'mfui-SelectBox__scrollWrapper'), onScroll: enableInfiniteScroll ? handleInfiniteScroll : undefined, children: _jsx("ul", { role: "listbox", id: listBoxId, className: cx(classes.listBox, 'mfui-SelectBox__listBox'), tabIndex: -1, style: isVirtualized
                 ? {
                     height: `${String(totalSize)}px`,
                     position: 'relative',
@@ -275,10 +313,10 @@ export const SelectBox = forwardRef((props, ref) => {
                 ? Array.from({ length: SKELETON_ITEM_COUNT }).map((_, index) => (_jsx("li", { className: cx(classes.skeletonItem, 'mfui-SelectBox__skeletonItem'), children: _jsx(Skeleton, {}) }, index)))
                 : isVirtualized && virtualItems.length > 0
                     ? // Virtualized rendering with group support
-                        renderVirtualizedItems()
+                        [...renderVirtualizedItems(), renderInfiniteScrollLoading(), renderInfiniteScrollError()].filter(Boolean)
                     : filteredOptions.length > 0
-                        ? renderNonVirtualizedItems()
-                        : renderEmptyMessage() }) }));
+                        ? [...renderNonVirtualizedItems(), renderInfiniteScrollLoading(), renderInfiniteScrollError()].filter(Boolean)
+                        : [renderEmptyMessage(), renderInfiniteScrollError()].filter(Boolean) }) }));
     const handleClearValue = () => {
         setLocalSelectedOption(null);
         onChange?.(null);
@@ -290,7 +328,7 @@ export const SelectBox = forwardRef((props, ref) => {
     return (_jsx(Popover, { open: isOptionPanelOpen, targetDOMNode: targetDOMNode, minWidth: popoverContentProps?.minWidth, maxHeight: popoverWrapperProps?.maxHeight, allowedPlacements: popoverContentProps?.allowedPlacements, enableConstrainedContentWidth: enableConstrainedPopoverWidth, renderContent: () => (_jsx("div", { ref: optionPanelRef, id: listBoxId, className: cx(classes.optionPanel, 'mfui-SelectBox__optionPanel', popoverContentProps?.className), tabIndex: -1, onKeyDown: handleKeyDownMenu, children: renderPopoverContent ? (renderPopoverContent({ searchNode, optionsNode })) : (_jsxs(_Fragment, { children: [searchNode, optionsNode] })) })), renderTrigger: ({ setTriggerRef, togglePopover, isPopoverOpen, handleTriggerKeyDown, handleTriggerBlur }) => (_jsxs("div", { ref: setTriggerRef, ...triggerWrapperProps, className: cx(classes.triggerWrapper, 'mfui-SelectBox__triggerWrapper', triggerWrapperProps?.className), children: [_jsx(FocusIndicator, { children: _jsxs("button", { ref: triggerRef, id: id, type: "button", role: "combobox", disabled: disabled, "aria-label": triggerProps?.['aria-label'], "aria-controls": listBoxId, "aria-expanded": isPopoverOpen, "aria-haspopup": "listbox", "aria-invalid": invalid, className: cx(classes.trigger, 'mfui-SelectBox__trigger', triggerProps?.className), "data-placeholder": !!placeholder && !localSelectedOption, "data-selected": !!localSelectedOption, "data-mfui-has-clear-button": showClearButton, onClick: togglePopover, onKeyDown: (event) => {
                             handleTypeAhead(event.nativeEvent);
                             handleTriggerKeyDown(event);
-                        }, onBlur: handleTriggerBlur, children: [_jsx("span", { "data-mfui-content": "select-box-trigger-display-value", children: renderTriggerLabel() }), _jsx(DropdownIcon, {}), _jsx("input", { ref: ref, type: "hidden", value: localSelectedOption?.value ?? '', name: name, disabled: disabled })] }) }), showClearButton ? (_jsx("div", { className: cx(classes.clearButtonWrapper, 'mfui-SelectBox__clearButtonWrapper'), children: _jsx(ClearButton, { size: size === 'small' ? 'small' : 'default', "aria-label": clearButtonProps?.['aria-label'] ?? '値をクリアする', "data-mfui-content": "select-box-clear-button", onClick: (event) => {
+                        }, onBlur: handleTriggerBlur, children: [_jsx("span", { "data-mfui-content": "select-box-trigger-display-value", children: renderTriggerLabel() }), _jsx(DropdownIcon, {}), _jsx("input", { ref: ref, type: "hidden", value: localSelectedOption?.value ?? '', name: name, disabled: disabled })] }) }), showClearButton ? (_jsx("div", { className: cx(classes.clearButtonWrapper, 'mfui-SelectBox__clearButtonWrapper'), children: _jsx(ClearButton, { size: size === 'small' ? 'small' : size === 'large' ? 'large' : 'default', "aria-label": clearButtonProps?.['aria-label'] ?? '値をクリアする', "data-mfui-content": "select-box-clear-button", onClick: (event) => {
                             event.stopPropagation();
                             handleClearValue();
                         } }) })) : null] })), contentProps: { className: classes.popover }, enableAutoUnmount: enableAutoUnmount, onOpenStateChanged: toggleOptionPanel, onBlur: onBlur }));

package/dist/src/SelectBox/SelectBox.types.d.ts

@@ -3,8 +3,61 @@ import { type VirtualizerOptions } from '@tanstack/react-virtual';
 import { type SelectBoxSlotRecipeVariant } from '../../styled-system/recipes';
 import { type SearchBoxProps } from '../SearchBox';
 import { type PopoverProps } from '../Popover';
+import { type InfiniteScrollDirection } from '../utilities/dom/useInfiniteScroll';
 type AllowedValueTypes = string | number | undefined;
 export type VirtualOptionTypes = Pick<VirtualizerOptions<HTMLElement, Element>, 'estimateSize' | 'overscan'>;
+export type InfiniteScrollConfig = {
+    /**
+     * Enable infinite scroll functionality.
+     * When enabled, additional options can be loaded dynamically when scrolling.
+     *
+     * @default false
+     */
+    enabled?: boolean;
+    /**
+     * Callback executed when more options need to be loaded.
+     * Called when user scrolls near the top or bottom of the options list.
+     *
+     * @param direction - The direction of loading ('forward' for bottom, 'backward' for top)
+     */
+    onLoadMore?: (direction: InfiniteScrollDirection) => Promise<void>;
+    /**
+     * Whether there are more options available to load in the forward direction (bottom).
+     * Used to determine if infinite scroll should trigger when scrolling down.
+     *
+     * @default true
+     */
+    hasNextPage?: boolean;
+    /**
+     * Whether there are more options available to load in the backward direction (top).
+     * Used to determine if infinite scroll should trigger when scrolling up.
+     *
+     * @default true
+     */
+    hasPreviousPage?: boolean;
+    /**
+     * The scroll threshold in pixels for triggering infinite scroll.
+     * When the scroll position is within this distance from the top or bottom,
+     * the onLoadMore callback will be triggered.
+     *
+     * @default 100
+     */
+    threshold?: number;
+    /**
+     * The error message to display when loading fails.
+     * This message supports internationalization.
+     *
+     * @default "Failed to load data"
+     */
+    errorMessage?: string;
+    /**
+     * The text for the retry button when loading fails.
+     * This message supports internationalization.
+     *
+     * @default "Retry"
+     */
+    retryButtonText?: string;
+};
 export type BasedAdditionalProps = Record<string, unknown>;
 export type SelectBoxOption<T extends AllowedValueTypes = string, AdditionalProps extends BasedAdditionalProps = BasedAdditionalProps> = ({
     /**
@@ -351,5 +404,31 @@ export type SelectBoxProps<T extends AllowedValueTypes = string, AdditionalProps
      * ```
      */
     virtualizationOptions?: VirtualOptionTypes;
+    /**
+     * Infinite scroll configuration.
+     * When provided, enables infinite scroll functionality for loading additional options dynamically.
+     *
+     * @example
+     * ```tsx
+     * <SelectBox
+     *   infiniteScroll={{
+     *     enabled: true,
+     *     onLoadMore: async (direction) => {
+     *       if (direction === 'forward') {
+     *         const nextOptions = await loadNextPage();
+     *         setOptions(prev => [...prev, ...nextOptions]);
+     *       } else {
+     *         const prevOptions = await loadPreviousPage();
+     *         setOptions(prev => [...prevOptions, ...prev]);
+     *       }
+     *     },
+     *     hasNextPage: hasMore,
+     *     hasPreviousPage: hasPrevious,
+     *     threshold: 50 // Trigger when within 50px of edges
+     *   }}
+     * />
+     * ```
+     */
+    infiniteScroll?: InfiniteScrollConfig;
 };
-export {};
+export { type InfiniteScrollDirection } from '../utilities/dom/useInfiniteScroll';

package/dist/src/Tag/Tag.js

@@ -22,7 +22,7 @@ export function Tag({ label, onClick, href, customLinkComponent, disabled = fals
         return (_jsx(FocusIndicator, { children: _jsxs("span", { className: cx(classes.root, 'mfui-Tag__root', className), children: [_jsx(Typography, { variant: "condensedInput", children: label }), onClose ? closeButton : null] }) }));
     }
     const InternalTag = href ? (customLinkComponent ?? 'a') : 'button';
-    const tagProps = href ? { href, target, rel } : { disabled, onClick };
+    const tagProps = href ? { href, target, rel } : { disabled, onClick, type: 'button' };
     const WrapperTag = onClose ? 'div' : Fragment;
     const wrapperProps = onClose ? { className: cx(classes.wrapper, 'mfui-Tag__wrapper', className) } : undefined;
     return (_jsxs(WrapperTag, { ...wrapperProps, children: [_jsx(FocusIndicator, { children: _jsx(InternalTag, { className: cx(classes.root, 'mfui-Tag__root'), ...tagProps, children: _jsx(Typography, { variant: "condensedInput", children: label }) }) }), onClose ? closeButton : null] }));

package/dist/src/ToggleSwitch/ToggleSwitch.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The general-purpose ToggleSwitch component.
+ * This component provides a switch to toggle between ON and OFF states.
+ *
+ * This component extends the props of `<input type="checkbox">` element.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox
+ */
+export declare const ToggleSwitch: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/src/ToggleSwitch/ToggleSwitch.js

@@ -0,0 +1,32 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState } from 'react';
+import { cx } from '../../styled-system/css';
+import { toggleSwitchSlotRecipe } from '../../styled-system/recipes';
+import { FocusIndicator } from '../FocusIndicator/FocusIndicator';
+/**
+ * The general-purpose ToggleSwitch component.
+ * This component provides a switch to toggle between ON and OFF states.
+ *
+ * This component extends the props of `<input type="checkbox">` element.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox
+ */
+export const ToggleSwitch = forwardRef(({ className, checked, defaultChecked, disabled, onChange, ...props }, ref) => {
+    const [localChecked, setLocalChecked] = useState(!!defaultChecked);
+    const isControlled = checked !== undefined;
+    const classes = toggleSwitchSlotRecipe();
+    const isChecked = isControlled ? checked : localChecked;
+    return (_jsx(FocusIndicator, { children: _jsxs("span", { className: cx(classes.root, 'mfui-ToggleSwitch__root', className), children: [_jsx("span", { className: cx(classes.handle, 'mfui-ToggleSwitch__handle'), "data-mfui-content": "toggle-handle" }), _jsx("input", { ref: ref, type: "checkbox", role: "switch", checked: isChecked, disabled: disabled, className: cx(classes.input, 'mfui-ToggleSwitch__input'), "data-mfui-content": "toggle-input", onChange: (event) => {
+                        onChange?.(event);
+                        // If the event is defaultPrevented in "onChange" prop via "e.preventDefault()", do not update local
+                        // states.
+                        if (event.defaultPrevented) {
+                            return;
+                        }
+                        if (!isControlled) {
+                            setLocalChecked(event.target.checked);
+                        }
+                    }, ...props })] }) }));
+});
+ToggleSwitch.displayName = 'ToggleSwitch';

package/dist/src/ToggleSwitch/ToggleSwitch.types.d.ts

@@ -0,0 +1,6 @@
+import { type ComponentPropsWithoutRef } from 'react';
+/**
+ * ToggleSwitch component props.
+ * Extends the standard HTML input checkbox element props.
+ */
+export type ToggleSwitchProps = ComponentPropsWithoutRef<'input'>;

package/dist/src/ToggleSwitch/ToggleSwitch.types.js

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

package/dist/src/ToggleSwitch/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ToggleSwitch';
+export * from './ToggleSwitch.types';

package/dist/src/ToggleSwitch/index.js

@@ -0,0 +1,2 @@
+export * from './ToggleSwitch';
+export * from './ToggleSwitch.types';

package/dist/src/index.d.ts

@@ -21,6 +21,7 @@ export * from './MainNavigation';
 export * from './SelectBox';
 export * from './SidePane';
 export * from './Toast';
+export * from './ToggleSwitch';
 export * from './Pagination';
 export * from './Tag';
 export * from './ProgressIndicator';

package/dist/src/index.js

@@ -21,6 +21,7 @@ export * from './MainNavigation';
 export * from './SelectBox';
 export * from './SidePane';
 export * from './Toast';
+export * from './ToggleSwitch';
 export * from './Pagination';
 export * from './Tag';
 export * from './ProgressIndicator';

package/dist/src/utilities/dom/useFixedColumns.js

@@ -37,19 +37,45 @@ export const useFixedColumns = ({ enableRowSelection = false, columnIndex, leftF
         if (!cellRef.current)
             return;
         const cell = cellRef.current;
+        const row = cell.closest('tr');
         const table = cell.closest('table');
-        if (!table)
+        if (!row || !table)
             return;
-        const tableRect = table.getBoundingClientRect();
-        const cellRect = cell.getBoundingClientRect();
-        // Calculate distance from left edge
-        const leftPosition = cellRect.left - tableRect.left;
-        // Calculate distance from right edge
-        const rightPosition = tableRect.right - cellRect.right;
-        setCellRect({
-            left: leftPosition,
-            right: rightPosition,
+        const calculatePosition = () => {
+            const cells = [...row.querySelectorAll('th, td')];
+            const cellIndex = cells.indexOf(cell);
+            if (cellIndex === -1)
+                return;
+            // Calculate left position by summing widths of previous cells
+            let leftPosition = 0;
+            for (let i = 0; i < cellIndex; i++) {
+                const cellElement = cells[i];
+                if (cellElement) {
+                    leftPosition += cellElement.offsetWidth;
+                }
+            }
+            // Calculate right position by summing widths of following cells
+            let rightPosition = 0;
+            for (let i = cellIndex + 1; i < cells.length; i++) {
+                const cellElement = cells[i];
+                if (cellElement) {
+                    rightPosition += cellElement.offsetWidth;
+                }
+            }
+            setCellRect({
+                left: leftPosition,
+                right: rightPosition,
+            });
+        };
+        calculatePosition();
+        // Recalculate on table resize (e.g., when content changes after sorting)
+        const resizeObserver = new ResizeObserver(() => {
+            calculatePosition();
         });
+        resizeObserver.observe(table);
+        return () => {
+            resizeObserver.disconnect();
+        };
     }, []);
     useLayoutEffect(() => {
         if (isCheckboxColumn && leftFixedColumnIndex !== undefined) {

package/dist/src/utilities/dom/useInfiniteScroll.d.ts

@@ -0,0 +1,22 @@
+export type InfiniteScrollDirection = 'forward' | 'backward';
+export type InfiniteScrollCallbacks = {
+    onLoadMore?: (direction: InfiniteScrollDirection) => Promise<void>;
+    hasNextPage?: boolean;
+    hasPreviousPage?: boolean;
+};
+export type InfiniteScrollError = {
+    direction: InfiniteScrollDirection;
+    error: Error;
+};
+export type UseInfiniteScrollOptions = {
+    enabled?: boolean;
+    threshold?: number;
+};
+export type UseInfiniteScrollReturn = {
+    isLoading: boolean;
+    error: InfiniteScrollError | null;
+    handleScroll: (event: React.UIEvent<HTMLElement>) => void;
+    retryLoad: () => void;
+    clearError: () => void;
+};
+export declare const useInfiniteScroll: (callbacks: InfiniteScrollCallbacks, options?: UseInfiniteScrollOptions) => UseInfiniteScrollReturn;

package/dist/src/utilities/dom/useInfiniteScroll.js

@@ -0,0 +1,65 @@
+import { useCallback, useRef, useState } from 'react';
+export const useInfiniteScroll = (callbacks, options = {}) => {
+    const { enabled = true, threshold = 100 } = options;
+    const { onLoadMore, hasNextPage = true, hasPreviousPage = true } = callbacks;
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const isLoadingRef = useRef(false);
+    const executeLoad = useCallback(async (direction, forceLoad = false) => {
+        if ((!enabled && !forceLoad) || !onLoadMore || isLoadingRef.current)
+            return;
+        if (direction === 'forward' && !hasNextPage)
+            return;
+        if (direction === 'backward' && !hasPreviousPage)
+            return;
+        try {
+            isLoadingRef.current = true;
+            setIsLoading(true);
+            setError(null);
+            await onLoadMore(direction);
+        }
+        catch (error_) {
+            const errorObject = error_ instanceof Error ? error_ : new Error('Unknown error');
+            setError({ direction, error: errorObject });
+        }
+        finally {
+            isLoadingRef.current = false;
+            setIsLoading(false);
+        }
+    }, [enabled, onLoadMore, hasNextPage, hasPreviousPage]);
+    const handleScroll = useCallback((event) => {
+        if (!enabled || isLoadingRef.current)
+            return;
+        const target = event.currentTarget;
+        const { scrollTop, scrollHeight, clientHeight } = target;
+        const nearTop = scrollTop <= threshold;
+        const nearBottom = scrollTop + clientHeight >= scrollHeight - threshold;
+        if (nearBottom && hasNextPage) {
+            executeLoad('forward').catch(() => {
+                // Error handling is done within executeLoad
+            });
+        }
+        else if (nearTop && hasPreviousPage) {
+            executeLoad('backward').catch(() => {
+                // Error handling is done within executeLoad
+            });
+        }
+    }, [enabled, threshold, hasNextPage, hasPreviousPage, executeLoad]);
+    const retryLoad = useCallback(() => {
+        if (error) {
+            executeLoad(error.direction, true).catch(() => {
+                // Error handling is done within executeLoad
+            });
+        }
+    }, [error, executeLoad]);
+    const clearError = useCallback(() => {
+        setError(null);
+    }, []);
+    return {
+        isLoading,
+        error,
+        handleScroll,
+        retryLoad,
+        clearError,
+    };
+};

package/dist/styled-system/css/conditions.js

@@ -1,5 +1,5 @@
 import { withoutSpace } from '../helpers.js';
-const conditionsStr = "_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_complete,_incomplete,_dragging,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_grabbed,_underValue,_overValue,_atValue,_default,_optional,_open,_closed,_fullscreen,_loading,_hidden,_current,_currentPage,_currentStep,_today,_unavailable,_rangeStart,_rangeEnd,_now,_topmost,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_icon,_starting,_noscript,_invertedColors,_notDisabled,_notFocused,_focusable,_focusInputInside,_hasCheckboxInside,_hasDisabledCheckboxInside,_hasFocusedCheckboxInside,_hasFocusedCheckedCheckboxInside,_hasCheckedCheckboxInside,_hasRadioButtonInside,_hasFocusedRadioButtonInside,_hasFocusedCheckedRadioButtonInside,_hasDisabledRadioButtonInside,_hasCheckedRadioButtonInside,sm,smOnly,smDown,lg,lgOnly,lgDown,smToLg,base";
+const conditionsStr = "_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_complete,_incomplete,_dragging,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_grabbed,_underValue,_overValue,_atValue,_default,_optional,_open,_closed,_fullscreen,_loading,_hidden,_current,_currentPage,_currentStep,_today,_unavailable,_rangeStart,_rangeEnd,_now,_topmost,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_icon,_starting,_noscript,_invertedColors,_notDisabled,_notFocused,_focusable,_focusInputInside,_hasCheckboxInside,_hasDisabledCheckboxInside,_hasFocusedCheckboxInside,_hasFocusedCheckedCheckboxInside,_hasCheckedCheckboxInside,_hasRadioButtonInside,_hasFocusedRadioButtonInside,_hasFocusedCheckedRadioButtonInside,_hasDisabledRadioButtonInside,_hasCheckedRadioButtonInside,_hasToggleSwitchInside,_hasFocusedToggleSwitchInside,_hasFocusedCheckedToggleSwitchInside,_hasDisabledToggleSwitchInside,_hasCheckedToggleSwitchInside,sm,smOnly,smDown,lg,lgOnly,lgDown,smToLg,base";
 const conditions = new Set(conditionsStr.split(','));
 const conditionRegex = /^@|&|&$/;
 export function isCondition(value) {

package/dist/styled-system/jsx/is-valid-prop.js

@@ -1,7 +1,7 @@
 import { splitProps } from '../helpers.js';
 import { memo } from '../helpers.js';
 // src/index.ts
-var userGeneratedStr = "css,pos,insetX,insetY,insetEnd,end,insetStart,start,flexDir,p,pl,pr,pt,pb,py,paddingY,paddingX,px,pe,paddingEnd,ps,paddingStart,ml,mr,mt,mb,m,my,marginY,mx,marginX,me,marginEnd,ms,marginStart,ringWidth,ringColor,ring,ringOffset,w,minW,maxW,h,minH,maxH,textShadowColor,bgPosition,bgPositionX,bgPositionY,bgAttachment,bgClip,bg,bgColor,bgOrigin,bgImage,bgRepeat,bgBlendMode,bgSize,bgGradient,bgLinear,bgRadial,bgConic,rounded,roundedTopLeft,roundedTopRight,roundedBottomRight,roundedBottomLeft,roundedTop,roundedRight,roundedBottom,roundedLeft,roundedStartStart,roundedStartEnd,roundedStart,roundedEndStart,roundedEndEnd,roundedEnd,borderX,borderXWidth,borderXColor,borderY,borderYWidth,borderYColor,borderStart,borderStartWidth,borderStartColor,borderEnd,borderEndWidth,borderEndColor,shadow,shadowColor,x,y,z,scrollMarginY,scrollMarginX,scrollPaddingY,scrollPaddingX,aspectRatio,boxDecorationBreak,zIndex,boxSizing,objectPosition,objectFit,overscrollBehavior,overscrollBehaviorX,overscrollBehaviorY,position,top,left,inset,insetInline,insetBlock,insetBlockEnd,insetBlockStart,insetInlineEnd,insetInlineStart,right,bottom,float,visibility,display,hideFrom,hideBelow,flexBasis,flex,flexDirection,flexGrow,flexShrink,gridTemplateColumns,gridTemplateRows,gridColumn,gridRow,gridColumnStart,gridColumnEnd,gridAutoFlow,gridAutoColumns,gridAutoRows,gap,gridGap,gridRowGap,gridColumnGap,rowGap,columnGap,justifyContent,alignContent,alignItems,alignSelf,padding,paddingLeft,paddingRight,paddingTop,paddingBottom,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingInline,paddingInlineEnd,paddingInlineStart,marginLeft,marginRight,marginTop,marginBottom,margin,marginBlock,marginBlockEnd,marginBlockStart,marginInline,marginInlineEnd,marginInlineStart,spaceX,spaceY,outlineWidth,outlineColor,outline,outlineOffset,focusRing,focusVisibleRing,focusRingColor,focusRingOffset,focusRingWidth,focusRingStyle,divideX,divideY,divideColor,divideStyle,width,inlineSize,minWidth,minInlineSize,maxWidth,maxInlineSize,height,blockSize,minHeight,minBlockSize,maxHeight,maxBlockSize,boxSize,color,fontFamily,fontSize,fontSizeAdjust,fontPalette,fontKerning,fontFeatureSettings,fontWeight,fontSmoothing,fontVariant,fontVariantAlternates,fontVariantCaps,fontVariationSettings,fontVariantNumeric,letterSpacing,lineHeight,textAlign,textDecoration,textDecorationColor,textEmphasisColor,textDecorationStyle,textDecorationThickness,textUnderlineOffset,textTransform,textIndent,textShadow,WebkitTextFillColor,textOverflow,verticalAlign,wordBreak,textWrap,truncate,lineClamp,listStyleType,listStylePosition,listStyleImage,listStyle,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundAttachment,backgroundClip,background,backgroundColor,backgroundOrigin,backgroundImage,backgroundRepeat,backgroundBlendMode,backgroundSize,backgroundGradient,backgroundLinear,backgroundRadial,backgroundConic,textGradient,gradientFromPosition,gradientToPosition,gradientFrom,gradientTo,gradientVia,gradientViaPosition,borderRadius,borderTopLeftRadius,borderTopRightRadius,borderBottomRightRadius,borderBottomLeftRadius,borderTopRadius,borderRightRadius,borderBottomRadius,borderLeftRadius,borderStartStartRadius,borderStartEndRadius,borderStartRadius,borderEndStartRadius,borderEndEndRadius,borderEndRadius,border,borderWidth,borderTopWidth,borderLeftWidth,borderRightWidth,borderBottomWidth,borderBlockStartWidth,borderBlockEndWidth,borderColor,borderInline,borderInlineWidth,borderInlineColor,borderBlock,borderBlockWidth,borderBlockColor,borderLeft,borderLeftColor,borderInlineStart,borderInlineStartWidth,borderInlineStartColor,borderRight,borderRightColor,borderInlineEnd,borderInlineEndWidth,borderInlineEndColor,borderTop,borderTopColor,borderBottom,borderBottomColor,borderBlockEnd,borderBlockEndColor,borderBlockStart,borderBlockStartColor,opacity,boxShadow,boxShadowColor,mixBlendMode,filter,brightness,contrast,grayscale,hueRotate,invert,saturate,sepia,dropShadow,blur,backdropFilter,backdropBlur,backdropBrightness,backdropContrast,backdropGrayscale,backdropHueRotate,backdropInvert,backdropOpacity,backdropSaturate,backdropSepia,borderCollapse,borderSpacing,borderSpacingX,borderSpacingY,tableLayout,transitionTimingFunction,transitionDelay,transitionDuration,transitionProperty,transition,animation,animationName,animationTimingFunction,animationDuration,animationDelay,animationPlayState,animationComposition,animationFillMode,animationDirection,animationIterationCount,animationRange,animationState,animationRangeStart,animationRangeEnd,animationTimeline,transformOrigin,transformBox,transformStyle,transform,rotate,rotateX,rotateY,rotateZ,scale,scaleX,scaleY,translate,translateX,translateY,translateZ,accentColor,caretColor,scrollBehavior,scrollbar,scrollbarColor,scrollbarGutter,scrollbarWidth,scrollMargin,scrollMarginLeft,scrollMarginRight,scrollMarginTop,scrollMarginBottom,scrollMarginBlock,scrollMarginBlockEnd,scrollMarginBlockStart,scrollMarginInline,scrollMarginInlineEnd,scrollMarginInlineStart,scrollPadding,scrollPaddingBlock,scrollPaddingBlockStart,scrollPaddingBlockEnd,scrollPaddingInline,scrollPaddingInlineEnd,scrollPaddingInlineStart,scrollPaddingLeft,scrollPaddingRight,scrollPaddingTop,scrollPaddingBottom,scrollSnapAlign,scrollSnapStop,scrollSnapType,scrollSnapStrictness,scrollSnapMargin,scrollSnapMarginTop,scrollSnapMarginBottom,scrollSnapMarginLeft,scrollSnapMarginRight,scrollSnapCoordinate,scrollSnapDestination,scrollSnapPointsX,scrollSnapPointsY,scrollSnapTypeX,scrollSnapTypeY,scrollTimeline,scrollTimelineAxis,scrollTimelineName,touchAction,userSelect,overflow,overflowWrap,overflowX,overflowY,overflowAnchor,overflowBlock,overflowInline,overflowClipBox,overflowClipMargin,overscrollBehaviorBlock,overscrollBehaviorInline,fill,stroke,strokeWidth,strokeDasharray,strokeDashoffset,strokeLinecap,strokeLinejoin,strokeMiterlimit,strokeOpacity,srOnly,debug,appearance,backfaceVisibility,clipPath,hyphens,mask,maskImage,maskSize,textSizeAdjust,container,containerName,containerType,cursor,colorPalette,_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_complete,_incomplete,_dragging,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_grabbed,_underValue,_overValue,_atValue,_default,_optional,_open,_closed,_fullscreen,_loading,_hidden,_current,_currentPage,_currentStep,_today,_unavailable,_rangeStart,_rangeEnd,_now,_topmost,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_icon,_starting,_noscript,_invertedColors,_notDisabled,_notFocused,_focusable,_focusInputInside,_hasCheckboxInside,_hasDisabledCheckboxInside,_hasFocusedCheckboxInside,_hasFocusedCheckedCheckboxInside,_hasCheckedCheckboxInside,_hasRadioButtonInside,_hasFocusedRadioButtonInside,_hasFocusedCheckedRadioButtonInside,_hasDisabledRadioButtonInside,_hasCheckedRadioButtonInside,sm,smOnly,smDown,lg,lgOnly,lgDown,smToLg";
+var userGeneratedStr = "css,pos,insetX,insetY,insetEnd,end,insetStart,start,flexDir,p,pl,pr,pt,pb,py,paddingY,paddingX,px,pe,paddingEnd,ps,paddingStart,ml,mr,mt,mb,m,my,marginY,mx,marginX,me,marginEnd,ms,marginStart,ringWidth,ringColor,ring,ringOffset,w,minW,maxW,h,minH,maxH,textShadowColor,bgPosition,bgPositionX,bgPositionY,bgAttachment,bgClip,bg,bgColor,bgOrigin,bgImage,bgRepeat,bgBlendMode,bgSize,bgGradient,bgLinear,bgRadial,bgConic,rounded,roundedTopLeft,roundedTopRight,roundedBottomRight,roundedBottomLeft,roundedTop,roundedRight,roundedBottom,roundedLeft,roundedStartStart,roundedStartEnd,roundedStart,roundedEndStart,roundedEndEnd,roundedEnd,borderX,borderXWidth,borderXColor,borderY,borderYWidth,borderYColor,borderStart,borderStartWidth,borderStartColor,borderEnd,borderEndWidth,borderEndColor,shadow,shadowColor,x,y,z,scrollMarginY,scrollMarginX,scrollPaddingY,scrollPaddingX,aspectRatio,boxDecorationBreak,zIndex,boxSizing,objectPosition,objectFit,overscrollBehavior,overscrollBehaviorX,overscrollBehaviorY,position,top,left,inset,insetInline,insetBlock,insetBlockEnd,insetBlockStart,insetInlineEnd,insetInlineStart,right,bottom,float,visibility,display,hideFrom,hideBelow,flexBasis,flex,flexDirection,flexGrow,flexShrink,gridTemplateColumns,gridTemplateRows,gridColumn,gridRow,gridColumnStart,gridColumnEnd,gridAutoFlow,gridAutoColumns,gridAutoRows,gap,gridGap,gridRowGap,gridColumnGap,rowGap,columnGap,justifyContent,alignContent,alignItems,alignSelf,padding,paddingLeft,paddingRight,paddingTop,paddingBottom,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingInline,paddingInlineEnd,paddingInlineStart,marginLeft,marginRight,marginTop,marginBottom,margin,marginBlock,marginBlockEnd,marginBlockStart,marginInline,marginInlineEnd,marginInlineStart,spaceX,spaceY,outlineWidth,outlineColor,outline,outlineOffset,focusRing,focusVisibleRing,focusRingColor,focusRingOffset,focusRingWidth,focusRingStyle,divideX,divideY,divideColor,divideStyle,width,inlineSize,minWidth,minInlineSize,maxWidth,maxInlineSize,height,blockSize,minHeight,minBlockSize,maxHeight,maxBlockSize,boxSize,color,fontFamily,fontSize,fontSizeAdjust,fontPalette,fontKerning,fontFeatureSettings,fontWeight,fontSmoothing,fontVariant,fontVariantAlternates,fontVariantCaps,fontVariationSettings,fontVariantNumeric,letterSpacing,lineHeight,textAlign,textDecoration,textDecorationColor,textEmphasisColor,textDecorationStyle,textDecorationThickness,textUnderlineOffset,textTransform,textIndent,textShadow,WebkitTextFillColor,textOverflow,verticalAlign,wordBreak,textWrap,truncate,lineClamp,listStyleType,listStylePosition,listStyleImage,listStyle,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundAttachment,backgroundClip,background,backgroundColor,backgroundOrigin,backgroundImage,backgroundRepeat,backgroundBlendMode,backgroundSize,backgroundGradient,backgroundLinear,backgroundRadial,backgroundConic,textGradient,gradientFromPosition,gradientToPosition,gradientFrom,gradientTo,gradientVia,gradientViaPosition,borderRadius,borderTopLeftRadius,borderTopRightRadius,borderBottomRightRadius,borderBottomLeftRadius,borderTopRadius,borderRightRadius,borderBottomRadius,borderLeftRadius,borderStartStartRadius,borderStartEndRadius,borderStartRadius,borderEndStartRadius,borderEndEndRadius,borderEndRadius,border,borderWidth,borderTopWidth,borderLeftWidth,borderRightWidth,borderBottomWidth,borderBlockStartWidth,borderBlockEndWidth,borderColor,borderInline,borderInlineWidth,borderInlineColor,borderBlock,borderBlockWidth,borderBlockColor,borderLeft,borderLeftColor,borderInlineStart,borderInlineStartWidth,borderInlineStartColor,borderRight,borderRightColor,borderInlineEnd,borderInlineEndWidth,borderInlineEndColor,borderTop,borderTopColor,borderBottom,borderBottomColor,borderBlockEnd,borderBlockEndColor,borderBlockStart,borderBlockStartColor,opacity,boxShadow,boxShadowColor,mixBlendMode,filter,brightness,contrast,grayscale,hueRotate,invert,saturate,sepia,dropShadow,blur,backdropFilter,backdropBlur,backdropBrightness,backdropContrast,backdropGrayscale,backdropHueRotate,backdropInvert,backdropOpacity,backdropSaturate,backdropSepia,borderCollapse,borderSpacing,borderSpacingX,borderSpacingY,tableLayout,transitionTimingFunction,transitionDelay,transitionDuration,transitionProperty,transition,animation,animationName,animationTimingFunction,animationDuration,animationDelay,animationPlayState,animationComposition,animationFillMode,animationDirection,animationIterationCount,animationRange,animationState,animationRangeStart,animationRangeEnd,animationTimeline,transformOrigin,transformBox,transformStyle,transform,rotate,rotateX,rotateY,rotateZ,scale,scaleX,scaleY,translate,translateX,translateY,translateZ,accentColor,caretColor,scrollBehavior,scrollbar,scrollbarColor,scrollbarGutter,scrollbarWidth,scrollMargin,scrollMarginLeft,scrollMarginRight,scrollMarginTop,scrollMarginBottom,scrollMarginBlock,scrollMarginBlockEnd,scrollMarginBlockStart,scrollMarginInline,scrollMarginInlineEnd,scrollMarginInlineStart,scrollPadding,scrollPaddingBlock,scrollPaddingBlockStart,scrollPaddingBlockEnd,scrollPaddingInline,scrollPaddingInlineEnd,scrollPaddingInlineStart,scrollPaddingLeft,scrollPaddingRight,scrollPaddingTop,scrollPaddingBottom,scrollSnapAlign,scrollSnapStop,scrollSnapType,scrollSnapStrictness,scrollSnapMargin,scrollSnapMarginTop,scrollSnapMarginBottom,scrollSnapMarginLeft,scrollSnapMarginRight,scrollSnapCoordinate,scrollSnapDestination,scrollSnapPointsX,scrollSnapPointsY,scrollSnapTypeX,scrollSnapTypeY,scrollTimeline,scrollTimelineAxis,scrollTimelineName,touchAction,userSelect,overflow,overflowWrap,overflowX,overflowY,overflowAnchor,overflowBlock,overflowInline,overflowClipBox,overflowClipMargin,overscrollBehaviorBlock,overscrollBehaviorInline,fill,stroke,strokeWidth,strokeDasharray,strokeDashoffset,strokeLinecap,strokeLinejoin,strokeMiterlimit,strokeOpacity,srOnly,debug,appearance,backfaceVisibility,clipPath,hyphens,mask,maskImage,maskSize,textSizeAdjust,container,containerName,containerType,cursor,colorPalette,_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_complete,_incomplete,_dragging,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_grabbed,_underValue,_overValue,_atValue,_default,_optional,_open,_closed,_fullscreen,_loading,_hidden,_current,_currentPage,_currentStep,_today,_unavailable,_rangeStart,_rangeEnd,_now,_topmost,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_icon,_starting,_noscript,_invertedColors,_notDisabled,_notFocused,_focusable,_focusInputInside,_hasCheckboxInside,_hasDisabledCheckboxInside,_hasFocusedCheckboxInside,_hasFocusedCheckedCheckboxInside,_hasCheckedCheckboxInside,_hasRadioButtonInside,_hasFocusedRadioButtonInside,_hasFocusedCheckedRadioButtonInside,_hasDisabledRadioButtonInside,_hasCheckedRadioButtonInside,_hasToggleSwitchInside,_hasFocusedToggleSwitchInside,_hasFocusedCheckedToggleSwitchInside,_hasDisabledToggleSwitchInside,_hasCheckedToggleSwitchInside,sm,smOnly,smDown,lg,lgOnly,lgDown,smToLg";
 var userGenerated = userGeneratedStr.split(",");
 var cssPropertiesStr = "WebkitAppearance,WebkitBorderBefore,WebkitBorderBeforeColor,WebkitBorderBeforeStyle,WebkitBorderBeforeWidth,WebkitBoxReflect,WebkitLineClamp,WebkitMask,WebkitMaskAttachment,WebkitMaskClip,WebkitMaskComposite,WebkitMaskImage,WebkitMaskOrigin,WebkitMaskPosition,WebkitMaskPositionX,WebkitMaskPositionY,WebkitMaskRepeat,WebkitMaskRepeatX,WebkitMaskRepeatY,WebkitMaskSize,WebkitOverflowScrolling,WebkitTapHighlightColor,WebkitTextFillColor,WebkitTextStroke,WebkitTextStrokeColor,WebkitTextStrokeWidth,WebkitTouchCallout,WebkitUserModify,WebkitUserSelect,accentColor,alignContent,alignItems,alignSelf,alignTracks,all,anchorName,anchorScope,animation,animationComposition,animationDelay,animationDirection,animationDuration,animationFillMode,animationIterationCount,animationName,animationPlayState,animationRange,animationRangeEnd,animationRangeStart,animationTimeline,animationTimingFunction,appearance,aspectRatio,backdropFilter,backfaceVisibility,background,backgroundAttachment,backgroundBlendMode,backgroundClip,backgroundColor,backgroundImage,backgroundOrigin,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundRepeat,backgroundSize,blockSize,border,borderBlock,borderBlockColor,borderBlockEnd,borderBlockEndColor,borderBlockEndStyle,borderBlockEndWidth,borderBlockStart,borderBlockStartColor,borderBlockStartStyle,borderBlockStartWidth,borderBlockStyle,borderBlockWidth,borderBottom,borderBottomColor,borderBottomLeftRadius,borderBottomRightRadius,borderBottomStyle,borderBottomWidth,borderCollapse,borderColor,borderEndEndRadius,borderEndStartRadius,borderImage,borderImageOutset,borderImageRepeat,borderImageSlice,borderImageSource,borderImageWidth,borderInline,borderInlineColor,borderInlineEnd,borderInlineEndColor,borderInlineEndStyle,borderInlineEndWidth,borderInlineStart,borderInlineStartColor,borderInlineStartStyle,borderInlineStartWidth,borderInlineStyle,borderInlineWidth,borderLeft,borderLeftColor,borderLeftStyle,borderLeftWidth,borderRadius,borderRight,borderRightColor,borderRightStyle,borderRightWidth,borderSpacing,borderStartEndRadius,borderStartStartRadius,borderStyle,borderTop,borderTopColor,borderTopLeftRadius,borderTopRightRadius,borderTopStyle,borderTopWidth,borderWidth,bottom,boxAlign,boxDecorationBreak,boxDirection,boxFlex,boxFlexGroup,boxLines,boxOrdinalGroup,boxOrient,boxPack,boxShadow,boxSizing,breakAfter,breakBefore,breakInside,captionSide,caret,caretColor,caretShape,clear,clip,clipPath,clipRule,color,colorInterpolationFilters,colorScheme,columnCount,columnFill,columnGap,columnRule,columnRuleColor,columnRuleStyle,columnRuleWidth,columnSpan,columnWidth,columns,contain,containIntrinsicBlockSize,containIntrinsicHeight,containIntrinsicInlineSize,containIntrinsicSize,containIntrinsicWidth,container,containerName,containerType,content,contentVisibility,counterIncrement,counterReset,counterSet,cursor,cx,cy,d,direction,display,dominantBaseline,emptyCells,fieldSizing,fill,fillOpacity,fillRule,filter,flex,flexBasis,flexDirection,flexFlow,flexGrow,flexShrink,flexWrap,float,floodColor,floodOpacity,font,fontFamily,fontFeatureSettings,fontKerning,fontLanguageOverride,fontOpticalSizing,fontPalette,fontSize,fontSizeAdjust,fontSmooth,fontStretch,fontStyle,fontSynthesis,fontSynthesisPosition,fontSynthesisSmallCaps,fontSynthesisStyle,fontSynthesisWeight,fontVariant,fontVariantAlternates,fontVariantCaps,fontVariantEastAsian,fontVariantEmoji,fontVariantLigatures,fontVariantNumeric,fontVariantPosition,fontVariationSettings,fontWeight,forcedColorAdjust,gap,grid,gridArea,gridAutoColumns,gridAutoFlow,gridAutoRows,gridColumn,gridColumnEnd,gridColumnGap,gridColumnStart,gridGap,gridRow,gridRowEnd,gridRowGap,gridRowStart,gridTemplate,gridTemplateAreas,gridTemplateColumns,gridTemplateRows,hangingPunctuation,height,hyphenateCharacter,hyphenateLimitChars,hyphens,imageOrientation,imageRendering,imageResolution,imeMode,initialLetter,initialLetterAlign,inlineSize,inset,insetBlock,insetBlockEnd,insetBlockStart,insetInline,insetInlineEnd,insetInlineStart,interpolateSize,isolation,justifyContent,justifyItems,justifySelf,justifyTracks,left,letterSpacing,lightingColor,lineBreak,lineClamp,lineHeight,lineHeightStep,listStyle,listStyleImage,listStylePosition,listStyleType,margin,marginBlock,marginBlockEnd,marginBlockStart,marginBottom,marginInline,marginInlineEnd,marginInlineStart,marginLeft,marginRight,marginTop,marginTrim,marker,markerEnd,markerMid,markerStart,mask,maskBorder,maskBorderMode,maskBorderOutset,maskBorderRepeat,maskBorderSlice,maskBorderSource,maskBorderWidth,maskClip,maskComposite,maskImage,maskMode,maskOrigin,maskPosition,maskRepeat,maskSize,maskType,masonryAutoFlow,mathDepth,mathShift,mathStyle,maxBlockSize,maxHeight,maxInlineSize,maxLines,maxWidth,minBlockSize,minHeight,minInlineSize,minWidth,mixBlendMode,objectFit,objectPosition,offset,offsetAnchor,offsetDistance,offsetPath,offsetPosition,offsetRotate,opacity,order,orphans,outline,outlineColor,outlineOffset,outlineStyle,outlineWidth,overflow,overflowAnchor,overflowBlock,overflowClipBox,overflowClipMargin,overflowInline,overflowWrap,overflowX,overflowY,overlay,overscrollBehavior,overscrollBehaviorBlock,overscrollBehaviorInline,overscrollBehaviorX,overscrollBehaviorY,padding,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingBottom,paddingInline,paddingInlineEnd,paddingInlineStart,paddingLeft,paddingRight,paddingTop,page,pageBreakAfter,pageBreakBefore,pageBreakInside,paintOrder,perspective,perspectiveOrigin,placeContent,placeItems,placeSelf,pointerEvents,position,positionAnchor,positionArea,positionTry,positionTryFallbacks,positionTryOrder,positionVisibility,printColorAdjust,quotes,r,resize,right,rotate,rowGap,rubyAlign,rubyMerge,rubyPosition,rx,ry,scale,scrollBehavior,scrollMargin,scrollMarginBlock,scrollMarginBlockEnd,scrollMarginBlockStart,scrollMarginBottom,scrollMarginInline,scrollMarginInlineEnd,scrollMarginInlineStart,scrollMarginLeft,scrollMarginRight,scrollMarginTop,scrollPadding,scrollPaddingBlock,scrollPaddingBlockEnd,scrollPaddingBlockStart,scrollPaddingBottom,scrollPaddingInline,scrollPaddingInlineEnd,scrollPaddingInlineStart,scrollPaddingLeft,scrollPaddingRight,scrollPaddingTop,scrollSnapAlign,scrollSnapCoordinate,scrollSnapDestination,scrollSnapPointsX,scrollSnapPointsY,scrollSnapStop,scrollSnapType,scrollSnapTypeX,scrollSnapTypeY,scrollTimeline,scrollTimelineAxis,scrollTimelineName,scrollbarColor,scrollbarGutter,scrollbarWidth,shapeImageThreshold,shapeMargin,shapeOutside,shapeRendering,stopColor,stopOpacity,stroke,strokeDasharray,strokeDashoffset,strokeLinecap,strokeLinejoin,strokeMiterlimit,strokeOpacity,strokeWidth,tabSize,tableLayout,textAlign,textAlignLast,textAnchor,textBox,textBoxEdge,textBoxTrim,textCombineUpright,textDecoration,textDecorationColor,textDecorationLine,textDecorationSkip,textDecorationSkipInk,textDecorationStyle,textDecorationThickness,textEmphasis,textEmphasisColor,textEmphasisPosition,textEmphasisStyle,textIndent,textJustify,textOrientation,textOverflow,textRendering,textShadow,textSizeAdjust,textSpacingTrim,textTransform,textUnderlineOffset,textUnderlinePosition,textWrap,textWrapMode,textWrapStyle,timelineScope,top,touchAction,transform,transformBox,transformOrigin,transformStyle,transition,transitionBehavior,transitionDelay,transitionDuration,transitionProperty,transitionTimingFunction,translate,unicodeBidi,userSelect,vectorEffect,verticalAlign,viewTimeline,viewTimelineAxis,viewTimelineInset,viewTimelineName,viewTransitionName,visibility,whiteSpace,whiteSpaceCollapse,widows,width,willChange,wordBreak,wordSpacing,wordWrap,writingMode,x,y,zIndex,zoom,alignmentBaseline,baselineShift,colorInterpolation,colorRendering,glyphOrientationVertical";
 var allCssProperties = cssPropertiesStr.split(",").concat(userGenerated);

package/dist/styled-system/recipes/display-table-cell-slot-recipe.d.ts

@@ -13,7 +13,7 @@ type DisplayTableCellSlotRecipeVariantMap = {
   [key in keyof DisplayTableCellSlotRecipeVariant]: Array<DisplayTableCellSlotRecipeVariant[key]>
 }
 
-type DisplayTableCellSlotRecipeSlot = "root" | "content" | "depthSpacing"
+type DisplayTableCellSlotRecipeSlot = "root" | "content" | "depthSpacing" | "skeletonCell"
 
 export type DisplayTableCellSlotRecipeVariantProps = {
   [key in keyof DisplayTableCellSlotRecipeVariant]?: ConditionalValue<DisplayTableCellSlotRecipeVariant[key]> | undefined

package/dist/styled-system/recipes/display-table-cell-slot-recipe.js

@@ -14,6 +14,10 @@ const displayTableCellSlotRecipeSlotNames = [
     [
         "depthSpacing",
         "DisplayTableCell__depthSpacing"
+    ],
+    [
+        "skeletonCell",
+        "DisplayTableCell__skeletonCell"
     ]
 ];
 const displayTableCellSlotRecipeSlotFns = /* @__PURE__ */ displayTableCellSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, displayTableCellSlotRecipeDefaultVariants, getSlotCompoundVariant(displayTableCellSlotRecipeCompoundVariants, slotName))]);

package/dist/styled-system/recipes/index.d.ts

@@ -87,4 +87,5 @@ export * from './month-range-picker-panel-slot-recipe';
 export * from './month-range-picker-navigation-slot-recipe';
 export * from './month-range-picker-content-slot-recipe';
 export * from './accordion-slot-recipe';
-export * from './split-view-slot-recipe';
+export * from './split-view-slot-recipe';
+export * from './toggle-switch-slot-recipe';

package/dist/styled-system/recipes/index.js

@@ -87,3 +87,4 @@ export * from './month-range-picker-navigation-slot-recipe.js';
 export * from './month-range-picker-content-slot-recipe.js';
 export * from './accordion-slot-recipe.js';
 export * from './split-view-slot-recipe.js';
+export * from './toggle-switch-slot-recipe.js';

package/dist/styled-system/recipes/multiple-select-box-slot-recipe.d.ts

@@ -10,7 +10,7 @@ type MultipleSelectBoxSlotRecipeVariantMap = {
   [key in keyof MultipleSelectBoxSlotRecipeVariant]: Array<MultipleSelectBoxSlotRecipeVariant[key]>
 }
 
-type MultipleSelectBoxSlotRecipeSlot = "popover" | "menuHeader" | "optionPanel" | "listBox" | "listItem" | "skeletonItem" | "emptyMessage" | "menuFooter"
+type MultipleSelectBoxSlotRecipeSlot = "popover" | "menuHeader" | "optionPanel" | "listBox" | "listItem" | "skeletonItem" | "emptyMessage" | "menuFooter" | "scrollWrapper" | "infiniteScrollError" | "infiniteScrollErrorMessage" | "infiniteScrollErrorButton" | "infiniteScrollErrorIcon" | "infiniteScrollLoading"
 
 export type MultipleSelectBoxSlotRecipeVariantProps = {
   [key in keyof MultipleSelectBoxSlotRecipeVariant]?: ConditionalValue<MultipleSelectBoxSlotRecipeVariant[key]> | undefined

package/dist/styled-system/recipes/multiple-select-box-slot-recipe.js

@@ -34,6 +34,30 @@ const multipleSelectBoxSlotRecipeSlotNames = [
     [
         "menuFooter",
         "MultipleSelectBox__menuFooter"
+    ],
+    [
+        "scrollWrapper",
+        "MultipleSelectBox__scrollWrapper"
+    ],
+    [
+        "infiniteScrollError",
+        "MultipleSelectBox__infiniteScrollError"
+    ],
+    [
+        "infiniteScrollErrorMessage",
+        "MultipleSelectBox__infiniteScrollErrorMessage"
+    ],
+    [
+        "infiniteScrollErrorButton",
+        "MultipleSelectBox__infiniteScrollErrorButton"
+    ],
+    [
+        "infiniteScrollErrorIcon",
+        "MultipleSelectBox__infiniteScrollErrorIcon"
+    ],
+    [
+        "infiniteScrollLoading",
+        "MultipleSelectBox__infiniteScrollLoading"
     ]
 ];
 const multipleSelectBoxSlotRecipeSlotFns = /* @__PURE__ */ multipleSelectBoxSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, multipleSelectBoxSlotRecipeDefaultVariants, getSlotCompoundVariant(multipleSelectBoxSlotRecipeCompoundVariants, slotName))]);