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

package/build/components/Inputs/InlineInput.js

@@ -0,0 +1,71 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { useEffect, useState } from "react";
+import { TextField } from "react-aria-components";
+import getIcon from "../helpers/getIcon.js";
+import Spinner from "../Spinner.js";
+import handlePaste from "./helpers/handlePaste.js";
+import Input from "./helpers/Input.js";
+import InputContainerStyles from "./helpers/InputContainerStyles.js";
+import InputMessage from "./helpers/InputMessage.js";
+import isAcceptable from "./helpers/isAcceptable.js";
+import useDynamicWidth from "./helpers/useDynamicWidth.js";
+const InlineInput_InlineInput = ({ value, label, placeholder, iconLeft, iconRight, loading, fontSize, placeholderColor, disabled, readOnly, invalid, required, description, errorMessage, accepts, onChange, onInput, ref, ...props })=>{
+    const [inputValue, setInputValue] = useState('');
+    const [inputWidth, HiddenWidthEl] = useDynamicWidth({
+        value: inputValue,
+        placeholder,
+        fontSize
+    });
+    useEffect(()=>{
+        if (null != value && inputValue !== value) setInputValue(value);
+    }, [
+        value
+    ]);
+    const handleChange = (val)=>{
+        if (!isAcceptable(val, accepts)) return;
+        setInputValue(val);
+        if (onChange) onChange(val);
+    };
+    const handleInput = (event)=>{
+        const { value: val } = event.target;
+        if (onInput && isAcceptable(val, accepts)) onInput(event);
+    };
+    return /*#__PURE__*/ jsxs(InputContainer, {
+        value: inputValue,
+        hasLabel: !!label,
+        isDisabled: disabled,
+        isReadOnly: readOnly || loading,
+        isInvalid: invalid,
+        isRequired: required,
+        onChange: handleChange,
+        onInput: onInput ? handleInput : void 0,
+        onPaste: (event)=>handlePaste(event, handleChange, accepts),
+        textOnly: true,
+        ...props,
+        children: [
+            iconLeft && getIcon(iconLeft, {
+                marginRight: 8
+            }),
+            /*#__PURE__*/ jsx(Input, {
+                ref: ref,
+                placeholder: placeholder,
+                hide: !!(!inputValue && label),
+                fontSize: fontSize,
+                placeholderColor: placeholderColor,
+                isDisabled: disabled,
+                width: inputWidth
+            }),
+            /*#__PURE__*/ jsx(HiddenWidthEl, {}),
+            iconRight && getIcon(iconRight),
+            loading && /*#__PURE__*/ jsx(Spinner, {}),
+            /*#__PURE__*/ jsx(InputMessage, {
+                description: description,
+                errorMessage: errorMessage
+            })
+        ]
+    });
+};
+const InputContainer = styled(TextField)(InputContainerStyles);
+const InlineInput = InlineInput_InlineInput;
+export { InlineInput as default };

package/build/components/Inputs/NumberInput.js

@@ -0,0 +1,117 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { useEffect, useState } from "react";
+import { NumberField } from "react-aria-components";
+import getIcon from "../helpers/getIcon.js";
+import Icon from "../Icon/index.js";
+import Spinner from "../Spinner.js";
+import AriaButton from "./helpers/AriaButton.js";
+import Input from "./helpers/Input.js";
+import InputContainerStyles from "./helpers/InputContainerStyles.js";
+import InputMessage from "./helpers/InputMessage.js";
+import Label from "./helpers/Label.js";
+const NumberInput = ({ value, label, placeholder, iconLeft, iconRight, loading, fontSize, placeholderColor, disabled, readOnly, invalid, required, description, errorMessage, hideControls, separator = true, onChange, ref, ...props })=>{
+    const [inputValue, setInputValue] = useState(NaN);
+    useEffect(()=>{
+        if (null != value && inputValue !== value) setInputValue(value);
+    }, [
+        value
+    ]);
+    const handleChange = (val)=>{
+        setInputValue(val);
+        if (onChange) onChange(val);
+    };
+    const hasValue = !Number.isNaN(inputValue) && null != inputValue;
+    return /*#__PURE__*/ jsxs(InputContainer, {
+        value: inputValue,
+        onChange: handleChange,
+        hasLabel: !!label,
+        paddingRight: 0,
+        isDisabled: disabled,
+        isReadOnly: readOnly || loading,
+        isInvalid: invalid,
+        isRequired: required,
+        formatOptions: {
+            useGrouping: separator
+        },
+        ...props,
+        children: [
+            iconLeft && getIcon(iconLeft, {
+                marginRight: 8
+            }),
+            /*#__PURE__*/ jsx(Label, {
+                label: label,
+                filled: hasValue,
+                disabled: disabled,
+                children: /*#__PURE__*/ jsx(Input, {
+                    ref: ref,
+                    placeholder: placeholder,
+                    hide: !!(!hasValue && label),
+                    fontSize: fontSize,
+                    placeholderColor: placeholderColor,
+                    isDisabled: disabled
+                })
+            }),
+            iconRight && getIcon(iconRight),
+            loading && /*#__PURE__*/ jsx(Spinner, {}),
+            !hideControls && /*#__PURE__*/ jsxs(ArrowContainer, {
+                children: [
+                    /*#__PURE__*/ jsx(ArrowButton, {
+                        slot: "increment",
+                        isDisabled: disabled || readOnly,
+                        children: /*#__PURE__*/ jsx(Icon, {
+                            size: label ? 23.5 : 19.5,
+                            name: "caret-up"
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(Divider, {}),
+                    /*#__PURE__*/ jsx(ArrowButton, {
+                        slot: "decrement",
+                        isDisabled: disabled || readOnly,
+                        children: /*#__PURE__*/ jsx(Icon, {
+                            size: label ? 23.5 : 19.5,
+                            name: "caret-down"
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(InputMessage, {
+                description: description,
+                errorMessage: errorMessage
+            })
+        ]
+    });
+};
+const InputContainer = styled(NumberField)(InputContainerStyles);
+const ArrowContainer = styled.div(({ theme })=>({
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+        borderLeft: theme.defaultBorder,
+        overflow: 'hidden',
+        borderTopRightRadius: 4,
+        borderBottomRightRadius: 4
+    }));
+const ArrowButton = styled(AriaButton)(({ theme, isDisabled })=>({
+        height: '100%',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        overflow: 'hidden',
+        borderRadius: 0,
+        color: isDisabled ? theme.scale4 : void 0,
+        pointerEvents: isDisabled ? 'none' : void 0,
+        '&:hover': {
+            backgroundColor: isDisabled ? void 0 : theme.scale1
+        },
+        '&:active': {
+            backgroundColor: theme.scale0
+        }
+    }));
+const Divider = styled.div(({ theme })=>({
+        height: 1,
+        width: '100%',
+        backgroundColor: theme.scale1
+    }));
+const Inputs_NumberInput = NumberInput;
+export { Inputs_NumberInput as default };

package/build/components/Inputs/PhoneInput.js

@@ -0,0 +1,96 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import libphonenumber_js from "libphonenumber-js";
+import { useEffect, useImperativeHandle, useRef, useState } from "react";
+import { TextField } from "react-aria-components";
+import { format, normalize } from "react-phone-input-auto-format";
+import getIcon from "../helpers/getIcon.js";
+import Spinner from "../Spinner.js";
+import Input from "./helpers/Input.js";
+import InputContainerStyles from "./helpers/InputContainerStyles.js";
+import InputMessage from "./helpers/InputMessage.js";
+import Label from "./helpers/Label.js";
+const PhoneInput_PhoneInput = ({ value, label, placeholder, iconLeft, iconRight, leftElement, rightElement, loading, fontSize, placeholderColor, disabled, readOnly, invalid, required, description, errorMessage, onChange, ref, ...props })=>{
+    const [inputValue, setInputValue] = useState('');
+    const internalRef = useRef(null);
+    useImperativeHandle(ref, ()=>internalRef.current);
+    useEffect(()=>{
+        if (null != value && inputValue !== value) {
+            const raw = normalize(value);
+            const formatted = format(raw);
+            setInputValue(formatted);
+            const { current: input } = internalRef;
+            if (input && value === normalize(value)) {
+                const event = new Event('change', {
+                    bubbles: true
+                });
+                const { prototype } = window.HTMLInputElement;
+                Object.getOwnPropertyDescriptor(prototype, 'value')?.set?.call(input, formatted);
+                input.dispatchEvent(event);
+            }
+        }
+    }, [
+        value
+    ]);
+    const handleChange = (val)=>{
+        const normalized = normalize(val);
+        if (normalized.length > 10 || val && !normalized) return;
+        const formatted = format(normalized);
+        if (inputValue === formatted) return;
+        setInputValue(formatted);
+        if (onChange) onChange(formatted, normalized);
+    };
+    const handlePaste = (event)=>{
+        event.stopPropagation();
+        event.preventDefault();
+        const { clipboardData } = event;
+        const text = clipboardData.getData('text');
+        let normalized = normalize(text);
+        if (text.includes('+')) {
+            const parsed = libphonenumber_js(text);
+            normalized = parsed?.nationalNumber || '';
+        }
+        if (normalized) handleChange(normalized);
+    };
+    return /*#__PURE__*/ jsxs(InputContainer, {
+        value: inputValue,
+        hasLabel: !!label,
+        isDisabled: disabled,
+        isReadOnly: readOnly || loading,
+        isInvalid: invalid,
+        isRequired: required,
+        onChange: handleChange,
+        onPaste: handlePaste,
+        type: "tel",
+        ...props,
+        children: [
+            iconLeft && getIcon(iconLeft, {
+                marginRight: 8
+            }),
+            leftElement,
+            /*#__PURE__*/ jsx(Label, {
+                label: label,
+                filled: !!inputValue,
+                disabled: disabled,
+                children: /*#__PURE__*/ jsx(Input, {
+                    ref: internalRef,
+                    placeholder: placeholder,
+                    hide: !!(!inputValue && label),
+                    fontSize: fontSize,
+                    placeholderColor: placeholderColor,
+                    isDisabled: disabled
+                })
+            }),
+            rightElement,
+            iconRight && getIcon(iconRight),
+            loading && /*#__PURE__*/ jsx(Spinner, {}),
+            /*#__PURE__*/ jsx(InputMessage, {
+                description: description,
+                errorMessage: errorMessage
+            })
+        ]
+    });
+};
+const InputContainer = styled(TextField)(InputContainerStyles);
+const PhoneInput = PhoneInput_PhoneInput;
+export { PhoneInput as default };

package/build/components/Inputs/SearchInput.js

@@ -0,0 +1,84 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTheme } from "@emotion/react";
+import styled from "@emotion/styled";
+import { useEffect, useState } from "react";
+import { SearchField } from "react-aria-components";
+import getIcon from "../helpers/getIcon.js";
+import Icon from "../Icon/index.js";
+import Spinner from "../Spinner.js";
+import AriaButton from "./helpers/AriaButton.js";
+import handlePaste from "./helpers/handlePaste.js";
+import Input from "./helpers/Input.js";
+import InputContainerStyles from "./helpers/InputContainerStyles.js";
+import InputMessage from "./helpers/InputMessage.js";
+import isAcceptable from "./helpers/isAcceptable.js";
+import Label from "./helpers/Label.js";
+const SearchInput = ({ value, label, placeholder, iconLeft, iconRight, leftElement, rightElement, loading, fontSize, placeholderColor, disabled, readOnly, invalid, required, description, errorMessage, accepts, onChange, onInput, ref, ...props })=>{
+    const { color } = useTheme();
+    const [inputValue, setInputValue] = useState('');
+    useEffect(()=>{
+        if (null != value && inputValue !== value) setInputValue(value);
+    }, [
+        value
+    ]);
+    const handleChange = (val)=>{
+        if (!isAcceptable(val, accepts)) return;
+        setInputValue(val);
+        if (onChange) onChange(val);
+    };
+    const handleInput = (event)=>{
+        const { value: val } = event.target;
+        if (onInput && isAcceptable(val, accepts)) onInput(event);
+    };
+    return /*#__PURE__*/ jsxs(InputContainer, {
+        value: inputValue,
+        hasLabel: !!label,
+        isDisabled: disabled,
+        isReadOnly: readOnly || loading,
+        isInvalid: invalid,
+        isRequired: required,
+        onChange: handleChange,
+        onInput: onInput ? handleInput : void 0,
+        onPaste: (event)=>handlePaste(event, handleChange, accepts),
+        ...props,
+        children: [
+            iconLeft && getIcon(iconLeft, {
+                marginRight: 8
+            }),
+            leftElement,
+            /*#__PURE__*/ jsx(Icon, {
+                name: "search",
+                marginRight: 8
+            }),
+            /*#__PURE__*/ jsx(Label, {
+                label: label,
+                filled: !!inputValue,
+                disabled: disabled,
+                children: /*#__PURE__*/ jsx(Input, {
+                    ref: ref,
+                    placeholder: placeholder,
+                    hide: !!(!inputValue && label),
+                    fontSize: fontSize,
+                    placeholderColor: placeholderColor,
+                    isDisabled: disabled
+                })
+            }),
+            rightElement,
+            iconRight && getIcon(iconRight),
+            loading && /*#__PURE__*/ jsx(Spinner, {}),
+            !!inputValue && !loading && /*#__PURE__*/ jsx(AriaButton, {
+                children: /*#__PURE__*/ jsx(Icon, {
+                    name: "close-circle",
+                    color: color.brand
+                })
+            }),
+            /*#__PURE__*/ jsx(InputMessage, {
+                description: description,
+                errorMessage: errorMessage
+            })
+        ]
+    });
+};
+const InputContainer = styled(SearchField)(InputContainerStyles);
+const Inputs_SearchInput = SearchInput;
+export { Inputs_SearchInput as default };

package/build/components/Inputs/TextArea.js

@@ -0,0 +1,164 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { useEffect, useRef, useState } from "react";
+import { TextField } from "react-aria-components";
+import getIcon from "../helpers/getIcon.js";
+import Spinner from "../Spinner.js";
+import handlePaste from "./helpers/handlePaste.js";
+import InputContainerStyles from "./helpers/InputContainerStyles.js";
+import InputMessage from "./helpers/InputMessage.js";
+import isAcceptable from "./helpers/isAcceptable.js";
+import Label from "./helpers/Label.js";
+import TextArea from "./helpers/TextArea.js";
+const TextAreaComponent = ({ value, label, placeholder, iconLeft, iconRight, loading, fontSize, placeholderColor, disabled, readOnly, invalid, required, description, errorMessage, accepts, asTrigger, height, maxHeight, onChange, onInput, ref, ...props })=>{
+    const [inputValue, setInputValue] = useState('');
+    const textAreaRef = useRef(null);
+    useEffect(()=>{
+        if (null != value && inputValue !== value) setInputValue(value);
+    }, [
+        value
+    ]);
+    useEffect(()=>{
+        const textArea = textAreaRef.current;
+        if (!textArea || height && !maxHeight) return;
+        const autoResize = ()=>{
+            textArea.style.height = 'auto';
+            const scrollHeight = textArea.scrollHeight;
+            if (maxHeight) {
+                const maxHeightValue = 'string' == typeof maxHeight ? Number.parseInt(maxHeight, 10) : maxHeight;
+                const constrainedHeight = Math.min(scrollHeight, maxHeightValue - 10);
+                textArea.style.height = `${constrainedHeight}px`;
+                textArea.style.overflow = scrollHeight > maxHeightValue - 10 ? 'auto' : 'hidden';
+            } else if (!height) {
+                textArea.style.height = `${scrollHeight}px`;
+                textArea.style.overflow = 'hidden';
+            }
+        };
+        autoResize();
+        textArea.addEventListener('input', autoResize);
+        return ()=>{
+            textArea.removeEventListener('input', autoResize);
+        };
+    }, [
+        inputValue,
+        height,
+        maxHeight
+    ]);
+    const handleChange = (val)=>{
+        if (!isAcceptable(val, accepts)) return;
+        setInputValue(val);
+        if (onChange) onChange(val);
+    };
+    const handleInput = (event)=>{
+        const { value: val } = event.target;
+        if (onInput && isAcceptable(val, accepts)) onInput(event);
+    };
+    return /*#__PURE__*/ jsxs(TextAreaContainer, {
+        value: inputValue,
+        hasLabel: !!label,
+        isDisabled: disabled,
+        isReadOnly: readOnly || loading || asTrigger,
+        isInvalid: invalid,
+        isRequired: required,
+        onChange: handleChange,
+        onInput: onInput ? handleInput : void 0,
+        onPaste: (event)=>handlePaste(event, handleChange, accepts),
+        asTrigger: asTrigger,
+        height: height,
+        maxHeight: maxHeight,
+        ...props,
+        children: [
+            iconLeft && getIcon(iconLeft, {
+                marginRight: 8
+            }),
+            /*#__PURE__*/ jsx(Label, {
+                label: label,
+                filled: !!inputValue,
+                disabled: disabled,
+                children: /*#__PURE__*/ jsx(TextArea, {
+                    ref: textAreaRef,
+                    placeholder: placeholder,
+                    hide: !!(!inputValue && label),
+                    fontSize: fontSize,
+                    placeholderColor: placeholderColor,
+                    isDisabled: disabled,
+                    tabIndex: asTrigger ? -1 : void 0
+                })
+            }),
+            iconRight && getIcon(iconRight),
+            loading && /*#__PURE__*/ jsx(Spinner, {}),
+            /*#__PURE__*/ jsx(InputMessage, {
+                description: description,
+                errorMessage: errorMessage
+            })
+        ]
+    });
+};
+const TextAreaContainer = styled(TextField)(InputContainerStyles, ({ asTrigger })=>({
+        pointerEvents: asTrigger ? 'none' : void 0
+    }), ({ height, maxHeight })=>{
+    const baseStyles = {
+        alignItems: 'stretch',
+        height: 'auto',
+        minHeight: 80,
+        '& > label': {
+            flex: 1,
+            display: 'flex',
+            flexDirection: 'column',
+            minHeight: 'inherit'
+        }
+    };
+    if (!height && !maxHeight) return {
+        ...baseStyles,
+        '& textarea': {
+            resize: 'none',
+            overflow: 'hidden'
+        }
+    };
+    if (height && !maxHeight) return {
+        ...baseStyles,
+        height,
+        minHeight: height,
+        maxHeight: height,
+        overflow: 'hidden',
+        '& > label': {
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100%',
+            flex: 'none',
+            minHeight: 'auto'
+        },
+        '& textarea': {
+            flex: 1,
+            minHeight: 0,
+            overflow: 'auto'
+        }
+    };
+    if (!height && maxHeight) return {
+        ...baseStyles,
+        maxHeight,
+        '& textarea': {
+            overflow: 'auto',
+            minHeight: 20
+        }
+    };
+    if (height && maxHeight) return {
+        alignItems: 'stretch',
+        height: 'auto',
+        minHeight: height,
+        maxHeight,
+        '& > label': {
+            flex: 1,
+            display: 'flex',
+            flexDirection: 'column',
+            minHeight: 'inherit'
+        },
+        '& textarea': {
+            overflow: 'auto',
+            minHeight: 20
+        }
+    };
+    return baseStyles;
+});
+const Inputs_TextArea = TextAreaComponent;
+export { Inputs_TextArea as default };

package/build/components/Inputs/TextInput.js

@@ -0,0 +1,74 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { useEffect, useState } from "react";
+import { TextField } from "react-aria-components";
+import getIcon from "../helpers/getIcon.js";
+import Spinner from "../Spinner.js";
+import handlePaste from "./helpers/handlePaste.js";
+import Input from "./helpers/Input.js";
+import InputContainerStyles from "./helpers/InputContainerStyles.js";
+import InputMessage from "./helpers/InputMessage.js";
+import isAcceptable from "./helpers/isAcceptable.js";
+import Label from "./helpers/Label.js";
+const TextInput_TextInput = ({ value, label, placeholder, iconLeft, iconRight, leftElement, rightElement, loading, fontSize, placeholderColor, disabled, readOnly, invalid, required, description, errorMessage, accepts, asTrigger, onChange, onInput, ref, ...props })=>{
+    const [inputValue, setInputValue] = useState('');
+    useEffect(()=>{
+        if (null != value && inputValue !== value) setInputValue(value);
+    }, [
+        value
+    ]);
+    const handleChange = (val)=>{
+        if (!isAcceptable(val, accepts)) return;
+        setInputValue(val);
+        if (onChange) onChange(val);
+    };
+    const handleInput = (event)=>{
+        const { value: val } = event.target;
+        if (onInput && isAcceptable(val, accepts)) onInput(event);
+    };
+    return /*#__PURE__*/ jsxs(InputContainer, {
+        value: inputValue,
+        hasLabel: !!label,
+        isDisabled: disabled,
+        isReadOnly: readOnly || loading || asTrigger,
+        isInvalid: invalid,
+        isRequired: required,
+        onChange: handleChange,
+        onInput: onInput ? handleInput : void 0,
+        onPaste: (event)=>handlePaste(event, handleChange, accepts),
+        asTrigger: asTrigger,
+        ...props,
+        children: [
+            iconLeft && getIcon(iconLeft, {
+                marginRight: 8
+            }),
+            leftElement,
+            /*#__PURE__*/ jsx(Label, {
+                label: label,
+                filled: !!inputValue,
+                disabled: disabled,
+                children: /*#__PURE__*/ jsx(Input, {
+                    ref: ref,
+                    placeholder: placeholder,
+                    hide: !!(!inputValue && label),
+                    fontSize: fontSize,
+                    placeholderColor: placeholderColor,
+                    isDisabled: disabled,
+                    tabIndex: asTrigger ? -1 : void 0
+                })
+            }),
+            rightElement,
+            iconRight && getIcon(iconRight),
+            loading && /*#__PURE__*/ jsx(Spinner, {}),
+            /*#__PURE__*/ jsx(InputMessage, {
+                description: description,
+                errorMessage: errorMessage
+            })
+        ]
+    });
+};
+const InputContainer = styled(TextField)(InputContainerStyles, ({ asTrigger })=>({
+        pointerEvents: asTrigger ? 'none' : void 0
+    }));
+const TextInput = TextInput_TextInput;
+export { TextInput as default };

package/build/components/Inputs/TimeInput.js

@@ -0,0 +1,74 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { Time, parseTime } from "@internationalized/date";
+import { useEffect, useState } from "react";
+import { DateInput, TimeField } from "react-aria-components";
+import getIcon from "../helpers/getIcon.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";
+const TimeInput = ({ value, label, iconLeft, iconRight, loading, fontSize, placeholderColor, disabled, readOnly, invalid, required, description, errorMessage, onChange, ref, ...props })=>{
+    const [selectedTime, setSelectedTime] = useState(value ? parseTime(value) : null);
+    useEffect(()=>{
+        if (value) {
+            const selectedString = `${selectedTime?.hour}:${selectedTime?.minute}`;
+            if (selectedString !== value) setSelectedTime(parseTime(value));
+        }
+    }, [
+        value
+    ]);
+    const handleTimeChange = (val)=>{
+        if (!val) return;
+        const { hour, minute, second } = val;
+        const selected = new Time(hour, minute, second);
+        setSelectedTime(selected);
+        if (onChange) onChange(val.toString());
+    };
+    const inputHidden = !!(!selectedTime && label);
+    return /*#__PURE__*/ jsxs(InputContainer, {
+        value: selectedTime,
+        hasLabel: !!label,
+        isDisabled: disabled,
+        isReadOnly: readOnly || loading,
+        isInvalid: invalid,
+        isRequired: required,
+        onChange: handleTimeChange,
+        ...props,
+        children: [
+            iconLeft && getIcon(iconLeft, {
+                marginRight: 8
+            }),
+            /*#__PURE__*/ jsx(Label, {
+                label: label,
+                filled: !!selectedTime,
+                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
+                        })
+                })
+            }),
+            iconRight && getIcon(iconRight),
+            loading && /*#__PURE__*/ jsx(Spinner, {}),
+            /*#__PURE__*/ jsx(InputMessage, {
+                description: description,
+                errorMessage: errorMessage
+            })
+        ]
+    });
+};
+const InputContainer = styled(TimeField)(InputContainerStyles);
+const Input = styled(DateInput, preventProps)({
+    display: 'flex'
+}, InputStyles);
+const Inputs_TimeInput = TimeInput;
+export { Inputs_TimeInput as default };