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

package/build/components/Modal.js

@@ -0,0 +1,212 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { keyframes } from "@emotion/react";
+import styled from "@emotion/styled";
+import { cloneElement } from "react";
+import { Dialog, Heading, Modal, ModalOverlay } from "react-aria-components";
+import react_keyed_flatten_children from "react-keyed-flatten-children";
+import { marginProps, maxWidthHeightProps, minWidthHeightProps, paddingProps } from "./helpers/styledProps.js";
+import Icon from "./Icon/index.js";
+import PortalScope from "./PortalScope.js";
+const Modal_Modal = ({ children, visible, width, height, onClose, closeIcon, preventOverlayClose, overlayBlur = true, overlayColor, backgroundColor, small, noOverlay, inert, drawer, drawerDirection = 'right', scopeRef, centerX, centerY, position, top, bottom, right, left, zIndex, ...props })=>{
+    const { 'aria-label': ariaLabel, ...rest } = props;
+    const modalContent = react_keyed_flatten_children(children).map((child)=>{
+        if (child) return /*#__PURE__*/ cloneElement(child, {
+            inline: small
+        });
+        return null;
+    });
+    const handleOpenChange = (open)=>{
+        if (!open) onClose();
+    };
+    const modal = /*#__PURE__*/ jsx(Overlay, {
+        isDismissable: !preventOverlayClose,
+        isOpen: visible,
+        onOpenChange: handleOpenChange,
+        color: overlayColor,
+        noOverlay: noOverlay,
+        centerX: centerX,
+        centerY: centerY,
+        position: scopeRef ? 'absolute' : position,
+        width: scopeRef ? '100%' : void 0,
+        height: scopeRef ? '100%' : void 0,
+        top: top,
+        bottom: bottom,
+        right: right,
+        left: left,
+        zIndex: zIndex,
+        blur: overlayBlur,
+        ref: (node)=>{
+            if (!node) return;
+            if (inert) node.setAttribute('inert', '');
+            else node.removeAttribute('inert');
+        },
+        children: /*#__PURE__*/ jsx(StyledModal, {
+            drawer: drawer,
+            direction: drawerDirection,
+            children: /*#__PURE__*/ jsx(StyledDialog, {
+                "aria-label": ariaLabel,
+                children: /*#__PURE__*/ jsxs(ModalContainer, {
+                    width: width,
+                    height: height,
+                    backgroundColor: backgroundColor,
+                    small: small,
+                    noOverlay: noOverlay,
+                    drawer: drawer,
+                    drawerDirection: drawerDirection,
+                    centerX: centerX,
+                    centerY: centerY,
+                    ...rest,
+                    children: [
+                        modalContent,
+                        closeIcon && /*#__PURE__*/ jsx(Close, {
+                            inline: small,
+                            children: /*#__PURE__*/ jsx(Icon, {
+                                name: "close",
+                                onClick: onClose,
+                                pointer: true
+                            })
+                        })
+                    ]
+                })
+            })
+        })
+    });
+    return scopeRef ? /*#__PURE__*/ jsx(PortalScope, {
+        containerRef: scopeRef,
+        children: modal
+    }) : modal;
+};
+const Header = ({ children, ...props })=>/*#__PURE__*/ jsx(ModalHeader, {
+        slot: "title",
+        ...props,
+        children: children
+    });
+const ModalHeader = styled(Heading)(({ theme })=>({
+        color: theme.modal.color.header,
+        fontWeight: theme.font.weight.default,
+        fontSize: theme.font.size.xl,
+        margin: 0,
+        marginBottom: 8
+    }));
+const Text = styled.div(({ theme, primary, fontSize })=>({
+        color: primary ? theme.modal.color.header : theme.modal.color.body,
+        fontSize: fontSize || theme.font.size.lg
+    }));
+const Body = styled.div(({ height })=>({
+        height,
+        overflow: height ? 'auto' : void 0
+    }), marginProps);
+const Footer = styled.div(({ justify = 'end', inline, gap })=>{
+    const justifyOptions = {
+        start: 'flex-start',
+        end: 'flex-end',
+        center: 'center',
+        'space-around': 'space-around',
+        'space-between': 'space-between'
+    };
+    return {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: justify ? justifyOptions[justify] : void 0,
+        marginTop: inline ? void 0 : 8,
+        gap
+    };
+}, marginProps);
+const ModalContainer = styled.div(({ theme, width, height, backgroundColor, small, borderRadius, overflow, drawer, drawerDirection })=>({
+        display: 'flex',
+        flexDirection: small ? 'row' : 'column',
+        alignItems: small ? 'center' : void 0,
+        backgroundColor: backgroundColor || theme.modal.background,
+        color: theme.scale10,
+        boxShadow: drawer ? 'left' === drawerDirection ? '8px 0 20px rgba(0, 0, 0, 0.2)' : '-8px 0 20px rgba(0, 0, 0, 0.2)' : theme.elevation3,
+        width: width || 'max-content',
+        height: drawer ? height || '100%' : height || 'max-content',
+        borderRadius: drawer ? 0 : borderRadius || theme.size.sm,
+        padding: small ? theme.size.md : theme.size.lg,
+        overflow: overflow || 'hidden'
+    }), ({ noOverlay, drawer })=>!noOverlay && !drawer && {
+        position: 'absolute',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%,-50%)'
+    }, ({ centerX, centerY, drawer })=>{
+    const left = centerX ? '50%' : void 0;
+    const top = centerY ? '50%' : void 0;
+    const xPos = centerX ? '-50%' : '0';
+    const yPos = centerY ? '-50%' : '0';
+    const translate = `translate(${xPos}, ${yPos})`;
+    return (centerX || centerY) && !drawer && {
+        position: 'absolute',
+        top,
+        left,
+        transform: translate
+    };
+}, paddingProps, minWidthHeightProps, maxWidthHeightProps);
+const Close = styled.div({
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center'
+}, ({ inline })=>inline ? {
+        marginLeft: 16
+    } : {
+        position: 'absolute',
+        top: 8,
+        right: 8
+    });
+const Overlay = styled(ModalOverlay)(({ color, blur, noOverlay, centerX, centerY, position, top, bottom, right, left, zIndex, width, height })=>({
+        position: position || 'fixed',
+        top: top || (left || bottom || right ? void 0 : 0),
+        left: left || (top || bottom || right ? void 0 : 0),
+        bottom,
+        right,
+        width: noOverlay && !centerX ? void 0 : width || '100vw',
+        height: noOverlay && !centerY ? void 0 : height || 'var(--visual-viewport-height)',
+        zIndex: zIndex || 100,
+        backgroundColor: noOverlay ? void 0 : color || 'rgba(0, 0, 0, 0.2)',
+        backdropFilter: blur ? `blur(${'number' == typeof blur ? blur : 4}px)` : 'none'
+    }));
+const slideRight = keyframes({
+    from: {
+        transform: 'translateX(100%)'
+    },
+    to: {
+        transform: 'translateX(0)'
+    }
+});
+const slideLeft = keyframes({
+    from: {
+        transform: 'translateX(-100%)'
+    },
+    to: {
+        transform: 'translateX(0)'
+    }
+});
+const StyledModal = styled(Modal)(({ drawer, direction })=>drawer ? {
+        position: 'fixed',
+        top: 0,
+        bottom: 0,
+        right: 'right' === direction ? 0 : void 0,
+        left: 'left' === direction ? 0 : void 0,
+        outline: 'none',
+        display: 'flex',
+        alignItems: 'stretch',
+        '&[data-entering]': {
+            animation: `${'left' === direction ? slideLeft : slideRight} 300ms`
+        },
+        '&[data-exiting]': {
+            animation: `${'left' === direction ? slideLeft : slideRight} 200ms reverse`
+        }
+    } : {});
+const StyledDialog = styled(Dialog)({
+    outline: 'none'
+});
+Header.displayName = 'Modal.Header';
+Text.displayName = 'Modal.Text';
+Body.displayName = 'Modal.Body';
+Footer.displayName = 'Modal.Footer';
+Modal_Modal.Header = Header;
+Modal_Modal.Text = Text;
+Modal_Modal.Body = Body;
+Modal_Modal.Footer = Footer;
+const components_Modal = Modal_Modal;
+export { components_Modal as default };

package/build/components/MotionPopover.js

@@ -0,0 +1,39 @@
+import { keyframes } from "@emotion/react";
+import styled from "@emotion/styled";
+import { Popover } from "react-aria-components";
+const slide = keyframes({
+    from: {
+        transform: 'var(--origin)',
+        opacity: 0
+    },
+    to: {
+        transform: 'translateY(0)',
+        opacity: 1
+    }
+});
+const time = '300ms cubic-bezier(0.860, 0.000, 0.070, 1.000)';
+const MotionPopover = styled(Popover)({
+    '&[data-placement="bottom"]': {
+        '--origin': 'translateY(-4px)'
+    },
+    '&[data-placement="top"]': {
+        '--origin': 'translateY(4px)'
+    },
+    '&[data-placement="right"]': {
+        '--origin': 'translateX(-4px)'
+    },
+    '&[data-placement="left"]': {
+        '--origin': 'translateX(4px)'
+    },
+    '&[data-entering]': {
+        animation: `${slide} ${time}`,
+        pointerEvents: 'none'
+    },
+    '&[data-exiting]': {
+        animation: `${slide} ${time} reverse`,
+        pointerEvents: 'none'
+    },
+    outline: 'none'
+});
+const components_MotionPopover = MotionPopover;
+export { components_MotionPopover as default };

package/build/components/MultiSelect/MultiSelect.js

@@ -0,0 +1,263 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useTheme } from "@emotion/react";
+import styled from "@emotion/styled";
+import { useEffect, useImperativeHandle, useRef, useState } from "react";
+import { useOnClickOutside } from "../../hooks/index.js";
+import Checkbox from "../Checkbox.js";
+import { marginProps, paddingProps as styledProps_js_paddingProps } from "../helpers/styledProps.js";
+import Icon from "../Icon/index.js";
+import Tag from "../Tag.js";
+import SearchDropdown from "./SearchDropdown.js";
+const MultiSelect = ({ options, items, listLabel, listText, itemsTitle, maxItems, placeholder, width, accepts, disabled, hideItemsInfo, compact, backgroundColor, borderless, autoFocus, embedded, invalid, maxListHeight, maxMenuHeight, onToggleAllItems, addItem, removeItem, onTextChange, ref, ...props })=>{
+    const [expanded, setExpanded] = useState(autoFocus || false);
+    const [error, setError] = useState(false);
+    const { color, font, input: inputColors } = useTheme();
+    const clickOutsideRef = useOnClickOutside(()=>setExpanded(false), expanded);
+    const dropdownTriggerRef = useRef(null);
+    const dropdownRef = useRef(null);
+    const listRef = useRef(null);
+    const collapse = compact && !!listLabel;
+    const { padding, paddingTop, paddingRight, paddingBottom, paddingLeft, ...rest } = props;
+    const paddingProps = {
+        padding,
+        paddingTop,
+        paddingRight,
+        paddingBottom,
+        paddingLeft
+    };
+    const scrollToInput = ()=>{
+        if (listRef.current && !expanded && maxListHeight) setTimeout(()=>{
+            listRef.current?.scrollTo({
+                top: listRef.current.scrollHeight,
+                behavior: 'smooth'
+            });
+        }, 10);
+    };
+    const focusInput = ()=>{
+        const { current: input } = dropdownRef;
+        if (!expanded && !listLabel) setExpanded(true);
+        input?.focus();
+        scrollToInput();
+    };
+    const blurInput = ()=>{
+        const { current: input } = dropdownRef;
+        if (input) input.blur();
+    };
+    useImperativeHandle(ref, ()=>({
+            focus: focusInput,
+            blur: blurInput
+        }));
+    const handleContainerClick = (event)=>{
+        event.stopPropagation();
+        focusInput();
+    };
+    const toggleExpand = (event)=>{
+        event.stopPropagation();
+        setExpanded(!expanded);
+    };
+    useEffect(()=>{
+        if (!expanded) blurInput();
+        setError(false);
+    }, [
+        expanded
+    ]);
+    const maxItemsReached = maxItems ? items.length >= maxItems : void 0;
+    const disableInput = disabled || maxItemsReached;
+    const listComponent = ()=>{
+        const list = /*#__PURE__*/ jsxs(ItemList, {
+            expanded: expanded,
+            labeled: !!listLabel,
+            maxHeight: maxListHeight,
+            ref: listRef,
+            children: [
+                listText && /*#__PURE__*/ jsx(ListText, {
+                    expanded: expanded,
+                    labeled: !!listLabel,
+                    children: listText
+                }),
+                items.map((item)=>/*#__PURE__*/ jsx(Tag, {
+                        ...item,
+                        removable: expanded,
+                        onRemove: ()=>removeItem(item),
+                        disabled: disabled
+                    }, item.id)),
+                /*#__PURE__*/ jsx(SearchDropdown, {
+                    "aria-label": "MultiSelect search",
+                    options: options,
+                    items: items,
+                    triggerRef: dropdownTriggerRef,
+                    placeholder: disabled || items.length > 0 ? ' ' : placeholder || 'Search...',
+                    placeholderColor: inputColors.color.placeholder,
+                    fontSize: font.size.md,
+                    addItem: addItem,
+                    removeItem: removeItem,
+                    onTextChange: onTextChange,
+                    disabled: disableInput,
+                    autoFocus: autoFocus,
+                    ref: dropdownRef,
+                    accepts: accepts,
+                    maxHeight: maxMenuHeight,
+                    onValidChange: (valid)=>setError(!valid)
+                })
+            ]
+        });
+        return list;
+    };
+    return /*#__PURE__*/ jsxs(Container, {
+        width: width,
+        ref: clickOutsideRef,
+        labeled: !!listLabel,
+        disabled: disabled,
+        collapse: collapse,
+        onClick: handleContainerClick,
+        embedded: embedded,
+        ...rest,
+        children: [
+            /*#__PURE__*/ jsxs(InnerContainer, {
+                collapse: collapse,
+                ref: dropdownTriggerRef,
+                expanded: expanded && items.length > 0,
+                error: invalid || error,
+                labeled: !!listLabel,
+                backgroundColor: backgroundColor,
+                borderless: borderless,
+                embedded: embedded,
+                disabled: disabled,
+                ...paddingProps,
+                children: [
+                    listLabel ? /*#__PURE__*/ jsx(ListLabel, {
+                        collapse: collapse,
+                        children: listLabel
+                    }) : listComponent(),
+                    /*#__PURE__*/ jsxs(Meta, {
+                        children: [
+                            onToggleAllItems && expanded && /*#__PURE__*/ jsx(Checkbox, {
+                                label: "All",
+                                labelPosition: "right",
+                                gap: 4,
+                                checked: items.length === options.length,
+                                partial: items.length > 0 && items.length < options.length,
+                                onChange: onToggleAllItems
+                            }),
+                            maxItems && !hideItemsInfo && /*#__PURE__*/ jsx(ItemCount, {
+                                children: disabled && itemsTitle ? /*#__PURE__*/ jsxs(Fragment, {
+                                    children: [
+                                        items.length,
+                                        " ",
+                                        itemsTitle
+                                    ]
+                                }) : /*#__PURE__*/ jsxs(Fragment, {
+                                    children: [
+                                        /*#__PURE__*/ jsx(Count, {
+                                            error: items.length > maxItems,
+                                            children: items.length
+                                        }),
+                                        "/",
+                                        maxItems,
+                                        " ",
+                                        itemsTitle
+                                    ]
+                                })
+                            }),
+                            items.length > 0 && /*#__PURE__*/ jsx(Icon, {
+                                name: expanded ? 'chevron-up' : 'chevron-down',
+                                color: color.brand,
+                                pointer: true,
+                                onClick: toggleExpand
+                            })
+                        ]
+                    })
+                ]
+            }),
+            listLabel && expanded && listComponent()
+        ]
+    });
+};
+const Container = styled.div(({ width, disabled, labeled, collapse, embedded })=>{
+    const embeddedHeight = collapse ? 62 : 41;
+    return {
+        width,
+        minWidth: 200,
+        height: embedded ? embeddedHeight : void 0,
+        position: 'relative',
+        cursor: labeled || disabled ? 'default' : 'text'
+    };
+}, marginProps);
+const InnerContainer = styled.div(({ theme, expanded, error, labeled, collapse, backgroundColor, borderless, embedded, disabled })=>({
+        display: 'grid',
+        gridTemplateColumns: collapse ? void 0 : '1fr auto',
+        alignItems: expanded && !labeled ? 'flex-start' : 'center',
+        columnGap: 24,
+        width: '100%',
+        minHeight: 41,
+        position: embedded ? 'absolute' : 'relative',
+        top: embedded ? 0 : void 0,
+        left: embedded ? 0 : void 0,
+        backgroundColor: backgroundColor || embedded ? theme.background0 : theme.input.background.default,
+        zIndex: expanded && !embedded ? 1 : void 0,
+        borderBottom: error ? `1px solid ${theme.color.error}` : theme.defaultBorder,
+        border: borderless || !embedded ? 'none' : void 0,
+        borderRadius: embedded ? void 0 : 4,
+        padding: '8px 16px',
+        '&:focus-within': {
+            backgroundColor: backgroundColor || embedded || disabled || error ? void 0 : theme.input.background.focused
+        },
+        '&:hover:not(:focus-within)': {
+            backgroundColor: backgroundColor || embedded || disabled || error ? void 0 : theme.input.background.hover
+        }
+    }), ({ theme, error, embedded })=>({
+        backgroundColor: error && !embedded ? theme.input.background.invalid : void 0,
+        '&:hover:not(:focus-within)': {
+            backgroundColor: error && !embedded ? theme.input.background.invalidHover : void 0
+        }
+    }), styledProps_js_paddingProps);
+const ListLabel = styled.div(({ theme, collapse })=>({
+        textAlign: collapse ? void 0 : 'center',
+        fontSize: theme.font.size.md,
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis'
+    }));
+const ItemList = styled.div(({ theme, expanded, maxHeight })=>({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'flex-start',
+        width: '100%',
+        maxHeight,
+        overflow: maxHeight ? 'auto' : 'hidden',
+        pointerEvents: expanded ? void 0 : 'none',
+        flexWrap: expanded ? 'wrap' : void 0,
+        gap: theme.size.sm,
+        '& > *': {
+            flexShrink: 0
+        }
+    }), ({ theme, labeled, expanded })=>labeled && expanded ? {
+        backgroundColor: theme.background0,
+        position: 'absolute',
+        top: '100%',
+        zIndex: 1,
+        padding: '8px 0px',
+        borderBottom: theme.defaultBorder
+    } : {});
+const ListText = styled.div(({ theme, expanded, labeled })=>({
+        fontSize: theme.font.size.sm,
+        fontWeight: theme.font.weight.medium,
+        color: theme.scale8,
+        paddingLeft: expanded && labeled ? 16 : void 0
+    }));
+const Meta = styled.div(({ theme: { size } })=>({
+        display: 'flex',
+        alignItems: 'center',
+        columnGap: size.sm,
+        whiteSpace: 'nowrap'
+    }));
+const Count = styled.div(({ theme, error })=>({
+        color: error ? theme.color.error : theme.scale8
+    }));
+const ItemCount = styled.div(({ theme })=>({
+        display: 'flex',
+        color: theme.scale4,
+        fontSize: theme.font.size.sm
+    }));
+const MultiSelect_MultiSelect = MultiSelect;
+export { MultiSelect_MultiSelect as default };

package/build/components/MultiSelect/SearchDropdown.js

@@ -0,0 +1,155 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { keyframes } from "@emotion/react";
+import styled from "@emotion/styled";
+import { useEffect, useMemo, useState } from "react";
+import { ComboBox } from "react-aria-components";
+import flattenListOptions from "../../utils/flattenListOptions.js";
+import Input from "../Inputs/helpers/Input.js";
+import isAcceptable from "../Inputs/helpers/isAcceptable.js";
+import useDynamicWidth from "../Inputs/helpers/useDynamicWidth.js";
+import ListOptions from "../ListBoxParts/ListOptions.js";
+import MotionPopover from "../MotionPopover.js";
+const SearchDropdown_SearchDropdown = ({ options, items, triggerRef, placeholder, placeholderColor, fontSize, position, fixedPosition, maxHeight, disabled, accepts, addItem, removeItem, afterShow, afterHide, onTextChange, onValidChange, ref, ...props })=>{
+    const [isOpen, setIsOpen] = useState(false);
+    const [filteredOptions, setFilteredOptions] = useState([]);
+    const [inputText, setInputText] = useState('');
+    const [invalidInput, setInvalidInput] = useState(false);
+    const [inputWidth, HiddenWidthEl] = useDynamicWidth({
+        value: inputText,
+        placeholder,
+        fontSize
+    });
+    const refObject = triggerRef && 'current' in triggerRef ? triggerRef : void 0;
+    useEffect(()=>{
+        if (items.length > 0) {
+            const filtered = options.filter((option)=>!items.some((item)=>item.id === option.id));
+            setFilteredOptions(filtered);
+        } else setFilteredOptions(options);
+    }, [
+        items
+    ]);
+    const handleValidity = (valid)=>{
+        if (onValidChange) onValidChange(valid);
+        setInvalidInput(!valid);
+    };
+    const handleInputChange = (value)=>{
+        if (onTextChange) onTextChange(value);
+        setInputText(value);
+        handleValidity(true);
+    };
+    const flatOptions = useMemo(()=>flattenListOptions(options), [
+        options
+    ]);
+    const handleSelect = (val)=>{
+        if (!val) return;
+        const item = flatOptions.find((option)=>option.id === val);
+        if (item) {
+            addItem(item);
+            setInputText('');
+            handleValidity(true);
+        }
+    };
+    const handleCustomValue = ()=>{
+        if (isOpen) return;
+        if (!accepts || !inputText) return void setInputText('');
+        const allowed = 'function' == typeof accepts ? accepts(inputText) : isAcceptable(inputText, accepts);
+        if (allowed) {
+            addItem({
+                id: inputText,
+                value: inputText
+            });
+            setInputText('');
+            handleValidity(true);
+        } else handleValidity(false);
+    };
+    const handleOpenChange = (show)=>{
+        setIsOpen(show);
+        if (afterShow && show) afterShow();
+        if (afterHide && !show) afterHide();
+    };
+    const handleKeyDown = (event)=>{
+        const { key, target, altKey, ctrlKey, metaKey } = event;
+        const { value: text } = target;
+        if (altKey || ctrlKey || metaKey || !key) return;
+        switch(key){
+            case 'Backspace':
+                if (!text && items.length > 0) {
+                    const lastItem = items[items.length - 1];
+                    removeItem(lastItem);
+                }
+                break;
+            case 'Enter':
+                handleCustomValue();
+                break;
+            default:
+                break;
+        }
+    };
+    return /*#__PURE__*/ jsxs(ComboRoot, {
+        onOpenChange: handleOpenChange,
+        menuTrigger: "focus",
+        inputValue: inputText,
+        onInputChange: handleInputChange,
+        onSelectionChange: handleSelect,
+        onBlur: handleCustomValue,
+        isDisabled: disabled,
+        shouldFocusWrap: true,
+        selectedKey: "",
+        allowsCustomValue: !!accepts,
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx(InputShakeContainer, {
+                shake: invalidInput,
+                children: /*#__PURE__*/ jsx(Input, {
+                    placeholder: placeholder,
+                    placeholderColor: placeholderColor,
+                    fontSize: fontSize,
+                    isDisabled: disabled,
+                    onKeyDown: handleKeyDown,
+                    ref: ref,
+                    width: inputWidth
+                })
+            }),
+            /*#__PURE__*/ jsx(HiddenWidthEl, {}),
+            /*#__PURE__*/ jsx(MotionPopover, {
+                triggerRef: refObject,
+                offset: 2,
+                placement: position,
+                shouldFlip: fixedPosition ? false : void 0,
+                maxHeight: maxHeight,
+                children: ({ isEntering, isExiting })=>/*#__PURE__*/ jsx(ListOptions, {
+                        options: filteredOptions,
+                        width: refObject?.current?.offsetWidth,
+                        readOnly: isEntering || isExiting
+                    })
+            })
+        ]
+    });
+};
+const ComboRoot = styled(ComboBox)({
+    width: 'auto'
+});
+const shakeAnimation = keyframes({
+    '10%': {
+        transform: 'translate3d(-1px, 0, 0)'
+    },
+    '30%': {
+        transform: 'translate3d(2px, 0, 0)'
+    },
+    '50%': {
+        transform: 'translate3d(-2px, 0, 0)'
+    },
+    '70%': {
+        transform: 'translate3d(2px, 0, 0)'
+    },
+    '90%': {
+        transform: 'translate3d(-1px, 0, 0)'
+    }
+});
+const InputShakeContainer = styled.div(({ shake })=>({
+        '& input': {
+            animation: shake ? `${shakeAnimation} .5s linear` : void 0
+        }
+    }));
+const SearchDropdown = SearchDropdown_SearchDropdown;
+export { SearchDropdown as default };

package/build/components/MultiSelect/index.js

@@ -0,0 +1,2 @@
+import MultiSelect from "./MultiSelect.js";
+export { MultiSelect as default };