onekijs-ui 1.0.4 → 1.0.6

package/dist/index.module.js

@@ -1,6 +1,6 @@
 import styled, { css, keyframes, ThemeContext, ThemeProvider } from 'styled-components';
 import React, { useContext, useId, useEffect, useRef, useCallback, useMemo, useState, createElement, Children, useReducer } from 'react';
-import { reducer, DefaultService, service, lcfirst, toKebabCase, useService, get, useTryRouter, ucfirst, toArray, useThrottle, useIsomorphicLayoutEffect as useIsomorphicLayoutEffect$1, useLazyRef, useSubmit, ValidationCode, FORM_GLOBAL_VALIDATION_KEY, DefaultDisplayer, useFormDecorator, useForm, useFormMetadata, useFieldContainer, FormContext, useTrySetting, extractValidators, useField, useValidation, saga, SagaEffect, useEventListener, isTrue, DefaultBasicError, set, isFalse, isMobile, isNull, useCollectionInitialState, useCollectionProxy, CollectionService, LoadingStatus, isItemFetching, last, isCollectionInitializing, isCollection, eventLocks, useNotificationService, NotificationLevel, useNotifications, isSameFilter, shallowEqual, clone, ensureFieldValue, defaultComparator, isItemLoading, ValidationStatus, isCollectionLoading, isCollectionFetching, first, DefaultCollectionBroker, formatFilter, applyFilter, applySearch, applySortBy, formatSortBy, applySort, generateUniqueId, asyncHttp, HttpMethod, applyMixins, useLogger, ContainerValidation, isQueryFilterCriteria, useValue, Link, simpleMergeDeep } from 'onekijs-framework';
+import { reducer, DefaultService, service, lcfirst, toKebabCase, useService, get, useTryRouter, ucfirst, toArray, useThrottle, useIsomorphicLayoutEffect as useIsomorphicLayoutEffect$1, useLazyRef, useSubmit, ValidationCode, FORM_GLOBAL_VALIDATION_KEY, DefaultDisplayer, useFormDecorator, useFormMetadata, useFieldContainer, FormContext, useForm, useTrySetting, extractValidators, useField, useValidation, saga, SagaEffect, useEventListener, isTrue, DefaultBasicError, set, isFalse, isMobile, isNull, useCollectionInitialState, useCollectionProxy, CollectionService, LoadingStatus, isItemFetching, last, isCollectionInitializing, isCollection, eventLocks, useNotificationService, NotificationLevel, useNotifications, isSameFilter, shallowEqual, clone, ensureFieldValue, defaultComparator, isItemLoading, ValidationStatus, isCollectionLoading, isCollectionFetching, first, formatFilter, applyFilter, applySearch, applySortBy, formatSortBy, applySort, generateUniqueId, asyncHttp, HttpMethod, applyMixins, useLogger, DefaultCollectionBroker, ContainerValidation, isQueryFilterCriteria, Link, useValue, simpleMergeDeep } from 'onekijs-framework';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
 import { useFloating, autoUpdate, offset, autoPlacement, flip, size, shift, arrow, useInteractions, useHover, useFocus, useDismiss, useRole } from '@floating-ui/react';
 import ReactDOM from 'react-dom';
@@ -1690,8 +1690,9 @@ const DropdownButtonComponent = ({ animationTimeout = 100, attachDropdownToBody
     const classNames = addClassname('o-button-dropdown', className);
     const ref = useRef(null);
     const [Dropdown, triggerRef] = useDropdown();
-    useClickOutside(ref, () => onCollapse && onCollapse());
-    return (jsxRuntimeExports.jsxs("span", { ref: ref, children: [jsxRuntimeExports.jsxs(Button, { ...buttonProps, className: classNames, onClick: onClick ? undefined : open ? onCollapse : onDrop, ref: triggerRef, children: [jsxRuntimeExports.jsx("span", { className: "o-button-dropdown-content", onClick: onClick, children: children }), jsxRuntimeExports.jsx("span", { className: "o-button-dropdown-icon", children: jsxRuntimeExports.jsx(TogglerIcon, { width: "16px", height: "16px", open: open, closeArrowPosition: "s", openArrowPosition: "n", onClick: onClick ? (open ? onCollapse : onDrop) : undefined }) })] }), jsxRuntimeExports.jsx(Dropdown, { attachToBody: attachDropdownToBody, skidding: skidding, distance: distance, onUpdate: onUpdate, onDropStart: onDropStart, onDropping: onDropping, onDropDone: onDropDone, onCollapseStart: onCollapseStart, onCollapseDone: onCollapseDone, onCollapsing: onCollapsing, widthModifier: widthModifier, zIndex: zIndex, open: open, placement: placement, animationTimeout: animationTimeout, children: listElement })] }));
+    const dropdownRef = useRef(null);
+    useClickOutside([ref, dropdownRef], () => onCollapse && onCollapse());
+    return (jsxRuntimeExports.jsxs("span", { ref: ref, children: [jsxRuntimeExports.jsxs(Button, { ...buttonProps, className: classNames, onClick: onClick ? undefined : open ? onCollapse : onDrop, ref: triggerRef, children: [jsxRuntimeExports.jsx("span", { className: "o-button-dropdown-content", onClick: onClick, children: children }), jsxRuntimeExports.jsx("span", { className: "o-button-dropdown-icon", children: jsxRuntimeExports.jsx(TogglerIcon, { width: "16px", height: "16px", open: open, closeArrowPosition: "s", openArrowPosition: "n", onClick: onClick ? (open ? onCollapse : onDrop) : undefined }) })] }), jsxRuntimeExports.jsx(Dropdown, { attachToBody: attachDropdownToBody, skidding: skidding, distance: distance, onUpdate: onUpdate, onDropStart: onDropStart, onDropping: onDropping, onDropDone: onDropDone, onCollapseStart: onCollapseStart, onCollapseDone: onCollapseDone, onCollapsing: onCollapsing, widthModifier: widthModifier, zIndex: zIndex, open: open, placement: placement, animationTimeout: animationTimeout, children: jsxRuntimeExports.jsx("div", { ref: dropdownRef, children: listElement }) })] }));
 };
 
 const DropdownButton = styled(DropdownButtonComponent) `
@@ -2094,25 +2095,6 @@ const Card = styled(CardComponent) `
   ${cardStyle}
 `;
 
-const titlelize = (value) => {
-    return value
-        .split('_')
-        .map((v) => ucfirst(v))
-        .join(' ');
-};
-
-const FormCardDisplayerComponent = (displayerProps) => {
-    const total = Object.values(displayerProps.children ?? {}).length;
-    return (jsxRuntimeExports.jsxs("div", { className: addClassname('o-displayer-card', displayerProps.className), children: [jsxRuntimeExports.jsx("div", { className: "o-displayer-card-title", children: displayerProps.name }), Object.values(displayerProps.children ?? {}).map((field, index) => {
-                const Displayer = field.Displayer ?? DefaultDisplayer;
-                return (createElement(Displayer, { ...field, index: index, key: `field-${index}`, first: index === 0, last: index === total - 1, format: displayerProps.format }));
-            })] }));
-};
-
-const FormCardDisplayer = styled(FormCardDisplayerComponent) `
-  ${formCardDisplayerStyle}
-`;
-
 const getIconDivProps = (props) => {
     const { color, marginRight, marginLeft, ...result } = props;
     return result;
@@ -2306,15 +2288,25 @@ const Alert = styled(AlertComponent) `
   ${alertStyle}
 `;
 
-const FormCard = ({ name, help, children, visible, disabled, ...cardProps }) => {
+const FormBlockDisplayerComponent = (displayerProps) => {
+    const total = Object.values(displayerProps.children ?? {}).length;
+    return (jsxRuntimeExports.jsx("div", { className: addClassname('o-displayer-block', displayerProps.className), children: Object.values(displayerProps.children ?? {}).map((field, index) => {
+            const Displayer = field.Displayer ?? DefaultDisplayer;
+            return createElement(Displayer, { ...field, index: index, key: `field-${index}`, first: index === 0, last: index === total - 1, format: displayerProps.format });
+        }) }));
+};
+
+const FormBlockDisplayer = styled(FormBlockDisplayerComponent) `
+`;
+
+const FormBlock = ({ name, help, children, visible, disabled, className }) => {
     const decorator = useFormDecorator(name, {
         Displayer: (displayerProps) => {
-            return (jsxRuntimeExports.jsx(FormCardDisplayer, { ...displayerProps, name: typeof cardProps.title === 'string' ? cardProps.title : titlelize(name) }));
+            return jsxRuntimeExports.jsx(FormBlockDisplayer, { ...displayerProps });
         },
         visible,
         disabled,
     });
-    const form = useForm();
     const metadata = useFormMetadata(decorator.name);
     const fieldContainer = useFieldContainer({
         container: name,
@@ -2356,28 +2348,37 @@ const FormCard = ({ name, help, children, visible, disabled, ...cardProps }) =>
     if (metadata.visible === false) {
         return null;
     }
-    return (jsxRuntimeExports.jsx(FormContext.Provider, { value: fieldContainer.context, children: jsxRuntimeExports.jsx(Card, { ...cardProps, open: !metadata.disabled, onToggle: () => (metadata.disabled ? form.enable(decorator.name) : form.disable(decorator.name)), children: jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [help && (jsxRuntimeExports.jsx(Alert, { kind: "info", size: "small", marginBottom: "2xl", children: help })), children] }) }) }));
+    return (jsxRuntimeExports.jsx(FormContext.Provider, { value: fieldContainer.context, children: jsxRuntimeExports.jsxs("div", { className: addClassname('o-form-block', className), children: [help && (jsxRuntimeExports.jsx(Alert, { kind: "info", size: "small", marginBottom: "2xl", children: help })), children] }) }));
 };
 
-const FormBlockDisplayerComponent = (displayerProps) => {
+const titlelize = (value) => {
+    return value
+        .split('_')
+        .map((v) => ucfirst(v))
+        .join(' ');
+};
+
+const FormCardDisplayerComponent = (displayerProps) => {
     const total = Object.values(displayerProps.children ?? {}).length;
-    return (jsxRuntimeExports.jsx("div", { className: addClassname('o-displayer-block', displayerProps.className), children: Object.values(displayerProps.children ?? {}).map((field, index) => {
-            const Displayer = field.Displayer ?? DefaultDisplayer;
-            return createElement(Displayer, { ...field, index: index, key: `field-${index}`, first: index === 0, last: index === total - 1, format: displayerProps.format });
-        }) }));
+    return (jsxRuntimeExports.jsxs("div", { className: addClassname('o-displayer-card', displayerProps.className), children: [jsxRuntimeExports.jsx("div", { className: "o-displayer-card-title", children: displayerProps.name }), Object.values(displayerProps.children ?? {}).map((field, index) => {
+                const Displayer = field.Displayer ?? DefaultDisplayer;
+                return (createElement(Displayer, { ...field, index: index, key: `field-${index}`, first: index === 0, last: index === total - 1, format: displayerProps.format }));
+            })] }));
 };
 
-const FormBlockDisplayer = styled(FormBlockDisplayerComponent) `
+const FormCardDisplayer = styled(FormCardDisplayerComponent) `
+  ${formCardDisplayerStyle}
 `;
 
-const FormBlock = ({ name, help, children, visible, disabled, className }) => {
+const FormCard = ({ name, help, children, visible, disabled, ...cardProps }) => {
     const decorator = useFormDecorator(name, {
         Displayer: (displayerProps) => {
-            return jsxRuntimeExports.jsx(FormBlockDisplayer, { ...displayerProps });
+            return (jsxRuntimeExports.jsx(FormCardDisplayer, { ...displayerProps, name: typeof cardProps.title === 'string' ? cardProps.title : titlelize(name) }));
         },
         visible,
         disabled,
     });
+    const form = useForm();
     const metadata = useFormMetadata(decorator.name);
     const fieldContainer = useFieldContainer({
         container: name,
@@ -2419,7 +2420,7 @@ const FormBlock = ({ name, help, children, visible, disabled, className }) => {
     if (metadata.visible === false) {
         return null;
     }
-    return (jsxRuntimeExports.jsx(FormContext.Provider, { value: fieldContainer.context, children: jsxRuntimeExports.jsxs("div", { className: addClassname('o-form-block', className), children: [help && (jsxRuntimeExports.jsx(Alert, { kind: "info", size: "small", marginBottom: "2xl", children: help })), children] }) }));
+    return (jsxRuntimeExports.jsx(FormContext.Provider, { value: fieldContainer.context, children: jsxRuntimeExports.jsx(Card, { ...cardProps, open: !metadata.disabled, onToggle: () => (metadata.disabled ? form.enable(decorator.name) : form.disable(decorator.name)), children: jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [help && (jsxRuntimeExports.jsx(Alert, { kind: "info", size: "small", marginBottom: "2xl", children: help })), children] }) }) }));
 };
 
 const CheckboxComponent = ({ label, className = '', onChange, value = false, bordered = true, status, ...checkboxProps }) => {
@@ -3046,6 +3047,76 @@ const FormCheckbox = React.memo((props) => {
 });
 FormCheckbox.displayName = 'FormCheckbox';
 
+const contextMenuStyle = () => {
+    return css `
+    ${preflight()}
+    ${zIndex(9999)}
+  `;
+};
+
+const ContextMenuComponent = ({ refElement, className, children, offsetX = 0, offsetY = 0 }) => {
+    const [visible, setVisible] = useState(false);
+    const { floatingStyles, refs } = useFloating({
+        placement: 'bottom-start',
+        middleware: [offset({ crossAxis: offsetX, mainAxis: offsetY }), flip(), shift()],
+        whileElementsMounted: autoUpdate,
+    });
+    // Handle the right-click event
+    const handleContextMenu = useCallback((e) => {
+        e.preventDefault(); // Prevent the browser's default context menu
+        const x = e.clientX;
+        const y = e.clientY;
+        // Define a VirtualElement object that implements getBoundingClientRect
+        const newVirtualElement = {
+            getBoundingClientRect: () => ({
+                width: 0,
+                height: 0,
+                top: y,
+                right: x,
+                bottom: y,
+                left: x,
+                x: x,
+                y: y,
+                toJSON: () => { },
+            }),
+        };
+        refs.setPositionReference(newVirtualElement);
+        setVisible(true);
+    }, []);
+    // Close the menu on left click or scroll
+    useEffect(() => {
+        const closeMenu = () => setVisible(false);
+        window.addEventListener('click', closeMenu);
+        window.addEventListener('scroll', closeMenu);
+        if (refElement instanceof HTMLElement) {
+            refElement.addEventListener('contextmenu', handleContextMenu);
+        }
+        else if (refElement.current !== null) {
+            refElement.current.addEventListener('contextmenu', handleContextMenu);
+        }
+        return () => {
+            window.removeEventListener('click', closeMenu);
+            window.removeEventListener('scroll', closeMenu);
+            if (refElement instanceof HTMLElement) {
+                refElement.removeEventListener('contextmenu', handleContextMenu);
+            }
+            else if (refElement.current !== null) {
+                refElement.current.removeEventListener('contextmenu', handleContextMenu);
+            }
+        };
+    }, []);
+    if (visible) {
+        return (jsxRuntimeExports.jsx("div", { ref: refs.setFloating, className: addClassname('o-context-menu', className), style: {
+                ...floatingStyles,
+            }, children: children }));
+    }
+    return null;
+};
+
+const ContextMenu = styled(ContextMenuComponent) `
+  ${contextMenuStyle}
+`;
+
 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 const DashboardServiceContext = React.createContext(null);
 const useDashboardService = () => {
@@ -4618,24 +4689,6 @@ const useDashboardController = () => {
     return service;
 };
 
-const RefreshIconComponent = (props) => {
-    return (jsxRuntimeExports.jsx("div", { ...getIconDivProps(props), children: jsxRuntimeExports.jsx("svg", { className: "o-icon-refresh-svg", stroke: "currentColor", fill: "none", strokeWidth: "2", viewBox: "0 0 24 24", "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" }) }) }));
-};
-var RefreshIcon = styled(RefreshIconComponent) `
-  ${({ width = '16px', height = '16px', color: cssColor = 'inherit', marginLeft: ml = '0', marginRight: mr = '0', }) => css `
-    width: ${width};
-    height: ${height};
-    ${marginLeft(ml)}
-    ${marginRight(mr)}
-    ${display('flex')};
-    ${alignItems('center')};
-    ${color(cssColor)}
-    .o-icon-refresh-svg {
-      display: inline-block;
-    }
-  `}
-`;
-
 const useDashboardHorizontalPanel = (area) => {
     const state = useContext(DashboardStateContext);
     return area === 'header' ? state.header : state.footer;
@@ -4649,76 +4702,6 @@ const useDashoardBodyPanel = () => {
     return state.body;
 };
 
-const contextMenuStyle = () => {
-    return css `
-    ${preflight()}
-    ${zIndex(9999)}
-  `;
-};
-
-const ContextMenuComponent = ({ refElement, className, children, offsetX = 0, offsetY = 0 }) => {
-    const [visible, setVisible] = useState(false);
-    const { floatingStyles, refs } = useFloating({
-        placement: 'bottom-start',
-        middleware: [offset({ crossAxis: offsetX, mainAxis: offsetY }), flip(), shift()],
-        whileElementsMounted: autoUpdate,
-    });
-    // Handle the right-click event
-    const handleContextMenu = useCallback((e) => {
-        e.preventDefault(); // Prevent the browser's default context menu
-        const x = e.clientX;
-        const y = e.clientY;
-        // Define a VirtualElement object that implements getBoundingClientRect
-        const newVirtualElement = {
-            getBoundingClientRect: () => ({
-                width: 0,
-                height: 0,
-                top: y,
-                right: x,
-                bottom: y,
-                left: x,
-                x: x,
-                y: y,
-                toJSON: () => { },
-            }),
-        };
-        refs.setPositionReference(newVirtualElement);
-        setVisible(true);
-    }, []);
-    // Close the menu on left click or scroll
-    useEffect(() => {
-        const closeMenu = () => setVisible(false);
-        window.addEventListener('click', closeMenu);
-        window.addEventListener('scroll', closeMenu);
-        if (refElement instanceof HTMLElement) {
-            refElement.addEventListener('contextmenu', handleContextMenu);
-        }
-        else if (refElement.current !== null) {
-            refElement.current.addEventListener('contextmenu', handleContextMenu);
-        }
-        return () => {
-            window.removeEventListener('click', closeMenu);
-            window.removeEventListener('scroll', closeMenu);
-            if (refElement instanceof HTMLElement) {
-                refElement.removeEventListener('contextmenu', handleContextMenu);
-            }
-            else if (refElement.current !== null) {
-                refElement.current.removeEventListener('contextmenu', handleContextMenu);
-            }
-        };
-    }, []);
-    if (visible) {
-        return (jsxRuntimeExports.jsx("div", { ref: refs.setFloating, className: addClassname('o-context-menu', className), style: {
-                ...floatingStyles,
-            }, children: children }));
-    }
-    return null;
-};
-
-const ContextMenu = styled(ContextMenuComponent) `
-  ${contextMenuStyle}
-`;
-
 const IconComponent$8 = ({ className, onClick }) => {
     return (jsxRuntimeExports.jsx("div", { className: className, onClick: onClick, children: jsxRuntimeExports.jsxs("svg", { className: "o-icon-close-all-svg", viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntimeExports.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.621 8.086l-.707-.707L6.5 8.793 5.086 7.379l-.707.707L5.793 9.5l-1.414 1.414.707.707L6.5 10.207l1.414 1.414.707-.707L7.207 9.5l1.414-1.414z" }), jsxRuntimeExports.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5 3l1-1h7l1 1v7l-1 1h-2v2l-1 1H3l-1-1V6l1-1h2V3zm1 2h4l1 1v4h2V3H6v2zm4 1H3v7h7V6z" })] }) }));
 };
@@ -4795,6 +4778,24 @@ var FolderIcon = styled(IconComponent$5) `
   `}
 `;
 
+const RefreshIconComponent = (props) => {
+    return (jsxRuntimeExports.jsx("div", { ...getIconDivProps(props), children: jsxRuntimeExports.jsx("svg", { className: "o-icon-refresh-svg", stroke: "currentColor", fill: "none", strokeWidth: "2", viewBox: "0 0 24 24", "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" }) }) }));
+};
+var RefreshIcon = styled(RefreshIconComponent) `
+  ${({ width = '16px', height = '16px', color: cssColor = 'inherit', marginLeft: ml = '0', marginRight: mr = '0', }) => css `
+    width: ${width};
+    height: ${height};
+    ${marginLeft(ml)}
+    ${marginRight(mr)}
+    ${display('flex')};
+    ${alignItems('center')};
+    ${color(cssColor)}
+    .o-icon-refresh-svg {
+      display: inline-block;
+    }
+  `}
+`;
+
 const IconComponent$4 = ({ className, onClick }) => {
     return (jsxRuntimeExports.jsx("div", { className: className, onClick: onClick, children: jsxRuntimeExports.jsx("svg", { className: "o-icon-search-svg", viewBox: "0 0 118.783 118.783", children: jsxRuntimeExports.jsx("path", { d: "M115.97,101.597L88.661,74.286c4.64-7.387,7.333-16.118,7.333-25.488c0-26.509-21.49-47.996-47.998-47.996\n\t\tS0,22.289,0,48.798c0,26.51,21.487,47.995,47.996,47.995c10.197,0,19.642-3.188,27.414-8.605l26.984,26.986\n\t\tc1.875,1.873,4.333,2.806,6.788,2.806c2.458,0,4.913-0.933,6.791-2.806C119.72,111.423,119.72,105.347,115.97,101.597z\n\t\t M47.996,81.243c-17.917,0-32.443-14.525-32.443-32.443s14.526-32.444,32.443-32.444c17.918,0,32.443,14.526,32.443,32.444\n\t\tS65.914,81.243,47.996,81.243z" }) }) }));
 };
@@ -8354,16 +8355,6 @@ const FormAutoComplete = (props) => {
     return (jsxRuntimeExports.jsx(FormSelect, { NotFoundComponent: null, IconComponent: null, autoCompleteAdapter: adapter, openOnFocus: true, ...props, mode: "autocomplete", autoCompleteSearch: false, validateValue: false, searchable: true, clickable: false }));
 };
 
-class DefaultSelectBroker extends DefaultCollectionBroker {
-    defaultValue;
-    setDefaultValue(defaultValue, subscriberId) {
-        if (subscriberId === undefined) {
-            this.defaultValue = defaultValue;
-        }
-        this._getSubscribers(subscriberId).forEach((s) => s.setDefaultValue(defaultValue));
-    }
-}
-
 const useTreeInitialState = (dataSource, options) => {
     return useCollectionInitialState(dataSource, options);
 };
@@ -9498,11 +9489,21 @@ const TreeSelectComponent$1 = (props) => {
 TreeSelectComponent$1.displayName = 'TreeSelectComponent';
 var TreeSelectComponent = React.memo(TreeSelectComponent$1);
 
-const TreeSelect = styled(TreeSelectComponent) `
-  ${selectStyle}
-`;
-
-// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+class DefaultSelectBroker extends DefaultCollectionBroker {
+    defaultValue;
+    setDefaultValue(defaultValue, subscriberId) {
+        if (subscriberId === undefined) {
+            this.defaultValue = defaultValue;
+        }
+        this._getSubscribers(subscriberId).forEach((s) => s.setDefaultValue(defaultValue));
+    }
+}
+
+const TreeSelect = styled(TreeSelectComponent) `
+  ${selectStyle}
+`;
+
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 const TabsServiceContext = React.createContext(null);
 const useTabsService = () => {
     return useContext(TabsServiceContext);
@@ -11065,221 +11066,6 @@ const useFormTableContext = () => {
     return useContext(DefaultFormTableContext);
 };
 
-const DefaultDeleteRowComponent = ({ rowIndex }) => {
-    const form = useForm();
-    const { tableName, onRemove } = useFormTableContext();
-    const removeRow = () => {
-        const row = form.getValue(`${tableName}.${rowIndex}`);
-        if (onRemove) {
-            onRemove(form, row, rowIndex);
-        }
-        else {
-            form.remove(tableName, rowIndex);
-        }
-    };
-    const metadata = useFormMetadata(tableName);
-    let disabled = false;
-    if (metadata.disabled || metadata.readOnly || (metadata.editable === false && form.config.reconfigure)) {
-        disabled = true;
-    }
-    return (jsxRuntimeExports.jsx("div", { className: `o-form-table-remove${disabled ? ' o-form-table-remove-disabled' : ''}`, onClick: removeRow, children: jsxRuntimeExports.jsx(RemoveIcon, { width: "14px", height: "14px" }) }));
-};
-const DefaultSelectRowComponent = ({ item }) => {
-    const { onSelect } = useFormTableContext();
-    const selected = item?.selected;
-    const toggle = (selected) => onSelect(item, selected);
-    return jsxRuntimeExports.jsx(Checkbox, { value: selected || false, onChange: toggle });
-};
-const FooterComponent = () => {
-    const form = useForm();
-    const { tableName, addLabel, maxLength, onAdd } = useFormTableContext();
-    const isSingleColumnTable = useTableColumns().find((c) => c.id === '');
-    const addRow = (e) => {
-        e.preventDefault();
-        onAdd(isSingleColumnTable ? undefined : {});
-    };
-    const currentSize = (form.getValue(tableName) || []).length;
-    if (maxLength !== undefined && currentSize >= maxLength)
-        return null;
-    return (jsxRuntimeExports.jsxs("div", { className: "o-form-table-add", onClick: addRow, children: [jsxRuntimeExports.jsx(TogglerIcon, { open: false, model: "plus", color: "currentColor" }), jsxRuntimeExports.jsx("span", { children: addLabel })] }));
-};
-const CheckAllComponent = () => {
-    const form = useForm();
-    const { tableName } = useFormTableContext();
-    const fieldValue = useValue(tableName);
-    const tableService = useTableService();
-    const isAllChecked = Array.isArray(fieldValue) && Array.isArray(fieldValue) && fieldValue.length > 0;
-    const toggle = (selected) => {
-        if (selected) {
-            const items = tableService.items.map((item) => item?.data).filter((data) => data !== undefined);
-            form.setValue(tableName, items);
-        }
-        else {
-            form.setValue(tableName, []);
-        }
-    };
-    return jsxRuntimeExports.jsx(Checkbox, { className: "o-form-table-check-all", value: isAllChecked, onChange: toggle });
-};
-const FormTableComponent = React.memo(({ addLabel = 'add', controller, value, onAdd, onChange, onRemove, className, name, format = 'auto', required, minLength, maxLength, showAddButton = true, DeleteRowComponent = DefaultDeleteRowComponent, SelectRowComponent = DefaultSelectRowComponent, ...props }) => {
-    const form = useForm();
-    const field = form.fields[name];
-    if (field) {
-        const validators = field.validators;
-        const minlengthValidator = (validators.minLength || validators.min);
-        if (minlengthValidator) {
-            minLength = minlengthValidator.length;
-        }
-        const maxlengthValidator = (validators.maxLength || validators.max);
-        if (maxlengthValidator) {
-            maxLength = maxlengthValidator.length;
-        }
-    }
-    const id = useId();
-    const tableService = controller.asService();
-    const formatRef = useLazyRef(() => {
-        if (format === 'auto') {
-            return value && value.length > 0 && typeof value[0] !== 'object' ? 'id' : 'object';
-        }
-        return format;
-    });
-    const [mounted, setMounted] = useState(false);
-    const formTableContext = useLazyRef(() => {
-        const onSelect = (item, selected) => {
-            const getId = (v) => {
-                return formatRef.current === 'id' ? v : v.id;
-            };
-            const currentValues = form.getValue(name, []);
-            const value = formatRef.current === 'id' ? item.id : item.data;
-            if (selected) {
-                onChange && onChange([value].concat(currentValues));
-            }
-            else {
-                onChange && onChange(currentValues.filter((v) => getId(v) !== getId(value)));
-            }
-        };
-        if (!onAdd) {
-            onAdd = (initialValue) => {
-                formTableContext.current.editable = true;
-                form.add(name, initialValue);
-            };
-        }
-        return { tableName: name, onSelect, onAdd, onRemove, addLabel, required, minLength, maxLength };
-    });
-    // listen on value change from the form
-    // for the initial value in the table controller
-    // delay the rendering of the table until the value has been set in the controller
-    useEffect(() => {
-        const watch = [name];
-        const listener = (value) => {
-            if (tableService.dataSource) {
-                tableService.setSelected('value', value || []);
-            }
-            else if (value !== undefined) {
-                tableService.setData(value);
-            }
-        };
-        form.onValueChange(id, listener, watch);
-        listener(value);
-        setMounted(true);
-        return () => {
-            form.offValueChange(id);
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    useEffect(() => {
-        if (tableService.dataSource) {
-            tableService.addColumn({
-                id: 'system.select',
-                width: '50px',
-                filterable: false,
-                sortable: false,
-                CellComponent: SelectRowComponent,
-                TitleComponent: () => jsxRuntimeExports.jsx(CheckAllComponent, {}),
-            }, 0);
-        }
-        else {
-            tableService.addColumn({
-                id: 'system.insert',
-                width: '50px',
-                filterable: false,
-                sortable: false,
-                CellComponent: DeleteRowComponent,
-                className: 'o-form-table-remove-cell',
-            }, 0);
-        }
-    }, [tableService]);
-    if (!mounted)
-        return null;
-    return (jsxRuntimeExports.jsx(DefaultFormTableContext.Provider, { value: formTableContext.current, children: jsxRuntimeExports.jsx(ControllerTableComponent, { controller: controller, className: addClassname('o-form-table', className), FooterComponent: tableService.dataSource ? undefined : FooterComponent, footer: tableService.dataSource || !showAddButton || props.disabled ? false : true, NotFoundComponent: null, ...props }) }));
-});
-FormTableComponent.displayName = 'FormTable';
-
-const FormTableItemDisplayer = ({ value, columns, first, last, className, format, name, index, }) => {
-    const userColumns = columns.filter((c) => !c.id.startsWith('system.'));
-    const monoColumnTable = userColumns.length === 1 && !userColumns[0].id;
-    const classNames = monoColumnTable
-        ? 'o-form-mono-column-table-item-displayer'
-        : `o-form-table-item-displayer${first ? ' o-form-table-item-displayer-first' : ''}${last ? ' o-form-table-item-displayer-last' : ''}`;
-    return (jsxRuntimeExports.jsx("div", { className: addClassname(classNames, className), children: userColumns.map((column, colIndex) => {
-            const Displayer = column.Displayer;
-            if (Displayer) {
-                return (jsxRuntimeExports.jsx(Displayer, { column: column, firstRow: first, lastRow: last, rowIndex: index, firstCol: colIndex === 0, lastCol: colIndex === columns.length - 1, colIndex: colIndex, format: format, value: value, rowName: name }, `col-${colIndex}`));
-            }
-            return null;
-        }) }));
-};
-
-const FormTableValueDisplayer$1 = ({ name, columns, value, format, className }) => {
-    if (!Array.isArray(value))
-        return null;
-    return (jsxRuntimeExports.jsx("div", { className: addClassname('o-form-table-displayer-value', className), children: value.map((v, index) => (jsxRuntimeExports.jsx(FormTableItemDisplayer, { value: v, columns: columns, first: index === 0, last: index === value.length - 1, format: format === 'csv' ? 'csv' : 'form_summary_table', name: `${name}.${index}`, index: index }, `item-${index}`))) }));
-};
-var FormTableValueDisplayer = styled(FormTableValueDisplayer$1) `
-  .o-form-table-item-displayer {
-    ${borderBottomColor('primary')}
-    ${borderBottomStyle('solid')}
-    ${borderBottomWidth('1px')}
-    ${paddingY('sm')}
-    &.o-form-table-item-displayer-last {
-      ${paddingBottom(0)}
-      ${borderBottomWidth(0)}
-    }
-    &.o-form-table-item-displayer-first {
-      ${paddingTop(0)}
-    }
-  }
-`;
-
-const StyledFormTableComponent = styled(FormTableComponent) `
-  ${tableStyle}
-`;
-const FormTable = React.memo((props) => {
-    let defaultValue = props.defaultValue;
-    if (defaultValue === undefined) {
-        let minLength = (props.minLength ?? props.min) || 0;
-        if (props.required && minLength < 1) {
-            minLength = 1;
-        }
-        const isSingleColumnTable = props.controller.columns.find((c) => c.id === '');
-        defaultValue = minLength > 0 ? Array(minLength).fill(isSingleColumnTable ? undefined : {}) : [];
-    }
-    const [fieldLayoutProps, fieldComponentProps] = useFieldLayout(Object.assign({
-        defaultValue,
-        Displayer: (displayerProps) => {
-            const form = useForm();
-            let value = form.getValue(displayerProps.name) ?? [];
-            const ValueDisplayer = props.ValueDisplayer ?? FormTableValueDisplayer;
-            return (jsxRuntimeExports.jsx(FieldDisplayer, { label: displayerProps.label ?? titlelize(displayerProps.name), help: props.help, first: displayerProps.first, last: displayerProps.last, value: jsxRuntimeExports.jsx(ValueDisplayer, { name: displayerProps.name, value: value, columns: props.controller.columns, format: displayerProps.format }), format: displayerProps.format }));
-        },
-    }, props));
-    const fieldContainer = useFieldContainer({
-        container: props.name,
-    });
-    const Component = props.FieldComponent || StyledFormTableComponent;
-    return (jsxRuntimeExports.jsx(FieldLayout, { ...fieldLayoutProps, required: props.required, children: jsxRuntimeExports.jsx(FormContext.Provider, { value: fieldContainer.context, children: jsxRuntimeExports.jsx(Component, { ...fieldComponentProps, name: props.name, required: props.required, minLength: props.minLength ?? props.min, maxLength: props.maxLength ?? props.max }) }) }));
-});
-FormTable.displayName = 'FormTable';
-
 const CheckboxCellComponent = (options) => {
     const CheckboxCellComponent = ({ item, column, rowIndex }) => {
         const { tableName, editable } = useFormTableContext();
@@ -11694,18 +11480,233 @@ const textareaColumn = (id, options) => {
     });
 };
 
-const useCheckboxColumn = (id, options) => {
-    const column = useLazyRef(() => {
-        return checkboxColumn(id, options);
-    });
-    return column.current;
+const FormTableItemDisplayer = ({ value, columns, first, last, className, format, name, index, }) => {
+    const userColumns = columns.filter((c) => !c.id.startsWith('system.'));
+    const monoColumnTable = userColumns.length === 1 && !userColumns[0].id;
+    const classNames = monoColumnTable
+        ? 'o-form-mono-column-table-item-displayer'
+        : `o-form-table-item-displayer${first ? ' o-form-table-item-displayer-first' : ''}${last ? ' o-form-table-item-displayer-last' : ''}`;
+    return (jsxRuntimeExports.jsx("div", { className: addClassname(classNames, className), children: userColumns.map((column, colIndex) => {
+            const Displayer = column.Displayer;
+            if (Displayer) {
+                return (jsxRuntimeExports.jsx(Displayer, { column: column, firstRow: first, lastRow: last, rowIndex: index, firstCol: colIndex === 0, lastCol: colIndex === columns.length - 1, colIndex: colIndex, format: format, value: value, rowName: name }, `col-${colIndex}`));
+            }
+            return null;
+        }) }));
 };
 
-const useColumns = (columns) => {
-    const ref = useRef(columns);
-    return ref.current;
+const FormTableValueDisplayer$1 = ({ name, columns, value, format, className }) => {
+    if (!Array.isArray(value))
+        return null;
+    return (jsxRuntimeExports.jsx("div", { className: addClassname('o-form-table-displayer-value', className), children: value.map((v, index) => (jsxRuntimeExports.jsx(FormTableItemDisplayer, { value: v, columns: columns, first: index === 0, last: index === value.length - 1, format: format === 'csv' ? 'csv' : 'form_summary_table', name: `${name}.${index}`, index: index }, `item-${index}`))) }));
 };
-
+var FormTableValueDisplayer = styled(FormTableValueDisplayer$1) `
+  .o-form-table-item-displayer {
+    ${borderBottomColor('primary')}
+    ${borderBottomStyle('solid')}
+    ${borderBottomWidth('1px')}
+    ${paddingY('sm')}
+    &.o-form-table-item-displayer-last {
+      ${paddingBottom(0)}
+      ${borderBottomWidth(0)}
+    }
+    &.o-form-table-item-displayer-first {
+      ${paddingTop(0)}
+    }
+  }
+`;
+
+const DefaultDeleteRowComponent = ({ rowIndex }) => {
+    const form = useForm();
+    const { tableName, onRemove } = useFormTableContext();
+    const removeRow = () => {
+        const row = form.getValue(`${tableName}.${rowIndex}`);
+        if (onRemove) {
+            onRemove(form, row, rowIndex);
+        }
+        else {
+            form.remove(tableName, rowIndex);
+        }
+    };
+    const metadata = useFormMetadata(tableName);
+    let disabled = false;
+    if (metadata.disabled || metadata.readOnly || (metadata.editable === false && form.config.reconfigure)) {
+        disabled = true;
+    }
+    return (jsxRuntimeExports.jsx("div", { className: `o-form-table-remove${disabled ? ' o-form-table-remove-disabled' : ''}`, onClick: removeRow, children: jsxRuntimeExports.jsx(RemoveIcon, { width: "14px", height: "14px" }) }));
+};
+const DefaultSelectRowComponent = ({ item }) => {
+    const { onSelect } = useFormTableContext();
+    const selected = item?.selected;
+    const toggle = (selected) => onSelect(item, selected);
+    return jsxRuntimeExports.jsx(Checkbox, { value: selected || false, onChange: toggle });
+};
+const FooterComponent = () => {
+    const form = useForm();
+    const { tableName, addLabel, maxLength, onAdd } = useFormTableContext();
+    const isSingleColumnTable = useTableColumns().find((c) => c.id === '');
+    const addRow = (e) => {
+        e.preventDefault();
+        onAdd(isSingleColumnTable ? undefined : {});
+    };
+    const currentSize = (form.getValue(tableName) || []).length;
+    if (maxLength !== undefined && currentSize >= maxLength)
+        return null;
+    return (jsxRuntimeExports.jsxs("div", { className: "o-form-table-add", onClick: addRow, children: [jsxRuntimeExports.jsx(TogglerIcon, { open: false, model: "plus", color: "currentColor" }), jsxRuntimeExports.jsx("span", { children: addLabel })] }));
+};
+const CheckAllComponent = () => {
+    const form = useForm();
+    const { tableName } = useFormTableContext();
+    const fieldValue = useValue(tableName);
+    const tableService = useTableService();
+    const isAllChecked = Array.isArray(fieldValue) && Array.isArray(fieldValue) && fieldValue.length > 0;
+    const toggle = (selected) => {
+        if (selected) {
+            const items = tableService.items.map((item) => item?.data).filter((data) => data !== undefined);
+            form.setValue(tableName, items);
+        }
+        else {
+            form.setValue(tableName, []);
+        }
+    };
+    return jsxRuntimeExports.jsx(Checkbox, { className: "o-form-table-check-all", value: isAllChecked, onChange: toggle });
+};
+const FormTableComponent = React.memo(({ addLabel = 'add', controller, value, onAdd, onChange, onRemove, className, name, format = 'auto', required, minLength, maxLength, showAddButton = true, DeleteRowComponent = DefaultDeleteRowComponent, SelectRowComponent = DefaultSelectRowComponent, ...props }) => {
+    const form = useForm();
+    const field = form.fields[name];
+    if (field) {
+        const validators = field.validators;
+        const minlengthValidator = (validators.minLength || validators.min);
+        if (minlengthValidator) {
+            minLength = minlengthValidator.length;
+        }
+        const maxlengthValidator = (validators.maxLength || validators.max);
+        if (maxlengthValidator) {
+            maxLength = maxlengthValidator.length;
+        }
+    }
+    const id = useId();
+    const tableService = controller.asService();
+    const formatRef = useLazyRef(() => {
+        if (format === 'auto') {
+            return value && value.length > 0 && typeof value[0] !== 'object' ? 'id' : 'object';
+        }
+        return format;
+    });
+    const [mounted, setMounted] = useState(false);
+    const formTableContext = useLazyRef(() => {
+        const onSelect = (item, selected) => {
+            const getId = (v) => {
+                return formatRef.current === 'id' ? v : v.id;
+            };
+            const currentValues = form.getValue(name, []);
+            const value = formatRef.current === 'id' ? item.id : item.data;
+            if (selected) {
+                onChange && onChange([value].concat(currentValues));
+            }
+            else {
+                onChange && onChange(currentValues.filter((v) => getId(v) !== getId(value)));
+            }
+        };
+        if (!onAdd) {
+            onAdd = (initialValue) => {
+                formTableContext.current.editable = true;
+                form.add(name, initialValue);
+            };
+        }
+        return { tableName: name, onSelect, onAdd, onRemove, addLabel, required, minLength, maxLength };
+    });
+    // listen on value change from the form
+    // for the initial value in the table controller
+    // delay the rendering of the table until the value has been set in the controller
+    useEffect(() => {
+        const watch = [name];
+        const listener = (value) => {
+            if (tableService.dataSource) {
+                tableService.setSelected('value', value || []);
+            }
+            else if (value !== undefined) {
+                tableService.setData(value);
+            }
+        };
+        form.onValueChange(id, listener, watch);
+        listener(value);
+        setMounted(true);
+        return () => {
+            form.offValueChange(id);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    useEffect(() => {
+        if (tableService.dataSource) {
+            tableService.addColumn({
+                id: 'system.select',
+                width: '50px',
+                filterable: false,
+                sortable: false,
+                CellComponent: SelectRowComponent,
+                TitleComponent: () => jsxRuntimeExports.jsx(CheckAllComponent, {}),
+            }, 0);
+        }
+        else {
+            tableService.addColumn({
+                id: 'system.insert',
+                width: '50px',
+                filterable: false,
+                sortable: false,
+                CellComponent: DeleteRowComponent,
+                className: 'o-form-table-remove-cell',
+            }, 0);
+        }
+    }, [tableService]);
+    if (!mounted)
+        return null;
+    return (jsxRuntimeExports.jsx(DefaultFormTableContext.Provider, { value: formTableContext.current, children: jsxRuntimeExports.jsx(ControllerTableComponent, { controller: controller, className: addClassname('o-form-table', className), FooterComponent: tableService.dataSource ? undefined : FooterComponent, footer: tableService.dataSource || !showAddButton || props.disabled ? false : true, NotFoundComponent: null, ...props }) }));
+});
+FormTableComponent.displayName = 'FormTable';
+
+const StyledFormTableComponent = styled(FormTableComponent) `
+  ${tableStyle}
+`;
+const FormTable = React.memo((props) => {
+    let defaultValue = props.defaultValue;
+    if (defaultValue === undefined) {
+        let minLength = (props.minLength ?? props.min) || 0;
+        if (props.required && minLength < 1) {
+            minLength = 1;
+        }
+        const isSingleColumnTable = props.controller.columns.find((c) => c.id === '');
+        defaultValue = minLength > 0 ? Array(minLength).fill(isSingleColumnTable ? undefined : {}) : [];
+    }
+    const [fieldLayoutProps, fieldComponentProps] = useFieldLayout(Object.assign({
+        defaultValue,
+        Displayer: (displayerProps) => {
+            const form = useForm();
+            let value = form.getValue(displayerProps.name) ?? [];
+            const ValueDisplayer = props.ValueDisplayer ?? FormTableValueDisplayer;
+            return (jsxRuntimeExports.jsx(FieldDisplayer, { label: displayerProps.label ?? titlelize(displayerProps.name), help: props.help, first: displayerProps.first, last: displayerProps.last, value: jsxRuntimeExports.jsx(ValueDisplayer, { name: displayerProps.name, value: value, columns: props.controller.columns, format: displayerProps.format }), format: displayerProps.format }));
+        },
+    }, props));
+    const fieldContainer = useFieldContainer({
+        container: props.name,
+    });
+    const Component = props.FieldComponent || StyledFormTableComponent;
+    return (jsxRuntimeExports.jsx(FieldLayout, { ...fieldLayoutProps, required: props.required, children: jsxRuntimeExports.jsx(FormContext.Provider, { value: fieldContainer.context, children: jsxRuntimeExports.jsx(Component, { ...fieldComponentProps, name: props.name, required: props.required, minLength: props.minLength ?? props.min, maxLength: props.maxLength ?? props.max }) }) }));
+});
+FormTable.displayName = 'FormTable';
+
+const useCheckboxColumn = (id, options) => {
+    const column = useLazyRef(() => {
+        return checkboxColumn(id, options);
+    });
+    return column.current;
+};
+
+const useColumns = (columns) => {
+    const ref = useRef(columns);
+    return ref.current;
+};
+
 const useEnumColumn = (id, options) => {
     const column = useLazyRef(() => {
         return enumColumn(id, options);
@@ -11741,1957 +11742,2136 @@ const useSelectColumn = (id, options) => {
     return column.current;
 };
 
-const useTextColumn = (id, options) => {
+const useTextareaColumn = (id, options) => {
     const column = useLazyRef(() => {
-        return textColumn(id, options);
+        return textareaColumn(id, options);
     });
     return column.current;
 };
 
-const useTextareaColumn = (id, options) => {
+const useTextColumn = (id, options) => {
     const column = useLazyRef(() => {
-        return textareaColumn(id, options);
+        return textColumn(id, options);
     });
     return column.current;
 };
 
-const TagComponent = ({ className, children, onClick, icon }) => {
-    return (jsxRuntimeExports.jsxs("div", { className: addClassname('o-tag', className), onClick: onClick, children: [icon && jsxRuntimeExports.jsx("span", { className: "o-tag-icon", children: icon }), children] }));
-};
+const columnCount = cssProperty('column-count');
+const columnFill = cssProperty('column-fill');
+const columnRule = cssProperty('column-rule');
+const columnRuleColor = cssProperty(null, colorFormatter('column-rule-color'));
+const columnRuleStyle = cssProperty('column-rule-style');
+const columnRuleWidth = cssProperty('column-rule-width', pxFormatter);
+const columnSpan = cssProperty('column-span');
+const columnWidth = cssProperty('column-width', pxFormatter);
+const columns = cssProperty('columns');
+const grid = cssProperty('grid');
+const gridAutoColumns = cssProperty('grid-auto-columns');
+const gridAutoFlow = cssProperty('grid-auto-flow');
+const gridAutoRows = cssProperty('grid-auto-rows');
+const gridColumn = cssProperty('grid-column');
+const gridColumnEnd = cssProperty('grid-column-start');
+const gridColumnGap = columnGap;
+const gridColumnStart = cssProperty('grid-column-start');
+const gridGap = gap;
+const gridRow = cssProperty('grid-row');
+const gridRowEnd = cssProperty('grid-row-end');
+const gridRowGap = rowGap;
+const gridRowStart = cssProperty('grid-row-start');
+const gridTemplate = cssProperty('grid-template');
+const gridTemplateAreas = cssProperty('grid-template-areas');
+const gridTemplateColumns = cssProperty('grid-template-columns');
+const gridTemplateRows = cssProperty('grid-template-rows');
 
-const tagStyle = ({ theme, kind, bgColor = 'primary', fontColor = 'white', size = 'small', onClick, marginBottom: mb = 0, marginLeft: ml = 0, marginRight: mr = 0, marginTop: mt = 0, }) => {
-    let fSize = 'sm';
-    let lHeight = 'md';
-    let pX = 'md';
-    let radius = 'sm';
-    const pt = '2xs';
-    if (size === 'small') {
-        fSize = 'xs';
-        lHeight = 'xs';
-        radius = 'xs';
-        pX = 'sm';
-    }
-    if (size === 'large') {
-        fSize = 'md';
-        lHeight = 'lg';
-    }
+const datePickerStyle = () => {
     return css `
-    ${display('inline-flex')}
-    ${alignItems('center')}
-    ${backgroundColor(kind ? theme.buttons[kind].bgColor : bgColor)}
-    ${marginLeft(ml)}
-    ${marginRight(mr)}
-    ${marginBottom(mb)}
-    ${marginTop(mt)}
-    ${lineHeight(lHeight)}
-    ${paddingX(pX)}
-    ${paddingTop(pt)}
-    ${color(kind ? theme.buttons[kind].color : fontColor)}
-    ${fontSize(fSize)}
-    ${cursor(onClick ? 'pointer' : 'inherit')}
-    ${borderRadius(radius)}
-    .o-tag-icon {
-      ${marginRight('xs')}
-      ${display('inline-flex')}
+    .o-calendar {
+      ${width('300px')}
+    }
+    .o-calendar-month {
+      ${display('flex')}
       ${alignItems('center')}
+      ${marginBottom('md')}
+      ${columnGap('sm')}
     }
-  `;
-};
-
-const Tag = styled(TagComponent) `
-  ${tagStyle}
-`;
 
-// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-const WizardServiceContext = React.createContext(null);
-const useWizardService = () => {
-    return useContext(WizardServiceContext);
-};
+    .o-calendar-select-month {
+      ${width(24)}
+    }
 
-const WizardStateContext = React.createContext(null);
-const useWizardState = () => {
-    return useContext(WizardStateContext);
-};
+    .o-calendar-select-year {
+      ${width(12)}
+    }
 
-const StepTitleContent = ({ member, index }) => {
-    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [member.icon, jsxRuntimeExports.jsxs("span", { className: "o-step-title", children: [index, ". ", `${member.title}`] })] }));
-};
+    .o-calendar-day-container {
+      ${display('grid')}
+      ${color('light')}
+      ${gridTemplateColumns('repeat(7, 1fr)')}
+      grid-template-rows: repeat(7, min(30px));
+      ${rowGap('5px')}
+      ${columnGap('5px')}
+    }
+    .o-calendar-day-title {
+      ${display('flex')}
+      ${alignItems('center')}
+      ${justifyContent('center')}
+      ${color('dark')}
+    }
+    .o-calendar-day {
+      ${display('flex')}
+      ${alignItems('center')}
+      ${justifyContent('center')}
+      ${cursor('pointer')}
+      ${borderRadius('md')}
 
-const StepTitle = (props) => {
-    const { member, onActivate, TitleContentComponent = StepTitleContent } = props;
-    return (jsxRuntimeExports.jsx("div", { className: `o-step${member.active ? ' o-step-active' : ' o-step-inactive'}${member.disabled ? ' o-step-disabled' : ' o-step-enabled'}${member.visible ? ' o-step-visible' : ' o-step-hidden'}${member.touched || member.touching ? ' o-step-touched' : ' o-step-untouched'}${member.success ? ' o-step-success' : ''}${member.touchingWarning || (member.touched && member.warning) ? ' o-step-warning' : ''}${member.touchingError || (member.touched && member.error) ? ' o-step-error' : ''}${member.loading ? ' o-step-loading' : ''}`, onClick: () => onActivate(member), children: jsxRuntimeExports.jsx(TitleContentComponent, { ...props }) }));
-};
+      &:hover {
+        ${backgroundColor('darkest')}
+        ${color('white')}
+      }
+    }
+    .o-calendar-day-in-month {
+      ${color('darkest')}
+      ${backgroundColor('lighter')}
+    }
+    .o-calendar-day-current {
+      ${borderColor('darker')}
+      ${borderWidth('2px')}
+      ${borderStyle('solid')}
+      ${fontWeight('medium')}
+    }
 
-const WizardContainer = ({ cancelLabel = 'Cancel', className, children, doneLabel = 'Submit', nextLabel = 'Next', onCancel, onDone, previousLabel = 'Previous', title, stepSize = 3, TitleComponent = StepTitle, TitleContentComponent, forwardOnly = true, hasSummaryStep = false, reviewLabel = 'Review and Submit', }) => {
-    const classNames = addClassname('o-wizard', className);
-    const state = useWizardState();
-    const service = useWizardService();
-    const lastStepUid = service.getLastStep()?.uid;
-    const activate = useCallback((step) => {
-        if (!step || step.disabled || (!step.touched && !step.touching))
-            return;
-        if (!step.active) {
-            service.activate(step.uid);
-        }
-    }, [service]);
-    const errorRef = useRef([]);
-    errorRef.current = [];
-    const indexRef = useRef(0);
-    indexRef.current = 0;
-    return (jsxRuntimeExports.jsxs(Row, { className: classNames, children: [jsxRuntimeExports.jsxs(Col, { size: stepSize, className: "o-wizard-step-panel", children: [title && jsxRuntimeExports.jsx("div", { className: "o-wizard-title", children: title }), state.members.map((step) => {
-                        if (step.visible) {
-                            indexRef.current++;
-                        }
-                        else {
-                            return null;
-                        }
-                        if (step.error !== undefined) {
-                            errorRef.current.push({
-                                stepIndex: indexRef.current,
-                                stepTitle: step.title,
-                                errorMessage: step.error,
-                            });
-                        }
-                        return (jsxRuntimeExports.jsx(TitleComponent, { member: step, onActivate: activate, index: indexRef.current, TitleContentComponent: TitleContentComponent }, `step-title-${step.uid}`));
-                    })] }), jsxRuntimeExports.jsxs(Col, { size: (12 - stepSize), className: "o-wizard-content-panel", children: [jsxRuntimeExports.jsx("div", { className: "o-wizard-content", children: children }), jsxRuntimeExports.jsxs("div", { className: "o-wizard-control", children: [onCancel && (jsxRuntimeExports.jsx(Button, { kind: "primary", pattern: "flat", className: "o-wizard-control-button", type: "button", onClick: () => onCancel(), children: cancelLabel })), !service.isFirstStep() && (jsxRuntimeExports.jsx(Button, { kind: "primary", pattern: "outline", className: "o-wizard-control-button", onClick: () => service.previous(), type: "button", children: previousLabel })), !service.isLastStep() && (jsxRuntimeExports.jsx(Button, { kind: service.isCurrentStepInVisibleError() ? 'danger' : 'primary', pattern: "solid", className: "o-wizard-control-button", disabled: service.isCurrentStepInVisibleError(), onClick: () => service.next(), type: "button", children: nextLabel })), (service.isLastStep() || !forwardOnly) && (jsxRuntimeExports.jsx(SubmitButton, { kind: errorRef.current.length > 0 ? 'danger' : 'success', pattern: "solid", className: "o-wizard-control-button", disabled: errorRef.current.length > 0, onClick: hasSummaryStep && !service.isLastStep() && lastStepUid ? () => service.activate(lastStepUid) : onDone, type: "button", showErrors: true, children: hasSummaryStep && !service.isLastStep() ? reviewLabel : doneLabel }))] })] })] }));
-};
+    .o-calendar-day-in-range {
+      ${backgroundColor('lightblue')}
+      ${borderRadius('none')}
+      ${color('white')}
+    }
 
-const ControlledWizardComponent = ({ Component = WizardContainer, controller, ...props }) => {
-    return (jsxRuntimeExports.jsx(WizardServiceContext.Provider, { value: controller, children: jsxRuntimeExports.jsx(WizardStateContext.Provider, { value: controller.state, children: jsxRuntimeExports.jsx(Component, { ...props }) }) }));
-};
+    .o-calendar-day-in-range-transient {
+      ${backgroundColor('dark')}
+      ${borderRadius('none')}
+      ${color('white')}
+    }
 
-let WizardService = class WizardService extends TabsService {
-    activateNext() {
-        const nextStep = this.getNextStep();
-        if (nextStep) {
-            this.activate(nextStep.uid);
-        }
+    .o-calendar-day-start-range,
+    .o-calendar-day-start-range-transient {
+      ${borderTopRightRadius('none')}
+      ${borderBottomRightRadius('none')}
     }
-    activatePrevious() {
-        const previousStep = this.getPreviousStep();
-        if (previousStep) {
-            this.activate(previousStep.uid);
-        }
+
+    .o-calendar-day-end-range,
+    .o-calendar-day-end-range-transient {
+      ${borderTopLeftRadius('none')}
+      ${borderBottomLeftRadius('none')}
     }
-    getCurrentStep() {
-        return this.state.members[this.getCurrentActiveIndex()];
+
+    .o-datepicker-dropdown-content {
+      ${borderRadius('sm')}
+      ${borderTopLeftRadius(0)}
+      ${borderTopRightRadius(0)}
+      ${boxShadow('lg')}
+      ${zIndex(2000)}
+      ${backgroundColor('white')}
+      ${borderWidth(1)}
+      ${borderColor('light')}
+      ${marginTop('-1px')}
+      ${padding('lg')}
+      ${userSelect('none')}
+      ${display('flex')}
     }
-    getNextStep() {
-        for (let i = this.getCurrentActiveIndex() + 1; i < this.state.members.length; i++) {
-            const step = this.state.members[i];
-            if (step && step.visible && !step.disabled) {
-                return step;
-            }
+
+    .o-datepicker-active {
+      .o-calendar-day-active {
+        ${color('white')}
+        ${backgroundColor('primary')}
+        ${fontWeight('medium')}
+        &.o-calendar-day-end-range-transient {
+          ${backgroundColor('darkest')}
+          &.o-calendar-day-start-range {
+            ${backgroundColor('primary')}
+          }
         }
-        return undefined;
-    }
-    getLastStep() {
-        return this.state.members.filter((m) => m.visible && !m.disabled).slice(-1)[0];
-    }
-    getPreviousStep() {
-        for (let i = this.getCurrentActiveIndex() - 1; i >= 0; i--) {
-            const step = this.state.members[i];
-            if (step && step.visible && !step.disabled) {
-                return step;
-            }
+        &.o-calendar-day-start-range-transient {
+          ${backgroundColor('darkest')}
         }
-        return undefined;
+      }
     }
-    isFirstStep() {
-        if (this.state.active) {
-            return this.state.members.filter((m) => m.visible)[0]?.uid === this.state.active;
-        }
-        return false;
+
+    .o-datepicker-input {
+      input:read-only {
+        ${cursor('pointer')}
+      }
     }
-    isLastStep() {
-        if (this.state.active) {
-            return this.state.members.filter((m) => m.visible && !m.disabled).slice(-1)[0]?.uid === this.state.active;
-        }
-        return false;
+
+    .o-datepicker-icon {
+      ${cursor('pointer')}
+      ${display('flex')}
+      ${alignItems('center')}
     }
-    isCurrentStepInError() {
-        if (this.state.active) {
-            const currentStep = this.getMember(this.state.active);
-            return currentStep?.error !== undefined;
-        }
-        return false;
+
+    .o-datepicker-remover {
+      ${cursor('pointer')}
+      ${color('light')}
+      ${fontFamily('Arial')}
+      ${paddingX('sm')}
+      ${userSelect('none')}
     }
-    isCurrentStepInVisibleError() {
-        if (this.state.active) {
-            const currentStep = this.getMember(this.state.active);
-            return currentStep?.touchingError !== undefined;
-        }
-        return false;
+
+    .o-toggler-icon {
+      ${cursor('pointer')}
+      ${color('primary')}
     }
-    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-    *done() {
-        yield this.setSubmitting(true);
-        if (this.state.onDone) {
-            yield this.state.onDone();
-        }
-        yield this.setSubmitting(false);
-    }
-    next() {
-        if (this.isCurrentStepInError()) {
-            const currentStep = this.getCurrentStep();
-            if (currentStep) {
-                this.touched(currentStep.uid);
-            }
-        }
-        else {
-            let result = true;
-            if (this.state.onNext) {
-                result = this.state.onNext(this.getCurrentStep(), this.getNextStep());
-            }
-            if (result) {
-                this.activateNext();
-            }
-        }
-    }
-    previous() {
-        let result = true;
-        if (this.state.onPrevious) {
-            result = this.state.onPrevious(this.getCurrentStep(), this.getPreviousStep());
-        }
-        if (result) {
-            this.activatePrevious();
-        }
-    }
-    setSubmitting(submitting) {
-        this.state.submitting = submitting;
-    }
-};
-__decorate([
-    reducer,
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], WizardService.prototype, "activateNext", null);
-__decorate([
-    reducer,
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], WizardService.prototype, "activatePrevious", null);
-__decorate([
-    saga(SagaEffect.Leading)
-    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-    ,
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], WizardService.prototype, "done", null);
-__decorate([
-    reducer,
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], WizardService.prototype, "next", null);
-__decorate([
-    reducer,
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], WizardService.prototype, "previous", null);
-__decorate([
-    reducer,
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Boolean]),
-    __metadata("design:returntype", void 0)
-], WizardService.prototype, "setSubmitting", null);
-WizardService = __decorate([
-    service
-], WizardService);
-
-const useWizardController = ({ animate = 300, forwardOnly = true, onCancel, onDone, onNext, onPrevious, }) => {
-    const [_, service] = useService(WizardService, {
-        members: [],
-        membersIndex: {},
-        animate,
-        forwardOnly,
-        onCancel,
-        onDone,
-        onNext,
-        onPrevious,
-    });
-    return service;
-};
 
-const UncontrolledWizardComponent = (props) => {
-    const controller = useWizardController(props);
-    return jsxRuntimeExports.jsx(ControlledWizardComponent, { ...props, controller: controller });
-};
+    .o-time-selector-part-icon-disabled {
+      .o-toggler-icon {
+        ${cursor('not-allowed')}
+        ${color('light')}
+      }
+    }
 
-const WizardComponent = (props) => {
-    if (props.controller) {
-        return jsxRuntimeExports.jsx(ControlledWizardComponent, { ...props, controller: props.controller });
+    .o-time-container {
+      ${marginLeft('3xl')}
+      ${display('flex')}
+      ${alignItems('center')}
+      ${height('full')}
+      .o-time-separator {
+        ${marginX('lg')}
+      }
     }
-    else {
-        return jsxRuntimeExports.jsx(UncontrolledWizardComponent, { ...props });
+
+    .o-time-selector-part-header {
+      ${fontWeight('medium')}
+      ${backgroundColor('lightest')}
+      ${paddingX('sm')}
+      ${whiteSpace('nowrap')}
     }
-};
 
-const wizardStyle = ({ layout = 'vertical', theme, inModal }) => {
-    const t = theme.wizard;
-    const stepBorderWidthFn = layout === 'horizontal' ? borderBottomWidth : borderLeftWidth;
-    const stepBorderStyleFn = layout === 'horizontal' ? borderBottomStyle : borderLeftStyle;
-    const stepBorderColorFn = layout === 'horizontal' ? borderBottomColor : borderLeftColor;
-    const wizardBorderWidthFn = layout === 'horizontal' ? borderBottomWidth : borderRightWidth;
-    const wizardBorderStyleFn = layout === 'horizontal' ? borderBottomStyle : borderRightStyle;
-    const wizardBorderColorFn = layout === 'horizontal' ? borderBottomColor : borderRightColor;
-    return css `
-    ${display('flex')}
-    ${flexDirection(layout === 'horizontal' ? 'column' : 'row')}
-    .o-wizard-step-panel {
+    .o-time-selector {
       ${display('flex')}
-      ${flexDirection(layout === 'horizontal' ? 'row' : 'column')}
-      ${alignItems(layout === 'horizontal' ? 'flex-end' : 'stretch')}
-      ${wizardBorderStyleFn(inModal ? t.modalStepsBorderStyle : t.stepsBorderStyle)}
-      ${wizardBorderWidthFn(inModal ? t.modalStepsBorderWidth : t.stepsBorderWidth)}
-      ${wizardBorderColorFn(inModal ? t.modalStepsBorderColor : t.stepsBorderColor)}
-      ${paddingRight(t.stepsPaddingRight)}
-      ${paddingTop(t.stepsPaddingTop)}
-      ${paddingLeft(t.stepsPaddingLeft)}
-      ${paddingBottom(t.stepsPaddingBottom)}
-      ${backgroundColor(inModal ? t.modalStepsBgColor : t.stepsBgColor)}
+      ${alignItems('center')}
     }
 
-    .o-step {
-      ${paddingRight(t.paddingRight)}
-      ${paddingTop(t.paddingTop)}
-      ${paddingLeft(t.paddingLeft)}
-      ${paddingBottom(t.paddingBottom)}
-      ${stepBorderStyleFn(t.borderStyle)}
-      ${stepBorderWidthFn(t.borderWidth)}
-      ${stepBorderColorFn(t.borderColor)}
-      ${fontWeight(t.fontWeight)}
-      ${fontSize(t.fontSize)}
-      ${color(t.fontColor)}
+    .o-time-edge-title {
+      ${fontWeight('bold')}
+      ${marginBottom('xs')}
+      ${borderBottomWidth('1px')}
+      ${borderBottomColor('lighter')}
+      ${borderBottomStyle('solid')}
+      ${textTransform('uppercase')}
+      ${color('primary')}
     }
 
-    .o-step-active {
-      ${stepBorderColorFn(t.activeBorderColor)}
-      ${color(t.activeFontColor)}
-      ${fontWeight(t.activeFontWeight)}
-      ${fontSize(t.activeFontSize)}
-      ${backgroundColor(t.activeBgColor)}
-      &.o-step-enabled {
-        ${cursor('default')}
-      }
+    .o-time-edge-empty {
+      ${color('dark')}
+      ${fontStyle('italic')}
+      ${marginTop('md')}
+    }
 
-      &.o-step-warning {
-        ${stepBorderColorFn(t.warningBorderColor)}
-        ${color(t.warningFontColor)}
-        ${backgroundColor(t.warningBgColor)}
-      }
-      &.o-step-error {
-        ${stepBorderColorFn(t.errorBorderColor)}
-        ${color(t.errorFontColor)}
-        ${backgroundColor(t.errorBgColor)}
-      }
+    .o-time-edge-date-container {
+      ${width('150px')}
     }
 
-    .o-step-inactive {
-      &.o-step-success,
-      &.o-step-touched {
-        ${stepBorderColorFn(t.successBorderColor)}
-        ${color(t.successFontColor)}
-      }
-      &.o-step-warning {
-        ${stepBorderColorFn(t.warningBorderColor)}
-        ${color(t.warningFontColor)}
-      }
-      &.o-step-error {
-        ${stepBorderColorFn(t.errorBorderColor)}
-        ${color(t.errorFontColor)}
+    .o-time-edge-date {
+      ${fontWeight('medium')}
+      ${backgroundColor('lightest')}
+      ${paddingX('sm')}
+      ${marginRight('md')}
+      ${whiteSpace('nowrap')}
+    }
+
+    .o-time-container-range {
+      ${marginLeft('3xl')}
+      ${display('flex')}
+      ${justifyContent('center')}
+      ${height('full')}
+      ${flexDirection('column')}
+      ${gap('xl')}
+      .o-time-separator {
+        ${marginX('sm')}
       }
     }
 
-    .o-step-enabled {
-      ${cursor(t.cursor)}
+    .o-time-edge-content {
+      ${display('flex')}
+      ${alignItems('center')}
     }
 
-    .o-step-disabled,
-    .o-step-untouched {
-      ${cursor('default')}
-      ${stepBorderColorFn(t.disabledBorderColor)}
-      ${color(t.disabledFontColor)}
-      ${fontWeight(t.disabledFontWeight)}
-      ${fontSize(t.disabledFontSize)}
-      ${backgroundColor(t.disabledBgColor)}
+    .o-time-separator {
+      ${fontWeight('bold')}
     }
 
-    .o-step-disabled {
-      ${cursor('not-allowed')}
-      ${textDecoration('line-through')}
+    .o-time-input {
+      ${width(10)}
+      .o-input-field {
+        ${textAlign('center')}
+      }
     }
 
-    .o-wizard-content-panel {
+    .o-time-selector-part {
       ${display('flex')}
       ${flexDirection('column')}
+      ${alignItems('center')}
     }
 
-    .o-wizard-content {
-      ${flexGrow(1)}
-      ${padding('lg')}
-      ${paddingBottom(0)}
-      ${paddingRight('3xl')}
+    .o-time-selector-part-large.o-toggler-icon-container {
+      ${marginY('md')}
     }
 
-    .o-wizard-control {
-      ${display('flex')}
-      ${justifyContent('flex-end')}
-      ${padding('lg')}
+    .o-quick-time-range-container {
+      ${paddingRight('2xl')}
+      ${marginTop('2xl')}
+      ${marginX('md')}
     }
 
-    .o-wizard-control-button {
-      ${marginLeft('sm')}
-    }
-
-    .o-wizard-title {
-      ${fontSize('2xl')}
-      ${fontWeight('light')}
-      ${color('black')}
-      ${lineHeight('4xl')}
-      ${paddingBottom('md')}
+    .o-quick-time-range-title {
+      ${fontWeight('bold')}
     }
 
-    .o-step-content-title {
-      ${fontSize('2xl')}
-      ${fontWeight('light')}
-      ${color('black')}
-      ${lineHeight('4xl')}
-      ${paddingBottom('md')}
+    .o-quick-time-range {
+      ${cursor('pointer')}
+      ${fontWeight('medium')}
+      ${color('primary')}
+      &.o-quick-time-range-selected {
+        ${cursor('auto')}
+        ${fontWeight('bold')}
+        ${color('pink')}
+      }
     }
   `;
 };
-const wizardModalStyle = () => {
-    return css ``;
+
+const months = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+];
+const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+const isValidDate = (value) => {
+    if (!value)
+        return false;
+    return /^(?:(?:31(\/|-|\.)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(\/|-|\.)(?:0?[13-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{4})$|^(?:29(\/|-|\.)0?2\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/|-|\.)(?:(?:0?[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)?\d{4})$/.test(value);
 };
-const wizardSummaryStyle = () => {
-    return css `
-    .o-accordion-panel {
-      ${paddingBottom('md')}
-    }
-    .o-accordion-panel-title {
-      ${backgroundColor('lighter')}
-    }
-    .o-accordion-content {
-      ${paddingX('sm')}
-      ${paddingBottom('sm')}
-    }
-  `;
+const isValidTime = (value) => {
+    if (!value)
+        return false;
+    return /^(2[0-3]|[0-1][0-9]):([0-5][0-9]):([0-5][0-9])$/.test(value);
 };
-
-const Wizard = styled(WizardComponent) `
-  ${wizardStyle}
-`;
-
-const WizardModalComponent = ({ title, doneLabel = 'Submit', ...props }) => {
-    return (jsxRuntimeExports.jsx(Modal, { ...props, children: jsxRuntimeExports.jsx(Wizard, { ...props, title: title, doneLabel: doneLabel, inModal: true }) }));
+const isValidMinuteOrSecond = (value) => {
+    if (!value)
+        return false;
+    return /^(0?|[1-5])[0-9]$/.test(value);
+};
+const isValidHour = (value) => {
+    if (!value)
+        return false;
+    return /^(2[0-3]|0?[0-9]|1[0-9])$/.test(value);
 };
 
-const WizardModal = styled(WizardModalComponent) `
-  ${wizardModalStyle}
+const IconComponent$1 = ({ className, onClick }) => {
+    return (jsxRuntimeExports.jsx("div", { className: className, onClick: onClick, children: jsxRuntimeExports.jsxs("svg", { className: "o-icon-calendar-svg", viewBox: "0 0 512 512", children: [jsxRuntimeExports.jsx("rect", { x: "48", y: "80", width: "416", height: "384", rx: "48", fill: "none", stroke: "currentColor", strokeLinejoin: "round", strokeWidth: "32" }), jsxRuntimeExports.jsx("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "32", d: "M128 48v32M384 48v32M464 160H48M304 260l43.42-32H352v168M191.87 306.63c9.11 0 25.79-4.28 36.72-15.47a37.9 37.9 0 0011.13-27.26c0-26.12-22.59-39.9-47.89-39.9-21.4 0-33.52 11.61-37.85 18.93M149 374.16c4.88 8.27 19.71 25.84 43.88 25.84 28.59 0 52.12-15.94 52.12-43.82 0-12.62-3.66-24-11.58-32.07-12.36-12.64-31.25-17.48-41.55-17.48" })] }) }));
+};
+var CalendarIcon = styled(IconComponent$1) `
+  ${({ width, height, color: cssColor = 'inherit', marginLeft: ml = '0', marginRight: mr = '0' }) => css `
+    width: ${width};
+    height: ${height};
+    ${marginLeft(ml)}
+    ${marginRight(mr)}
+    ${display('flex')};
+    ${alignItems('center')};
+    ${color(cssColor)}
+    .o-icon-calendar-svg {
+      display: inline-block;
+      stroke-width: 0;
+      stroke: currentColor;
+      fill: currentColor;
+    }
+  `}
 `;
 
-const useStep = (props) => {
-    const service = useWizardService();
-    const state = useWizardState();
-    const step = state.members[state.membersIndex[props.uid]];
-    useEffect(() => {
-        if (step === undefined) {
-            service.initMember(Object.assign({ uid: props.uid }, props));
-        }
-    }, [props, service, step]);
-    return step;
+const DefaultDatePickerContext = React.createContext(null);
+const useDatePickerContext = () => {
+    return useContext(DefaultDatePickerContext);
 };
 
-const WizardSummaryComponent = ({ className }) => {
-    const form = useForm();
-    const tree = Object.values(form.getDisplayerTree());
-    return (jsxRuntimeExports.jsx(Accordion, { className: className, children: tree.map((field, index) => {
-            const Displayer = field.Displayer || DefaultDisplayer;
-            return (createElement(Displayer, { ...field, index: index, key: `field-${index}`, first: index === 0, last: index === tree.length - 1, format: "form_summary" }));
-        }) }));
+const dateToString = (d) => {
+    if (typeof d === 'function') {
+        d = d();
+    }
+    if (typeof d === 'string') {
+        d = new Date(d);
+    }
+    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')} ${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}:${String(d.getSeconds()).padStart(2, '0')}`;
 };
-
-const WizardSummary = styled(WizardSummaryComponent) `
-  ${wizardSummaryStyle}
-`;
-
-const Step = ({ title, active = false, disabled = false, visible = true, closable = false, children, icon, uid, optional = false, showTitle = true, className, onTouch, help, }) => {
-    const { animate, forwardOnly } = useWizardState();
-    const stepRef = useRef(null);
-    const step = useStep({
-        title,
-        active,
-        disabled,
-        visible,
-        closable,
-        icon,
-        loading: false,
-        optional,
-        touched: !forwardOnly,
-        touching: !forwardOnly,
-        uid: uid === undefined ? title : uid,
-    });
-    const touched = step?.touched;
-    const onEnter = () => {
-        const node = stepRef.current;
-        if (!node)
-            return;
-        node.style.opacity = '0';
-    };
-    const onEntering = () => {
-        const node = stepRef.current;
-        if (!node)
-            return;
-        setTimeout(() => {
-            node.style.opacity = '1';
-            node.style.transition = `opacity ${animate}ms ease-in-out`;
-        }, 0);
-    };
-    useEffect(() => {
-        if (touched && onTouch) {
-            onTouch();
-        }
-    }, [touched, onTouch]);
-    if (!step || !step.active) {
+const toDateRange = (value, label) => {
+    if (value) {
+        const [from, to] = value.trim().split(/ to\s*/);
+        return {
+            from: from && from.trim() ? from.trim() : null,
+            to: to && to.trim() ? to.trim() : null,
+            label,
+        };
+    }
+    else {
         return null;
     }
-    return (jsxRuntimeExports.jsx(CSSTransition, { in: true, nodeRef: stepRef, timeout: animate, appear: true, onEnter: onEnter, onEntering: onEntering, children: jsxRuntimeExports.jsxs("div", { ref: stepRef, className: addClassname('o-step-content', className), children: [showTitle && jsxRuntimeExports.jsx("div", { className: "o-step-content-title", children: title }), help && (jsxRuntimeExports.jsx(Alert, { kind: "info", marginBottom: "lg", children: help })), children] }) }));
 };
-
-const FormStep = ({ name, disabled = false, visible = true, ...stepProps }) => {
-    const decorator = useFormDecorator(name, {
-        Displayer: (displayerProps) => {
-            const total = Object.values(displayerProps.children ?? {}).length;
-            return (jsxRuntimeExports.jsx(AccordionPanel, { title: stepProps.title, initialActive: displayerProps.index === 0, initialExpand: displayerProps.index === 0, children: Object.values(displayerProps.children ?? {}).map((field, index) => {
-                    const Displayer = field.Displayer ?? DefaultDisplayer;
-                    return (createElement(Displayer, { ...field, index: index, key: `field-${index}`, first: index === 0, last: index === total - 1, format: displayerProps.format }));
-                }) }));
-        },
-    });
-    const metadata = useFormMetadata(decorator.name);
-    const service = useWizardService();
-    const fieldContainer = useFieldContainer({
-        container: name,
-        onValidationChange: (touchedValidation, allValidation) => {
-            service.onValidationChange(name, touchedValidation, allValidation);
-        },
-    });
-    const { touchAllFields, hide, show, disable, enable } = fieldContainer;
-    const initializedRef = useRef(false);
-    useEffect(() => {
-        const visible = metadata.visible ?? true;
-        const disabled = metadata.disabled ?? false;
-        if (!visible) {
-            if (disabled) {
-                service.disable(name);
-                disable();
-            }
-            else {
-                service.enable(name);
-                if (initializedRef.current === true) {
-                    // we only use the enable method if this is a change and not a initialization
-                    enable();
-                }
+const qr = (quickRange) => {
+    return {
+        label: quickRange,
+        from: () => {
+            const d = new Date();
+            switch (quickRange) {
+                case 'Last hour':
+                    d.setHours(d.getHours() - 1);
+                    break;
+                case 'Last day':
+                    d.setDate(d.getDate() - 1);
+                    break;
+                case 'Last week':
+                    d.setDate(d.getDate() - 7);
+                    break;
+                case 'Last month':
+                    d.setMonth(d.getMonth() - 1);
+                    break;
+                case 'Last year':
+                    d.setFullYear(d.getFullYear() - 1);
+                    break;
             }
-            service.hide(name);
-            hide();
+            return d;
+        },
+        to: () => new Date(),
+    };
+};
+const defaultQuickRanges = () => {
+    return ['Last hour', 'Last day', 'Last week', 'Last month', 'Last year'].reduce((accumulator, label) => {
+        const quickRange = qr(label);
+        if (quickRange) {
+            accumulator[label] = quickRange;
         }
-        else {
-            service.show(name);
-            if (initializedRef.current === true) {
-                // we only use the show method if this is a change and not a initialization
-                show();
-            }
-            if (disabled) {
-                service.disable(name);
-                disable();
-            }
-            else {
-                service.enable(name);
-                if (initializedRef.current === true) {
-                    // we only use the enable method if this is a change and not a initialization
-                    enable();
-                }
-            }
-        }
-        initializedRef.current = true;
-    }, [name, metadata.visible, metadata.disabled]);
-    // useEffect(() => {
-    //   if (!visible) {
-    //     if (disabled) {
-    //       disable();
-    //     } else {
-    //       enable();
-    //     }
-    //     hide();
-    //   } else {
-    //     show();
-    //     if (disabled) {
-    //       disable();
-    //     } else {
-    //       enable();
-    //     }
-    //   }
-    // }, [visible, disabled, hide, show, disable, enable]);
-    return (jsxRuntimeExports.jsx(FormContext.Provider, { value: fieldContainer.context, children: jsxRuntimeExports.jsx(Step, { ...stepProps, uid: name, onTouch: touchAllFields }) }));
+        return accumulator;
+    }, {});
 };
-
-const sliderStyle = () => {
-    return css ``;
+const findQuickRangeLabel = (quickRanges, dateRange) => {
+    if (!quickRanges || !dateRange)
+        return;
+    const dr = typeof dateRange === 'string' ? toDateRange(dateRange) : dateRange;
+    if (dr === null)
+        return;
+    if (!dr.from || !dr.to)
+        return;
+    return Object.keys(quickRanges).find((label) => {
+        return dr.from === quickRanges[label].from && dr.to === quickRanges[label].to;
+    });
 };
-
-const SliderComponent = () => {
-    return null;
+const isSameDay = (date1, date2) => {
+    return (date1.getFullYear() === date2.getFullYear() &&
+        date1.getMonth() === date2.getMonth() &&
+        date1.getDate() === date2.getDate());
 };
 
-const Resizer = styled(SliderComponent) `
-  ${sliderStyle}
-`;
-
-const columnCount = cssProperty('column-count');
-const columnFill = cssProperty('column-fill');
-const columnRule = cssProperty('column-rule');
-const columnRuleColor = cssProperty(null, colorFormatter('column-rule-color'));
-const columnRuleStyle = cssProperty('column-rule-style');
-const columnRuleWidth = cssProperty('column-rule-width', pxFormatter);
-const columnSpan = cssProperty('column-span');
-const columnWidth = cssProperty('column-width', pxFormatter);
-const columns = cssProperty('columns');
-const grid = cssProperty('grid');
-const gridAutoColumns = cssProperty('grid-auto-columns');
-const gridAutoFlow = cssProperty('grid-auto-flow');
-const gridAutoRows = cssProperty('grid-auto-rows');
-const gridColumn = cssProperty('grid-column');
-const gridColumnEnd = cssProperty('grid-column-start');
-const gridColumnGap = columnGap;
-const gridColumnStart = cssProperty('grid-column-start');
-const gridGap = gap;
-const gridRow = cssProperty('grid-row');
-const gridRowEnd = cssProperty('grid-row-end');
-const gridRowGap = rowGap;
-const gridRowStart = cssProperty('grid-row-start');
-const gridTemplate = cssProperty('grid-template');
-const gridTemplateAreas = cssProperty('grid-template-areas');
-const gridTemplateColumns = cssProperty('grid-template-columns');
-const gridTemplateRows = cssProperty('grid-template-rows');
-
-const datePickerStyle = () => {
-    return css `
-    .o-calendar {
-      ${width('300px')}
-    }
-    .o-calendar-month {
-      ${display('flex')}
-      ${alignItems('center')}
-      ${marginBottom('md')}
-      ${columnGap('sm')}
-    }
-
-    .o-calendar-select-month {
-      ${width(24)}
-    }
-
-    .o-calendar-select-year {
-      ${width(12)}
+const isCurrent = (d, year, month, day) => {
+    return d.getFullYear() === year && d.getMonth() === month && d.getDate() === day;
+};
+const isActive = (date) => {
+    return date.year !== undefined && date.month !== undefined && date.year !== undefined;
+};
+const inRange = (year, month, day, from, to) => {
+    let fromDate;
+    if (from.year !== undefined && from.month !== undefined && from.day !== undefined) {
+        fromDate = new Date(`${from.year}-${from.month.padStart(2, '0')}-${String(from.day).padStart(2, '0')}`);
     }
-
-    .o-calendar-day-container {
-      ${display('grid')}
-      ${color('light')}
-      ${gridTemplateColumns('repeat(7, 1fr)')}
-      grid-template-rows: repeat(7, min(30px));
-      ${rowGap('5px')}
-      ${columnGap('5px')}
+    else {
+        return false;
     }
-    .o-calendar-day-title {
-      ${display('flex')}
-      ${alignItems('center')}
-      ${justifyContent('center')}
-      ${color('dark')}
+    let toDate;
+    if (to.year !== undefined && to.month !== undefined && to.day !== undefined) {
+        toDate = new Date(`${to.year}-${to.month.padStart(2, '0')}-${String(to.day).padStart(2, '0')}`);
     }
-    .o-calendar-day {
-      ${display('flex')}
-      ${alignItems('center')}
-      ${justifyContent('center')}
-      ${cursor('pointer')}
-      ${borderRadius('md')}
-
-      &:hover {
-        ${backgroundColor('darkest')}
-        ${color('white')}
-      }
+    else {
+        return false;
     }
-    .o-calendar-day-in-month {
-      ${color('darkest')}
-      ${backgroundColor('lighter')}
+    let currentDate = new Date(`${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`);
+    return (currentDate > fromDate && currentDate < toDate) || (currentDate < fromDate && currentDate > toDate);
+};
+const isInversedDate = (from, to) => {
+    if (!isActive(from) || !isActive(to)) {
+        return false;
     }
-    .o-calendar-day-current {
-      ${borderColor('darker')}
-      ${borderWidth('2px')}
-      ${borderStyle('solid')}
-      ${fontWeight('medium')}
+    const fromDate = new Date(`${from.year}-${String(from.month ?? 0 + 1).padStart(2, '0')}-${String(from.day).padStart(2, '0')}`);
+    const toDate = new Date(`${to.year}-${String(to.month ?? 0 + 1).padStart(2, '0')}-${String(to.day).padStart(2, '0')}`);
+    return fromDate > toDate;
+};
+function getMonth(candidate, defaultValue) {
+    if (typeof candidate === 'string') {
+        candidate = parseInt(candidate) - 1;
     }
-
-    .o-calendar-day-in-range {
-      ${backgroundColor('lightblue')}
-      ${borderRadius('none')}
-      ${color('white')}
+    if (candidate === undefined || isNaN(candidate) || candidate < 0 || candidate > 11) {
+        return defaultValue;
     }
-
-    .o-calendar-day-in-range-transient {
-      ${backgroundColor('dark')}
-      ${borderRadius('none')}
-      ${color('white')}
+    return candidate;
+}
+function getYear(candidate, min, max, defaultValue) {
+    if (typeof candidate === 'string') {
+        candidate = parseInt(candidate);
     }
-
-    .o-calendar-day-start-range,
-    .o-calendar-day-start-range-transient {
-      ${borderTopRightRadius('none')}
-      ${borderBottomRightRadius('none')}
+    if (candidate === undefined || isNaN(candidate) || candidate < min || candidate > max) {
+        return defaultValue;
     }
-
-    .o-calendar-day-end-range,
-    .o-calendar-day-end-range-transient {
-      ${borderTopLeftRadius('none')}
-      ${borderBottomLeftRadius('none')}
+    return candidate;
+}
+const defaultMinDate = new Date();
+defaultMinDate.setFullYear(1900);
+const defaultMaxDate = new Date();
+defaultMaxDate.setFullYear(2100);
+const CalendarComponent = ({ from, to, type, minDate = defaultMinDate, maxDate = defaultMaxDate, nextSelectEdge, className, onChange, }) => {
+    const maxYear = maxDate.getFullYear();
+    const minYear = minDate.getFullYear();
+    const years = useRef([...Array(maxYear).keys()].slice(minYear));
+    const d = new Date();
+    const lastExternalFromMonth = useRef(from['month']);
+    const lastExternalFromYear = useRef(from['year']);
+    const lastExternalToMonth = useRef(to['month']);
+    const lastExternalToYear = useRef(to['year']);
+    const fromMonth = getMonth(from['month']);
+    const fromYear = getYear(from['year'], minYear, maxYear);
+    const fromDay = from['day'] === undefined ? undefined : parseInt(`${from['day']}`);
+    const [internalTo, setInternalTo] = useState({});
+    let transientTo = false;
+    let toMonth, toYear, toDay;
+    let isInversed = false;
+    if (to.year !== undefined && to.month !== undefined && to.day !== undefined) {
+        toMonth = getMonth(to.month);
+        toYear = getYear(to.year, minYear, maxYear);
+        toDay = parseInt(`${to.day}`);
     }
-
-    .o-datepicker-dropdown-content {
-      ${borderRadius('sm')}
-      ${borderTopLeftRadius(0)}
-      ${borderTopRightRadius(0)}
-      ${boxShadow('lg')}
-      ${zIndex(2000)}
-      ${backgroundColor('white')}
-      ${borderWidth(1)}
-      ${borderColor('light')}
-      ${marginTop('-1px')}
-      ${padding('lg')}
-      ${userSelect('none')}
-      ${display('flex')}
+    else {
+        toMonth = getMonth(internalTo.month);
+        toYear = getYear(internalTo.year, minYear, maxYear);
+        toDay = parseInt(`${internalTo.day}`);
+        transientTo = true;
+        isInversed = isInversedDate(from, internalTo);
     }
-
-    .o-datepicker-active {
-      .o-calendar-day-active {
-        ${color('white')}
-        ${backgroundColor('primary')}
-        ${fontWeight('medium')}
-        &.o-calendar-day-end-range-transient {
-          ${backgroundColor('darkest')}
-          &.o-calendar-day-start-range {
-            ${backgroundColor('primary')}
-          }
-        }
-        &.o-calendar-day-start-range-transient {
-          ${backgroundColor('darkest')}
+    const [currentMonth, setCurrentMonth] = useState(getMonth(from['month'], d.getMonth()));
+    const [currentYear, setCurrentYear] = useState(getYear(from['year'], minYear, maxYear, d.getFullYear()));
+    const firstDayOfExternalFromMonth = fromMonth && fromYear ? new Date(`${fromYear}-${String(getMonth(fromMonth + 1)).padStart(2, '0')}-01`) : undefined;
+    const firstDayOfExternalToMonth = toMonth && toYear ? new Date(`${toYear}-${String(toMonth + 1).padStart(2, '0')}-01`) : undefined;
+    const firstDayOfCurrentMonth = new Date(`${currentYear}-${String(currentMonth + 1).padStart(2, '0')}-01`);
+    const lastDayOfPreviousMonth = new Date(firstDayOfCurrentMonth);
+    lastDayOfPreviousMonth.setDate(lastDayOfPreviousMonth.getDate() - 1);
+    const lastDayOfCurrentMonth = new Date(firstDayOfCurrentMonth);
+    lastDayOfCurrentMonth.setMonth(lastDayOfCurrentMonth.getMonth() + 1);
+    lastDayOfCurrentMonth.setDate(lastDayOfCurrentMonth.getDate() - 1);
+    const firstDayOfNextMonth = new Date(firstDayOfCurrentMonth);
+    firstDayOfNextMonth.setMonth(firstDayOfNextMonth.getMonth() + 1);
+    let calendarDays = firstDayOfCurrentMonth.getDate() === 0 || firstDayOfCurrentMonth.getDay() === 0
+        ? []
+        : [...Array(lastDayOfPreviousMonth.getDate() + 1).keys()].slice(-firstDayOfCurrentMonth.getDay()).map((n) => {
+            const startRange = fromDay === n &&
+                lastDayOfPreviousMonth.getMonth() === firstDayOfExternalFromMonth?.getMonth() &&
+                lastDayOfPreviousMonth.getFullYear() === firstDayOfExternalFromMonth?.getFullYear();
+            const endRange = toDay === n &&
+                lastDayOfPreviousMonth.getMonth() === firstDayOfExternalToMonth?.getMonth() &&
+                lastDayOfPreviousMonth.getFullYear() === firstDayOfExternalToMonth?.getFullYear();
+            return {
+                day: n,
+                active: startRange || endRange,
+                current: isCurrent(d, lastDayOfPreviousMonth.getFullYear(), lastDayOfPreviousMonth.getMonth(), n),
+                month: lastDayOfPreviousMonth.getMonth(),
+                year: lastDayOfPreviousMonth.getFullYear(),
+                startRange: startRange && type.range,
+                endRange: isActive(from) && endRange && type.range,
+                inRange: type.range &&
+                    inRange(lastDayOfPreviousMonth.getFullYear(), lastDayOfPreviousMonth.getMonth(), n, from, transientTo ? internalTo : to),
+            };
+        });
+    calendarDays = calendarDays.concat([...Array(lastDayOfCurrentMonth.getDate() + 1).keys()].slice(1).map((n) => {
+        const startRange = fromDay === n &&
+            lastDayOfCurrentMonth.getMonth() === firstDayOfExternalFromMonth?.getMonth() &&
+            lastDayOfCurrentMonth.getFullYear() === firstDayOfExternalFromMonth?.getFullYear();
+        const endRange = toDay === n &&
+            lastDayOfCurrentMonth.getMonth() === firstDayOfExternalToMonth?.getMonth() &&
+            lastDayOfCurrentMonth.getFullYear() === firstDayOfExternalToMonth?.getFullYear();
+        return {
+            day: n,
+            active: startRange || endRange,
+            current: isCurrent(d, lastDayOfCurrentMonth.getFullYear(), lastDayOfCurrentMonth.getMonth(), n),
+            month: lastDayOfCurrentMonth.getMonth(),
+            year: lastDayOfCurrentMonth.getFullYear(),
+            startRange: startRange && type.range,
+            endRange: isActive(from) && endRange && type.range,
+            inRange: type.range &&
+                inRange(lastDayOfCurrentMonth.getFullYear(), lastDayOfCurrentMonth.getMonth(), n, from, transientTo ? internalTo : to),
+        };
+    }));
+    calendarDays = calendarDays.concat(lastDayOfCurrentMonth.getDay() === 6
+        ? []
+        : [...Array(6 - lastDayOfCurrentMonth.getDay() + 1).keys()].slice(1).map((n) => {
+            const startRange = fromDay === n &&
+                firstDayOfNextMonth.getMonth() === firstDayOfExternalFromMonth?.getMonth() &&
+                firstDayOfNextMonth.getFullYear() === firstDayOfExternalFromMonth?.getFullYear();
+            const endRange = toDay === n &&
+                firstDayOfNextMonth.getMonth() === firstDayOfExternalToMonth?.getMonth() &&
+                firstDayOfNextMonth.getFullYear() === firstDayOfExternalToMonth?.getFullYear();
+            return {
+                day: n,
+                active: startRange || endRange,
+                current: isCurrent(d, firstDayOfNextMonth.getFullYear(), firstDayOfNextMonth.getMonth(), n),
+                month: firstDayOfNextMonth.getMonth(),
+                year: firstDayOfNextMonth.getFullYear(),
+                startRange: startRange && type.range,
+                endRange: isActive(from) && endRange && type.range,
+                inRange: type.range &&
+                    inRange(firstDayOfNextMonth.getFullYear(), firstDayOfNextMonth.getMonth(), n, from, transientTo ? internalTo : to),
+            };
+        }));
+    useEffect(() => {
+        if (type.range && to['month'] !== lastExternalToMonth.current) {
+            // the user has changed the toMonth from the input field
+            // we move the calendar to this month if it's a valid month
+            lastExternalToMonth.current = to['month'];
+            setCurrentMonth(getMonth(to['month'], currentMonth));
         }
-      }
-    }
-
-    .o-datepicker-input {
-      input:read-only {
-        ${cursor('pointer')}
-      }
-    }
-
-    .o-datepicker-icon {
-      ${cursor('pointer')}
-      ${display('flex')}
-      ${alignItems('center')}
-    }
+        if (type.range && to['year'] !== lastExternalToYear.current) {
+            // the user has changed the toYear from the input field
+            // we move the calendar to this year if it's a valid year
+            lastExternalToYear.current = to['year'];
+            setCurrentYear(getYear(to['year'], minYear, maxYear, currentYear));
+        }
+        if (from['month'] !== lastExternalFromMonth.current) {
+            // the user has changed the fromMonth from the input field
+            // we move the calendar to this month if it's a valid month
+            lastExternalFromMonth.current = from['month'];
+            setCurrentMonth(getMonth(from['month'], currentMonth));
+        }
+        if (from['year'] !== lastExternalFromYear.current) {
+            // the user has changed the fromYear from the input field
+            // we move the calendar to this year if it's a valid year
+            lastExternalFromYear.current = from['year'];
+            setCurrentYear(getYear(from['year'], minYear, maxYear, currentYear));
+        }
+    });
+    return (jsxRuntimeExports.jsxs("div", { className: addClassname('o-calendar-container', className), children: [jsxRuntimeExports.jsxs("div", { className: "o-calendar-month", children: [jsxRuntimeExports.jsx(TogglerIcon, { width: "20px", closeArrowPosition: "w", onClick: () => {
+                            if (fromMonth === 0) {
+                                setCurrentMonth(11);
+                                setCurrentYear(currentYear - 1);
+                            }
+                            else {
+                                setCurrentMonth(currentMonth - 1);
+                            }
+                        } }, "previous"), jsxRuntimeExports.jsx(Select, { dataSource: months, nullable: false, value: months[currentMonth], className: "o-calendar-select-month", size: "small", onChange: (value) => setCurrentMonth(months.indexOf(`${value}`)) }, "month"), jsxRuntimeExports.jsx(Select, { dataSource: years.current, value: currentYear, nullable: false, className: "o-calendar-select-year", size: "small", onChange: (value) => setCurrentYear(parseInt(`${value}`)) }, "year"), jsxRuntimeExports.jsx(TogglerIcon, { width: "20px", closeArrowPosition: "e", onClick: () => {
+                            if (fromMonth === 11) {
+                                setCurrentMonth(0);
+                                setCurrentYear(currentYear + 1);
+                            }
+                            else {
+                                setCurrentMonth(currentMonth + 1);
+                            }
+                        } }, "next")] }), jsxRuntimeExports.jsxs("div", { className: "o-calendar-day-container", children: [days.map((day) => (jsxRuntimeExports.jsx("div", { className: "o-calendar-day-title", children: day.substring(0, 2) }, `${day}`))), calendarDays.map((calendarDay, index) => (jsxRuntimeExports.jsx("div", { className: `o-calendar-day${calendarDay.endRange
+                            ? ` o-calendar-day-${isInversed ? 'start' : 'end'}-range${transientTo ? '-transient' : ''}`
+                            : ''}${calendarDay.startRange ? ` o-calendar-day-${isInversed ? 'end' : 'start'}-range` : ''}${calendarDay.active ? ' o-calendar-day-active' : ''}${calendarDay.inRange ? ` o-calendar-day-in-range${transientTo ? '-transient' : ''}` : ''}${calendarDay.month === currentMonth ? ' o-calendar-day-in-month' : ''}${calendarDay.current ? ' o-calendar-day-current' : ''}`, onClick: () => {
+                            const nextDateString = `${calendarDay.year}-${String(calendarDay.month + 1).padStart(2, '0')}-${String(calendarDay.day).padStart(2, '0')}`;
+                            if (type.range && from.year !== undefined && from.month !== undefined && from.day !== undefined) {
+                                // It's a date range and not the first selection
+                                // We must determine if it's a change for the from or the to
+                                const fromDateString = `${from.year}-${from.month.padStart(2, '0')}-${String(from.day).padStart(2, '0')}`;
+                                const fromDate = new Date(fromDateString);
+                                let endDate = undefined;
+                                let endDateString = undefined;
+                                if (to.year !== undefined && to.month !== undefined && to.day !== undefined) {
+                                    // it's not the second click
+                                    endDateString = `${to.year}-${to.month.padStart(2, '0')}-${String(to.day).padStart(2, '0')}`;
+                                    endDate = new Date(endDateString);
+                                }
+                                const nextDate = new Date(nextDateString);
+                                if (endDate) {
+                                    // case when we click on the same day than the fromDate
+                                    if (isSameDay(fromDate, nextDate)) {
+                                        if (nextDate <= fromDate) {
+                                            onChange(nextDateString, fromDateString);
+                                        }
+                                        else {
+                                            onChange(fromDateString, nextDateString);
+                                        }
+                                    }
+                                    // case when we click on the same day than the endDate
+                                    else if (isSameDay(endDate, nextDate)) {
+                                        if (nextDate <= endDate) {
+                                            onChange(nextDateString, endDateString);
+                                        }
+                                        else {
+                                            onChange(endDateString, nextDateString);
+                                        }
+                                    }
+                                    else if (nextDate <= fromDate) {
+                                        onChange(nextDateString, endDateString);
+                                    }
+                                    else if (nextDate >= endDate) {
+                                        onChange(fromDateString, nextDateString);
+                                    }
+                                    else if (nextSelectEdge === 'from') {
+                                        onChange(nextDateString, endDateString);
+                                    }
+                                    else {
+                                        onChange(fromDateString, nextDateString);
+                                    }
+                                }
+                                else if (nextDate <= fromDate) {
+                                    onChange(nextDateString, fromDateString);
+                                }
+                                else {
+                                    onChange(fromDateString, nextDateString);
+                                }
+                            }
+                            else {
+                                // we assume that it's not a range or the first selection of the range
+                                onChange(nextDateString);
+                            }
+                        }, onMouseEnter: () => {
+                            if (transientTo) {
+                                setInternalTo({
+                                    year: `${calendarDay.year}`,
+                                    month: String(calendarDay.month + 1).padStart(2, '0'),
+                                    day: String(calendarDay.day).padStart(2, '0'),
+                                });
+                            }
+                        }, children: calendarDay.day }, `${fromDay}-${index}`)))] })] }));
+};
 
-    .o-datepicker-remover {
-      ${cursor('pointer')}
-      ${color('light')}
-      ${fontFamily('Arial')}
-      ${paddingX('sm')}
-      ${userSelect('none')}
-    }
+const QuickTimeRangeComponent = ({ quickRanges, onChange, currentQuickRangeLabel, }) => {
+    return (jsxRuntimeExports.jsxs("div", { className: "o-quick-time-range-container", children: [jsxRuntimeExports.jsx("div", { className: "o-quick-time-range-title", children: "Quick select" }), Object.keys(quickRanges).map((quickRangeLabel, index) => {
+                return (jsxRuntimeExports.jsx("div", { className: `o-quick-time-range${currentQuickRangeLabel === quickRangeLabel ? ' o-quick-time-range-selected' : ''}`, onClick: () => onChange(quickRangeLabel), children: quickRangeLabel }, `qr-${index}`));
+            })] }));
+};
 
-    .o-toggler-icon {
-      ${cursor('pointer')}
-      ${color('primary')}
+const getNextValue = (value, max, type) => {
+    const valueInt = parseInt(`${value}`);
+    let result = 0;
+    if (type === 'next') {
+        if (isNaN(valueInt) || valueInt === max) {
+            result = 0;
+        }
+        else {
+            result = valueInt + 1;
+        }
     }
-
-    .o-time-selector-part-icon-disabled {
-      .o-toggler-icon {
-        ${cursor('not-allowed')}
-        ${color('light')}
-      }
+    else if (type === 'previous') {
+        if (isNaN(valueInt)) {
+            result = 0;
+        }
+        else if (valueInt === 0) {
+            result = max;
+        }
+        else {
+            result = valueInt - 1;
+        }
     }
-
-    .o-time-container {
-      ${marginLeft('xl')}
-      .o-time-separator {
-        ${marginX('lg')}
-      }
-    }
-
-    .o-time-selector {
-      ${display('flex')}
-      ${alignItems('center')}
+    return String(result).padStart(2, '0');
+};
+const isMin = (value, _type) => {
+    return parseInt(`${value}`) === 0;
+};
+const isMax = (value, type) => {
+    return type === 'hour' ? parseInt(`${value}`) === 23 : parseInt(`${value}`) === 59;
+};
+const headerValue = (type) => {
+    switch (type) {
+        case 'hour':
+            return 'HH';
+        case 'minute':
+            return 'MM';
+        case 'second':
+            return 'SS';
+        default:
+            return '';
     }
+};
+const TimeSelectorPartComponent = ({ onChange, type, value, size = 'large', displayHeaders = false, }) => {
+    const onValueChange = (e) => {
+        let value = e.target.value;
+        if (type === 'minute' && (value === '' || isValidMinuteOrSecond(value))) {
+            onChange(value);
+        }
+        else if (type === 'second' && (value === '' || isValidMinuteOrSecond(value))) {
+            onChange(value);
+        }
+        else if (type === 'hour' && (value === '' || isValidHour(value))) {
+            onChange(value);
+        }
+    };
+    return (jsxRuntimeExports.jsxs("div", { className: `o-time-selector-part o-time-selector-part-${size} o-time-${type}`, children: [displayHeaders && jsxRuntimeExports.jsx("div", { className: "o-time-selector-part-header", children: headerValue(type) }), jsxRuntimeExports.jsx(TogglerIcon, { className: isMin(value) ? 'o-time-selector-part-icon-disabled' : undefined, width: "20px", closeArrowPosition: "n", onClick: () => {
+                    if (!isMin(value)) {
+                        onChange(getNextValue(value, type === 'hour' ? 23 : 59, 'previous'));
+                    }
+                } }, "previous"), jsxRuntimeExports.jsx(Input, { className: "o-time-input", value: value, size: size, selectOnFocus: true, onChange: onValueChange }, "value"), jsxRuntimeExports.jsx(TogglerIcon, { className: isMax(value, type) ? 'o-time-selector-part-icon-disabled' : undefined, width: "20px", closeArrowPosition: "s", onClick: () => {
+                    if (!isMax(value, type)) {
+                        onChange(getNextValue(value, type === 'hour' ? 23 : 59, 'next'));
+                    }
+                } }, "next")] }));
+};
 
-    .o-time-edge-title {
-      ${fontWeight('bold')}
-      ${marginBottom('xs')}
-      ${borderBottomWidth('1px')}
-      ${borderBottomColor('lighter')}
-      ${borderBottomStyle('solid')}
-      ${textTransform('uppercase')}
-      ${color('primary')}
+const getValue = (candidate, max, defaultValue) => {
+    if (typeof candidate === 'string') {
+        candidate = parseInt(candidate);
     }
-
-    .o-time-edge-empty {
-      ${color('dark')}
-      ${fontStyle('italic')}
-      ${marginTop('md')}
+    if (candidate === undefined || isNaN(candidate) || candidate < 0 || candidate > max) {
+        return defaultValue;
     }
+    return candidate;
+};
+const TimeSelectorComponent = ({ value, onChange, size, edge, displayHours, displayMinutes, displaySeconds, displayHeaders, }) => {
+    const d = new Date();
+    const hourInt = getValue(value.hour, 23, displayHours ? d.getHours() : 0);
+    const minuteInt = getValue(value.minute, 59, displayMinutes ? d.getMinutes() : 0);
+    const secondInt = getValue(value.second, 59, displaySeconds ? d.getSeconds() : 0);
+    const [internalHour, setInternalHour] = useState(String(hourInt).padStart(2, '0'));
+    const [internalMinute, setInternalMinute] = useState(String(minuteInt).padStart(2, '0'));
+    const [internalSecond, setInternalSecond] = useState(String(secondInt).padStart(2, '0'));
+    const hour = internalHour === '' ? '' : parseInt(internalHour) === hourInt ? internalHour : hourInt;
+    const minute = internalMinute === '' ? '' : parseInt(internalMinute) === minuteInt ? internalMinute : minuteInt;
+    const second = internalSecond === '' ? '' : parseInt(internalSecond) === secondInt ? internalSecond : secondInt;
+    const onChangeHour = useCallback((value) => {
+        setInternalHour(value);
+        if (value !== '') {
+            onChange(`${String(value || 0).padStart(2, '0')}:${String(minute || 0).padStart(2, '0')}:${String(second || 0).padStart(2, '0')}`, edge);
+        }
+    }, [minute, second, onChange]);
+    const onChangeMinute = useCallback((value) => {
+        setInternalMinute(value);
+        if (value !== '') {
+            onChange(`${String(hour || 0).padStart(2, '0')}:${String(value || 0).padStart(2, '0')}:${String(second || 0).padStart(2, '0')}`, edge);
+        }
+    }, [hour, second, onChange]);
+    const onChangeSecond = useCallback((value) => {
+        setInternalSecond(value);
+        if (value !== '') {
+            onChange(`${String(hour || 0).padStart(2, '0')}:${String(minute || 0).padStart(2, '0')}:${String(value || 0).padStart(2, '0')}`, edge);
+        }
+    }, [hour, minute, onChange]);
+    return (jsxRuntimeExports.jsxs("div", { className: "o-time-selector", children: [displayHours && (jsxRuntimeExports.jsx(TimeSelectorPartComponent, { type: "hour", value: hour, onChange: onChangeHour, size: size, displayHeaders: displayHeaders }, "hour")), displayHours && (displayMinutes || displaySeconds) && (jsxRuntimeExports.jsx("span", { className: "o-time-separator", children: ":" }, "sep1")), displayMinutes && (jsxRuntimeExports.jsx(TimeSelectorPartComponent, { type: "minute", value: minute, onChange: onChangeMinute, size: size, displayHeaders: displayHeaders }, "minute")), displaySeconds && (displayHours || displayMinutes) && (jsxRuntimeExports.jsx("span", { className: "o-time-separator", children: ":" }, "sep2")), displaySeconds && (jsxRuntimeExports.jsx(TimeSelectorPartComponent, { type: "second", value: second, onChange: onChangeSecond, size: size, displayHeaders: displayHeaders }, "second"))] }));
+};
 
-    .o-time-edge-date-container {
-      ${width('150px')}
+const TimeRangeComponent = ({ edge, onChange, value, displayHours, displayMinutes, displaySeconds, displayHeaders, }) => {
+    const valid = isValidDate(`${value.day}-${value.month}-${value.year}`);
+    let d;
+    if (valid) {
+        d = new Date(`${value.year}-${value.month}-${value.day}`);
     }
+    const label = edge === 'to' ? 'an end' : 'a start';
+    return (jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsx("div", { className: "o-time-edge-title", children: ucfirst(edge) }, "title"), !valid && (jsxRuntimeExports.jsxs("div", { className: "o-time-edge-empty", children: ["Please select ", label, " date for the period"] }, "empty")), valid && d && (jsxRuntimeExports.jsxs("div", { className: "o-time-edge-content", children: [jsxRuntimeExports.jsx("div", { className: "o-time-edge-date-container", children: jsxRuntimeExports.jsx("span", { className: "o-time-edge-date", children: d.toUTCString().split(' ', 4).join(' ') }) }, "date"), jsxRuntimeExports.jsx(TimeSelectorComponent, { value: value, onChange: onChange, size: "small", edge: edge, displayHours: displayHours, displayMinutes: displayMinutes, displaySeconds: displaySeconds, displayHeaders: displayHeaders }, "selector")] }, "content"))] }));
+};
 
-    .o-time-edge-date {
-      ${fontWeight('medium')}
-      ${backgroundColor('lightest')}
-      ${paddingX('sm')}
-      ${marginRight('md')}
-      ${whiteSpace('nowrap')}
+const TimeComponent = ({ from, to, type, className, onChange, displayHours, displayMinutes, displaySeconds, }) => {
+    if (type['range'] && type['date']) {
+        return (jsxRuntimeExports.jsxs("div", { className: addClassname('o-time-container-range', className), children: [jsxRuntimeExports.jsx(TimeRangeComponent, { type: type, value: from, edge: "from", onChange: onChange, displayHours: displayHours, displayMinutes: displayMinutes, displaySeconds: displaySeconds, displayHeaders: false }), jsxRuntimeExports.jsx(TimeRangeComponent, { type: type, value: to, edge: "to", onChange: onChange, displayHours: displayHours, displayMinutes: displayMinutes, displaySeconds: displaySeconds, displayHeaders: false })] }));
     }
+    return (jsxRuntimeExports.jsx("div", { className: addClassname('o-time-container', className), children: jsxRuntimeExports.jsx(TimeSelectorComponent, { value: from, onChange: onChange, size: "large", edge: "from", displayHours: displayHours, displayMinutes: displayMinutes, displaySeconds: displaySeconds, displayHeaders: true }, "selector") }));
+};
 
-    .o-time-container-range {
-      ${marginLeft('3xl')}
-      ${marginTop('2xl')}
-      ${display('flex')}
-      ${flexDirection('column')}
-      ${gap('xl')}
-      .o-time-separator {
-        ${marginX('sm')}
-      }
+const IconComponent = () => {
+    const { nullable, setOpen, onChange, open } = useDatePickerContext();
+    return (jsxRuntimeExports.jsxs("span", { className: "o-datepicker-icon", children: [nullable && (jsxRuntimeExports.jsx("div", { className: "o-datepicker-remover", onClick: () => {
+                    onChange(null);
+                    setOpen(false);
+                }, children: "\u2716" })), jsxRuntimeExports.jsx(CalendarIcon, { width: "20px", height: "20px", color: "primary", marginRight: "sm", onClick: () => setOpen(!open) })] }));
+};
+const parseDate = (value) => {
+    let date, time, year, month, day, hour, minute, second = undefined;
+    if (value) {
+        [date, time] = value.trim().split(' ');
+        [year, month, day] = date ? date.split('-') : [undefined, undefined, undefined];
+        [hour, minute, second] = time ? time.split(':') : [undefined, undefined, undefined];
     }
-
-    .o-time-edge-content {
-      ${display('flex')}
-      ${alignItems('center')}
+    return { date, time, year, month, day, hour, minute, second };
+};
+const isValidValue = (value, type) => {
+    const isValidDate = (value) => {
+        const d = new Date(value);
+        return !isNaN(d);
+    };
+    if (!value)
+        return true;
+    if (type.range) {
+        const [from, to] = value.split(' to ');
+        if (!from || !to)
+            return false;
+        return isValidDate(from) && isValidDate(to);
     }
-
-    .o-time-separator {
-      ${fontWeight('bold')}
+    else {
+        return isValidDate(value);
     }
-
-    .o-time-input {
-      ${width(10)}
-      .o-input-field {
-        ${textAlign('center')}
-      }
+};
+const isSameDate = (d1, d2, type) => {
+    const isSameDate = (d1, d2) => {
+        if (!d1 && !d2)
+            return true;
+        if (!d1 || !d2)
+            return false;
+        const date1 = new Date(`${d1}`);
+        const date2 = new Date(`${d2}`);
+        if (isNaN(date1) || isNaN(date2)) {
+            return false;
+        }
+        return date1.toString() === date2.toString();
+    };
+    if (d1 === null && d2 === null)
+        return true;
+    if (!d1 || !d2)
+        return false;
+    if (type.range) {
+        const [from1, to1] = d1.split(' to ');
+        const [from2, to2] = d2.split(' to ');
+        return isSameDate(from1, from2) && isSameDate(to1, to2);
     }
-
-    .o-time-selector-part {
-      ${display('flex')}
-      ${flexDirection('column')}
-      ${alignItems('center')}
+    else {
+        return isSameDate(d1, d2);
     }
-
-    .o-time-selector-part-large.o-toggler-icon-container {
-      ${marginY('md')}
+};
+const formatDate = (type, fromDate, fromTime, toDate, toTime) => {
+    const format = (date, time) => {
+        let result = '';
+        if (type.date) {
+            result += `${date || ''}`;
+        }
+        if (type.time) {
+            if (type.date && date) {
+                result += ` ${time || '00:00:00'}`;
+            }
+            else if (type.date && time) {
+                result += ` ${time}`;
+            }
+            else if (time) {
+                result += time;
+            }
+        }
+        return result;
+    };
+    let result = format(fromDate, fromTime);
+    if (type.range) {
+        result += ` to ${format(toDate, toTime)}`;
     }
-
-    .o-quick-time-range-container {
-      ${paddingRight('2xl')}
-      ${marginTop('2xl')}
-      ${marginX('md')}
+    return result;
+};
+const PickerComponent = ({ animationMs = 100, attachDropdownToBody = true, autoFocus, className, closeOnQuickSelect = true, combo = false, disabled, dropdownWidthModifier = 'min', label, nullable = false, onBlur: forwardBlur, onChange: forwardChange, onFocus: forwardFocus, openOnFocus = false, placeholder, placement = 'bottom-start', quickRanges, type, displayHours = true, displayMinutes = true, displaySeconds = true, value: externalValue, }) => {
+    const containerRef = useRef(null);
+    const stateRef = useRef({});
+    const dropdownRef = useRef(null);
+    const lastExternalValueRef = useRef(undefined);
+    const currentValueRef = useRef(null);
+    const [open, setOpen] = useState(false);
+    const [focus, setFocus] = useState(false);
+    const [Dropdown, triggerRef] = useDropdown();
+    const [internalValue, setInternalValue] = useState(null);
+    let value = internalValue ? internalValue : externalValue;
+    if (currentValueRef.current !== value && isSameDate(currentValueRef.current, value, type)) {
+        value = currentValueRef.current;
     }
-
-    .o-quick-time-range-title {
-      ${fontWeight('bold')}
+    const [fromString, toString] = value ? value.split(/ to\s*/) : [];
+    const validFromRef = useRef(undefined);
+    const validToRef = useRef(undefined);
+    if (!fromString || /\s*/.test(fromString)) {
+        validFromRef.current = undefined;
     }
-
-    .o-quick-time-range {
-      ${cursor('pointer')}
-      ${fontWeight('medium')}
-      ${color('primary')}
-      &.o-quick-time-range-selected {
-        ${cursor('auto')}
-        ${fontWeight('bold')}
-        ${color('pink')}
-      }
+    if (!toString || /\s*/.test(toString)) {
+        validToRef.current = undefined;
     }
-  `;
-};
-
-const months = [
-    'January',
-    'February',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December',
-];
-const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
-const isValidDate = (value) => {
-    if (!value)
-        return false;
-    return /^(?:(?:31(\/|-|\.)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(\/|-|\.)(?:0?[13-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{4})$|^(?:29(\/|-|\.)0?2\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/|-|\.)(?:(?:0?[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)?\d{4})$/.test(value);
-};
-const isValidTime = (value) => {
-    if (!value)
-        return false;
-    return /^(2[0-3]|[0-1][0-9]):([0-5][0-9]):([0-5][0-9])$/.test(value);
-};
-const isValidMinuteOrSecond = (value) => {
-    if (!value)
-        return false;
-    return /^(0?|[1-5])[0-9]$/.test(value);
-};
-const isValidHour = (value) => {
-    if (!value)
-        return false;
-    return /^(2[0-3]|0?[0-9]|1[0-9])$/.test(value);
+    // this setting is used to detect if the user changes the from or the to
+    const nextSelectEdgeRef = useRef('to');
+    const from = parseDate(fromString?.trim());
+    const previousFrom = parseDate(validFromRef.current);
+    if (!type['date'] || !isValidDate(`${from['day']}-${from['month']}-${from['year']}`)) {
+        from.year = previousFrom.year;
+        from.month = previousFrom.month;
+        from.day = previousFrom.day;
+        from.date = previousFrom.date;
+    }
+    if (type['date'] && isValidDate(`${from['day']}-${from['month']}-${from['year']}`)) {
+        validFromRef.current = `${from['year']}-${from['month']}-${from['day']}`;
+    }
+    if (!type['time'] || !isValidTime(from['time'])) {
+        from.hour = previousFrom.hour;
+        from.minute = previousFrom.minute;
+        from.second = previousFrom.second;
+        from.time = previousFrom.time;
+    }
+    if (type['time'] && isValidTime(`${from['time']}`)) {
+        if (validFromRef.current === undefined) {
+            validFromRef.current = '';
+        }
+        if (type['date']) {
+            validFromRef.current += ' ';
+        }
+        validFromRef.current += `${from['time']}`;
+    }
+    const to = parseDate(toString?.trim());
+    const previousTo = parseDate(validToRef.current);
+    if (!type['date'] || !isValidDate(`${to['day']}-${to['month']}-${to['year']}`)) {
+        to.year = previousTo.year;
+        to.month = previousTo.month;
+        to.day = previousTo.day;
+        to.date = previousTo.date;
+    }
+    if (type['date'] && isValidDate(`${to['day']}-${to['month']}-${to['year']}`)) {
+        validToRef.current = `${to['year']}-${to['month']}-${to['day']}`;
+    }
+    if (!type['time'] || !isValidTime(to['time'])) {
+        to.hour = previousTo.hour;
+        to.minute = previousTo.minute;
+        to.second = previousTo.second;
+        to.time = previousTo.time;
+    }
+    if (type['time'] && isValidTime(`${to['time']}`)) {
+        if (validToRef.current === undefined) {
+            validToRef.current = '';
+        }
+        if (type['date']) {
+            validToRef.current += ' ';
+        }
+        validToRef.current += `${to['time']}`;
+    }
+    const id = useId();
+    const onFocus = useCallback(() => {
+        if (!focus) {
+            setFocus(true);
+            if (openOnFocus && !open) {
+                setOpen(true);
+            }
+            if (forwardFocus) {
+                forwardFocus();
+            }
+        }
+    }, [focus, forwardFocus, openOnFocus, open]);
+    const onBlur = useCallback(() => {
+        if (!stateRef.current.keepFocus) {
+            if (open) {
+                setOpen(false);
+            }
+            if (focus) {
+                setFocus(false);
+                if (forwardBlur) {
+                    forwardBlur();
+                }
+            }
+        }
+    }, [open, forwardBlur, setOpen, focus]);
+    const onChange = useCallback((nextValue, label) => {
+        currentValueRef.current = nextValue;
+        // check if the nextValue is a valid value
+        // if it's not a valid value, we keep it internally
+        if (forwardChange && isValidValue(nextValue, type)) {
+            setInternalValue(null);
+            forwardChange(nextValue, label);
+        }
+        else {
+            setInternalValue(nextValue);
+        }
+    }, [forwardChange, setInternalValue, type]);
+    const onChangeDate = (fromDate, toDate) => {
+        if (fromDate === undefined) {
+            fromDate = from['date'];
+        }
+        if (toDate === undefined) {
+            toDate = to['date'];
+        }
+        if (fromDate !== from['date']) {
+            nextSelectEdgeRef.current = 'to';
+        }
+        else {
+            nextSelectEdgeRef.current = 'from';
+        }
+        onChange(formatDate(type, fromDate, from['time'], toDate, to['time']));
+    };
+    const removeLabel = () => {
+        onChangeDate();
+    };
+    const onChangeTime = (nextTime, edge) => {
+        if (edge === 'from') {
+            onChange(formatDate(type, from['date'], nextTime, to['date'], to['time']));
+        }
+        else {
+            onChange(formatDate(type, from['date'], from['time'], to['date'], nextTime));
+        }
+    };
+    const onChangeQuickRange = (quickRangeLabel) => {
+        if (quickRanges) {
+            const quickRange = quickRanges[quickRangeLabel];
+            if (quickRange) {
+                onChange(`${quickRange.from} to ${quickRange.to}`, quickRangeLabel);
+            }
+            if (closeOnQuickSelect) {
+                setOpen(false);
+            }
+        }
+    };
+    const onOpen = useCallback(() => {
+        eventLocks.lock('escape', id);
+    }, [id]);
+    const onClosed = useCallback(() => {
+        eventLocks.unlock('escape', id);
+        if (lastExternalValueRef.current !== undefined) {
+            setInternalValue(null);
+        }
+    }, [id]);
+    useClickOutside([containerRef, dropdownRef], onBlur);
+    useFocusOutside([containerRef, dropdownRef], onBlur);
+    const context = useMemo(() => {
+        return {
+            open,
+            setOpen,
+            triggerRef,
+            nullable,
+            onChange,
+        };
+    }, [open, setOpen, triggerRef, nullable, onChange]);
+    useEffect(() => {
+        if (forwardChange &&
+            lastExternalValueRef.current !== undefined &&
+            externalValue !== undefined &&
+            externalValue !== lastExternalValueRef.current) {
+            // case when we block the onChange due to a wrong internal value
+            // and the value is changed from the exterior (not due to change done internally)
+            setInternalValue(null);
+        }
+        lastExternalValueRef.current = externalValue;
+    });
+    return (jsxRuntimeExports.jsx(DefaultDatePickerContext.Provider, { value: context, children: jsxRuntimeExports.jsxs("div", { className: addClassname('o-datepicker', className), ref: containerRef, onMouseDown: () => (stateRef.current.keepFocus = true), onMouseUp: () => (stateRef.current.keepFocus = false), children: [jsxRuntimeExports.jsx(Dropdown, { attachToBody: attachDropdownToBody, open: open, distance: 0, animationTimeout: animationMs, onDropStart: onOpen, onCollapseDone: onClosed, placement: placement, widthModifier: dropdownWidthModifier, className: className, zIndex: attachDropdownToBody ? 2000 : undefined, children: jsxRuntimeExports.jsxs("div", { ref: dropdownRef, className: `o-datepicker-dropdown-content${type['range'] ? ' o-datepicker-range' : ''}${validFromRef.current !== undefined ? ' o-datepicker-active' : ''}`, children: [type['range'] && quickRanges && Object.keys(quickRanges).length > 0 && (jsxRuntimeExports.jsx(QuickTimeRangeComponent, { quickRanges: quickRanges, onChange: onChangeQuickRange, currentQuickRangeLabel: label }, "quick_range")), type['date'] && (jsxRuntimeExports.jsx("div", { className: "o-calendar", children: jsxRuntimeExports.jsx(CalendarComponent, { from: from, to: to, type: type, onChange: onChangeDate, nextSelectEdge: nextSelectEdgeRef.current }) }, "calendar")), type['time'] && (jsxRuntimeExports.jsx("div", { className: "o-time", children: jsxRuntimeExports.jsx(TimeComponent, { from: from, to: to, type: type, onChange: onChangeTime, displayHours: displayHours, displayMinutes: displayMinutes, displaySeconds: displaySeconds }) }, "time"))] }) }), jsxRuntimeExports.jsx("span", { ref: triggerRef, children: jsxRuntimeExports.jsx(Input, { className: "o-datepicker-input", placeholder: placeholder, onChange: (e) => onChange(e.target.value), value: label ? label : !value ? '' : value, onFocus: onFocus, onBlur: onBlur, autoFocus: autoFocus, disabled: disabled, SuffixComponent: IconComponent, readOnly: !combo, onClick: () => {
+                            if (!open) {
+                                setOpen(true);
+                            }
+                            else if (combo) {
+                                removeLabel();
+                            }
+                            else {
+                                setOpen(false);
+                            }
+                        } }) }, "input")] }) }));
 };
 
-const IconComponent$1 = ({ className, onClick }) => {
-    return (jsxRuntimeExports.jsx("div", { className: className, onClick: onClick, children: jsxRuntimeExports.jsxs("svg", { className: "o-icon-calendar-svg", viewBox: "0 0 512 512", children: [jsxRuntimeExports.jsx("rect", { x: "48", y: "80", width: "416", height: "384", rx: "48", fill: "none", stroke: "currentColor", strokeLinejoin: "round", strokeWidth: "32" }), jsxRuntimeExports.jsx("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "32", d: "M128 48v32M384 48v32M464 160H48M304 260l43.42-32H352v168M191.87 306.63c9.11 0 25.79-4.28 36.72-15.47a37.9 37.9 0 0011.13-27.26c0-26.12-22.59-39.9-47.89-39.9-21.4 0-33.52 11.61-37.85 18.93M149 374.16c4.88 8.27 19.71 25.84 43.88 25.84 28.59 0 52.12-15.94 52.12-43.82 0-12.62-3.66-24-11.58-32.07-12.36-12.64-31.25-17.48-41.55-17.48" })] }) }));
+const toTimestamp = (date, format) => {
+    if (!date)
+        return null;
+    const d = new Date(date);
+    if (isNaN(d))
+        return null;
+    const timestamp = d.getTime();
+    return format === 'milliseconds' ? timestamp : Math.floor(timestamp / 1000);
 };
-var CalendarIcon = styled(IconComponent$1) `
-  ${({ width, height, color: cssColor = 'inherit', marginLeft: ml = '0', marginRight: mr = '0' }) => css `
-    width: ${width};
-    height: ${height};
-    ${marginLeft(ml)}
-    ${marginRight(mr)}
-    ${display('flex')};
-    ${alignItems('center')};
-    ${color(cssColor)}
-    .o-icon-calendar-svg {
-      display: inline-block;
-      stroke-width: 0;
-      stroke: currentColor;
-      fill: currentColor;
+const fromTimestamp = (timestamp, format) => {
+    if (timestamp === null || timestamp === undefined)
+        return null;
+    if (format === 'seconds') {
+        timestamp = timestamp * 1000;
     }
-  `}
-`;
+    const d = new Date(timestamp);
+    if (isNaN(d))
+        return null;
+    return dateToString(d);
+};
+const timestampAdapter = (format = 'milliseconds') => ({
+    fromDate: (date) => toTimestamp(date, format),
+    toDate: (value) => fromTimestamp(value, format),
+});
+const timestampMilliSecondAdapter = timestampAdapter('milliseconds');
 
-const DefaultDatePickerContext = React.createContext(null);
-const useDatePickerContext = () => {
-    return useContext(DefaultDatePickerContext);
+const dateAdapter = {
+    fromDate: (date) => date === null ? null : new Date(date),
+    toDate: (value) => !value ? null : dateToString(value),
 };
 
-const dateToString = (d) => {
-    if (typeof d === 'function') {
-        d = d();
-    }
-    if (typeof d === 'string') {
-        d = new Date(d);
-    }
-    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')} ${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}:${String(d.getSeconds()).padStart(2, '0')}`;
+const type$5 = {
+    date: true,
+    time: false,
+    range: false,
 };
-const toDateRange = (value, label) => {
-    if (value) {
-        const [from, to] = value.trim().split(/ to\s*/);
+const DatePickerComponent = (props) => {
+    const { onChange: forwardChange, value: externalValue, adapter, ...datePickerProps } = props;
+    const _adapter = adapter === 'timestamp' ? timestampMilliSecondAdapter : adapter === 'date' ? dateAdapter : adapter;
+    const onChange = forwardChange
+        ? (value) => {
+            if (value === null || !_adapter) {
+                forwardChange(value);
+            }
+            else {
+                forwardChange(_adapter.fromDate(value));
+            }
+        }
+        : undefined;
+    let value = externalValue
+        ? _adapter
+            ? _adapter.toDate(externalValue)
+            : externalValue
+        : null;
+    return jsxRuntimeExports.jsx(PickerComponent, { ...datePickerProps, value: value, onChange: onChange, type: type$5 });
+};
+
+const timestampRangeAdapter = (format = 'milliseconds') => ({
+    fromDateRange: (range) => {
         return {
-            from: from && from.trim() ? from.trim() : null,
-            to: to && to.trim() ? to.trim() : null,
-            label,
+            from: toTimestamp(range.from, format),
+            to: toTimestamp(range.to, format),
+            label: range.label,
         };
-    }
-    else {
-        return null;
-    }
-};
-const qr = (quickRange) => {
-    return {
-        label: quickRange,
-        from: () => {
-            const d = new Date();
-            switch (quickRange) {
-                case 'Last hour':
-                    d.setHours(d.getHours() - 1);
-                    break;
-                case 'Last day':
-                    d.setDate(d.getDate() - 1);
-                    break;
-                case 'Last week':
-                    d.setDate(d.getDate() - 7);
-                    break;
-                case 'Last month':
-                    d.setMonth(d.getMonth() - 1);
-                    break;
-                case 'Last year':
-                    d.setFullYear(d.getFullYear() - 1);
-                    break;
+    },
+    toDateRange: (value) => {
+        return {
+            from: fromTimestamp(value.from, format),
+            to: fromTimestamp(value.to, format),
+            label: value.label,
+        };
+    },
+});
+const timestampSecondRangeAdapter = timestampRangeAdapter('seconds');
+const timestampMilliSecondRangeAdapter = timestampRangeAdapter('milliseconds');
+const useTimestampRangeAdapter = (format = 'milliseconds') => {
+    const ref = useRef(timestampRangeAdapter(format));
+    return ref.current;
+};
+
+const dateRangeAdapter = {
+    fromDateRange: (range) => {
+        return {
+            from: range?.from === null ? null : new Date(range.from),
+            to: range?.to === null ? null : new Date(range.to),
+            label: range?.label,
+        };
+    },
+    toDateRange: (value) => {
+        return {
+            from: !value?.from ? null : dateToString(value.from),
+            to: !value?.to ? null : dateToString(value.to),
+            label: value?.label,
+        };
+    },
+};
+const useDateRangeAdapter = () => {
+    return dateRangeAdapter;
+};
+
+const type$4 = {
+    date: true,
+    time: false,
+    range: true,
+};
+const DateRangePickerComponent = (props) => {
+    const { onChange: forwardChange, value: externalValue, adapter, ...datePickerProps } = props;
+    const _adapter = adapter === 'timestamp' ? timestampMilliSecondRangeAdapter : adapter === 'date' ? dateRangeAdapter : adapter;
+    const onChange = forwardChange
+        ? (value, label) => {
+            const dateRange = toDateRange(value, label);
+            if (dateRange === null || !_adapter) {
+                forwardChange(dateRange);
             }
-            return d;
-        },
-        to: () => new Date(),
-    };
+            else {
+                forwardChange(_adapter.fromDateRange(dateRange));
+            }
+        }
+        : undefined;
+    let value = null;
+    let valueLabel;
+    if (externalValue) {
+        if (_adapter) {
+            const { from, to, label } = _adapter.toDateRange(externalValue);
+            value = `${from || ''} to ${to || ''}`;
+            valueLabel = label;
+        }
+        else {
+            value = `${externalValue.from || ''} to ${externalValue.to || ''}`;
+            valueLabel = externalValue.label;
+        }
+    }
+    return jsxRuntimeExports.jsx(PickerComponent, { ...datePickerProps, value: value, onChange: onChange, type: type$4, label: valueLabel });
 };
-const defaultQuickRanges = () => {
-    return ['Last hour', 'Last day', 'Last week', 'Last month', 'Last year'].reduce((accumulator, label) => {
-        const quickRange = qr(label);
-        if (quickRange) {
-            accumulator[label] = quickRange;
+
+const type$3 = {
+    date: true,
+    time: true,
+    range: false,
+};
+const DateTimePickerComponent = (props) => {
+    const { onChange: forwardChange, value: externalValue, adapter, ...datePickerProps } = props;
+    const _adapter = adapter === 'timestamp' ? timestampMilliSecondAdapter : adapter === 'date' ? dateAdapter : adapter;
+    const onChange = forwardChange
+        ? (value) => {
+            if (value === null || !_adapter) {
+                forwardChange(value);
+            }
+            else {
+                forwardChange(_adapter.fromDate(value));
+            }
         }
-        return accumulator;
-    }, {});
+        : undefined;
+    let value = externalValue
+        ? _adapter
+            ? _adapter.toDate(externalValue)
+            : externalValue
+        : null;
+    return jsxRuntimeExports.jsx(PickerComponent, { ...datePickerProps, value: value, onChange: onChange, type: type$3 });
 };
-const findQuickRangeLabel = (quickRanges, dateRange) => {
-    if (!quickRanges || !dateRange)
-        return;
-    const dr = typeof dateRange === 'string' ? toDateRange(dateRange) : dateRange;
-    if (dr === null)
-        return;
-    if (!dr.from || !dr.to)
-        return;
-    return Object.keys(quickRanges).find((label) => {
-        return dr.from === quickRanges[label].from && dr.to === quickRanges[label].to;
-    });
+
+const type$2 = {
+    date: true,
+    time: true,
+    range: true,
 };
-const isSameDay = (date1, date2) => {
-    return (date1.getFullYear() === date2.getFullYear() &&
-        date1.getMonth() === date2.getMonth() &&
-        date1.getDate() === date2.getDate());
+const DateTimeRangePickerComponent = (props) => {
+    const { onChange: forwardChange, value: externalValue, adapter, ...datePickerProps } = props;
+    const _adapter = adapter === 'timestamp' ? timestampMilliSecondRangeAdapter : adapter === 'date' ? dateRangeAdapter : adapter;
+    const onChange = forwardChange
+        ? (value, label) => {
+            const dateRange = toDateRange(value, label);
+            if (dateRange === null || !_adapter) {
+                forwardChange(dateRange);
+            }
+            else {
+                forwardChange(_adapter.fromDateRange(dateRange));
+            }
+        }
+        : undefined;
+    let value = null;
+    let valueLabel;
+    if (externalValue) {
+        if (_adapter) {
+            const { from, to, label } = _adapter.toDateRange(externalValue);
+            value = `${from || ''} to ${to || ''}`;
+            valueLabel = label;
+        }
+        else {
+            value = `${externalValue.from || ''} to ${externalValue.to || ''}`;
+            valueLabel = externalValue.label;
+        }
+    }
+    return jsxRuntimeExports.jsx(PickerComponent, { ...datePickerProps, value: value, onChange: onChange, type: type$2, label: valueLabel });
 };
 
-const isCurrent = (d, year, month, day) => {
-    return d.getFullYear() === year && d.getMonth() === month && d.getDate() === day;
+const type$1 = {
+    date: false,
+    time: true,
+    range: false,
 };
-const isActive = (date) => {
-    return date.year !== undefined && date.month !== undefined && date.year !== undefined;
+const TimePickerComponent = (props) => {
+    return jsxRuntimeExports.jsx(PickerComponent, { ...props, type: type$1 });
 };
-const inRange = (year, month, day, from, to) => {
-    let fromDate;
-    if (from.year !== undefined && from.month !== undefined && from.day !== undefined) {
-        fromDate = new Date(`${from.year}-${from.month.padStart(2, '0')}-${String(from.day).padStart(2, '0')}`);
-    }
-    else {
-        return false;
-    }
-    let toDate;
-    if (to.year !== undefined && to.month !== undefined && to.day !== undefined) {
-        toDate = new Date(`${to.year}-${to.month.padStart(2, '0')}-${String(to.day).padStart(2, '0')}`);
-    }
-    else {
-        return false;
-    }
-    let currentDate = new Date(`${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`);
-    return (currentDate > fromDate && currentDate < toDate) || (currentDate < fromDate && currentDate > toDate);
+
+const type = {
+    date: false,
+    time: true,
+    range: true,
 };
-const isInversedDate = (from, to) => {
-    if (!isActive(from) || !isActive(to)) {
-        return false;
-    }
-    const fromDate = new Date(`${from.year}-${String(from.month ?? 0 + 1).padStart(2, '0')}-${String(from.day).padStart(2, '0')}`);
-    const toDate = new Date(`${to.year}-${String(to.month ?? 0 + 1).padStart(2, '0')}-${String(to.day).padStart(2, '0')}`);
-    return fromDate > toDate;
+const TimeRangePickerComponent = (props) => {
+    return jsxRuntimeExports.jsx(PickerComponent, { ...props, type: type });
 };
-function getMonth(candidate, defaultValue) {
-    if (typeof candidate === 'string') {
-        candidate = parseInt(candidate) - 1;
-    }
-    if (candidate === undefined || isNaN(candidate) || candidate < 0 || candidate > 11) {
-        return defaultValue;
-    }
-    return candidate;
-}
-function getYear(candidate, min, max, defaultValue) {
-    if (typeof candidate === 'string') {
-        candidate = parseInt(candidate);
-    }
-    if (candidate === undefined || isNaN(candidate) || candidate < min || candidate > max) {
-        return defaultValue;
-    }
-    return candidate;
-}
-const defaultMinDate = new Date();
-defaultMinDate.setFullYear(1900);
-const defaultMaxDate = new Date();
-defaultMaxDate.setFullYear(2100);
-const CalendarComponent = ({ from, to, type, minDate = defaultMinDate, maxDate = defaultMaxDate, nextSelectEdge, className, onChange, }) => {
-    const maxYear = maxDate.getFullYear();
-    const minYear = minDate.getFullYear();
-    const years = useRef([...Array(maxYear).keys()].slice(minYear));
-    const d = new Date();
-    const lastExternalFromMonth = useRef(from['month']);
-    const lastExternalFromYear = useRef(from['year']);
-    const lastExternalToMonth = useRef(to['month']);
-    const lastExternalToYear = useRef(to['year']);
-    const fromMonth = getMonth(from['month']);
-    const fromYear = getYear(from['year'], minYear, maxYear);
-    const fromDay = from['day'] === undefined ? undefined : parseInt(`${from['day']}`);
-    const [internalTo, setInternalTo] = useState({});
-    let transientTo = false;
-    let toMonth, toYear, toDay;
-    let isInversed = false;
-    if (to.year !== undefined && to.month !== undefined && to.day !== undefined) {
-        toMonth = getMonth(to.month);
-        toYear = getYear(to.year, minYear, maxYear);
-        toDay = parseInt(`${to.day}`);
-    }
-    else {
-        toMonth = getMonth(internalTo.month);
-        toYear = getYear(internalTo.year, minYear, maxYear);
-        toDay = parseInt(`${internalTo.day}`);
-        transientTo = true;
-        isInversed = isInversedDate(from, internalTo);
-    }
-    const [currentMonth, setCurrentMonth] = useState(getMonth(from['month'], d.getMonth()));
-    const [currentYear, setCurrentYear] = useState(getYear(from['year'], minYear, maxYear, d.getFullYear()));
-    const firstDayOfExternalFromMonth = fromMonth && fromYear ? new Date(`${fromYear}-${String(getMonth(fromMonth + 1)).padStart(2, '0')}-01`) : undefined;
-    const firstDayOfExternalToMonth = toMonth && toYear ? new Date(`${toYear}-${String(toMonth + 1).padStart(2, '0')}-01`) : undefined;
-    const firstDayOfCurrentMonth = new Date(`${currentYear}-${String(currentMonth + 1).padStart(2, '0')}-01`);
-    const lastDayOfPreviousMonth = new Date(firstDayOfCurrentMonth);
-    lastDayOfPreviousMonth.setDate(lastDayOfPreviousMonth.getDate() - 1);
-    const lastDayOfCurrentMonth = new Date(firstDayOfCurrentMonth);
-    lastDayOfCurrentMonth.setMonth(lastDayOfCurrentMonth.getMonth() + 1);
-    lastDayOfCurrentMonth.setDate(lastDayOfCurrentMonth.getDate() - 1);
-    const firstDayOfNextMonth = new Date(firstDayOfCurrentMonth);
-    firstDayOfNextMonth.setMonth(firstDayOfNextMonth.getMonth() + 1);
-    let calendarDays = firstDayOfCurrentMonth.getDate() === 0 || firstDayOfCurrentMonth.getDay() === 0
-        ? []
-        : [...Array(lastDayOfPreviousMonth.getDate() + 1).keys()].slice(-firstDayOfCurrentMonth.getDay()).map((n) => {
-            const startRange = fromDay === n &&
-                lastDayOfPreviousMonth.getMonth() === firstDayOfExternalFromMonth?.getMonth() &&
-                lastDayOfPreviousMonth.getFullYear() === firstDayOfExternalFromMonth?.getFullYear();
-            const endRange = toDay === n &&
-                lastDayOfPreviousMonth.getMonth() === firstDayOfExternalToMonth?.getMonth() &&
-                lastDayOfPreviousMonth.getFullYear() === firstDayOfExternalToMonth?.getFullYear();
-            return {
-                day: n,
-                active: startRange || endRange,
-                current: isCurrent(d, lastDayOfPreviousMonth.getFullYear(), lastDayOfPreviousMonth.getMonth(), n),
-                month: lastDayOfPreviousMonth.getMonth(),
-                year: lastDayOfPreviousMonth.getFullYear(),
-                startRange: startRange && type.range,
-                endRange: isActive(from) && endRange && type.range,
-                inRange: type.range &&
-                    inRange(lastDayOfPreviousMonth.getFullYear(), lastDayOfPreviousMonth.getMonth(), n, from, transientTo ? internalTo : to),
+
+const DatePicker = styled(DatePickerComponent) `
+  ${datePickerStyle}
+`;
+const DateRangePicker = styled(DateRangePickerComponent) `
+  ${datePickerStyle}
+`;
+const DateTimePicker = styled(DateTimePickerComponent) `
+  ${datePickerStyle}
+`;
+const DateTimeRangePicker = styled(DateTimeRangePickerComponent) `
+  ${datePickerStyle}
+`;
+const TimePicker = styled(TimePickerComponent) `
+  ${datePickerStyle}
+`;
+const TimeRangePicker = styled(TimeRangePickerComponent) `
+  ${datePickerStyle}
+`;
+
+const FormDateValueDisplayer = ({ value }) => {
+    return jsxRuntimeExports.jsx("span", { className: "o-date-picker-displayer-value", children: value ?? '' });
+};
+const formDateDisplayerProps = (props) => ({
+    defaultValue: props.defaultValue === undefined ? null : props.defaultValue,
+    isUndefined: props.isUndefined === undefined ? (value) => value === undefined || value === null : props.isUndefined,
+    Displayer: props.Displayer === undefined
+        ? (displayerProps) => {
+            const form = useForm();
+            let value = form.getValue(displayerProps.name) ?? null;
+            const ValueDisplayer = props.ValueDisplayer ?? FormDateValueDisplayer;
+            const adapter = props.adapter === 'timestamp'
+                ? timestampMilliSecondAdapter
+                : props.adapter === 'date'
+                    ? dateAdapter
+                    : props.adapter;
+            if (adapter) {
+                value = adapter.toDate(value);
+            }
+            return (jsxRuntimeExports.jsx(FieldDisplayer, { label: displayerProps.label ?? titlelize(displayerProps.name), help: props.help, first: displayerProps.first, last: displayerProps.last, value: jsxRuntimeExports.jsx(ValueDisplayer, { value: value }), format: displayerProps.format }));
+        }
+        : props.Displayer,
+});
+/**
+ * `<FormDatePicker/>` is a DataPicker component designed to be managed by a Form.
+ * It must therefore be a nested component of a Form
+ *
+ * Some properties are handled entirely by a form controller.
+ *   * value
+ *   * onChange
+ *   * onFocus
+ *   * onBlur
+ *   * validations
+ *   * visibility
+ *   * disabled
+ * The value is synchronized in both directions (it can be modified manually by the user or by the controller).
+ *
+ * @group Form
+ * @category Components
+ */
+const FormDatePicker = React.memo((props) => {
+    const [fieldLayoutProps, fieldComponentProps] = useFieldLayout(Object.assign({}, props, formDateDisplayerProps(props)));
+    return (jsxRuntimeExports.jsx(FieldLayout, { ...fieldLayoutProps, required: props.required, children: jsxRuntimeExports.jsx(DatePicker, { ...fieldComponentProps }) }));
+});
+FormDatePicker.displayName = 'FormDatePicker';
+
+const FormDateRangeValueDisplayer = ({ value }) => {
+    return jsxRuntimeExports.jsx("span", { className: "o-date-picker-range-displayer-value", children: value ? `${value.from} - ${value.to}` : '' });
+};
+const formDateRangeDisplayerProps = (props) => ({
+    defaultValue: props.defaultValue === undefined ? null : props.defaultValue,
+    isUndefined: props.isUndefined === undefined ? (value) => value === undefined || value === null : props.isUndefined,
+    Displayer: props.Displayer === undefined
+        ? (displayerProps) => {
+            const form = useForm();
+            let value = form.getValue(displayerProps.name) ?? null;
+            const ValueDisplayer = props.ValueDisplayer ?? FormDateRangeValueDisplayer;
+            const adapter = props.adapter === 'timestamp'
+                ? timestampMilliSecondRangeAdapter
+                : props.adapter === 'date'
+                    ? dateRangeAdapter
+                    : props.adapter;
+            if (adapter) {
+                value = adapter.toDateRange(value);
+            }
+            return (jsxRuntimeExports.jsx(FieldDisplayer, { label: displayerProps.label ?? titlelize(displayerProps.name), help: props.help, first: displayerProps.first, last: displayerProps.last, value: jsxRuntimeExports.jsx(ValueDisplayer, { value: value }), format: displayerProps.format }));
+        }
+        : props.Displayer,
+});
+/**
+ * `<FormDateRangePicker/>` is a DataPicker component designed to be managed by a Form.
+ * It must therefore be a nested component of a Form
+ *
+ * Some properties are handled entirely by a form controller.
+ *   * value
+ *   * onChange
+ *   * onFocus
+ *   * onBlur
+ *   * validations
+ *   * visibility
+ *   * disabled
+ * The value is synchronized in both directions (it can be modified manually by the user or by the controller).
+ *
+ * @group Form
+ * @category Components
+ */
+const FormDateRangePicker = React.memo((props) => {
+    const [fieldLayoutProps, fieldComponentProps] = useFieldLayout(Object.assign({}, props, formDateRangeDisplayerProps(props)));
+    return (jsxRuntimeExports.jsx(FieldLayout, { ...fieldLayoutProps, required: props.required, children: jsxRuntimeExports.jsx(DateRangePicker, { ...fieldComponentProps }) }));
+});
+FormDateRangePicker.displayName = 'FormDateRangePicker';
+
+/**
+ * `<FormDateTimePicker/>` is a DataTimePicker component designed to be managed by a Form.
+ * It must therefore be a nested component of a Form
+ *
+ * Some properties are handled entirely by a form controller.
+ *   * value
+ *   * onChange
+ *   * onFocus
+ *   * onBlur
+ *   * validations
+ *   * visibility
+ *   * disabled
+ * The value is synchronized in both directions (it can be modified manually by the user or by the controller).
+ *
+ * @group Form
+ * @category Components
+ */
+const FormDateTimePicker = React.memo((props) => {
+    const [fieldLayoutProps, fieldComponentProps] = useFieldLayout(Object.assign({}, props, formDateDisplayerProps(props)));
+    return (jsxRuntimeExports.jsx(FieldLayout, { ...fieldLayoutProps, required: props.required, children: jsxRuntimeExports.jsx(DateTimePicker, { ...fieldComponentProps }) }));
+});
+FormDateTimePicker.displayName = 'FormDateTimePicker';
+
+/**
+ * `<FormDateTimeRangePicker/>` is a DataTimeRangePicker component designed to be managed by a Form.
+ * It must therefore be a nested component of a Form
+ *
+ * Some properties are handled entirely by a form controller.
+ *   * value
+ *   * onChange
+ *   * onFocus
+ *   * onBlur
+ *   * validations
+ *   * visibility
+ *   * disabled
+ * The value is synchronized in both directions (it can be modified manually by the user or by the controller).
+ *
+ * @group Form
+ * @category Components
+ */
+const FormDateTimeRangePicker = React.memo((props) => {
+    const [fieldLayoutProps, fieldComponentProps] = useFieldLayout(Object.assign({}, props, formDateRangeDisplayerProps(props)));
+    return (jsxRuntimeExports.jsx(FieldLayout, { ...fieldLayoutProps, required: props.required, children: jsxRuntimeExports.jsx(DateTimeRangePicker, { ...fieldComponentProps }) }));
+});
+FormDateTimeRangePicker.displayName = 'FormDateTimeRangePicker';
+
+const useQuickRanges = (ranges) => {
+    const result = useLazyRef(() => {
+        if (!Array.isArray(ranges)) {
+            ranges = [ranges];
+        }
+        const quickRanges = ranges.reduce((accumulator, range) => {
+            if (typeof range === 'string') {
+                if (range === 'all') {
+                    accumulator = Object.assign(accumulator, defaultQuickRanges());
+                }
+                else {
+                    const dateRange = qr(range);
+                    if (dateRange !== null) {
+                        accumulator[range] = dateRange;
+                    }
+                }
+            }
+            else {
+                accumulator[range.label] = range;
+            }
+            return accumulator;
+        }, {});
+        const target = Object.keys(quickRanges).reduce((accumulator, label) => {
+            accumulator[label] = {
+                from: null,
+                to: null,
+                label,
             };
-        });
-    calendarDays = calendarDays.concat([...Array(lastDayOfCurrentMonth.getDate() + 1).keys()].slice(1).map((n) => {
-        const startRange = fromDay === n &&
-            lastDayOfCurrentMonth.getMonth() === firstDayOfExternalFromMonth?.getMonth() &&
-            lastDayOfCurrentMonth.getFullYear() === firstDayOfExternalFromMonth?.getFullYear();
-        const endRange = toDay === n &&
-            lastDayOfCurrentMonth.getMonth() === firstDayOfExternalToMonth?.getMonth() &&
-            lastDayOfCurrentMonth.getFullYear() === firstDayOfExternalToMonth?.getFullYear();
-        return {
-            day: n,
-            active: startRange || endRange,
-            current: isCurrent(d, lastDayOfCurrentMonth.getFullYear(), lastDayOfCurrentMonth.getMonth(), n),
-            month: lastDayOfCurrentMonth.getMonth(),
-            year: lastDayOfCurrentMonth.getFullYear(),
-            startRange: startRange && type.range,
-            endRange: isActive(from) && endRange && type.range,
-            inRange: type.range &&
-                inRange(lastDayOfCurrentMonth.getFullYear(), lastDayOfCurrentMonth.getMonth(), n, from, transientTo ? internalTo : to),
+            return accumulator;
+        }, {});
+        const handler = {
+            get: function (_, prop) {
+                if (typeof prop === 'string') {
+                    const quickRange = quickRanges[prop];
+                    if (quickRange) {
+                        return {
+                            from: dateToString(quickRange.from),
+                            to: dateToString(quickRange.to),
+                            label: quickRange.label,
+                        };
+                    }
+                }
+                return undefined;
+            },
         };
-    }));
-    calendarDays = calendarDays.concat(lastDayOfCurrentMonth.getDay() === 6
-        ? []
-        : [...Array(6 - lastDayOfCurrentMonth.getDay() + 1).keys()].slice(1).map((n) => {
-            const startRange = fromDay === n &&
-                firstDayOfNextMonth.getMonth() === firstDayOfExternalFromMonth?.getMonth() &&
-                firstDayOfNextMonth.getFullYear() === firstDayOfExternalFromMonth?.getFullYear();
-            const endRange = toDay === n &&
-                firstDayOfNextMonth.getMonth() === firstDayOfExternalToMonth?.getMonth() &&
-                firstDayOfNextMonth.getFullYear() === firstDayOfExternalToMonth?.getFullYear();
-            return {
-                day: n,
-                active: startRange || endRange,
-                current: isCurrent(d, firstDayOfNextMonth.getFullYear(), firstDayOfNextMonth.getMonth(), n),
-                month: firstDayOfNextMonth.getMonth(),
-                year: firstDayOfNextMonth.getFullYear(),
-                startRange: startRange && type.range,
-                endRange: isActive(from) && endRange && type.range,
-                inRange: type.range &&
-                    inRange(firstDayOfNextMonth.getFullYear(), firstDayOfNextMonth.getMonth(), n, from, transientTo ? internalTo : to),
-            };
-        }));
-    useEffect(() => {
-        if (type.range && to['month'] !== lastExternalToMonth.current) {
-            // the user has changed the toMonth from the input field
-            // we move the calendar to this month if it's a valid month
-            lastExternalToMonth.current = to['month'];
-            setCurrentMonth(getMonth(to['month'], currentMonth));
-        }
-        if (type.range && to['year'] !== lastExternalToYear.current) {
-            // the user has changed the toYear from the input field
-            // we move the calendar to this year if it's a valid year
-            lastExternalToYear.current = to['year'];
-            setCurrentYear(getYear(to['year'], minYear, maxYear, currentYear));
-        }
-        if (from['month'] !== lastExternalFromMonth.current) {
-            // the user has changed the fromMonth from the input field
-            // we move the calendar to this month if it's a valid month
-            lastExternalFromMonth.current = from['month'];
-            setCurrentMonth(getMonth(from['month'], currentMonth));
-        }
-        if (from['year'] !== lastExternalFromYear.current) {
-            // the user has changed the fromYear from the input field
-            // we move the calendar to this year if it's a valid year
-            lastExternalFromYear.current = from['year'];
-            setCurrentYear(getYear(from['year'], minYear, maxYear, currentYear));
-        }
+        return new Proxy(target, handler);
     });
-    return (jsxRuntimeExports.jsxs("div", { className: addClassname('o-calendar-container', className), children: [jsxRuntimeExports.jsxs("div", { className: "o-calendar-month", children: [jsxRuntimeExports.jsx(TogglerIcon, { width: "20px", closeArrowPosition: "w", onClick: () => {
-                            if (fromMonth === 0) {
-                                setCurrentMonth(11);
-                                setCurrentYear(currentYear - 1);
-                            }
-                            else {
-                                setCurrentMonth(currentMonth - 1);
-                            }
-                        } }, "previous"), jsxRuntimeExports.jsx(Select, { dataSource: months, nullable: false, value: months[currentMonth], className: "o-calendar-select-month", size: "small", onChange: (value) => setCurrentMonth(months.indexOf(`${value}`)) }, "month"), jsxRuntimeExports.jsx(Select, { dataSource: years.current, value: currentYear, nullable: false, className: "o-calendar-select-year", size: "small", onChange: (value) => setCurrentYear(parseInt(`${value}`)) }, "year"), jsxRuntimeExports.jsx(TogglerIcon, { width: "20px", closeArrowPosition: "e", onClick: () => {
-                            if (fromMonth === 11) {
-                                setCurrentMonth(0);
-                                setCurrentYear(currentYear + 1);
-                            }
-                            else {
-                                setCurrentMonth(currentMonth + 1);
-                            }
-                        } }, "next")] }), jsxRuntimeExports.jsxs("div", { className: "o-calendar-day-container", children: [days.map((day) => (jsxRuntimeExports.jsx("div", { className: "o-calendar-day-title", children: day.substring(0, 2) }, `${day}`))), calendarDays.map((calendarDay, index) => (jsxRuntimeExports.jsx("div", { className: `o-calendar-day${calendarDay.endRange
-                            ? ` o-calendar-day-${isInversed ? 'start' : 'end'}-range${transientTo ? '-transient' : ''}`
-                            : ''}${calendarDay.startRange ? ` o-calendar-day-${isInversed ? 'end' : 'start'}-range` : ''}${calendarDay.active ? ' o-calendar-day-active' : ''}${calendarDay.inRange ? ` o-calendar-day-in-range${transientTo ? '-transient' : ''}` : ''}${calendarDay.month === currentMonth ? ' o-calendar-day-in-month' : ''}${calendarDay.current ? ' o-calendar-day-current' : ''}`, onClick: () => {
-                            const nextDateString = `${calendarDay.year}-${String(calendarDay.month + 1).padStart(2, '0')}-${String(calendarDay.day).padStart(2, '0')}`;
-                            if (type.range && from.year !== undefined && from.month !== undefined && from.day !== undefined) {
-                                // It's a date range and not the first selection
-                                // We must determine if it's a change for the from or the to
-                                const fromDateString = `${from.year}-${from.month.padStart(2, '0')}-${String(from.day).padStart(2, '0')}`;
-                                const fromDate = new Date(fromDateString);
-                                let endDate = undefined;
-                                let endDateString = undefined;
-                                if (to.year !== undefined && to.month !== undefined && to.day !== undefined) {
-                                    // it's not the second click
-                                    endDateString = `${to.year}-${to.month.padStart(2, '0')}-${String(to.day).padStart(2, '0')}`;
-                                    endDate = new Date(endDateString);
-                                }
-                                const nextDate = new Date(nextDateString);
-                                if (endDate) {
-                                    // case when we click on the same day than the fromDate
-                                    if (isSameDay(fromDate, nextDate)) {
-                                        if (nextDate <= fromDate) {
-                                            onChange(nextDateString, fromDateString);
-                                        }
-                                        else {
-                                            onChange(fromDateString, nextDateString);
-                                        }
-                                    }
-                                    // case when we click on the same day than the endDate
-                                    else if (isSameDay(endDate, nextDate)) {
-                                        if (nextDate <= endDate) {
-                                            onChange(nextDateString, endDateString);
-                                        }
-                                        else {
-                                            onChange(endDateString, nextDateString);
-                                        }
-                                    }
-                                    else if (nextDate <= fromDate) {
-                                        onChange(nextDateString, endDateString);
-                                    }
-                                    else if (nextDate >= endDate) {
-                                        onChange(fromDateString, nextDateString);
-                                    }
-                                    else if (nextSelectEdge === 'from') {
-                                        onChange(nextDateString, endDateString);
-                                    }
-                                    else {
-                                        onChange(fromDateString, nextDateString);
-                                    }
-                                }
-                                else if (nextDate <= fromDate) {
-                                    onChange(nextDateString, fromDateString);
-                                }
-                                else {
-                                    onChange(fromDateString, nextDateString);
-                                }
-                            }
-                            else {
-                                // we assume that it's not a range or the first selection of the range
-                                onChange(nextDateString);
-                            }
-                        }, onMouseEnter: () => {
-                            if (transientTo) {
-                                setInternalTo({
-                                    year: `${calendarDay.year}`,
-                                    month: String(calendarDay.month + 1).padStart(2, '0'),
-                                    day: String(calendarDay.day).padStart(2, '0'),
-                                });
-                            }
-                        }, children: calendarDay.day }, `${fromDay}-${index}`)))] })] }));
+    return result.current;
+};
+
+const SliderComponent = () => {
+    return null;
+};
+
+const sliderStyle = () => {
+    return css ``;
+};
+
+const Resizer = styled(SliderComponent) `
+  ${sliderStyle}
+`;
+
+const TagComponent = ({ className, children, onClick, icon }) => {
+    return (jsxRuntimeExports.jsxs("div", { className: addClassname('o-tag', className), onClick: onClick, children: [icon && jsxRuntimeExports.jsx("span", { className: "o-tag-icon", children: icon }), children] }));
+};
+
+const tagStyle = ({ theme, kind, bgColor = 'primary', fontColor = 'white', size = 'small', onClick, marginBottom: mb = 0, marginLeft: ml = 0, marginRight: mr = 0, marginTop: mt = 0, }) => {
+    let fSize = 'sm';
+    let lHeight = 'md';
+    let pX = 'md';
+    let radius = 'sm';
+    const pt = '2xs';
+    if (size === 'small') {
+        fSize = 'xs';
+        lHeight = 'xs';
+        radius = 'xs';
+        pX = 'sm';
+    }
+    if (size === 'large') {
+        fSize = 'md';
+        lHeight = 'lg';
+    }
+    return css `
+    ${display('inline-flex')}
+    ${alignItems('center')}
+    ${backgroundColor(kind ? theme.buttons[kind].bgColor : bgColor)}
+    ${marginLeft(ml)}
+    ${marginRight(mr)}
+    ${marginBottom(mb)}
+    ${marginTop(mt)}
+    ${lineHeight(lHeight)}
+    ${paddingX(pX)}
+    ${paddingTop(pt)}
+    ${color(kind ? theme.buttons[kind].color : fontColor)}
+    ${fontSize(fSize)}
+    ${cursor(onClick ? 'pointer' : 'inherit')}
+    ${borderRadius(radius)}
+    .o-tag-icon {
+      ${marginRight('xs')}
+      ${display('inline-flex')}
+      ${alignItems('center')}
+    }
+  `;
 };
 
-const QuickTimeRangeComponent = ({ quickRanges, onChange, currentQuickRangeLabel, }) => {
-    return (jsxRuntimeExports.jsxs("div", { className: "o-quick-time-range-container", children: [jsxRuntimeExports.jsx("div", { className: "o-quick-time-range-title", children: "Quick select" }), Object.keys(quickRanges).map((quickRangeLabel, index) => {
-                return (jsxRuntimeExports.jsx("div", { className: `o-quick-time-range${currentQuickRangeLabel === quickRangeLabel ? ' o-quick-time-range-selected' : ''}`, onClick: () => onChange(quickRangeLabel), children: quickRangeLabel }, `qr-${index}`));
-            })] }));
+const Tag = styled(TagComponent) `
+  ${tagStyle}
+`;
+
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+const WizardServiceContext = React.createContext(null);
+const useWizardService = () => {
+    return useContext(WizardServiceContext);
 };
 
-const getNextValue = (value, max, type) => {
-    const valueInt = parseInt(`${value}`);
-    let result = 0;
-    if (type === 'next') {
-        if (isNaN(valueInt) || valueInt === max) {
-            result = 0;
+const WizardStateContext = React.createContext(null);
+const useWizardState = () => {
+    return useContext(WizardStateContext);
+};
+
+const StepTitleContent = ({ member, index }) => {
+    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [member.icon, jsxRuntimeExports.jsxs("span", { className: "o-step-title", children: [index, ". ", `${member.title}`] })] }));
+};
+
+const StepTitle = (props) => {
+    const { member, onActivate, TitleContentComponent = StepTitleContent } = props;
+    return (jsxRuntimeExports.jsx("div", { className: `o-step${member.active ? ' o-step-active' : ' o-step-inactive'}${member.disabled ? ' o-step-disabled' : ' o-step-enabled'}${member.visible ? ' o-step-visible' : ' o-step-hidden'}${member.touched || member.touching ? ' o-step-touched' : ' o-step-untouched'}${member.success ? ' o-step-success' : ''}${member.touchingWarning || (member.touched && member.warning) ? ' o-step-warning' : ''}${member.touchingError || (member.touched && member.error) ? ' o-step-error' : ''}${member.loading ? ' o-step-loading' : ''}`, onClick: () => onActivate(member), children: jsxRuntimeExports.jsx(TitleContentComponent, { ...props }) }));
+};
+
+const WizardContainer = ({ cancelLabel = 'Cancel', className, children, doneLabel = 'Submit', nextLabel = 'Next', onCancel, onDone, previousLabel = 'Previous', title, stepSize = 3, TitleComponent = StepTitle, TitleContentComponent, forwardOnly = true, hasSummaryStep = false, reviewLabel = 'Review and Submit', }) => {
+    const classNames = addClassname('o-wizard', className);
+    const state = useWizardState();
+    const service = useWizardService();
+    const lastStepUid = service.getLastStep()?.uid;
+    const activate = useCallback((step) => {
+        if (!step || step.disabled || (!step.touched && !step.touching))
+            return;
+        if (!step.active) {
+            service.activate(step.uid);
         }
-        else {
-            result = valueInt + 1;
+    }, [service]);
+    const errorRef = useRef([]);
+    errorRef.current = [];
+    const indexRef = useRef(0);
+    indexRef.current = 0;
+    return (jsxRuntimeExports.jsxs(Row, { className: classNames, children: [jsxRuntimeExports.jsxs(Col, { size: stepSize, className: "o-wizard-step-panel", children: [title && jsxRuntimeExports.jsx("div", { className: "o-wizard-title", children: title }), state.members.map((step) => {
+                        if (step.visible) {
+                            indexRef.current++;
+                        }
+                        else {
+                            return null;
+                        }
+                        if (step.error !== undefined) {
+                            errorRef.current.push({
+                                stepIndex: indexRef.current,
+                                stepTitle: step.title,
+                                errorMessage: step.error,
+                            });
+                        }
+                        return (jsxRuntimeExports.jsx(TitleComponent, { member: step, onActivate: activate, index: indexRef.current, TitleContentComponent: TitleContentComponent }, `step-title-${step.uid}`));
+                    })] }), jsxRuntimeExports.jsxs(Col, { size: (12 - stepSize), className: "o-wizard-content-panel", children: [jsxRuntimeExports.jsx("div", { className: "o-wizard-content", children: children }), jsxRuntimeExports.jsxs("div", { className: "o-wizard-control", children: [onCancel && (jsxRuntimeExports.jsx(Button, { kind: "primary", pattern: "flat", className: "o-wizard-control-button", type: "button", onClick: () => onCancel(), children: cancelLabel })), !service.isFirstStep() && (jsxRuntimeExports.jsx(Button, { kind: "primary", pattern: "outline", className: "o-wizard-control-button", onClick: () => service.previous(), type: "button", children: previousLabel })), !service.isLastStep() && (jsxRuntimeExports.jsx(Button, { kind: service.isCurrentStepInVisibleError() ? 'danger' : 'primary', pattern: "solid", className: "o-wizard-control-button", disabled: service.isCurrentStepInVisibleError(), onClick: () => service.next(), type: "button", children: nextLabel })), (service.isLastStep() || !forwardOnly) && (jsxRuntimeExports.jsx(SubmitButton, { kind: errorRef.current.length > 0 ? 'danger' : 'success', pattern: "solid", className: "o-wizard-control-button", disabled: errorRef.current.length > 0, onClick: hasSummaryStep && !service.isLastStep() && lastStepUid ? () => service.activate(lastStepUid) : onDone, type: "button", showErrors: true, children: hasSummaryStep && !service.isLastStep() ? reviewLabel : doneLabel }))] })] })] }));
+};
+
+const ControlledWizardComponent = ({ Component = WizardContainer, controller, ...props }) => {
+    return (jsxRuntimeExports.jsx(WizardServiceContext.Provider, { value: controller, children: jsxRuntimeExports.jsx(WizardStateContext.Provider, { value: controller.state, children: jsxRuntimeExports.jsx(Component, { ...props }) }) }));
+};
+
+let WizardService = class WizardService extends TabsService {
+    activateNext() {
+        const nextStep = this.getNextStep();
+        if (nextStep) {
+            this.activate(nextStep.uid);
         }
     }
-    else if (type === 'previous') {
-        if (isNaN(valueInt)) {
-            result = 0;
+    activatePrevious() {
+        const previousStep = this.getPreviousStep();
+        if (previousStep) {
+            this.activate(previousStep.uid);
         }
-        else if (valueInt === 0) {
-            result = max;
+    }
+    getCurrentStep() {
+        return this.state.members[this.getCurrentActiveIndex()];
+    }
+    getNextStep() {
+        for (let i = this.getCurrentActiveIndex() + 1; i < this.state.members.length; i++) {
+            const step = this.state.members[i];
+            if (step && step.visible && !step.disabled) {
+                return step;
+            }
         }
-        else {
-            result = valueInt - 1;
+        return undefined;
+    }
+    getLastStep() {
+        return this.state.members.filter((m) => m.visible && !m.disabled).slice(-1)[0];
+    }
+    getPreviousStep() {
+        for (let i = this.getCurrentActiveIndex() - 1; i >= 0; i--) {
+            const step = this.state.members[i];
+            if (step && step.visible && !step.disabled) {
+                return step;
+            }
         }
+        return undefined;
     }
-    return String(result).padStart(2, '0');
-};
-const isMin = (value, _type) => {
-    return parseInt(`${value}`) === 0;
-};
-const isMax = (value, type) => {
-    return type === 'hour' ? parseInt(`${value}`) === 23 : parseInt(`${value}`) === 59;
-};
-const TimeSelectorPartComponent = ({ onChange, type, value, size = 'large', }) => {
-    const onValueChange = (e) => {
-        let value = e.target.value;
-        if (type === 'minute' && (value === '' || isValidMinuteOrSecond(value))) {
-            onChange(value);
+    isFirstStep() {
+        if (this.state.active) {
+            return this.state.members.filter((m) => m.visible)[0]?.uid === this.state.active;
         }
-        else if (type === 'second' && (value === '' || isValidMinuteOrSecond(value))) {
-            onChange(value);
+        return false;
+    }
+    isLastStep() {
+        if (this.state.active) {
+            return this.state.members.filter((m) => m.visible && !m.disabled).slice(-1)[0]?.uid === this.state.active;
         }
-        else if (type === 'hour' && (value === '' || isValidHour(value))) {
-            onChange(value);
+        return false;
+    }
+    isCurrentStepInError() {
+        if (this.state.active) {
+            const currentStep = this.getMember(this.state.active);
+            return currentStep?.error !== undefined;
         }
-    };
-    return (jsxRuntimeExports.jsxs("div", { className: `o-time-selector-part o-time-selector-part-${size} o-time-${type}`, children: [jsxRuntimeExports.jsx(TogglerIcon, { className: isMin(value) ? 'o-time-selector-part-icon-disabled' : undefined, width: "20px", closeArrowPosition: "n", onClick: () => {
-                    if (!isMin(value)) {
-                        onChange(getNextValue(value, type === 'hour' ? 23 : 59, 'previous'));
-                    }
-                } }, "previous"), jsxRuntimeExports.jsx(Input, { className: "o-time-input", value: value, size: size, selectOnFocus: true, onChange: onValueChange }, "value"), jsxRuntimeExports.jsx(TogglerIcon, { className: isMax(value, type) ? 'o-time-selector-part-icon-disabled' : undefined, width: "20px", closeArrowPosition: "s", onClick: () => {
-                    if (!isMax(value, type)) {
-                        onChange(getNextValue(value, type === 'hour' ? 23 : 59, 'next'));
-                    }
-                } }, "next")] }));
-};
-
-const getValue = (candidate, max, defaultValue) => {
-    if (typeof candidate === 'string') {
-        candidate = parseInt(candidate);
+        return false;
     }
-    if (candidate === undefined || isNaN(candidate) || candidate < 0 || candidate > max) {
-        return defaultValue;
+    isCurrentStepInVisibleError() {
+        if (this.state.active) {
+            const currentStep = this.getMember(this.state.active);
+            return currentStep?.touchingError !== undefined;
+        }
+        return false;
     }
-    return candidate;
-};
-const TimeSelectorComponent = ({ value, onChange, size, edge, displayHours, displayMinutes, displaySeconds, }) => {
-    const d = new Date();
-    const hourInt = getValue(value.hour, 23, displayHours ? d.getHours() : 0);
-    const minuteInt = getValue(value.minute, 59, displayMinutes ? d.getMinutes() : 0);
-    const secondInt = getValue(value.second, 59, displaySeconds ? d.getSeconds() : 0);
-    const [internalHour, setInternalHour] = useState(String(hourInt).padStart(2, '0'));
-    const [internalMinute, setInternalMinute] = useState(String(minuteInt).padStart(2, '0'));
-    const [internalSecond, setInternalSecond] = useState(String(secondInt).padStart(2, '0'));
-    const hour = internalHour === '' ? '' : parseInt(internalHour) === hourInt ? internalHour : hourInt;
-    const minute = internalMinute === '' ? '' : parseInt(internalMinute) === minuteInt ? internalMinute : minuteInt;
-    const second = internalSecond === '' ? '' : parseInt(internalSecond) === secondInt ? internalSecond : secondInt;
-    const onChangeHour = useCallback((value) => {
-        setInternalHour(value);
-        if (value !== '') {
-            onChange(`${String(value || 0).padStart(2, '0')}:${String(minute || 0).padStart(2, '0')}:${String(second || 0).padStart(2, '0')}`, edge);
+    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+    *done() {
+        yield this.setSubmitting(true);
+        if (this.state.onDone) {
+            yield this.state.onDone();
         }
-    }, [minute, second, onChange]);
-    const onChangeMinute = useCallback((value) => {
-        setInternalMinute(value);
-        if (value !== '') {
-            onChange(`${String(hour || 0).padStart(2, '0')}:${String(value || 0).padStart(2, '0')}:${String(second || 0).padStart(2, '0')}`, edge);
+        yield this.setSubmitting(false);
+    }
+    next() {
+        if (this.isCurrentStepInError()) {
+            const currentStep = this.getCurrentStep();
+            if (currentStep) {
+                this.touched(currentStep.uid);
+            }
         }
-    }, [hour, second, onChange]);
-    const onChangeSecond = useCallback((value) => {
-        setInternalSecond(value);
-        if (value !== '') {
-            onChange(`${String(hour || 0).padStart(2, '0')}:${String(minute || 0).padStart(2, '0')}:${String(value || 0).padStart(2, '0')}`, edge);
+        else {
+            let result = true;
+            if (this.state.onNext) {
+                result = this.state.onNext(this.getCurrentStep(), this.getNextStep());
+            }
+            if (result) {
+                this.activateNext();
+            }
         }
-    }, [hour, minute, onChange]);
-    return (jsxRuntimeExports.jsxs("div", { className: "o-time-selector", children: [displayHours && (jsxRuntimeExports.jsx(TimeSelectorPartComponent, { type: "hour", value: hour, onChange: onChangeHour, size: size }, "hour")), displayHours && (displayMinutes || displaySeconds) && (jsxRuntimeExports.jsx("span", { className: "o-time-separator", children: ":" }, "sep1")), displayMinutes && (jsxRuntimeExports.jsx(TimeSelectorPartComponent, { type: "minute", value: minute, onChange: onChangeMinute, size: size }, "minute")), displaySeconds && (displayHours || displayMinutes) && (jsxRuntimeExports.jsx("span", { className: "o-time-separator", children: ":" }, "sep2")), displaySeconds && (jsxRuntimeExports.jsx(TimeSelectorPartComponent, { type: "second", value: second, onChange: onChangeSecond, size: size }, "second"))] }));
+    }
+    previous() {
+        let result = true;
+        if (this.state.onPrevious) {
+            result = this.state.onPrevious(this.getCurrentStep(), this.getPreviousStep());
+        }
+        if (result) {
+            this.activatePrevious();
+        }
+    }
+    setSubmitting(submitting) {
+        this.state.submitting = submitting;
+    }
 };
+__decorate([
+    reducer,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], WizardService.prototype, "activateNext", null);
+__decorate([
+    reducer,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], WizardService.prototype, "activatePrevious", null);
+__decorate([
+    saga(SagaEffect.Leading)
+    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+    ,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], WizardService.prototype, "done", null);
+__decorate([
+    reducer,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], WizardService.prototype, "next", null);
+__decorate([
+    reducer,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], WizardService.prototype, "previous", null);
+__decorate([
+    reducer,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Boolean]),
+    __metadata("design:returntype", void 0)
+], WizardService.prototype, "setSubmitting", null);
+WizardService = __decorate([
+    service
+], WizardService);
 
-const TimeRangeComponent = ({ edge, onChange, value, displayHours, displayMinutes, displaySeconds, }) => {
-    const valid = isValidDate(`${value.day}-${value.month}-${value.year}`);
-    let d;
-    if (valid) {
-        d = new Date(`${value.year}-${value.month}-${value.day}`);
-    }
-    const label = edge === 'to' ? 'an end' : 'a start';
-    return (jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsx("div", { className: "o-time-edge-title", children: ucfirst(edge) }, "title"), !valid && (jsxRuntimeExports.jsxs("div", { className: "o-time-edge-empty", children: ["Please select ", label, " date for the period"] }, "empty")), valid && d && (jsxRuntimeExports.jsxs("div", { className: "o-time-edge-content", children: [jsxRuntimeExports.jsx("div", { className: "o-time-edge-date-container", children: jsxRuntimeExports.jsx("span", { className: "o-time-edge-date", children: d.toUTCString().split(' ', 4).join(' ') }) }, "date"), jsxRuntimeExports.jsx(TimeSelectorComponent, { value: value, onChange: onChange, size: "small", edge: edge, displayHours: displayHours, displayMinutes: displayMinutes, displaySeconds: displaySeconds }, "selector")] }, "content"))] }));
+const useWizardController = ({ animate = 300, forwardOnly = true, onCancel, onDone, onNext, onPrevious, }) => {
+    const [_, service] = useService(WizardService, {
+        members: [],
+        membersIndex: {},
+        animate,
+        forwardOnly,
+        onCancel,
+        onDone,
+        onNext,
+        onPrevious,
+    });
+    return service;
 };
 
-const TimeComponent = ({ from, to, type, className, onChange, displayHours, displayMinutes, displaySeconds, }) => {
-    if (type['range'] && type['date']) {
-        return (jsxRuntimeExports.jsxs("div", { className: addClassname('o-time-container-range', className), children: [jsxRuntimeExports.jsx(TimeRangeComponent, { type: type, value: from, edge: "from", onChange: onChange, displayHours: displayHours, displayMinutes: displayMinutes, displaySeconds: displaySeconds }), jsxRuntimeExports.jsx(TimeRangeComponent, { type: type, value: to, edge: "to", onChange: onChange, displayHours: displayHours, displayMinutes: displayMinutes, displaySeconds: displaySeconds })] }));
-    }
-    return (jsxRuntimeExports.jsx("div", { className: addClassname('o-time-container', className), children: jsxRuntimeExports.jsx(TimeSelectorComponent, { value: from, onChange: onChange, size: "large", edge: "from", displayHours: displayHours, displayMinutes: displayMinutes, displaySeconds: displaySeconds }, "selector") }));
+const UncontrolledWizardComponent = (props) => {
+    const controller = useWizardController(props);
+    return jsxRuntimeExports.jsx(ControlledWizardComponent, { ...props, controller: controller });
 };
 
-const IconComponent = () => {
-    const { nullable, setOpen, onChange, open } = useDatePickerContext();
-    return (jsxRuntimeExports.jsxs("span", { className: "o-datepicker-icon", children: [nullable && (jsxRuntimeExports.jsx("div", { className: "o-datepicker-remover", onClick: () => {
-                    onChange(null);
-                    setOpen(false);
-                }, children: "\u2716" })), jsxRuntimeExports.jsx(CalendarIcon, { width: "20px", height: "20px", color: "primary", marginRight: "sm", onClick: () => setOpen(!open) })] }));
-};
-const parseDate = (value) => {
-    let date, time, year, month, day, hour, minute, second = undefined;
-    if (value) {
-        [date, time] = value.trim().split(' ');
-        [year, month, day] = date ? date.split('-') : [undefined, undefined, undefined];
-        [hour, minute, second] = time ? time.split(':') : [undefined, undefined, undefined];
-    }
-    return { date, time, year, month, day, hour, minute, second };
-};
-const isValidValue = (value, type) => {
-    const isValidDate = (value) => {
-        const d = new Date(value);
-        return !isNaN(d);
-    };
-    if (!value)
-        return true;
-    if (type.range) {
-        const [from, to] = value.split(' to ');
-        if (!from || !to)
-            return false;
-        return isValidDate(from) && isValidDate(to);
+const WizardComponent = (props) => {
+    if (props.controller) {
+        return jsxRuntimeExports.jsx(ControlledWizardComponent, { ...props, controller: props.controller });
     }
     else {
-        return isValidDate(value);
+        return jsxRuntimeExports.jsx(UncontrolledWizardComponent, { ...props });
     }
 };
-const isSameDate = (d1, d2, type) => {
-    const isSameDate = (d1, d2) => {
-        if (!d1 && !d2)
-            return true;
-        if (!d1 || !d2)
-            return false;
-        const date1 = new Date(`${d1}`);
-        const date2 = new Date(`${d2}`);
-        if (isNaN(date1) || isNaN(date2)) {
-            return false;
-        }
-        return date1.toString() === date2.toString();
-    };
-    if (d1 === null && d2 === null)
-        return true;
-    if (!d1 || !d2)
-        return false;
-    if (type.range) {
-        const [from1, to1] = d1.split(' to ');
-        const [from2, to2] = d2.split(' to ');
-        return isSameDate(from1, from2) && isSameDate(to1, to2);
+
+const wizardStyle = ({ layout = 'vertical', theme, inModal }) => {
+    const t = theme.wizard;
+    const stepBorderWidthFn = layout === 'horizontal' ? borderBottomWidth : borderLeftWidth;
+    const stepBorderStyleFn = layout === 'horizontal' ? borderBottomStyle : borderLeftStyle;
+    const stepBorderColorFn = layout === 'horizontal' ? borderBottomColor : borderLeftColor;
+    const wizardBorderWidthFn = layout === 'horizontal' ? borderBottomWidth : borderRightWidth;
+    const wizardBorderStyleFn = layout === 'horizontal' ? borderBottomStyle : borderRightStyle;
+    const wizardBorderColorFn = layout === 'horizontal' ? borderBottomColor : borderRightColor;
+    return css `
+    ${display('flex')}
+    ${flexDirection(layout === 'horizontal' ? 'column' : 'row')}
+    .o-wizard-step-panel {
+      ${display('flex')}
+      ${flexDirection(layout === 'horizontal' ? 'row' : 'column')}
+      ${alignItems(layout === 'horizontal' ? 'flex-end' : 'stretch')}
+      ${wizardBorderStyleFn(inModal ? t.modalStepsBorderStyle : t.stepsBorderStyle)}
+      ${wizardBorderWidthFn(inModal ? t.modalStepsBorderWidth : t.stepsBorderWidth)}
+      ${wizardBorderColorFn(inModal ? t.modalStepsBorderColor : t.stepsBorderColor)}
+      ${paddingRight(t.stepsPaddingRight)}
+      ${paddingTop(t.stepsPaddingTop)}
+      ${paddingLeft(t.stepsPaddingLeft)}
+      ${paddingBottom(t.stepsPaddingBottom)}
+      ${backgroundColor(inModal ? t.modalStepsBgColor : t.stepsBgColor)}
     }
-    else {
-        return isSameDate(d1, d2);
+
+    .o-step {
+      ${paddingRight(t.paddingRight)}
+      ${paddingTop(t.paddingTop)}
+      ${paddingLeft(t.paddingLeft)}
+      ${paddingBottom(t.paddingBottom)}
+      ${stepBorderStyleFn(t.borderStyle)}
+      ${stepBorderWidthFn(t.borderWidth)}
+      ${stepBorderColorFn(t.borderColor)}
+      ${fontWeight(t.fontWeight)}
+      ${fontSize(t.fontSize)}
+      ${color(t.fontColor)}
     }
-};
-const formatDate = (type, fromDate, fromTime, toDate, toTime) => {
-    const format = (date, time) => {
-        let result = '';
-        if (type.date) {
-            result += `${date || ''}`;
-        }
-        if (type.time) {
-            if (type.date && date) {
-                result += ` ${time || '00:00:00'}`;
-            }
-            else if (type.date && time) {
-                result += ` ${time}`;
-            }
-            else if (time) {
-                result += time;
-            }
-        }
-        return result;
-    };
-    let result = format(fromDate, fromTime);
-    if (type.range) {
-        result += ` to ${format(toDate, toTime)}`;
+
+    .o-step-active {
+      ${stepBorderColorFn(t.activeBorderColor)}
+      ${color(t.activeFontColor)}
+      ${fontWeight(t.activeFontWeight)}
+      ${fontSize(t.activeFontSize)}
+      ${backgroundColor(t.activeBgColor)}
+      &.o-step-enabled {
+        ${cursor('default')}
+      }
+
+      &.o-step-warning {
+        ${stepBorderColorFn(t.warningBorderColor)}
+        ${color(t.warningFontColor)}
+        ${backgroundColor(t.warningBgColor)}
+      }
+      &.o-step-error {
+        ${stepBorderColorFn(t.errorBorderColor)}
+        ${color(t.errorFontColor)}
+        ${backgroundColor(t.errorBgColor)}
+      }
     }
-    return result;
-};
-const PickerComponent = ({ animationMs = 100, attachDropdownToBody = true, autoFocus, className, closeOnQuickSelect = true, combo = false, disabled, dropdownWidthModifier = 'min', label, nullable = false, onBlur: forwardBlur, onChange: forwardChange, onFocus: forwardFocus, openOnFocus = false, placeholder, placement = 'bottom-start', quickRanges, type, displayHours = true, displayMinutes = true, displaySeconds = true, value: externalValue, }) => {
-    const containerRef = useRef(null);
-    const stateRef = useRef({});
-    const dropdownRef = useRef(null);
-    const lastExternalValueRef = useRef(undefined);
-    const currentValueRef = useRef(null);
-    const [open, setOpen] = useState(false);
-    const [focus, setFocus] = useState(false);
-    const [Dropdown, triggerRef] = useDropdown();
-    const [internalValue, setInternalValue] = useState(null);
-    let value = internalValue ? internalValue : externalValue;
-    if (currentValueRef.current !== value && isSameDate(currentValueRef.current, value, type)) {
-        value = currentValueRef.current;
+
+    .o-step-inactive {
+      &.o-step-success,
+      &.o-step-touched {
+        ${stepBorderColorFn(t.successBorderColor)}
+        ${color(t.successFontColor)}
+      }
+      &.o-step-warning {
+        ${stepBorderColorFn(t.warningBorderColor)}
+        ${color(t.warningFontColor)}
+      }
+      &.o-step-error {
+        ${stepBorderColorFn(t.errorBorderColor)}
+        ${color(t.errorFontColor)}
+      }
     }
-    const [fromString, toString] = value ? value.split(/ to\s*/) : [];
-    const validFromRef = useRef(undefined);
-    const validToRef = useRef(undefined);
-    if (!fromString || /\s*/.test(fromString)) {
-        validFromRef.current = undefined;
+
+    .o-step-enabled {
+      ${cursor(t.cursor)}
     }
-    if (!toString || /\s*/.test(toString)) {
-        validToRef.current = undefined;
+
+    .o-step-disabled,
+    .o-step-untouched {
+      ${cursor('default')}
+      ${stepBorderColorFn(t.disabledBorderColor)}
+      ${color(t.disabledFontColor)}
+      ${fontWeight(t.disabledFontWeight)}
+      ${fontSize(t.disabledFontSize)}
+      ${backgroundColor(t.disabledBgColor)}
     }
-    // this setting is used to detect if the user changes the from or the to
-    const nextSelectEdgeRef = useRef('to');
-    const from = parseDate(fromString?.trim());
-    const previousFrom = parseDate(validFromRef.current);
-    if (!type['date'] || !isValidDate(`${from['day']}-${from['month']}-${from['year']}`)) {
-        from.year = previousFrom.year;
-        from.month = previousFrom.month;
-        from.day = previousFrom.day;
-        from.date = previousFrom.date;
+
+    .o-step-disabled {
+      ${cursor('not-allowed')}
+      ${textDecoration('line-through')}
     }
-    if (type['date'] && isValidDate(`${from['day']}-${from['month']}-${from['year']}`)) {
-        validFromRef.current = `${from['year']}-${from['month']}-${from['day']}`;
+
+    .o-wizard-content-panel {
+      ${display('flex')}
+      ${flexDirection('column')}
+    }
+
+    .o-wizard-content {
+      ${flexGrow(1)}
+      ${padding('lg')}
+      ${paddingBottom(0)}
+      ${paddingRight('3xl')}
+    }
+
+    .o-wizard-control {
+      ${display('flex')}
+      ${justifyContent('flex-end')}
+      ${padding('lg')}
     }
-    if (!type['time'] || !isValidTime(from['time'])) {
-        from.hour = previousFrom.hour;
-        from.minute = previousFrom.minute;
-        from.second = previousFrom.second;
-        from.time = previousFrom.time;
+
+    .o-wizard-control-button {
+      ${marginLeft('sm')}
     }
-    if (type['time'] && isValidTime(`${from['time']}`)) {
-        if (validFromRef.current === undefined) {
-            validFromRef.current = '';
-        }
-        if (type['date']) {
-            validFromRef.current += ' ';
-        }
-        validFromRef.current += `${from['time']}`;
+
+    .o-wizard-title {
+      ${fontSize('2xl')}
+      ${fontWeight('light')}
+      ${color('black')}
+      ${lineHeight('4xl')}
+      ${paddingBottom('md')}
     }
-    const to = parseDate(toString?.trim());
-    const previousTo = parseDate(validToRef.current);
-    if (!type['date'] || !isValidDate(`${to['day']}-${to['month']}-${to['year']}`)) {
-        to.year = previousTo.year;
-        to.month = previousTo.month;
-        to.day = previousTo.day;
-        to.date = previousTo.date;
+
+    .o-step-content-title {
+      ${fontSize('2xl')}
+      ${fontWeight('light')}
+      ${color('black')}
+      ${lineHeight('4xl')}
+      ${paddingBottom('md')}
     }
-    if (type['date'] && isValidDate(`${to['day']}-${to['month']}-${to['year']}`)) {
-        validToRef.current = `${to['year']}-${to['month']}-${to['day']}`;
+  `;
+};
+const wizardModalStyle = () => {
+    return css ``;
+};
+const wizardSummaryStyle = () => {
+    return css `
+    .o-accordion-panel {
+      ${paddingBottom('md')}
     }
-    if (!type['time'] || !isValidTime(to['time'])) {
-        to.hour = previousTo.hour;
-        to.minute = previousTo.minute;
-        to.second = previousTo.second;
-        to.time = previousTo.time;
+    .o-accordion-panel-title {
+      ${backgroundColor('lighter')}
     }
-    if (type['time'] && isValidTime(`${to['time']}`)) {
-        if (validToRef.current === undefined) {
-            validToRef.current = '';
-        }
-        if (type['date']) {
-            validToRef.current += ' ';
-        }
-        validToRef.current += `${to['time']}`;
+    .o-accordion-content {
+      ${paddingX('sm')}
+      ${paddingBottom('sm')}
     }
-    const id = useId();
-    const onFocus = useCallback(() => {
-        if (!focus) {
-            setFocus(true);
-            if (openOnFocus && !open) {
-                setOpen(true);
-            }
-            if (forwardFocus) {
-                forwardFocus();
-            }
-        }
-    }, [focus, forwardFocus, openOnFocus, open]);
-    const onBlur = useCallback(() => {
-        if (!stateRef.current.keepFocus) {
-            if (open) {
-                setOpen(false);
-            }
-            if (focus) {
-                setFocus(false);
-                if (forwardBlur) {
-                    forwardBlur();
-                }
-            }
-        }
-    }, [open, forwardBlur, setOpen, focus]);
-    const onChange = useCallback((nextValue, label) => {
-        currentValueRef.current = nextValue;
-        // check if the nextValue is a valid value
-        // if it's not a valid value, we keep it internally
-        if (forwardChange && isValidValue(nextValue, type)) {
-            setInternalValue(null);
-            forwardChange(nextValue, label);
-        }
-        else {
-            setInternalValue(nextValue);
-        }
-    }, [forwardChange, setInternalValue, type]);
-    const onChangeDate = (fromDate, toDate) => {
-        if (fromDate === undefined) {
-            fromDate = from['date'];
-        }
-        if (toDate === undefined) {
-            toDate = to['date'];
-        }
-        if (fromDate !== from['date']) {
-            nextSelectEdgeRef.current = 'to';
-        }
-        else {
-            nextSelectEdgeRef.current = 'from';
-        }
-        onChange(formatDate(type, fromDate, from['time'], toDate, to['time']));
-    };
-    const removeLabel = () => {
-        onChangeDate();
-    };
-    const onChangeTime = (nextTime, edge) => {
-        if (edge === 'from') {
-            onChange(formatDate(type, from['date'], nextTime, to['date'], to['time']));
-        }
-        else {
-            onChange(formatDate(type, from['date'], from['time'], to['date'], nextTime));
-        }
-    };
-    const onChangeQuickRange = (quickRangeLabel) => {
-        if (quickRanges) {
-            const quickRange = quickRanges[quickRangeLabel];
-            if (quickRange) {
-                onChange(`${quickRange.from} to ${quickRange.to}`, quickRangeLabel);
-            }
-            if (closeOnQuickSelect) {
-                setOpen(false);
-            }
-        }
-    };
-    const onOpen = useCallback(() => {
-        eventLocks.lock('escape', id);
-    }, [id]);
-    const onClosed = useCallback(() => {
-        eventLocks.unlock('escape', id);
-        if (lastExternalValueRef.current !== undefined) {
-            setInternalValue(null);
-        }
-    }, [id]);
-    useClickOutside([containerRef, dropdownRef], onBlur);
-    useFocusOutside([containerRef, dropdownRef], onBlur);
-    const context = useMemo(() => {
-        return {
-            open,
-            setOpen,
-            triggerRef,
-            nullable,
-            onChange,
-        };
-    }, [open, setOpen, triggerRef, nullable, onChange]);
-    useEffect(() => {
-        if (forwardChange &&
-            lastExternalValueRef.current !== undefined &&
-            externalValue !== undefined &&
-            externalValue !== lastExternalValueRef.current) {
-            // case when we block the onChange due to a wrong internal value
-            // and the value is changed from the exterior (not due to change done internally)
-            setInternalValue(null);
-        }
-        lastExternalValueRef.current = externalValue;
-    });
-    return (jsxRuntimeExports.jsx(DefaultDatePickerContext.Provider, { value: context, children: jsxRuntimeExports.jsxs("div", { className: addClassname('o-datepicker', className), ref: containerRef, onMouseDown: () => (stateRef.current.keepFocus = true), onMouseUp: () => (stateRef.current.keepFocus = false), children: [jsxRuntimeExports.jsx(Dropdown, { attachToBody: attachDropdownToBody, open: open, distance: 0, animationTimeout: animationMs, onDropStart: onOpen, onCollapseDone: onClosed, placement: placement, widthModifier: dropdownWidthModifier, className: className, zIndex: attachDropdownToBody ? 2000 : undefined, children: jsxRuntimeExports.jsxs("div", { ref: dropdownRef, className: `o-datepicker-dropdown-content${type['range'] ? ' o-datepicker-range' : ''}${validFromRef.current !== undefined ? ' o-datepicker-active' : ''}`, children: [type['range'] && quickRanges && Object.keys(quickRanges).length > 0 && (jsxRuntimeExports.jsx(QuickTimeRangeComponent, { quickRanges: quickRanges, onChange: onChangeQuickRange, currentQuickRangeLabel: label }, "quick_range")), type['date'] && (jsxRuntimeExports.jsx("div", { className: "o-calendar", children: jsxRuntimeExports.jsx(CalendarComponent, { from: from, to: to, type: type, onChange: onChangeDate, nextSelectEdge: nextSelectEdgeRef.current }) }, "calendar")), type['time'] && (jsxRuntimeExports.jsx("div", { className: "o-time", children: jsxRuntimeExports.jsx(TimeComponent, { from: from, to: to, type: type, onChange: onChangeTime, displayHours: displayHours, displayMinutes: displayMinutes, displaySeconds: displaySeconds }) }, "time"))] }) }), jsxRuntimeExports.jsx("span", { ref: triggerRef, children: jsxRuntimeExports.jsx(Input, { className: "o-datepicker-input", placeholder: placeholder, onChange: (e) => onChange(e.target.value), value: label ? label : !value ? '' : value, onFocus: onFocus, onBlur: onBlur, autoFocus: autoFocus, disabled: disabled, SuffixComponent: IconComponent, readOnly: !combo, onClick: () => {
-                            if (!open) {
-                                setOpen(true);
-                            }
-                            else if (combo) {
-                                removeLabel();
-                            }
-                            else {
-                                setOpen(false);
-                            }
-                        } }) }, "input")] }) }));
+  `;
 };
 
-const type$5 = {
-    date: true,
-    time: false,
-    range: false,
-};
-const DatePickerComponent = (props) => {
-    const { onChange: forwardChange, value: externalValue, adapter, ...datePickerProps } = props;
-    const onChange = forwardChange
-        ? (value) => {
-            if (value === null || !adapter) {
-                forwardChange(value);
-            }
-            else {
-                forwardChange(adapter.fromDate(value));
-            }
+const Wizard = styled(WizardComponent) `
+  ${wizardStyle}
+`;
+
+const useStep = (props) => {
+    const service = useWizardService();
+    const state = useWizardState();
+    const step = state.members[state.membersIndex[props.uid]];
+    useEffect(() => {
+        if (step === undefined) {
+            service.initMember(Object.assign({ uid: props.uid }, props));
         }
-        : undefined;
-    let value = externalValue
-        ? adapter
-            ? adapter.toDate(externalValue)
-            : externalValue
-        : null;
-    return jsxRuntimeExports.jsx(PickerComponent, { ...datePickerProps, value: value, onChange: onChange, type: type$5 });
+    }, [props, service, step]);
+    return step;
 };
 
-const type$4 = {
-    date: true,
-    time: false,
-    range: true,
-};
-const DateRangePickerComponent = (props) => {
-    const { onChange: forwardChange, value: externalValue, adapter, ...datePickerProps } = props;
-    const onChange = forwardChange
-        ? (value, label) => {
-            const dateRange = toDateRange(value, label);
-            if (dateRange === null || !adapter) {
-                forwardChange(dateRange);
-            }
-            else {
-                forwardChange(adapter.fromDateRange(dateRange));
-            }
-        }
-        : undefined;
-    let value = null;
-    let valueLabel;
-    if (externalValue) {
-        if (adapter) {
-            const { from, to, label } = adapter.toDateRange(externalValue);
-            value = `${from || ''} to ${to || ''}`;
-            valueLabel = label;
-        }
-        else {
-            value = `${externalValue.from || ''} to ${externalValue.to || ''}`;
-            valueLabel = externalValue.label;
+const Step = ({ title, active = false, disabled = false, visible = true, closable = false, children, icon, uid, optional = false, showTitle = true, className, onTouch, help, }) => {
+    const { animate, forwardOnly } = useWizardState();
+    const stepRef = useRef(null);
+    const step = useStep({
+        title,
+        active,
+        disabled,
+        visible,
+        closable,
+        icon,
+        loading: false,
+        optional,
+        touched: !forwardOnly,
+        touching: !forwardOnly,
+        uid: uid === undefined ? title : uid,
+    });
+    const touched = step?.touched;
+    const onEnter = () => {
+        const node = stepRef.current;
+        if (!node)
+            return;
+        node.style.opacity = '0';
+    };
+    const onEntering = () => {
+        const node = stepRef.current;
+        if (!node)
+            return;
+        setTimeout(() => {
+            node.style.opacity = '1';
+            node.style.transition = `opacity ${animate}ms ease-in-out`;
+        }, 0);
+    };
+    useEffect(() => {
+        if (touched && onTouch) {
+            onTouch();
         }
+    }, [touched, onTouch]);
+    if (!step || !step.active) {
+        return null;
     }
-    return jsxRuntimeExports.jsx(PickerComponent, { ...datePickerProps, value: value, onChange: onChange, type: type$4, label: valueLabel });
+    return (jsxRuntimeExports.jsx(CSSTransition, { in: true, nodeRef: stepRef, timeout: animate, appear: true, onEnter: onEnter, onEntering: onEntering, children: jsxRuntimeExports.jsxs("div", { ref: stepRef, className: addClassname('o-step-content', className), children: [showTitle && jsxRuntimeExports.jsx("div", { className: "o-step-content-title", children: title }), help && (jsxRuntimeExports.jsx(Alert, { kind: "info", marginBottom: "lg", children: help })), children] }) }));
 };
 
-const type$3 = {
-    date: true,
-    time: true,
-    range: false,
-};
-const DateTimePickerComponent = (props) => {
-    const { onChange: forwardChange, value: externalValue, adapter, ...datePickerProps } = props;
-    const onChange = forwardChange
-        ? (value) => {
-            if (value === null || !adapter) {
-                forwardChange(value);
+const FormStep = ({ name, disabled = false, visible = true, ...stepProps }) => {
+    const decorator = useFormDecorator(name, {
+        Displayer: (displayerProps) => {
+            const total = Object.values(displayerProps.children ?? {}).length;
+            return (jsxRuntimeExports.jsx(AccordionPanel, { title: stepProps.title, initialActive: displayerProps.index === 0, initialExpand: displayerProps.index === 0, children: Object.values(displayerProps.children ?? {}).map((field, index) => {
+                    const Displayer = field.Displayer ?? DefaultDisplayer;
+                    return (createElement(Displayer, { ...field, index: index, key: `field-${index}`, first: index === 0, last: index === total - 1, format: displayerProps.format }));
+                }) }));
+        },
+    });
+    const metadata = useFormMetadata(decorator.name);
+    const service = useWizardService();
+    const fieldContainer = useFieldContainer({
+        container: name,
+        onValidationChange: (touchedValidation, allValidation) => {
+            service.onValidationChange(name, touchedValidation, allValidation);
+        },
+    });
+    const { touchAllFields, hide, show, disable, enable } = fieldContainer;
+    const initializedRef = useRef(false);
+    useEffect(() => {
+        const visible = metadata.visible ?? true;
+        const disabled = metadata.disabled ?? false;
+        if (!visible) {
+            if (disabled) {
+                service.disable(name);
+                disable();
             }
             else {
-                forwardChange(adapter.fromDate(value));
+                service.enable(name);
+                if (initializedRef.current === true) {
+                    // we only use the enable method if this is a change and not a initialization
+                    enable();
+                }
             }
+            service.hide(name);
+            hide();
         }
-        : undefined;
-    let value = externalValue
-        ? adapter
-            ? adapter.toDate(externalValue)
-            : externalValue
-        : null;
-    return jsxRuntimeExports.jsx(PickerComponent, { ...datePickerProps, value: value, onChange: onChange, type: type$3 });
-};
-
-const type$2 = {
-    date: true,
-    time: true,
-    range: true,
-};
-const DateTimeRangePickerComponent = (props) => {
-    const { onChange: forwardChange, value: externalValue, adapter, ...datePickerProps } = props;
-    const onChange = forwardChange
-        ? (value, label) => {
-            const dateRange = toDateRange(value, label);
-            if (dateRange === null || !adapter) {
-                forwardChange(dateRange);
+        else {
+            service.show(name);
+            if (initializedRef.current === true) {
+                // we only use the show method if this is a change and not a initialization
+                show();
+            }
+            if (disabled) {
+                service.disable(name);
+                disable();
             }
             else {
-                forwardChange(adapter.fromDateRange(dateRange));
+                service.enable(name);
+                if (initializedRef.current === true) {
+                    // we only use the enable method if this is a change and not a initialization
+                    enable();
+                }
             }
         }
-        : undefined;
-    let value = null;
-    let valueLabel;
-    if (externalValue) {
-        if (adapter) {
-            const { from, to, label } = adapter.toDateRange(externalValue);
-            value = `${from || ''} to ${to || ''}`;
-            valueLabel = label;
-        }
-        else {
-            value = `${externalValue.from || ''} to ${externalValue.to || ''}`;
-            valueLabel = externalValue.label;
-        }
-    }
-    return jsxRuntimeExports.jsx(PickerComponent, { ...datePickerProps, value: value, onChange: onChange, type: type$2, label: valueLabel });
+        initializedRef.current = true;
+    }, [name, metadata.visible, metadata.disabled]);
+    // useEffect(() => {
+    //   if (!visible) {
+    //     if (disabled) {
+    //       disable();
+    //     } else {
+    //       enable();
+    //     }
+    //     hide();
+    //   } else {
+    //     show();
+    //     if (disabled) {
+    //       disable();
+    //     } else {
+    //       enable();
+    //     }
+    //   }
+    // }, [visible, disabled, hide, show, disable, enable]);
+    return (jsxRuntimeExports.jsx(FormContext.Provider, { value: fieldContainer.context, children: jsxRuntimeExports.jsx(Step, { ...stepProps, uid: name, onTouch: touchAllFields }) }));
 };
 
-const type$1 = {
-    date: false,
-    time: true,
-    range: false,
-};
-const TimePickerComponent = (props) => {
-    return jsxRuntimeExports.jsx(PickerComponent, { ...props, type: type$1 });
+const WizardModalComponent = ({ title, doneLabel = 'Submit', ...props }) => {
+    return (jsxRuntimeExports.jsx(Modal, { ...props, children: jsxRuntimeExports.jsx(Wizard, { ...props, title: title, doneLabel: doneLabel, inModal: true }) }));
 };
 
-const type = {
-    date: false,
-    time: true,
-    range: true,
-};
-const TimeRangePickerComponent = (props) => {
-    return jsxRuntimeExports.jsx(PickerComponent, { ...props, type: type });
+const WizardSummaryComponent = ({ className }) => {
+    const form = useForm();
+    const tree = Object.values(form.getDisplayerTree());
+    return (jsxRuntimeExports.jsx(Accordion, { className: className, children: tree.map((field, index) => {
+            const Displayer = field.Displayer || DefaultDisplayer;
+            return (createElement(Displayer, { ...field, index: index, key: `field-${index}`, first: index === 0, last: index === tree.length - 1, format: "form_summary" }));
+        }) }));
 };
 
-const DatePicker = styled(DatePickerComponent) `
-  ${datePickerStyle}
-`;
-const DateRangePicker = styled(DateRangePickerComponent) `
-  ${datePickerStyle}
-`;
-const DateTimePicker = styled(DateTimePickerComponent) `
-  ${datePickerStyle}
-`;
-const DateTimeRangePicker = styled(DateTimeRangePickerComponent) `
-  ${datePickerStyle}
-`;
-const TimePicker = styled(TimePickerComponent) `
-  ${datePickerStyle}
-`;
-const TimeRangePicker = styled(TimeRangePickerComponent) `
-  ${datePickerStyle}
+const WizardModal = styled(WizardModalComponent) `
+  ${wizardModalStyle}
 `;
 
-const useQuickRanges = (ranges) => {
-    const result = useLazyRef(() => {
-        if (!Array.isArray(ranges)) {
-            ranges = [ranges];
-        }
-        const quickRanges = ranges.reduce((accumulator, range) => {
-            if (typeof range === 'string') {
-                if (range === 'all') {
-                    accumulator = Object.assign(accumulator, defaultQuickRanges());
-                }
-                else {
-                    const dateRange = qr(range);
-                    if (dateRange !== null) {
-                        accumulator[range] = dateRange;
-                    }
-                }
-            }
-            else {
-                accumulator[range.label] = range;
-            }
-            return accumulator;
-        }, {});
-        const target = Object.keys(quickRanges).reduce((accumulator, label) => {
-            accumulator[label] = {
-                from: null,
-                to: null,
-                label,
-            };
-            return accumulator;
-        }, {});
-        const handler = {
-            get: function (_, prop) {
-                if (typeof prop === 'string') {
-                    const quickRange = quickRanges[prop];
-                    if (quickRange) {
-                        return {
-                            from: dateToString(quickRange.from),
-                            to: dateToString(quickRange.to),
-                            label: quickRange.label,
-                        };
-                    }
-                }
-                return undefined;
-            },
-        };
-        return new Proxy(target, handler);
-    });
-    return result.current;
-};
-
-const useDateRangeAdapter = () => {
-    const ref = useRef({
-        fromDateRange: (range) => {
-            return {
-                from: range.from === null ? null : new Date(range.from),
-                to: range.to === null ? null : new Date(range.to),
-                label: range.label,
-            };
-        },
-        toDateRange: (value) => {
-            return {
-                from: !value.from ? null : dateToString(value.from),
-                to: !value.to ? null : dateToString(value.to),
-                label: value.label,
-            };
-        },
-    });
-    return ref.current;
-};
-
-const useTimestampRangeAdapter = (format = 'milliseconds') => {
-    const toTimestamp = (date) => {
-        if (!date)
-            return null;
-        const d = new Date(date);
-        if (isNaN(d))
-            return null;
-        const timestamp = d.getTime();
-        return format === 'milliseconds' ? timestamp : Math.floor(timestamp / 1000);
-    };
-    const fromTimestamp = (timestamp) => {
-        if (timestamp === null || timestamp === undefined)
-            return null;
-        if (format === 'seconds') {
-            timestamp = timestamp * 1000;
-        }
-        const d = new Date(timestamp);
-        if (isNaN(d))
-            return null;
-        return dateToString(d);
-    };
-    const ref = useRef({
-        fromDateRange: (range) => {
-            return {
-                from: toTimestamp(range.from),
-                to: toTimestamp(range.to),
-                label: range.label,
-            };
-        },
-        toDateRange: (value) => {
-            return {
-                from: fromTimestamp(value.from),
-                to: fromTimestamp(value.to),
-                label: value.label,
-            };
-        },
-    });
-    return ref.current;
-};
+const WizardSummary = styled(WizardSummaryComponent) `
+  ${wizardSummaryStyle}
+`;
 
 const animation = cssProperty('animation');
 const animationDelay = cssProperty('animation-delay');
@@ -14573,5 +14753,5 @@ const sameWidthPopperModifier = refWidth('width');
 const minWidthPopperModifier = refWidth('minWidth');
 const maxWidthPopperModifier = refWidth('maxWidth');
 
-export { Accordion, AccordionComponent, AccordionContainer, AccordionPanel, Alert, AlertComponent, ArraySelectComponent, ArrayTreeComponent, ArrayTreeSelectComponent, AutoComplete, BaseTheme, BreakpointKeys, Button, CalendarComponent, Card, CardComponent, CardTitle, Checkbox, CheckboxCellComponent, CheckboxComponent, CloseAllIcon, Col, ColorKeys, ContextMenu, ContextMenuComponent, ControlledSelectComponent, ControlledTimerComponent, ControlledWizardComponent, ControllerTreeComponent, CrossIcon, Dashboard, DashboardBody, DashboardContainer, DashboardFooter, DashboardHeader, DashboardKeys, DashboardLeft, DashboardOverlay, DashboardRight, DashboardService, DashboardServiceContext, DashboardStateContext, DashboardToggler, DatePicker, DatePickerComponent, DateRangePicker, DateRangePickerComponent, DateTimePicker, DateTimePickerComponent, DateTimeRangePicker, DateTimeRangePickerComponent, DefaultCellComponent, DefaultFormCellDisplayer as DefaultCellDisplayer, DefaultDatePickerContext, DefaultSelectBroker, Dropdown, DropdownButton, DropdownComponent, DropdownList, ErrorIcon, ExpandedCellComponent, FieldDescription, FieldDescriptionComponent, FieldDisplayer, FieldHelp, FieldHelpComponent, FieldLayout, FieldLayoutComponent, FileIcon, FolderIcon, FontFamiliesKeys, FontLineHeightKeys, FontSizeKeys, FontSpacingKeys, FontWeightKeys, FormAutoComplete, FormBlock, FormCard, FormCardDisplayer, FormCheckbox, FormInput, FormSelect, FormStep, FormTable, FormTableItemDisplayer, FormTableValueDisplayer, FormTextarea, HelpIcon, Input, InputCellComponent, InputComponent, Label, List, ListItemComponent, ListItemContent, ListStatus, LoadingIcon, LoadingItem, MenuIcon, Modal, ModalComponent, NotificationComponent, Notifications, NotificationsComponent, Password, PasswordComponent, PickerComponent, Properties, PropertiesComponent, Property, RadiusKeys, RefreshIcon, Row, SearchIcon, Select, SelectCellComponent, SelectComponent, SelectIconComponent, SelectInputComponent, SelectNotFoundComponent, SelectOptionComponent, SelectService, SelectTokensComponent, ShadowKeys, SizeKeys, Resizer as Slider, SliderComponent, SpacingKeys, Step, StepTitle, SubmitButton, SuccessIcon, Tab, TabTitle, Table, TableBodyRowComponent, TableFilterOperatorComponent, TableInputFilterComponent, TableNumberFilterComponent, TableTextFilterComponent, Tabs, Tag, TagComponent, TailwindTheme, Textarea, TextareaCellComponent, TextareaComponent, TimePicker, TimePickerComponent, TimeRangePicker, TimeRangePickerComponent, Timer, TimerComponent, TogglerIcon, Tooltip, Tree, TreeBodyComponent, TreeComponent, TreeConfigContext, TreeItemComponent, TreeItemContent, TreeItemToggler, TreeListComponent, TreeSelect, TreeSelectComponent, TreeService, TreeServiceContext, TreeStateContext, TshirtKeys, UncontrolledTimerComponent, UncontrolledWizardComponent, VirtualTreeBodyComponent, VirtualTreeListComponent, Wizard, WizardComponent, WizardContainer, WizardModal, WizardModalComponent, WizardService, WizardSummary, WizardSummaryComponent, accordionStyle, addClassname, addStyle, alertStyle, alignContent, alignItems, alignSelf, animation, animationDelay, animationDirection, animationDuration, animationFillMode, animationIterationCount, animationName, animationPlayState, animationTimingFunction, appearance, applyOpacity, aspectRatio, backgroundAttachment, backgroundClip, backgroundColor, backgroundImage, backgroundOpacity, backgroundOrigin, backgroundPosition, backgroundRepeat, backgroundSize, baseTheme, booleanFormatter, border, borderBottom, borderBottomColor, borderBottomLeftRadius, borderBottomOpacity, borderBottomRightRadius, borderBottomStyle, borderBottomWidth, borderCollapse, borderColor, borderImage, borderImageOutset, borderImageRepeat, borderImageSlice, borderImageSource, borderImageWidth, borderLeft, borderLeftColor, borderLeftOpacity, borderLeftStyle, borderLeftWidth, borderOpacity, borderRadius, borderRight, borderRightColor, borderRightOpacity, borderRightStyle, borderRightWidth, borderSpacing, borderStyle, borderTop, borderTopColor, borderTopLeftRadius, borderTopOpacity, borderTopRightRadius, borderTopStyle, borderTopWidth, borderWidth, bottom, boxShadow, boxSizing, breakAfter, breakBefore, breakInside, buttonStyle, captionSide, cardStyle, caretColor, checkboxColumn, checkboxStyle, clear, colStyle, color, colorFormatter, columnCount, columnFill, columnGap, columnRule, columnRuleColor, columnRuleStyle, columnRuleWidth, columnSpan, columnWidth, columns, container, contextMenuStyle, cssProperty, cursor, darken, dashboardOverlayStyle, datePickerStyle, dateToString, defaultCellSerializer, defaultQuickRanges, defaultTreeQueryEngine, deriveColor, display, dropdownButtonStyle, dropdownStyle, emptyCells, enumColumn, enumFormatter, escapeCsvValue, fieldDescriptionStyle, fieldDisplayerStyle, fieldHelpStyle, fieldStyle, fill, filterListStyle, findQuickRangeLabel, findSelectItem, findSelectItemIndex, flex, flexBasis, flexDirection, flexGrow, flexShrink, flexWrap, float, font, fontFamily, fontFeatureSettings, fontKerning, fontLanguageOverride, fontOpticalSizing, fontSize, fontSizeAdjust, fontStretch, fontStyle, fontSynthesis, fontVariant, fontVariantAlternates, fontVariantCaps, fontVariantEastAsian, fontVariantLigatures, fontVariantNumeric, fontVariantPosition, fontVariationSettings, fontWeight, gap, grid, gridAutoColumns, gridAutoFlow, gridAutoRows, gridColumn, gridColumnEnd, gridColumnGap, gridColumnStart, gridGap, gridRow, gridRowEnd, gridRowGap, gridRowStart, gridTemplate, gridTemplateAreas, gridTemplateColumns, gridTemplateRows, height, hexToRgb, hyphens, iconHeight, iconWidth, imageRendering, inputColumn, justifyContent, justifySelf, left, letterSpacing, lighten, lineHeight, lineHeightStep, linkColumn, listStyle, listStyleImage, listStylePosition, listStyleType, margin, marginBottom, marginLeft, marginRight, marginTop, marginX, marginY, maxHeight, maxWidth, maxWidthPopperModifier, minHeight, minWidth, minWidthPopperModifier, modalStyle, notifcationsStyle, numberColumn, objectFit, objectPosition, opacity, order, orphans, outline, outlineColor, outlineOffset, outlineStyle, outlineWidth, overflow, overflowBlock, overflowInline, overflowWrap, overflowX, overflowY, overscrollBehavior, overscrollBehaviorBlock, overscrollBehaviorInline, overscrollBehaviorX, overscrollBehaviorY, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, paddingX, paddingY, passwordStyle, perspective, perspectiveOrigin, placeContent, placeItems, placeSelf, pointerEvents, position, preflight, propertiesStyle, pxFormatter, qr, resize, rgbToHex, right, rotate, rowGap, rowStyle, sameWidthPopperModifier, scale, selectColumn, shouldCheckSelect, sliderStyle, stroke, strokeWidth, tableLayout, tableStyle, tagStyle, tailwindPalette, tailwindTheme, textAlign, textColumn, textDecoration, textDecorationColor, textDecorationLine, textDecorationStyle, textDecorationThickness, textEmphasis, textEmphasisColor, textEmphasisPosition, textEmphasisStyle, textIdent, textJustify, textOpacity, textOverflow, textShadow, textTransform, textUnderlineOffset, textUnderlinePosition, textareaColumn, themeFormatter, timerStyle, titlelize, toCss, toDateRange, top, touchAction, transform, transformOrigin, transition, transitionDelay, transitionDuration, transitionProperty, transitionTimingFunction, useCheckboxColumn, useClickOutside, useColumns, useDashboard, useDashboardController, useDashboardHorizontalPanel, useDashboardService, useDashboardState, useDashboardVerticalPanel, useDashoardBodyPanel, useDatePickerContext, useDateRangeAdapter, useDropdown, useEnumColumn, useFieldLayout, useFocusOutside, useFormTableContext, useInputColumn$1 as useInputColumn, useLinkColumn, useListController, useInputColumn as useNumberColumn, useQuickRanges, useSelectColumn, useSelectController, useSelectService, useStep, useTab, useTableController, useTableService, useTabsController, useTabsService, useTabsState, useTextColumn, useTextareaColumn, useTimestampRangeAdapter, useTreeConfig, useTreeController, useTreeInitialState, useTreeItemContext, useTreeSelectController, useTreeService, useTreeState, useWizardController, useWizardService, useWizardState, userSelect, verticalAlign, visibility, whiteSpace, widows, width, wizardModalStyle, wizardStyle, wizardSummaryStyle, wordBreak, wordSpacing, zIndex, zoom };
+export { Accordion, AccordionComponent, AccordionContainer, AccordionPanel, Alert, AlertComponent, ArraySelectComponent, ArrayTreeComponent, ArrayTreeSelectComponent, AutoComplete, BaseTheme, BreakpointKeys, Button, CalendarComponent, Card, CardComponent, CardTitle, Checkbox, CheckboxCellComponent, CheckboxComponent, CloseAllIcon, Col, ColorKeys, ContextMenu, ContextMenuComponent, ControlledSelectComponent, ControlledTimerComponent, ControlledWizardComponent, ControllerTreeComponent, CrossIcon, Dashboard, DashboardBody, DashboardContainer, DashboardFooter, DashboardHeader, DashboardKeys, DashboardLeft, DashboardOverlay, DashboardRight, DashboardService, DashboardServiceContext, DashboardStateContext, DashboardToggler, DatePicker, DatePickerComponent, DateRangePicker, DateRangePickerComponent, DateTimePicker, DateTimePickerComponent, DateTimeRangePicker, DateTimeRangePickerComponent, DefaultCellComponent, DefaultFormCellDisplayer as DefaultCellDisplayer, DefaultDatePickerContext, DefaultSelectBroker, Dropdown, DropdownButton, DropdownComponent, DropdownList, ErrorIcon, ExpandedCellComponent, FieldDescription, FieldDescriptionComponent, FieldDisplayer, FieldHelp, FieldHelpComponent, FieldLayout, FieldLayoutComponent, FileIcon, FolderIcon, FontFamiliesKeys, FontLineHeightKeys, FontSizeKeys, FontSpacingKeys, FontWeightKeys, FormAutoComplete, FormBlock, FormCard, FormCardDisplayer, FormCheckbox, FormDatePicker, FormDateRangePicker, FormDateTimePicker, FormDateTimeRangePicker, FormInput, FormSelect, FormStep, FormTable, FormTableItemDisplayer, FormTableValueDisplayer, FormTextarea, HelpIcon, Input, InputCellComponent, InputComponent, Label, List, ListItemComponent, ListItemContent, ListStatus, LoadingIcon, LoadingItem, MenuIcon, Modal, ModalComponent, NotificationComponent, Notifications, NotificationsComponent, Password, PasswordComponent, PickerComponent, Properties, PropertiesComponent, Property, RadiusKeys, RefreshIcon, Row, SearchIcon, Select, SelectCellComponent, SelectComponent, SelectIconComponent, SelectInputComponent, SelectNotFoundComponent, SelectOptionComponent, SelectService, SelectTokensComponent, ShadowKeys, SizeKeys, Resizer as Slider, SliderComponent, SpacingKeys, Step, StepTitle, SubmitButton, SuccessIcon, Tab, TabTitle, Table, TableBodyRowComponent, TableFilterOperatorComponent, TableInputFilterComponent, TableNumberFilterComponent, TableTextFilterComponent, Tabs, Tag, TagComponent, TailwindTheme, Textarea, TextareaCellComponent, TextareaComponent, TimePicker, TimePickerComponent, TimeRangePicker, TimeRangePickerComponent, Timer, TimerComponent, TogglerIcon, Tooltip, Tree, TreeBodyComponent, TreeComponent, TreeConfigContext, TreeItemComponent, TreeItemContent, TreeItemToggler, TreeListComponent, TreeSelect, TreeSelectComponent, TreeService, TreeServiceContext, TreeStateContext, TshirtKeys, UncontrolledTimerComponent, UncontrolledWizardComponent, VirtualTreeBodyComponent, VirtualTreeListComponent, Wizard, WizardComponent, WizardContainer, WizardModal, WizardModalComponent, WizardService, WizardSummary, WizardSummaryComponent, accordionStyle, addClassname, addStyle, alertStyle, alignContent, alignItems, alignSelf, animation, animationDelay, animationDirection, animationDuration, animationFillMode, animationIterationCount, animationName, animationPlayState, animationTimingFunction, appearance, applyOpacity, aspectRatio, backgroundAttachment, backgroundClip, backgroundColor, backgroundImage, backgroundOpacity, backgroundOrigin, backgroundPosition, backgroundRepeat, backgroundSize, baseTheme, booleanFormatter, border, borderBottom, borderBottomColor, borderBottomLeftRadius, borderBottomOpacity, borderBottomRightRadius, borderBottomStyle, borderBottomWidth, borderCollapse, borderColor, borderImage, borderImageOutset, borderImageRepeat, borderImageSlice, borderImageSource, borderImageWidth, borderLeft, borderLeftColor, borderLeftOpacity, borderLeftStyle, borderLeftWidth, borderOpacity, borderRadius, borderRight, borderRightColor, borderRightOpacity, borderRightStyle, borderRightWidth, borderSpacing, borderStyle, borderTop, borderTopColor, borderTopLeftRadius, borderTopOpacity, borderTopRightRadius, borderTopStyle, borderTopWidth, borderWidth, bottom, boxShadow, boxSizing, breakAfter, breakBefore, breakInside, buttonStyle, captionSide, cardStyle, caretColor, checkboxColumn, checkboxStyle, clear, colStyle, color, colorFormatter, columnCount, columnFill, columnGap, columnRule, columnRuleColor, columnRuleStyle, columnRuleWidth, columnSpan, columnWidth, columns, container, contextMenuStyle, cssProperty, cursor, darken, dashboardOverlayStyle, datePickerStyle, dateRangeAdapter, dateToString, defaultCellSerializer, defaultQuickRanges, defaultTreeQueryEngine, deriveColor, display, dropdownButtonStyle, dropdownStyle, emptyCells, enumColumn, enumFormatter, escapeCsvValue, fieldDescriptionStyle, fieldDisplayerStyle, fieldHelpStyle, fieldStyle, fill, filterListStyle, findQuickRangeLabel, findSelectItem, findSelectItemIndex, flex, flexBasis, flexDirection, flexGrow, flexShrink, flexWrap, float, font, fontFamily, fontFeatureSettings, fontKerning, fontLanguageOverride, fontOpticalSizing, fontSize, fontSizeAdjust, fontStretch, fontStyle, fontSynthesis, fontVariant, fontVariantAlternates, fontVariantCaps, fontVariantEastAsian, fontVariantLigatures, fontVariantNumeric, fontVariantPosition, fontVariationSettings, fontWeight, gap, grid, gridAutoColumns, gridAutoFlow, gridAutoRows, gridColumn, gridColumnEnd, gridColumnGap, gridColumnStart, gridGap, gridRow, gridRowEnd, gridRowGap, gridRowStart, gridTemplate, gridTemplateAreas, gridTemplateColumns, gridTemplateRows, height, hexToRgb, hyphens, iconHeight, iconWidth, imageRendering, inputColumn, justifyContent, justifySelf, left, letterSpacing, lighten, lineHeight, lineHeightStep, linkColumn, listStyle, listStyleImage, listStylePosition, listStyleType, margin, marginBottom, marginLeft, marginRight, marginTop, marginX, marginY, maxHeight, maxWidth, maxWidthPopperModifier, minHeight, minWidth, minWidthPopperModifier, modalStyle, notifcationsStyle, numberColumn, objectFit, objectPosition, opacity, order, orphans, outline, outlineColor, outlineOffset, outlineStyle, outlineWidth, overflow, overflowBlock, overflowInline, overflowWrap, overflowX, overflowY, overscrollBehavior, overscrollBehaviorBlock, overscrollBehaviorInline, overscrollBehaviorX, overscrollBehaviorY, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, paddingX, paddingY, passwordStyle, perspective, perspectiveOrigin, placeContent, placeItems, placeSelf, pointerEvents, position, preflight, propertiesStyle, pxFormatter, qr, resize, rgbToHex, right, rotate, rowGap, rowStyle, sameWidthPopperModifier, scale, selectColumn, shouldCheckSelect, sliderStyle, stroke, strokeWidth, tableLayout, tableStyle, tagStyle, tailwindPalette, tailwindTheme, textAlign, textColumn, textDecoration, textDecorationColor, textDecorationLine, textDecorationStyle, textDecorationThickness, textEmphasis, textEmphasisColor, textEmphasisPosition, textEmphasisStyle, textIdent, textJustify, textOpacity, textOverflow, textShadow, textTransform, textUnderlineOffset, textUnderlinePosition, textareaColumn, themeFormatter, timerStyle, timestampMilliSecondRangeAdapter, timestampRangeAdapter, timestampSecondRangeAdapter, titlelize, toCss, toDateRange, top, touchAction, transform, transformOrigin, transition, transitionDelay, transitionDuration, transitionProperty, transitionTimingFunction, useCheckboxColumn, useClickOutside, useColumns, useDashboard, useDashboardController, useDashboardHorizontalPanel, useDashboardService, useDashboardState, useDashboardVerticalPanel, useDashoardBodyPanel, useDatePickerContext, useDateRangeAdapter, useDropdown, useEnumColumn, useFieldLayout, useFocusOutside, useFormTableContext, useInputColumn$1 as useInputColumn, useLinkColumn, useListController, useInputColumn as useNumberColumn, useQuickRanges, useSelectColumn, useSelectController, useSelectService, useStep, useTab, useTableController, useTableService, useTabsController, useTabsService, useTabsState, useTextColumn, useTextareaColumn, useTimestampRangeAdapter, useTreeConfig, useTreeController, useTreeInitialState, useTreeItemContext, useTreeSelectController, useTreeService, useTreeState, useWizardController, useWizardService, useWizardState, userSelect, verticalAlign, visibility, whiteSpace, widows, width, wizardModalStyle, wizardStyle, wizardSummaryStyle, wordBreak, wordSpacing, zIndex, zoom };
 //# sourceMappingURL=index.module.js.map