draft-components 1.0.0-beta.3.1 → 1.0.0-beta.5

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 '../../lib/react-helpers';
-import { assertIfNullable } from '../../lib/helpers';
-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 '../../lib/helpers';
-import { classNames } from '../../lib/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 '../../lib/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 '../../lib/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 '../../lib/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 };

package/esm/components/empty-state/empty-state.js

@@ -1,5 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { classNames } from '../../lib/react-helpers';
-export function EmptyState({ className, image, heading, description, primaryAction, secondaryAction, children, }) {
-    return (_jsxs("section", { className: classNames('dc-empty-state', className), children: [Boolean(image) && (_jsx("div", { className: "dc-empty-state__image", children: image })), Boolean(heading) && (_jsx("h1", { className: "dc-empty-state__heading", children: heading })), Boolean(description) && (_jsx("div", { className: "dc-empty-state__description", children: description })), Boolean(primaryAction) && (_jsx("div", { className: "dc-empty-state__primary-action", children: primaryAction })), Boolean(secondaryAction) && (_jsx("div", { className: "dc-empty-state__secondary-action", children: secondaryAction })), Boolean(children) && (_jsx("div", { className: "dc-empty-state__content", children: children }))] }));
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { classNames } from '../../lib/react-helpers.js';
+
+function EmptyState({ className, image, heading, description, primaryAction, secondaryAction, children, }) {
+    return (jsxs("section", { className: classNames('dc-empty-state', className), children: [Boolean(image) && (jsx("div", { className: "dc-empty-state__image", children: image })), Boolean(heading) && (jsx("h1", { className: "dc-empty-state__heading", children: heading })), Boolean(description) && (jsx("div", { className: "dc-empty-state__description", children: description })), Boolean(primaryAction) && (jsx("div", { className: "dc-empty-state__primary-action", children: primaryAction })), Boolean(secondaryAction) && (jsx("div", { className: "dc-empty-state__secondary-action", children: secondaryAction })), Boolean(children) && (jsx("div", { className: "dc-empty-state__content", children: children }))] }));
 }
+
+export { EmptyState };

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

@@ -1,15 +1,17 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useId, useRef, useState, } from 'react';
-import { classNames, mergeRefs } from '../../lib/react-helpers';
-import { Button } from '../button';
-export const FilePicker = forwardRef(function FilePicker({ label, icon, caption, buttonLabel = 'Browse', id, style, className, disabled, onSelectFiles, ...props }, ref) {
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useId, useRef, useState } from 'react';
+import { classNames, mergeRefs } from '../../lib/react-helpers.js';
+import { Button } from '../button/button.js';
+import '../button/icon-button.js';
+
+const FilePicker = forwardRef(function FilePicker({ label, icon, caption, buttonLabel = 'Browse', id, style, className, disabled, onSelectFiles, ...props }, ref) {
     const defaultId = useId();
     const inputId = id || defaultId;
     const inputRef = useRef(null);
     const [draggingOver, setDraggingOver] = useState(false);
     const handleChange = (event) => {
         const fileList = event.target.files;
-        onSelectFiles === null || onSelectFiles === void 0 ? void 0 : onSelectFiles(fileList ? Array.from(fileList) : []);
+        onSelectFiles?.(fileList ? Array.from(fileList) : []);
     };
     const handleDragOver = (event) => {
         event.preventDefault();
@@ -31,11 +33,13 @@ export const FilePicker = forwardRef(function FilePicker({ label, icon, caption,
         if (!disabled) {
             setDraggingOver(false);
             const fileList = event.dataTransfer.files;
-            onSelectFiles === null || onSelectFiles === void 0 ? void 0 : onSelectFiles(fileList ? Array.from(fileList) : []);
+            onSelectFiles?.(fileList ? Array.from(fileList) : []);
         }
     };
-    return (_jsxs("div", { style: style, className: classNames(className, 'dc-file-picker', {
+    return (jsxs("div", { style: style, className: classNames(className, 'dc-file-picker', {
             'dc-file-picker_disabled': disabled,
             'dc-file-picker_dragging-over': draggingOver,
-        }), onDragOver: handleDragOver, onDragLeave: handleDragEnd, onDrop: handleDrop, "data-testid": "file-picker", children: [_jsx("input", { ...props, id: inputId, ref: mergeRefs(ref, inputRef), className: "dc-file-picker__input", type: "file", disabled: disabled, onChange: handleChange }), _jsxs("div", { className: "dc-file-picker__body", children: [Boolean(icon) && (_jsx("div", { className: "dc-file-picker__icon", children: icon })), _jsxs("div", { children: [_jsx("label", { className: "dc-file-picker__label", htmlFor: inputId, children: label }), Boolean(caption) && (_jsx("div", { className: "dc-file-picker__caption", children: caption }))] })] }), _jsx(Button, { className: "dc-file-picker__button", onClick: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: buttonLabel })] }));
+        }), onDragOver: handleDragOver, onDragLeave: handleDragEnd, onDrop: handleDrop, "data-testid": "file-picker", children: [jsx("input", { ...props, id: inputId, ref: mergeRefs(ref, inputRef), className: "dc-file-picker__input", type: "file", disabled: disabled, onChange: handleChange }), jsxs("div", { className: "dc-file-picker__body", children: [Boolean(icon) && (jsx("div", { className: "dc-file-picker__icon", children: icon })), jsxs("div", { children: [jsx("label", { className: "dc-file-picker__label", htmlFor: inputId, children: label }), Boolean(caption) && (jsx("div", { className: "dc-file-picker__caption", children: caption }))] })] }), jsx(Button, { className: "dc-file-picker__button", onClick: () => inputRef.current?.click(), children: buttonLabel })] }));
 });
+
+export { FilePicker };

package/esm/components/filter-buttons/filter-button.js

@@ -1,6 +1,9 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { classNames } from '../../lib/react-helpers';
-export const FilterButton = forwardRef(function FilterButton({ isActive = false, 'aria-pressed': ariaPressed = isActive, className, children, ...props }, ref) {
-    return (_jsx("button", { ...props, ref: ref, className: classNames('dc-filter-button', isActive && 'active', className), "data-active": isActive, "aria-pressed": ariaPressed, children: children }));
+import { classNames } from '../../lib/react-helpers.js';
+
+const FilterButton = forwardRef(function FilterButton({ isActive = false, 'aria-pressed': ariaPressed = isActive, className, children, ...props }, ref) {
+    return (jsx("button", { ...props, ref: ref, className: classNames('dc-filter-button', isActive && 'active', className), "data-active": isActive, "aria-pressed": ariaPressed, children: children }));
 });
+
+export { FilterButton };

package/esm/components/filter-buttons/filter-buttons.js

@@ -1,8 +1,9 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useRef, useLayoutEffect, } from 'react';
-import { assertIfNullable } from '../../lib/helpers';
-import { classNames } from '../../lib/react-helpers';
-export function FilterButtons({ className, children, ...props }) {
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useLayoutEffect } from 'react';
+import { assertIfNullable } from '../../lib/helpers.js';
+import { classNames } from '../../lib/react-helpers.js';
+
+function FilterButtons({ className, children, ...props }) {
     const ref = useRef(null);
     useLayoutEffect(() => {
         const el = ref.current;
@@ -18,5 +19,7 @@ export function FilterButtons({ className, children, ...props }) {
             }
         }
     }, []);
-    return (_jsx("div", { ...props, ref: ref, role: "group", className: classNames(className, 'dc-filter-buttons'), children: children }));
+    return (jsx("div", { ...props, ref: ref, role: "group", className: classNames(className, 'dc-filter-buttons'), children: children }));
 }
+
+export { FilterButtons };

package/esm/components/form-field/form-field.js

@@ -1,21 +1,24 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { useId } from 'react';
-import { classNames } from '../../lib/react-helpers';
-import { Label } from '../label';
-import { Caption } from '../caption';
-export function FormField({ required = false, labelFor = '', label, caption, error, className = '', children, ...props }) {
+import { classNames } from '../../lib/react-helpers.js';
+import { Label } from '../label/label.js';
+import { Caption } from '../caption/caption.js';
+
+function FormField({ required = false, labelFor = '', label, caption, error, className = '', children, ...props }) {
     const defaultId = useId();
     const id = labelFor || defaultId;
     const hasError = Boolean(error);
     const shouldRenderLabel = Boolean(label);
     let captionEl = null;
     if (hasError) {
-        captionEl = (_jsx(Caption, { className: "dc-form-field__error", appearance: "error", showIcon: true, children: error }));
+        captionEl = (jsx(Caption, { className: "dc-form-field__error", appearance: "error", showIcon: true, children: error }));
     }
     else if (caption) {
-        captionEl = _jsx(Caption, { className: "dc-form-field__caption", children: caption });
+        captionEl = jsx(Caption, { className: "dc-form-field__caption", children: caption });
     }
-    return (_jsxs("div", { ...props, className: classNames('dc-form-field', className), children: [shouldRenderLabel && (_jsx(Label, { className: "dc-form-field__label", htmlFor: id, required: required, children: label })), _jsx("div", { className: "dc-form-field__input", children: typeof children === 'function'
+    return (jsxs("div", { ...props, className: classNames('dc-form-field', className), children: [shouldRenderLabel && (jsx(Label, { className: "dc-form-field__label", htmlFor: id, required: required, children: label })), jsx("div", { className: "dc-form-field__input", children: typeof children === 'function'
                     ? children({ id, required, hasError })
                     : children }), captionEl] }));
 }
+
+export { FormField };

package/esm/components/index.js

@@ -1,37 +1,59 @@
-export * from './alert';
-export * from './avatar';
-export * from './avatar-group';
-export * from './badge';
-export * from './breadcrumbs';
-export * from './button';
-export * from './button-group';
-export * from './caption';
-export * from './checkbox';
-export * from './date-picker';
-export * from './date-picker-popover';
-export * from './date-range-picker-popover';
-export * from './dialog';
-export * from './empty-state';
-export * from './file-picker';
-export * from './filter-buttons';
-export * from './form-field';
-export * from './label';
-export * from './menu';
-export * from './nav-list';
-export * from './password-input';
-export * from './popover';
-export * from './portal';
-export * from './radio';
-export * from './segmented-control';
-export * from './select';
-export * from './slider';
-export * from './spinner';
-export * from './switch';
-export * from './table';
-export * from './tabs';
-export * from './tag';
-export * from './text-input';
-export * from './textarea';
-export * from './toast';
-export * from './toaster';
-export * from './tooltip';
+export { Alert } from './alert/alert.js';
+export { Avatar } from './avatar/avatar.js';
+export { AvatarGroup } from './avatar-group/avatar-group.js';
+export { Badge } from './badge/badge.js';
+export { Breadcrumbs } from './breadcrumbs/breadcrumbs.js';
+export { BreadcrumbsItem } from './breadcrumbs/breadcrumbs-item.js';
+export { Button } from './button/button.js';
+export { IconButton } from './button/icon-button.js';
+export { ButtonGroup } from './button-group/button-group.js';
+export { Caption } from './caption/caption.js';
+export { Checkbox } from './checkbox/checkbox.js';
+export { DatePicker } from './date-picker/date-picker.js';
+export { DateRangePicker } from './date-picker/date-range-picker.js';
+export { DatePickerPopover } from './date-picker-popover/date-picker-popover.js';
+export { DateRangePickerPopover } from './date-range-picker-popover/date-range-picker-popover.js';
+export { Dialog } from './dialog/dialog.js';
+export { DialogHeader } from './dialog/dialog-header.js';
+export { DialogBody } from './dialog/dialog-body.js';
+export { DialogFooter } from './dialog/dialog-footer.js';
+export { EmptyState } from './empty-state/empty-state.js';
+export { FilePicker } from './file-picker/file-picker.js';
+export { FilterButtons } from './filter-buttons/filter-buttons.js';
+export { FilterButton } from './filter-buttons/filter-button.js';
+export { FormField } from './form-field/form-field.js';
+export { Label } from './label/label.js';
+export { Menu } from './menu/menu.js';
+export { MenuItem } from './menu/menu-item.js';
+export { MenuSeparator } from './menu/menu-separator.js';
+export { NavList } from './nav-list/nav-list.js';
+export { NavListItem } from './nav-list/nav-list-item.js';
+export { NavListTitle } from './nav-list/nav-list-title.js';
+export { PasswordInput } from './password-input/password-input.js';
+export { Popover } from './popover/popover.js';
+export { Portal } from './portal/portal.js';
+export { Radio } from './radio/radio.js';
+export { SegmentedControl } from './segmented-control/segmented-control.js';
+export { Select } from './select/select.js';
+export { Slider } from './slider/slider.js';
+export { SliderTickMarks } from './slider/slider-tick-marks.js';
+export { Spinner } from './spinner/spinner.js';
+export { Switch } from './switch/switch.js';
+export { TableContainer } from './table/table-container.js';
+export { Table } from './table/table.js';
+export { TableHead } from './table/table-head.js';
+export { TableBody } from './table/table-body.js';
+export { TableRow } from './table/table-row.js';
+export { TableHeadCell } from './table/table-head-cell.js';
+export { TableCell } from './table/table-cell.js';
+export { Tabs } from './tabs/tabs.js';
+export { TabList } from './tabs/tab-list.js';
+export { Tab } from './tabs/tab.js';
+export { TabPanel } from './tabs/tab-panel.js';
+export { Tag } from './tag/tag.js';
+export { TextInput } from './text-input/text-input.js';
+export { Textarea } from './textarea/textarea.js';
+export { Toast } from './toast/toast.js';
+export { ToastButton } from './toast/toast-button.js';
+export { Toaster } from './toaster/toaster.js';
+export { Tooltip } from './tooltip/tooltip.js';

package/esm/components/label/label.js

@@ -1,8 +1,11 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { classNames } from '../../lib/react-helpers';
-export const Label = forwardRef(function Label({ required = false, className = '', children, ...props }, ref) {
-    return (_jsx("label", { ...props, ref: ref, className: classNames(className, 'dc-label', {
+import { classNames } from '../../lib/react-helpers.js';
+
+const Label = forwardRef(function Label({ required = false, className = '', children, ...props }, ref) {
+    return (jsx("label", { ...props, ref: ref, className: classNames(className, 'dc-label', {
             'dc-label_required': required,
         }), children: children }));
 });
+
+export { Label };

package/esm/components/menu/menu-item.js

@@ -1,9 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, } from 'react';
-import { classNames } from '../../lib/react-helpers';
-export const MenuItem = forwardRef(function MenuItem({ icon = null, appearance = 'default', className, children, ...props }, ref) {
-    return (_jsx("li", { role: "presentation", children: _jsxs("button", { ...props, ref: ref, className: classNames(className, {
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { classNames } from '../../lib/react-helpers.js';
+
+const MenuItem = forwardRef(function MenuItem({ icon = null, appearance = 'default', className, children, ...props }, ref) {
+    return (jsx("li", { role: "presentation", children: jsxs("button", { ...props, ref: ref, className: classNames(className, {
                 'dc-menu-btn': true,
                 [`dc-menu-btn_${appearance}`]: appearance,
-            }), type: "button", role: "menuitem", tabIndex: -1, children: [Boolean(icon) && _jsx("span", { className: "dc-menu-btn__icon", children: icon }), _jsx("span", { className: "dc-menu-btn__label", children: children })] }) }));
+            }), type: "button", role: "menuitem", tabIndex: -1, children: [Boolean(icon) && jsx("span", { className: "dc-menu-btn__icon", children: icon }), jsx("span", { className: "dc-menu-btn__label", children: children })] }) }));
 });
+
+export { MenuItem };

package/esm/components/menu/menu-separator.js

@@ -1,5 +1,8 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from '../../lib/react-helpers';
-export function MenuSeparator({ className, ...props }) {
-    return (_jsx("li", { ...props, className: classNames('dc-menu__separator', className), role: "separator" }));
+import { jsx } from 'react/jsx-runtime';
+import { classNames } from '../../lib/react-helpers.js';
+
+function MenuSeparator({ className, ...props }) {
+    return (jsx("li", { ...props, className: classNames('dc-menu__separator', className), role: "separator" }));
 }
+
+export { MenuSeparator };