onekijs-ui 1.0.4 → 1.0.6

package/dist/index.js

@@ -1692,8 +1692,9 @@ const DropdownButtonComponent = ({ animationTimeout = 100, attachDropdownToBody
     const classNames = addClassname('o-button-dropdown', className);
     const ref = React.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 = React.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) `
@@ -2096,25 +2097,6 @@ const Card = styled(CardComponent) `
   ${cardStyle}
 `;
 
-const titlelize = (value) => {
-    return value
-        .split('_')
-        .map((v) => onekijsFramework.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 ?? onekijsFramework.DefaultDisplayer;
-                return (React.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;
@@ -2308,15 +2290,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 ?? onekijsFramework.DefaultDisplayer;
+            return React.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 = onekijsFramework.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 = onekijsFramework.useForm();
     const metadata = onekijsFramework.useFormMetadata(decorator.name);
     const fieldContainer = onekijsFramework.useFieldContainer({
         container: name,
@@ -2358,28 +2350,37 @@ const FormCard = ({ name, help, children, visible, disabled, ...cardProps }) =>
     if (metadata.visible === false) {
         return null;
     }
-    return (jsxRuntimeExports.jsx(onekijsFramework.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(onekijsFramework.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) => onekijsFramework.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 ?? onekijsFramework.DefaultDisplayer;
-            return React.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 ?? onekijsFramework.DefaultDisplayer;
+                return (React.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 = onekijsFramework.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 = onekijsFramework.useForm();
     const metadata = onekijsFramework.useFormMetadata(decorator.name);
     const fieldContainer = onekijsFramework.useFieldContainer({
         container: name,
@@ -2421,7 +2422,7 @@ const FormBlock = ({ name, help, children, visible, disabled, className }) => {
     if (metadata.visible === false) {
         return null;
     }
-    return (jsxRuntimeExports.jsx(onekijsFramework.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(onekijsFramework.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 }) => {
@@ -3048,6 +3049,76 @@ const FormCheckbox = React.memo((props) => {
 });
 FormCheckbox.displayName = 'FormCheckbox';
 
+const contextMenuStyle = () => {
+    return styled.css `
+    ${preflight()}
+    ${zIndex(9999)}
+  `;
+};
+
+const ContextMenuComponent = ({ refElement, className, children, offsetX = 0, offsetY = 0 }) => {
+    const [visible, setVisible] = React.useState(false);
+    const { floatingStyles, refs } = react.useFloating({
+        placement: 'bottom-start',
+        middleware: [react.offset({ crossAxis: offsetX, mainAxis: offsetY }), react.flip(), react.shift()],
+        whileElementsMounted: react.autoUpdate,
+    });
+    // Handle the right-click event
+    const handleContextMenu = React.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
+    React.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 = () => {
@@ -4620,24 +4691,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', }) => styled.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 = React.useContext(DashboardStateContext);
     return area === 'header' ? state.header : state.footer;
@@ -4651,76 +4704,6 @@ const useDashoardBodyPanel = () => {
     return state.body;
 };
 
-const contextMenuStyle = () => {
-    return styled.css `
-    ${preflight()}
-    ${zIndex(9999)}
-  `;
-};
-
-const ContextMenuComponent = ({ refElement, className, children, offsetX = 0, offsetY = 0 }) => {
-    const [visible, setVisible] = React.useState(false);
-    const { floatingStyles, refs } = react.useFloating({
-        placement: 'bottom-start',
-        middleware: [react.offset({ crossAxis: offsetX, mainAxis: offsetY }), react.flip(), react.shift()],
-        whileElementsMounted: react.autoUpdate,
-    });
-    // Handle the right-click event
-    const handleContextMenu = React.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
-    React.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" })] }) }));
 };
@@ -4797,6 +4780,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', }) => styled.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" }) }) }));
 };
@@ -8356,16 +8357,6 @@ const FormAutoComplete = (props) => {
     return (jsxRuntimeExports.jsx(FormSelect$1, { NotFoundComponent: null, IconComponent: null, autoCompleteAdapter: adapter, openOnFocus: true, ...props, mode: "autocomplete", autoCompleteSearch: false, validateValue: false, searchable: true, clickable: false }));
 };
 
-class DefaultSelectBroker extends onekijsFramework.DefaultCollectionBroker {
-    defaultValue;
-    setDefaultValue(defaultValue, subscriberId) {
-        if (subscriberId === undefined) {
-            this.defaultValue = defaultValue;
-        }
-        this._getSubscribers(subscriberId).forEach((s) => s.setDefaultValue(defaultValue));
-    }
-}
-
 const useTreeInitialState = (dataSource, options) => {
     return onekijsFramework.useCollectionInitialState(dataSource, options);
 };
@@ -9500,11 +9491,21 @@ const TreeSelectComponent = (props) => {
 TreeSelectComponent.displayName = 'TreeSelectComponent';
 var TreeSelectComponent$1 = React.memo(TreeSelectComponent);
 
-const TreeSelect = styled(TreeSelectComponent$1) `
-  ${selectStyle}
-`;
-
-// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+class DefaultSelectBroker extends onekijsFramework.DefaultCollectionBroker {
+    defaultValue;
+    setDefaultValue(defaultValue, subscriberId) {
+        if (subscriberId === undefined) {
+            this.defaultValue = defaultValue;
+        }
+        this._getSubscribers(subscriberId).forEach((s) => s.setDefaultValue(defaultValue));
+    }
+}
+
+const TreeSelect = styled(TreeSelectComponent$1) `
+  ${selectStyle}
+`;
+
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 const TabsServiceContext = React.createContext(null);
 const useTabsService = () => {
     return React.useContext(TabsServiceContext);
@@ -11067,221 +11068,6 @@ const useFormTableContext = () => {
     return React.useContext(DefaultFormTableContext);
 };
 
-const DefaultDeleteRowComponent = ({ rowIndex }) => {
-    const form = onekijsFramework.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 = onekijsFramework.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$1, { 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 = onekijsFramework.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 = onekijsFramework.useForm();
-    const { tableName } = useFormTableContext();
-    const fieldValue = onekijsFramework.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 = onekijsFramework.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 = React.useId();
-    const tableService = controller.asService();
-    const formatRef = onekijsFramework.useLazyRef(() => {
-        if (format === 'auto') {
-            return value && value.length > 0 && typeof value[0] !== 'object' ? 'id' : 'object';
-        }
-        return format;
-    });
-    const [mounted, setMounted] = React.useState(false);
-    const formTableContext = onekijsFramework.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
-    React.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
-    }, []);
-    React.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 = ({ 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$1 = styled(FormTableValueDisplayer) `
-  .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 = onekijsFramework.useForm();
-            let value = form.getValue(displayerProps.name) ?? [];
-            const ValueDisplayer = props.ValueDisplayer ?? FormTableValueDisplayer$1;
-            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 = onekijsFramework.useFieldContainer({
-        container: props.name,
-    });
-    const Component = props.FieldComponent || StyledFormTableComponent;
-    return (jsxRuntimeExports.jsx(FieldLayout, { ...fieldLayoutProps, required: props.required, children: jsxRuntimeExports.jsx(onekijsFramework.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();
@@ -11696,18 +11482,233 @@ const textareaColumn = (id, options) => {
     });
 };
 
-const useCheckboxColumn = (id, options) => {
-    const column = onekijsFramework.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 = React.useRef(columns);
-    return ref.current;
+const FormTableValueDisplayer = ({ 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$1 = styled(FormTableValueDisplayer) `
+  .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 = onekijsFramework.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 = onekijsFramework.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$1, { 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 = onekijsFramework.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 = onekijsFramework.useForm();
+    const { tableName } = useFormTableContext();
+    const fieldValue = onekijsFramework.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 = onekijsFramework.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 = React.useId();
+    const tableService = controller.asService();
+    const formatRef = onekijsFramework.useLazyRef(() => {
+        if (format === 'auto') {
+            return value && value.length > 0 && typeof value[0] !== 'object' ? 'id' : 'object';
+        }
+        return format;
+    });
+    const [mounted, setMounted] = React.useState(false);
+    const formTableContext = onekijsFramework.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
+    React.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
+    }, []);
+    React.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 = onekijsFramework.useForm();
+            let value = form.getValue(displayerProps.name) ?? [];
+            const ValueDisplayer = props.ValueDisplayer ?? FormTableValueDisplayer$1;
+            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 = onekijsFramework.useFieldContainer({
+        container: props.name,
+    });
+    const Component = props.FieldComponent || StyledFormTableComponent;
+    return (jsxRuntimeExports.jsx(FieldLayout, { ...fieldLayoutProps, required: props.required, children: jsxRuntimeExports.jsx(onekijsFramework.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 = onekijsFramework.useLazyRef(() => {
+        return checkboxColumn(id, options);
+    });
+    return column.current;
+};
+
+const useColumns = (columns) => {
+    const ref = React.useRef(columns);
+    return ref.current;
+};
+
 const useEnumColumn = (id, options) => {
     const column = onekijsFramework.useLazyRef(() => {
         return enumColumn(id, options);
@@ -11743,1957 +11744,2136 @@ const useSelectColumn = (id, options) => {
     return column.current;
 };
 
-const useTextColumn = (id, options) => {
+const useTextareaColumn = (id, options) => {
     const column = onekijsFramework.useLazyRef(() => {
-        return textColumn(id, options);
+        return textareaColumn(id, options);
     });
     return column.current;
 };
 
-const useTextareaColumn = (id, options) => {
+const useTextColumn = (id, options) => {
     const column = onekijsFramework.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 styled.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 React.useContext(WizardServiceContext);
-};
+    .o-calendar-select-month {
+      ${width(24)}
+    }
 
-const WizardStateContext = React.createContext(null);
-const useWizardState = () => {
-    return React.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 = React.useCallback((step) => {
-        if (!step || step.disabled || (!step.touched && !step.touching))
-            return;
-        if (!step.active) {
-            service.activate(step.uid);
-        }
-    }, [service]);
-    const errorRef = React.useRef([]);
-    errorRef.current = [];
-    const indexRef = React.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')}
+    }
 
-exports.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([
-    onekijsFramework.reducer,
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], exports.WizardService.prototype, "activateNext", null);
-__decorate([
-    onekijsFramework.reducer,
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], exports.WizardService.prototype, "activatePrevious", null);
-__decorate([
-    onekijsFramework.saga(onekijsFramework.SagaEffect.Leading)
-    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-    ,
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], exports.WizardService.prototype, "done", null);
-__decorate([
-    onekijsFramework.reducer,
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], exports.WizardService.prototype, "next", null);
-__decorate([
-    onekijsFramework.reducer,
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], exports.WizardService.prototype, "previous", null);
-__decorate([
-    onekijsFramework.reducer,
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Boolean]),
-    __metadata("design:returntype", void 0)
-], exports.WizardService.prototype, "setSubmitting", null);
-exports.WizardService = __decorate([
-    onekijsFramework.service
-], exports.WizardService);
-
-const useWizardController = ({ animate = 300, forwardOnly = true, onCancel, onDone, onNext, onPrevious, }) => {
-    const [_, service] = onekijsFramework.useService(exports.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 styled.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 styled.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 styled.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' }) => styled.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]];
-    React.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 React.useContext(DefaultDatePickerContext);
 };
 
-const WizardSummaryComponent = ({ className }) => {
-    const form = onekijsFramework.useForm();
-    const tree = Object.values(form.getDisplayerTree());
-    return (jsxRuntimeExports.jsx(Accordion, { className: className, children: tree.map((field, index) => {
-            const Displayer = field.Displayer || onekijsFramework.DefaultDisplayer;
-            return (React.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 = React.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);
-    };
-    React.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(reactTransitionGroup.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 = onekijsFramework.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 ?? onekijsFramework.DefaultDisplayer;
-                    return (React.createElement(Displayer, { ...field, index: index, key: `field-${index}`, first: index === 0, last: index === total - 1, format: displayerProps.format }));
-                }) }));
-        },
-    });
-    const metadata = onekijsFramework.useFormMetadata(decorator.name);
-    const service = useWizardService();
-    const fieldContainer = onekijsFramework.useFieldContainer({
-        container: name,
-        onValidationChange: (touchedValidation, allValidation) => {
-            service.onValidationChange(name, touchedValidation, allValidation);
-        },
-    });
-    const { touchAllFields, hide, show, disable, enable } = fieldContainer;
-    const initializedRef = React.useRef(false);
-    React.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(onekijsFramework.FormContext.Provider, { value: fieldContainer.context, children: jsxRuntimeExports.jsx(Step, { ...stepProps, uid: name, onTouch: touchAllFields }) }));
+        return accumulator;
+    }, {});
 };
-
-const sliderStyle = () => {
-    return styled.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 styled.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 = React.useRef([...Array(maxYear).keys()].slice(minYear));
+    const d = new Date();
+    const lastExternalFromMonth = React.useRef(from['month']);
+    const lastExternalFromYear = React.useRef(from['year']);
+    const lastExternalToMonth = React.useRef(to['month']);
+    const lastExternalToYear = React.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] = React.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] = React.useState(getMonth(from['month'], d.getMonth()));
+    const [currentYear, setCurrentYear] = React.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),
+            };
+        }));
+    React.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] = React.useState(String(hourInt).padStart(2, '0'));
+    const [internalMinute, setInternalMinute] = React.useState(String(minuteInt).padStart(2, '0'));
+    const [internalSecond, setInternalSecond] = React.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 = React.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 = React.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 = React.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: onekijsFramework.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 = React.useRef(null);
+    const stateRef = React.useRef({});
+    const dropdownRef = React.useRef(null);
+    const lastExternalValueRef = React.useRef(undefined);
+    const currentValueRef = React.useRef(null);
+    const [open, setOpen] = React.useState(false);
+    const [focus, setFocus] = React.useState(false);
+    const [Dropdown, triggerRef] = useDropdown();
+    const [internalValue, setInternalValue] = React.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 = React.useRef(undefined);
+    const validToRef = React.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 = React.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 = React.useId();
+    const onFocus = React.useCallback(() => {
+        if (!focus) {
+            setFocus(true);
+            if (openOnFocus && !open) {
+                setOpen(true);
+            }
+            if (forwardFocus) {
+                forwardFocus();
+            }
+        }
+    }, [focus, forwardFocus, openOnFocus, open]);
+    const onBlur = React.useCallback(() => {
+        if (!stateRef.current.keepFocus) {
+            if (open) {
+                setOpen(false);
+            }
+            if (focus) {
+                setFocus(false);
+                if (forwardBlur) {
+                    forwardBlur();
+                }
+            }
+        }
+    }, [open, forwardBlur, setOpen, focus]);
+    const onChange = React.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 = React.useCallback(() => {
+        onekijsFramework.eventLocks.lock('escape', id);
+    }, [id]);
+    const onClosed = React.useCallback(() => {
+        onekijsFramework.eventLocks.unlock('escape', id);
+        if (lastExternalValueRef.current !== undefined) {
+            setInternalValue(null);
+        }
+    }, [id]);
+    useClickOutside([containerRef, dropdownRef], onBlur);
+    useFocusOutside([containerRef, dropdownRef], onBlur);
+    const context = React.useMemo(() => {
+        return {
+            open,
+            setOpen,
+            triggerRef,
+            nullable,
+            onChange,
+        };
+    }, [open, setOpen, triggerRef, nullable, onChange]);
+    React.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' }) => styled.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 React.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 = React.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 = React.useRef([...Array(maxYear).keys()].slice(minYear));
-    const d = new Date();
-    const lastExternalFromMonth = React.useRef(from['month']);
-    const lastExternalFromYear = React.useRef(from['year']);
-    const lastExternalToMonth = React.useRef(to['month']);
-    const lastExternalToYear = React.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] = React.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] = React.useState(getMonth(from['month'], d.getMonth()));
-    const [currentYear, setCurrentYear] = React.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 = onekijsFramework.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 = onekijsFramework.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 = onekijsFramework.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),
-            };
-        }));
-    React.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 styled.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 styled.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 React.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 React.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 = React.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 = React.useRef([]);
+    errorRef.current = [];
+    const indexRef = React.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 }) }) }));
+};
+
+exports.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] = React.useState(String(hourInt).padStart(2, '0'));
-    const [internalMinute, setInternalMinute] = React.useState(String(minuteInt).padStart(2, '0'));
-    const [internalSecond, setInternalSecond] = React.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 = React.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 = React.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 = React.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([
+    onekijsFramework.reducer,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], exports.WizardService.prototype, "activateNext", null);
+__decorate([
+    onekijsFramework.reducer,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], exports.WizardService.prototype, "activatePrevious", null);
+__decorate([
+    onekijsFramework.saga(onekijsFramework.SagaEffect.Leading)
+    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+    ,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], exports.WizardService.prototype, "done", null);
+__decorate([
+    onekijsFramework.reducer,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], exports.WizardService.prototype, "next", null);
+__decorate([
+    onekijsFramework.reducer,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], exports.WizardService.prototype, "previous", null);
+__decorate([
+    onekijsFramework.reducer,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Boolean]),
+    __metadata("design:returntype", void 0)
+], exports.WizardService.prototype, "setSubmitting", null);
+exports.WizardService = __decorate([
+    onekijsFramework.service
+], exports.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: onekijsFramework.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] = onekijsFramework.useService(exports.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 styled.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 = React.useRef(null);
-    const stateRef = React.useRef({});
-    const dropdownRef = React.useRef(null);
-    const lastExternalValueRef = React.useRef(undefined);
-    const currentValueRef = React.useRef(null);
-    const [open, setOpen] = React.useState(false);
-    const [focus, setFocus] = React.useState(false);
-    const [Dropdown, triggerRef] = useDropdown();
-    const [internalValue, setInternalValue] = React.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 = React.useRef(undefined);
-    const validToRef = React.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 = React.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 styled.css ``;
+};
+const wizardSummaryStyle = () => {
+    return styled.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 = React.useId();
-    const onFocus = React.useCallback(() => {
-        if (!focus) {
-            setFocus(true);
-            if (openOnFocus && !open) {
-                setOpen(true);
-            }
-            if (forwardFocus) {
-                forwardFocus();
-            }
-        }
-    }, [focus, forwardFocus, openOnFocus, open]);
-    const onBlur = React.useCallback(() => {
-        if (!stateRef.current.keepFocus) {
-            if (open) {
-                setOpen(false);
-            }
-            if (focus) {
-                setFocus(false);
-                if (forwardBlur) {
-                    forwardBlur();
-                }
-            }
-        }
-    }, [open, forwardBlur, setOpen, focus]);
-    const onChange = React.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 = React.useCallback(() => {
-        onekijsFramework.eventLocks.lock('escape', id);
-    }, [id]);
-    const onClosed = React.useCallback(() => {
-        onekijsFramework.eventLocks.unlock('escape', id);
-        if (lastExternalValueRef.current !== undefined) {
-            setInternalValue(null);
-        }
-    }, [id]);
-    useClickOutside([containerRef, dropdownRef], onBlur);
-    useFocusOutside([containerRef, dropdownRef], onBlur);
-    const context = React.useMemo(() => {
-        return {
-            open,
-            setOpen,
-            triggerRef,
-            nullable,
-            onChange,
-        };
-    }, [open, setOpen, triggerRef, nullable, onChange]);
-    React.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]];
+    React.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 = React.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);
+    };
+    React.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(reactTransitionGroup.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 = onekijsFramework.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 ?? onekijsFramework.DefaultDisplayer;
+                    return (React.createElement(Displayer, { ...field, index: index, key: `field-${index}`, first: index === 0, last: index === total - 1, format: displayerProps.format }));
+                }) }));
+        },
+    });
+    const metadata = onekijsFramework.useFormMetadata(decorator.name);
+    const service = useWizardService();
+    const fieldContainer = onekijsFramework.useFieldContainer({
+        container: name,
+        onValidationChange: (touchedValidation, allValidation) => {
+            service.onValidationChange(name, touchedValidation, allValidation);
+        },
+    });
+    const { touchAllFields, hide, show, disable, enable } = fieldContainer;
+    const initializedRef = React.useRef(false);
+    React.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(onekijsFramework.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 = onekijsFramework.useForm();
+    const tree = Object.values(form.getDisplayerTree());
+    return (jsxRuntimeExports.jsx(Accordion, { className: className, children: tree.map((field, index) => {
+            const Displayer = field.Displayer || onekijsFramework.DefaultDisplayer;
+            return (React.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 = onekijsFramework.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 = React.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 = React.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');
@@ -14646,6 +14826,10 @@ exports.FormBlock = FormBlock;
 exports.FormCard = FormCard;
 exports.FormCardDisplayer = FormCardDisplayer;
 exports.FormCheckbox = FormCheckbox;
+exports.FormDatePicker = FormDatePicker;
+exports.FormDateRangePicker = FormDateRangePicker;
+exports.FormDateTimePicker = FormDateTimePicker;
+exports.FormDateTimeRangePicker = FormDateTimeRangePicker;
 exports.FormInput = FormInput;
 exports.FormSelect = FormSelect$1;
 exports.FormStep = FormStep;
@@ -14841,6 +15025,7 @@ exports.cursor = cursor;
 exports.darken = darken;
 exports.dashboardOverlayStyle = dashboardOverlayStyle;
 exports.datePickerStyle = datePickerStyle;
+exports.dateRangeAdapter = dateRangeAdapter;
 exports.dateToString = dateToString;
 exports.defaultCellSerializer = defaultCellSerializer;
 exports.defaultQuickRanges = defaultQuickRanges;
@@ -15022,6 +15207,9 @@ exports.textUnderlinePosition = textUnderlinePosition;
 exports.textareaColumn = textareaColumn;
 exports.themeFormatter = themeFormatter;
 exports.timerStyle = timerStyle;
+exports.timestampMilliSecondRangeAdapter = timestampMilliSecondRangeAdapter;
+exports.timestampRangeAdapter = timestampRangeAdapter;
+exports.timestampSecondRangeAdapter = timestampSecondRangeAdapter;
 exports.titlelize = titlelize;
 exports.toCss = toCss;
 exports.toDateRange = toDateRange;