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

package/esm/components/nav-list/nav-list-item.js

@@ -1,15 +1,18 @@
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { classNames } from '../../shared/react-helpers';
-import { Badge } from '../badge';
-export function NavListItem({ className, icon, badge, children, renderAs, ...props }) {
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { classNames } from '../../lib/react-helpers.js';
+import { Badge } from '../badge/badge.js';
+
+function NavListItem({ className, icon, badge, children, renderAs, ...props }) {
     className = classNames(className, 'dc-nav-link');
-    children = (_jsxs(_Fragment, { children: [icon != null && _jsxs("div", { className: "dc-nav-link__icon", children: [icon, " "] }), _jsx("div", { className: "dc-nav-link__text", children: children }), badge != null && _jsxs(_Fragment, { children: ["\u00A0", _jsx(Badge, { className: "dc-nav-link__badge", children: badge })] })] }));
+    children = (jsxs(Fragment, { children: [icon != null && jsxs("div", { className: "dc-nav-link__icon", children: [icon, " "] }), jsx("div", { className: "dc-nav-link__text", children: children }), badge != null && jsxs(Fragment, { children: ["\u00A0", jsx(Badge, { className: "dc-nav-link__badge", children: badge })] })] }));
     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 _jsx("li", { className: "dc-nav-list__item", children: content });
+    return jsx("li", { className: "dc-nav-list__item", children: content });
 }
+
+export { NavListItem };

package/esm/components/nav-list/nav-list-title.js

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

package/esm/components/nav-list/nav-list.js

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

package/esm/components/password-input/icons.js

@@ -1,7 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function EyeIcon(props) {
-    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: 24, height: 24, fill: "none", strokeWidth: 1.5, stroke: "currentColor", ...props, children: [_jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" }), _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" })] }));
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function EyeIcon(props) {
+    return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: 24, height: 24, fill: "none", strokeWidth: 1.5, stroke: "currentColor", ...props, children: [jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" }), jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" })] }));
 }
-export function EyeSlashIcon(props) {
-    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: 24, height: 24, fill: "none", strokeWidth: 1.5, stroke: "currentColor", ...props, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" }) }));
+function EyeSlashIcon(props) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: 24, height: 24, fill: "none", strokeWidth: 1.5, stroke: "currentColor", ...props, children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" }) }));
 }
+
+export { EyeIcon, EyeSlashIcon };

package/esm/components/password-input/password-input.js

@@ -1,10 +1,11 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useState, } from 'react';
-import { classNames } from '../../shared/react-helpers';
-import { TextInput } from '../text-input';
-import { Tooltip } from '../tooltip';
-import { EyeIcon, EyeSlashIcon } from './icons';
-export const PasswordInput = forwardRef(function PasswordInput({ isDefaultVisible = false, showPasswordTitle = 'Show password', hidePasswordTitle = 'Hide password', className, ...props }, ref) {
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useState } from 'react';
+import { classNames } from '../../lib/react-helpers.js';
+import { TextInput } from '../text-input/text-input.js';
+import { Tooltip } from '../tooltip/tooltip.js';
+import { EyeIcon, EyeSlashIcon } from './icons.js';
+
+const PasswordInput = forwardRef(function PasswordInput({ isDefaultVisible = false, showPasswordTitle = 'Show password', hidePasswordTitle = 'Hide password', className, ...props }, ref) {
     const [visible, setVisible] = useState(isDefaultVisible);
     let type;
     let content;
@@ -20,6 +21,8 @@ export const PasswordInput = forwardRef(function PasswordInput({ isDefaultVisibl
         Icon = EyeSlashIcon;
     }
     const handleButtonClick = () => setVisible(!visible);
-    const button = (_jsx(Tooltip, { content: content, children: _jsx("button", { className: "dc-password-input__btn", type: "button", onClick: handleButtonClick, children: _jsx(Icon, { className: "dc-password-input__icon", "aria-hidden": true }) }) }));
-    return (_jsx(TextInput, { ...props, className: classNames('dc-password-input', className), ref: ref, type: type, suffix: button }));
+    const button = (jsx(Tooltip, { content: content, children: jsx("button", { className: "dc-password-input__btn", type: "button", onClick: handleButtonClick, children: jsx(Icon, { className: "dc-password-input__icon", "aria-hidden": true }) }) }));
+    return (jsx(TextInput, { ...props, className: classNames('dc-password-input', className), ref: ref, type: type, suffix: button }));
 });
+
+export { PasswordInput };

package/esm/components/popover/popover.js

@@ -1,17 +1,17 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cloneElement, forwardRef, useCallback, useImperativeHandle, useRef, useState, } from 'react';
-import { classNames, focusElement, isReactElementWithRef, mergeRefs, } from '../../shared/react-helpers';
-import { useMountTransition } from '../../hooks/use-mount-transition';
-import { useEscKeyDown } from '../../hooks/use-esc-key-down';
-import { useFocusTrap } from '../../hooks/use-focus-trap';
-import { usePageClick } from './use-page-click';
-import { Positioner, } from '../positioner';
-export const Popover = forwardRef(function Popover({ shouldTrapFocus = true, shouldFocusAnchorAfterEscPress = true, placement = 'bottom', alignment = 'start', anchorGap, viewportGap, anchor, className, children, onOpen, onClose, ...props }, ref) {
-    var _a, _b;
-    const [defaultIsOpen, setDefaultIsOpen] = useState((_a = props.defaultIsOpen) !== null && _a !== void 0 ? _a : false);
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useState, useRef, useCallback, useImperativeHandle, cloneElement } from 'react';
+import { focusElement, mergeRefs, isReactElementWithRef, classNames } from '../../lib/react-helpers.js';
+import { useMountTransition } from '../../hooks/use-mount-transition.js';
+import { useEscKeyDown } from '../../hooks/use-esc-key-down.js';
+import { useFocusTrap } from '../../hooks/use-focus-trap.js';
+import { usePageClick } from './use-page-click.js';
+import { Positioner } from '../positioner/positioner.js';
+
+const Popover = forwardRef(function Popover({ shouldTrapFocus = true, shouldFocusAnchorAfterEscPress = true, placement = 'bottom', alignment = 'start', anchorGap, viewportGap, anchor, className, children, onOpen, onClose, ...props }, ref) {
+    const [defaultIsOpen, setDefaultIsOpen] = useState(props.defaultIsOpen ?? false);
     const anchorRef = useRef(null);
     const contentRef = useRef(null);
-    const isOpen = (_b = props.isOpen) !== null && _b !== void 0 ? _b : defaultIsOpen;
+    const isOpen = props.isOpen ?? defaultIsOpen;
     const durationMs = 100;
     const { isMounted, className: transitionClass } = useMountTransition({
         durationMs,
@@ -21,11 +21,11 @@ export const Popover = forwardRef(function Popover({ shouldTrapFocus = true, sho
     });
     const openPopover = useCallback(() => {
         setDefaultIsOpen(true);
-        onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+        onOpen?.();
     }, [onOpen]);
     const closePopover = useCallback(() => {
         setDefaultIsOpen(false);
-        onClose === null || onClose === void 0 ? void 0 : onClose();
+        onClose?.();
     }, [onClose]);
     const togglePopover = useCallback(() => {
         if (isOpen) {
@@ -45,8 +45,8 @@ export const Popover = forwardRef(function Popover({ shouldTrapFocus = true, sho
         const anchor = anchorRef.current;
         const content = contentRef.current;
         if (target instanceof Node &&
-            !(anchor === null || anchor === void 0 ? void 0 : anchor.contains(target)) &&
-            !(content === null || content === void 0 ? void 0 : content.contains(target))) {
+            !anchor?.contains(target) &&
+            !content?.contains(target)) {
             closePopover();
         }
     }, { isEnabled: isOpen });
@@ -72,9 +72,8 @@ export const Popover = forwardRef(function Popover({ shouldTrapFocus = true, sho
             return cloneElement(anchor, {
                 ref: mergeRefs(setRef, anchorRef, anchor.ref),
                 onClick: (event) => {
-                    var _a, _b;
                     togglePopover();
-                    (_b = (_a = anchor.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+                    anchor.props.onClick?.(event);
                 },
             });
         }
@@ -84,11 +83,13 @@ export const Popover = forwardRef(function Popover({ shouldTrapFocus = true, sho
         if (isOpen || isMounted) {
             delete props.defaultIsOpen;
             delete props.isOpen;
-            return (_jsx("div", { ref: portalRef, style: {
+            return (jsx("div", { ref: portalRef, style: {
                     '--dc-popover-transition-duration': `${durationMs}ms`,
                     ...portalStyle,
-                }, className: classNames('dc-popover', transitionClass), children: _jsx("div", { ...props, ref: contentRef, className: classNames('dc-popover-modal', className), children: children }) }));
+                }, className: classNames('dc-popover', transitionClass), children: jsx("div", { ...props, ref: contentRef, className: classNames('dc-popover-modal', className), children: children }) }));
         }
     };
-    return (_jsx(Positioner, { position: "absolute", placement: placement, alignment: alignment, anchorGap: anchorGap, viewportGap: viewportGap, renderAnchor: renderAnchor, renderContent: renderContent }));
+    return (jsx(Positioner, { position: "absolute", placement: placement, alignment: alignment, anchorGap: anchorGap, viewportGap: viewportGap, renderAnchor: renderAnchor, renderContent: renderContent }));
 });
+
+export { Popover };

package/esm/components/popover/use-page-click.js

@@ -1,4 +1,5 @@
-import { useEffect, useRef } from 'react';
+import { useRef, useEffect } from 'react';
+
 const handlers = [];
 /**
  * Invokes a given handler when the user clicks on any place on the page.
@@ -10,7 +11,7 @@ const handlers = [];
  * @param options.isEnabled - A flag that determines whether to run
  * the passed handler or not.
  */
-export function usePageClick(handler, options) {
+function usePageClick(handler, options) {
     const handlerRef = useRef(handler);
     const isEnabled = options.isEnabled;
     useEffect(() => {
@@ -44,3 +45,5 @@ export function usePageClick(handler, options) {
         };
     }, [isEnabled]);
 }
+
+export { usePageClick };

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

@@ -1,5 +1,6 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import 'react/jsx-runtime';
 import { createContext, useContext } from 'react';
+
 let root = null;
 const getPortalRoot = () => {
     if (root == null) {
@@ -11,11 +12,9 @@ const getPortalRoot = () => {
     return root;
 };
 const PortalContext = createContext(getPortalRoot);
-export function usePortalRoot() {
+function usePortalRoot() {
     const getRoot = useContext(PortalContext);
     return getRoot();
 }
-export function PortalRootProvider(props) {
-    const { getPortalRoot, children } = props;
-    return (_jsx(PortalContext.Provider, { value: getPortalRoot, children: children }));
-}
+
+export { usePortalRoot };

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 { jsxs, jsx } 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 { 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 }))] }));
+                    : children }), 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 };