draft-components 1.0.0-beta.1 → 1.0.0-beta.10

package/esm/components/date-picker/calendar.js

@@ -1,12 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
-import { classNames } from '../../shared/react-helpers';
-import { getStartOfDay } from './date-helpers';
-import { CalendarHeader } from './calendar-header';
-import { CalendarGrid } from './calendar-grid';
-export function Calendar({ className, defaultFocusDay, minDate, maxDate, locale, weekStartsOn, nextMonthButtonLabel, prevMonthButtonLabel, getDayProps, onHoverDay, onFocusDay, onSelectDay, }) {
+import { classNames } from '../../lib/react-helpers.js';
+import { getStartOfDay } from './date-helpers.js';
+import { CalendarHeader } from './calendar-header.js';
+import { CalendarGrid } from './calendar-grid.js';
+
+function Calendar({ className, defaultFocusDay, minDate, maxDate, locale, weekStartsOn, nextMonthButtonLabel, prevMonthButtonLabel, getDayProps, onHoverDay, onFocusDay, onSelectDay, }) {
     const [focusDay, setFocusDay] = useState(() => {
-        const focusDate = getStartOfDay(defaultFocusDay !== null && defaultFocusDay !== void 0 ? defaultFocusDay : new Date());
+        const focusDate = getStartOfDay(defaultFocusDay ?? new Date());
         if (minDate && focusDate < minDate) {
             return minDate;
         }
@@ -15,5 +16,7 @@ export function Calendar({ className, defaultFocusDay, minDate, maxDate, locale,
         }
         return focusDate;
     });
-    return (_jsxs("div", { className: classNames('dc-calendar', className), children: [_jsx(CalendarHeader, { focusDay: focusDay, onChangeFocusDay: setFocusDay, locale: locale, nextMonthButtonLabel: nextMonthButtonLabel, prevMonthButtonLabel: prevMonthButtonLabel }), _jsx(CalendarGrid, { focusDay: focusDay, minDate: minDate, maxDate: maxDate, locale: locale, weekStartsOn: weekStartsOn, getDayProps: getDayProps, onHoverDay: onHoverDay, onFocusDay: onFocusDay, onSelectDay: onSelectDay, onChangeFocusDay: setFocusDay })] }));
+    return (jsxs("div", { className: classNames('dc-calendar', className), children: [jsx(CalendarHeader, { focusDay: focusDay, onChangeFocusDay: setFocusDay, locale: locale, nextMonthButtonLabel: nextMonthButtonLabel, prevMonthButtonLabel: prevMonthButtonLabel }), jsx(CalendarGrid, { focusDay: focusDay, minDate: minDate, maxDate: maxDate, locale: locale, weekStartsOn: weekStartsOn, getDayProps: getDayProps, onHoverDay: onHoverDay, onFocusDay: onFocusDay, onSelectDay: onSelectDay, onChangeFocusDay: setFocusDay })] }));
 }
+
+export { Calendar };

package/esm/components/date-picker/date-helpers.js

@@ -1,58 +1,58 @@
-export const MONTHS_IN_YEAR = 12;
-export const DAYS_IN_WEEK = 7;
-export const LAST_WEEKDAY = 6;
-export const DATE_ISO_REGEX = /^([0-9]{4})-?(1[0-2]|0[1-9])-?(3[0-1]|0[1-9]|[1-2][0-9])$/;
-export function addYears(date, amount) {
+const MONTHS_IN_YEAR = 12;
+const DAYS_IN_WEEK = 7;
+const LAST_WEEKDAY = 6;
+const DATE_ISO_REGEX = /^([0-9]{4})-?(1[0-2]|0[1-9])-?(3[0-1]|0[1-9]|[1-2][0-9])$/;
+function addYears(date, amount) {
     // Use ISO date string to deal with years less than 100.
     return parseDateISO(formatDateISOComponents(date.getFullYear() + amount, date.getMonth(), date.getDate()));
 }
-export function setDateYear(date, year) {
+function setDateYear(date, year) {
     // Use ISO date string to deal with years less than 100.
     return parseDateISO(formatDateISOComponents(year, date.getMonth(), date.getDate()));
 }
-export function addMonths(date, amount) {
+function addMonths(date, amount) {
     date = new Date(date);
     date.setMonth(date.getMonth() + amount);
     return date;
 }
-export function setDateMonth(date, month) {
+function setDateMonth(date, month) {
     date = new Date(date);
     date.setMonth(month);
     return date;
 }
-export function addDays(date, amount) {
+function addDays(date, amount) {
     date = new Date(date);
     date.setDate(date.getDate() + amount);
     return date;
 }
-export function getStartOfMonth(date) {
+function getStartOfMonth(date) {
     date = new Date(date);
     date.setDate(1);
     return date;
 }
-export function getEndOfMonth(date) {
+function getEndOfMonth(date) {
     date = new Date(date);
     date.setDate(1);
     date.setMonth(date.getMonth() + 1);
     date.setDate(0);
     return date;
 }
-export function getWeekday(date, weekStartsOn = 0) {
+function getWeekday(date, weekStartsOn = 0) {
     let day = date.getDay() - weekStartsOn;
     if (day < 0) {
         day += DAYS_IN_WEEK;
     }
     return day;
 }
-export function getStartOfWeek(date, weekStartsOn = 0) {
+function getStartOfWeek(date, weekStartsOn = 0) {
     const weekday = getWeekday(date, weekStartsOn);
     return addDays(date, -weekday);
 }
-export function getEndOfWeek(date, weekStartsOn = 0) {
+function getEndOfWeek(date, weekStartsOn = 0) {
     const weekday = getWeekday(date, weekStartsOn);
     return addDays(date, LAST_WEEKDAY - weekday);
 }
-export function getStartOfDay(date) {
+function getStartOfDay(date) {
     date = new Date(date);
     date.setHours(0);
     date.setMinutes(0);
@@ -60,24 +60,24 @@ export function getStartOfDay(date) {
     date.setMilliseconds(0);
     return date;
 }
-export function isValidDateISO(value) {
+function isValidDateISO(value) {
     return DATE_ISO_REGEX.test(value);
 }
-export function isSameDay(a, b) {
+function isSameDay(a, b) {
     return (a.getFullYear() === b.getFullYear() &&
         a.getMonth() === b.getMonth() &&
         a.getDate() === b.getDate());
 }
-export function isWeekend(date) {
+function isWeekend(date) {
     return date.getDay() === 6 || date.getDay() === 0;
 }
-export function parseDateISO(date, error = 'The argument must be a date in the ISO format.') {
+function parseDateISO(date, error = 'The argument must be a date in the ISO format.') {
     if (!isValidDateISO(date)) {
         throw new RangeError(error);
     }
     return getStartOfDay(new Date(date));
 }
-export function toDateISO(date) {
+function toDateISO(date) {
     return formatDateISOComponents(date.getFullYear(), date.getMonth(), date.getDate());
 }
 function formatDateISOComponents(year, month, day) {
@@ -87,3 +87,5 @@ function formatDateISOComponents(year, month, day) {
         String(day).padStart(2, '0'),
     ].join('-');
 }
+
+export { DATE_ISO_REGEX, DAYS_IN_WEEK, LAST_WEEKDAY, MONTHS_IN_YEAR, addDays, addMonths, addYears, getEndOfMonth, getEndOfWeek, getStartOfDay, getStartOfMonth, getStartOfWeek, getWeekday, isSameDay, isValidDateISO, isWeekend, parseDateISO, setDateMonth, setDateYear, toDateISO };

package/esm/components/date-picker/date-picker.js

@@ -1,9 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { isSameDay, isValidDateISO, parseDateISO, toDateISO, } from './date-helpers';
-import { classNames } from '../../shared/react-helpers';
-import { parseMinMaxProps } from './parse-min-max-props';
-import { Calendar } from './calendar';
-export function DatePicker({ value, onChangeValue, weekStartsOn = 1, min, max, locale, prevMonthButtonLabel, nextMonthButtonLabel, monthSelectLabel, yearInputLabel, className, ...props }) {
+import { jsx } from 'react/jsx-runtime';
+import { isValidDateISO, parseDateISO, toDateISO, isSameDay } from './date-helpers.js';
+import { classNames } from '../../lib/react-helpers.js';
+import { parseMinMaxProps } from './parse-min-max-props.js';
+import { Calendar } from './calendar.js';
+
+function DatePicker({ value, onChangeValue, weekStartsOn = 1, min, max, locale, prevMonthButtonLabel, nextMonthButtonLabel, monthSelectLabel, yearInputLabel, className, ...props }) {
     const { minDate, maxDate } = parseMinMaxProps({ min, max });
     const selectedDay = value && isValidDateISO(value)
         ? parseDateISO(value)
@@ -11,5 +12,7 @@ export function DatePicker({ value, onChangeValue, weekStartsOn = 1, min, max, l
     const getDayProps = (date) => ({
         isSelected: selectedDay != null && isSameDay(selectedDay, date),
     });
-    return (_jsx("div", { ...props, className: classNames('dc-datepicker', className), children: _jsx(Calendar, { defaultFocusDay: selectedDay, minDate: minDate, maxDate: maxDate, locale: locale, weekStartsOn: weekStartsOn, prevMonthButtonLabel: prevMonthButtonLabel, nextMonthButtonLabel: nextMonthButtonLabel, monthSelectLabel: monthSelectLabel, yearInputLabel: yearInputLabel, getDayProps: getDayProps, onSelectDay: (date) => onChangeValue(toDateISO(date)) }) }));
+    return (jsx("div", { ...props, className: classNames('dc-datepicker', className), children: jsx(Calendar, { defaultFocusDay: selectedDay, minDate: minDate, maxDate: maxDate, locale: locale, weekStartsOn: weekStartsOn, prevMonthButtonLabel: prevMonthButtonLabel, nextMonthButtonLabel: nextMonthButtonLabel, monthSelectLabel: monthSelectLabel, yearInputLabel: yearInputLabel, getDayProps: getDayProps, onSelectDay: (date) => onChangeValue(toDateISO(date)) }) }));
 }
+
+export { DatePicker };

package/esm/components/date-picker/date-range-picker.js

@@ -1,11 +1,12 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { DateRange } from './date-range';
-import { isSameDay, isValidDateISO, parseDateISO, } from './date-helpers';
+import { jsx } from 'react/jsx-runtime';
+import { DateRange } from './date-range.js';
+import { isValidDateISO, parseDateISO, isSameDay } from './date-helpers.js';
+import { classNames } from '../../lib/react-helpers.js';
+import { parseMinMaxProps } from './parse-min-max-props.js';
 import { useState } from 'react';
-import { Calendar } from './calendar';
-import { parseMinMaxProps } from './parse-min-max-props';
-import { classNames } from '../../shared/react-helpers';
-export function DateRangePicker({ value, onChangeValue, weekStartsOn = 1, min, max, locale, prevMonthButtonLabel, nextMonthButtonLabel, monthSelectLabel, yearInputLabel, className, ...props }) {
+import { Calendar } from './calendar.js';
+
+function DateRangePicker({ value, onChangeValue, weekStartsOn = 1, min, max, locale, prevMonthButtonLabel, nextMonthButtonLabel, monthSelectLabel, yearInputLabel, className, ...props }) {
     const { minDate, maxDate } = parseMinMaxProps({ min, max });
     const selectedRange = parseValue(value);
     const [start, setStart] = useState(null);
@@ -37,15 +38,15 @@ export function DateRangePicker({ value, onChangeValue, weekStartsOn = 1, min, m
             setEnd(date);
         }
     };
-    return (_jsx("div", { ...props, className: classNames('dc-datepicker', className), children: _jsx(Calendar, { defaultFocusDay: selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.start, minDate: minDate, maxDate: maxDate, locale: locale, weekStartsOn: weekStartsOn, prevMonthButtonLabel: prevMonthButtonLabel, nextMonthButtonLabel: nextMonthButtonLabel, monthSelectLabel: monthSelectLabel, yearInputLabel: yearInputLabel, getDayProps: getCalendarDayProps, onHoverDay: updateRange, onFocusDay: updateRange, onSelectDay: (date) => {
-                if (!start) {
-                    setStart(date);
-                }
-                else {
+    return (jsx("div", { ...props, className: classNames('dc-datepicker', className), children: jsx(Calendar, { defaultFocusDay: selectedRange?.start, minDate: minDate, maxDate: maxDate, locale: locale, weekStartsOn: weekStartsOn, prevMonthButtonLabel: prevMonthButtonLabel, nextMonthButtonLabel: nextMonthButtonLabel, monthSelectLabel: monthSelectLabel, yearInputLabel: yearInputLabel, getDayProps: getCalendarDayProps, onHoverDay: updateRange, onFocusDay: updateRange, onSelectDay: (date) => {
+                if (start) {
                     setStart(null);
                     setEnd(null);
                     onChangeValue(DateRange.create(start, date).toDateISORange());
                 }
+                else {
+                    setStart(date);
+                }
             } }) }));
 }
 function parseValue(value) {
@@ -54,3 +55,5 @@ function parseValue(value) {
     }
     return null;
 }
+
+export { DateRangePicker };

package/esm/components/date-picker/date-range.js

@@ -1,5 +1,6 @@
-import { isSameDay, toDateISO } from './date-helpers';
-export class DateRange {
+import { isSameDay, toDateISO } from './date-helpers.js';
+
+class DateRange {
     constructor(start, end) {
         if (start > end) {
             [start, end] = [end, start];
@@ -21,3 +22,5 @@ export class DateRange {
         };
     }
 }
+
+export { DateRange };

package/esm/components/date-picker/icons.js

@@ -1,7 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-export function ChevronLeftIcon(props) {
-    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "1em", height: "1em", ...props, children: _jsx("path", { fill: "none", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round", d: "M15.75 19.5L8.25 12l7.5-7.5" }) }));
+import { jsx } from 'react/jsx-runtime';
+
+function ChevronLeftIcon(props) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "1em", height: "1em", ...props, children: jsx("path", { fill: "none", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round", d: "M15.75 19.5L8.25 12l7.5-7.5" }) }));
 }
-export function ChevronRightIcon(props) {
-    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "1em", height: "1em", ...props, children: _jsx("path", { fill: "none", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 4.5l7.5 7.5-7.5 7.5" }) }));
+function ChevronRightIcon(props) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "1em", height: "1em", ...props, children: jsx("path", { fill: "none", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 4.5l7.5 7.5-7.5 7.5" }) }));
 }
+
+export { ChevronLeftIcon, ChevronRightIcon };

package/esm/components/date-picker/parse-min-max-props.js

@@ -1,5 +1,6 @@
-import { parseDateISO } from './date-helpers';
-export function parseMinMaxProps(props) {
+import { parseDateISO } from './date-helpers.js';
+
+function parseMinMaxProps(props) {
     const min = props.min;
     const max = props.max;
     const minDate = min
@@ -13,3 +14,5 @@ export function parseMinMaxProps(props) {
     }
     return { minDate, maxDate };
 }
+
+export { parseMinMaxProps };

package/esm/components/date-picker-popover/date-picker-popover.js

@@ -1,16 +1,22 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { classNames } from '../../shared/react-helpers';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { classNames } from '../../lib/react-helpers.js';
 import { useRef } from 'react';
-import { Popover } from '../popover';
-import { DatePicker } from '../date-picker';
-export function DatePickerPopover({ defaultIsOpen = false, footer, className, children, value, onChangeValue, 
+import { Popover } from '../popover/popover.js';
+import { DatePicker } from '../date-picker/date-picker.js';
+import '../button/button.js';
+import '../button/icon-button.js';
+import '../select/select.js';
+import '../text-input/text-input.js';
+
+function DatePickerPopover({ defaultIsOpen = false, footer, className, children, value, onChangeValue, 
 // DatePickerProps
 min, max, locale, weekStartsOn, prevMonthButtonLabel, nextMonthButtonLabel, monthSelectLabel, yearInputLabel, }) {
     const popoverRef = useRef(null);
     const handleChangeValue = (value) => {
-        var _a;
         onChangeValue(value);
-        (_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.close();
+        popoverRef.current?.close();
     };
-    return (_jsxs(Popover, { ref: popoverRef, className: classNames('dc-date-picker-popover', className), defaultIsOpen: defaultIsOpen, anchor: children, children: [_jsx(DatePicker, { min: min, max: max, locale: locale, weekStartsOn: weekStartsOn, prevMonthButtonLabel: prevMonthButtonLabel, nextMonthButtonLabel: nextMonthButtonLabel, monthSelectLabel: monthSelectLabel, yearInputLabel: yearInputLabel, value: value, onChangeValue: handleChangeValue }), footer] }));
+    return (jsxs(Popover, { ref: popoverRef, className: classNames('dc-date-picker-popover', className), defaultIsOpen: defaultIsOpen, anchor: children, children: [jsx(DatePicker, { min: min, max: max, locale: locale, weekStartsOn: weekStartsOn, prevMonthButtonLabel: prevMonthButtonLabel, nextMonthButtonLabel: nextMonthButtonLabel, monthSelectLabel: monthSelectLabel, yearInputLabel: yearInputLabel, value: value, onChangeValue: handleChangeValue }), footer] }));
 }
+
+export { DatePickerPopover };

package/esm/components/date-range-picker-popover/date-range-picker-popover-footer.js

@@ -1,5 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from '../button';
-export function DateRangePickerPopoverFooter({ children, cancelButtonLabel, confirmButtonLabel, onClickCancelButton, onClickConfirmButton, }) {
-    return (_jsxs("div", { className: "dc-date-range-picker-popover__footer", children: [Boolean(children) && (_jsx("div", { className: "dc-date-range-picker-popover__footer-content", children: children })), _jsx(Button, { className: "dc-date-range-picker-popover__footer-cancel", variant: "tinted", onClick: onClickCancelButton, children: cancelButtonLabel }), _jsx(Button, { className: "dc-date-range-picker-popover__footer-confirm", appearance: "primary", onClick: onClickConfirmButton, children: confirmButtonLabel })] }));
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Button } from '../button/button.js';
+import '../button/icon-button.js';
+
+function DateRangePickerPopoverFooter({ children, cancelButtonLabel, confirmButtonLabel, onClickCancelButton, onClickConfirmButton, }) {
+    return (jsxs("div", { className: "dc-date-range-picker-popover__footer", children: [Boolean(children) && (jsx("div", { className: "dc-date-range-picker-popover__footer-content", children: children })), jsx(Button, { className: "dc-date-range-picker-popover__footer-cancel", variant: "tinted", onClick: onClickCancelButton, children: cancelButtonLabel }), jsx(Button, { className: "dc-date-range-picker-popover__footer-confirm", appearance: "primary", onClick: onClickConfirmButton, children: confirmButtonLabel })] }));
 }
+
+export { DateRangePickerPopoverFooter };

package/esm/components/date-range-picker-popover/date-range-picker-popover-presets.js

@@ -1,10 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { useId } from 'react';
-import { findSelectedOption } from './helpers';
-import { Select } from '../select';
-import { Radio } from '../radio';
-import { SelectionControl } from '../selection-control';
-export function DateRangePickerPopoverPresets({ isCompactView, customPresetLabel, options, value, onChangeValue, }) {
+import { findSelectedOption } from './helpers.js';
+import { Select } from '../select/select.js';
+import { Radio } from '../radio/radio.js';
+import { SelectionControl } from '../selection-control/selection-control.js';
+
+function DateRangePickerPopoverPresets({ isCompactView, customPresetLabel, options, value, onChangeValue, }) {
     const id = useId();
     const name = `${id}-date-preset`;
     const selectedOption = findSelectedOption(value, options);
@@ -20,11 +21,13 @@ export function DateRangePickerPopoverPresets({ isCompactView, customPresetLabel
         }
     }
     if (isCompactView) {
-        return (_jsx("div", { className: "dc-date-range-picker-popover__presets", children: _jsxs(Select, { size: "md", isBlock: true, value: selectedPreset, onChange: handleChange, children: [_jsx("option", { value: "", disabled: true, children: customPresetLabel }), options.map((option) => (_jsx("option", { value: option.preset, children: option.label }, option.preset)))] }) }));
+        return (jsx("div", { className: "dc-date-range-picker-popover__presets", children: jsxs(Select, { size: "md", isBlock: true, value: selectedPreset, onChange: handleChange, children: [jsx("option", { value: "", disabled: true, children: customPresetLabel }), options.map((option) => (jsx("option", { value: option.preset, children: option.label }, option.preset)))] }) }));
     }
-    return (_jsx("ul", { className: "dc-date-range-picker-popover__presets", children: options.map((option) => {
+    return (jsx("ul", { className: "dc-date-range-picker-popover__presets", children: options.map((option) => {
             const preset = option.preset;
             const id = `${name}-${preset}`;
-            return (_jsx("li", { children: _jsx(SelectionControl, { label: option.label, labelFor: id, children: _jsx(Radio, { icon: "check", id: id, name: name, value: preset, checked: preset === selectedPreset, onChange: handleChange }) }) }, option.preset));
+            return (jsx("li", { children: jsx(SelectionControl, { label: option.label, labelFor: id, children: jsx(Radio, { icon: "check", id: id, name: name, value: preset, checked: preset === selectedPreset, onChange: handleChange }) }) }, option.preset));
         }) }));
 }
+
+export { DateRangePickerPopoverPresets };

package/esm/components/date-range-picker-popover/date-range-picker-popover.js

@@ -1,14 +1,19 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { classNames } from '../../shared/react-helpers';
-import { assertIfNullable } from '../../shared/util';
-import { findSelectedOption } from './helpers';
-import { useRef, useState } from 'react';
-import { useIsCompactView } from './use-is-compact-view';
-import { Popover, } from '../popover';
-import { DateRangePicker } from '../date-picker';
-import { DateRangePickerPopoverFooter } from './date-range-picker-popover-footer';
-import { DateRangePickerPopoverPresets } from './date-range-picker-popover-presets';
-export function DateRangePickerPopover({ defaultIsOpen = false, compactViewBreakpoint = '(max-width: 599px)', customPreset = 'custom', customPresetLabel = 'Custom date preset', placement = 'bottom', alignment = 'start', cancelButtonLabel = 'Cancel', confirmButtonLabel = 'Confirm', footer = null, className, options = [], children, value, onChangeValue, 
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { classNames } from '../../lib/react-helpers.js';
+import { assertIfNullable } from '../../lib/helpers.js';
+import { findSelectedOption } from './helpers.js';
+import { useState, useRef } from 'react';
+import { useIsCompactView } from './use-is-compact-view.js';
+import { Popover } from '../popover/popover.js';
+import '../button/button.js';
+import '../button/icon-button.js';
+import '../select/select.js';
+import '../text-input/text-input.js';
+import { DateRangePicker } from '../date-picker/date-range-picker.js';
+import { DateRangePickerPopoverFooter } from './date-range-picker-popover-footer.js';
+import { DateRangePickerPopoverPresets } from './date-range-picker-popover-presets.js';
+
+function DateRangePickerPopover({ defaultIsOpen = false, compactViewBreakpoint = '(max-width: 599px)', customPreset = 'custom', customPresetLabel = 'Custom date preset', placement = 'bottom', alignment = 'start', cancelButtonLabel = 'Cancel', confirmButtonLabel = 'Confirm', footer = null, className, options = [], children, value, onChangeValue, 
 // DateRangePickerProps
 min, max, locale, weekStartsOn, prevMonthButtonLabel, nextMonthButtonLabel, monthSelectLabel, yearInputLabel, }) {
     const [selection, setSelection] = useState(value);
@@ -41,10 +46,12 @@ min, max, locale, weekStartsOn, prevMonthButtonLabel, nextMonthButtonLabel, mont
             setSelection(selection);
         }
     }
-    return (_jsxs(Popover, { className: classNames(className, {
+    return (jsxs(Popover, { className: classNames(className, {
             'dc-date-range-picker-popover': true,
             'dc-date-range-picker-popover_compact': isCompactView,
-        }), ref: popoverRef, placement: placement, alignment: alignment, anchor: children, defaultIsOpen: defaultIsOpen, onOpen: () => setSelection(value), children: [options.length > 0 && (_jsx(DateRangePickerPopoverPresets, { isCompactView: isCompactView, customPresetLabel: customPresetLabel, options: options, value: selection, onChangeValue: setSelection })), _jsx(DateRangePicker, { className: "dc-date-range-picker-popover__calendar", min: min, max: max, locale: locale, weekStartsOn: weekStartsOn, prevMonthButtonLabel: prevMonthButtonLabel, nextMonthButtonLabel: nextMonthButtonLabel, monthSelectLabel: monthSelectLabel, yearInputLabel: yearInputLabel, value: selection && selection.range, onChangeValue: handleChangeDateRange }), _jsx(DateRangePickerPopoverFooter, { cancelButtonLabel: cancelButtonLabel, confirmButtonLabel: confirmButtonLabel, onClickCancelButton: handleClickCancelButton, onClickConfirmButton: handleClickConfirmButton, children: typeof footer === 'function'
+        }), ref: popoverRef, placement: placement, alignment: alignment, anchor: children, defaultIsOpen: defaultIsOpen, onOpen: () => setSelection(value), children: [options.length > 0 && (jsx(DateRangePickerPopoverPresets, { isCompactView: isCompactView, customPresetLabel: customPresetLabel, options: options, value: selection, onChangeValue: setSelection })), jsx(DateRangePicker, { className: "dc-date-range-picker-popover__calendar", min: min, max: max, locale: locale, weekStartsOn: weekStartsOn, prevMonthButtonLabel: prevMonthButtonLabel, nextMonthButtonLabel: nextMonthButtonLabel, monthSelectLabel: monthSelectLabel, yearInputLabel: yearInputLabel, value: selection && selection.range, onChangeValue: handleChangeDateRange }), jsx(DateRangePickerPopoverFooter, { cancelButtonLabel: cancelButtonLabel, confirmButtonLabel: confirmButtonLabel, onClickCancelButton: handleClickCancelButton, onClickConfirmButton: handleClickConfirmButton, children: typeof footer === 'function'
                     ? footer({ selection })
                     : footer })] }));
 }
+
+export { DateRangePickerPopover };

package/esm/components/date-range-picker-popover/helpers.js

@@ -1,4 +1,4 @@
-export function findSelectedOption(selection, options) {
+function findSelectedOption(selection, options) {
     if (!selection) {
         return null;
     }
@@ -9,3 +9,5 @@ export function findSelectedOption(selection, options) {
     });
     return selectedOption || null;
 }
+
+export { findSelectedOption };

package/esm/components/date-range-picker-popover/use-is-compact-view.js

@@ -1,12 +1,13 @@
-import { useEffect, useMemo, useState } from 'react';
-export function useIsCompactView(breakpoint) {
+import { useMemo, useState, useEffect } from 'react';
+
+function useIsCompactView(breakpoint) {
     const compactViewMediaQuery = useMemo(() => {
         if (typeof document !== 'undefined') {
             return window.matchMedia(breakpoint);
         }
         return null;
     }, [breakpoint]);
-    const [isCompactView, setIsCompactView] = useState(() => (compactViewMediaQuery === null || compactViewMediaQuery === void 0 ? void 0 : compactViewMediaQuery.matches) || false);
+    const [isCompactView, setIsCompactView] = useState(() => compactViewMediaQuery?.matches || false);
     useEffect(() => {
         if (compactViewMediaQuery) {
             const handleChange = () => {
@@ -20,3 +21,5 @@ export function useIsCompactView(breakpoint) {
     }, [compactViewMediaQuery]);
     return isCompactView;
 }
+
+export { useIsCompactView };

package/esm/components/dialog/dialog-body.js

@@ -1,8 +1,9 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef } from 'react';
-import { assertIfNullable } from '../../shared/util';
-import { classNames } from '../../shared/react-helpers';
-export function DialogBody({ scrollShadowTop = false, scrollShadowBottom = false, className, children, }) {
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import { assertIfNullable } from '../../lib/helpers.js';
+import { classNames } from '../../lib/react-helpers.js';
+
+function DialogBody({ scrollShadowTop = false, scrollShadowBottom = false, className, children, }) {
     const ref = useRef(null);
     useEffect(() => {
         if (!scrollShadowTop && !scrollShadowBottom) {
@@ -33,15 +34,17 @@ export function DialogBody({ scrollShadowTop = false, scrollShadowBottom = false
                 }
             }
         };
-        const resizeObserver = typeof ResizeObserver !== 'undefined'
-            ? new ResizeObserver(changeShadowsVisibility)
-            : null;
-        resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.observe(el);
+        const resizeObserver = typeof ResizeObserver === 'undefined'
+            ? null
+            : new ResizeObserver(changeShadowsVisibility);
+        resizeObserver?.observe(el);
         el.addEventListener('scroll', changeShadowsVisibility);
         return () => {
-            resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.unobserve(el);
+            resizeObserver?.unobserve(el);
             el.removeEventListener('scroll', changeShadowsVisibility);
         };
     }, [scrollShadowTop, scrollShadowBottom]);
-    return (_jsx("div", { ref: ref, className: classNames('dc-dialog-body', className), children: children }));
+    return (jsx("div", { ref: ref, className: classNames('dc-dialog-body', className), children: children }));
 }
+
+export { DialogBody };

package/esm/components/dialog/dialog-context.js

@@ -1,18 +1,21 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx } from 'react/jsx-runtime';
 import { createContext, useContext } from 'react';
+
 const DialogContext = createContext(null);
-export function useDialogContext() {
+function useDialogContext() {
     const context = useContext(DialogContext);
     if (!context) {
         throw new Error('useDialogContext must be used within DialogProvider');
     }
     return context;
 }
-export function DialogContextProvider(props) {
-    return (_jsx(DialogContext.Provider, { value: {
+function DialogContextProvider(props) {
+    return (jsx(DialogContext.Provider, { value: {
             titleId: props.titleId,
             descriptionId: props.descriptionId,
             isOpen: props.isOpen,
             onClose: props.onClose,
         }, children: props.children }));
 }
+
+export { DialogContextProvider, useDialogContext };

package/esm/components/dialog/dialog-footer.js

@@ -1,5 +1,8 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from '../../shared/react-helpers';
-export function DialogFooter({ className, children, }) {
-    return (_jsx("div", { className: classNames('dc-dialog-footer', className), children: children }));
+import { jsx } from 'react/jsx-runtime';
+import { classNames } from '../../lib/react-helpers.js';
+
+function DialogFooter({ className, children, }) {
+    return (jsx("div", { className: classNames('dc-dialog-footer', className), children: children }));
 }
+
+export { DialogFooter };

package/esm/components/dialog/dialog-header.js

@@ -1,12 +1,16 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { classNames } from '../../shared/react-helpers';
-import { useDialogContext } from './dialog-context';
-import { IconButton } from '../button';
-import { XMarkIcon } from './x-mark-icon';
-export function DialogHeader({ heading, subheading, className, children, }) {
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { classNames } from '../../lib/react-helpers.js';
+import { useDialogContext } from './dialog-context.js';
+import '../button/button.js';
+import { IconButton } from '../button/icon-button.js';
+import { XMarkIcon } from './x-mark-icon.js';
+
+function DialogHeader({ heading, subheading, className, children, }) {
     const { titleId, descriptionId, onClose, } = useDialogContext();
     const shouldRenderHeading = Boolean(heading);
     const shouldRenderDescription = Boolean(subheading);
     const shouldRenderChildren = Boolean(children);
-    return (_jsxs("div", { className: classNames(className, 'dc-dialog-header'), children: [_jsxs("div", { className: "dc-dialog-header__title-bar", children: [shouldRenderHeading && (_jsx("h2", { id: titleId, className: "dc-dialog-header__heading", children: heading })), _jsx(IconButton, { icon: _jsx(XMarkIcon, { width: 18, height: 18, strokeWidth: 2 }), variant: "plain", className: "dc-dialog-header__close-btn", onClick: () => onClose() })] }), shouldRenderDescription && (_jsx("div", { id: descriptionId, className: "dc-dialog-header__subheading", children: subheading })), shouldRenderChildren && (_jsx("div", { className: "dc-dialog-header__body", children: children }))] }));
+    return (jsxs("div", { className: classNames(className, 'dc-dialog-header'), children: [jsxs("div", { className: "dc-dialog-header__title-bar", children: [shouldRenderHeading && (jsx("h2", { id: titleId, className: "dc-dialog-header__heading", children: heading })), jsx(IconButton, { icon: jsx(XMarkIcon, { width: 18, height: 18, strokeWidth: 2 }), variant: "plain", className: "dc-dialog-header__close-btn", onClick: () => onClose() })] }), shouldRenderDescription && (jsx("div", { id: descriptionId, className: "dc-dialog-header__subheading", children: subheading })), shouldRenderChildren && (jsx("div", { className: "dc-dialog-header__body", children: children }))] }));
 }
+
+export { DialogHeader };

package/esm/components/dialog/dialog.js

@@ -1,10 +1,14 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useId, useRef, } from 'react';
-import { classNames, focusElement } from '../../shared/react-helpers';
-import { useDisableBodyScroll, useEscKeyDown, useFocusTrap, useMountTransition, } from '../../hooks';
-import { Portal } from '../portal';
-import { DialogContextProvider } from './dialog-context';
-export function Dialog({ width = 'md', isOpen = false, openFocusRef, closeFocusRef, onClose, className, children, ...props }) {
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useId, useRef, useEffect } from 'react';
+import { focusElement, classNames } from '../../lib/react-helpers.js';
+import { useMountTransition } from '../../hooks/use-mount-transition.js';
+import { useDisableBodyScroll } from '../../hooks/use-disable-body-scroll.js';
+import { useEscKeyDown } from '../../hooks/use-esc-key-down.js';
+import { useFocusTrap } from '../../hooks/use-focus-trap.js';
+import { Portal } from '../portal/portal.js';
+import { DialogContextProvider } from './dialog-context.js';
+
+function Dialog({ width = 'md', isOpen = false, openFocusRef, closeFocusRef, onClose, className, children, ...props }) {
     const defaultId = useId();
     const dialogRef = useRef(null);
     const durationMs = 200;
@@ -16,8 +20,8 @@ export function Dialog({ width = 'md', isOpen = false, openFocusRef, closeFocusR
     });
     useEffect(() => {
         if (isOpen) {
-            const openFocus = openFocusRef === null || openFocusRef === void 0 ? void 0 : openFocusRef.current;
-            const closeFocus = closeFocusRef === null || closeFocusRef === void 0 ? void 0 : closeFocusRef.current;
+            const openFocus = openFocusRef?.current;
+            const closeFocus = closeFocusRef?.current;
             focusElement(openFocus);
             return () => focusElement(closeFocus);
         }
@@ -33,10 +37,12 @@ export function Dialog({ width = 'md', isOpen = false, openFocusRef, closeFocusR
     const id = props.id || defaultId;
     const titleId = `dialog-title-${id}`;
     const descriptionId = `dialog-description-${id}`;
-    return (_jsx(Portal, { children: _jsxs("div", { style: {
+    return (jsx(Portal, { children: jsxs("div", { style: {
                 '--dc-dialog-transition-duration': `${durationMs}ms`,
-            }, className: classNames('dc-dialog', transitionClass), children: [_jsx("div", { className: "dc-dialog-backdrop" }), _jsx("div", { ...props, ref: dialogRef, className: classNames(className, {
+            }, className: classNames('dc-dialog', transitionClass), children: [jsx("div", { className: "dc-dialog-backdrop" }), jsx("div", { ...props, ref: dialogRef, className: classNames(className, {
                         'dc-dialog-modal': true,
                         [`dc-dialog-modal_${width}`]: width,
-                    }), role: "dialog", id: id, "aria-labelledby": titleId, "aria-describedby": descriptionId, "aria-modal": true, children: _jsx(DialogContextProvider, { titleId: titleId, descriptionId: descriptionId, isOpen: isOpen, onClose: onClose, children: children }) })] }) }));
+                    }), role: "dialog", id: id, "aria-labelledby": titleId, "aria-describedby": descriptionId, "aria-modal": true, children: jsx(DialogContextProvider, { titleId: titleId, descriptionId: descriptionId, isOpen: isOpen, onClose: onClose, children: children }) })] }) }));
 }
+
+export { Dialog };

package/esm/components/dialog/x-mark-icon.js

@@ -1,4 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-export function XMarkIcon(props) {
-    return (_jsx("svg", { width: 24, height: 24, fill: "none", stroke: "currentColor", strokeWidth: 1.5, ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) }));
+import { jsx } from 'react/jsx-runtime';
+
+function XMarkIcon(props) {
+    return (jsx("svg", { width: 24, height: 24, fill: "none", stroke: "currentColor", strokeWidth: 1.5, ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) }));
 }
+
+export { XMarkIcon };