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

package/cjs/components/dialog/x-mark-icon.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+
+function XMarkIcon(props) {
+    return (jsxRuntime.jsx("svg", { width: 24, height: 24, fill: "none", stroke: "currentColor", strokeWidth: 1.5, ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) }));
+}
+
+exports.XMarkIcon = XMarkIcon;

package/cjs/components/empty-state/empty-state.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const reactHelpers = require('../../lib/react-helpers.cjs');
+
+function EmptyState({ className, image, heading, description, primaryAction, secondaryAction, children, }) {
+    return (jsxRuntime.jsxs("section", { className: reactHelpers.classNames('dc-empty-state', className), children: [Boolean(image) && (jsxRuntime.jsx("div", { className: "dc-empty-state__image", children: image })), Boolean(heading) && (jsxRuntime.jsx("h1", { className: "dc-empty-state__heading", children: heading })), Boolean(description) && (jsxRuntime.jsx("div", { className: "dc-empty-state__description", children: description })), Boolean(primaryAction) && (jsxRuntime.jsx("div", { className: "dc-empty-state__primary-action", children: primaryAction })), Boolean(secondaryAction) && (jsxRuntime.jsx("div", { className: "dc-empty-state__secondary-action", children: secondaryAction })), Boolean(children) && (jsxRuntime.jsx("div", { className: "dc-empty-state__content", children: children }))] }));
+}
+
+exports.EmptyState = EmptyState;

package/cjs/components/file-picker/file-picker.cjs

@@ -0,0 +1,47 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const reactHelpers = require('../../lib/react-helpers.cjs');
+const button = require('../button/button.cjs');
+require('../button/icon-button.cjs');
+
+const FilePicker = react.forwardRef(function FilePicker({ label, icon, caption, buttonLabel = 'Browse', id, style, className, disabled, onSelectFiles, ...props }, ref) {
+    const defaultId = react.useId();
+    const inputId = id || defaultId;
+    const inputRef = react.useRef(null);
+    const [draggingOver, setDraggingOver] = react.useState(false);
+    const handleChange = (event) => {
+        const fileList = event.target.files;
+        onSelectFiles?.(fileList ? Array.from(fileList) : []);
+    };
+    const handleDragOver = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (!disabled) {
+            setDraggingOver(true);
+        }
+    };
+    const handleDragEnd = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (!disabled) {
+            setDraggingOver(false);
+        }
+    };
+    const handleDrop = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (!disabled) {
+            setDraggingOver(false);
+            const fileList = event.dataTransfer.files;
+            onSelectFiles?.(fileList ? Array.from(fileList) : []);
+        }
+    };
+    return (jsxRuntime.jsxs("div", { style: style, className: reactHelpers.classNames(className, 'dc-file-picker', {
+            'dc-file-picker_disabled': disabled,
+            'dc-file-picker_dragging-over': draggingOver,
+        }), onDragOver: handleDragOver, onDragLeave: handleDragEnd, onDrop: handleDrop, "data-testid": "file-picker", children: [jsxRuntime.jsx("input", { ...props, id: inputId, ref: reactHelpers.mergeRefs(ref, inputRef), className: "dc-file-picker__input", type: "file", disabled: disabled, onChange: handleChange }), jsxRuntime.jsxs("div", { className: "dc-file-picker__body", children: [Boolean(icon) && (jsxRuntime.jsx("div", { className: "dc-file-picker__icon", children: icon })), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("label", { className: "dc-file-picker__label", htmlFor: inputId, children: label }), Boolean(caption) && (jsxRuntime.jsx("div", { className: "dc-file-picker__caption", children: caption }))] })] }), jsxRuntime.jsx(button.Button, { className: "dc-file-picker__button", onClick: () => inputRef.current?.click(), children: buttonLabel })] }));
+});
+
+exports.FilePicker = FilePicker;

package/cjs/components/filter-buttons/filter-button.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const reactHelpers = require('../../lib/react-helpers.cjs');
+
+const FilterButton = react.forwardRef(function FilterButton({ isActive = false, 'aria-pressed': ariaPressed = isActive, className, children, ...props }, ref) {
+    return (jsxRuntime.jsx("button", { ...props, ref: ref, className: reactHelpers.classNames('dc-filter-button', isActive && 'active', className), "data-active": isActive, "aria-pressed": ariaPressed, children: children }));
+});
+
+exports.FilterButton = FilterButton;

package/cjs/components/filter-buttons/filter-buttons.cjs

@@ -0,0 +1,27 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const helpers = require('../../lib/helpers.cjs');
+const reactHelpers = require('../../lib/react-helpers.cjs');
+
+function FilterButtons({ className, children, ...props }) {
+    const ref = react.useRef(null);
+    react.useLayoutEffect(() => {
+        const el = ref.current;
+        helpers.assertIfNullable(el, 'FilterButtons ref was not set');
+        for (const child of el.children) {
+            if (child instanceof HTMLButtonElement &&
+                child.dataset.active === 'true') {
+                const offset = el.offsetWidth - child.offsetWidth - child.offsetLeft;
+                if (offset < 0) {
+                    el.scrollTo(Math.abs(offset), 0);
+                }
+                break;
+            }
+        }
+    }, []);
+    return (jsxRuntime.jsx("div", { ...props, ref: ref, role: "group", className: reactHelpers.classNames(className, 'dc-filter-buttons'), children: children }));
+}
+
+exports.FilterButtons = FilterButtons;

package/cjs/components/form-field/form-field.cjs

@@ -0,0 +1,26 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const reactHelpers = require('../../lib/react-helpers.cjs');
+const label = require('../label/label.cjs');
+const caption = require('../caption/caption.cjs');
+
+function FormField({ required = false, labelFor = '', label: label$1, caption: caption$1, error, className = '', children, ...props }) {
+    const defaultId = react.useId();
+    const id = labelFor || defaultId;
+    const hasError = Boolean(error);
+    const shouldRenderLabel = Boolean(label$1);
+    let captionEl = null;
+    if (hasError) {
+        captionEl = (jsxRuntime.jsx(caption.Caption, { className: "dc-form-field__error", appearance: "error", showIcon: true, children: error }));
+    }
+    else if (caption$1) {
+        captionEl = jsxRuntime.jsx(caption.Caption, { className: "dc-form-field__caption", children: caption$1 });
+    }
+    return (jsxRuntime.jsxs("div", { ...props, className: reactHelpers.classNames('dc-form-field', className), children: [shouldRenderLabel && (jsxRuntime.jsx(label.Label, { className: "dc-form-field__label", htmlFor: id, required: required, children: label$1 })), jsxRuntime.jsx("div", { className: "dc-form-field__input", children: typeof children === 'function'
+                    ? children({ id, required, hasError })
+                    : children }), captionEl] }));
+}
+
+exports.FormField = FormField;

package/cjs/components/index.cjs

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

package/cjs/components/label/label.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const reactHelpers = require('../../lib/react-helpers.cjs');
+
+const Label = react.forwardRef(function Label({ required = false, className = '', children, ...props }, ref) {
+    return (jsxRuntime.jsx("label", { ...props, ref: ref, className: reactHelpers.classNames(className, 'dc-label', {
+            'dc-label_required': required,
+        }), children: children }));
+});
+
+exports.Label = Label;

package/cjs/components/menu/menu-item.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const reactHelpers = require('../../lib/react-helpers.cjs');
+
+const MenuItem = react.forwardRef(function MenuItem({ icon = null, appearance = 'default', className, children, ...props }, ref) {
+    return (jsxRuntime.jsx("li", { role: "presentation", children: jsxRuntime.jsxs("button", { ...props, ref: ref, className: reactHelpers.classNames(className, {
+                'dc-menu-btn': true,
+                [`dc-menu-btn_${appearance}`]: appearance,
+            }), type: "button", role: "menuitem", tabIndex: -1, children: [Boolean(icon) && jsxRuntime.jsx("span", { className: "dc-menu-btn__icon", children: icon }), jsxRuntime.jsx("span", { className: "dc-menu-btn__label", children: children })] }) }));
+});
+
+exports.MenuItem = MenuItem;

package/cjs/components/menu/menu-separator.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const reactHelpers = require('../../lib/react-helpers.cjs');
+
+function MenuSeparator({ className, ...props }) {
+    return (jsxRuntime.jsx("li", { ...props, className: reactHelpers.classNames('dc-menu__separator', className), role: "separator" }));
+}
+
+exports.MenuSeparator = MenuSeparator;

package/{dist/components/menu/menu.js → cjs/components/menu/menu.cjs}

@@ -1,31 +1,32 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Menu = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const keyboard_keys_1 = require("../../shared/keyboard-keys");
-const react_1 = require("react");
-const react_helpers_1 = require("../../shared/react-helpers");
-const util_1 = require("../../shared/util");
-const button_1 = require("../button");
-const popover_1 = require("../popover");
-const menu_item_1 = require("./menu-item");
-function Menu({ defaultIsOpen = false, placement = 'bottom', alignment = 'start', buttonAppearance = 'default', buttonVariant = 'filled', button, className, children, onOpen, onClose, onKeyDown, ...props }) {
-    const id = (0, react_1.useId)();
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const keyboardKeys = require('../../lib/keyboard-keys.cjs');
+const react = require('react');
+const reactHelpers = require('../../lib/react-helpers.cjs');
+const helpers = require('../../lib/helpers.cjs');
+const button = require('../button/button.cjs');
+require('../button/icon-button.cjs');
+const popover = require('../popover/popover.cjs');
+const menuItem = require('./menu-item.cjs');
+
+function Menu({ defaultIsOpen = false, placement = 'bottom', alignment = 'start', buttonAppearance = 'default', buttonVariant = 'filled', button: button$1, className, children, onOpen, onClose, onKeyDown, ...props }) {
+    const id = react.useId();
     const menuId = props.id || id;
     const buttonId = `menu-button-${menuId}`;
-    const [isOpen, setIsOpen] = (0, react_1.useState)(defaultIsOpen);
+    const [isOpen, setIsOpen] = react.useState(defaultIsOpen);
     const openMenu = () => {
         setIsOpen(true);
-        onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+        onOpen?.();
     };
     const closeMenu = () => {
         setIsOpen(false);
-        onClose === null || onClose === void 0 ? void 0 : onClose();
+        onClose?.();
     };
     const focusMenuButton = () => {
         const menuButton = document.getElementById(buttonId);
-        (0, util_1.assertIfNullable)(menuButton, `Unable to get DOM element #${buttonId}`);
-        (0, react_helpers_1.focusElement)(menuButton);
+        helpers.assertIfNullable(menuButton, `Unable to get DOM element #${buttonId}`);
+        reactHelpers.focusElement(menuButton);
     };
     const focusNextMenuItem = () => {
         const menuItems = getMenuItems(menuId);
@@ -34,7 +35,7 @@ function Menu({ defaultIsOpen = false, placement = 'bottom', alignment = 'start'
         if (index >= menuItems.length) {
             index = 0;
         }
-        (0, react_helpers_1.focusElement)(menuItems[index]);
+        reactHelpers.focusElement(menuItems[index]);
     };
     const focusPrevMenuItem = () => {
         const menuItems = getMenuItems(menuId);
@@ -43,15 +44,15 @@ function Menu({ defaultIsOpen = false, placement = 'bottom', alignment = 'start'
         if (index < 0) {
             index = menuItems.length - 1;
         }
-        (0, react_helpers_1.focusElement)(menuItems[index]);
+        reactHelpers.focusElement(menuItems[index]);
     };
     const focusFirstMenuItem = () => {
         const menuItems = getMenuItems(menuId);
-        (0, react_helpers_1.focusElement)(menuItems[0]);
+        reactHelpers.focusElement(menuItems[0]);
     };
     const focusLastMenuItem = () => {
         const menuItems = getMenuItems(menuId);
-        (0, react_helpers_1.focusElement)(menuItems[menuItems.length - 1]);
+        reactHelpers.focusElement(menuItems[menuItems.length - 1]);
     };
     const focusMenuItemByFirstChar = (char) => {
         if (char.length > 1) {
@@ -66,9 +67,7 @@ function Menu({ defaultIsOpen = false, placement = 'bottom', alignment = 'start'
             if (el.textContent) {
                 return el.textContent[0].toLowerCase();
             }
-            else {
-                return '';
-            }
+            return '';
         });
         const activeMenuItemIndex = menuItems.findIndex((el) => el === document.activeElement);
         let fromIndex = activeMenuItemIndex + 1;
@@ -79,7 +78,7 @@ function Menu({ defaultIsOpen = false, placement = 'bottom', alignment = 'start'
         if (index === -1 && fromIndex !== 0) {
             index = firstChars.indexOf(char);
         }
-        (0, react_helpers_1.focusElement)(menuItems[index]);
+        reactHelpers.focusElement(menuItems[index]);
     };
     const handleButtonClick = (event) => {
         if (isOpen) {
@@ -94,12 +93,12 @@ function Menu({ defaultIsOpen = false, placement = 'bottom', alignment = 'start'
         event.stopPropagation();
     };
     const handleButtonKeyDown = (event) => {
-        if (event.key === keyboard_keys_1.KeyboardKeys.ArrowUp ||
-            event.key === keyboard_keys_1.KeyboardKeys.ArrowDown ||
-            event.key === keyboard_keys_1.KeyboardKeys.Enter ||
-            event.key === keyboard_keys_1.KeyboardKeys.Space) {
+        if (event.key === keyboardKeys.KeyboardKeys.ArrowUp ||
+            event.key === keyboardKeys.KeyboardKeys.ArrowDown ||
+            event.key === keyboardKeys.KeyboardKeys.Enter ||
+            event.key === keyboardKeys.KeyboardKeys.Space) {
             openMenu();
-            window.setTimeout(event.key === keyboard_keys_1.KeyboardKeys.ArrowUp
+            window.setTimeout(event.key === keyboardKeys.KeyboardKeys.ArrowUp
                 ? focusLastMenuItem
                 : focusFirstMenuItem);
             event.preventDefault();
@@ -111,23 +110,23 @@ function Menu({ defaultIsOpen = false, placement = 'bottom', alignment = 'start'
             return;
         }
         let handled = false;
-        if (event.key === keyboard_keys_1.KeyboardKeys.ArrowUp) {
+        if (event.key === keyboardKeys.KeyboardKeys.ArrowUp) {
             focusPrevMenuItem();
             handled = true;
         }
-        else if (event.key === keyboard_keys_1.KeyboardKeys.ArrowDown) {
+        else if (event.key === keyboardKeys.KeyboardKeys.ArrowDown) {
             focusNextMenuItem();
             handled = true;
         }
-        else if (event.key === keyboard_keys_1.KeyboardKeys.Home) {
+        else if (event.key === keyboardKeys.KeyboardKeys.Home) {
             focusFirstMenuItem();
             handled = true;
         }
-        else if (event.key === keyboard_keys_1.KeyboardKeys.End) {
+        else if (event.key === keyboardKeys.KeyboardKeys.End) {
             focusLastMenuItem();
             handled = true;
         }
-        else if (event.key === keyboard_keys_1.KeyboardKeys.Tab) {
+        else if (event.key === keyboardKeys.KeyboardKeys.Tab) {
             closeMenu();
             if (event.shiftKey) {
                 focusMenuButton();
@@ -142,47 +141,44 @@ function Menu({ defaultIsOpen = false, placement = 'bottom', alignment = 'start'
             event.preventDefault();
             event.stopPropagation();
         }
-        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+        onKeyDown?.(event);
     };
     const renderAnchor = ({ ref }) => {
-        if (typeof button === 'function') {
-            return button({
+        if (typeof button$1 === 'function') {
+            return button$1({
                 ref,
-                id: buttonId,
+                'id': buttonId,
                 'aria-haspopup': true,
                 'aria-expanded': isOpen,
                 'aria-controls': menuId,
-                onClick: handleButtonClick,
-                onKeyDown: handleButtonKeyDown,
+                'onClick': handleButtonClick,
+                'onKeyDown': handleButtonKeyDown,
             }, {
                 isOpen,
                 openMenu,
                 closeMenu,
             });
         }
-        return ((0, jsx_runtime_1.jsx)(button_1.Button, { ref: ref, id: buttonId, "aria-haspopup": true, "aria-expanded": isOpen, "aria-controls": menuId, onClick: handleButtonClick, onKeyDown: handleButtonKeyDown, appearance: buttonAppearance, variant: buttonVariant, children: button }));
+        return (jsxRuntime.jsx(button.Button, { ref: ref, id: buttonId, "aria-haspopup": true, "aria-expanded": isOpen, "aria-controls": menuId, onClick: handleButtonClick, onKeyDown: handleButtonKeyDown, appearance: buttonAppearance, variant: buttonVariant, children: button$1 }));
     };
-    return ((0, jsx_runtime_1.jsx)(popover_1.Popover, { className: "dc-menu__container", placement: placement, alignment: alignment, anchor: renderAnchor, isOpen: isOpen, onClose: closeMenu, children: (0, jsx_runtime_1.jsx)("ul", { ...props, className: (0, react_helpers_1.classNames)('dc-menu', className), role: "menu", id: menuId, "aria-labelledby": buttonId, onKeyDown: handleMenuKeyDown, children: react_1.Children.map(children, (child) => {
+    return (jsxRuntime.jsx(popover.Popover, { className: "dc-menu__container", placement: placement, alignment: alignment, anchor: renderAnchor, isOpen: isOpen, onClose: closeMenu, children: jsxRuntime.jsx("ul", { ...props, className: reactHelpers.classNames('dc-menu', className), role: "menu", id: menuId, "aria-labelledby": buttonId, onKeyDown: handleMenuKeyDown, children: react.Children.map(children, (child) => {
                 if (isMenuItem(child)) {
                     const props = child.props;
                     const onClick = (event) => {
-                        var _a;
-                        (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, event);
+                        props.onClick?.(event);
                         closeMenu();
                     };
                     const onMouseEnter = (event) => {
-                        var _a;
-                        (0, react_helpers_1.focusElement)(event.currentTarget);
-                        (_a = props.onMouseEnter) === null || _a === void 0 ? void 0 : _a.call(props, event);
+                        reactHelpers.focusElement(event.currentTarget);
+                        props.onMouseEnter?.(event);
                     };
-                    return (0, react_1.cloneElement)(child, { onClick, onMouseEnter });
+                    return react.cloneElement(child, { onClick, onMouseEnter });
                 }
                 return child;
             }) }) }));
 }
-exports.Menu = Menu;
 function isMenuItem(el) {
-    return (0, react_1.isValidElement)(el) && el.type === menu_item_1.MenuItem;
+    return react.isValidElement(el) && el.type === menuItem.MenuItem;
 }
 function getMenuItems(menuId) {
     const menuEl = window.document.getElementById(menuId);
@@ -192,3 +188,5 @@ function getMenuItems(menuId) {
     const nodes = menuEl.querySelectorAll('button[role="menuitem"]');
     return Array.from(nodes);
 }
+
+exports.Menu = Menu;

package/cjs/components/nav-list/nav-list-item.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const reactHelpers = require('../../lib/react-helpers.cjs');
+const badge = require('../badge/badge.cjs');
+
+function NavListItem({ className, icon, badge: badge$1, children, renderAs, ...props }) {
+    className = reactHelpers.classNames(className, 'dc-nav-link');
+    children = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [icon != null && jsxRuntime.jsxs("div", { className: "dc-nav-link__icon", children: [icon, " "] }), jsxRuntime.jsx("div", { className: "dc-nav-link__text", children: children }), badge$1 != null && jsxRuntime.jsxs(jsxRuntime.Fragment, { children: ["\u00A0", jsxRuntime.jsx(badge.Badge, { className: "dc-nav-link__badge", children: badge$1 })] })] }));
+    let content;
+    if (typeof renderAs === 'function') {
+        content = renderAs({ className, children });
+    }
+    else {
+        content = jsxRuntime.jsx("a", { ...props, className: className, children: children });
+    }
+    return jsxRuntime.jsx("li", { className: "dc-nav-list__item", children: content });
+}
+
+exports.NavListItem = NavListItem;

package/cjs/components/nav-list/nav-list-title.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const reactHelpers = require('../../lib/react-helpers.cjs');
+
+function NavListTitle({ className, children, ...props }) {
+    return (jsxRuntime.jsx("li", { ...props, className: reactHelpers.classNames('dc-nav-list__title', className), children: children }));
+}
+
+exports.NavListTitle = NavListTitle;

package/cjs/components/nav-list/nav-list.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const reactHelpers = require('../../lib/react-helpers.cjs');
+
+function NavList({ className, children, ...props }) {
+    return (jsxRuntime.jsx("nav", { ...props, className: reactHelpers.classNames('dc-nav-list', className), children: jsxRuntime.jsx("ul", { className: "dc-nav-list__items", children: children }) }));
+}
+
+exports.NavList = NavList;

package/cjs/components/password-input/icons.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+
+function EyeIcon(props) {
+    return (jsxRuntime.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: [jsxRuntime.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" }), jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" })] }));
+}
+function EyeSlashIcon(props) {
+    return (jsxRuntime.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: jsxRuntime.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" }) }));
+}
+
+exports.EyeIcon = EyeIcon;
+exports.EyeSlashIcon = EyeSlashIcon;

package/cjs/components/password-input/password-input.cjs

@@ -0,0 +1,30 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const reactHelpers = require('../../lib/react-helpers.cjs');
+const textInput = require('../text-input/text-input.cjs');
+const tooltip = require('../tooltip/tooltip.cjs');
+const icons = require('./icons.cjs');
+
+const PasswordInput = react.forwardRef(function PasswordInput({ isDefaultVisible = false, showPasswordTitle = 'Show password', hidePasswordTitle = 'Hide password', className, ...props }, ref) {
+    const [visible, setVisible] = react.useState(isDefaultVisible);
+    let type;
+    let content;
+    let Icon;
+    if (visible) {
+        type = 'text';
+        content = hidePasswordTitle;
+        Icon = icons.EyeIcon;
+    }
+    else {
+        type = 'password';
+        content = showPasswordTitle;
+        Icon = icons.EyeSlashIcon;
+    }
+    const handleButtonClick = () => setVisible(!visible);
+    const button = (jsxRuntime.jsx(tooltip.Tooltip, { content: content, children: jsxRuntime.jsx("button", { className: "dc-password-input__btn", type: "button", onClick: handleButtonClick, children: jsxRuntime.jsx(Icon, { className: "dc-password-input__icon", "aria-hidden": true }) }) }));
+    return (jsxRuntime.jsx(textInput.TextInput, { ...props, className: reactHelpers.classNames('dc-password-input', className), ref: ref, type: type, suffix: button }));
+});
+
+exports.PasswordInput = PasswordInput;