@wavv/ui 2.2.2-alpha.5 → 2.2.2-alpha.6

package/build/components/Inputs/helpers/AriaButton.js

@@ -0,0 +1,19 @@
+import styled from "@emotion/styled";
+import { Button } from "react-aria-components";
+const AriaButton = styled(Button)(({ theme: { accent }, width })=>({
+        appearance: 'none',
+        border: 'none',
+        borderRadius: 4,
+        cursor: 'pointer',
+        backgroundColor: 'transparent',
+        padding: 0,
+        color: 'inherit',
+        width,
+        outline: 'none',
+        outlineOffset: -1,
+        '&:focus-visible': {
+            outline: `${accent} solid 1px`
+        }
+    }));
+const helpers_AriaButton = AriaButton;
+export { helpers_AriaButton as default };

package/build/components/Inputs/helpers/DateSegment.js

@@ -0,0 +1,22 @@
+import styled from "@emotion/styled";
+import { DateSegment } from "react-aria-components";
+const DateSegment_DateSegment = styled(DateSegment)(({ theme, placeholderColor })=>({
+        outline: 'none',
+        borderRadius: 4,
+        padding: '0 2px',
+        '&[data-focused]': {
+            backgroundColor: theme.calendar.background.activeRange
+        },
+        '&[data-placeholder]': {
+            color: placeholderColor || theme.input.color.placeholder
+        },
+        '&[data-type="literal"]': {
+            padding: 0,
+            color: placeholderColor || theme.input.color.placeholder
+        },
+        '&[data-type="dayPeriod"]': {
+            textTransform: 'lowercase'
+        }
+    }));
+const helpers_DateSegment = DateSegment_DateSegment;
+export { helpers_DateSegment as default };

package/build/components/Inputs/helpers/Description.js

@@ -0,0 +1,11 @@
+import styled from "@emotion/styled";
+import { Text } from "react-aria-components";
+const Description = styled(Text)(({ theme: { font, input } })=>({
+        color: input.color.description,
+        fontSize: font.size.sm,
+        position: 'absolute',
+        left: 0,
+        top: 'calc(100% + 4px)'
+    }));
+const helpers_Description = Description;
+export { helpers_Description as default };

package/build/components/Inputs/helpers/ErrorMessage.js

@@ -0,0 +1,11 @@
+import styled from "@emotion/styled";
+import { FieldError } from "react-aria-components";
+const ErrorMessage = styled(FieldError)(({ theme: { font, input } })=>({
+        color: input.color.descriptionError,
+        fontSize: font.size.sm,
+        position: 'absolute',
+        left: 0,
+        top: 'calc(100% + 4px)'
+    }));
+const helpers_ErrorMessage = ErrorMessage;
+export { helpers_ErrorMessage as default };

package/build/components/Inputs/helpers/Input.js

@@ -0,0 +1,6 @@
+import styled from "@emotion/styled";
+import { Input } from "react-aria-components";
+import InputStyles, { preventProps } from "./InputStyles.js";
+const Input_Input = styled(Input, preventProps)(InputStyles);
+const helpers_Input = Input_Input;
+export { helpers_Input as default };

package/build/components/Inputs/helpers/InputContainerStyles.js

@@ -0,0 +1,78 @@
+import { marginProps, paddingProps, widthHeightProps } from "../../helpers/styledProps.js";
+const baseStyles = ({ theme: { input, accent }, backgroundColor, borderRadius, borderColor, textOnly, isDisabled, isInvalid, isReadOnly, hasLabel, pointer })=>({
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        position: 'relative',
+        width: '100%',
+        minHeight: hasLabel ? 48 : 40,
+        height: hasLabel ? 48 : 40,
+        padding: '5px 16px',
+        boxSizing: 'border-box',
+        color: isDisabled ? input.labelColor.disabled : input.labelColor.default,
+        backgroundColor: input.background.default,
+        border: 'none',
+        borderColor,
+        borderRadius: borderRadius ?? 4,
+        cursor: pointer ? 'pointer' : void 0,
+        outline: 'none',
+        outlineOffset: -1,
+        transition: 'background-color 0.2s',
+        '&:focus-within': {
+            backgroundColor: backgroundColor || textOnly || isDisabled || isInvalid ? void 0 : input.background.focused,
+            outline: `${accent} solid 1px`
+        },
+        '&:hover:not(:focus-within)': {
+            backgroundColor: isDisabled || isReadOnly || textOnly || backgroundColor ? void 0 : input.background.hover,
+            Label: {
+                color: isDisabled ? void 0 : input.labelColor.hover
+            }
+        }
+    });
+const disabledStyles = ({ theme: { input }, isDisabled })=>({
+        backgroundColor: isDisabled ? input.background.disabled : void 0,
+        pointerEvents: isDisabled ? 'none' : void 0
+    });
+const invalidStyles = ({ theme: { input }, isInvalid })=>({
+        backgroundColor: isInvalid ? input.background.invalid : void 0,
+        '&:hover:not(:focus-within)': {
+            backgroundColor: isInvalid ? input.background.invalidHover : void 0
+        },
+        '&[data-invalid]': {
+            backgroundColor: input.background.invalid
+        },
+        '&:hover:not(:focus-within)&[data-invalid]': {
+            backgroundColor: input.background.invalidHover
+        }
+    });
+const readOnlyStyles = ({ isReadOnly })=>({
+        cursor: isReadOnly ? 'default' : void 0
+    });
+const backgroundStyles = ({ backgroundColor })=>({
+        backgroundColor
+    });
+const textOnlyStyles = ({ theme, textOnly, isDisabled })=>({
+        padding: textOnly ? 0 : void 0,
+        backgroundColor: textOnly ? 'transparent' : void 0,
+        width: textOnly ? 'max-content' : void 0,
+        height: textOnly ? 'max-content' : void 0,
+        minHeight: textOnly ? 'max-content' : void 0,
+        color: textOnly && isDisabled ? theme.scale4 : void 0
+    });
+const minHeightStyles = ({ minHeight })=>({
+        minHeight
+    });
+const styles = [
+    baseStyles,
+    disabledStyles,
+    readOnlyStyles,
+    invalidStyles,
+    widthHeightProps,
+    textOnlyStyles,
+    backgroundStyles,
+    minHeightStyles,
+    marginProps,
+    paddingProps
+];
+const InputContainerStyles = styles;
+export { InputContainerStyles as default };

package/build/components/Inputs/helpers/InputMessage.js

@@ -0,0 +1,30 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { FieldError, Text } from "react-aria-components";
+const InputMessage = ({ description, errorMessage })=>description || errorMessage ? /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            description && !errorMessage && /*#__PURE__*/ jsx(Description, {
+                slot: "description",
+                children: description
+            }),
+            errorMessage && /*#__PURE__*/ jsx(ErrorMessage, {
+                children: errorMessage
+            })
+        ]
+    }) : null;
+const commonStyles = ({ theme })=>({
+        position: 'absolute',
+        left: 0,
+        top: '100%',
+        fontSize: theme.font.size.sm,
+        textAlign: 'left',
+        lineHeight: `${theme.font.size.lg}px`
+    });
+const Description = styled(Text)(({ theme })=>({
+        color: theme.input.color.description
+    }), commonStyles);
+const ErrorMessage = styled(FieldError)(({ theme })=>({
+        color: theme.input.color.descriptionError
+    }), commonStyles);
+const helpers_InputMessage = InputMessage;
+export { helpers_InputMessage as default };

package/build/components/Inputs/helpers/InputStyles.js

@@ -0,0 +1,43 @@
+import isPropAllowed from "../../helpers/isPropAllowed.js";
+const preventProps = {
+    shouldForwardProp: (prop)=>isPropAllowed(prop, [
+            'hide',
+            'placeholderColor',
+            'isDisabled'
+        ])
+};
+const baseStyles = ({ theme: { font, input, size, accent }, fontSize, hide, isDisabled, width, placeholderColor })=>({
+        outline: 'none',
+        border: 'none',
+        color: isDisabled ? input.color.disabled : input.color.default,
+        caretColor: accent,
+        backgroundColor: 'transparent',
+        paddingLeft: 0,
+        fontSize: fontSize || font.size.lg,
+        fontFamily: font.family.default,
+        width: width || '100%',
+        height: '100%',
+        marginRight: size.sm,
+        boxSizing: 'border-box',
+        cursor: isDisabled ? 'default' : 'text',
+        '&:not(:focus):not(:focus-within)': {
+            opacity: hide ? 0 : 1,
+            position: hide ? 'absolute' : void 0
+        },
+        '&:-webkit-autofill, &:-webkit-autofill:hover, &:-webkit-autofill:focus, &:-webkit-autofill:active': {
+            transition: 'background-color 0s 50000s',
+            WebkitTextFillColor: input.color.default
+        },
+        '&::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button, &::-webkit-search-results-decoration': {
+            WebkitAppearance: 'none'
+        },
+        '&::placeholder': {
+            color: isDisabled ? input.color.disabled : placeholderColor || input.color.placeholder,
+            opacity: 1
+        }
+    });
+const inputStyles = [
+    baseStyles
+];
+const InputStyles = inputStyles;
+export { InputStyles as default, preventProps };

package/build/components/Inputs/helpers/Label.js

@@ -0,0 +1,42 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { Label } from "react-aria-components";
+import Ellipsis from "../../Ellipsis.js";
+import isPropAllowed from "../../helpers/isPropAllowed.js";
+const LabelWrapper = ({ children, label, ...props })=>/*#__PURE__*/ jsxs(Label_Label, {
+        ...props,
+        children: [
+            label && /*#__PURE__*/ jsx(Ellipsis, {
+                width: "100%",
+                children: label
+            }),
+            children
+        ]
+    });
+const preventProps = {
+    shouldForwardProp: (prop)=>isPropAllowed(prop, [
+            'filled',
+            'disablePointerEvents'
+        ])
+};
+const Label_Label = styled(Label, preventProps)(({ theme: { font, input }, filled, disablePointerEvents })=>({
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        boxSizing: 'border-box',
+        width: '100%',
+        fontSize: filled ? font.size.sm : font.size.lg,
+        color: filled ? input.labelColor.filled : input.labelColor.default,
+        '&:focus-within': {
+            fontSize: font.size.sm,
+            color: input.labelColor.focused
+        },
+        position: 'relative',
+        transition: 'all 0.2s',
+        pointerEvents: disablePointerEvents ? 'none' : void 0,
+        overflow: 'hidden'
+    }), ({ theme: { input }, disabled })=>({
+        color: disabled ? input.labelColor.disabled : void 0
+    }));
+const helpers_Label = LabelWrapper;
+export { helpers_Label as default };

package/build/components/Inputs/helpers/LabelWrapper.js

@@ -0,0 +1,14 @@
+import styled from "@emotion/styled";
+const LabelWrapper_LabelWrapper = styled.div(({ readOnly })=>({
+        display: 'flex',
+        flexDirection: 'column',
+        boxSizing: 'border-box',
+        width: '100%',
+        position: 'relative',
+        '& > label, & > input': {
+            pointerEvents: readOnly ? 'none' : void 0,
+            caretColor: readOnly ? 'transparent' : void 0
+        }
+    }));
+const LabelWrapper = LabelWrapper_LabelWrapper;
+export { LabelWrapper as default };

package/build/components/Inputs/helpers/PickerToggle.js

@@ -0,0 +1,7 @@
+import styled from "@emotion/styled";
+import AriaButton from "./AriaButton.js";
+const PickerToggle = styled(AriaButton)(({ theme: { input }, isDisabled })=>({
+        color: isDisabled ? input.labelColor.disabled : input.labelColor.default
+    }));
+const helpers_PickerToggle = PickerToggle;
+export { helpers_PickerToggle as default };

package/build/components/Inputs/helpers/TextArea.js

@@ -0,0 +1,8 @@
+import styled from "@emotion/styled";
+import { TextArea } from "react-aria-components";
+import InputStyles, { preventProps } from "./InputStyles.js";
+const TextArea_TextArea = styled(TextArea, preventProps)(InputStyles, {
+    resize: 'none'
+});
+const helpers_TextArea = TextArea_TextArea;
+export { helpers_TextArea as default };

package/build/components/Inputs/helpers/filterPastedText.js

@@ -0,0 +1,9 @@
+const filterPastedText = (input, regex)=>{
+    if (!regex || !input) return input;
+    const pattern = new RegExp(regex);
+    let validText = '';
+    for (const char of input)if (pattern.test(validText + char)) validText += char;
+    return validText;
+};
+const helpers_filterPastedText = filterPastedText;
+export { helpers_filterPastedText as default };

package/build/components/Inputs/helpers/handlePaste.js

@@ -0,0 +1,12 @@
+import filterPastedText from "./filterPastedText.js";
+const handlePaste = (event, handleChange, accepts)=>{
+    if (!accepts) return;
+    event.stopPropagation();
+    event.preventDefault();
+    const { clipboardData } = event;
+    const text = clipboardData.getData('text');
+    const acceptableText = filterPastedText(text, accepts);
+    if (acceptableText) handleChange(acceptableText);
+};
+const helpers_handlePaste = handlePaste;
+export { helpers_handlePaste as default };

package/build/components/Inputs/helpers/isAcceptable.js

@@ -0,0 +1,7 @@
+const isAcceptable = (input, regex)=>{
+    if (!regex || !input) return true;
+    const pattern = new RegExp(regex);
+    return pattern.test(input);
+};
+const helpers_isAcceptable = isAcceptable;
+export { helpers_isAcceptable as default };

package/build/components/Inputs/helpers/useDynamicWidth.js

@@ -0,0 +1,39 @@
+import { jsx } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { useLayoutEffect, useRef, useState } from "react";
+const useDynamicWidth_useDynamicWidth = ({ value, placeholder, fontSize, active = true })=>{
+    const textWidthRef = useRef(null);
+    const [inputWidth, setInputWidth] = useState(active ? 50 : void 0);
+    useLayoutEffect(()=>{
+        if (active && textWidthRef?.current) {
+            const { current: el } = textWidthRef;
+            if (value) el.innerHTML = value.replace(/ /g, ' ');
+            const newWidth = el.offsetWidth;
+            const rightPadding = 3;
+            if ('number' == typeof newWidth) setInputWidth(newWidth + rightPadding);
+        }
+    }, [
+        active,
+        value,
+        placeholder,
+        textWidthRef
+    ]);
+    const HiddenWidthEl = ()=>active ? /*#__PURE__*/ jsx(HiddenWidthRef, {
+            ref: textWidthRef,
+            fontSize: fontSize,
+            children: value || placeholder
+        }) : null;
+    return [
+        inputWidth,
+        HiddenWidthEl
+    ];
+};
+const HiddenWidthRef = styled.div(({ theme: { font }, fontSize })=>({
+        position: 'absolute',
+        width: 'max-content',
+        opacity: 0,
+        fontSize: fontSize || font.size.lg,
+        zIndex: -1
+    }));
+const useDynamicWidth = useDynamicWidth_useDynamicWidth;
+export { useDynamicWidth as default };

package/build/components/Inputs/helpers/useInputFocus.js

@@ -0,0 +1,19 @@
+import { useState } from "react";
+const useInputFocus = (onFocus, onBlur, focusCondition = true)=>{
+    const [focused, setFocused] = useState(false);
+    const handleFocus = (event)=>{
+        if (focusCondition) setFocused(true);
+        if (onFocus) onFocus(event);
+    };
+    const handleBlur = (event)=>{
+        setFocused(false);
+        if (onBlur) onBlur(event);
+    };
+    return {
+        focused,
+        handleFocus,
+        handleBlur
+    };
+};
+const helpers_useInputFocus = useInputFocus;
+export { helpers_useInputFocus as default };

package/build/components/Label.js

@@ -0,0 +1,42 @@
+import { jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import getIcon from "./helpers/getIcon.js";
+import { marginProps } from "./helpers/styledProps.js";
+const Label = ({ children, iconLeft, iconRight, disabled, pill, ...rest })=>/*#__PURE__*/ jsxs(LabelContainer, {
+        as: pill ? void 0 : 'label',
+        disabled: disabled,
+        rightIcon: !!iconRight,
+        pill: pill,
+        ...rest,
+        children: [
+            iconLeft && getIcon(iconLeft, {
+                marginRight: 4,
+                size: 'small'
+            }),
+            children,
+            iconRight && getIcon(iconRight, {
+                marginLeft: 4,
+                size: 'small'
+            })
+        ]
+    });
+const LabelContainer = styled.div(({ theme, disabled, pill })=>({
+        display: 'flex',
+        alignItems: 'center',
+        width: 'max-content',
+        color: disabled ? theme.scale4 : theme.scale10,
+        cursor: 'default',
+        fontSize: pill ? theme.font.size.sm : theme.font.size.md,
+        fontWeight: pill ? theme.font.weight.medium : theme.font.weight.default,
+        fontFamily: theme.font.family.default
+    }), ({ theme, disabled, pill, rightIcon })=>pill && {
+        borderRadius: 40,
+        padding: `2px ${theme.size.sm}px`,
+        paddingRight: rightIcon ? theme.size.xs : void 0,
+        backgroundColor: disabled ? theme.scale0 : theme.scale1,
+        '&:hover': {
+            backgroundColor: disabled || !pill ? void 0 : theme.scale2
+        }
+    }, marginProps);
+const components_Label = Label;
+export { components_Label as default };

package/build/components/LineChart.js

@@ -0,0 +1,80 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTheme } from "@emotion/react";
+import millify from "millify";
+import { useState } from "react";
+import { CartesianGrid, Legend, Line, LineChart, ResponsiveContainer, XAxis, YAxis } from "recharts";
+import { ChartContainer, ChartStyles, LegendContent, Tooltip } from "./ChartHelpers.js";
+const LineChart_LineChart = ({ data, legend, keys, enableLegendToggle, axisColor, tooltipLegendPostfix, ...rest })=>{
+    const [lines, setLines] = useState(keys);
+    const { scale2 } = useTheme();
+    const handleLineToggle = (item)=>{
+        const toggleLines = (prevLines)=>prevLines.map((lineItem)=>{
+                const match = lineItem.key === item.value;
+                if (match) return {
+                    ...lineItem,
+                    hidden: !lineItem.hidden
+                };
+                return lineItem;
+            });
+        setLines((prevLines)=>toggleLines(prevLines));
+    };
+    const toggleData = enableLegendToggle && keys.length > 1 ? handleLineToggle : void 0;
+    return /*#__PURE__*/ jsxs(ChartContainer, {
+        ...rest,
+        children: [
+            /*#__PURE__*/ jsx(ChartStyles, {}),
+            /*#__PURE__*/ jsx(ResponsiveContainer, {
+                width: "100%",
+                height: "100%",
+                children: /*#__PURE__*/ jsxs(LineChart, {
+                    margin: {
+                        top: 8,
+                        left: -14,
+                        right: 5,
+                        bottom: -8
+                    },
+                    data: data,
+                    children: [
+                        /*#__PURE__*/ jsx(CartesianGrid, {
+                            stroke: axisColor || scale2,
+                            strokeDasharray: "3 5",
+                            vertical: false
+                        }),
+                        /*#__PURE__*/ jsx(XAxis, {
+                            stroke: axisColor || scale2,
+                            dataKey: "name",
+                            tickMargin: 4
+                        }),
+                        /*#__PURE__*/ jsx(YAxis, {
+                            stroke: axisColor || scale2,
+                            tickMargin: 4,
+                            tickFormatter: (value)=>millify(value)
+                        }),
+                        Tooltip({
+                            legendPostfix: tooltipLegendPostfix
+                        }),
+                        legend && /*#__PURE__*/ jsx(Legend, {
+                            content: /*#__PURE__*/ jsx(LegendContent, {
+                                toggleData: toggleData
+                            })
+                        }),
+                        lines.map(({ key, color, hidden }, i)=>/*#__PURE__*/ jsx(Line, {
+                                dataKey: key,
+                                stroke: color,
+                                dot: false,
+                                hide: hidden,
+                                activeDot: {
+                                    stroke: color,
+                                    strokeWidth: 1,
+                                    r: 3
+                                },
+                                type: "monotone"
+                            }, `line-${i + 1}`))
+                    ]
+                })
+            })
+        ]
+    });
+};
+const components_LineChart = LineChart_LineChart;
+export { components_LineChart as default };

package/build/components/ListBoxParts/GridListItem.js

@@ -0,0 +1,34 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { GridListItem } from "react-aria-components";
+import ItemHeaderBody from "../ListHelpers/ItemHeaderBody.js";
+import ListItemStyles, { preventProps } from "../ListHelpers/ListItemStyles.js";
+const GridListItem_GridListItem = ({ children, id, value, header, body, leftElement, rightElement, inline, disabled, ...props })=>{
+    const headerText = header || value;
+    const content = headerText && body ? /*#__PURE__*/ jsx(ItemHeaderBody, {
+        header: headerText,
+        body: body,
+        inline: inline,
+        disabled: disabled,
+        isGridItem: true
+    }) : value;
+    return /*#__PURE__*/ jsxs(Item, {
+        id: id || value,
+        textValue: value,
+        isDisabled: disabled,
+        ...props,
+        children: [
+            leftElement || null,
+            children || content,
+            rightElement && /*#__PURE__*/ jsx("div", {
+                style: {
+                    marginLeft: 'auto'
+                },
+                children: rightElement
+            })
+        ]
+    });
+};
+const Item = styled(GridListItem, preventProps)(ListItemStyles);
+const ListBoxParts_GridListItem = GridListItem_GridListItem;
+export { ListBoxParts_GridListItem as default };

package/build/components/ListBoxParts/ListBoxItem.js

@@ -0,0 +1,32 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { ListBoxItem } from "react-aria-components";
+import ItemHeaderBody from "../ListHelpers/ItemHeaderBody.js";
+import ListItemStyles, { preventProps } from "../ListHelpers/ListItemStyles.js";
+const ListBoxItem_ListBoxItem = ({ id, value, header, body, leftElement, rightElement, inline, disabled, ...props })=>{
+    const headerText = header || value;
+    return /*#__PURE__*/ jsxs(Item, {
+        id: id || value,
+        textValue: value,
+        isDisabled: disabled,
+        ...props,
+        children: [
+            leftElement || null,
+            headerText && body ? /*#__PURE__*/ jsx(ItemHeaderBody, {
+                header: headerText,
+                body: body,
+                inline: inline,
+                disabled: disabled
+            }) : value,
+            rightElement && /*#__PURE__*/ jsx("div", {
+                style: {
+                    marginLeft: 'auto'
+                },
+                children: rightElement
+            })
+        ]
+    });
+};
+const Item = styled(ListBoxItem, preventProps)(ListItemStyles);
+const ListBoxParts_ListBoxItem = ListBoxItem_ListBoxItem;
+export { ListBoxParts_ListBoxItem as default };

package/build/components/ListBoxParts/ListOptions.js

@@ -0,0 +1,45 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { ListBox } from "react-aria-components";
+import ListSection from "../ListHelpers/ListSection.js";
+import ListStyles, { preventProps } from "../ListHelpers/ListStyles.js";
+import ListBoxItem from "./ListBoxItem.js";
+const ListOptions = ({ options, children, autoWidth, width, before, after, menuBackground, createOptionItem, ...props })=>/*#__PURE__*/ jsxs(ListContainer, {
+        autoWidth: autoWidth,
+        width: autoWidth ? void 0 : width,
+        background: menuBackground,
+        children: [
+            before,
+            /*#__PURE__*/ jsxs(ListBox, {
+                shouldFocusWrap: true,
+                style: {
+                    outline: 'none'
+                },
+                ...props,
+                children: [
+                    createOptionItem,
+                    options?.map((option)=>{
+                        if ('options' in option) {
+                            const section = option;
+                            return /*#__PURE__*/ jsx(ListSection, {
+                                id: section.id,
+                                title: section.title,
+                                children: section.options.map((item)=>/*#__PURE__*/ jsx(ListBoxItem, {
+                                        ...item
+                                    }, item.id || item.value))
+                            }, section.id);
+                        }
+                        const item = option;
+                        return /*#__PURE__*/ jsx(ListBoxItem, {
+                            ...item
+                        }, item.id || item.value);
+                    }),
+                    children
+                ]
+            }),
+            after
+        ]
+    });
+const ListContainer = styled('div', preventProps)(ListStyles);
+const ListBoxParts_ListOptions = ListOptions;
+export { ListBoxParts_ListOptions as default };

package/build/components/ListHelpers/GridListHeader.js

@@ -0,0 +1,14 @@
+import styled from "@emotion/styled";
+import { GridListHeader } from "react-aria-components";
+const ListHeader = styled(GridListHeader)(({ theme })=>({
+        backgroundColor: theme.scale0,
+        padding: '0 16px',
+        color: theme.scale6,
+        fontWeight: theme.font.weight.medium,
+        pointerEvents: 'none',
+        '&:hover': {
+            backgroundColor: theme.scale0
+        }
+    }));
+const ListHelpers_GridListHeader = ListHeader;
+export { ListHelpers_GridListHeader as default };