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

package/build/components/Icon/icons.js

@@ -0,0 +1,145 @@
+const icons = {
+    'activity-history': 'id-card',
+    add: 'plus',
+    'add-circle': 'circle-plus',
+    'add-person': 'user-round-plus',
+    'arrow-down': 'arrow-down',
+    'arrow-left': 'arrow-left',
+    'arrow-right': 'arrow-right',
+    'arrow-up': 'arrow-up',
+    attachment: 'paperclip',
+    auto: 'refresh-ccw-dot',
+    bell: 'bell',
+    'bell-dot': 'bell-dot',
+    blockquote: 'text-quote',
+    bold: 'bold',
+    bot: 'bot',
+    bug: 'bug',
+    bulb: 'lightbulb',
+    calendar: 'calendar-days',
+    camera: 'camera',
+    card: 'credit-card',
+    check: 'check',
+    'check-badge': 'badge-check',
+    'check-circle': 'circle-check',
+    'chevron-down': 'chevron-down',
+    'chevron-left': 'chevron-left',
+    'chevron-right': 'chevron-right',
+    'chevron-up': 'chevron-up',
+    circle: 'circle',
+    clapperboard: 'clapperboard',
+    close: 'x',
+    'close-circle': 'circle-x',
+    copy: 'copy',
+    'copy-check': 'copy-check',
+    'copy-plus': 'copy-plus',
+    cycle: 'refresh-cw',
+    dash: 'minus',
+    devices: 'monitor-smartphone',
+    'double-arrow-left': 'chevrons-left',
+    'double-arrow-right': 'chevrons-right',
+    download: 'download',
+    drag: 'grip-vertical',
+    edit: 'pencil',
+    'emoji-happy': 'smile',
+    'emoji-neutral': 'meh',
+    'emoji-sad': 'frown',
+    'eye-off': 'eye-off',
+    'eye-on': 'eye',
+    facebook: 'facebook',
+    filter: 'list-filter',
+    flag: 'flag',
+    flask: 'flask-conical',
+    funnel: 'funnel',
+    globe: 'globe',
+    group: 'users',
+    hash: 'hash',
+    heading: 'heading',
+    'heading-1': 'heading-1',
+    'heading-2': 'heading-2',
+    'heading-3': 'heading-3',
+    'heading-4': 'heading-4',
+    'heading-5': 'heading-5',
+    'heading-6': 'heading-6',
+    headset: 'headset',
+    hearing: 'ear',
+    heart: 'heart',
+    help: 'circle-question-mark',
+    highlight: 'highlighter',
+    home: 'house',
+    hourglass: 'hourglass',
+    info: 'info',
+    instagram: 'instagram',
+    italic: 'italic',
+    join: 'log-in',
+    'kebab-menu': 'ellipsis-vertical',
+    kanban: 'kanban',
+    'layout-dashboard': 'layout-dashboard',
+    link: 'link',
+    linkedin: 'linkedin',
+    'list-bullet': 'list',
+    'list-checks': 'list-checks',
+    'list-ordered': 'list-ordered',
+    'list-task': 'list-todo',
+    loading: 'loader',
+    'local-area': 'map-pinned',
+    location: 'map-pin',
+    logout: 'log-out',
+    maximize: 'maximize-2',
+    menu: 'menu',
+    merge: 'merge',
+    'merge-field': 'braces',
+    message: 'message-square-more',
+    mic: 'mic',
+    'mic-off': 'mic-off',
+    minimize: 'minimize-2',
+    mobile: 'smartphone',
+    'not-allowed': 'ban',
+    notes: 'notebook-pen',
+    open: 'external-link',
+    paragraph: 'pilcrow',
+    pause: 'pause',
+    'pause-circle': 'circle-pause',
+    person: 'user-round',
+    play: 'play',
+    'play-circle': 'circle-play',
+    priority: 'arrow-up-wide-narrow',
+    'profile-user': 'circle-user-round',
+    redo: 'redo',
+    refresh: 'rotate-cw',
+    rocket: 'rocket',
+    schedule: 'clock',
+    search: 'search',
+    settings: 'settings',
+    share: 'share-2',
+    'share-arrow': 'share',
+    shield: 'shield',
+    'shield-check': 'shield-check',
+    'shield-health': 'shield-plus',
+    'shield-slash': 'shield-off',
+    sort: 'arrow-down-wide-narrow',
+    'sort-arrows': 'chevrons-up-down',
+    'square-stack': 'square-stack',
+    stack: 'layers-2',
+    star: 'star',
+    stars: 'sparkles',
+    stats: 'chart-column',
+    stop: 'square',
+    'stop-circle': 'circle-stop',
+    strikethrough: 'strikethrough',
+    template: 'file-text',
+    transfer: 'arrow-right-left',
+    trash: 'trash-2',
+    trophy: 'trophy',
+    underline: 'underline',
+    undo: 'undo',
+    upload: 'upload',
+    video: 'video',
+    voicemail: 'voicemail',
+    'vol-on': 'volume-2',
+    warning: 'triangle-alert',
+    'warning-circle': 'circle-alert',
+    youtube: 'youtube'
+};
+const Icon_icons = icons;
+export { Icon_icons as default };

package/build/components/Icon/index.js

@@ -0,0 +1,3 @@
+import Icon from "./Icon.js";
+const components_Icon = Icon;
+export { components_Icon as default };

package/build/components/ImageViewer.js

@@ -0,0 +1,142 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { useEffect, useState } from "react";
+import { useOnClickOutside } from "../hooks/index.js";
+import Icon from "./Icon/index.js";
+const ImageViewer_ImageViewer = ({ visible, close, images, startIndex, alt, maxWidth, maxHeight, opacity, ...rest })=>{
+    const [currentIndex, setCurrentIndex] = useState(startIndex);
+    const exclusions = [
+        '#viewer-prev',
+        '#viewer-next',
+        '#viewer-prev *',
+        '#viewer-next *'
+    ];
+    const imageRef = useOnClickOutside(close, visible, exclusions);
+    useEffect(()=>{
+        setCurrentIndex(startIndex);
+    }, [
+        startIndex
+    ]);
+    const handlePrev = ()=>currentIndex > 0 ? setCurrentIndex(currentIndex - 1) : setCurrentIndex(images.length - 1);
+    const handleNext = ()=>currentIndex < images.length - 1 ? setCurrentIndex(currentIndex + 1) : setCurrentIndex(0);
+    const handleKeyPress = (event)=>{
+        const { key } = event;
+        switch(key){
+            case 'ArrowLeft':
+            case 'ArrowDown':
+                event.preventDefault();
+                handlePrev();
+                break;
+            case 'ArrowRight':
+            case 'ArrowUp':
+                event.preventDefault();
+                handleNext();
+                break;
+            case 'Escape':
+                event.preventDefault();
+                close();
+                break;
+            default:
+                break;
+        }
+    };
+    useEffect(()=>{
+        const ssr = 'undefined' == typeof window;
+        const cleanup = ssr ? ()=>null : ()=>window.removeEventListener('keydown', handleKeyPress);
+        if (visible && !ssr) window.addEventListener('keydown', handleKeyPress);
+        return cleanup;
+    }, [
+        visible,
+        currentIndex
+    ]);
+    return visible ? /*#__PURE__*/ jsxs(Viewer, {
+        opacity: opacity,
+        prevNext: images.length > 1,
+        ...rest,
+        children: [
+            /*#__PURE__*/ jsx(Close, {
+                onClick: close,
+                children: /*#__PURE__*/ jsx(Icon, {
+                    name: "close",
+                    color: "white"
+                })
+            }),
+            images.length > 1 && /*#__PURE__*/ jsx(PrevNext, {
+                id: "viewer-prev",
+                onClick: handlePrev,
+                children: /*#__PURE__*/ jsx(Icon, {
+                    name: "chevron-left",
+                    size: 35,
+                    color: "white"
+                })
+            }),
+            /*#__PURE__*/ jsx(Media, {
+                ref: imageRef,
+                src: images[currentIndex],
+                alt: alt,
+                maxWidth: maxWidth,
+                maxHeight: maxHeight
+            }),
+            images.length > 1 && /*#__PURE__*/ jsx(PrevNext, {
+                next: true,
+                id: "viewer-next",
+                onClick: handleNext,
+                children: /*#__PURE__*/ jsx(Icon, {
+                    name: "chevron-right",
+                    size: 35,
+                    color: "white"
+                })
+            })
+        ]
+    }) : null;
+};
+const Viewer = styled.div(({ prevNext, opacity })=>({
+        width: '100%',
+        height: '100%',
+        backgroundColor: `rgba(0, 0, 0, ${opacity ?? 0.3})`,
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        display: 'grid',
+        gridTemplateColumns: prevNext ? 'auto 1fr auto' : '1fr',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        zIndex: 10000,
+        userSelect: 'none',
+        borderRadius: 5
+    }));
+const Close = styled.div({
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    cursor: 'pointer',
+    width: 50,
+    height: 50,
+    zIndex: 1
+});
+const PrevNext = styled.div(({ next })=>({
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        cursor: 'pointer',
+        width: 50,
+        height: '100%',
+        backgroundColor: 'transparent',
+        left: next ? void 0 : 0,
+        right: next ? 0 : void 0,
+        zIndex: 0,
+        '&:hover': {
+            background: `linear-gradient(90deg, rgba(0,0,0,${next ? 0 : 0.4}) 0%, rgba(0,0,0,${next ? 0.4 : 0}) 100%)`
+        }
+    }));
+const Media = styled.img(({ maxWidth, maxHeight })=>({
+        display: 'block',
+        justifySelf: 'center',
+        maxWidth: maxWidth || '100%',
+        maxHeight: maxHeight || '100%'
+    }));
+const ImageViewer = ImageViewer_ImageViewer;
+export { ImageViewer as default };

package/build/components/InlineCode.js

@@ -0,0 +1,10 @@
+import styled from "@emotion/styled";
+const InlineCode_InlineCode = styled.code(({ theme })=>({
+        fontFamily: "source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace",
+        color: theme.scale10,
+        backgroundColor: theme.scale1,
+        borderRadius: theme.size.xs,
+        padding: '2px 4px'
+    }));
+const InlineCode = InlineCode_InlineCode;
+export { InlineCode as default };

package/build/components/InputHelpers.js

@@ -0,0 +1,106 @@
+import styled from "@emotion/styled";
+import { useState } from "react";
+import { marginProps, paddingProps, widthHeightProps } from "./helpers/styledProps.js";
+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 isInputFilled = (value)=>{
+    const filled = !!value || null != value && '' !== value;
+    return filled;
+};
+const InputContainer = styled.div(({ theme: { input, accent }, backgroundColor, borderRadius, borderColor, textOnly, focused, invalid, disabled, hasLabel, pointer })=>({
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        position: 'relative',
+        minHeight: hasLabel ? 48 : 40,
+        height: hasLabel ? 48 : 40,
+        padding: '5px 16px',
+        boxSizing: 'border-box',
+        color: disabled ? 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,
+        '&:focus-visible': {
+            outline: `${accent} solid 1px`
+        },
+        '&:hover': {
+            backgroundColor: disabled || textOnly || backgroundColor ? void 0 : input.background.hover,
+            borderColor: focused || disabled || invalid ? void 0 : input.borderColor.hover,
+            Label: {
+                color: focused || disabled ? void 0 : input.labelColor.hover
+            }
+        }
+    }), ({ theme: { input }, focused })=>({
+        backgroundColor: focused ? input.background.focused : void 0,
+        borderColor: focused ? input.borderColor.focused : void 0
+    }), ({ theme: { input }, invalid })=>({
+        borderColor: invalid ? input.borderColor.error : void 0
+    }), ({ theme: { input }, disabled, readOnly })=>({
+        backgroundColor: disabled ? input.background.disabled : void 0,
+        borderColor: disabled ? input.borderColor.disabled : void 0,
+        pointerEvents: disabled || readOnly ? 'none' : void 0
+    }), ({ theme, textOnly, disabled })=>({
+        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 && disabled ? theme.scale4 : void 0
+    }), ({ backgroundColor })=>({
+        backgroundColor
+    }), widthHeightProps, marginProps, paddingProps);
+const InputWrapper = 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 Label = styled.label(({ theme: { font, input }, filled, focused })=>({
+        fontSize: filled || focused ? font.size.sm : font.size.lg,
+        color: filled ? input.labelColor.filled : input.labelColor.default,
+        position: 'relative',
+        top: filled || focused ? void 0 : 1
+    }), ({ theme: { input }, disabled })=>({
+        color: disabled ? input.labelColor.disabled : void 0
+    }), ({ theme: { input }, focused })=>({
+        color: focused ? input.labelColor.focused : void 0
+    }));
+const Description = styled.div(({ theme: { font, input }, invalid })=>({
+        color: invalid ? input.color.descriptionError : input.color.description,
+        fontSize: font.size.sm,
+        position: 'absolute',
+        left: 0,
+        top: 'calc(100% + 4px)'
+    }));
+const InputHelpers = {
+    Container: InputContainer,
+    Wrapper: InputWrapper,
+    Label,
+    Description,
+    useInputFocus,
+    isInputFilled
+};
+export { Description, InputContainer, InputWrapper, Label, InputHelpers as default, isInputFilled, useInputFocus };

package/build/components/Inputs/DatePicker.js

@@ -0,0 +1,111 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { CalendarDate } from "@internationalized/date";
+import { useEffect, useRef, useState } from "react";
+import { DateInput, DatePicker, Dialog, Popover } from "react-aria-components";
+import Calendar from "../Calendar.js";
+import useMinMax from "../CalendarParts/useMinMax.js";
+import { getDateFromObj, getObjFromDate } from "../CalendarParts/utils.js";
+import getIcon from "../helpers/getIcon.js";
+import Icon from "../Icon/index.js";
+import Spinner from "../Spinner.js";
+import DateSegment from "./helpers/DateSegment.js";
+import InputContainerStyles from "./helpers/InputContainerStyles.js";
+import InputMessage from "./helpers/InputMessage.js";
+import InputStyles, { preventProps } from "./helpers/InputStyles.js";
+import Label from "./helpers/Label.js";
+import PickerToggle from "./helpers/PickerToggle.js";
+const DatePicker_DatePicker = ({ value, label, iconLeft, iconRight, loading, fontSize, placeholderColor, disabled, readOnly, invalid, required, description, errorMessage, preventPast, preventFuture, hidePicker, onChange, afterShow, afterHide, ref, ...props })=>{
+    const [selectedDate, setSelectedDate] = useState(value ? getObjFromDate(value) : void 0);
+    const containerRef = useRef(null);
+    const { min, max } = useMinMax({
+        past: preventPast,
+        future: preventFuture
+    });
+    useEffect(()=>{
+        if (value) setSelectedDate(getObjFromDate(value));
+    }, [
+        value
+    ]);
+    const handleOpenChange = (show)=>{
+        if (afterShow && show) afterShow();
+        if (afterHide && !show) afterHide();
+    };
+    const handleDateChange = (val)=>{
+        if (!val) return;
+        const { year, month, day } = val;
+        const selected = new CalendarDate(year, month, day);
+        setSelectedDate(selected);
+        const newDate = getDateFromObj(val);
+        if (onChange) onChange(newDate);
+    };
+    const handleCalendarChange = (val)=>{
+        handleDateChange(getObjFromDate(val));
+    };
+    const inputHidden = !!(!selectedDate && label);
+    return /*#__PURE__*/ jsxs(InputContainer, {
+        value: selectedDate,
+        hasLabel: !!label,
+        isDisabled: disabled,
+        isReadOnly: readOnly || loading,
+        isInvalid: invalid,
+        isRequired: required,
+        minValue: min,
+        maxValue: max,
+        onChange: handleDateChange,
+        onOpenChange: handleOpenChange,
+        ref: containerRef,
+        ...props,
+        children: [
+            iconLeft && getIcon(iconLeft, {
+                marginRight: 8
+            }),
+            /*#__PURE__*/ jsx(Label, {
+                label: label,
+                filled: !!selectedDate,
+                disabled: disabled,
+                children: /*#__PURE__*/ jsx(Input, {
+                    ref: ref,
+                    hide: inputHidden,
+                    fontSize: fontSize,
+                    placeholderColor: placeholderColor,
+                    isDisabled: disabled,
+                    children: (segment)=>/*#__PURE__*/ jsx(DateSegment, {
+                            placeholderColor: placeholderColor,
+                            segment: segment
+                        })
+                })
+            }),
+            !hidePicker && /*#__PURE__*/ jsx(PickerToggle, {
+                isDisabled: disabled,
+                children: /*#__PURE__*/ jsx(Icon, {
+                    size: "small",
+                    name: "calendar"
+                })
+            }),
+            iconRight && getIcon(iconRight),
+            loading && /*#__PURE__*/ jsx(Spinner, {}),
+            /*#__PURE__*/ jsx(InputMessage, {
+                description: description,
+                errorMessage: errorMessage
+            }),
+            /*#__PURE__*/ jsx(Popover, {
+                triggerRef: containerRef,
+                children: /*#__PURE__*/ jsx(Dialog, {
+                    children: /*#__PURE__*/ jsx(Calendar, {
+                        date: selectedDate ? getDateFromObj(selectedDate) : void 0,
+                        onChange: handleCalendarChange,
+                        preventPast: preventPast,
+                        preventFuture: preventFuture
+                    })
+                })
+            })
+        ]
+    });
+};
+const InputContainer = styled(DatePicker)(InputContainerStyles);
+const Input = styled(DateInput, preventProps)({
+    display: 'flex'
+}, InputStyles);
+const Inputs_DatePicker = DatePicker_DatePicker;
+export { Inputs_DatePicker as default };

package/build/components/Inputs/DateRangePicker.js

@@ -0,0 +1,166 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { CalendarDate } from "@internationalized/date";
+import { useEffect, useRef, useState } from "react";
+import { DateInput, DateRangePicker, Dialog, Group, Popover } from "react-aria-components";
+import useMinMax from "../CalendarParts/useMinMax.js";
+import { getDateFromObj, getObjFromDate } from "../CalendarParts/utils.js";
+import getIcon from "../helpers/getIcon.js";
+import Icon from "../Icon/index.js";
+import RangeCalendar from "../RangeCalendar.js";
+import Spinner from "../Spinner.js";
+import DateSegment from "./helpers/DateSegment.js";
+import InputContainerStyles from "./helpers/InputContainerStyles.js";
+import InputMessage from "./helpers/InputMessage.js";
+import InputStyles, { preventProps } from "./helpers/InputStyles.js";
+import Label from "./helpers/Label.js";
+import PickerToggle from "./helpers/PickerToggle.js";
+const DateRangePicker_DateRangePicker = ({ startValue, endValue, label, iconLeft, iconRight, loading, fontSize, placeholderColor, disabled, readOnly, invalid, required, description, errorMessage, preventPast, preventFuture, hidePicker, onChange, afterShow, afterHide, ref, ...props })=>{
+    const [selectedStart, setSelectedStart] = useState(startValue ? getObjFromDate(startValue) : void 0);
+    const [selectedEnd, setSelectedEnd] = useState(endValue ? getObjFromDate(endValue) : void 0);
+    const containerRef = useRef(null);
+    const { min, max } = useMinMax({
+        past: preventPast,
+        future: preventFuture
+    });
+    useEffect(()=>{
+        if (startValue) setSelectedStart(getObjFromDate(startValue));
+        if (endValue) setSelectedEnd(getObjFromDate(endValue));
+    }, [
+        startValue,
+        endValue
+    ]);
+    const handleOpenChange = (show)=>{
+        if (afterShow && show) afterShow();
+        if (afterHide && !show) afterHide();
+    };
+    const handleDateChange = (val)=>{
+        if (!val) return;
+        const { start, end } = val;
+        const { year: sYear, month: sMonth, day: sDay } = start;
+        const { year: eYear, month: eMonth, day: eDay } = end;
+        const newStart = new CalendarDate(sYear, sMonth, sDay);
+        setSelectedStart(newStart);
+        const newEnd = new CalendarDate(eYear, eMonth, eDay);
+        setSelectedEnd(newEnd);
+        const newStartDate = getDateFromObj(start);
+        const newEndDate = getDateFromObj(end);
+        if (onChange) onChange(newStartDate, newEndDate);
+    };
+    const handleCalendarChange = (startVal, endVal)=>{
+        const newStart = getObjFromDate(startVal);
+        const newEnd = getObjFromDate(endVal);
+        handleDateChange({
+            start: newStart,
+            end: newEnd
+        });
+    };
+    const hasValue = !!(selectedStart || selectedEnd);
+    const inputHidden = !!(!hasValue && label);
+    return /*#__PURE__*/ jsxs(InputContainer, {
+        value: selectedStart && selectedEnd ? {
+            start: selectedStart,
+            end: selectedEnd
+        } : void 0,
+        hasLabel: !!label,
+        isDisabled: disabled,
+        isReadOnly: readOnly || loading,
+        isInvalid: invalid,
+        isRequired: required,
+        minValue: min,
+        maxValue: max,
+        onChange: handleDateChange,
+        onOpenChange: handleOpenChange,
+        ref: containerRef,
+        ...props,
+        children: [
+            iconLeft && getIcon(iconLeft, {
+                marginRight: 8
+            }),
+            /*#__PURE__*/ jsx(Label, {
+                label: label,
+                filled: hasValue,
+                disabled: disabled,
+                children: /*#__PURE__*/ jsxs(InputsWrapper, {
+                    fontSize: fontSize,
+                    hide: inputHidden,
+                    isDisabled: disabled,
+                    children: [
+                        /*#__PURE__*/ jsx(Input, {
+                            slot: "start",
+                            ref: ref,
+                            fontSize: fontSize,
+                            placeholderColor: placeholderColor,
+                            isDisabled: disabled,
+                            children: (segment)=>/*#__PURE__*/ jsx(DateSegment, {
+                                    placeholderColor: placeholderColor,
+                                    segment: segment
+                                })
+                        }),
+                        /*#__PURE__*/ jsx("span", {
+                            "aria-hidden": "true",
+                            children: "–"
+                        }),
+                        /*#__PURE__*/ jsx(Input, {
+                            slot: "end",
+                            fontSize: fontSize,
+                            placeholderColor: placeholderColor,
+                            isDisabled: disabled,
+                            children: (segment)=>/*#__PURE__*/ jsx(DateSegment, {
+                                    placeholderColor: placeholderColor,
+                                    segment: segment
+                                })
+                        })
+                    ]
+                })
+            }),
+            !hidePicker && /*#__PURE__*/ jsx(PickerToggle, {
+                isDisabled: disabled,
+                children: /*#__PURE__*/ jsx(Icon, {
+                    size: "small",
+                    name: "calendar"
+                })
+            }),
+            iconRight && getIcon(iconRight),
+            loading && /*#__PURE__*/ jsx(Spinner, {}),
+            /*#__PURE__*/ jsx(InputMessage, {
+                description: description,
+                errorMessage: errorMessage
+            }),
+            /*#__PURE__*/ jsx(Popover, {
+                triggerRef: containerRef,
+                children: /*#__PURE__*/ jsx(Dialog, {
+                    children: /*#__PURE__*/ jsx(RangeCalendar, {
+                        startDate: selectedStart ? getDateFromObj(selectedStart) : void 0,
+                        endDate: selectedEnd ? getDateFromObj(selectedEnd) : void 0,
+                        onChange: handleCalendarChange,
+                        preventPast: preventPast,
+                        preventFuture: preventFuture
+                    })
+                })
+            })
+        ]
+    });
+};
+const InputContainer = styled(DateRangePicker)(InputContainerStyles);
+const Input = styled(DateInput, preventProps)(InputStyles, {
+    display: 'flex',
+    '&:first-of-type': {
+        marginRight: 0
+    }
+});
+const InputsWrapper = styled(Group, preventProps)(({ theme: { input, font }, hide, fontSize, isDisabled })=>({
+        display: 'flex',
+        alignItems: 'center',
+        gap: 4,
+        '& > span': {
+            color: isDisabled ? input.color.disabled : input.color.default,
+            fontSize: fontSize || font.size.lg
+        },
+        '&:not(:focus):not(:focus-within)': {
+            opacity: hide ? 0 : 1,
+            position: hide ? 'absolute' : void 0
+        }
+    }));
+const Inputs_DateRangePicker = DateRangePicker_DateRangePicker;
+export { Inputs_DateRangePicker as default };