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

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

@@ -1,14 +1,15 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useCallback, useContext, useId, useState, } from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useState, useId, useCallback, useContext } from 'react';
+
 const TabsContext = createContext(null);
-export function TabsContextProvider({ children, selectedTab, setSelectedTab, }) {
+function TabsContextProvider({ children, selectedTab, setSelectedTab, }) {
     const [tabListHasFocus, setTabListHasFocus] = useState(false);
     const id = useId();
     const getTabProps = useCallback((tab) => ({
         id: `${id}-tab[${tab}]`,
         ariaControls: `${id}-tabPanel[${tab}]`,
     }), [id]);
-    return (_jsx(TabsContext.Provider, { value: {
+    return (jsx(TabsContext.Provider, { value: {
             getTabProps,
             selectedTab,
             setSelectedTab,
@@ -16,10 +17,12 @@ export function TabsContextProvider({ children, selectedTab, setSelectedTab, })
             setTabListHasFocus,
         }, children: children }));
 }
-export function useTabsContext() {
+function useTabsContext() {
     const context = useContext(TabsContext);
     if (!context) {
         throw new Error('useTabsContext must be used within TabsContextProvider');
     }
     return context;
 }
+
+export { TabsContextProvider, useTabsContext };

package/esm/components/tabs/tabs.js

@@ -1,6 +1,9 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from '../../shared/react-helpers';
-import { TabsContextProvider } from './tabs-context';
-export function Tabs({ className, children, selectedTab, onSelectTab, ...props }) {
-    return (_jsx(TabsContextProvider, { selectedTab: selectedTab, setSelectedTab: onSelectTab, children: _jsx("div", { ...props, className: classNames('dc-tabs', className), children: children }) }));
+import { jsx } from 'react/jsx-runtime';
+import { classNames } from '../../lib/react-helpers.js';
+import { TabsContextProvider } from './tabs-context.js';
+
+function Tabs({ className, children, selectedTab, onSelectTab, ...props }) {
+    return (jsx(TabsContextProvider, { selectedTab: selectedTab, setSelectedTab: onSelectTab, children: jsx("div", { ...props, className: classNames('dc-tabs', className), children: children }) }));
 }
+
+export { Tabs };

package/esm/components/tag/tag.js

@@ -1,10 +1,13 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from '../../shared/react-helpers';
-export function Tag({ isRounded = false, variant = 'tinted', fill = 'gray', size = 'md', className, children, ...props }) {
-    return (_jsx("strong", { ...props, className: classNames(className, 'dc-tag', {
+import { jsx } from 'react/jsx-runtime';
+import { classNames } from '../../lib/react-helpers.js';
+
+function Tag({ isRounded = false, variant = 'tinted', fill = 'gray', size = 'md', className, children, ...props }) {
+    return (jsx("strong", { ...props, className: classNames(className, 'dc-tag', {
             [`dc-tag_${variant}`]: variant,
             [`dc-tag_${fill}`]: fill,
             [`dc-tag_${size}`]: size,
             'dc-tag_rounded': isRounded,
         }), children: children }));
 }
+
+export { Tag };

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

@@ -1,21 +1,24 @@
-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 TextInput = forwardRef(function TextInput({ hasError = false, isBlock = false, type = 'text', size = 'md', prefix, suffix, style, className, disabled, width, htmlSize, onChange, onChangeValue, ...props }, ref) {
+import { classNames } from '../../lib/react-helpers.js';
+
+const TextInput = forwardRef(function TextInput({ hasError = false, isBlock = false, type = 'text', size = 'md', prefix, suffix, style, className, disabled, width, htmlSize, onChange, onChangeValue, ...props }, ref) {
     const shouldRenderPrefix = Boolean(prefix);
     const shouldRenderSuffix = Boolean(suffix);
-    return (_jsxs("div", { style: style, className: classNames(className, 'dc-text-input__container', {
+    return (jsxs("div", { style: style, className: classNames(className, 'dc-text-input__container', {
             [`dc-text-input__container_${size}`]: size,
             'dc-text-input__container_disabled': disabled,
             'dc-text-input__container_has_error': hasError,
             'dc-text-input__container_block': isBlock,
             'dc-text-input__container_has_prefix': shouldRenderPrefix,
             'dc-text-input__container_has_suffix': shouldRenderSuffix,
-        }), children: [shouldRenderPrefix && (_jsx("div", { className: "dc-text-input__prefix", children: prefix })), _jsx("input", { ...props, className: classNames({
+        }), children: [shouldRenderPrefix && (jsx("div", { className: "dc-text-input__prefix", children: prefix })), jsx("input", { ...props, className: classNames({
                     'dc-text-input': true,
                     [`dc-text-input_width_${width}`]: width,
                 }), ref: ref, type: type, size: htmlSize, disabled: disabled, onChange: (event) => {
-                    onChange === null || onChange === void 0 ? void 0 : onChange(event);
-                    onChangeValue === null || onChangeValue === void 0 ? void 0 : onChangeValue(event.target.value);
-                } }), shouldRenderSuffix && (_jsx("div", { className: "dc-text-input__suffix", children: suffix }))] }));
+                    onChange?.(event);
+                    onChangeValue?.(event.target.value);
+                } }), shouldRenderSuffix && (jsx("div", { className: "dc-text-input__suffix", children: suffix }))] }));
 });
+
+export { TextInput };

package/esm/components/textarea/textarea.js

@@ -1,35 +1,38 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef, useState, } from 'react';
-import { classNames } from '../../shared/react-helpers';
-import { Caption } from '../caption';
-export const Textarea = forwardRef(function Textarea({ disabled = false, hasError = false, isBlock = false, showCharacterCount = false, size = 'md', rows = 3, width, style, className, maxLength, onChange, onChangeValue, renderCharacterCount = getCharactersCountMessage, ...props }, ref) {
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useState } from 'react';
+import { classNames } from '../../lib/react-helpers.js';
+import { Caption } from '../caption/caption.js';
+
+const getCharactersCountMessage = ({ maxCharacters, characterCount, }) => {
+    const charsRemaining = maxCharacters - characterCount;
+    const characters = (jsx("span", { style: { fontVariant: 'tabular-nums' }, children: charsRemaining === 1
+            ? `${charsRemaining} character`
+            : `${charsRemaining} characters` }));
+    return jsxs(Fragment, { children: ["You have ", characters, " remaining"] });
+};
+const Textarea = forwardRef(function Textarea({ disabled = false, hasError = false, isBlock = false, showCharacterCount = false, size = 'md', rows = 3, width, style, className, maxLength, onChange, onChangeValue, renderCharacterCount = getCharactersCountMessage, ...props }, ref) {
     const shouldRenderCharacterCount = (showCharacterCount &&
         maxLength != null && maxLength > 0);
     const [characterCount, setCharacterCount] = useState(() => {
         const value = props.value || props.defaultValue;
         return typeof value === 'string' ? value.length : 0;
     });
-    return (_jsxs("div", { style: style, className: classNames(className, 'dc-textarea__container', {
+    return (jsxs("div", { style: style, className: classNames(className, 'dc-textarea__container', {
             [`dc-textarea__container_size_${size}`]: size !== undefined,
             'dc-textarea__container_disabled': disabled,
             'dc-textarea__container_has_error': hasError,
             'dc-textarea__container_block': isBlock,
-        }), children: [_jsx("textarea", { ...props, ref: ref, className: classNames('dc-textarea', {
+        }), children: [jsx("textarea", { ...props, ref: ref, className: classNames('dc-textarea', {
                     [`dc-textarea_width_${width}`]: width !== undefined,
                 }), rows: rows, maxLength: maxLength, disabled: disabled, onChange: (event) => {
                     const value = event.target.value;
-                    onChange === null || onChange === void 0 ? void 0 : onChange(event);
-                    onChangeValue === null || onChangeValue === void 0 ? void 0 : onChangeValue(value);
+                    onChange?.(event);
+                    onChangeValue?.(value);
                     setCharacterCount(value.length);
-                } }), shouldRenderCharacterCount && (_jsx(Caption, { "data-testid": "textarea-character-count", className: "dc-textarea__character-count", children: renderCharacterCount({
+                } }), shouldRenderCharacterCount && (jsx(Caption, { "data-testid": "textarea-character-count", className: "dc-textarea__character-count", children: renderCharacterCount({
                     characterCount,
                     maxCharacters: maxLength,
                 }) }))] }));
 });
-const getCharactersCountMessage = ({ maxCharacters, characterCount, }) => {
-    const charsRemaining = maxCharacters - characterCount;
-    const characters = (_jsx("span", { style: { fontVariant: 'tabular-nums' }, children: charsRemaining === 1
-            ? `${charsRemaining} character`
-            : `${charsRemaining} characters` }));
-    return _jsxs(_Fragment, { children: ["You have ", characters, " remaining"] });
-};
+
+export { Textarea };

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

@@ -1,6 +1,9 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { classNames } from '../../shared/react-helpers';
-export const ToastButton = forwardRef(function ToastButton({ className, ...props }, ref) {
-    return (_jsx("button", { ...props, ref: ref, className: classNames(className, 'dc-toast__btn') }));
+import { classNames } from '../../lib/react-helpers.js';
+
+const ToastButton = forwardRef(function ToastButton({ className, ...props }, ref) {
+    return (jsx("button", { ...props, ref: ref, className: classNames(className, 'dc-toast__btn') }));
 });
+
+export { ToastButton };

package/esm/components/toast/toast.js

@@ -1,6 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { classNames } from '../../shared/react-helpers';
-import { XMarkIcon } from './x-mark-icon';
-export function Toast({ icon, message, actions, closeButtonAriaLabel = 'close', onClickCloseButton, children, className, ...props }) {
-    return (_jsxs("section", { ...props, className: classNames('dc-toast', className), children: [_jsx("button", { className: "dc-toast__close-btn", "aria-label": closeButtonAriaLabel, onClick: onClickCloseButton, children: _jsx(XMarkIcon, { width: 16, height: 16 }) }), _jsxs("div", { className: "dc-toast__body", children: [icon && _jsx("div", { className: "dc-toast__icon", children: icon }), _jsxs("div", { className: "dc-toast__content", children: [_jsx("h1", { className: "dc-toast__title", children: children }), message && _jsx("div", { className: "dc-toast__message", children: message })] })] }), actions && _jsx("div", { className: "dc-toast__actions", children: actions })] }));
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { classNames } from '../../lib/react-helpers.js';
+import { XMarkIcon } from './x-mark-icon.js';
+
+function Toast({ icon, message, actions, closeButtonAriaLabel = 'close', onClickCloseButton, children, className, ...props }) {
+    return (jsxs("section", { ...props, className: classNames('dc-toast', className), children: [jsx("button", { className: "dc-toast__close-btn", "aria-label": closeButtonAriaLabel, onClick: onClickCloseButton, children: jsx(XMarkIcon, { width: 16, height: 16 }) }), jsxs("div", { className: "dc-toast__body", children: [icon && jsx("div", { className: "dc-toast__icon", children: icon }), jsxs("div", { className: "dc-toast__content", children: [jsx("h1", { className: "dc-toast__title", children: children }), message && jsx("div", { className: "dc-toast__message", children: message })] })] }), actions && jsx("div", { className: "dc-toast__actions", children: actions })] }));
 }
+
+export { Toast };

package/esm/components/toast/x-mark-icon.js

@@ -1,4 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-export function XMarkIcon(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: "M6 18L18 6M6 6l12 12" }) }));
+import { jsx } from 'react/jsx-runtime';
+
+function XMarkIcon(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: "M6 18L18 6M6 6l12 12" }) }));
 }
+
+export { XMarkIcon };

package/esm/components/toaster/toaster.js

@@ -1,71 +1,54 @@
-var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
-    if (kind === "m") throw new TypeError("Private method is not writable");
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-};
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
-var _Toaster_instances, _Toaster_id, _Toaster_timeoutMs, _Toaster_onShow, _Toaster_onHide, _Toaster_getNextID;
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useState, useRef } from 'react';
-import { assertIfNullable } from '../../shared/util';
-import { classNames } from '../../shared/react-helpers';
-import { Portal } from '../portal';
-import { Toast, ToastButton } from '../toast';
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useState, useEffect } from 'react';
+import { assertIfNullable } from '../../lib/helpers.js';
+import { classNames } from '../../lib/react-helpers.js';
+import { Portal } from '../portal/portal.js';
+import { Toast } from '../toast/toast.js';
+import { ToastButton } from '../toast/toast-button.js';
+
 const TOAST_SHOW_EVENT = 'toast_show';
 const isToastShowEvent = (event) => (event instanceof CustomEvent && event.type === TOAST_SHOW_EVENT);
 const TOAST_HIDE_EVENT = 'toast_hide';
 const isToastHideEvent = (event) => (event instanceof CustomEvent && event.type === TOAST_HIDE_EVENT);
-export class Toaster {
+class Toaster {
     constructor(params) {
-        _Toaster_instances.add(this);
-        _Toaster_id.set(this, void 0);
-        _Toaster_timeoutMs.set(this, void 0);
-        _Toaster_onShow.set(this, void 0);
-        _Toaster_onHide.set(this, void 0);
-        __classPrivateFieldSet(this, _Toaster_id, 0, "f");
-        __classPrivateFieldSet(this, _Toaster_timeoutMs, (params === null || params === void 0 ? void 0 : params.timeoutMs) || 10000, "f");
-        __classPrivateFieldSet(this, _Toaster_onShow, params === null || params === void 0 ? void 0 : params.onShowToast, "f");
-        __classPrivateFieldSet(this, _Toaster_onHide, params === null || params === void 0 ? void 0 : params.onHideToast, "f");
+        this._id = 0;
+        this.timeoutMs = params?.timeoutMs || 10000;
+        this.onShow = params?.onShowToast;
+        this.onHide = params?.onHideToast;
+    }
+    _getNextId() {
+        this._id += 1;
+        return this._id;
     }
     showToast(toast, params) {
-        var _a;
-        const id = __classPrivateFieldGet(this, _Toaster_instances, "m", _Toaster_getNextID).call(this);
+        const id = this._getNextId();
         const event = new CustomEvent(TOAST_SHOW_EVENT, {
             detail: {
                 toaster: this,
                 toast: { ...toast, id },
             },
         });
-        const timeoutMs = toast.timeoutMs || (params === null || params === void 0 ? void 0 : params.timeoutMs) || __classPrivateFieldGet(this, _Toaster_timeoutMs, "f");
-        (_a = __classPrivateFieldGet(this, _Toaster_onShow, "f")) === null || _a === void 0 ? void 0 : _a.call(this, event.detail.toast);
+        const timeoutMs = toast.timeoutMs || params?.timeoutMs || this.timeoutMs;
+        this.onShow?.(event.detail.toast);
         window.dispatchEvent(event);
         window.setTimeout(() => this.hideToast(id), timeoutMs);
         return id;
     }
     hideToast(id) {
-        var _a;
         const event = new CustomEvent(TOAST_HIDE_EVENT, {
             detail: {
                 toaster: this,
                 toastId: id,
             },
         });
-        (_a = __classPrivateFieldGet(this, _Toaster_onHide, "f")) === null || _a === void 0 ? void 0 : _a.call(this, id);
+        this.onHide?.(id);
         window.dispatchEvent(event);
     }
     render(options) {
-        return (_jsx(ToastsList, { toaster: this, toastGap: options === null || options === void 0 ? void 0 : options.toastGap, toastPosition: options === null || options === void 0 ? void 0 : options.toastPosition, toastCloseButtonAriaLabel: options === null || options === void 0 ? void 0 : options.toastCloseButtonAriaLabel }));
+        return (jsx(ToastsList, { toaster: this, toastGap: options?.toastGap, toastPosition: options?.toastPosition, toastCloseButtonAriaLabel: options?.toastCloseButtonAriaLabel }));
     }
 }
-_Toaster_id = new WeakMap(), _Toaster_timeoutMs = new WeakMap(), _Toaster_onShow = new WeakMap(), _Toaster_onHide = new WeakMap(), _Toaster_instances = new WeakSet(), _Toaster_getNextID = function _Toaster_getNextID() {
-    __classPrivateFieldSet(this, _Toaster_id, __classPrivateFieldGet(this, _Toaster_id, "f") + 1, "f");
-    return __classPrivateFieldGet(this, _Toaster_id, "f");
-};
 function ToastsList({ toaster, toastGap = 12, toastPosition = 'top-center', toastCloseButtonAriaLabel = 'Close', }) {
     const ref = useRef(null);
     const [toasts, setToasts] = useState([]);
@@ -112,19 +95,19 @@ function ToastsList({ toaster, toastGap = 12, toastPosition = 'top-center', toas
             }
         }
     }, [toasts, toastGap, toastPosition]);
-    return (_jsx(Portal, { children: _jsx("ul", { ref: ref, className: classNames({
+    return (jsx(Portal, { children: jsx("ul", { ref: ref, className: classNames({
                 'dc-toasts-list': true,
                 [`dc-toasts-list_${toastPosition}`]: toastPosition,
             }), children: toasts.map((toast) => {
-                var _a;
                 const hideToast = () => toaster.hideToast(toast.id);
-                const actions = (_a = toast.actions) === null || _a === void 0 ? void 0 : _a.map((action, index) => (_jsx(ToastButton, { onClick: () => {
-                        var _a, _b;
-                        (_a = action.onClick) === null || _a === void 0 ? void 0 : _a.call(action);
-                        if ((_b = action.shouldHideAfterClick) !== null && _b !== void 0 ? _b : true) {
+                const actions = toast.actions?.map((action, index) => (jsx(ToastButton, { onClick: () => {
+                        action.onClick?.();
+                        if (action.shouldHideAfterClick ?? true) {
                             hideToast();
                         }
                     }, children: action.content }, index)));
-                return (_jsx("li", { children: _jsx(Toast, { className: "dc-toasts-list__toast", role: "alert", icon: toast.icon, message: toast.message, actions: actions, closeButtonAriaLabel: toastCloseButtonAriaLabel, onClickCloseButton: hideToast, children: toast.title }) }, toast.id));
+                return (jsx("li", { children: jsx(Toast, { className: "dc-toasts-list__toast", role: "alert", icon: toast.icon, message: toast.message, actions: actions, closeButtonAriaLabel: toastCloseButtonAriaLabel, onClickCloseButton: hideToast, children: toast.title }) }, toast.id));
             }) }) }));
 }
+
+export { Toaster };

package/esm/components/tooltip/tooltip.js

@@ -1,14 +1,14 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cloneElement, useId, useMemo, useState, } from 'react';
-import { classNames, isReactElementWithRef, mergeRefs, } from '../../shared/react-helpers';
-import { useMountTransition } from '../../hooks';
-import { Positioner, } from '../positioner';
-export function Tooltip({ anchorGap = 8, placement = 'top', alignment = 'center', style, className, content, children, ...props }) {
-    var _a, _b;
-    const [defaultShow, setDefaultShow] = useState((_a = props.defaultIsShown) !== null && _a !== void 0 ? _a : false);
+import { jsx } from 'react/jsx-runtime';
+import { useState, useId, useMemo, cloneElement } from 'react';
+import { isReactElementWithRef, mergeRefs, classNames } from '../../lib/react-helpers.js';
+import { useMountTransition } from '../../hooks/use-mount-transition.js';
+import { Positioner } from '../positioner/positioner.js';
+
+function Tooltip({ anchorGap = 8, placement = 'top', alignment = 'center', style, className, content, children, ...props }) {
+    const [defaultShow, setDefaultShow] = useState(props.defaultIsShown ?? false);
     const defaultId = useId();
     const tooltipId = props.id || defaultId;
-    const isShown = (_b = props.isShown) !== null && _b !== void 0 ? _b : defaultShow;
+    const isShown = props.isShown ?? defaultShow;
     const durationMs = 100;
     const { isMounted, className: transitionClass } = useMountTransition({
         isShown,
@@ -34,26 +34,22 @@ export function Tooltip({ anchorGap = 8, placement = 'top', alignment = 'center'
         if (isReactElementWithRef(children)) {
             const props = children.props;
             return cloneElement(children, {
-                ref: mergeRefs(setRef, children.ref),
-                onFocus: (event) => {
-                    var _a;
+                'ref': mergeRefs(setRef, children.ref),
+                'onFocus': (event) => {
                     showTooltip();
-                    (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, event);
+                    props.onFocus?.(event);
                 },
-                onBlur: (event) => {
-                    var _a;
+                'onBlur': (event) => {
                     hideTooltip();
-                    (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
+                    props.onBlur?.(event);
                 },
-                onMouseEnter: (event) => {
-                    var _a;
+                'onMouseEnter': (event) => {
                     showTooltip();
-                    (_a = props.onMouseEnter) === null || _a === void 0 ? void 0 : _a.call(props, event);
+                    props.onMouseEnter?.(event);
                 },
-                onMouseLeave: (event) => {
-                    var _a;
+                'onMouseLeave': (event) => {
                     hideTooltip();
-                    (_a = props.onMouseLeave) === null || _a === void 0 ? void 0 : _a.call(props, event);
+                    props.onMouseLeave?.(event);
                 },
                 'aria-describedby': props['aria-describedby'] || tooltipId,
             });
@@ -64,12 +60,14 @@ export function Tooltip({ anchorGap = 8, placement = 'top', alignment = 'center'
         if (isShown || isMounted) {
             delete props.defaultIsShown;
             delete props.isShown;
-            return (_jsx("div", { ...props, ref: portalRef, id: tooltipId, style: {
+            return (jsx("div", { ...props, ref: portalRef, id: tooltipId, style: {
                     '--dc-tooltip-transition-duration': `${durationMs}ms`,
                     ...portalStyle,
                     ...style,
                 }, className: classNames('dc-tooltip', transitionClass, className), role: "tooltip", children: content }));
         }
     };
-    return (_jsx(Positioner, { placement: placement, alignment: alignment, anchorGap: anchorGap, renderAnchor: renderAnchor, renderContent: renderContent }));
+    return (jsx(Positioner, { placement: placement, alignment: alignment, anchorGap: anchorGap, renderAnchor: renderAnchor, renderContent: renderContent }));
 }
+
+export { Tooltip };

package/esm/hooks/index.js

@@ -1,4 +1,4 @@
-export * from './use-mount-transition';
-export * from './use-disable-body-scroll';
-export * from './use-esc-key-down';
-export * from './use-focus-trap';
+export { useMountTransition } from './use-mount-transition.js';
+export { useDisableBodyScroll } from './use-disable-body-scroll.js';
+export { useEscKeyDown } from './use-esc-key-down.js';
+export { useFocusTrap } from './use-focus-trap.js';

package/esm/hooks/use-disable-body-scroll.js

@@ -1,6 +1,7 @@
 import { useEffect } from 'react';
-import { once } from '../shared/util';
-export function useDisableBodyScroll(options) {
+import { once } from '../lib/helpers.js';
+
+function useDisableBodyScroll(options) {
     useEffect(() => {
         if (options.isEnabled) {
             return disableBodyScroll();
@@ -28,3 +29,5 @@ function disableBodyScroll() {
         }
     });
 }
+
+export { useDisableBodyScroll };

package/esm/hooks/use-esc-key-down.js

@@ -1,5 +1,6 @@
-import { useEffect, useRef } from 'react';
-import { KeyboardKeys } from '../shared/keyboard-keys';
+import { useRef, useEffect } from 'react';
+import { KeyboardKeys } from '../lib/keyboard-keys.js';
+
 const handlers = [];
 /**
  * Invokes a given handler when the `Esc` key was pressed.
@@ -12,7 +13,7 @@ const handlers = [];
  * @param options.isEnabled A flag that determines whether to run
  * the passed handler or not.
  */
-export function useEscKeyDown(handler, options) {
+function useEscKeyDown(handler, options) {
     const handlerRef = useRef(handler);
     const isEnabled = options.isEnabled;
     useEffect(() => {
@@ -47,3 +48,5 @@ export function useEscKeyDown(handler, options) {
         };
     }, [isEnabled]);
 }
+
+export { useEscKeyDown };

package/esm/hooks/use-focus-trap.js

@@ -1,6 +1,7 @@
 import { useEffect } from 'react';
-import { focusElement } from '../shared/react-helpers';
-import { KeyboardKeys } from '../shared/keyboard-keys';
+import { KeyboardKeys } from '../lib/keyboard-keys.js';
+import { focusElement } from '../lib/react-helpers.js';
+
 const modals = [];
 const focusableElementsSelector = [
     'a[href]',
@@ -23,7 +24,7 @@ const focusableElementsSelector = [
  * @param {boolean} options.isEnabled - A flag that determines whether
  * to trap focus or not.
  */
-export function useFocusTrap(modalRef, options) {
+function useFocusTrap(modalRef, options) {
     const isEnabled = options.isEnabled;
     useEffect(() => {
         if (!isEnabled) {
@@ -80,3 +81,5 @@ export function useFocusTrap(modalRef, options) {
         };
     }, [isEnabled, modalRef]);
 }
+
+export { useFocusTrap };

package/esm/hooks/use-mount-transition.js

@@ -1,6 +1,7 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { classNames } from '../shared/react-helpers';
-export function useMountTransition({ animateFirstMount = false, isShown, durationMs, enterFrom, enterTo, }) {
+import { useState, useRef, useMemo, useEffect } from 'react';
+import { classNames } from '../lib/react-helpers.js';
+
+function useMountTransition({ animateFirstMount = false, isShown, durationMs, enterFrom, enterTo, }) {
     const [isMounted, setIsMounted] = useState(isShown);
     const [hasEnterToClass, setHasEnterToClass] = useState(false);
     const firstMount = useRef(true);
@@ -34,3 +35,5 @@ export function useMountTransition({ animateFirstMount = false, isShown, duratio
             : classNames(enterFrom, hasEnterToClass && enterTo),
     };
 }
+
+export { useMountTransition };

package/esm/index.js

@@ -1,37 +1,69 @@
-export * from './components/alert';
-export * from './components/avatar';
-export * from './components/avatar-group';
-export * from './components/badge';
-export * from './components/breadcrumbs';
-export * from './components/button';
-export * from './components/button-group';
-export * from './components/caption';
-export * from './components/checkbox';
-export * from './components/date-picker';
-export * from './components/date-picker-popover';
-export * from './components/date-range-picker-popover';
-export * from './components/dialog';
-export * from './components/empty-state';
-export * from './components/file-picker';
-export * from './components/filter-buttons';
-export * from './components/form-field';
-export * from './components/label';
-export * from './components/menu';
-export * from './components/nav-list';
-export * from './components/password-input';
-export * from './components/popover';
-export * from './components/portal';
-export * from './components/radio';
-export * from './components/segmented-control';
-export * from './components/select';
-export * from './components/slider';
-export * from './components/spinner';
-export * from './components/switch';
-export * from './components/table';
-export * from './components/tabs';
-export * from './components/tag';
-export * from './components/text-input';
-export * from './components/textarea';
-export * from './components/toast';
-export * from './components/toaster';
-export * from './components/tooltip';
+export { KeyboardKeys } from './lib/keyboard-keys.js';
+export { assertIfNullable, once } from './lib/helpers.js';
+export { classNames, focusElement, isReactElementWithRef, mergeRefs } from './lib/react-helpers.js';
+export { useMountTransition } from './hooks/use-mount-transition.js';
+export { useDisableBodyScroll } from './hooks/use-disable-body-scroll.js';
+export { useEscKeyDown } from './hooks/use-esc-key-down.js';
+export { useFocusTrap } from './hooks/use-focus-trap.js';
+export { Alert } from './components/alert/alert.js';
+export { Avatar } from './components/avatar/avatar.js';
+export { AvatarGroup } from './components/avatar-group/avatar-group.js';
+export { Badge } from './components/badge/badge.js';
+export { Breadcrumbs } from './components/breadcrumbs/breadcrumbs.js';
+export { BreadcrumbsItem } from './components/breadcrumbs/breadcrumbs-item.js';
+export { Button } from './components/button/button.js';
+export { IconButton } from './components/button/icon-button.js';
+export { ButtonGroup } from './components/button-group/button-group.js';
+export { Caption } from './components/caption/caption.js';
+export { Checkbox } from './components/checkbox/checkbox.js';
+export { ColorPicker } from './components/color-picker/color-picker.js';
+export { DatePicker } from './components/date-picker/date-picker.js';
+export { DateRangePicker } from './components/date-picker/date-range-picker.js';
+export { DatePickerPopover } from './components/date-picker-popover/date-picker-popover.js';
+export { DateRangePickerPopover } from './components/date-range-picker-popover/date-range-picker-popover.js';
+export { Dialog } from './components/dialog/dialog.js';
+export { DialogHeader } from './components/dialog/dialog-header.js';
+export { DialogBody } from './components/dialog/dialog-body.js';
+export { DialogFooter } from './components/dialog/dialog-footer.js';
+export { EmptyState } from './components/empty-state/empty-state.js';
+export { FilePicker } from './components/file-picker/file-picker.js';
+export { FilterButtons } from './components/filter-buttons/filter-buttons.js';
+export { FilterButton } from './components/filter-buttons/filter-button.js';
+export { FormField } from './components/form-field/form-field.js';
+export { Label } from './components/label/label.js';
+export { Menu } from './components/menu/menu.js';
+export { MenuItem } from './components/menu/menu-item.js';
+export { MenuSeparator } from './components/menu/menu-separator.js';
+export { NavList } from './components/nav-list/nav-list.js';
+export { NavListItem } from './components/nav-list/nav-list-item.js';
+export { NavListTitle } from './components/nav-list/nav-list-title.js';
+export { PasswordInput } from './components/password-input/password-input.js';
+export { Popover } from './components/popover/popover.js';
+export { Portal } from './components/portal/portal.js';
+export { Positioner } from './components/positioner/positioner.js';
+export { Radio } from './components/radio/radio.js';
+export { SegmentedControl } from './components/segmented-control/segmented-control.js';
+export { Select } from './components/select/select.js';
+export { SelectionControl } from './components/selection-control/selection-control.js';
+export { Slider } from './components/slider/slider.js';
+export { SliderTickMarks } from './components/slider/slider-tick-marks.js';
+export { Spinner } from './components/spinner/spinner.js';
+export { Switch } from './components/switch/switch.js';
+export { TableContainer } from './components/table/table-container.js';
+export { Table } from './components/table/table.js';
+export { TableHead } from './components/table/table-head.js';
+export { TableBody } from './components/table/table-body.js';
+export { TableRow } from './components/table/table-row.js';
+export { TableHeadCell } from './components/table/table-head-cell.js';
+export { TableCell } from './components/table/table-cell.js';
+export { Tabs } from './components/tabs/tabs.js';
+export { TabList } from './components/tabs/tab-list.js';
+export { Tab } from './components/tabs/tab.js';
+export { TabPanel } from './components/tabs/tab-panel.js';
+export { Tag } from './components/tag/tag.js';
+export { TextInput } from './components/text-input/text-input.js';
+export { Textarea } from './components/textarea/textarea.js';
+export { Toast } from './components/toast/toast.js';
+export { ToastButton } from './components/toast/toast-button.js';
+export { Toaster } from './components/toaster/toaster.js';
+export { Tooltip } from './components/tooltip/tooltip.js';