@aivenio/aquarium 1.78.0 → 1.79.0

package/dist/src/molecules/Context/Context.js

@@ -1,20 +1,22 @@
 import React from 'react';
+import { I18nProvider } from '@react-aria/i18n';
 import { ModalProvider } from '@react-aria/overlays';
 import { getMatches } from '../../../src/utils/breakpoints';
 import { useWindowSize } from '../../../src/utils/useWindowSize';
 import { ToastProvider } from '../Toast/Toast';
-export const Context = ({ children }) => {
+export const Context = ({ children, locale = 'en-GB' }) => {
     const windowSize = useWindowSize();
     const [breakpointMatches, setBreakpointMatches] = React.useState(getMatches(windowSize));
     React.useEffect(() => {
         setBreakpointMatches(getMatches(windowSize));
     }, [windowSize]);
     return (React.createElement(DesignSystemContext.Provider, { value: { breakpointMatches } },
-        React.createElement(ModalProvider, null,
-            React.createElement(ToastProvider, null, children))));
+        React.createElement(I18nProvider, { locale: locale },
+            React.createElement(ModalProvider, null,
+                React.createElement(ToastProvider, null, children)))));
 };
 const context = {
     breakpointMatches: getMatches(undefined),
 };
 export const DesignSystemContext = React.createContext(context);
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ29udGV4dC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9tb2xlY3VsZXMvQ29udGV4dC9Db250ZXh0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFDMUIsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHNCQUFzQixDQUFDO0FBRXJELE9BQU8sRUFBMEIsVUFBVSxFQUFFLE1BQU0sdUJBQXVCLENBQUM7QUFDM0UsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHlCQUF5QixDQUFDO0FBRXhELE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQVUvQyxNQUFNLENBQUMsTUFBTSxPQUFPLEdBQUcsQ0FBQyxFQUFFLFFBQVEsRUFBZ0IsRUFBZSxFQUFFO0lBQ2pFLE1BQU0sVUFBVSxHQUFHLGFBQWEsRUFBRSxDQUFDO0lBQ25DLE1BQU0sQ0FBQyxpQkFBaUIsRUFBRSxvQkFBb0IsQ0FBQyxHQUFHLEtBQUssQ0FBQyxRQUFRLENBQW9CLFVBQVUsQ0FBQyxVQUFVLENBQUMsQ0FBQyxDQUFDO0lBRTVHLEtBQUssQ0FBQyxTQUFTLENBQUMsR0FBRyxFQUFFO1FBQ25CLG9CQUFvQixDQUFDLFVBQVUsQ0FBQyxVQUFVLENBQUMsQ0FBQyxDQUFDO0lBQy9DLENBQUMsRUFBRSxDQUFDLFVBQVUsQ0FBQyxDQUFDLENBQUM7SUFFakIsT0FBTyxDQUNMLG9CQUFDLG1CQUFtQixDQUFDLFFBQVEsSUFBQyxLQUFLLEVBQUUsRUFBRSxpQkFBaUIsRUFBRTtRQUN4RCxvQkFBQyxhQUFhO1lBQ1osb0JBQUMsYUFBYSxRQUFFLFFBQVEsQ0FBaUIsQ0FDM0IsQ0FDYSxDQUNoQyxDQUFDO0FBQ0osQ0FBQyxDQUFDO0FBRUYsTUFBTSxPQUFPLEdBQWtCO0lBQzdCLGlCQUFpQixFQUFFLFVBQVUsQ0FBQyxTQUFTLENBQUM7Q0FDekMsQ0FBQztBQUNGLE1BQU0sQ0FBQyxNQUFNLG1CQUFtQixHQUFHLEtBQUssQ0FBQyxhQUFhLENBQWdCLE9BQU8sQ0FBQyxDQUFDIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ29udGV4dC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9tb2xlY3VsZXMvQ29udGV4dC9Db250ZXh0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFDMUIsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGtCQUFrQixDQUFDO0FBQ2hELE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQUVyRCxPQUFPLEVBQTBCLFVBQVUsRUFBRSxNQUFNLHVCQUF1QixDQUFDO0FBQzNFLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQUV4RCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFXL0MsTUFBTSxDQUFDLE1BQU0sT0FBTyxHQUFHLENBQUMsRUFBRSxRQUFRLEVBQUUsTUFBTSxHQUFHLE9BQU8sRUFBZ0IsRUFBZSxFQUFFO0lBQ25GLE1BQU0sVUFBVSxHQUFHLGFBQWEsRUFBRSxDQUFDO0lBQ25DLE1BQU0sQ0FBQyxpQkFBaUIsRUFBRSxvQkFBb0IsQ0FBQyxHQUFHLEtBQUssQ0FBQyxRQUFRLENBQW9CLFVBQVUsQ0FBQyxVQUFVLENBQUMsQ0FBQyxDQUFDO0lBRTVHLEtBQUssQ0FBQyxTQUFTLENBQUMsR0FBRyxFQUFFO1FBQ25CLG9CQUFvQixDQUFDLFVBQVUsQ0FBQyxVQUFVLENBQUMsQ0FBQyxDQUFDO0lBQy9DLENBQUMsRUFBRSxDQUFDLFVBQVUsQ0FBQyxDQUFDLENBQUM7SUFFakIsT0FBTyxDQUNMLG9CQUFDLG1CQUFtQixDQUFDLFFBQVEsSUFBQyxLQUFLLEVBQUUsRUFBRSxpQkFBaUIsRUFBRTtRQUN4RCxvQkFBQyxZQUFZLElBQUMsTUFBTSxFQUFFLE1BQU07WUFDMUIsb0JBQUMsYUFBYTtnQkFDWixvQkFBQyxhQUFhLFFBQUUsUUFBUSxDQUFpQixDQUMzQixDQUNILENBQ2MsQ0FDaEMsQ0FBQztBQUNKLENBQUMsQ0FBQztBQUVGLE1BQU0sT0FBTyxHQUFrQjtJQUM3QixpQkFBaUIsRUFBRSxVQUFVLENBQUMsU0FBUyxDQUFDO0NBQ3pDLENBQUM7QUFDRixNQUFNLENBQUMsTUFBTSxtQkFBbUIsR0FBRyxLQUFLLENBQUMsYUFBYSxDQUFnQixPQUFPLENBQUMsQ0FBQyJ9

package/dist/src/molecules/DateField/DateField.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { type DateFieldProps as AriaDateFieldProps, type DateValue } from 'react-aria-components';
+import { type LabelControlProps } from '../../../src/utils/form/Label/Label';
+export declare type DateFieldBaseProps<T extends DateValue> = Omit<AriaDateFieldProps<T>, 'children' | 'className' | 'isDateUnavailable' | 'isDisabled' | 'isInvalid' | 'isOpen' | 'isReadOnly' | 'isRequired' | 'slot' | 'style' | 'validate'> & {
+    disabled?: boolean;
+    valid?: boolean;
+};
+export declare const DateFieldBase: <T extends DateValue>({ disabled, valid, ...props }: DateFieldBaseProps<T>) => React.JSX.Element;
+export declare type DateFieldProps<T extends DateValue> = DateFieldBaseProps<T> & Omit<LabelControlProps, 'length'>;
+export declare const DateField: <T extends DateValue>(props: DateFieldProps<T>) => React.JSX.Element;

package/dist/src/molecules/DateField/DateField.js

@@ -0,0 +1,33 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { DateField as AriaDateField, } from 'react-aria-components';
+import { useLabel } from '@react-aria/label';
+import { useId } from '@react-aria/utils';
+import omit from 'lodash/omit';
+import { getLabelControlProps, LabelControl } from '../../../src/utils/form/Label/Label';
+import { DateInput } from './DateInput';
+export const DateFieldBase = (_a) => {
+    var { disabled, valid } = _a, props = __rest(_a, ["disabled", "valid"]);
+    return (React.createElement(AriaDateField, Object.assign({}, props, { isInvalid: valid === false, isDisabled: disabled }),
+        React.createElement(DateInput, null)));
+};
+export const DateField = (props) => {
+    const { labelProps, fieldProps } = useLabel({ label: props.labelText });
+    const errorMessageId = useId();
+    const errorProps = props.valid === false ? { 'aria-invalid': true, 'aria-describedby': errorMessageId } : {};
+    const _a = getLabelControlProps(props), { 'data-testid': dataTestId } = _a, labelControlProps = __rest(_a, ['data-testid']);
+    const baseProps = omit(props, Object.keys(labelControlProps));
+    return (React.createElement(LabelControl, Object.assign({}, labelProps, labelControlProps, { messageId: errorMessageId, className: "Aquarium-DateField" }),
+        React.createElement(DateFieldBase, Object.assign({}, baseProps, fieldProps, errorProps, { disabled: props.disabled, valid: props.valid }))));
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRGF0ZUZpZWxkLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL21vbGVjdWxlcy9EYXRlRmllbGQvRGF0ZUZpZWxkLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7OztBQUFBLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQztBQUMxQixPQUFPLEVBQ0wsU0FBUyxJQUFJLGFBQWEsR0FHM0IsTUFBTSx1QkFBdUIsQ0FBQztBQUMvQixPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sbUJBQW1CLENBQUM7QUFDN0MsT0FBTyxFQUFFLEtBQUssRUFBRSxNQUFNLG1CQUFtQixDQUFDO0FBQzFDLE9BQU8sSUFBSSxNQUFNLGFBQWEsQ0FBQztBQUUvQixPQUFPLEVBQUUsb0JBQW9CLEVBQUUsWUFBWSxFQUEwQixNQUFNLDRCQUE0QixDQUFDO0FBRXhHLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxhQUFhLENBQUM7QUFvQnhDLE1BQU0sQ0FBQyxNQUFNLGFBQWEsR0FBRyxDQUFzQixFQUFvRCxFQUFFLEVBQUU7UUFBeEQsRUFBRSxRQUFRLEVBQUUsS0FBSyxPQUFtQyxFQUE5QixLQUFLLGNBQTNCLHFCQUE2QixDQUFGO0lBQzVFLE9BQU8sQ0FDTCxvQkFBQyxhQUFhLG9CQUFLLEtBQUssSUFBRSxTQUFTLEVBQUUsS0FBSyxLQUFLLEtBQUssRUFBRSxVQUFVLEVBQUUsUUFBUTtRQUN4RSxvQkFBQyxTQUFTLE9BQUcsQ0FDQyxDQUNqQixDQUFDO0FBQ0osQ0FBQyxDQUFDO0FBSUYsTUFBTSxDQUFDLE1BQU0sU0FBUyxHQUFHLENBQXNCLEtBQXdCLEVBQUUsRUFBRTtJQUN6RSxNQUFNLEVBQUUsVUFBVSxFQUFFLFVBQVUsRUFBRSxHQUFHLFFBQVEsQ0FBQyxFQUFFLEtBQUssRUFBRSxLQUFLLENBQUMsU0FBUyxFQUFFLENBQUMsQ0FBQztJQUN4RSxNQUFNLGNBQWMsR0FBRyxLQUFLLEVBQUUsQ0FBQztJQUMvQixNQUFNLFVBQVUsR0FBRyxLQUFLLENBQUMsS0FBSyxLQUFLLEtBQUssQ0FBQyxDQUFDLENBQUMsRUFBRSxjQUFjLEVBQUUsSUFBSSxFQUFFLGtCQUFrQixFQUFFLGNBQWMsRUFBRSxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUM7SUFDN0csTUFBTSxLQUFzRCxvQkFBb0IsQ0FBQyxLQUFLLENBQUMsRUFBakYsRUFBRSxhQUFhLEVBQUUsVUFBVSxPQUFzRCxFQUFqRCxpQkFBaUIsY0FBakQsZUFBbUQsQ0FBOEIsQ0FBQztJQUN4RixNQUFNLFNBQVMsR0FBRyxJQUFJLENBQUMsS0FBSyxFQUFFLE1BQU0sQ0FBQyxJQUFJLENBQUMsaUJBQWlCLENBQUMsQ0FBQyxDQUFDO0lBRTlELE9BQU8sQ0FDTCxvQkFBQyxZQUFZLG9CQUFLLFVBQVUsRUFBTSxpQkFBaUIsSUFBRSxTQUFTLEVBQUUsY0FBYyxFQUFFLFNBQVMsRUFBQyxvQkFBb0I7UUFDNUcsb0JBQUMsYUFBYSxvQkFBSyxTQUFTLEVBQU0sVUFBVSxFQUFNLFVBQVUsSUFBRSxRQUFRLEVBQUUsS0FBSyxDQUFDLFFBQVEsRUFBRSxLQUFLLEVBQUUsS0FBSyxDQUFDLEtBQUssSUFBSSxDQUNqRyxDQUNoQixDQUFDO0FBQ0osQ0FBQyxDQUFDIn0=

package/dist/src/molecules/DateField/DateInput.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { type DateInputProps } from 'react-aria-components';
+export declare function DateInput(props: Omit<DateInputProps, 'children'>): React.JSX.Element;

package/dist/src/molecules/DateField/DateInput.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { DateInput as AriaDateInput, DateSegment } from 'react-aria-components';
+import { tv } from 'tailwind-variants';
+import { fieldGroup } from '../../../src/atoms/utils';
+const segmentStyles = tv({
+    base: 'inline p-0.5 rounded outline outline-0 caret-transparent text-default',
+    variants: {
+        isPlaceholder: {
+            true: 'text-inactive',
+        },
+        isDisabled: {
+            true: 'text-inactive',
+        },
+        isFocused: {
+            true: 'bg-info-muted',
+        },
+    },
+});
+export function DateInput(props) {
+    return (React.createElement(AriaDateInput, Object.assign({ className: (renderProps) => fieldGroup(Object.assign(Object.assign({}, renderProps), { class: 'block min-w-[150px]' })) }, props), (segment) => React.createElement(DateSegment, { segment: segment, className: segmentStyles })));
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRGF0ZUlucHV0LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL21vbGVjdWxlcy9EYXRlRmllbGQvRGF0ZUlucHV0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFDMUIsT0FBTyxFQUFFLFNBQVMsSUFBSSxhQUFhLEVBQXVCLFdBQVcsRUFBRSxNQUFNLHVCQUF1QixDQUFDO0FBQ3JHLE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQztBQUV2QyxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFFN0MsTUFBTSxhQUFhLEdBQUcsRUFBRSxDQUFDO0lBQ3ZCLElBQUksRUFBRSx1RUFBdUU7SUFDN0UsUUFBUSxFQUFFO1FBQ1IsYUFBYSxFQUFFO1lBQ2IsSUFBSSxFQUFFLGVBQWU7U0FDdEI7UUFDRCxVQUFVLEVBQUU7WUFDVixJQUFJLEVBQUUsZUFBZTtTQUN0QjtRQUNELFNBQVMsRUFBRTtZQUNULElBQUksRUFBRSxlQUFlO1NBQ3RCO0tBQ0Y7Q0FDRixDQUFDLENBQUM7QUFFSCxNQUFNLFVBQVUsU0FBUyxDQUFDLEtBQXVDO0lBQy9ELE9BQU8sQ0FDTCxvQkFBQyxhQUFhLGtCQUFDLFNBQVMsRUFBRSxDQUFDLFdBQVcsRUFBRSxFQUFFLENBQUMsVUFBVSxpQ0FBTSxXQUFXLEtBQUUsS0FBSyxFQUFFLHFCQUFxQixJQUFHLElBQU0sS0FBSyxHQUMvRyxDQUFDLE9BQU8sRUFBRSxFQUFFLENBQUMsb0JBQUMsV0FBVyxJQUFDLE9BQU8sRUFBRSxPQUFPLEVBQUUsU0FBUyxFQUFFLGFBQWEsR0FBSSxDQUMzRCxDQUNqQixDQUFDO0FBQ0osQ0FBQyJ9

package/dist/src/molecules/DatePicker/Button.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { type ButtonProps as AriaButtonProps } from 'react-aria-components';
+export declare type ButtonProps = AriaButtonProps;
+export declare function Button(props: ButtonProps): React.JSX.Element;

package/dist/src/molecules/DatePicker/Button.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Button as AriaButton } from 'react-aria-components';
+import { composeRenderProps } from 'react-aria-components';
+import { tv } from 'tailwind-variants';
+import { focusRing } from '../../../src/atoms/utils';
+const button = tv({
+    extend: focusRing,
+});
+export function Button(props) {
+    return (React.createElement(AriaButton, Object.assign({}, props, { className: composeRenderProps(props.className, (className, renderProps) => button(Object.assign(Object.assign({}, renderProps), { className }))) })));
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQnV0dG9uLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL21vbGVjdWxlcy9EYXRlUGlja2VyL0J1dHRvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBQzFCLE9BQU8sRUFBRSxNQUFNLElBQUksVUFBVSxFQUF1QyxNQUFNLHVCQUF1QixDQUFDO0FBQ2xHLE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLHVCQUF1QixDQUFDO0FBQzNELE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQztBQUV2QyxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFFNUMsTUFBTSxNQUFNLEdBQUcsRUFBRSxDQUFDO0lBQ2hCLE1BQU0sRUFBRSxTQUFTO0NBQ2xCLENBQUMsQ0FBQztBQUlILE1BQU0sVUFBVSxNQUFNLENBQUMsS0FBa0I7SUFDdkMsT0FBTyxDQUNMLG9CQUFDLFVBQVUsb0JBQ0wsS0FBSyxJQUNULFNBQVMsRUFBRSxrQkFBa0IsQ0FBQyxLQUFLLENBQUMsU0FBUyxFQUFFLENBQUMsU0FBUyxFQUFFLFdBQVcsRUFBRSxFQUFFLENBQUMsTUFBTSxpQ0FBTSxXQUFXLEtBQUUsU0FBUyxJQUFHLENBQUMsSUFDakgsQ0FDSCxDQUFDO0FBQ0osQ0FBQyJ9

package/dist/src/molecules/DatePicker/Calendar.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { type CalendarProps as AriaCalendarProps, type DateValue } from 'react-aria-components';
+export declare type CalendarProps<T extends DateValue> = Omit<AriaCalendarProps<T>, 'visibleDuration'>;
+export declare const Calendar: <T extends DateValue>(props: CalendarProps<T>) => React.JSX.Element;
+export declare const CalendarHeader: () => React.JSX.Element;
+export declare const CalendarGridHeader: () => React.JSX.Element;

package/dist/src/molecules/DatePicker/Calendar.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Calendar as AriaCalendar, CalendarCell, CalendarGrid, CalendarGridBody, CalendarGridHeader as AriaCalendarGridHeader, CalendarHeaderCell, Heading, } from 'react-aria-components';
+import { tv } from 'tailwind-variants';
+import { Icon } from '../../../src/molecules/Icon/Icon';
+import { focusRing } from '../../../src/atoms/utils';
+import { tw } from '../../../src/utils/tailwind';
+import chevronLeft from '../../../src/icons/chevronLeft';
+import chevronRight from '../../../src/icons/chevronRight';
+import { Button } from './Button';
+const cellStyles = tv({
+    extend: focusRing,
+    base: 'w-8 h-8 typography-small cursor-default rounded flex items-center justify-center',
+    variants: {
+        isSelected: {
+            false: 'text-default hover:bg-default pressed:bg-intense',
+            true: 'bg-primary-default invalid:bg-danger-default text-white',
+        },
+        isUnavailable: {
+            true: 'text-inactive',
+        },
+        isDisabled: {
+            true: 'text-inactive',
+        },
+    },
+});
+export const Calendar = (props) => {
+    return (React.createElement(AriaCalendar, Object.assign({}, props),
+        React.createElement(CalendarHeader, null),
+        React.createElement(CalendarGrid, null,
+            React.createElement(CalendarGridHeader, null),
+            React.createElement(CalendarGridBody, null, (date) => React.createElement(CalendarCell, { date: date, className: cellStyles })))));
+};
+export const CalendarHeader = () => {
+    return (React.createElement("header", { className: "flex items-center gap-1 pb-5 w-full" },
+        React.createElement(Button, { slot: "previous", className: "p-3" },
+            React.createElement(Icon, { icon: chevronLeft })),
+        React.createElement(Heading, { className: tw('flex-1 typography-default-strong text-center') }),
+        React.createElement(Button, { slot: "next", className: "p-3" },
+            React.createElement(Icon, { icon: chevronRight }))));
+};
+export const CalendarGridHeader = () => {
+    return (React.createElement(AriaCalendarGridHeader, null, (day) => React.createElement(CalendarHeaderCell, { className: "text-xs text-inactive typography-caption" }, day)));
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2FsZW5kYXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvbW9sZWN1bGVzL0RhdGVQaWNrZXIvQ2FsZW5kYXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQztBQUMxQixPQUFPLEVBQ0wsUUFBUSxJQUFJLFlBQVksRUFDeEIsWUFBWSxFQUNaLFlBQVksRUFDWixnQkFBZ0IsRUFDaEIsa0JBQWtCLElBQUksc0JBQXNCLEVBQzVDLGtCQUFrQixFQUdsQixPQUFPLEdBQ1IsTUFBTSx1QkFBdUIsQ0FBQztBQUMvQixPQUFPLEVBQUUsRUFBRSxFQUFFLE1BQU0sbUJBQW1CLENBQUM7QUFFdkMsT0FBTyxFQUFFLElBQUksRUFBRSxNQUFNLHlCQUF5QixDQUFDO0FBRS9DLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUU1QyxPQUFPLEVBQUUsRUFBRSxFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFFeEMsT0FBTyxXQUFXLE1BQU0sdUJBQXVCLENBQUM7QUFDaEQsT0FBTyxZQUFZLE1BQU0sd0JBQXdCLENBQUM7QUFFbEQsT0FBTyxFQUFFLE1BQU0sRUFBRSxNQUFNLFVBQVUsQ0FBQztBQUVsQyxNQUFNLFVBQVUsR0FBRyxFQUFFLENBQUM7SUFDcEIsTUFBTSxFQUFFLFNBQVM7SUFDakIsSUFBSSxFQUFFLGtGQUFrRjtJQUN4RixRQUFRLEVBQUU7UUFDUixVQUFVLEVBQUU7WUFDVixLQUFLLEVBQUUsa0RBQWtEO1lBQ3pELElBQUksRUFBRSx5REFBeUQ7U0FDaEU7UUFDRCxhQUFhLEVBQUU7WUFDYixJQUFJLEVBQUUsZUFBZTtTQUN0QjtRQUNELFVBQVUsRUFBRTtZQUNWLElBQUksRUFBRSxlQUFlO1NBQ3RCO0tBQ0Y7Q0FDRixDQUFDLENBQUM7QUFJSCxNQUFNLENBQUMsTUFBTSxRQUFRLEdBQUcsQ0FBc0IsS0FBdUIsRUFBRSxFQUFFO0lBQ3ZFLE9BQU8sQ0FDTCxvQkFBQyxZQUFZLG9CQUFLLEtBQUs7UUFDckIsb0JBQUMsY0FBYyxPQUFHO1FBQ2xCLG9CQUFDLFlBQVk7WUFDWCxvQkFBQyxrQkFBa0IsT0FBRztZQUN0QixvQkFBQyxnQkFBZ0IsUUFBRSxDQUFDLElBQUksRUFBRSxFQUFFLENBQUMsb0JBQUMsWUFBWSxJQUFDLElBQUksRUFBRSxJQUFJLEVBQUUsU0FBUyxFQUFFLFVBQVUsR0FBSSxDQUFvQixDQUN2RixDQUNGLENBQ2hCLENBQUM7QUFDSixDQUFDLENBQUM7QUFFRixNQUFNLENBQUMsTUFBTSxjQUFjLEdBQUcsR0FBRyxFQUFFO0lBQ2pDLE9BQU8sQ0FDTCxnQ0FBUSxTQUFTLEVBQUMscUNBQXFDO1FBQ3JELG9CQUFDLE1BQU0sSUFBQyxJQUFJLEVBQUMsVUFBVSxFQUFDLFNBQVMsRUFBQyxLQUFLO1lBQ3JDLG9CQUFDLElBQUksSUFBQyxJQUFJLEVBQUUsV0FBVyxHQUFJLENBQ3BCO1FBQ1Qsb0JBQUMsT0FBTyxJQUFDLFNBQVMsRUFBRSxFQUFFLENBQUMsOENBQThDLENBQUMsR0FBSTtRQUMxRSxvQkFBQyxNQUFNLElBQUMsSUFBSSxFQUFDLE1BQU0sRUFBQyxTQUFTLEVBQUMsS0FBSztZQUNqQyxvQkFBQyxJQUFJLElBQUMsSUFBSSxFQUFFLFlBQVksR0FBSSxDQUNyQixDQUNGLENBQ1YsQ0FBQztBQUNKLENBQUMsQ0FBQztBQUVGLE1BQU0sQ0FBQyxNQUFNLGtCQUFrQixHQUFHLEdBQUcsRUFBRTtJQUNyQyxPQUFPLENBQ0wsb0JBQUMsc0JBQXNCLFFBQ3BCLENBQUMsR0FBRyxFQUFFLEVBQUUsQ0FBQyxvQkFBQyxrQkFBa0IsSUFBQyxTQUFTLEVBQUMsMENBQTBDLElBQUUsR0FBRyxDQUFzQixDQUN0RixDQUMxQixDQUFDO0FBQ0osQ0FBQyxDQUFDIn0=

package/dist/src/molecules/DatePicker/DatePicker.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { type DatePickerProps as AriaDatePickerProps, type DateValue } from 'react-aria-components';
+import { type LabelControlProps } from '../../../src/utils/form/Label/Label';
+export declare type DatePickerBaseProps<T extends DateValue> = Omit<AriaDatePickerProps<T>, 'children' | 'className' | 'isDisabled' | 'isInvalid' | 'isReadOnly' | 'isRequired' | 'pageBehavior' | 'slot' | 'style' | 'validate' | 'validationBehavior'> & {
+    disabled?: boolean;
+    valid?: boolean;
+};
+export declare const DatePickerBase: <T extends DateValue>({ disabled, valid, granularity, shouldCloseOnSelect, ...props }: DatePickerBaseProps<T>) => React.JSX.Element;
+export declare const DateTimePickerBase: <T extends DateValue>({ disabled, valid, granularity, shouldCloseOnSelect, ...props }: DatePickerBaseProps<T>) => React.JSX.Element;
+export declare type DatePickerProps<T extends DateValue> = DatePickerBaseProps<T> & Omit<LabelControlProps, 'length'>;
+export declare const DatePicker: <T extends DateValue>(props: DatePickerProps<T>) => React.JSX.Element;
+export declare const DateTimePicker: <T extends DateValue>(props: DatePickerProps<T>) => React.JSX.Element;

package/dist/src/molecules/DatePicker/DatePicker.js

@@ -0,0 +1,63 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { DatePicker as AriaDatePicker, DatePickerStateContext, } from 'react-aria-components';
+import { useLabel } from '@react-aria/label';
+import { useId } from '@react-aria/utils';
+import omit from 'lodash/omit';
+import { DateInput } from '../../../src/molecules/DateField/DateInput';
+import { FieldGroup } from '../../../src/molecules/Field/Field';
+import { Icon } from '../../../src/molecules/Icon/Icon';
+import { Spacing } from '../../../src/molecules/Spacing/Spacing';
+import { TimeField } from '../../../src/molecules/TimeField/TimeField';
+import { getLabelControlProps, LabelControl } from '../../../src/utils/form/Label/Label';
+import { tw } from '../../../src/utils/tailwind';
+import calendarIcon from '../../../src/icons/calendar';
+import { Button } from './Button';
+import { Calendar } from './Calendar';
+import { Dialog } from './Dialog';
+import { Popover } from './Popover';
+const createDatePickerBase = (variant) => (_a) => {
+    var { disabled, valid, granularity, shouldCloseOnSelect } = _a, props = __rest(_a, ["disabled", "valid", "granularity", "shouldCloseOnSelect"]);
+    const hasSomeValue = props.value || props.defaultValue || props.placeholderValue;
+    return (React.createElement(AriaDatePicker, Object.assign({}, props, { shouldCloseOnSelect: shouldCloseOnSelect !== null && shouldCloseOnSelect !== void 0 ? shouldCloseOnSelect : variant === 'date', isDisabled: disabled, isInvalid: valid === false, 
+        // Set the granularity to minute if the variant is 'datetime' and there is no any value provided.
+        // This will display the time component in the picker by default in <DateTimePicker>.
+        granularity: granularity !== null && granularity !== void 0 ? granularity : (variant === 'datetime' && !hasSomeValue ? 'minute' : undefined) }),
+        React.createElement(FieldGroup, { className: tw('min-w-[210px] w-auto') },
+            React.createElement(DateInput, { className: tw('flex-1') }),
+            React.createElement(Button, null,
+                React.createElement(Icon, { icon: calendarIcon }))),
+        React.createElement(Popover, { offset: 1 },
+            React.createElement(Dialog, null,
+                React.createElement(Spacing, { gap: "6" },
+                    React.createElement(Calendar, null),
+                    variant === 'datetime' && React.createElement(PickerTimeField, { granularity: granularity }))))));
+};
+export const DatePickerBase = createDatePickerBase('date');
+export const DateTimePickerBase = createDatePickerBase('datetime');
+const PickerTimeField = ({ granularity }) => {
+    const state = React.useContext(DatePickerStateContext);
+    return (React.createElement(TimeField, { labelText: "Time", granularity: granularity !== 'day' ? granularity : undefined, value: state.timeValue, onChange: state.setTimeValue, reserveSpaceForError: false }));
+};
+const createDatePicker = (variant) => (props) => {
+    const { labelProps, fieldProps } = useLabel({ label: props.labelText });
+    const errorMessageId = useId();
+    const errorProps = props.valid === false ? { 'aria-invalid': true, 'aria-describedby': errorMessageId } : {};
+    const _a = getLabelControlProps(props), { 'data-testid': dataTestId } = _a, labelControlProps = __rest(_a, ['data-testid']);
+    const baseProps = omit(props, Object.keys(labelControlProps));
+    const allProps = Object.assign(Object.assign(Object.assign(Object.assign({}, baseProps), fieldProps), errorProps), { disabled: props.disabled, valid: props.valid });
+    return (React.createElement(LabelControl, Object.assign({}, labelProps, labelControlProps, { messageId: errorMessageId, className: "Aquarium-DatePicker" }), variant === 'date' ? React.createElement(DatePickerBase, Object.assign({}, allProps)) : React.createElement(DateTimePickerBase, Object.assign({}, allProps))));
+};
+export const DatePicker = createDatePicker('date');
+export const DateTimePicker = createDatePicker('datetime');
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRGF0ZVBpY2tlci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9tb2xlY3VsZXMvRGF0ZVBpY2tlci9EYXRlUGlja2VyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7OztBQUFBLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQztBQUMxQixPQUFPLEVBQ0wsVUFBVSxJQUFJLGNBQWMsRUFFNUIsc0JBQXNCLEdBRXZCLE1BQU0sdUJBQXVCLENBQUM7QUFDL0IsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLG1CQUFtQixDQUFDO0FBQzdDLE9BQU8sRUFBRSxLQUFLLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQztBQUUxQyxPQUFPLElBQUksTUFBTSxhQUFhLENBQUM7QUFFL0IsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLG1DQUFtQyxDQUFDO0FBQzlELE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQUN2RCxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLCtCQUErQixDQUFDO0FBQ3hELE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxtQ0FBbUMsQ0FBQztBQUU5RCxPQUFPLEVBQUUsb0JBQW9CLEVBQUUsWUFBWSxFQUEwQixNQUFNLDRCQUE0QixDQUFDO0FBQ3hHLE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQztBQUV4QyxPQUFPLFlBQVksTUFBTSxvQkFBb0IsQ0FBQztBQUU5QyxPQUFPLEVBQUUsTUFBTSxFQUFFLE1BQU0sVUFBVSxDQUFDO0FBQ2xDLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxZQUFZLENBQUM7QUFDdEMsT0FBTyxFQUFFLE1BQU0sRUFBRSxNQUFNLFVBQVUsQ0FBQztBQUNsQyxPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0sV0FBVyxDQUFDO0FBb0JwQyxNQUFNLG9CQUFvQixHQUN4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

package/dist/src/molecules/DatePicker/DateRangePicker.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { type DateRangePickerProps as AriaDateRangePickerProps, type DateValue } from 'react-aria-components';
+import { type LabelControlProps } from '../../../src/utils/form/Label/Label';
+export declare type DateRangePickerBaseProps<T extends DateValue> = Omit<AriaDateRangePickerProps<T>, 'children' | 'className' | 'isDisabled' | 'isInvalid' | 'isReadOnly' | 'isRequired' | 'pageBehavior' | 'slot' | 'style' | 'validate' | 'validationBehavior'> & {
+    disabled?: boolean;
+    valid?: boolean;
+};
+export declare const DateRangePickerBase: <T extends DateValue>({ disabled, valid, granularity, shouldCloseOnSelect, ...props }: DateRangePickerBaseProps<T>) => React.JSX.Element;
+export declare const DateTimeRangePickerBase: <T extends DateValue>({ disabled, valid, granularity, shouldCloseOnSelect, ...props }: DateRangePickerBaseProps<T>) => React.JSX.Element;
+export declare type DateRangePickerProps<T extends DateValue> = DateRangePickerBaseProps<T> & Omit<LabelControlProps, 'length'>;
+export declare const DateRangePicker: <T extends DateValue>(props: DateRangePickerProps<T>) => React.JSX.Element;
+export declare const DateTimeRangePicker: <T extends DateValue>(props: DateRangePickerProps<T>) => React.JSX.Element;

package/dist/src/molecules/DatePicker/DateRangePicker.js

@@ -0,0 +1,68 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { DateRangePicker as AriaDateRangePicker, DateRangePickerStateContext, } from 'react-aria-components';
+import { useLabel } from '@react-aria/label';
+import { useId } from '@react-aria/utils';
+import omit from 'lodash/omit';
+import { DateInput } from '../../../src/molecules/DateField/DateInput';
+import { FieldGroup } from '../../../src/molecules/Field/Field';
+import { Icon } from '../../../src/molecules/Icon/Icon';
+import { Spacing } from '../../../src/molecules/Spacing/Spacing';
+import { TimeField } from '../../../src/molecules/TimeField/TimeField';
+import { getLabelControlProps, LabelControl } from '../../../src/utils/form/Label/Label';
+import { tw } from '../../../src/utils/tailwind';
+import calendarIcon from '../../../src/icons/calendar';
+import { Button } from './Button';
+import { Dialog } from './Dialog';
+import { Popover } from './Popover';
+import { RangeCalendar } from './RangeCalendar';
+const createDateRangePickerBase = (variant) => (_a) => {
+    var { disabled, valid, granularity, shouldCloseOnSelect } = _a, props = __rest(_a, ["disabled", "valid", "granularity", "shouldCloseOnSelect"]);
+    const hasSomeValue = props.value || props.defaultValue || props.placeholderValue;
+    return (React.createElement(AriaDateRangePicker, Object.assign({}, props, { shouldCloseOnSelect: shouldCloseOnSelect !== null && shouldCloseOnSelect !== void 0 ? shouldCloseOnSelect : variant === 'date', isDisabled: disabled, isInvalid: valid === false, 
+        // Set the granularity to minute if the variant is 'datetime' and there is no any value provided.
+        // This will display the time component in the picker by default in <DateTimeRangePicker>.
+        granularity: granularity !== null && granularity !== void 0 ? granularity : (variant === 'datetime' && !hasSomeValue ? 'minute' : undefined), className: tw('group flex flex-col gap-1') }),
+        React.createElement(FieldGroup, { className: tw('min-w-[200px] w-auto') },
+            React.createElement(DateInput, { slot: "start", className: tw('px-2 py-1') }),
+            React.createElement("span", { "aria-hidden": true, className: tw('text-muted') }, "-"),
+            React.createElement(DateInput, { slot: "end", className: tw('flex-1 px-2 py-1') }),
+            React.createElement(Button, null,
+                React.createElement(Icon, { icon: calendarIcon }))),
+        React.createElement(Popover, null,
+            React.createElement(Dialog, null,
+                React.createElement(Spacing, { gap: "6" },
+                    React.createElement(RangeCalendar, null),
+                    variant === 'datetime' && (React.createElement(Spacing, { gap: "6", row: true },
+                        React.createElement(PickerTimeField, { granularity: granularity, part: "start" }),
+                        React.createElement(PickerTimeField, { granularity: granularity, part: "end" }))))))));
+};
+const PickerTimeField = ({ granularity, part }) => {
+    var _a;
+    const { timeRange, setTime } = React.useContext(DateRangePickerStateContext);
+    return (React.createElement(TimeField, { labelText: part === 'start' ? 'Start time' : 'End time', granularity: granularity !== 'day' ? granularity : undefined, value: (_a = timeRange === null || timeRange === void 0 ? void 0 : timeRange[part]) !== null && _a !== void 0 ? _a : null, onChange: (value) => setTime(part, value), reserveSpaceForError: false }));
+};
+export const DateRangePickerBase = createDateRangePickerBase('date');
+export const DateTimeRangePickerBase = createDateRangePickerBase('datetime');
+const createDateRangePicker = (variant) => (props) => {
+    const { labelProps, fieldProps } = useLabel({ label: props.labelText });
+    const errorMessageId = useId();
+    const errorProps = props.valid === false ? { 'aria-invalid': true, 'aria-describedby': errorMessageId } : {};
+    const _a = getLabelControlProps(props), { 'data-testid': dataTestId } = _a, labelControlProps = __rest(_a, ['data-testid']);
+    const baseProps = omit(props, Object.keys(labelControlProps));
+    const allProps = Object.assign(Object.assign(Object.assign(Object.assign({}, baseProps), fieldProps), errorProps), { disabled: props.disabled, valid: props.valid });
+    return (React.createElement(LabelControl, Object.assign({}, labelProps, labelControlProps, { messageId: errorMessageId, className: "Aquarium-DatePicker" }), variant === 'date' ? React.createElement(DateRangePickerBase, Object.assign({}, allProps)) : React.createElement(DateTimeRangePickerBase, Object.assign({}, allProps))));
+};
+export const DateRangePicker = createDateRangePicker('date');
+export const DateTimeRangePicker = createDateRangePicker('datetime');
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRGF0ZVJhbmdlUGlja2VyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL21vbGVjdWxlcy9EYXRlUGlja2VyL0RhdGVSYW5nZVBpY2tlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFDMUIsT0FBTyxFQUNMLGVBQWUsSUFBSSxtQkFBbUIsRUFFdEMsMkJBQTJCLEdBRTVCLE1BQU0sdUJBQXVCLENBQUM7QUFDL0IsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLG1CQUFtQixDQUFDO0FBQzdDLE9BQU8sRUFBRSxLQUFLLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQztBQUUxQyxPQUFPLElBQUksTUFBTSxhQUFhLENBQUM7QUFFL0IsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLG1DQUFtQyxDQUFDO0FBQzlELE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQUN2RCxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLCtCQUErQixDQUFDO0FBQ3hELE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxtQ0FBbUMsQ0FBQztBQUU5RCxPQUFPLEVBQUUsb0JBQW9CLEVBQUUsWUFBWSxFQUEwQixNQUFNLDRCQUE0QixDQUFDO0FBQ3hHLE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQztBQUV4QyxPQUFPLFlBQVksTUFBTSxvQkFBb0IsQ0FBQztBQUU5QyxPQUFPLEVBQUUsTUFBTSxFQUFFLE1BQU0sVUFBVSxDQUFDO0FBQ2xDLE9BQU8sRUFBRSxNQUFNLEVBQUUsTUFBTSxVQUFVLENBQUM7QUFDbEMsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLFdBQVcsQ0FBQztBQUNwQyxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFvQmhELE1B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

package/dist/src/molecules/DatePicker/Dialog.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { type DialogProps } from 'react-aria-components';
+export declare function Dialog(props: DialogProps): React.JSX.Element;

package/dist/src/molecules/DatePicker/Dialog.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import { Dialog as AriaDialog } from 'react-aria-components';
+import { classNames, tw } from '../../../src/utils/tailwind';
+export function Dialog(props) {
+    return (React.createElement(AriaDialog, Object.assign({}, props, { className: classNames(props.className, tw('outline outline-0 p-5 [[data-placement]>&]:px-5 [[data-placement]>&]:py-6 max-h-[inherit] overflow-auto relative')) })));
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRGlhbG9nLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL21vbGVjdWxlcy9EYXRlUGlja2VyL0RpYWxvZy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBQzFCLE9BQU8sRUFBRSxNQUFNLElBQUksVUFBVSxFQUFvQixNQUFNLHVCQUF1QixDQUFDO0FBRS9FLE9BQU8sRUFBRSxVQUFVLEVBQUUsRUFBRSxFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFFcEQsTUFBTSxVQUFVLE1BQU0sQ0FBQyxLQUFrQjtJQUN2QyxPQUFPLENBQ0wsb0JBQUMsVUFBVSxvQkFDTCxLQUFLLElBQ1QsU0FBUyxFQUFFLFVBQVUsQ0FDbkIsS0FBSyxDQUFDLFNBQVMsRUFDZixFQUFFLENBQ0Esa0hBQWtILENBQ25ILENBQ0YsSUFDRCxDQUNILENBQUM7QUFDSixDQUFDIn0=

package/dist/src/molecules/DatePicker/Popover.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { type PopoverProps as AriaPopoverProps } from 'react-aria-components';
+export declare type PopoverProps = Omit<AriaPopoverProps, 'children'> & {
+    showArrow?: boolean;
+    children: React.ReactNode;
+};
+export declare const Popover: React.FC<PopoverProps>;

package/dist/src/molecules/DatePicker/Popover.js

@@ -0,0 +1,27 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { OverlayArrow, Popover as AriaPopover, PopoverContext, useSlottedContext, } from 'react-aria-components';
+import { tw } from '../../../src/utils/tailwind';
+export const Popover = (_a) => {
+    var { children, showArrow, className } = _a, props = __rest(_a, ["children", "showArrow", "className"]);
+    const popoverContext = useSlottedContext(PopoverContext);
+    const isSubmenu = (popoverContext === null || popoverContext === void 0 ? void 0 : popoverContext.trigger) === 'SubmenuTrigger';
+    let offset = showArrow ? 12 : 8;
+    offset = isSubmenu ? offset - 6 : offset;
+    return (React.createElement(AriaPopover, Object.assign({ offset: offset }, props, { className: tw('rounded-sm shadow-16dp bg-popover-content mt-1 overflow-y-auto flex flex-col border border-default outline-none') }),
+        showArrow && (React.createElement(OverlayArrow, { className: "group" },
+            React.createElement("svg", { width: 12, height: 12, viewBox: "0 0 12 12", className: "block fill-white stroke-1 stroke-black group-placement-bottom:rotate-180 group-placement-left:-rotate-90 group-placement-right:rotate-90" },
+                React.createElement("path", { d: "M0 0 L6 6 L12 0" })))),
+        children));
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUG9wb3Zlci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9tb2xlY3VsZXMvRGF0ZVBpY2tlci9Qb3BvdmVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7OztBQUFBLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQztBQUMxQixPQUFPLEVBQ0wsWUFBWSxFQUNaLE9BQU8sSUFBSSxXQUFXLEVBQ3RCLGNBQWMsRUFFZCxpQkFBaUIsR0FDbEIsTUFBTSx1QkFBdUIsQ0FBQztBQUUvQixPQUFPLEVBQUUsRUFBRSxFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFPeEMsTUFBTSxDQUFDLE1BQU0sT0FBTyxHQUEyQixDQUFDLEVBQTRDLEVBQUUsRUFBRTtRQUFoRCxFQUFFLFFBQVEsRUFBRSxTQUFTLEVBQUUsU0FBUyxPQUFZLEVBQVAsS0FBSyxjQUExQyxzQ0FBNEMsQ0FBRjtJQUN4RixNQUFNLGNBQWMsR0FBRyxpQkFBaUIsQ0FBQyxjQUFjLENBQUMsQ0FBQztJQUN6RCxNQUFNLFNBQVMsR0FBRyxDQUFBLGNBQWMsYUFBZCxjQUFjLHVCQUFkLGNBQWMsQ0FBRSxPQUFPLE1BQUssZ0JBQWdCLENBQUM7SUFDL0QsSUFBSSxNQUFNLEdBQUcsU0FBUyxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztJQUNoQyxNQUFNLEdBQUcsU0FBUyxDQUFDLENBQUMsQ0FBQyxNQUFNLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUM7SUFFekMsT0FBTyxDQUNMLG9CQUFDLFdBQVcsa0JBQ1YsTUFBTSxFQUFFLE1BQU0sSUFDVixLQUFLLElBQ1QsU0FBUyxFQUFFLEVBQUUsQ0FDWCxpSEFBaUgsQ0FDbEg7UUFFQSxTQUFTLElBQUksQ0FDWixvQkFBQyxZQUFZLElBQUMsU0FBUyxFQUFDLE9BQU87WUFDN0IsNkJBQ0UsS0FBSyxFQUFFLEVBQUUsRUFDVCxNQUFNLEVBQUUsRUFBRSxFQUNWLE9BQU8sRUFBQyxXQUFXLEVBQ25CLFNBQVMsRUFBQywwSUFBMEk7Z0JBRXBKLDhCQUFNLENBQUMsRUFBQyxpQkFBaUIsR0FBRyxDQUN4QixDQUNPLENBQ2hCO1FBQ0EsUUFBUSxDQUNHLENBQ2YsQ0FBQztBQUNKLENBQUMsQ0FBQyJ9

package/dist/src/molecules/DatePicker/RangeCalendar.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { type DateValue, type RangeCalendarProps as AriaRangeCalendarProps } from 'react-aria-components';
+export declare type RangeCalendarProps<T extends DateValue> = Omit<AriaRangeCalendarProps<T>, 'visibleDuration'>;
+export declare function RangeCalendar<T extends DateValue>(props: RangeCalendarProps<T>): React.JSX.Element;

package/dist/src/molecules/DatePicker/RangeCalendar.js

@@ -0,0 +1,51 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { CalendarCell, CalendarGrid, CalendarGridBody, RangeCalendar as AriaRangeCalendar, } from 'react-aria-components';
+import { tv } from 'tailwind-variants';
+import { focusRing } from '../../../src/atoms/utils';
+import { tw } from '../../../src/utils/tailwind';
+import { CalendarGridHeader, CalendarHeader } from './Calendar';
+const cell = tv({
+    extend: focusRing,
+    base: 'w-full h-full flex items-center justify-center rounded text-default',
+    variants: {
+        selectionState: {
+            none: 'group-hover:bg-default group-pressed:bg-intense',
+            middle: [
+                'text-white',
+                'group-hover:bg-primary-default',
+                'group-invalid:group-hover:bg-danger-default',
+                'group-pressed:bg-primary-intense',
+                'group-invalid:group-pressed:bg-danger-intense',
+            ],
+            cap: 'text-white bg-primary-default group-invalid:bg-danger-default',
+        },
+        isUnavailable: {
+            true: 'text-inactive',
+        },
+        isDisabled: {
+            true: 'text-inactive',
+        },
+    },
+});
+export function RangeCalendar(props) {
+    return (React.createElement(AriaRangeCalendar, Object.assign({}, props),
+        React.createElement(CalendarHeader, null),
+        React.createElement(CalendarGrid, { className: "[&_td]:px-0" },
+            React.createElement(CalendarGridHeader, null),
+            React.createElement(CalendarGridBody, null, (date) => (React.createElement(CalendarCell, { date: date, className: tw('group w-8 h-8 typography-small outline outline-0 cursor-default', 'outside-month:text-inactive selected:bg-primary-default', 'invalid:selected:bg-danger-default', 'selection-start:rounded-s selection-end:rounded-e') }, (_a) => {
+                var { formattedDate, isSelected, isSelectionStart, isSelectionEnd } = _a, rest = __rest(_a, ["formattedDate", "isSelected", "isSelectionStart", "isSelectionEnd"]);
+                return (React.createElement("span", { className: cell(Object.assign({ selectionState: isSelected && (isSelectionStart || isSelectionEnd) ? 'cap' : isSelected ? 'middle' : 'none' }, rest)) }, formattedDate));
+            }))))));
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUmFuZ2VDYWxlbmRhci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9tb2xlY3VsZXMvRGF0ZVBpY2tlci9SYW5nZUNhbGVuZGFyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7OztBQUFBLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQztBQUMxQixPQUFPLEVBQ0wsWUFBWSxFQUNaLFlBQVksRUFDWixnQkFBZ0IsRUFFaEIsYUFBYSxJQUFJLGlCQUFpQixHQUVuQyxNQUFNLHVCQUF1QixDQUFDO0FBQy9CLE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQztBQUV2QyxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFFNUMsT0FBTyxFQUFFLEVBQUUsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBRXhDLE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxjQUFjLEVBQUUsTUFBTSxZQUFZLENBQUM7QUFJaEUsTUFBTSxJQUFJLEdBQUcsRUFBRSxDQUFDO0lBQ2QsTUFBTSxFQUFFLFNBQVM7SUFDakIsSUFBSSxFQUFFLHFFQUFxRTtJQUMzRSxRQUFRLEVBQUU7UUFDUixjQUFjLEVBQUU7WUFDZCxJQUFJLEVBQUUsaURBQWlEO1lBQ3ZELE1BQU0sRUFBRTtnQkFDTixZQUFZO2dCQUNaLGdDQUFnQztnQkFDaEMsNkNBQTZDO2dCQUM3QyxrQ0FBa0M7Z0JBQ2xDLCtDQUErQzthQUNoRDtZQUNELEdBQUcsRUFBRSwrREFBK0Q7U0FDckU7UUFDRCxhQUFhLEVBQUU7WUFDYixJQUFJLEVBQUUsZUFBZTtTQUN0QjtRQUNELFVBQVUsRUFBRTtZQUNWLElBQUksRUFBRSxlQUFlO1NBQ3RCO0tBQ0Y7Q0FDRixDQUFDLENBQUM7QUFFSCxNQUFNLFVBQVUsYUFBYSxDQUFzQixLQUE0QjtJQUM3RSxPQUFPLENBQ0wsb0JBQUMsaUJBQWlCLG9CQUFLLEtBQUs7UUFDMUIsb0JBQUMsY0FBYyxPQUFHO1FBQ2xCLG9CQUFDLFlBQVksSUFBQyxTQUFTLEVBQUMsYUFBYTtZQUNuQyxvQkFBQyxrQkFBa0IsT0FBRztZQUN0QixvQkFBQyxnQkFBZ0IsUUFDZCxDQUFDLElBQUksRUFBRSxFQUFFLENBQUMsQ0FDVCxvQkFBQyxZQUFZLElBQ1gsSUFBSSxFQUFFLElBQUksRUFDVixTQUFTLEVBQUUsRUFBRSxDQUNYLGlFQUFpRSxFQUNqRSx5REFBeUQsRUFDekQsb0NBQW9DLEVBQ3BDLG1EQUFtRCxDQUNwRCxJQUVBLENBQUMsRUFBd0UsRUFBRSxFQUFFO29CQUE1RSxFQUFFLGFBQWEsRUFBRSxVQUFVLEVBQUUsZ0JBQWdCLEVBQUUsY0FBYyxPQUFXLEVBQU4sSUFBSSxjQUF0RSxxRUFBd0UsQ0FBRjtnQkFBTyxPQUFBLENBQzdFLDhCQUNFLFNBQVMsRUFBRSxJQUFJLGlCQUNiLGNBQWMsRUFDWixVQUFVLElBQUksQ0FBQyxnQkFBZ0IsSUFBSSxjQUFjLENBQUMsQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxVQUFVLENBQUMsQ0FBQyxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsTUFBTSxJQUMxRixJQUFJLEVBQ1AsSUFFRCxhQUFhLENBQ1QsQ0FDUixDQUFBO2FBQUEsQ0FDWSxDQUNoQixDQUNnQixDQUNOLENBQ0csQ0FDckIsQ0FBQztBQUNKLENBQUMifQ==

package/dist/src/molecules/Field/Field.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { type GroupProps as AriaGroupProps } from 'react-aria-components';
+export declare const FieldGroup: (props: AriaGroupProps) => React.JSX.Element;

package/dist/src/molecules/Field/Field.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import { Group } from 'react-aria-components';
+import { fieldGroup } from '../../../src/atoms/utils';
+export const FieldGroup = (props) => {
+    return React.createElement(Group, Object.assign({}, props, { className: (renderProps) => fieldGroup(renderProps) }));
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRmllbGQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvbW9sZWN1bGVzL0ZpZWxkL0ZpZWxkLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFDMUIsT0FBTyxFQUFFLEtBQUssRUFBcUMsTUFBTSx1QkFBdUIsQ0FBQztBQUVqRixPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFFN0MsTUFBTSxDQUFDLE1BQU0sVUFBVSxHQUFHLENBQUMsS0FBcUIsRUFBRSxFQUFFO0lBQ2xELE9BQU8sb0JBQUMsS0FBSyxvQkFBSyxLQUFLLElBQUUsU0FBUyxFQUFFLENBQUMsV0FBVyxFQUFFLEVBQUUsQ0FBQyxVQUFVLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQztBQUNuRixDQUFDLENBQUMifQ==

package/dist/src/molecules/Popover/PopoverOverlay.d.ts

@@ -3,7 +3,7 @@ import { type AriaOverlayProps } from '@react-aria/overlays';
 import { type OverlayTriggerState } from '@react-stately/overlays';
 import { type PositionProps } from '@react-types/overlays';
 import { type PopoverPlacement } from './Popover';
-export declare const PopoverOverlay: React.ForwardRefExoticComponent<AriaOverlayProps & Pick<PositionProps, "offset" | "crossOffset" | "shouldFlip"> & {
+export declare const PopoverOverlay: React.ForwardRefExoticComponent<AriaOverlayProps & Pick<PositionProps, "offset" | "shouldFlip" | "crossOffset"> & {
     id?: string | undefined;
     role?: React.AriaRole | undefined;
     triggerRef: React.RefObject<Element>;

package/dist/src/molecules/TimeField/TimeField.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { type TimeFieldProps as AriaTimeFieldProps, type TimeValue } from 'react-aria-components';
+import { type LabelControlProps } from '../../../src/utils/form/Label/Label';
+export declare type TimeFieldBaseProps<T extends TimeValue> = Omit<AriaTimeFieldProps<T>, 'children' | 'className' | 'isDisabled' | 'isInvalid' | 'isReadOnly' | 'isRequired' | 'isValid' | 'slot' | 'style' | 'validate' | 'validationBehavior'> & {
+    disabled?: boolean;
+    valid?: boolean;
+};
+export declare function TimeFieldBase<T extends TimeValue>({ disabled, valid, ...props }: TimeFieldBaseProps<T>): React.JSX.Element;
+export declare type TimeFieldProps<T extends TimeValue> = Omit<LabelControlProps, 'length'> & TimeFieldBaseProps<T>;
+export declare function TimeField<T extends TimeValue>(props: TimeFieldProps<T>): React.JSX.Element;

package/dist/src/molecules/TimeField/TimeField.js

@@ -0,0 +1,33 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { TimeField as AriaTimeField, } from 'react-aria-components';
+import { useLabel } from '@react-aria/label';
+import { useId } from '@react-aria/utils';
+import omit from 'lodash/omit';
+import { DateInput } from '../../../src/molecules/DateField/DateInput';
+import { getLabelControlProps, LabelControl } from '../../../src/utils/form/Label/Label';
+export function TimeFieldBase(_a) {
+    var { disabled, valid } = _a, props = __rest(_a, ["disabled", "valid"]);
+    return (React.createElement(AriaTimeField, Object.assign({}, props, { isInvalid: valid === false, isDisabled: disabled }),
+        React.createElement(DateInput, null)));
+}
+export function TimeField(props) {
+    const { labelProps, fieldProps } = useLabel({ label: props.labelText });
+    const errorMessageId = useId();
+    const errorProps = props.valid === false ? { 'aria-invalid': true, 'aria-describedby': errorMessageId } : {};
+    const _a = getLabelControlProps(props), { 'data-testid': dataTestId } = _a, labelControlProps = __rest(_a, ['data-testid']);
+    const baseProps = omit(props, Object.keys(labelControlProps));
+    return (React.createElement(LabelControl, Object.assign({}, labelProps, labelControlProps, { messageId: errorMessageId, className: "Aquarium-DateField" }),
+        React.createElement(TimeFieldBase, Object.assign({}, baseProps, fieldProps, errorProps, { disabled: props.disabled, valid: props.valid }))));
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGltZUZpZWxkLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL21vbGVjdWxlcy9UaW1lRmllbGQvVGltZUZpZWxkLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7OztBQUFBLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQztBQUMxQixPQUFPLEVBQ0wsU0FBUyxJQUFJLGFBQWEsR0FHM0IsTUFBTSx1QkFBdUIsQ0FBQztBQUMvQixPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sbUJBQW1CLENBQUM7QUFDN0MsT0FBTyxFQUFFLEtBQUssRUFBRSxNQUFNLG1CQUFtQixDQUFDO0FBQzFDLE9BQU8sSUFBSSxNQUFNLGFBQWEsQ0FBQztBQUUvQixPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sbUNBQW1DLENBQUM7QUFFOUQsT0FBTyxFQUFFLG9CQUFvQixFQUFFLFlBQVksRUFBMEIsTUFBTSw0QkFBNEIsQ0FBQztBQW9CeEcsTUFBTSxVQUFVLGFBQWEsQ0FBc0IsRUFBb0Q7UUFBcEQsRUFBRSxRQUFRLEVBQUUsS0FBSyxPQUFtQyxFQUE5QixLQUFLLGNBQTNCLHFCQUE2QixDQUFGO0lBQzVFLE9BQU8sQ0FDTCxvQkFBQyxhQUFhLG9CQUFLLEtBQUssSUFBRSxTQUFTLEVBQUUsS0FBSyxLQUFLLEtBQUssRUFBRSxVQUFVLEVBQUUsUUFBUTtRQUN4RSxvQkFBQyxTQUFTLE9BQUcsQ0FDQyxDQUNqQixDQUFDO0FBQ0osQ0FBQztBQUlELE1BQU0sVUFBVSxTQUFTLENBQXNCLEtBQXdCO0lBQ3JFLE1BQU0sRUFBRSxVQUFVLEVBQUUsVUFBVSxFQUFFLEdBQUcsUUFBUSxDQUFDLEVBQUUsS0FBSyxFQUFFLEtBQUssQ0FBQyxTQUFTLEVBQUUsQ0FBQyxDQUFDO0lBQ3hFLE1BQU0sY0FBYyxHQUFHLEtBQUssRUFBRSxDQUFDO0lBQy9CLE1BQU0sVUFBVSxHQUFHLEtBQUssQ0FBQyxLQUFLLEtBQUssS0FBSyxDQUFDLENBQUMsQ0FBQyxFQUFFLGNBQWMsRUFBRSxJQUFJLEVBQUUsa0JBQWtCLEVBQUUsY0FBYyxFQUFFLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQztJQUM3RyxNQUFNLEtBQXNELG9CQUFvQixDQUFDLEtBQUssQ0FBQyxFQUFqRixFQUFFLGFBQWEsRUFBRSxVQUFVLE9BQXNELEVBQWpELGlCQUFpQixjQUFqRCxlQUFtRCxDQUE4QixDQUFDO0lBQ3hGLE1BQU0sU0FBUyxHQUFHLElBQUksQ0FBQyxLQUFLLEVBQUUsTUFBTSxDQUFDLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxDQUFDLENBQUM7SUFFOUQsT0FBTyxDQUNMLG9CQUFDLFlBQVksb0JBQUssVUFBVSxFQUFNLGlCQUFpQixJQUFFLFNBQVMsRUFBRSxjQUFjLEVBQUUsU0FBUyxFQUFDLG9CQUFvQjtRQUM1RyxvQkFBQyxhQUFhLG9CQUFLLFNBQVMsRUFBTSxVQUFVLEVBQU0sVUFBVSxJQUFFLFFBQVEsRUFBRSxLQUFLLENBQUMsUUFBUSxFQUFFLEtBQUssRUFBRSxLQUFLLENBQUMsS0FBSyxJQUFJLENBQ2pHLENBQ2hCLENBQUM7QUFDSixDQUFDIn0=

package/dist/src/molecules/TimePicker/TimePicker.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { type TimeValue } from 'react-aria-components';
+import { type TimeFieldProps } from '../../../src/molecules/TimeField/TimeField';
+declare type TimePickerProps<T extends TimeValue> = TimeFieldProps<T>;
+export declare const TimePicker: <T extends TimeValue>(props: TimePickerProps<T>) => React.JSX.Element;
+export {};

package/dist/src/molecules/TimePicker/TimePicker.js

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TimeField } from '../../../src/molecules/TimeField/TimeField';
+export const TimePicker = (props) => React.createElement(TimeField, Object.assign({}, props));
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGltZVBpY2tlci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9tb2xlY3VsZXMvVGltZVBpY2tlci9UaW1lUGlja2VyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFHMUIsT0FBTyxFQUFFLFNBQVMsRUFBdUIsTUFBTSxtQ0FBbUMsQ0FBQztBQUluRixNQUFNLENBQUMsTUFBTSxVQUFVLEdBQUcsQ0FBc0IsS0FBeUIsRUFBRSxFQUFFLENBQUMsb0JBQUMsU0FBUyxvQkFBSyxLQUFLLEVBQUksQ0FBQyJ9

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

@@ -19,6 +19,8 @@ export * from './Context/Context';
 export * from './ControlLabel/ControlLabel';
 export * from './DataList/DataList';
 export * from './DataTable/DataTable';
+export * from './DatePicker/DatePicker';
+export * from './DatePicker/DateRangePicker';
 export * from './Dialog/Dialog';
 export * from './Divider/Divider';
 export * from './Drawer/Drawer';
@@ -66,6 +68,7 @@ export * from './Tailwindify/Tailwindify';
 export * from './Template/Template';
 export * from './Textarea/Textarea';
 export * from './Timeline/Timeline';
+export * from './TimePicker/TimePicker';
 export * from './Toast/Toast';
 export * from './Tooltip/Tooltip';
 export * from './Typography/Typography';