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

package/esm/components/portal/portal.js

@@ -1,6 +1,9 @@
 import { createPortal } from 'react-dom';
-import { usePortalRoot } from './portal-context';
-export function Portal({ children }) {
+import { usePortalRoot } from './portal-context.js';
+
+function Portal({ children }) {
     const container = usePortalRoot();
     return createPortal(children, container);
 }
+
+export { Portal };

package/esm/components/positioner/calc-position.js

@@ -1,4 +1,4 @@
-export function calcPosition({ placement, alignment, anchorRect, contentRect, viewportWidth, viewportHeight, scrollX, scrollY, anchorGap, viewportGap, }) {
+function calcPosition({ placement, alignment, anchorRect, contentRect, viewportWidth, viewportHeight, scrollX, scrollY, anchorGap, viewportGap, }) {
     const maxWidth = viewportWidth - (2 * viewportGap);
     const maxSideWidth = Math.max(anchorRect.left - anchorGap - viewportGap, viewportWidth - anchorRect.right - anchorGap - viewportGap);
     if ((placement === 'left' || placement === 'right') &&
@@ -88,7 +88,7 @@ function getXAxisOffset({ alignment, viewportGap, scrollX, anchorX, viewportWidt
     }
     return x;
 }
-export function getYAxisOffset({ placement, anchorGap, scrollY, anchorY, viewportHeight, contentHeight, anchorHeight, }) {
+function getYAxisOffset({ placement, anchorGap, scrollY, anchorY, viewportHeight, contentHeight, anchorHeight, }) {
     const anchorBottom = viewportHeight - anchorY + anchorHeight;
     const top = scrollY + anchorY - anchorGap - contentHeight;
     const bottom = scrollY + anchorY + anchorHeight + anchorGap;
@@ -110,3 +110,5 @@ export function getYAxisOffset({ placement, anchorGap, scrollY, anchorY, viewpor
     }
     return { offset: y, placement };
 }
+
+export { calcPosition, getYAxisOffset };

package/esm/components/positioner/positioner.js

@@ -1,8 +1,9 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useLayoutEffect, useState, } from 'react';
-import { calcPosition } from './calc-position';
-import { Portal } from '../portal';
-export function Positioner({ anchorGap = 4, viewportGap = 8, position = 'fixed', placement = 'bottom', alignment = 'start', renderAnchor, renderContent, }) {
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState, useLayoutEffect } from 'react';
+import { calcPosition } from './calc-position.js';
+import { Portal } from '../portal/portal.js';
+
+function Positioner({ anchorGap = 4, viewportGap = 8, position = 'fixed', placement = 'bottom', alignment = 'start', renderAnchor, renderContent, }) {
     const [anchor, setAnchor] = useState(null);
     const [content, setContent] = useState(null);
     useLayoutEffect(() => {
@@ -34,7 +35,7 @@ export function Positioner({ anchorGap = 4, viewportGap = 8, position = 'fixed',
             window.removeEventListener('scroll', calcContentPosition);
         };
     }, [anchor, content, position, placement, alignment, anchorGap, viewportGap]);
-    return (_jsxs(_Fragment, { children: [renderAnchor({ setRef: setAnchor }), _jsx(Portal, { children: renderContent({
+    return (jsxs(Fragment, { children: [renderAnchor({ setRef: setAnchor }), jsx(Portal, { children: renderContent({
                     setRef: setContent,
                     style: {
                         position,
@@ -57,3 +58,5 @@ function getRect(element) {
         bottom: top + height,
     };
 }
+
+export { Positioner };

package/esm/components/radio/radio.js

@@ -1,7 +1,10 @@
-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 Radio = forwardRef(function Radio({ icon = 'dot', style = {}, className = '', onChange, onToggle, ...props }, ref) {
+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-radio__icon", "data-testid": "radio-check-icon", children: jsx("path", { d: "M7 12.7222L11 16.5L17 8", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const dotIcon = (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", className: "dc-radio__icon", "data-testid": "radio-dot-icon", children: jsx("circle", { cx: "12", cy: "12", r: "5", fill: "currentColor" }) }));
+const Radio = forwardRef(function Radio({ icon = 'dot', style = {}, className = '', onChange, onToggle, ...props }, ref) {
     let renderedIcon;
     switch (icon) {
         case 'check':
@@ -10,10 +13,10 @@ export const Radio = forwardRef(function Radio({ icon = 'dot', style = {}, class
         default:
             renderedIcon = dotIcon;
     }
-    return (_jsxs("label", { style: style, className: classNames('dc-radio', className), children: [_jsx("input", { ...props, ref: ref, type: "radio", className: "dc-radio__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-radio__check", "data-testid": "radio-check", "aria-hidden": true, children: renderedIcon })] }));
+    return (jsxs("label", { style: style, className: classNames('dc-radio', className), children: [jsx("input", { ...props, ref: ref, type: "radio", className: "dc-radio__input", onChange: (event) => {
+                    onChange?.(event);
+                    onToggle?.(event.target.checked);
+                } }), jsx("span", { className: "dc-radio__check", "data-testid": "radio-check", "aria-hidden": true, children: renderedIcon })] }));
 });
-const checkIcon = (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", className: "dc-radio__icon", "data-testid": "radio-check-icon", children: _jsx("path", { d: "M7 12.7222L11 16.5L17 8", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
-const dotIcon = (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", className: "dc-radio__icon", "data-testid": "radio-dot-icon", children: _jsx("circle", { cx: "12", cy: "12", r: "5", fill: "currentColor" }) }));
+
+export { Radio };

package/esm/components/segmented-control/segmented-control-button.js

@@ -1,10 +1,13 @@
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { classNames } from '../../shared/react-helpers';
-export function SegmentedControlButton({ className, checked, icon, children, value, onChangeValue, }) {
+import { jsxs } from 'react/jsx-runtime';
+import { classNames } from '../../lib/react-helpers.js';
+
+function SegmentedControlButton({ className, checked, icon, children, value, onChangeValue, }) {
     function handleClick() {
         if (!checked) {
             onChangeValue(value);
         }
     }
-    return (_jsxs("li", { className: classNames(className, 'dc-segmented__button'), role: "radio", "data-value": value, "aria-checked": checked, tabIndex: checked ? 0 : -1, onClick: handleClick, children: [icon, children] }));
+    return (jsxs("li", { className: classNames(className, 'dc-segmented__button'), role: "radio", "data-value": value, "aria-checked": checked, tabIndex: checked ? 0 : -1, onClick: handleClick, children: [icon, children] }));
 }
+
+export { SegmentedControlButton };

package/esm/components/segmented-control/segmented-control.js

@@ -1,10 +1,11 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useRef, } from 'react';
-import { KeyboardKeys } from '../../shared/keyboard-keys';
-import { assertIfNullable } from '../../shared/util';
-import { classNames, focusElement } from '../../shared/react-helpers';
-import { SegmentedControlButton } from './segmented-control-button';
-export function SegmentedControl({ size = 'md', disabled = false, className, value, options, onChangeValue, ...props }) {
+import { jsx } from 'react/jsx-runtime';
+import { useRef } from 'react';
+import { KeyboardKeys } from '../../lib/keyboard-keys.js';
+import { assertIfNullable } from '../../lib/helpers.js';
+import { classNames, focusElement } from '../../lib/react-helpers.js';
+import { SegmentedControlButton } from './segmented-control-button.js';
+
+function SegmentedControl({ size = 'md', disabled = false, className, value, options, onChangeValue, ...props }) {
     const ref = useRef(null);
     function handleKeyDown(event) {
         const prevIndex = options.findIndex((option) => option.value === value);
@@ -36,8 +37,10 @@ export function SegmentedControl({ size = 'md', disabled = false, className, val
             focusElement(radioEl);
         }
     }
-    return (_jsx("ul", { ...props, ref: ref, role: "radiogroup", className: classNames(className, 'dc-segmented', {
+    return (jsx("ul", { ...props, ref: ref, role: "radiogroup", className: classNames(className, 'dc-segmented', {
             [`dc-segmented_${size}`]: size,
             'dc-segmented_disabled': disabled,
-        }), onKeyDown: handleKeyDown, children: options.map((option) => (_jsx(SegmentedControlButton, { icon: option.icon, value: option.value, checked: value === option.value, onChangeValue: onChangeValue, children: option.label }, option.value))) }));
+        }), onKeyDown: handleKeyDown, children: options.map((option) => (jsx(SegmentedControlButton, { icon: option.icon, value: option.value, checked: value === option.value, onChangeValue: onChangeValue, children: option.label }, option.value))) }));
 }
+
+export { SegmentedControl };

package/esm/components/select/select.js

@@ -1,22 +1,25 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { classNames } from '../../shared/react-helpers';
-export const Select = forwardRef(function Select({ hasError, isBlock, size = 'md', style, className, disabled, multiple, htmlSize, children, onChange, onChangeValue, ...props }, ref) {
-    return (_jsxs("div", { style: style, className: classNames(className, 'dc-select__container', {
+import { classNames } from '../../lib/react-helpers.js';
+
+const Select = forwardRef(function Select({ hasError, isBlock, size = 'md', style, className, disabled, multiple, htmlSize, children, onChange, onChangeValue, ...props }, ref) {
+    return (jsxs("div", { style: style, className: classNames(className, 'dc-select__container', {
             [`dc-select__container_${size}`]: size !== undefined,
             'dc-select__container_multiple': multiple,
             'dc-select__container_disabled': disabled,
             'dc-select__container_has_error': hasError,
             'dc-select__container_block': isBlock,
-        }), children: [_jsx("select", { ...props, ref: ref, className: "dc-select", size: htmlSize, multiple: multiple, disabled: disabled, onChange: (event) => {
-                    onChange === null || onChange === void 0 ? void 0 : onChange(event);
-                    if (multiple) {
-                        onChangeValue === null || onChangeValue === void 0 ? void 0 : onChangeValue(Array.from(event.target.options)
+        }), children: [jsx("select", { ...props, ref: ref, className: "dc-select", size: htmlSize, multiple: multiple, disabled: disabled, onChange: (event) => {
+                    onChange?.(event);
+                    if (multiple === true) {
+                        onChangeValue?.(Array.from(event.target.options)
                             .filter((option) => option.selected)
                             .map((option) => option.value));
                     }
                     else {
-                        onChangeValue === null || onChangeValue === void 0 ? void 0 : onChangeValue(event.target.value);
+                        onChangeValue?.(event.target.value);
                     }
-                }, children: children }), _jsx("svg", { className: "dc-select__icon", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: 24, height: 24, fill: "none", stroke: "currentColor", strokeWidth: 1.5, "aria-hidden": true, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9" }) })] }));
+                }, children: children }), jsx("svg", { className: "dc-select__icon", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: 24, height: 24, fill: "none", stroke: "currentColor", strokeWidth: 1.5, "aria-hidden": true, children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9" }) })] }));
 });
+
+export { Select };

package/esm/components/selection-control/selection-control.js

@@ -1,13 +1,16 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId } from 'react';
-import { classNames } from '../../shared/react-helpers';
-import { Label } from '../label';
-import { Caption } from '../caption';
-export function SelectionControl({ label, labelFor, caption, className, children, ...props }) {
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId, cloneElement } from 'react';
+import { classNames } from '../../lib/react-helpers.js';
+import { Label } from '../label/label.js';
+import { Caption } from '../caption/caption.js';
+
+function SelectionControl({ label, labelFor, caption, className, children, ...props }) {
     const defaultId = useId();
     const controlId = labelFor || defaultId;
     const shouldRenderCaption = Boolean(caption);
-    return (_jsxs("div", { ...props, className: classNames('dc-selection-control', className), children: [_jsx("div", { className: "dc-selection-control__input", children: typeof children === 'function'
+    return (jsxs("div", { ...props, className: classNames('dc-selection-control', className), children: [jsx("div", { className: "dc-selection-control__input", children: typeof children === 'function'
                     ? children({ id: controlId })
-                    : children }), _jsx(Label, { className: "dc-selection-control__label", htmlFor: controlId, children: label }), shouldRenderCaption && (_jsx(Caption, { className: "dc-selection-control__caption", children: caption }))] }));
+                    : cloneElement(children, { id: children.props.id || controlId }) }), jsx(Label, { className: "dc-selection-control__label", htmlFor: controlId, children: label }), shouldRenderCaption && (jsx(Caption, { className: "dc-selection-control__caption", children: caption }))] }));
 }
+
+export { SelectionControl };

package/esm/components/slider/slider-tick-marks.js

@@ -1,12 +1,15 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-export function SliderTickMarks({ tickMarksCount, renderTickMarkLabel, }) {
+import { jsx } from 'react/jsx-runtime';
+
+function SliderTickMarks({ tickMarksCount, renderTickMarkLabel, }) {
     if (tickMarksCount < 1) {
         return null;
     }
     const tickMarks = [];
     for (let index = 0; index < tickMarksCount; index += 1) {
-        const label = renderTickMarkLabel === null || renderTickMarkLabel === void 0 ? void 0 : renderTickMarkLabel(index);
-        tickMarks.push((_jsx("div", { className: "dc-slider-tick-mark", "data-testid": "tick-mark", children: Boolean(label) && (_jsx("span", { className: "dc-slider-tick-mark__label", children: label })) }, index)));
+        const label = renderTickMarkLabel?.(index);
+        tickMarks.push((jsx("div", { className: "dc-slider-tick-mark", "data-testid": "tick-mark", children: Boolean(label) && (jsx("span", { className: "dc-slider-tick-mark__label", children: label })) }, index)));
     }
-    return _jsx("div", { className: "dc-slider__tick-marks", children: tickMarks });
+    return jsx("div", { className: "dc-slider__tick-marks", children: tickMarks });
 }
+
+export { SliderTickMarks };

package/esm/components/slider/slider.js

@@ -1,25 +1,26 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { classNames } from '../../shared/react-helpers';
-import { SliderTickMarks } from './slider-tick-marks';
-export const Slider = forwardRef(function Slider({ thumbStyle = 'round', tickMarksCount = 0, renderTickMarkLabel, step = 1, min = 0, max = 100, style, className, disabled, value, defaultValue, onChange, onChangeValue, ...props }, ref) {
+import { classNames } from '../../lib/react-helpers.js';
+import { SliderTickMarks } from './slider-tick-marks.js';
+
+const Slider = forwardRef(function Slider({ thumbStyle = 'round', tickMarksCount = 0, renderTickMarkLabel, step = 1, min = 0, max = 100, style, className, disabled, value, defaultValue, onChange, onChangeValue, ...props }, ref) {
     defaultValue = value == null ? defaultValue || 0 : undefined;
-    return (_jsxs("div", { style: style, className: classNames(className, 'dc-slider', {
+    return (jsxs("div", { style: style, className: classNames(className, 'dc-slider', {
             [`dc-slider_thumb_${thumbStyle}`]: thumbStyle !== undefined,
             'dc-slider_disabled': disabled,
-        }), children: [_jsx("input", { ...props, ref: ref, style: {
+        }), children: [jsx("input", { ...props, ref: ref, style: {
                     background: getTrackBackground({
                         min,
                         max,
-                        value: value !== null && value !== void 0 ? value : defaultValue,
+                        value: value ?? defaultValue,
                     }),
                 }, className: "dc-slider__input", type: "range", value: value, defaultValue: defaultValue, min: min, max: max, step: step, disabled: disabled, onChange: (event) => {
                     const target = event.target;
                     const value = Number(target.value);
-                    onChange === null || onChange === void 0 ? void 0 : onChange(event);
-                    onChangeValue === null || onChangeValue === void 0 ? void 0 : onChangeValue(value);
+                    onChange?.(event);
+                    onChangeValue?.(value);
                     target.style.background = getTrackBackground({ min, max, value });
-                } }), _jsx(SliderTickMarks, { tickMarksCount: tickMarksCount, renderTickMarkLabel: renderTickMarkLabel })] }));
+                } }), jsx(SliderTickMarks, { tickMarksCount: tickMarksCount, renderTickMarkLabel: renderTickMarkLabel })] }));
 });
 function getTrackBackground(params) {
     const value = params.value || 0;
@@ -34,3 +35,5 @@ function getTrackBackground(params) {
     var(--dc-slider-track-bg) ${valuePct}%
   )`;
 }
+
+export { Slider };

package/esm/components/spinner/spinner.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 '../../shared/react-helpers';
-export const Spinner = forwardRef(function Spinner({ size = 24, width = size, height = size, className = '', ...props }, ref) {
-    return _jsx("svg", { ...props, ref: ref, className: classNames('dc-spinner', className), xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 50 50", width: width, height: height, children: _jsx("circle", { cx: 25, cy: 25, r: 20, fill: "none", stroke: "currentColor", strokeWidth: 5 }) });
+import { classNames } from '../../lib/react-helpers.js';
+
+const Spinner = forwardRef(function Spinner({ size = 24, width = size, height = size, className = '', ...props }, ref) {
+    return jsx("svg", { ...props, ref: ref, className: classNames('dc-spinner', className), xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 50 50", width: width, height: height, children: jsx("circle", { cx: 25, cy: 25, r: 20, fill: "none", stroke: "currentColor", strokeWidth: 5 }) });
 });
+
+export { Spinner };

package/esm/components/switch/switch.js

@@ -1,10 +1,13 @@
-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 Switch = forwardRef(function Switch({ style = {}, className = '', showCheckIcon = true, onChange, onToggle, ...props }, ref) {
-    return (_jsxs("label", { style: style, className: classNames('dc-switch', className), children: [_jsx("input", { ...props, ref: ref, className: "dc-switch__input", type: "checkbox", onChange: (event) => {
-                    onChange === null || onChange === void 0 ? void 0 : onChange(event);
-                    onToggle === null || onToggle === void 0 ? void 0 : onToggle(event.target.checked);
-                } }), _jsx("span", { "data-testid": "switch-track", className: "dc-switch__track", "aria-hidden": true, children: _jsx("span", { className: "dc-switch__thumb", children: showCheckIcon && checkIcon }) })] }));
+import { classNames } from '../../lib/react-helpers.js';
+
+const checkIcon = (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: "20", height: "20", className: "dc-switch__icon", "data-testid": "switch-check-icon", children: jsx("path", { d: "M6 10.353L9 13L13.5 7", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const Switch = forwardRef(function Switch({ style = {}, className = '', showCheckIcon = true, onChange, onToggle, ...props }, ref) {
+    return (jsxs("label", { style: style, className: classNames('dc-switch', className), children: [jsx("input", { ...props, ref: ref, className: "dc-switch__input", type: "checkbox", onChange: (event) => {
+                    onChange?.(event);
+                    onToggle?.(event.target.checked);
+                } }), jsx("span", { "data-testid": "switch-track", className: "dc-switch__track", "aria-hidden": true, children: jsx("span", { className: "dc-switch__thumb", children: showCheckIcon && checkIcon }) })] }));
 });
-const checkIcon = (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: "20", height: "20", className: "dc-switch__icon", "data-testid": "switch-check-icon", children: _jsx("path", { d: "M6 10.353L9 13L13.5 7", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+
+export { Switch };

package/esm/components/table/icons.js

@@ -1,10 +1,13 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-export function ArrowsUpDown(props) {
-    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: 24, height: 24, strokeWidth: 1.5, stroke: "currentColor", ...props, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3 7.5L7.5 3m0 0L12 7.5M7.5 3v13.5m13.5 0L16.5 21m0 0L12 16.5m4.5 4.5V7.5" }) }));
+import { jsx } from 'react/jsx-runtime';
+
+function ArrowsUpDown(props) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: 24, height: 24, strokeWidth: 1.5, stroke: "currentColor", ...props, children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3 7.5L7.5 3m0 0L12 7.5M7.5 3v13.5m13.5 0L16.5 21m0 0L12 16.5m4.5 4.5V7.5" }) }));
 }
-export function ArrowSmallDown(props) {
-    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: 24, height: 24, strokeWidth: 1.5, stroke: "currentColor", ...props, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 4.5v15m0 0l6.75-6.75M12 19.5l-6.75-6.75" }) }));
+function ArrowSmallDown(props) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: 24, height: 24, strokeWidth: 1.5, stroke: "currentColor", ...props, children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 4.5v15m0 0l6.75-6.75M12 19.5l-6.75-6.75" }) }));
 }
-export function ArrowSmallUp(props) {
-    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: 24, height: 24, strokeWidth: 1.5, stroke: "currentColor", ...props, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 19.5v-15m0 0l-6.75 6.75M12 4.5l6.75 6.75" }) }));
+function ArrowSmallUp(props) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: 24, height: 24, strokeWidth: 1.5, stroke: "currentColor", ...props, children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 19.5v-15m0 0l-6.75 6.75M12 4.5l6.75 6.75" }) }));
 }
+
+export { ArrowSmallDown, ArrowSmallUp, ArrowsUpDown };

package/esm/components/table/table-body.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 '../../shared/react-helpers';
-export const TableBody = forwardRef(function TableBody({ className, children, ...props }, ref) {
-    return (_jsx("tbody", { ...props, ref: ref, className: classNames(className, 'dc-table-body'), children: children }));
+import { classNames } from '../../lib/react-helpers.js';
+
+const TableBody = forwardRef(function TableBody({ className, children, ...props }, ref) {
+    return (jsx("tbody", { ...props, ref: ref, className: classNames(className, 'dc-table-body'), children: children }));
 });
+
+export { TableBody };

package/esm/components/table/table-cell.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 '../../shared/react-helpers';
-export const TableCell = forwardRef(function TableCell({ className, children, ...props }, ref) {
-    return (_jsx("td", { ...props, ref: ref, className: classNames('dc-table-cell', className), children: children }));
+import { classNames } from '../../lib/react-helpers.js';
+
+const TableCell = forwardRef(function TableCell({ className, children, ...props }, ref) {
+    return (jsx("td", { ...props, ref: ref, className: classNames('dc-table-cell', className), children: children }));
 });
+
+export { TableCell };

package/esm/components/table/table-container.js

@@ -1,7 +1,8 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { classNames } from '../../shared/react-helpers';
-export const TableContainer = forwardRef(function TableContainer({ border, className, children, ...props }, ref) {
+import { classNames } from '../../lib/react-helpers.js';
+
+const TableContainer = forwardRef(function TableContainer({ border, className, children, ...props }, ref) {
     let modifier = '';
     if (typeof border === 'object' && border != null) {
         modifier = classNames({
@@ -14,5 +15,7 @@ export const TableContainer = forwardRef(function TableContainer({ border, class
     else if (border === 'all') {
         modifier = 'dc-table-container_border_all';
     }
-    return (_jsx("div", { ...props, ref: ref, className: classNames(className, modifier, 'dc-table-container'), children: children }));
+    return (jsx("div", { ...props, ref: ref, className: classNames(className, modifier, 'dc-table-container'), children: children }));
 });
+
+export { TableContainer };

package/esm/components/table/table-head-cell.js

@@ -1,18 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, } from 'react';
-import { classNames } from '../../shared/react-helpers';
-import { ArrowSmallDown, ArrowSmallUp, ArrowsUpDown } from './icons';
-export const TableHeadCell = forwardRef(function TableHeaderCell({ isSortable = false, sort = 'none', className, children, onChangeSort, ...props }, ref) {
-    if (isSortable) {
-        const Icon = iconMapping[sort];
-        children = (_jsxs("button", { className: "dc-table-cell__sort-btn", type: "button", onClick: () => onChangeSort === null || onChangeSort === void 0 ? void 0 : onChangeSort(stateMapping[sort]), children: [children, " ", _jsx(Icon, { className: "dc-table-cell__sort-icon", "aria-hidden": true, strokeWidth: 2 })] }));
-    }
-    return (_jsx("th", { ...props, className: classNames(className, {
-            'dc-table-cell': true,
-            'dc-table-cell_head': true,
-            'dc-table-cell_sortable': isSortable,
-        }), ref: ref, "aria-sort": isSortable ? sort : props['aria-sort'], children: children }));
-});
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { classNames } from '../../lib/react-helpers.js';
+import { ArrowsUpDown, ArrowSmallUp, ArrowSmallDown } from './icons.js';
+
 const iconMapping = {
     none: ArrowsUpDown,
     ascending: ArrowSmallUp,
@@ -23,3 +13,16 @@ const stateMapping = {
     ascending: 'descending',
     descending: 'none',
 };
+const TableHeadCell = forwardRef(function TableHeaderCell({ isSortable = false, sort = 'none', className, children, onChangeSort, ...props }, ref) {
+    if (isSortable) {
+        const Icon = iconMapping[sort];
+        children = (jsxs("button", { className: "dc-table-cell__sort-btn", type: "button", onClick: () => onChangeSort?.(stateMapping[sort]), children: [children, " ", jsx(Icon, { className: "dc-table-cell__sort-icon", "aria-hidden": true, strokeWidth: 2 })] }));
+    }
+    return (jsx("th", { ...props, className: classNames(className, {
+            'dc-table-cell': true,
+            'dc-table-cell_head': true,
+            'dc-table-cell_sortable': isSortable,
+        }), ref: ref, "aria-sort": isSortable ? sort : props['aria-sort'], children: children }));
+});
+
+export { TableHeadCell };

package/esm/components/table/table-head.js

@@ -1,9 +1,12 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { classNames } from '../../shared/react-helpers';
-export const TableHead = forwardRef(function TableHead({ className, isTinted = false, ...props }, ref) {
-    return (_jsx("thead", { ...props, ref: ref, className: classNames(className, {
+import { classNames } from '../../lib/react-helpers.js';
+
+const TableHead = forwardRef(function TableHead({ className, isTinted = false, ...props }, ref) {
+    return (jsx("thead", { ...props, ref: ref, className: classNames(className, {
             'dc-table-head': true,
             'dc-table-head_tinted': isTinted,
         }) }));
 });
+
+export { TableHead };

package/esm/components/table/table-row.js

@@ -1,9 +1,12 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { classNames } from '../../shared/react-helpers';
-export const TableRow = forwardRef(function TableRow({ isSelected, className, ...props }, ref) {
-    return (_jsx("tr", { ...props, ref: ref, className: classNames(className, {
+import { classNames } from '../../lib/react-helpers.js';
+
+const TableRow = forwardRef(function TableRow({ isSelected, className, ...props }, ref) {
+    return (jsx("tr", { ...props, ref: ref, className: classNames(className, {
             'dc-table-row': true,
             'dc-table-row_selected': isSelected,
         }) }));
 });
+
+export { TableRow };

package/esm/components/table/table.js

@@ -1,11 +1,14 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { classNames } from '../../shared/react-helpers';
-export const Table = forwardRef(function Table({ cellSize = 'md', isStriped = false, isBordered = false, highlightRowOnHover = false, className, children, ...props }, ref) {
-    return (_jsx("table", { ...props, ref: ref, className: classNames(className, 'dc-table', {
+import { classNames } from '../../lib/react-helpers.js';
+
+const Table = forwardRef(function Table({ cellSize = 'md', isStriped = false, isBordered = false, highlightRowOnHover = false, className, children, ...props }, ref) {
+    return (jsx("table", { ...props, ref: ref, className: classNames(className, 'dc-table', {
             [`dc-table_cell_${cellSize}`]: cellSize,
             'dc-table_striped': isStriped,
             'dc-table_bordered': isBordered,
             'dc-table_highlight_row': highlightRowOnHover,
         }), children: children }));
 });
+
+export { Table };

package/esm/components/tabs/tab-list.js

@@ -1,19 +1,20 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useRef, } from 'react';
-import { KeyboardKeys } from '../../shared/keyboard-keys';
-import { assertIfNullable } from '../../shared/util';
-import { classNames, focusElement } from '../../shared/react-helpers';
-import { useTabsContext } from './tabs-context';
-export function TabList({ className, children, onFocus, onBlur, onKeyDown, ...props }) {
+import { jsx } from 'react/jsx-runtime';
+import { useRef } from 'react';
+import { KeyboardKeys } from '../../lib/keyboard-keys.js';
+import { assertIfNullable } from '../../lib/helpers.js';
+import { classNames, focusElement } from '../../lib/react-helpers.js';
+import { useTabsContext } from './tabs-context.js';
+
+function TabList({ className, children, onFocus, onBlur, onKeyDown, ...props }) {
     const ref = useRef(null);
     const { selectedTab, setTabListHasFocus } = useTabsContext();
     function handleFocus(event) {
         setTabListHasFocus(true);
-        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+        onFocus?.(event);
     }
     function handleBlur(event) {
         setTabListHasFocus(false);
-        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+        onBlur?.(event);
     }
     function handleKeyDown(event) {
         const tabList = ref.current;
@@ -56,7 +57,9 @@ export function TabList({ className, children, onFocus, onBlur, onKeyDown, ...pr
             assertIfNullable(newFocusTab, `Unable to get tab at index ${index}`);
             focusElement(newFocusTab);
         }
-        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+        onKeyDown?.(event);
     }
-    return (_jsx("div", { ...props, ref: ref, role: "tablist", className: classNames('dc-tab-list', className), onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown, children: children }));
+    return (jsx("div", { ...props, ref: ref, role: "tablist", className: classNames('dc-tab-list', className), onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown, children: children }));
 }
+
+export { TabList };

package/esm/components/tabs/tab-panel.js

@@ -1,11 +1,14 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from '../../shared/react-helpers';
-import { useTabsContext } from './tabs-context';
-export function TabPanel({ tab, id, className, children, 'aria-labelledby': ariaLabelledBy, ...props }) {
+import { jsx } from 'react/jsx-runtime';
+import { classNames } from '../../lib/react-helpers.js';
+import { useTabsContext } from './tabs-context.js';
+
+function TabPanel({ tab, id, className, children, 'aria-labelledby': ariaLabelledBy, ...props }) {
     const { selectedTab, getTabProps } = useTabsContext();
     if (selectedTab !== tab) {
         return null;
     }
     const tabProps = getTabProps(tab);
-    return (_jsx("div", { ...props, className: classNames('dc-tab-panel', className), role: "tabpanel", id: id || tabProps.ariaControls, "aria-labelledby": ariaLabelledBy || tabProps.id, children: children }));
+    return (jsx("div", { ...props, className: classNames('dc-tab-panel', className), role: "tabpanel", id: id || tabProps.ariaControls, "aria-labelledby": ariaLabelledBy || tabProps.id, children: children }));
 }
+
+export { TabPanel };

package/esm/components/tabs/tab.js

@@ -1,14 +1,17 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { classNames } from '../../shared/react-helpers';
-import { useTabsContext } from './tabs-context';
-import { Badge } from '../badge';
-export function Tab({ id, name, icon, counter, className, children, onClick, 'aria-controls': ariaControls, ...props }) {
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { classNames } from '../../lib/react-helpers.js';
+import { useTabsContext } from './tabs-context.js';
+import { Badge } from '../badge/badge.js';
+
+function Tab({ id, name, icon, counter, className, children, onClick, 'aria-controls': ariaControls, ...props }) {
     const { getTabProps, selectedTab, setSelectedTab, tabListHasFocus, } = useTabsContext();
     const tabProps = getTabProps(name);
     const selected = name === selectedTab;
     function handleClick(event) {
         setSelectedTab(name);
-        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        onClick?.(event);
     }
-    return (_jsx("button", { ...props, className: classNames('dc-tab', className), type: "button", role: "tab", name: name, id: id || tabProps.id, "aria-controls": ariaControls || tabProps.ariaControls, "aria-selected": selected, tabIndex: selected && !tabListHasFocus ? 0 : -1, onClick: handleClick, children: _jsxs("span", { className: "dc-tab__layout", children: [icon != null && (_jsx("span", { className: "dc-tab__icon", children: icon })), children != null && (_jsxs("span", { className: "dc-tab__label", children: [children, " "] })), counter != null && counter !== 0 && (_jsx(Badge, { className: "dc-tab__counter", children: counter }))] }) }));
+    return (jsx("button", { ...props, className: classNames('dc-tab', className), type: "button", role: "tab", name: name, id: id || tabProps.id, "aria-controls": ariaControls || tabProps.ariaControls, "aria-selected": selected, tabIndex: selected && !tabListHasFocus ? 0 : -1, onClick: handleClick, children: jsxs("span", { className: "dc-tab__layout", children: [icon != null && (jsx("span", { className: "dc-tab__icon", children: icon })), children != null && (jsxs("span", { className: "dc-tab__label", children: [children, " "] })), counter != null && counter !== 0 && (jsx(Badge, { className: "dc-tab__counter", children: counter }))] }) }));
 }
+
+export { Tab };