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

package/cjs/hooks/{use-mount-transition.js → use-mount-transition.cjs}

@@ -1,24 +1,24 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMountTransition = void 0;
-const react_1 = require("react");
-const react_helpers_1 = require("../lib/react-helpers");
+'use strict';
+
+const react = require('react');
+const reactHelpers = require('../lib/react-helpers.cjs');
+
 function useMountTransition({ animateFirstMount = false, isShown, durationMs, enterFrom, enterTo, }) {
-    const [isMounted, setIsMounted] = (0, react_1.useState)(isShown);
-    const [hasEnterToClass, setHasEnterToClass] = (0, react_1.useState)(false);
-    const firstMount = (0, react_1.useRef)(true);
-    const prefersReducedMotion = (0, react_1.useMemo)(() => window.matchMedia('(prefers-reduced-motion: reduce)'), []);
+    const [isMounted, setIsMounted] = react.useState(isShown);
+    const [hasEnterToClass, setHasEnterToClass] = react.useState(false);
+    const firstMount = react.useRef(true);
+    const prefersReducedMotion = react.useMemo(() => window.matchMedia('(prefers-reduced-motion: reduce)'), []);
     const disableTransition = (prefersReducedMotion.matches ||
         (!animateFirstMount && firstMount.current));
     if (disableTransition) {
         durationMs = 0;
     }
-    (0, react_1.useEffect)(() => {
+    react.useEffect(() => {
         if (!isShown) {
             firstMount.current = false;
         }
     }, [isShown]);
-    (0, react_1.useEffect)(() => {
+    react.useEffect(() => {
         let timeout;
         if (isShown) {
             setIsMounted(true);
@@ -34,7 +34,8 @@ function useMountTransition({ animateFirstMount = false, isShown, durationMs, en
         isMounted,
         className: disableTransition
             ? ''
-            : (0, react_helpers_1.classNames)(enterFrom, hasEnterToClass && enterTo),
+            : reactHelpers.classNames(enterFrom, hasEnterToClass && enterTo),
     };
 }
+
 exports.useMountTransition = useMountTransition;

package/cjs/index.cjs

@@ -0,0 +1,141 @@
+'use strict';
+
+const keyboardKeys = require('./lib/keyboard-keys.cjs');
+const helpers = require('./lib/helpers.cjs');
+const reactHelpers = require('./lib/react-helpers.cjs');
+const useMountTransition = require('./hooks/use-mount-transition.cjs');
+const useDisableBodyScroll = require('./hooks/use-disable-body-scroll.cjs');
+const useEscKeyDown = require('./hooks/use-esc-key-down.cjs');
+const useFocusTrap = require('./hooks/use-focus-trap.cjs');
+const alert = require('./components/alert/alert.cjs');
+const avatar = require('./components/avatar/avatar.cjs');
+const avatarGroup = require('./components/avatar-group/avatar-group.cjs');
+const badge = require('./components/badge/badge.cjs');
+const breadcrumbs = require('./components/breadcrumbs/breadcrumbs.cjs');
+const breadcrumbsItem = require('./components/breadcrumbs/breadcrumbs-item.cjs');
+const button = require('./components/button/button.cjs');
+const iconButton = require('./components/button/icon-button.cjs');
+const buttonGroup = require('./components/button-group/button-group.cjs');
+const caption = require('./components/caption/caption.cjs');
+const checkbox = require('./components/checkbox/checkbox.cjs');
+const datePicker = require('./components/date-picker/date-picker.cjs');
+const dateRangePicker = require('./components/date-picker/date-range-picker.cjs');
+const datePickerPopover = require('./components/date-picker-popover/date-picker-popover.cjs');
+const dateRangePickerPopover = require('./components/date-range-picker-popover/date-range-picker-popover.cjs');
+const dialog = require('./components/dialog/dialog.cjs');
+const dialogHeader = require('./components/dialog/dialog-header.cjs');
+const dialogBody = require('./components/dialog/dialog-body.cjs');
+const dialogFooter = require('./components/dialog/dialog-footer.cjs');
+const emptyState = require('./components/empty-state/empty-state.cjs');
+const filePicker = require('./components/file-picker/file-picker.cjs');
+const filterButtons = require('./components/filter-buttons/filter-buttons.cjs');
+const filterButton = require('./components/filter-buttons/filter-button.cjs');
+const formField = require('./components/form-field/form-field.cjs');
+const label = require('./components/label/label.cjs');
+const menu = require('./components/menu/menu.cjs');
+const menuItem = require('./components/menu/menu-item.cjs');
+const menuSeparator = require('./components/menu/menu-separator.cjs');
+const navList = require('./components/nav-list/nav-list.cjs');
+const navListItem = require('./components/nav-list/nav-list-item.cjs');
+const navListTitle = require('./components/nav-list/nav-list-title.cjs');
+const passwordInput = require('./components/password-input/password-input.cjs');
+const popover = require('./components/popover/popover.cjs');
+const portal = require('./components/portal/portal.cjs');
+const radio = require('./components/radio/radio.cjs');
+const segmentedControl = require('./components/segmented-control/segmented-control.cjs');
+const select = require('./components/select/select.cjs');
+const slider = require('./components/slider/slider.cjs');
+const sliderTickMarks = require('./components/slider/slider-tick-marks.cjs');
+const spinner = require('./components/spinner/spinner.cjs');
+const _switch = require('./components/switch/switch.cjs');
+const tableContainer = require('./components/table/table-container.cjs');
+const table = require('./components/table/table.cjs');
+const tableHead = require('./components/table/table-head.cjs');
+const tableBody = require('./components/table/table-body.cjs');
+const tableRow = require('./components/table/table-row.cjs');
+const tableHeadCell = require('./components/table/table-head-cell.cjs');
+const tableCell = require('./components/table/table-cell.cjs');
+const tabs = require('./components/tabs/tabs.cjs');
+const tabList = require('./components/tabs/tab-list.cjs');
+const tab = require('./components/tabs/tab.cjs');
+const tabPanel = require('./components/tabs/tab-panel.cjs');
+const tag = require('./components/tag/tag.cjs');
+const textInput = require('./components/text-input/text-input.cjs');
+const textarea = require('./components/textarea/textarea.cjs');
+const toast = require('./components/toast/toast.cjs');
+const toastButton = require('./components/toast/toast-button.cjs');
+const toaster = require('./components/toaster/toaster.cjs');
+const tooltip = require('./components/tooltip/tooltip.cjs');
+
+
+
+exports.KeyboardKeys = keyboardKeys.KeyboardKeys;
+exports.assertIfNullable = helpers.assertIfNullable;
+exports.once = helpers.once;
+exports.classNames = reactHelpers.classNames;
+exports.focusElement = reactHelpers.focusElement;
+exports.isReactElementWithRef = reactHelpers.isReactElementWithRef;
+exports.mergeRefs = reactHelpers.mergeRefs;
+exports.useMountTransition = useMountTransition.useMountTransition;
+exports.useDisableBodyScroll = useDisableBodyScroll.useDisableBodyScroll;
+exports.useEscKeyDown = useEscKeyDown.useEscKeyDown;
+exports.useFocusTrap = useFocusTrap.useFocusTrap;
+exports.Alert = alert.Alert;
+exports.Avatar = avatar.Avatar;
+exports.AvatarGroup = avatarGroup.AvatarGroup;
+exports.Badge = badge.Badge;
+exports.Breadcrumbs = breadcrumbs.Breadcrumbs;
+exports.BreadcrumbsItem = breadcrumbsItem.BreadcrumbsItem;
+exports.Button = button.Button;
+exports.IconButton = iconButton.IconButton;
+exports.ButtonGroup = buttonGroup.ButtonGroup;
+exports.Caption = caption.Caption;
+exports.Checkbox = checkbox.Checkbox;
+exports.DatePicker = datePicker.DatePicker;
+exports.DateRangePicker = dateRangePicker.DateRangePicker;
+exports.DatePickerPopover = datePickerPopover.DatePickerPopover;
+exports.DateRangePickerPopover = dateRangePickerPopover.DateRangePickerPopover;
+exports.Dialog = dialog.Dialog;
+exports.DialogHeader = dialogHeader.DialogHeader;
+exports.DialogBody = dialogBody.DialogBody;
+exports.DialogFooter = dialogFooter.DialogFooter;
+exports.EmptyState = emptyState.EmptyState;
+exports.FilePicker = filePicker.FilePicker;
+exports.FilterButtons = filterButtons.FilterButtons;
+exports.FilterButton = filterButton.FilterButton;
+exports.FormField = formField.FormField;
+exports.Label = label.Label;
+exports.Menu = menu.Menu;
+exports.MenuItem = menuItem.MenuItem;
+exports.MenuSeparator = menuSeparator.MenuSeparator;
+exports.NavList = navList.NavList;
+exports.NavListItem = navListItem.NavListItem;
+exports.NavListTitle = navListTitle.NavListTitle;
+exports.PasswordInput = passwordInput.PasswordInput;
+exports.Popover = popover.Popover;
+exports.Portal = portal.Portal;
+exports.Radio = radio.Radio;
+exports.SegmentedControl = segmentedControl.SegmentedControl;
+exports.Select = select.Select;
+exports.Slider = slider.Slider;
+exports.SliderTickMarks = sliderTickMarks.SliderTickMarks;
+exports.Spinner = spinner.Spinner;
+exports.Switch = _switch.Switch;
+exports.TableContainer = tableContainer.TableContainer;
+exports.Table = table.Table;
+exports.TableHead = tableHead.TableHead;
+exports.TableBody = tableBody.TableBody;
+exports.TableRow = tableRow.TableRow;
+exports.TableHeadCell = tableHeadCell.TableHeadCell;
+exports.TableCell = tableCell.TableCell;
+exports.Tabs = tabs.Tabs;
+exports.TabList = tabList.TabList;
+exports.Tab = tab.Tab;
+exports.TabPanel = tabPanel.TabPanel;
+exports.Tag = tag.Tag;
+exports.TextInput = textInput.TextInput;
+exports.Textarea = textarea.Textarea;
+exports.Toast = toast.Toast;
+exports.ToastButton = toastButton.ToastButton;
+exports.Toaster = toaster.Toaster;
+exports.Tooltip = tooltip.Tooltip;

package/cjs/lib/{helpers.js → helpers.cjs}

@@ -1,6 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.assertIfNullable = exports.once = void 0;
+'use strict';
+
 function once(fn) {
     let called = false;
     let result;
@@ -12,10 +11,11 @@ function once(fn) {
         return result;
     };
 }
-exports.once = once;
 function assertIfNullable(value, message = 'value is null or undefined') {
     if (value == null) {
         throw Error(message);
     }
 }
+
 exports.assertIfNullable = assertIfNullable;
+exports.once = once;

package/cjs/lib/index.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+const keyboardKeys = require('./keyboard-keys.cjs');
+const helpers = require('./helpers.cjs');
+const reactHelpers = require('./react-helpers.cjs');
+
+
+
+exports.KeyboardKeys = keyboardKeys.KeyboardKeys;
+exports.assertIfNullable = helpers.assertIfNullable;
+exports.once = helpers.once;
+exports.classNames = reactHelpers.classNames;
+exports.focusElement = reactHelpers.focusElement;
+exports.isReactElementWithRef = reactHelpers.isReactElementWithRef;
+exports.mergeRefs = reactHelpers.mergeRefs;

package/cjs/lib/{keyboard-keys.js → keyboard-keys.cjs}

@@ -1,7 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.KeyboardKeys = void 0;
-exports.KeyboardKeys = {
+'use strict';
+
+const KeyboardKeys = {
     ArrowUp: 'ArrowUp',
     ArrowRight: 'ArrowRight',
     ArrowDown: 'ArrowDown',
@@ -15,3 +14,5 @@ exports.KeyboardKeys = {
     Escape: 'Escape',
     Space: ' ',
 };
+
+exports.KeyboardKeys = KeyboardKeys;

package/cjs/lib/{react-helpers.js → react-helpers.cjs}

@@ -1,7 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.focusElement = exports.isReactElementWithRef = exports.mergeRefs = exports.classNames = void 0;
-const react_1 = require("react");
+'use strict';
+
+const react = require('react');
+
 function classNames(...classes) {
     let resultString = '';
     for (const className of classes) {
@@ -21,7 +21,6 @@ function classNames(...classes) {
     }
     return resultString.trimEnd();
 }
-exports.classNames = classNames;
 function mergeRefs(...refs) {
     return (instance) => {
         for (const ref of refs) {
@@ -36,14 +35,16 @@ function mergeRefs(...refs) {
         }
     };
 }
-exports.mergeRefs = mergeRefs;
 function isReactElementWithRef(element) {
-    return (0, react_1.isValidElement)(element) && 'ref' in element;
+    return react.isValidElement(element) && 'ref' in element;
 }
-exports.isReactElementWithRef = isReactElementWithRef;
 function focusElement(element) {
     if (element != null && element instanceof HTMLElement) {
         element.focus();
     }
 }
+
+exports.classNames = classNames;
 exports.focusElement = focusElement;
+exports.isReactElementWithRef = isReactElementWithRef;
+exports.mergeRefs = mergeRefs;

package/css/draft-components-utilities.css

@@ -106,6 +106,10 @@
   font-weight: 800 !important;
 }
 
+.text-no-wrap {
+  white-space: nowrap;
+}
+
 /* Text truncation */
 
 .text-truncate {

package/css/draft-components.css

@@ -587,6 +587,8 @@
   padding: 0 16px;
   transition-duration: 0.2s;
   transition-property: color, background-color;
+  text-decoration: none;
+  text-transform: none;
   border: 1px solid var(--dc-button-border-color);
   border-radius: var(--dc-button-radius);
   background: var(--dc-button-bg);
@@ -1265,6 +1267,7 @@
   width: 100%;
   padding-right: calc(var(--dc-select-arrow-size) + var(--dc-select-padding-x));
   padding-left: var(--dc-select-padding-x);
+  text-transform: none;
   border: none;
   background: none;
 }
@@ -2153,6 +2156,7 @@
 .dc-form-field {
   color-scheme: light;
   display: block;
+  text-align: left;
 }
 
 .dc-form-field__label {
@@ -2447,17 +2451,27 @@
 
 .dc-alert__icon {
   color: var(--dc-alert-icon-color);
+  display: inline-flex;
   grid-area: icon;
 }
 
 .dc-alert__body {
+  display: flex;
+  flex-direction: column;
   grid-area: content;
 }
 
 .dc-alert__title {
   font: inherit;
   font-weight: 600;
-  margin: 0 0 0.5em;
+  margin: 0;
+}
+
+.dc-alert__content {
+}
+
+.dc-alert__body > * + * {
+  margin-top: 8px;
 }
 
 .dc-alert_variant_full-width {

package/esm/components/alert/alert.js

@@ -1,12 +1,16 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { classNames } from '../../lib/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 '../../lib/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 '../../lib/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 '../../lib/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 '../../lib/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 '../../lib/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,19 +1,20 @@
-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 '../../lib/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) {
+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', icon = null, caption = null, renderAs, className, children, ...props }, ref) {
     const shouldRenderIcon = Boolean(icon);
     const shouldRenderLabel = Boolean(children);
     const shouldRenderCaption = Boolean(caption);
     let leadingAddOn = null;
     if (loading) {
-        leadingAddOn = (_jsx("span", { "data-testid": "button-spinner", className: "dc-button__spinner", children: _jsx(Spinner, { size: "1.15em" }) }));
+        leadingAddOn = (jsx("span", { "data-testid": "button-spinner", className: "dc-button__spinner", children: jsx(Spinner, { size: "1.15em" }) }));
     }
     else if (shouldRenderIcon) {
-        leadingAddOn = (_jsx("span", { "data-testid": "button-icon", className: "dc-button__icon", children: icon }));
+        leadingAddOn = (jsx("span", { "data-testid": "button-icon", className: "dc-button__icon", children: icon }));
     }
-    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 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 }))] }))] }));
     className = classNames(className, {
         'dc-button': true,
         'dc-button_block': isBlock,
@@ -30,5 +31,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 '../../lib/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, ...props }, ref) {
+    return jsx(Button, { ref: ref, className: classNames('dc-button_icon-only', className), ...props });
 });
+
+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 '../../lib/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 '../../lib/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 };