@eocrm/design-system 0.6.23 → 0.7.0

package/dist/components/DataTable/useDataTable.js

@@ -0,0 +1,305 @@
+'use client';
+import { useControllableState } from "../_internal/useControllableState.js";
+import { useCallback, useMemo } from "react";
+// src/components/DataTable/useDataTable.ts
+var EMPTY_PINNING = {
+	left: [],
+	right: []
+};
+/**
+* Headless state machine for `<DataTable>`. Implements the Radix-style
+* controlled/uncontrolled pattern for every state piece. Returns an
+* `instance` object passed into `<DataTable instance={...} />` and any
+* companion components (e.g. `<DataTable.ColumnVisibilityTrigger>`).
+*
+* Pure logic — no DOM, no refs to elements, no side effects beyond firing
+* the consumer's onChange callbacks.
+*
+* @example
+* const instance = useDataTable<Deal>({
+*   data,
+*   columns,
+*   getRowId: (r) => r.id,
+*   sort,
+*   onSortChange: setSort,
+* });
+* <DataTable instance={instance} aria-label="Deals" />
+*
+* @example
+* // With row selection and column visibility:
+* const instance = useDataTable<Deal>({
+*   data,
+*   columns,
+*   getRowId: (r) => r.id,
+*   enableRowSelection: true,
+*   onRowSelectionChange: setRowSelection,
+* });
+* <Cluster justify="end">
+*   <ColumnVisibilityTrigger instance={instance} />
+* </Cluster>
+* <DataTable instance={instance} aria-label="Deals" />
+*
+* @example
+* // Fully controlled column order + sizing (e.g. persisted to localStorage):
+* const instance = useDataTable<Deal>({
+*   data,
+*   columns,
+*   getRowId: (r) => r.id,
+*   columnOrder: savedOrder,
+*   onColumnOrderChange: setSavedOrder,
+*   columnSizing: savedSizing,
+*   onColumnSizingChange: setSavedSizing,
+* });
+*
+* @remarks When NOT to use
+* - For a read-only static table — use `<Table>` directly. `useDataTable`
+*   adds overhead you don't need when there's no column or row interactivity.
+*
+* @remarks Anti-patterns
+* - ❌ Passing both `value` and `defaultValue` for the same state piece — `value`
+*   wins and `defaultValue` is silently ignored. Pick one.
+* - ❌ Mutating `columns` identity across renders. The hook captures
+*   `defaultColumnOrder` from `columns` once at mount; later identity changes
+*   don't trigger a re-derive. Pass a stable reference (`useMemo` or module-level).
+* - ❌ Client-sorting `data` AND passing controlled `sort`. DataTable is
+*   server-driven — `data` must be the pre-sorted slice the server returned.
+*/
+function useDataTable(options) {
+	const { data, pinnedRows = [], columns, getRowId, rowCount, enableRowSelection = false, onRowClick, renderExpandedRow } = options;
+	const defaultColumnOrder = useMemo(() => options.defaultColumnOrder ?? columns.map((c) => c.id), []);
+	const derivedColumnPinning = useMemo(() => {
+		const left = [];
+		const right = [];
+		for (const c of columns) {
+			if (c.enablePin === false) continue;
+			if (c.pin === "left") left.push(c.id);
+			else if (c.pin === "right") right.push(c.id);
+		}
+		return left.length === 0 && right.length === 0 ? EMPTY_PINNING : {
+			left,
+			right
+		};
+	}, []);
+	const [columnOrder, setColumnOrder] = useControllableState({
+		value: options.columnOrder,
+		defaultValue: defaultColumnOrder,
+		onChange: options.onColumnOrderChange
+	});
+	const [columnSizing, setColumnSizing] = useControllableState({
+		value: options.columnSizing,
+		defaultValue: options.defaultColumnSizing ?? {},
+		onChange: options.onColumnSizingChange
+	});
+	const [columnVisibility, setColumnVisibility] = useControllableState({
+		value: options.columnVisibility,
+		defaultValue: options.defaultColumnVisibility ?? {},
+		onChange: options.onColumnVisibilityChange
+	});
+	const [columnPinning, setColumnPinning] = useControllableState({
+		value: options.columnPinning,
+		defaultValue: options.defaultColumnPinning ?? derivedColumnPinning,
+		onChange: options.onColumnPinningChange
+	});
+	const [rowSelection, setRowSelection] = useControllableState({
+		value: options.rowSelection,
+		defaultValue: options.defaultRowSelection ?? {},
+		onChange: options.onRowSelectionChange
+	});
+	const [expandedRows, setExpandedRows] = useControllableState({
+		value: options.expandedRows,
+		defaultValue: options.defaultExpandedRows ?? {},
+		onChange: options.onExpandedRowsChange
+	});
+	const [sort, setSort] = useControllableState({
+		value: options.sort,
+		defaultValue: options.defaultSort ?? null,
+		onChange: options.onSortChange
+	});
+	const columnsById = useMemo(() => {
+		const m = /* @__PURE__ */ new Map();
+		for (const c of columns) m.set(c.id, c);
+		return m;
+	}, [columns]);
+	const columnSizesPx = useMemo(() => {
+		const out = {};
+		for (const c of columns) out[c.id] = columnSizing[c.id] ?? c.size ?? 120;
+		return out;
+	}, [columns, columnSizing]);
+	const visibleColumns = useMemo(() => {
+		const isVisible = (id) => columnVisibility[id] !== false;
+		const ordered = [];
+		for (const id of columnOrder) {
+			const col = columnsById.get(id);
+			if (col && isVisible(id)) ordered.push(col);
+		}
+		for (const c of columns) if (!columnOrder.includes(c.id) && isVisible(c.id)) ordered.push(c);
+		return ordered;
+	}, [
+		columns,
+		columnsById,
+		columnOrder,
+		columnVisibility
+	]);
+	const leftPinnedColumns = useMemo(() => columnPinning.left.map((id) => columnsById.get(id)).filter((c) => !!c && columnVisibility[c.id] !== false), [
+		columnPinning.left,
+		columnsById,
+		columnVisibility
+	]);
+	const rightPinnedColumns = useMemo(() => columnPinning.right.map((id) => columnsById.get(id)).filter((c) => !!c && columnVisibility[c.id] !== false), [
+		columnPinning.right,
+		columnsById,
+		columnVisibility
+	]);
+	const unpinnedColumns = useMemo(() => {
+		const pinned = /* @__PURE__ */ new Set([...columnPinning.left, ...columnPinning.right]);
+		return visibleColumns.filter((c) => !pinned.has(c.id));
+	}, [
+		visibleColumns,
+		columnPinning.left,
+		columnPinning.right
+	]);
+	const leftPinOffsets = useMemo(() => {
+		const out = {};
+		let acc = 0;
+		for (const col of leftPinnedColumns) {
+			out[col.id] = acc;
+			acc += columnSizesPx[col.id] ?? 120;
+		}
+		return out;
+	}, [leftPinnedColumns, columnSizesPx]);
+	const rightPinOffsets = useMemo(() => {
+		const out = {};
+		let acc = 0;
+		for (let i = rightPinnedColumns.length - 1; i >= 0; i--) {
+			const col = rightPinnedColumns[i];
+			out[col.id] = acc;
+			acc += columnSizesPx[col.id] ?? 120;
+		}
+		return out;
+	}, [rightPinnedColumns, columnSizesPx]);
+	const toggleRowSelection = useCallback((rowId) => {
+		setRowSelection((prev) => {
+			const next = { ...prev };
+			if (next[rowId]) delete next[rowId];
+			else next[rowId] = true;
+			return next;
+		});
+	}, [setRowSelection]);
+	const toggleAllOnPage = useCallback(() => {
+		setRowSelection((prev) => {
+			const pageIds = data.map(getRowId);
+			if (pageIds.every((id) => prev[id])) {
+				const next = { ...prev };
+				for (const id of pageIds) delete next[id];
+				return next;
+			}
+			const next = { ...prev };
+			for (const id of pageIds) next[id] = true;
+			return next;
+		});
+	}, [
+		data,
+		getRowId,
+		setRowSelection
+	]);
+	const isAllOnPageSelected = useCallback(() => {
+		if (data.length === 0) return false;
+		return data.every((row) => rowSelection[getRowId(row)] === true);
+	}, [
+		data,
+		getRowId,
+		rowSelection
+	]);
+	const isSomeOnPageSelected = useCallback(() => {
+		if (data.length === 0) return false;
+		let some = false;
+		let all = true;
+		for (const row of data) if (rowSelection[getRowId(row)]) some = true;
+		else all = false;
+		return some && !all;
+	}, [
+		data,
+		getRowId,
+		rowSelection
+	]);
+	const toggleRowExpanded = useCallback((rowId) => {
+		setExpandedRows((prev) => {
+			const next = { ...prev };
+			if (next[rowId]) delete next[rowId];
+			else next[rowId] = true;
+			return next;
+		});
+	}, [setExpandedRows]);
+	const toggleColumnVisibility = useCallback((columnId) => {
+		setColumnVisibility((prev) => ({
+			...prev,
+			[columnId]: prev[columnId] === false ? true : false
+		}));
+	}, [setColumnVisibility]);
+	const pinColumn = useCallback((columnId, side) => {
+		setColumnPinning((prev) => {
+			const left = prev.left.filter((id) => id !== columnId);
+			const right = prev.right.filter((id) => id !== columnId);
+			if (side === "left") left.push(columnId);
+			else if (side === "right") right.push(columnId);
+			return {
+				left,
+				right
+			};
+		});
+	}, [setColumnPinning]);
+	const toggleSort = useCallback((columnId) => {
+		setSort((prev) => {
+			if (!prev || prev.columnId !== columnId) return {
+				columnId,
+				direction: "asc"
+			};
+			if (prev.direction === "asc") return {
+				columnId,
+				direction: "desc"
+			};
+			return null;
+		});
+	}, [setSort]);
+	return {
+		data,
+		pinnedRows,
+		columns,
+		getRowId,
+		rowCount,
+		enableRowSelection,
+		hasExpansion: renderExpandedRow != null,
+		onRowClick,
+		renderExpandedRow,
+		columnOrder,
+		columnSizing,
+		columnVisibility,
+		columnPinning,
+		rowSelection,
+		expandedRows,
+		sort,
+		visibleColumns,
+		leftPinnedColumns,
+		rightPinnedColumns,
+		unpinnedColumns,
+		columnSizesPx,
+		leftPinOffsets,
+		rightPinOffsets,
+		setColumnOrder,
+		setColumnSizing,
+		setColumnVisibility,
+		setColumnPinning,
+		setRowSelection,
+		setExpandedRows,
+		setSort,
+		toggleRowSelection,
+		toggleAllOnPage,
+		isAllOnPageSelected,
+		isSomeOnPageSelected,
+		toggleRowExpanded,
+		toggleColumnVisibility,
+		pinColumn,
+		toggleSort
+	};
+}
+export { useDataTable };

package/dist/components/DataTable/useResizeHandle.d.ts

@@ -0,0 +1,34 @@
+import type { PointerEvent as ReactPointerEvent } from 'react';
+interface UseResizeHandleOptions {
+    initialWidth: number;
+    minWidth: number;
+    maxWidth?: number;
+    onResize: (nextWidth: number) => void;
+}
+interface ResizeHandleApi {
+    isResizing: boolean;
+    onPointerDown: (e: ReactPointerEvent<HTMLElement>) => void;
+}
+/**
+ * Pointer-based resize-handle hook. Attach `onPointerDown` to the handle
+ * element. While dragging, `pointermove` on window fires `onResize` with
+ * the clamped width; `pointerup` / `pointercancel` ends the drag.
+ *
+ * `initialWidth` is captured at pointerdown — callers don't need to keep
+ * it in sync between events (the hook holds the start width internally).
+ *
+ * @remarks
+ * **When NOT to use / anti-patterns**
+ *
+ * - Do not use this hook outside of a column-resize context. It is
+ *   purpose-built for DataTable header cells and assumes a horizontal
+ *   drag interaction with a fixed start width.
+ * - Do not wire `onPointerDown` to a full cell — only the narrow resize
+ *   handle element. Attaching it to the whole header cell will intercept
+ *   sort clicks and other cell interactions.
+ * - Do not rely on `setPointerCapture` being functional in all
+ *   environments (it is best-effort / no-op in jsdom). The hook falls
+ *   back to window-level listeners for cross-browser reliability.
+ */
+export declare function useResizeHandle(options: UseResizeHandleOptions): ResizeHandleApi;
+export {};

package/dist/components/DataTable/useResizeHandle.js

@@ -0,0 +1,76 @@
+'use client';
+import { useCallback, useEffect, useRef, useState } from "react";
+// src/components/DataTable/useResizeHandle.ts
+/**
+* Pointer-based resize-handle hook. Attach `onPointerDown` to the handle
+* element. While dragging, `pointermove` on window fires `onResize` with
+* the clamped width; `pointerup` / `pointercancel` ends the drag.
+*
+* `initialWidth` is captured at pointerdown — callers don't need to keep
+* it in sync between events (the hook holds the start width internally).
+*
+* @remarks
+* **When NOT to use / anti-patterns**
+*
+* - Do not use this hook outside of a column-resize context. It is
+*   purpose-built for DataTable header cells and assumes a horizontal
+*   drag interaction with a fixed start width.
+* - Do not wire `onPointerDown` to a full cell — only the narrow resize
+*   handle element. Attaching it to the whole header cell will intercept
+*   sort clicks and other cell interactions.
+* - Do not rely on `setPointerCapture` being functional in all
+*   environments (it is best-effort / no-op in jsdom). The hook falls
+*   back to window-level listeners for cross-browser reliability.
+*/
+function useResizeHandle(options) {
+	const { minWidth, maxWidth, onResize } = options;
+	const [isResizing, setIsResizing] = useState(false);
+	const startXRef = useRef(0);
+	const startWidthRef = useRef(0);
+	const onResizeRef = useRef(onResize);
+	onResizeRef.current = onResize;
+	const minRef = useRef(minWidth);
+	minRef.current = minWidth;
+	const maxRef = useRef(maxWidth);
+	maxRef.current = maxWidth;
+	const onPointerDown = useCallback((e) => {
+		e.stopPropagation?.();
+		startXRef.current = e.clientX;
+		startWidthRef.current = options.initialWidth;
+		try {
+			e.currentTarget.setPointerCapture(e.pointerId);
+		} catch {}
+		setIsResizing(true);
+	}, [options.initialWidth]);
+	useEffect(() => {
+		if (!isResizing) return;
+		function clamp(n) {
+			const min = minRef.current;
+			const max = maxRef.current;
+			let v = Math.max(min, n);
+			if (max != null) v = Math.min(max, v);
+			return v;
+		}
+		function onMove(e) {
+			const delta = e.clientX - startXRef.current;
+			const next = clamp(startWidthRef.current + delta);
+			onResizeRef.current(next);
+		}
+		function onEnd() {
+			setIsResizing(false);
+		}
+		window.addEventListener("pointermove", onMove);
+		window.addEventListener("pointerup", onEnd);
+		window.addEventListener("pointercancel", onEnd);
+		return () => {
+			window.removeEventListener("pointermove", onMove);
+			window.removeEventListener("pointerup", onEnd);
+			window.removeEventListener("pointercancel", onEnd);
+		};
+	}, [isResizing]);
+	return {
+		isResizing,
+		onPointerDown
+	};
+}
+export { useResizeHandle };

package/dist/components/DatePicker/DatePicker.css

@@ -0,0 +1,251 @@
+:root {
+  --date-picker-gap: var(--space-1);
+  --date-picker-bg: var(--color-bg);
+  --date-picker-border-color: var(--color-border);
+  --date-picker-radius: var(--radius-md);
+  --date-picker-border-color-focus: var(--color-accent);
+  --date-picker-border-color-invalid: var(--color-danger);
+  --date-picker-ring-invalid: var(--ring-danger);
+  --date-picker-bg-disabled: var(--color-bg-subtle);
+  --date-picker-fg-disabled: var(--color-fg-muted);
+  --date-picker-input-fg: var(--color-fg);
+  --date-picker-input-placeholder-fg: var(--color-fg-muted);
+  --date-picker-button-radius: var(--radius-sm);
+  --date-picker-button-fg: var(--color-fg-muted);
+  --date-picker-button-bg-hover: var(--color-bg-subtle);
+  --date-picker-button-fg-hover: var(--color-fg);
+  --date-picker-button-opacity-disabled: var(--opacity-disabled);
+  --date-picker-padding-sm: var(--space-2);
+  --date-picker-padding-md: var(--space-2);
+  --date-picker-padding-lg: var(--space-3);
+  --date-picker-input-height-sm: var(--size-sm);
+  --date-picker-input-height-md: var(--size-md);
+  --date-picker-input-height-lg: var(--size-lg);
+  --date-picker-input-font-size-sm: var(--font-size-sm);
+  --date-picker-input-font-size-md: var(--font-size-md);
+  --date-picker-input-font-size-lg: var(--font-size-lg);
+  --date-picker-button-size-sm: var(--space-5);
+  --date-picker-button-size-md: var(--space-5);
+  --date-picker-button-size-lg: var(--space-6);
+  --date-picker-popover-z: var(--z-popover);
+  --date-picker-grid-gap: var(--space-2);
+  --date-picker-grid-padding: var(--space-2);
+  --date-picker-grid-bg: var(--color-bg);
+  --date-picker-grid-border-color: var(--color-border);
+  --date-picker-grid-radius: var(--radius-md);
+  --date-picker-grid-shadow: var(--shadow-lg);
+  --date-picker-grid-width: var(--size-datepicker-popover-width);
+  --date-picker-grid-header-padding-x: var(--space-1);
+  --date-picker-nav-size: var(--space-6);
+  --date-picker-nav-radius: var(--radius-sm);
+  --date-picker-nav-fg: var(--color-fg-muted);
+  --date-picker-nav-bg-hover: var(--color-bg-subtle);
+  --date-picker-nav-fg-hover: var(--color-fg);
+  --date-picker-month-font-size: var(--font-size-sm);
+  --date-picker-month-font-weight: var(--font-weight-medium);
+  --date-picker-month-fg: var(--color-fg);
+  --date-picker-weekday-height: var(--space-4);
+  --date-picker-weekday-font-size: var(--font-size-xs);
+  --date-picker-weekday-font-weight: var(--font-weight-medium);
+  --date-picker-weekday-fg: var(--color-fg-muted);
+  --date-picker-weekday-letter-spacing: var(--letter-spacing-caps);
+  --date-picker-cell-size: var(--size-datepicker-cell);
+  --date-picker-cell-radius: var(--radius-sm);
+  --date-picker-cell-font-size: var(--font-size-sm);
+  --date-picker-cell-fg: var(--color-fg);
+  --date-picker-cell-bg-hover: var(--color-bg-subtle);
+  --date-picker-cell-fg-outside: var(--color-fg-muted);
+  --date-picker-cell-border-today: var(--color-accent);
+  --date-picker-cell-bg-selected: var(--color-accent);
+  --date-picker-cell-fg-selected: var(--color-accent-fg);
+  --date-picker-cell-border-selected: var(--color-accent);
+  --date-picker-cell-fg-disabled: var(--color-fg-muted);
+  --date-picker-cell-opacity-disabled: var(--opacity-disabled);
+  --date-picker-cell-bg-in-range: var(--color-accent-bg-subtle);
+  --date-picker-cell-fg-in-range: var(--color-accent);
+  --date-picker-cell-bg-range-boundary: var(--color-accent);
+  --date-picker-cell-fg-range-boundary: var(--color-accent-fg);
+  --date-picker-grid-opacity-disabled: var(--opacity-disabled);
+  --date-picker-time-row-gap: var(
+    --space-2
+  );
+  --date-picker-time-field-width: 9rem;
+  --date-picker-time-field-bg: var(--color-bg);
+  --date-picker-time-field-border-color: var(--color-border);
+  --date-picker-time-field-border-color-focus: var(--color-accent);
+  --date-picker-time-field-border-color-invalid: var(--color-danger);
+  --date-picker-time-field-radius: var(--radius-md);
+  --date-picker-time-field-padding-x: var(--space-2);
+  --date-picker-time-field-gap: var(--space-1);
+  --date-picker-time-toggle-fg: var(--color-fg-muted);
+  --date-picker-time-toggle-fg-hover: var(--color-fg);
+  --date-picker-time-toggle-bg-hover: var(--color-bg-subtle);
+  --date-picker-time-toggle-radius: var(--radius-sm);
+  --date-picker-time-toggle-size: var(--space-5);
+  --date-picker-time-popover-z: var(--z-popover);
+  --date-picker-time-popover-bg: var(--color-bg);
+  --date-picker-time-popover-border-color: var(--color-border);
+  --date-picker-time-popover-radius: var(--radius-md);
+  --date-picker-time-popover-shadow: var(--shadow-lg);
+  --date-picker-time-popover-padding: var(--space-1);
+  --date-picker-time-popover-gap: var(--space-1);
+  --date-picker-time-popover-column-width: 4rem;
+  --date-picker-time-popover-max-height: 14rem;
+  --date-picker-time-popover-row-height: 32px;
+  --date-picker-time-popover-row-radius: var(--radius-sm);
+  --date-picker-time-popover-row-padding-x: var(--space-2);
+  --date-picker-time-popover-row-font-size: var(--font-size-sm);
+  --date-picker-time-popover-row-fg: var(--color-fg);
+  --date-picker-time-popover-row-hover-bg: var(--color-bg-muted);
+  --date-picker-time-popover-row-current-bg: var(--color-accent-bg-subtle);
+  --date-picker-time-popover-row-current-fg: var(--color-accent);
+  --date-picker-time-popover-divider-color: var(--color-border);
+  --date-picker-time-popover-footer-padding: var(--space-2);
+  --date-picker-time-popover-footer-border-color: var(--color-border);
+  --date-picker-time-now-button-fg: var(--color-accent);
+  --date-picker-time-now-button-bg-hover: var(--color-bg-muted);
+  --date-picker-time-period-column-width: 3.5rem;
+}
+
+.DatePicker__wrapper__B8g6U {
+  position: relative;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: var(--date-picker-gap);
+  background: var(--date-picker-bg);
+  border: var(--border-width) solid var(--date-picker-border-color);
+  border-radius: var(--date-picker-radius);
+  transition: border-color var(--transition-fast);
+}
+.DatePicker__wrapper__B8g6U:focus-within {
+  outline: var(--ring-width) solid var(--ring-accent);
+  outline-offset: var(--ring-offset);
+  border-color: var(--date-picker-border-color-focus);
+}
+
+.DatePicker__invalid__vLG9h {
+  border-color: var(--date-picker-border-color-invalid);
+}
+.DatePicker__invalid__vLG9h:focus-within {
+  outline: var(--ring-width) solid var(--date-picker-ring-invalid);
+  outline-offset: var(--ring-offset);
+  border-color: var(--date-picker-border-color-invalid);
+}
+
+.DatePicker__disabled__0pn9T {
+  background: var(--date-picker-bg-disabled);
+  color: var(--date-picker-fg-disabled);
+  cursor: not-allowed;
+}
+
+.DatePicker__input__bwkEF {
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 0;
+  background: transparent;
+  border: none;
+  outline: none;
+  font-family: inherit;
+  color: var(--date-picker-input-fg);
+}
+.DatePicker__input__bwkEF::placeholder {
+  color: var(--date-picker-input-placeholder-fg);
+}
+
+.DatePicker__clearButton__-E0KC,
+.DatePicker__openButton__Jhjoj {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: var(--date-picker-button-radius);
+  color: var(--date-picker-button-fg);
+  cursor: pointer;
+}
+.DatePicker__clearButton__-E0KC:hover:not(:disabled),
+.DatePicker__openButton__Jhjoj:hover:not(:disabled) {
+  background: var(--date-picker-button-bg-hover);
+  color: var(--date-picker-button-fg-hover);
+}
+.DatePicker__clearButton__-E0KC:focus-visible,
+.DatePicker__openButton__Jhjoj:focus-visible {
+  outline: var(--ring-width) solid var(--ring-accent);
+  outline-offset: var(--ring-offset);
+}
+.DatePicker__clearButton__-E0KC:disabled,
+.DatePicker__openButton__Jhjoj:disabled {
+  cursor: not-allowed;
+  opacity: var(--date-picker-button-opacity-disabled);
+}
+
+.DatePicker__popover__0FMes {
+  z-index: var(--date-picker-popover-z);
+}
+
+.DatePicker__popover__0FMes[data-in-overlay] {
+  z-index: var(--z-overlay-floating);
+}
+
+.DatePicker__popover__0FMes[data-in-overlay]:has([data-tour-current-target]) {
+  z-index: calc(var(--z-tour) - 1);
+}
+
+.DatePicker__size-sm__Inn6u {
+  padding: 0 var(--date-picker-padding-sm);
+}
+.DatePicker__size-sm__Inn6u .DatePicker__input__bwkEF {
+  height: var(--date-picker-input-height-sm);
+  font-size: var(--date-picker-input-font-size-sm);
+}
+.DatePicker__size-sm__Inn6u .DatePicker__clearButton__-E0KC,
+.DatePicker__size-sm__Inn6u .DatePicker__openButton__Jhjoj {
+  width: var(--date-picker-button-size-sm);
+  height: var(--date-picker-button-size-sm);
+}
+
+.DatePicker__size-md__H5RWP {
+  padding: 0 var(--date-picker-padding-md);
+}
+.DatePicker__size-md__H5RWP .DatePicker__input__bwkEF {
+  height: var(--date-picker-input-height-md);
+  font-size: var(--date-picker-input-font-size-md);
+}
+.DatePicker__size-md__H5RWP .DatePicker__clearButton__-E0KC,
+.DatePicker__size-md__H5RWP .DatePicker__openButton__Jhjoj {
+  width: var(--date-picker-button-size-md);
+  height: var(--date-picker-button-size-md);
+}
+
+.DatePicker__size-lg__EvpYZ {
+  padding: 0 var(--date-picker-padding-lg);
+}
+.DatePicker__size-lg__EvpYZ .DatePicker__input__bwkEF {
+  height: var(--date-picker-input-height-lg);
+  font-size: var(--date-picker-input-font-size-lg);
+}
+.DatePicker__size-lg__EvpYZ .DatePicker__clearButton__-E0KC,
+.DatePicker__size-lg__EvpYZ .DatePicker__openButton__Jhjoj {
+  width: var(--date-picker-button-size-lg);
+  height: var(--date-picker-button-size-lg);
+}
+
+.DatePicker__timeRow__gQCp1 {
+  display: flex;
+  align-items: center;
+  gap: var(--date-picker-time-row-gap);
+  padding: var(--date-picker-grid-padding);
+  background: var(--date-picker-grid-bg);
+  border: var(--border-width) solid var(--date-picker-grid-border-color);
+  border-radius: var(--date-picker-grid-radius);
+  box-shadow: var(--date-picker-grid-shadow);
+  margin-top: var(--date-picker-time-row-gap);
+}
+
+.DatePicker__timeLabel__qQmrS {
+  color: var(--color-fg-muted);
+  font-size: var(--font-size-sm);
+}