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

package/esm/components/alert/alert.js

@@ -1,12 +1,16 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { classNames } from '../../shared/react-helpers';
-export function Alert({ icon = null, heading = null, variant = 'default', appearance = 'default', className, children, ...props }) {
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { classNames } from '../../lib/react-helpers.js';
+
+function Alert({ icon = null, heading = null, variant = 'default', appearance = 'default', className, children, ...props }) {
     const shouldShowIcon = Boolean(icon);
     const shouldRenderHeading = Boolean(heading);
-    return (_jsxs("section", { ...props, className: classNames(className, {
+    const shouldRenderContent = Boolean(children);
+    return (jsxs("section", { ...props, className: classNames(className, {
             'dc-alert': true,
             'dc-alert_has_icon': shouldShowIcon,
             [`dc-alert_variant_${variant}`]: variant,
             [`dc-alert_appearance_${appearance}`]: appearance,
-        }), children: [shouldShowIcon && _jsx("div", { className: "dc-alert__icon", children: icon }), _jsxs("div", { className: "dc-alert__body", children: [shouldRenderHeading && _jsx("h1", { className: "dc-alert__title", children: heading }), children] })] }));
+        }), children: [shouldShowIcon && jsx("div", { className: "dc-alert__icon", children: icon }), jsxs("div", { className: "dc-alert__body", children: [shouldRenderHeading && (jsx("h1", { className: "dc-alert__title", children: heading })), shouldRenderContent && (jsx("div", { className: "dc-alert__content", children: children }))] })] }));
 }
+
+export { Alert };

package/esm/components/avatar/avatar.js

@@ -1,26 +1,29 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, } from 'react';
-import { classNames } from '../../shared/react-helpers';
-export const Avatar = forwardRef(function Avatar({ isSquare = false, hasInnerShadow = false, size = 'md', fill = 'gray', src, alt, placeholder, className, ...props }, ref) {
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { classNames } from '../../lib/react-helpers.js';
+
+const avatarSizesPx = {
+    xs: 24,
+    sm: 32,
+    md: 40,
+    lg: 48,
+    xl: 56,
+};
+const Avatar = forwardRef(function Avatar({ isSquare = false, hasInnerShadow = false, size = 'md', fill = 'gray', src, alt, placeholder, className, ...props }, ref) {
     let content;
     if (!src && placeholder) {
-        content = (_jsx("div", { className: "dc-avatar__placeholder", "aria-label": alt, children: placeholder }));
+        content = (jsx("div", { className: "dc-avatar__placeholder", "aria-label": alt, children: placeholder }));
     }
     else {
         const sizePx = avatarSizesPx[size];
-        content = (_jsx("img", { className: "dc-avatar__image", src: src, alt: alt, width: sizePx, height: sizePx }));
+        content = (jsx("img", { className: "dc-avatar__image", src: src, alt: alt, width: sizePx, height: sizePx }));
     }
-    return (_jsx("div", { ...props, ref: ref, className: classNames(className, 'dc-avatar', {
+    return (jsx("div", { ...props, ref: ref, className: classNames(className, 'dc-avatar', {
             [`dc-avatar_size_${size}`]: size,
             [`dc-avatar_fill_${fill}`]: fill,
             'dc-avatar_square': isSquare,
             'dc-avatar_has_inner-shadow': hasInnerShadow,
         }), children: content }));
 });
-const avatarSizesPx = {
-    xs: 24,
-    sm: 32,
-    md: 40,
-    lg: 48,
-    xl: 56,
-};
+
+export { Avatar };

package/esm/components/avatar-group/avatar-group.js

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

package/esm/components/badge/badge.js

@@ -1,6 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from '../../shared/react-helpers';
-export function Badge({ className, children, ...props }) {
+import { jsx } from 'react/jsx-runtime';
+import { classNames } from '../../lib/react-helpers.js';
+
+function Badge({ className, children, ...props }) {
     let isCircle;
     if (typeof children === 'number' && children > 0 && children < 10) {
         isCircle = true;
@@ -11,8 +12,10 @@ export function Badge({ className, children, ...props }) {
     else {
         isCircle = !children;
     }
-    return (_jsx("span", { ...props, className: classNames(className, {
+    return (jsx("span", { ...props, className: classNames(className, {
             'dc-badge': true,
             'dc-badge_circle': isCircle,
         }), children: children }));
 }
+
+export { Badge };

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

@@ -1,13 +1,16 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx } from 'react/jsx-runtime';
 import { createContext, useContext } from 'react';
+
 const BreadcrumbsContext = createContext(null);
-export function useBreadcrumbsContext() {
+function useBreadcrumbsContext() {
     const context = useContext(BreadcrumbsContext);
     if (!context) {
         throw new Error('useBreadcrumbsContext must be used withing BreadcrumbsContextProvider');
     }
     return context;
 }
-export function BreadcrumbsContextProvider(props) {
-    return (_jsx(BreadcrumbsContext.Provider, { value: { separator: props.separator }, children: props.children }));
+function BreadcrumbsContextProvider(props) {
+    return (jsx(BreadcrumbsContext.Provider, { value: { separator: props.separator }, children: props.children }));
 }
+
+export { BreadcrumbsContextProvider, useBreadcrumbsContext };

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

@@ -1,16 +1,19 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { classNames } from '../../shared/react-helpers';
-import { useBreadcrumbsContext } from './breadcrumbs-context';
-export function BreadcrumbsItem({ className, icon, children, renderAs, ...props }) {
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { classNames } from '../../lib/react-helpers.js';
+import { useBreadcrumbsContext } from './breadcrumbs-context.js';
+
+function BreadcrumbsItem({ className, icon, children, renderAs, ...props }) {
     const { separator } = useBreadcrumbsContext();
     className = classNames('dc-breadcrumbs-item__link', className);
-    children = (_jsxs(_Fragment, { children: [icon != null && _jsx("div", { className: "dc-breadcrumbs-item__icon", children: icon }), _jsx("div", { className: "dc-breadcrumbs-item__text", children: children })] }));
+    children = (jsxs(Fragment, { children: [icon != null && jsx("div", { className: "dc-breadcrumbs-item__icon", children: icon }), jsx("div", { className: "dc-breadcrumbs-item__text", children: children })] }));
     let content;
     if (typeof renderAs === 'function') {
         content = renderAs({ className, children });
     }
     else {
-        content = _jsx("a", { ...props, className: className, children: children });
+        content = jsx("a", { ...props, className: className, children: children });
     }
-    return (_jsxs("li", { className: "dc-breadcrumbs-item", children: [content, separator != null && (_jsx("div", { "aria-hidden": true, className: "dc-breadcrumbs-item__separator", children: separator }))] }));
+    return (jsxs("li", { className: "dc-breadcrumbs-item", children: [content, separator != null && (jsx("div", { "aria-hidden": true, className: "dc-breadcrumbs-item__separator", children: separator }))] }));
 }
+
+export { BreadcrumbsItem };

package/esm/components/breadcrumbs/breadcrumbs.js

@@ -1,7 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from '../../shared/react-helpers';
-import { BreadcrumbsContextProvider } from './breadcrumbs-context';
-const defaultSeparator = (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 6 18", width: 6, height: 18, fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeWidth: 1, children: _jsx("line", { x1: 1, y1: 16, x2: 4, y2: 1 }) }));
-export function Breadcrumbs({ separator = defaultSeparator, className, children, ...props }) {
-    return (_jsx(BreadcrumbsContextProvider, { separator: separator, children: _jsx("nav", { ...props, className: classNames('dc-breadcrumbs', className), children: _jsx("ol", { className: "dc-breadcrumbs__items", children: children }) }) }));
+import { jsx } from 'react/jsx-runtime';
+import { classNames } from '../../lib/react-helpers.js';
+import { BreadcrumbsContextProvider } from './breadcrumbs-context.js';
+
+const defaultSeparator = (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 6 18", width: 6, height: 18, fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeWidth: 1, children: jsx("line", { x1: 1, y1: 16, x2: 4, y2: 1 }) }));
+function Breadcrumbs({ separator = defaultSeparator, className, children, ...props }) {
+    return (jsx(BreadcrumbsContextProvider, { separator: separator, children: jsx("nav", { ...props, className: classNames('dc-breadcrumbs', className), children: jsx("ol", { className: "dc-breadcrumbs__items", children: children }) }) }));
 }
+
+export { Breadcrumbs };

package/esm/components/button/button.js

@@ -1,24 +1,27 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { classNames } from '../../shared/react-helpers';
-import { Spinner } from '../spinner';
-export const Button = forwardRef(function Button({ isBlock = false, disabled = false, loading = false, type = 'button', size = 'sm', variant = 'filled', appearance = 'default', icon = null, caption = null, renderAs, className, children, ...props }, ref) {
-    const shouldRenderIcon = Boolean(icon);
-    const shouldRenderLabel = Boolean(children);
-    const shouldRenderCaption = Boolean(caption);
-    let leadingAddOn = null;
+import { classNames } from '../../lib/react-helpers.js';
+import { Spinner } from '../spinner/spinner.js';
+
+const Button = forwardRef(function Button({ isBlock = false, disabled = false, loading = false, type = 'button', size = 'sm', variant = 'filled', appearance = 'default', iconLeft = null, iconRight = null, caption = null, renderAs, className, children, ...props }, ref) {
+    let addOnLeft = null;
     if (loading) {
-        leadingAddOn = (_jsx("span", { "data-testid": "button-spinner", className: "dc-button__spinner", children: _jsx(Spinner, { size: "1.15em" }) }));
+        addOnLeft = (jsx("span", { "data-testid": "button-spinner", className: "dc-button__spinner", children: jsx(Spinner, { size: "1.15em" }) }));
+    }
+    else if (iconLeft) {
+        addOnLeft = (jsx("span", { "data-testid": "button-icon", className: "dc-button__icon", children: iconLeft }));
     }
-    else if (shouldRenderIcon) {
-        leadingAddOn = (_jsx("span", { "data-testid": "button-icon", className: "dc-button__icon", children: icon }));
+    let addOnRight = null;
+    if (iconRight) {
+        addOnRight = (jsx("span", { "data-testid": "button-icon", className: "dc-button__icon", children: iconRight }));
     }
-    const content = (_jsxs(_Fragment, { children: [leadingAddOn, shouldRenderLabel && (_jsxs("span", { className: "dc-button__body", children: [_jsx("span", { className: "dc-button__label", children: children }), shouldRenderCaption && (_jsx("small", { className: "dc-button__caption", children: caption }))] }))] }));
+    const shouldRenderLabel = Boolean(children);
+    const shouldRenderCaption = Boolean(caption);
+    const content = (jsxs(Fragment, { children: [addOnLeft, shouldRenderLabel && (jsxs("span", { className: "dc-button__body", children: [jsx("span", { className: "dc-button__label", children: children }), shouldRenderCaption && (jsx("small", { className: "dc-button__caption", children: caption }))] })), addOnRight] }));
     className = classNames(className, {
         'dc-button': true,
         'dc-button_block': isBlock,
         'dc-button_loading': loading,
-        'dc-button_has_icon': shouldRenderIcon,
         'dc-button_has_caption': shouldRenderCaption,
         [`dc-button_${size}`]: size,
         [`dc-button_appearance_${appearance}`]: appearance,
@@ -30,5 +33,7 @@ export const Button = forwardRef(function Button({ isBlock = false, disabled = f
             children: content,
         });
     }
-    return (_jsx("button", { ref: ref, type: type, disabled: disabled || loading, className: className, ...props, children: content }));
+    return (jsx("button", { ref: ref, type: type, disabled: disabled || loading, className: className, ...props, children: content }));
 });
+
+export { Button };

package/esm/components/button/icon-button.js

@@ -1,7 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { classNames } from '../../shared/react-helpers';
-import { Button } from './button';
-export const IconButton = forwardRef(function IconButton({ className, ...props }, ref) {
-    return _jsx(Button, { ref: ref, className: classNames('dc-button_icon-only', className), ...props });
+import { classNames } from '../../lib/react-helpers.js';
+import { Button } from './button.js';
+
+const IconButton = forwardRef(function IconButton({ className, icon, ...props }, ref) {
+    return jsx(Button, { ...props, ref: ref, iconLeft: icon, className: classNames('dc-button_icon-only', className) });
 });
+
+export { IconButton };

package/esm/components/button-group/button-group.js

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

package/esm/components/caption/caption.js

@@ -1,7 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, } from 'react';
-import { classNames } from '../../shared/react-helpers';
-import { ErrorIcon, InfoIcon, SuccessIcon, WarningIcon } from './icons';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { classNames } from '../../lib/react-helpers.js';
+import { InfoIcon, SuccessIcon, ErrorIcon, WarningIcon } from './icons.js';
+
 const iconMapping = {
     default: InfoIcon,
     info: InfoIcon,
@@ -9,14 +10,16 @@ const iconMapping = {
     error: ErrorIcon,
     warning: WarningIcon,
 };
-export const Caption = forwardRef(function Caption({ showIcon = false, appearance = 'default', className, children, ...props }, ref) {
+const Caption = forwardRef(function Caption({ showIcon = false, appearance = 'default', className, children, ...props }, ref) {
     let icon = null;
     if (showIcon) {
         const Icon = iconMapping[appearance];
-        icon = _jsx(Icon, { className: "dc-caption__icon", "data-testid": "caption-icon" });
+        icon = jsx(Icon, { className: "dc-caption__icon", "data-testid": "caption-icon" });
     }
-    return (_jsxs("div", { ...props, ref: ref, className: classNames(className, {
+    return (jsxs("div", { ...props, ref: ref, className: classNames(className, {
             'dc-caption': true,
             [`dc-caption_appearance_${appearance}`]: appearance,
         }), children: [icon, children] }));
 });
+
+export { Caption };

package/esm/components/caption/icons.js

@@ -1,13 +1,16 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-export function InfoIcon(props) {
-    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: 20, height: 20, "aria-hidden": true, ...props, children: _jsx("path", { fill: "currentColor", d: "M10 3C6.13425 3 3 6.13425 3 10C3 13.8657 6.13425 17 10 17C13.8657 17 17 13.8657 17 10C17 6.13425 13.8657 3 10 3ZM10.2631 12.7492C10.3698 12.7364 10.5361 12.7131 10.7863 12.6472C10.8454 12.6334 10.9075 12.6392 10.9629 12.6638C11.0184 12.6885 11.0644 12.7305 11.0937 12.7837C11.1252 12.8386 11.1395 12.9017 11.1351 12.9648C11.1306 13.0279 11.1075 13.0883 11.0687 13.1383C10.4241 13.9031 9.71592 14.2082 8.95875 14.0378C8.59417 13.9556 8.42267 13.7462 8.3445 13.5887C8.19283 13.2801 8.22317 12.8712 8.44075 12.3339C8.44075 12.3339 9.17283 10.532 9.2615 10.3202C9.29358 10.2479 9.25917 10.161 9.15358 10.168C8.97693 10.1893 8.80205 10.2234 8.63033 10.2701C8.57121 10.2842 8.50909 10.2785 8.45354 10.2538C8.39799 10.2292 8.35209 10.1869 8.32292 10.1336C8.29151 10.0786 8.27713 10.0156 8.2816 9.95244C8.28606 9.8893 8.30917 9.82891 8.348 9.77892C8.99258 9.01417 9.70075 8.70908 10.4579 8.87942C10.8225 8.96108 10.994 9.17108 11.0722 9.32858C11.2238 9.63717 11.1935 10.0461 10.9759 10.5833C10.9759 10.5833 10.2438 12.3852 10.1552 12.597C10.1231 12.6687 10.1581 12.7562 10.2631 12.7492V12.7492ZM12.3182 7.326C12.2535 7.62844 12.0715 7.89287 11.8121 8.06128C11.5527 8.22969 11.2371 8.28833 10.9345 8.22433C10.632 8.15965 10.3676 7.97767 10.1991 7.71829C10.0305 7.45892 9.97176 7.14331 10.0356 6.84067C10.107 6.54518 10.2909 6.28921 10.5481 6.1272C10.8053 5.96518 11.1156 5.90991 11.4129 5.97313C11.7103 6.03635 11.9712 6.21309 12.1403 6.46574C12.3093 6.71839 12.3732 7.02702 12.3182 7.326V7.326Z" }) }));
+import { jsx } from 'react/jsx-runtime';
+
+function InfoIcon(props) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: 20, height: 20, "aria-hidden": true, ...props, children: jsx("path", { fill: "currentColor", d: "M10 3C6.13425 3 3 6.13425 3 10C3 13.8657 6.13425 17 10 17C13.8657 17 17 13.8657 17 10C17 6.13425 13.8657 3 10 3ZM10.2631 12.7492C10.3698 12.7364 10.5361 12.7131 10.7863 12.6472C10.8454 12.6334 10.9075 12.6392 10.9629 12.6638C11.0184 12.6885 11.0644 12.7305 11.0937 12.7837C11.1252 12.8386 11.1395 12.9017 11.1351 12.9648C11.1306 13.0279 11.1075 13.0883 11.0687 13.1383C10.4241 13.9031 9.71592 14.2082 8.95875 14.0378C8.59417 13.9556 8.42267 13.7462 8.3445 13.5887C8.19283 13.2801 8.22317 12.8712 8.44075 12.3339C8.44075 12.3339 9.17283 10.532 9.2615 10.3202C9.29358 10.2479 9.25917 10.161 9.15358 10.168C8.97693 10.1893 8.80205 10.2234 8.63033 10.2701C8.57121 10.2842 8.50909 10.2785 8.45354 10.2538C8.39799 10.2292 8.35209 10.1869 8.32292 10.1336C8.29151 10.0786 8.27713 10.0156 8.2816 9.95244C8.28606 9.8893 8.30917 9.82891 8.348 9.77892C8.99258 9.01417 9.70075 8.70908 10.4579 8.87942C10.8225 8.96108 10.994 9.17108 11.0722 9.32858C11.2238 9.63717 11.1935 10.0461 10.9759 10.5833C10.9759 10.5833 10.2438 12.3852 10.1552 12.597C10.1231 12.6687 10.1581 12.7562 10.2631 12.7492V12.7492ZM12.3182 7.326C12.2535 7.62844 12.0715 7.89287 11.8121 8.06128C11.5527 8.22969 11.2371 8.28833 10.9345 8.22433C10.632 8.15965 10.3676 7.97767 10.1991 7.71829C10.0305 7.45892 9.97176 7.14331 10.0356 6.84067C10.107 6.54518 10.2909 6.28921 10.5481 6.1272C10.8053 5.96518 11.1156 5.90991 11.4129 5.97313C11.7103 6.03635 11.9712 6.21309 12.1403 6.46574C12.3093 6.71839 12.3732 7.02702 12.3182 7.326V7.326Z" }) }));
 }
-export function SuccessIcon(props) {
-    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: 20, height: 20, "aria-hidden": true, ...props, children: _jsx("path", { fill: "currentColor", d: "M12.828 7.97583L9.91133 12.6425C9.86481 12.7169 9.8021 12.7799 9.72787 12.8268C9.65364 12.8737 9.5698 12.9032 9.48259 12.9132C9.46069 12.9155 9.43869 12.9166 9.41667 12.9167C9.34006 12.9167 9.26418 12.9017 9.19341 12.8724C9.12263 12.843 9.05835 12.8 9.00425 12.7457L7.25425 10.9957C7.14799 10.8857 7.0892 10.7384 7.09053 10.5854C7.09186 10.4325 7.1532 10.2862 7.26136 10.178C7.36951 10.0699 7.51582 10.0085 7.66877 10.0072C7.82172 10.0059 7.96907 10.0647 8.07909 10.1709L9.3105 11.4023L11.8387 7.3575C11.9207 7.22631 12.0514 7.13306 12.2022 7.09827C12.3529 7.06348 12.5113 7.09 12.6425 7.172C12.7737 7.254 12.8669 7.38475 12.9017 7.5355C12.9365 7.68625 12.91 7.84464 12.828 7.97583M10 3C8.61553 3 7.26215 3.41054 6.11101 4.17971C4.95987 4.94888 4.06266 6.04213 3.53285 7.32121C3.00303 8.6003 2.86441 10.0078 3.13451 11.3656C3.4046 12.7235 4.07129 13.9708 5.05026 14.9497C6.02922 15.9287 7.2765 16.5954 8.63437 16.8655C9.99224 17.1356 11.3997 16.997 12.6788 16.4672C13.9579 15.9373 15.0511 15.0401 15.8203 13.889C16.5895 12.7378 17 11.3845 17 10C17 8.14348 16.2625 6.36301 14.9497 5.05025C13.637 3.7375 11.8565 3 10 3" }) }));
+function SuccessIcon(props) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: 20, height: 20, "aria-hidden": true, ...props, children: jsx("path", { fill: "currentColor", d: "M12.828 7.97583L9.91133 12.6425C9.86481 12.7169 9.8021 12.7799 9.72787 12.8268C9.65364 12.8737 9.5698 12.9032 9.48259 12.9132C9.46069 12.9155 9.43869 12.9166 9.41667 12.9167C9.34006 12.9167 9.26418 12.9017 9.19341 12.8724C9.12263 12.843 9.05835 12.8 9.00425 12.7457L7.25425 10.9957C7.14799 10.8857 7.0892 10.7384 7.09053 10.5854C7.09186 10.4325 7.1532 10.2862 7.26136 10.178C7.36951 10.0699 7.51582 10.0085 7.66877 10.0072C7.82172 10.0059 7.96907 10.0647 8.07909 10.1709L9.3105 11.4023L11.8387 7.3575C11.9207 7.22631 12.0514 7.13306 12.2022 7.09827C12.3529 7.06348 12.5113 7.09 12.6425 7.172C12.7737 7.254 12.8669 7.38475 12.9017 7.5355C12.9365 7.68625 12.91 7.84464 12.828 7.97583M10 3C8.61553 3 7.26215 3.41054 6.11101 4.17971C4.95987 4.94888 4.06266 6.04213 3.53285 7.32121C3.00303 8.6003 2.86441 10.0078 3.13451 11.3656C3.4046 12.7235 4.07129 13.9708 5.05026 14.9497C6.02922 15.9287 7.2765 16.5954 8.63437 16.8655C9.99224 17.1356 11.3997 16.997 12.6788 16.4672C13.9579 15.9373 15.0511 15.0401 15.8203 13.889C16.5895 12.7378 17 11.3845 17 10C17 8.14348 16.2625 6.36301 14.9497 5.05025C13.637 3.7375 11.8565 3 10 3" }) }));
 }
-export function ErrorIcon(props) {
-    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: 20, height: 20, "aria-hidden": true, ...props, children: _jsx("path", { fill: "currentColor", d: "M10 14.0833C9.82694 14.0833 9.65777 14.032 9.51388 13.9359C9.36999 13.8397 9.25783 13.7031 9.19161 13.5432C9.12538 13.3833 9.10805 13.2074 9.14181 13.0376C9.17558 12.8679 9.25891 12.712 9.38128 12.5896C9.50365 12.4672 9.65956 12.3839 9.8293 12.3501C9.99903 12.3164 10.175 12.3337 10.3348 12.3999C10.4947 12.4662 10.6314 12.5783 10.7275 12.7222C10.8237 12.8661 10.875 13.0353 10.875 13.2083C10.8747 13.4403 10.7824 13.6627 10.6184 13.8267C10.4544 13.9907 10.232 14.083 10 14.0833M9.384 6.17742C9.54824 6.01568 9.7695 5.92502 10 5.92502C10.2305 5.92502 10.4518 6.01568 10.616 6.17742C10.6961 6.25973 10.7588 6.35742 10.8002 6.46458C10.8416 6.57175 10.8609 6.68618 10.8569 6.801L10.7344 10.7426C10.7309 10.8563 10.6833 10.9641 10.6016 11.0433C10.52 11.1225 10.4107 11.1667 10.2969 11.1667H9.70367C9.59017 11.1669 9.48105 11.1229 9.39939 11.0441C9.31774 10.9653 9.26996 10.8578 9.26617 10.7443L9.14309 6.80042C9.13919 6.6857 9.15852 6.57137 9.19992 6.46431C9.24132 6.35725 9.30393 6.25967 9.384 6.17742M10 3C8.61553 3 7.26215 3.41054 6.11101 4.17971C4.95987 4.94888 4.06266 6.04213 3.53285 7.32121C3.00303 8.6003 2.86441 10.0078 3.13451 11.3656C3.4046 12.7235 4.07129 13.9708 5.05026 14.9497C6.02922 15.9287 7.2765 16.5954 8.63437 16.8655C9.99224 17.1356 11.3997 16.997 12.6788 16.4672C13.9579 15.9373 15.0511 15.0401 15.8203 13.889C16.5895 12.7378 17 11.3845 17 10C17 8.14348 16.2625 6.36301 14.9497 5.05025C13.637 3.7375 11.8565 3 10 3" }) }));
+function ErrorIcon(props) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: 20, height: 20, "aria-hidden": true, ...props, children: jsx("path", { fill: "currentColor", d: "M10 14.0833C9.82694 14.0833 9.65777 14.032 9.51388 13.9359C9.36999 13.8397 9.25783 13.7031 9.19161 13.5432C9.12538 13.3833 9.10805 13.2074 9.14181 13.0376C9.17558 12.8679 9.25891 12.712 9.38128 12.5896C9.50365 12.4672 9.65956 12.3839 9.8293 12.3501C9.99903 12.3164 10.175 12.3337 10.3348 12.3999C10.4947 12.4662 10.6314 12.5783 10.7275 12.7222C10.8237 12.8661 10.875 13.0353 10.875 13.2083C10.8747 13.4403 10.7824 13.6627 10.6184 13.8267C10.4544 13.9907 10.232 14.083 10 14.0833M9.384 6.17742C9.54824 6.01568 9.7695 5.92502 10 5.92502C10.2305 5.92502 10.4518 6.01568 10.616 6.17742C10.6961 6.25973 10.7588 6.35742 10.8002 6.46458C10.8416 6.57175 10.8609 6.68618 10.8569 6.801L10.7344 10.7426C10.7309 10.8563 10.6833 10.9641 10.6016 11.0433C10.52 11.1225 10.4107 11.1667 10.2969 11.1667H9.70367C9.59017 11.1669 9.48105 11.1229 9.39939 11.0441C9.31774 10.9653 9.26996 10.8578 9.26617 10.7443L9.14309 6.80042C9.13919 6.6857 9.15852 6.57137 9.19992 6.46431C9.24132 6.35725 9.30393 6.25967 9.384 6.17742M10 3C8.61553 3 7.26215 3.41054 6.11101 4.17971C4.95987 4.94888 4.06266 6.04213 3.53285 7.32121C3.00303 8.6003 2.86441 10.0078 3.13451 11.3656C3.4046 12.7235 4.07129 13.9708 5.05026 14.9497C6.02922 15.9287 7.2765 16.5954 8.63437 16.8655C9.99224 17.1356 11.3997 16.997 12.6788 16.4672C13.9579 15.9373 15.0511 15.0401 15.8203 13.889C16.5895 12.7378 17 11.3845 17 10C17 8.14348 16.2625 6.36301 14.9497 5.05025C13.637 3.7375 11.8565 3 10 3" }) }));
 }
-export function WarningIcon(props) {
-    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: 20, height: 20, "aria-hidden": true, ...props, children: _jsx("path", { fill: "currentColor", d: "M9.99999 14.4617C9.8681 14.4617 9.73919 14.4243 9.62953 14.3544C9.51988 14.2845 9.43441 14.1851 9.38394 14.0688C9.33347 13.9526 9.32027 13.8246 9.346 13.7012C9.37173 13.5777 9.43523 13.4644 9.52849 13.3754C9.62174 13.2864 9.74055 13.2258 9.8699 13.2012C9.99925 13.1767 10.1333 13.1893 10.2552 13.2374C10.377 13.2856 10.4811 13.3672 10.5544 13.4718C10.6277 13.5764 10.6668 13.6995 10.6668 13.8253C10.6664 13.994 10.5961 14.1556 10.4711 14.2749C10.3461 14.3942 10.1767 14.4613 9.99999 14.4617M9.52122 8.28223C9.64998 8.16431 9.82153 8.09847 9.99999 8.09847C10.1784 8.09847 10.35 8.16431 10.4787 8.28223C10.5409 8.34158 10.5897 8.41246 10.622 8.49049C10.6544 8.56853 10.6696 8.65206 10.6668 8.73593L10.5708 11.6077C10.5673 11.6913 10.5298 11.7702 10.4663 11.8279C10.4029 11.8855 10.3183 11.9172 10.2307 11.9163H9.76927C9.68192 11.9171 9.59768 11.8855 9.53425 11.8281C9.47083 11.7708 9.43317 11.6923 9.4292 11.609L9.33318 8.73593C9.33038 8.65206 9.34562 8.56853 9.37796 8.49049C9.4103 8.41246 9.45906 8.34158 9.52122 8.28223M17.8362 15.1171L11.1082 3.62045C10.998 3.43231 10.8372 3.27563 10.6424 3.16656C10.4476 3.0575 10.2258 3 9.99999 3C9.77413 3 9.55236 3.0575 9.35756 3.16656C9.16275 3.27563 9.00196 3.43231 8.89176 3.62045L2.16374 15.1171L2.16241 15.1203C2.05169 15.3142 1.9958 15.5322 2.00025 15.753C2.00469 15.9738 2.06931 16.1897 2.18774 16.3794C2.30618 16.5691 2.47434 16.7261 2.67568 16.8349C2.87702 16.9437 3.10459 17.0006 3.33598 17H16.6653C16.8969 17.0003 17.1245 16.943 17.3258 16.8338C17.5272 16.7246 17.6952 16.5672 17.8133 16.3771C17.9315 16.1871 17.9958 15.971 17.9998 15.75C18.0038 15.5291 17.9474 15.3109 17.8362 15.1171" }) }));
+function WarningIcon(props) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: 20, height: 20, "aria-hidden": true, ...props, children: jsx("path", { fill: "currentColor", d: "M9.99999 14.4617C9.8681 14.4617 9.73919 14.4243 9.62953 14.3544C9.51988 14.2845 9.43441 14.1851 9.38394 14.0688C9.33347 13.9526 9.32027 13.8246 9.346 13.7012C9.37173 13.5777 9.43523 13.4644 9.52849 13.3754C9.62174 13.2864 9.74055 13.2258 9.8699 13.2012C9.99925 13.1767 10.1333 13.1893 10.2552 13.2374C10.377 13.2856 10.4811 13.3672 10.5544 13.4718C10.6277 13.5764 10.6668 13.6995 10.6668 13.8253C10.6664 13.994 10.5961 14.1556 10.4711 14.2749C10.3461 14.3942 10.1767 14.4613 9.99999 14.4617M9.52122 8.28223C9.64998 8.16431 9.82153 8.09847 9.99999 8.09847C10.1784 8.09847 10.35 8.16431 10.4787 8.28223C10.5409 8.34158 10.5897 8.41246 10.622 8.49049C10.6544 8.56853 10.6696 8.65206 10.6668 8.73593L10.5708 11.6077C10.5673 11.6913 10.5298 11.7702 10.4663 11.8279C10.4029 11.8855 10.3183 11.9172 10.2307 11.9163H9.76927C9.68192 11.9171 9.59768 11.8855 9.53425 11.8281C9.47083 11.7708 9.43317 11.6923 9.4292 11.609L9.33318 8.73593C9.33038 8.65206 9.34562 8.56853 9.37796 8.49049C9.4103 8.41246 9.45906 8.34158 9.52122 8.28223M17.8362 15.1171L11.1082 3.62045C10.998 3.43231 10.8372 3.27563 10.6424 3.16656C10.4476 3.0575 10.2258 3 9.99999 3C9.77413 3 9.55236 3.0575 9.35756 3.16656C9.16275 3.27563 9.00196 3.43231 8.89176 3.62045L2.16374 15.1171L2.16241 15.1203C2.05169 15.3142 1.9958 15.5322 2.00025 15.753C2.00469 15.9738 2.06931 16.1897 2.18774 16.3794C2.30618 16.5691 2.47434 16.7261 2.67568 16.8349C2.87702 16.9437 3.10459 17.0006 3.33598 17H16.6653C16.8969 17.0003 17.1245 16.943 17.3258 16.8338C17.5272 16.7246 17.6952 16.5672 17.8133 16.3771C17.9315 16.1871 17.9958 15.971 17.9998 15.75C18.0038 15.5291 17.9474 15.3109 17.8362 15.1171" }) }));
 }
+
+export { ErrorIcon, InfoIcon, SuccessIcon, WarningIcon };

package/esm/components/checkbox/checkbox.js

@@ -1,11 +1,14 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { classNames } from '../../shared/react-helpers';
-export const Checkbox = forwardRef(function Checkbox({ hasMixedState = false, style = {}, className = '', onChange, onToggle, ...props }, ref) {
-    return (_jsxs("label", { style: style, className: classNames('dc-checkbox', className), children: [_jsx("input", { ...props, ref: ref, type: "checkbox", className: "dc-checkbox__input", onChange: (event) => {
-                    onChange === null || onChange === void 0 ? void 0 : onChange(event);
-                    onToggle === null || onToggle === void 0 ? void 0 : onToggle(event.target.checked);
-                } }), _jsx("span", { className: "dc-checkbox__check", "data-testid": "checkbox-check", "aria-hidden": true, children: hasMixedState ? dashIcon : checkIcon })] }));
+import { classNames } from '../../lib/react-helpers.js';
+
+const checkIcon = (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", className: "dc-checkbox__icon", "data-testid": "checkbox-check-icon", children: jsx("path", { d: "M6 12.5556L10.8 17L18 7", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const dashIcon = (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", className: "dc-checkbox__icon", "data-testid": "checkbox-dash-icon", children: jsx("path", { d: "M6 12H18", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" }) }));
+const Checkbox = forwardRef(function Checkbox({ hasMixedState = false, style = {}, className = '', onChange, onToggle, ...props }, ref) {
+    return (jsxs("label", { style: style, className: classNames('dc-checkbox', className), children: [jsx("input", { ...props, ref: ref, type: "checkbox", className: "dc-checkbox__input", onChange: (event) => {
+                    onChange?.(event);
+                    onToggle?.(event.target.checked);
+                } }), jsx("span", { className: "dc-checkbox__check", "data-testid": "checkbox-check", "aria-hidden": true, children: hasMixedState ? dashIcon : checkIcon })] }));
 });
-const checkIcon = (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", className: "dc-checkbox__icon", "data-testid": "checkbox-check-icon", children: _jsx("path", { d: "M6 12.5556L10.8 17L18 7", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
-const dashIcon = (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", className: "dc-checkbox__icon", "data-testid": "checkbox-dash-icon", children: _jsx("path", { d: "M6 12H18", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" }) }));
+
+export { Checkbox };

package/esm/components/color-picker/color-picker-button.js

@@ -1,11 +1,14 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { classNames } from '../../shared/react-helpers';
-export function ColorPickerButton({ style, className, label, name, color, value, checked, onChangeValue, }) {
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { classNames } from '../../lib/react-helpers.js';
+
+function ColorPickerButton({ style, className, label, name, color, value, checked, onChangeValue, }) {
     const customProperties = {
         '--dc-color-picker-btn-color': color,
     };
-    return (_jsxs("label", { style: { ...customProperties, ...style }, className: classNames(className, {
+    return (jsxs("label", { style: { ...customProperties, ...style }, className: classNames(className, {
             'dc-color-picker__btn': true,
             'dc-color-picker__btn_checked': checked,
-        }), children: [_jsx("input", { type: "radio", name: name, value: value, checked: checked, onChange: () => onChangeValue(value) }), label] }));
+        }), children: [jsx("input", { type: "radio", name: name, value: value, checked: checked, onChange: () => onChangeValue(value) }), label] }));
 }
+
+export { ColorPickerButton };

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

@@ -1,9 +1,12 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from '../../shared/react-helpers';
-import { ColorPickerButton } from './color-picker-button';
-export function ColorPicker({ className, name, options, value, disabled, onChangeValue, ...props }) {
-    return (_jsx("fieldset", { ...props, disabled: disabled, className: classNames(className, {
+import { jsx } from 'react/jsx-runtime';
+import { classNames } from '../../lib/react-helpers.js';
+import { ColorPickerButton } from './color-picker-button.js';
+
+function ColorPicker({ className, name, options, value, disabled, onChangeValue, ...props }) {
+    return (jsx("fieldset", { ...props, disabled: disabled, className: classNames(className, {
             'dc-color-picker': true,
             'dc-color-picker_disabled': disabled,
-        }), children: options.map((option) => (_jsx(ColorPickerButton, { name: name, label: option.label, color: option.color, value: option.value, checked: option.value === value, onChangeValue: onChangeValue }, option.value))) }));
+        }), children: options.map((option) => (jsx(ColorPickerButton, { name: name, label: option.label, color: option.color, value: option.value, checked: option.value === value, onChangeValue: onChangeValue }, option.value))) }));
 }
+
+export { ColorPicker };

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

@@ -1,12 +1,15 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from '../../shared/react-helpers';
-export function CalendarDay({ date, dateISO, locale, isSelected, isDisabled, isFocusable, isToday, isWeekend, inRange, isRangeStart, isRangeEnd, ...props }) {
-    return (_jsx("button", { ...props, className: classNames('dc-calendar-day', {
+import { jsx } from 'react/jsx-runtime';
+import { classNames } from '../../lib/react-helpers.js';
+
+function CalendarDay({ date, dateISO, locale, isSelected, isDisabled, isFocusable, isToday, isWeekend, inRange, isRangeStart, isRangeEnd, ...props }) {
+    return (jsx("button", { ...props, className: classNames('dc-calendar-day', {
             'dc-calendar-day_selected': isSelected,
             'dc-calendar-day_today': isToday,
             'dc-calendar-day_weekend': isWeekend,
             'dc-calendar-day_in-range': inRange,
             'dc-calendar-day_range-start': isRangeStart,
             'dc-calendar-day_range-end': isRangeEnd,
-        }), disabled: isDisabled, tabIndex: isFocusable ? 0 : -1, "data-date": dateISO, "aria-label": date.toLocaleString(locale, { dateStyle: 'long' }), children: _jsx("span", { className: "dc-calendar-day__body", children: date.getDate() }) }));
+        }), disabled: isDisabled, tabIndex: isFocusable ? 0 : -1, "data-date": dateISO, "aria-label": date.toLocaleString(locale, { dateStyle: 'long' }), children: jsx("span", { className: "dc-calendar-day__body", children: date.getDate() }) }));
 }
+
+export { CalendarDay };

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

@@ -1,11 +1,14 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { DAYS_IN_WEEK, addDays, getStartOfWeek, } from './date-helpers';
-export function CalendarGridHead({ locale, weekStartsOn, }) {
+import { jsx } from 'react/jsx-runtime';
+import { getStartOfWeek, DAYS_IN_WEEK, addDays } from './date-helpers.js';
+
+function CalendarGridHead({ locale, weekStartsOn, }) {
     const columns = [];
     const monday = getStartOfWeek(new Date(), weekStartsOn);
     for (let weekday = 0; weekday < DAYS_IN_WEEK; weekday += 1) {
         const date = addDays(monday, weekday);
-        columns.push(_jsx("th", { role: "columnheader", abbr: date.toLocaleDateString(locale, { weekday: 'long' }), children: date.toLocaleDateString(locale, { weekday: 'short' }) }, weekday));
+        columns.push(jsx("th", { role: "columnheader", abbr: date.toLocaleDateString(locale, { weekday: 'long' }), children: date.toLocaleDateString(locale, { weekday: 'short' }) }, weekday));
     }
-    return (_jsx("thead", { children: _jsx("tr", { role: "row", children: columns }) }));
+    return (jsx("thead", { children: jsx("tr", { role: "row", children: columns }) }));
 }
+
+export { CalendarGridHead };

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

@@ -1,9 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { KeyboardKeys } from '../../shared/keyboard-keys';
-import { DAYS_IN_WEEK, addDays, addMonths, addYears, getEndOfMonth, getEndOfWeek, getStartOfMonth, getStartOfWeek, isSameDay, isWeekend, toDateISO, } from './date-helpers';
-import { CalendarGridHead } from './calendar-grid-head';
-import { CalendarDay } from './calendar-day';
-export function CalendarGrid({ focusDay, minDate, maxDate, locale, weekStartsOn, getDayProps, onHoverDay, onFocusDay, onSelectDay, onChangeFocusDay, }) {
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { KeyboardKeys } from '../../lib/keyboard-keys.js';
+import { getStartOfMonth, getEndOfMonth, getStartOfWeek, getEndOfWeek, toDateISO, isSameDay, isWeekend, addDays, DAYS_IN_WEEK, addYears, addMonths } from './date-helpers.js';
+import { CalendarGridHead } from './calendar-grid-head.js';
+import { CalendarDay } from './calendar-day.js';
+
+function CalendarGrid({ focusDay, minDate, maxDate, locale, weekStartsOn, getDayProps, onHoverDay, onFocusDay, onSelectDay, onChangeFocusDay, }) {
     const today = new Date();
     const monthStart = getStartOfMonth(focusDay);
     const monthEnd = getEndOfMonth(focusDay);
@@ -24,13 +25,13 @@ export function CalendarGrid({ focusDay, minDate, maxDate, locale, weekStartsOn,
             const inDisplayedMonth = date >= monthStart && date <= monthEnd;
             let calendarDay = null;
             if (inDisplayedMonth) {
-                calendarDay = _jsx(CalendarDay, { ...getDayProps === null || getDayProps === void 0 ? void 0 : getDayProps(date), date: date, dateISO: dateISO, locale: locale, isToday: isSameDay(date, today), isWeekend: isWeekend(date), isFocusable: isSameDay(date, focusDay), isDisabled: (minDate != null && date < minDate) ||
+                calendarDay = jsx(CalendarDay, { ...getDayProps?.(date), date: date, dateISO: dateISO, locale: locale, isToday: isSameDay(date, today), isWeekend: isWeekend(date), isFocusable: isSameDay(date, focusDay), isDisabled: (minDate != null && date < minDate) ||
                         (maxDate != null && date > maxDate), onClick: handleSelectDay(date), onMouseEnter: handleHoverDay(date) });
             }
-            columns.push(_jsx("td", { role: "gridcell", children: calendarDay }, dateISO));
+            columns.push(jsx("td", { role: "gridcell", children: calendarDay }, dateISO));
             date = addDays(date, 1);
         }
-        rows.push(_jsx("tr", { role: "row", children: columns }, `week-${week}`));
+        rows.push(jsx("tr", { role: "row", children: columns }, `week-${week}`));
         week += 1;
     }
     function handleSelectDay(date) {
@@ -41,7 +42,7 @@ export function CalendarGrid({ focusDay, minDate, maxDate, locale, weekStartsOn,
     }
     function handleHoverDay(date) {
         return () => {
-            onHoverDay === null || onHoverDay === void 0 ? void 0 : onHoverDay(date);
+            onHoverDay?.(date);
         };
     }
     function handleKeydown(event) {
@@ -91,11 +92,13 @@ export function CalendarGrid({ focusDay, minDate, maxDate, locale, weekStartsOn,
                 if (dayElement instanceof HTMLButtonElement) {
                     dayElement.focus();
                     if (newFocusDay) {
-                        onFocusDay === null || onFocusDay === void 0 ? void 0 : onFocusDay(newFocusDay);
+                        onFocusDay?.(newFocusDay);
                     }
                 }
             }, 0);
         }
     }
-    return (_jsxs("table", { className: "dc-calendar__grid", role: "grid", "aria-label": ariaLabel, children: [_jsx(CalendarGridHead, { locale: locale, weekStartsOn: weekStartsOn }), _jsx("tbody", { onKeyDown: handleKeydown, children: rows })] }));
+    return (jsxs("table", { className: "dc-calendar__grid", role: "grid", "aria-label": ariaLabel, children: [jsx(CalendarGridHead, { locale: locale, weekStartsOn: weekStartsOn }), jsx("tbody", { onKeyDown: handleKeydown, children: rows })] }));
 }
+
+export { CalendarGrid };

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

@@ -1,36 +1,38 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { MONTHS_IN_YEAR, addMonths, setDateYear, setDateMonth, } from './date-helpers';
-import { classNames } from '../../shared/react-helpers';
-import { useEffect, useState } from 'react';
-import { IconButton } from '../button';
-import { Select } from '../select';
-import { TextInput } from '../text-input';
-import { ChevronLeftIcon, ChevronRightIcon } from './icons';
-export function CalendarHeader({ focusDay, onChangeFocusDay, className, locale, nextMonthButtonLabel = 'next month', prevMonthButtonLabel = 'previous month', monthSelectLabel = 'month', yearInputLabel = 'year', }) {
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { addMonths, setDateMonth, setDateYear, MONTHS_IN_YEAR } from './date-helpers.js';
+import { classNames } from '../../lib/react-helpers.js';
+import { useState, useEffect } from 'react';
+import '../button/button.js';
+import { IconButton } from '../button/icon-button.js';
+import { Select } from '../select/select.js';
+import { TextInput } from '../text-input/text-input.js';
+import { ChevronLeftIcon, ChevronRightIcon } from './icons.js';
+
+function CalendarHeader({ focusDay, onChangeFocusDay, className, locale, nextMonthButtonLabel = 'next month', prevMonthButtonLabel = 'previous month', monthSelectLabel = 'month', yearInputLabel = 'year', }) {
     const selectedYear = focusDay.getFullYear();
     const selectedMonth = focusDay.getMonth();
     const [year, setYear] = useState(formatYear(selectedYear));
     useEffect(() => {
-        setYear((prevYear) => (parseYear(prevYear) !== selectedYear
-            ? formatYear(selectedYear)
-            : prevYear));
+        setYear((prevYear) => (parseYear(prevYear) === selectedYear
+            ? prevYear
+            : formatYear(selectedYear)));
     }, [selectedYear]);
-    return (_jsxs("div", { className: classNames('dc-calendar__header', className), children: [_jsx(IconButton, { className: "dc-calendar-prev-month", size: "sm", "aria-label": prevMonthButtonLabel, icon: _jsx(ChevronLeftIcon, { width: 14, height: 14 }), onClick: () => onChangeFocusDay(addMonths(focusDay, -1)) }), _jsx(Select, { className: "dc-calendar-month-select", "aria-label": monthSelectLabel, size: "sm", name: "month", value: selectedMonth, onChange: (event) => {
+    return (jsxs("div", { className: classNames('dc-calendar__header', className), children: [jsx(IconButton, { className: "dc-calendar-prev-month", size: "sm", "aria-label": prevMonthButtonLabel, icon: jsx(ChevronLeftIcon, { width: 14, height: 14 }), onClick: () => onChangeFocusDay(addMonths(focusDay, -1)) }), jsx(Select, { className: "dc-calendar-month-select", "aria-label": monthSelectLabel, size: "sm", name: "month", value: selectedMonth, onChange: (event) => {
                     const month = Number(event.target.value);
                     onChangeFocusDay(setDateMonth(focusDay, month));
-                }, children: generateMonthOptions(locale) }), _jsx(TextInput, { className: "dc-calendar-year-input", "aria-label": yearInputLabel, width: "4ch", size: "sm", value: year, maxLength: 4, onBlur: () => setYear(formatYear(year)), onChangeValue: (value) => {
+                }, children: generateMonthOptions(locale) }), jsx(TextInput, { className: "dc-calendar-year-input", "aria-label": yearInputLabel, width: "4ch", size: "sm", value: year, maxLength: 4, onBlur: () => setYear(formatYear(year)), onChangeValue: (value) => {
                     if (value.match(/^\d*$/)) {
                         setYear(value);
                         onChangeFocusDay(setDateYear(focusDay, parseYear(value)));
                     }
-                } }), _jsx(IconButton, { className: "dc-calendar-next-month", "aria-label": nextMonthButtonLabel, icon: _jsx(ChevronRightIcon, { width: 14, height: 14 }), onClick: () => onChangeFocusDay(addMonths(focusDay, 1)) })] }));
+                } }), jsx(IconButton, { className: "dc-calendar-next-month", "aria-label": nextMonthButtonLabel, icon: jsx(ChevronRightIcon, { width: 14, height: 14 }), onClick: () => onChangeFocusDay(addMonths(focusDay, 1)) })] }));
 }
 function generateMonthOptions(locale = 'en') {
     const options = [];
     const date = new Date();
     for (let month = 0; month < MONTHS_IN_YEAR; month += 1) {
         date.setMonth(month);
-        options.push(_jsx("option", { value: month, children: date.toLocaleDateString(locale, { month: 'long' }) }, month));
+        options.push(jsx("option", { value: month, children: date.toLocaleDateString(locale, { month: 'long' }) }, month));
     }
     return options;
 }
@@ -40,3 +42,5 @@ function formatYear(year) {
 function parseYear(year) {
     return Number(year);
 }
+
+export { CalendarHeader };