draft-components 1.12.0 → 2.0.0

package/dist/esm/components/filtered-search/string-filter-input.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { classNames } from '../../lib/index.js';
+import { TextInput } from '../text-input/index.js';
+import { Caption } from '../caption/index.js';
+import { ExclamationTriangleIcon } from '../hero-icons/24/solid/exclamation-triangle-icon.js';
+export function StringFilterInput({ className, accessibleName, placeholder, error, value, onChangeValue, }) {
+    const id = useId();
+    const alertId = `${id}alert`;
+    const invalid = Boolean(error);
+    return (_jsxs("div", { className: classNames('dc-string-filter-input', className), children: [_jsx(ArrowReturnRightIcon, {}), _jsx(TextInput, { "data-testid": "string-filter-input", size: "sm", fullWidth: true, "aria-label": accessibleName, "aria-describedby": invalid ? alertId : '', placeholder: placeholder, type: "text", required: true, value: value, invalid: invalid, onChangeValue: onChangeValue }), invalid && (_jsx(Caption, { id: alertId, className: "dc-string-filter-input__error", role: "alert", color: "red", icon: _jsx(ExclamationTriangleIcon, { width: 20, height: 20 }), children: error }))] }));
+}
+function ArrowReturnRightIcon(props) {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", width: 16, height: 16, fill: "currentColor", ...props, children: _jsx("path", { fillRule: "evenodd", d: "M1.5 1.5A.5.5 0 0 0 1 2v4.8a2.5 2.5 0 0 0 2.5 2.5h9.793l-3.347 3.346a.5.5 0 0 0 .708.708l4.2-4.2a.5.5 0 0 0 0-.708l-4-4a.5.5 0 0 0-.708.708L13.293 8.3H3.5A1.5 1.5 0 0 1 2 6.8V2a.5.5 0 0 0-.5-.5z" }) }));
+}

package/{types → dist/esm}/components/filtered-search/string-filter-item.d.ts

@@ -1,4 +1,4 @@
-import { StringFilter, StringFilterOperator } from './model/string-filter';
+import { StringFilter, StringFilterOperator } from './model/string-filter.js';
 export type StringFilterItemProps = {
     filter: StringFilter;
     isEditing: boolean;

package/{esm → dist/esm}/components/filtered-search/string-filter-item.js

@@ -1,15 +1,13 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { StringFilter } from './model/string-filter.js';
 import { useState } from 'react';
 import { useTranslations } from './use-translations.js';
-import { Popover } from '../popover/popover.js';
+import { Popover } from '../popover/index.js';
 import { FilterToken } from './filter-token.js';
 import { FilterOperatorSelect } from './filter-operator-select.js';
 import { StringFilterInput } from './string-filter-input.js';
-import { Button } from '../button/button.js';
-import '../button/icon-button.js';
-
-function StringFilterItem({ filter, isEditing, onEditStart, onEditCancel, onRemove, onChange, }) {
+import { Button } from '../button/index.js';
+export function StringFilterItem({ filter, isEditing, onEditStart, onEditCancel, onRemove, onChange, }) {
     const translations = useTranslations();
     const [filterOperator, setFilterOperator] = useState(filter.operator);
     const [filterValue, setFilterValue] = useState(filter.value);
@@ -49,8 +47,8 @@ function StringFilterItem({ filter, isEditing, onEditStart, onEditCancel, onRemo
         }
         onChange(filter);
     };
-    const anchor = (jsxs(FilterToken, { isHighlighted: isEditing, onClickLabel: startEdit, onClickCloseButton: onClickCloseButton, children: [label, filter.value ? (jsxs(Fragment, { children: ["\u00A0", jsx("span", { children: formatOperator(filter.operator) }), "\u00A0", jsx("b", { children: filter.value })] })) : null] }));
-    return (jsx(Popover, { className: "dc-filter-popover", anchor: anchor, anchorGap: 2, transitionDurationMs: 0, isOpen: isEditing, onClose: cancelEdit, children: jsxs("form", { className: "dc-filter-form", onSubmit: onSubmit, children: [jsx(FilterOperatorSelect, { className: "dc-filter-form__operator", accessibleName: operatorSelectAccessibleName, label: label, values: operators, value: filterOperator, onChange: setFilterOperator, formatValue: formatOperator }), jsx(StringFilterInput, { placeholder: valueInputPlaceholder, accessibleName: valueInputAccessibleName, error: error, value: filterValue, onChangeValue: setFilterValue }), jsxs("div", { className: "dc-filter-form__buttons", children: [jsx(Button, { variant: "plain", type: "button", onClick: cancelEdit, children: translations.cancelButton }), jsx(Button, { appearance: "primary", type: "submit", disabled: !filterValue, children: translations.applyButton })] })] }) }));
+    const anchor = (_jsxs(FilterToken, { isHighlighted: isEditing, onClickLabel: startEdit, onClickCloseButton: onClickCloseButton, children: [label, filter.value ? (_jsxs(_Fragment, { children: ["\u00A0", _jsx("span", { children: formatOperator(filter.operator) }), "\u00A0", _jsx("b", { children: filter.value })] })) : null] }));
+    return (_jsx(Popover, { className: "dc-filter-popover", anchor: anchor, anchorGap: 2, transitionDurationMs: 0, isOpen: isEditing, onClose: cancelEdit, children: _jsxs("form", { className: "dc-filter-form", onSubmit: onSubmit, children: [_jsx(FilterOperatorSelect, { className: "dc-filter-form__operator", accessibleName: operatorSelectAccessibleName, label: label, values: operators, value: filterOperator, onChange: setFilterOperator, formatValue: formatOperator }), _jsx(StringFilterInput, { placeholder: valueInputPlaceholder, accessibleName: valueInputAccessibleName, error: error, value: filterValue, onChangeValue: setFilterValue }), _jsxs("div", { className: "dc-filter-form__buttons", children: [_jsx(Button, { buttonStyle: "plain", type: "button", onClick: cancelEdit, children: translations.cancelButton }), _jsx(Button, { type: "submit", tint: "blue", disabled: !filterValue, children: translations.applyButton })] })] }) }));
 }
 StringFilterItem.defaultOperatorFormatter = defaultOperatorFormatter;
 function defaultOperatorFormatter(operator) {
@@ -62,5 +60,3 @@ function defaultOperatorFormatter(operator) {
     };
     return messages[operator];
 }
-
-export { StringFilterItem };

package/{types → dist/esm}/components/filtered-search/string-set-filter-item.d.ts

@@ -1,4 +1,4 @@
-import { StringSetFilter, StringSetFilterOperator } from './model/string-set-filter';
+import { StringSetFilter, StringSetFilterOperator } from './model/string-set-filter.js';
 export type StringSetFilterItemProps = {
     filter: StringSetFilter;
     isEditing: boolean;

package/{esm → dist/esm}/components/filtered-search/string-set-filter-item.js

@@ -1,15 +1,13 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { StringSetFilter } from './model/string-set-filter.js';
 import { useState } from 'react';
 import { useTranslations } from './use-translations.js';
-import { Popover } from '../popover/popover.js';
+import { Popover } from '../popover/index.js';
 import { FilterToken } from './filter-token.js';
 import { FilterOperatorSelect } from './filter-operator-select.js';
 import { FilterValueList } from './filter-value-list.js';
-import { Button } from '../button/button.js';
-import '../button/icon-button.js';
-
-function StringSetFilterItem({ filter, isEditing, onEditStart, onEditCancel, onRemove, onChange, }) {
+import { Button } from '../button/index.js';
+export function StringSetFilterItem({ filter, isEditing, onEditStart, onEditCancel, onRemove, onChange, }) {
     const translations = useTranslations();
     const [filterOperator, setFilterOperator] = useState(filter.operator);
     const [filterValue, setFilterValue] = useState(filter.value);
@@ -42,8 +40,8 @@ function StringSetFilterItem({ filter, isEditing, onEditStart, onEditCancel, onR
         }
         onChange(changedFilter);
     };
-    const anchor = (jsxs(FilterToken, { isHighlighted: isEditing, onClickLabel: startEdit, onClickCloseButton: onClickCloseButton, children: [label, filter.value.length > 0 ? (jsxs(Fragment, { children: ["\u00A0", jsx("span", { children: formatOperator(filter.operator) }), "\u00A0", jsx("b", { children: formatValues(filter.value) })] })) : null] }));
-    return (jsx(Popover, { className: "dc-filter-popover", anchor: anchor, anchorGap: 2, transitionDurationMs: 0, isOpen: isEditing, onClose: cancelEdit, children: jsxs("form", { className: "dc-filter-form", onSubmit: onSubmit, children: [jsx(FilterOperatorSelect, { className: "dc-filter-form__operator", accessibleName: operatorSelectAccessibleName, label: label, values: operators, value: filterOperator, onChange: setFilterOperator, formatValue: formatOperator }), jsx(FilterValueList, { className: "dc-filter-form__value-list", values: values, checkedValues: filterValue, onChangeCheckedValues: setFilterValue, formatValue: formatValue }), jsxs("div", { className: "dc-filter-form__buttons", children: [jsx(Button, { variant: "plain", type: "button", onClick: cancelEdit, children: translations.cancelButton }), jsx(Button, { appearance: "primary", type: "submit", disabled: filterValue.length < 1, children: translations.applyButton })] })] }) }));
+    const anchor = (_jsxs(FilterToken, { isHighlighted: isEditing, onClickLabel: startEdit, onClickCloseButton: onClickCloseButton, children: [label, filter.value.length > 0 ? (_jsxs(_Fragment, { children: ["\u00A0", _jsx("span", { children: formatOperator(filter.operator) }), "\u00A0", _jsx("b", { children: formatValues(filter.value) })] })) : null] }));
+    return (_jsx(Popover, { className: "dc-filter-popover", anchor: anchor, anchorGap: 2, transitionDurationMs: 0, isOpen: isEditing, onClose: cancelEdit, children: _jsxs("form", { className: "dc-filter-form", onSubmit: onSubmit, children: [_jsx(FilterOperatorSelect, { className: "dc-filter-form__operator", accessibleName: operatorSelectAccessibleName, label: label, values: operators, value: filterOperator, onChange: setFilterOperator, formatValue: formatOperator }), _jsx(FilterValueList, { className: "dc-filter-form__value-list", values: values, checkedValues: filterValue, onChangeCheckedValues: setFilterValue, formatValue: formatValue }), _jsxs("div", { className: "dc-filter-form__buttons", children: [_jsx(Button, { type: "button", buttonStyle: "plain", onClick: cancelEdit, children: translations.cancelButton }), _jsx(Button, { type: "submit", tint: "blue", disabled: filterValue.length < 1, children: translations.applyButton })] })] }) }));
 }
 StringSetFilterItem.defaultValueFormatter = defaultValueFormatter;
 StringSetFilterItem.defaultValuesFormatter = defaultValuesFormatter;
@@ -71,5 +69,3 @@ function defaultOperatorFormatter(operator) {
     };
     return messages[operator];
 }
-
-export { StringSetFilterItem };

package/{types → dist/esm}/components/filtered-search/types.d.ts

@@ -1,4 +1,4 @@
-import { StringFilter, StringFilterConfig } from './model/string-filter';
-import { StringSetFilter, StringSetFilterConfig } from './model/string-set-filter';
+import { StringFilter, StringFilterConfig } from './model/string-filter.js';
+import { StringSetFilter, StringSetFilterConfig } from './model/string-set-filter.js';
 export type FilterConfig = StringFilterConfig | StringSetFilterConfig;
 export type Filter = StringFilter | StringSetFilter;

package/dist/esm/components/filtered-search/types.js

@@ -0,0 +1 @@
+export {};

package/{esm → dist/esm}/components/filtered-search/use-combobox-ids.js

@@ -1,6 +1,5 @@
-import { useId, useCallback } from 'react';
-
-function useComboboxIds() {
+import { useCallback, useId } from 'react';
+export function useComboboxIds() {
     const id = useId();
     const textBoxId = `${id}textBox`;
     const listBoxId = `${id}listBox`;
@@ -11,5 +10,3 @@ function useComboboxIds() {
         getOptionId,
     };
 }
-
-export { useComboboxIds };

package/{esm → dist/esm}/components/filtered-search/use-translations.js

@@ -1,21 +1,18 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext, useMemo } from 'react';
-
 const Context = createContext(null);
-function useTranslations() {
+export function useTranslations() {
     const ctx = useContext(Context);
     if (ctx == null) {
         throw new Error('useTranslations must be used within TranslationsProvider');
     }
     return ctx;
 }
-function TranslationsProvider({ applyButton, cancelButton, removeFilterButton, children, }) {
+export function TranslationsProvider({ applyButton, cancelButton, removeFilterButton, children, }) {
     const translations = useMemo(() => ({
         applyButton,
         cancelButton,
         removeFilterButton,
     }), [applyButton, cancelButton, removeFilterButton]);
-    return (jsx(Context.Provider, { value: translations, children: children }));
+    return (_jsx(Context.Provider, { value: translations, children: children }));
 }
-
-export { TranslationsProvider, useTranslations };

package/{types → dist/esm}/components/form-field/form-field.d.ts

@@ -1,8 +1,12 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
 export type FormFieldRenderFn = (props: {
     id: string;
+    invalid: boolean;
     required: boolean;
-    hasError: boolean;
+    /**
+     * The list of IDs that describe the input element.
+     */
+    describedBy: string[];
 }) => ReactNode;
 type FormFieldHTMLProps = ComponentPropsWithoutRef<'div'>;
 type FormFieldBaseProps = Omit<FormFieldHTMLProps, 'children'>;
@@ -10,9 +14,9 @@ export type FormFieldProps = {
     required?: boolean;
     labelFor?: string;
     label?: ReactNode;
-    caption?: ReactNode;
     error?: ReactNode;
+    hint?: ReactNode;
     children: ReactNode | FormFieldRenderFn;
 } & FormFieldBaseProps;
-export declare function FormField({ required, labelFor, label, caption, error, className, children, ...props }: FormFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function FormField({ required, labelFor, label, error, hint, className, children, ...props }: FormFieldProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/components/form-field/form-field.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { classNames } from '../../lib/react-helpers.js';
+import { Label } from '../label/index.js';
+import { Caption } from '../caption/index.js';
+import { ExclamationTriangleIcon } from '../hero-icons/24/solid/exclamation-triangle-icon.js';
+export function FormField({ required = false, labelFor = '', label, error, hint, className = '', children, ...props }) {
+    const id = useId();
+    const invalid = Boolean(error);
+    const inputId = labelFor || `${id}-input`;
+    const inputDescribedBy = [];
+    let hintElement = null;
+    if (hint) {
+        const hintId = `${inputId}-hint`;
+        inputDescribedBy.push(hintId);
+        hintElement = (_jsx(Caption, { id: hintId, className: "dc-form-field__hint", children: hint }));
+    }
+    let errorElement = null;
+    if (invalid) {
+        const errorId = `${inputId}-error`;
+        inputDescribedBy.push(errorId);
+        errorElement = (_jsx(Caption, { id: errorId, className: "dc-form-field__error", role: "alert", color: "red", icon: _jsx(ExclamationTriangleIcon, { width: 20, height: 20 }), children: error }));
+    }
+    let inputElement;
+    if (typeof children === 'function') {
+        inputElement = children({
+            invalid,
+            required,
+            id: inputId,
+            describedBy: inputDescribedBy,
+        });
+    }
+    else {
+        inputElement = children;
+    }
+    return (_jsxs("div", { ...props, className: classNames('dc-form-field', className), children: [label ? (_jsx(Label, { className: "dc-form-field__label", required: required, htmlFor: inputId, children: label })) : null, _jsx("div", { className: "dc-form-field__input", children: inputElement }), errorElement, hintElement] }));
+}

package/dist/esm/components/form-field/index.d.ts

@@ -0,0 +1 @@
+export * from './form-field.js';

package/dist/esm/components/form-field/index.js

@@ -0,0 +1 @@
+export * from './form-field.js';

package/dist/esm/components/hero-icons/24/outline/arrow-small-down-icon.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const ArrowSmallDownIcon: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
+}, "ref"> & import("react").RefAttributes<SVGSVGElement>>;

package/dist/esm/components/hero-icons/24/outline/arrow-small-down-icon.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+export const ArrowSmallDownIcon = forwardRef(function ArrowSmallDownIcon(props, ref) {
+    return (_jsx("svg", { ref: ref, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: 24, height: 24, stroke: "currentColor", strokeWidth: 1.5, fill: "none", ...props, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 4.5v15m0 0l6.75-6.75M12 19.5l-6.75-6.75" }) }));
+});

package/dist/esm/components/hero-icons/24/outline/arrow-small-up-icon.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const ArrowSmallUpIcon: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
+}, "ref"> & import("react").RefAttributes<SVGSVGElement>>;

package/dist/esm/components/hero-icons/24/outline/arrow-small-up-icon.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+export const ArrowSmallUpIcon = forwardRef(function ArrowSmallUpIcon(props, ref) {
+    return (_jsx("svg", { ref: ref, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: 24, height: 24, stroke: "currentColor", strokeWidth: 1.5, fill: "none", ...props, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 19.5v-15m0 0l-6.75 6.75M12 4.5l6.75 6.75" }) }));
+});

package/dist/esm/components/hero-icons/24/outline/arrows-up-down-icon.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const ArrowsUpDownIcon: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
+}, "ref"> & import("react").RefAttributes<SVGSVGElement>>;

package/dist/esm/components/hero-icons/24/outline/arrows-up-down-icon.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+export const ArrowsUpDownIcon = forwardRef(function ArrowsUpDownIcon(props, ref) {
+    return (_jsx("svg", { ref: ref, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: 24, height: 24, stroke: "currentColor", strokeWidth: 1.5, fill: "none", ...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" }) }));
+});

package/dist/esm/components/hero-icons/24/outline/chevron-left-icon.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const ChevronLeftIcon: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
+}, "ref"> & import("react").RefAttributes<SVGSVGElement>>;

package/dist/esm/components/hero-icons/24/outline/chevron-left-icon.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+export const ChevronLeftIcon = forwardRef(function ChevronLeftIcon(props, ref) {
+    return (_jsx("svg", { ref: ref, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: 24, height: 24, stroke: "currentColor", strokeWidth: 1.5, fill: "none", ...props, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15.75 19.5L8.25 12l7.5-7.5" }) }));
+});

package/dist/esm/components/hero-icons/24/outline/chevron-right-icon.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const ChevronRightIcon: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
+}, "ref"> & import("react").RefAttributes<SVGSVGElement>>;

package/dist/esm/components/hero-icons/24/outline/chevron-right-icon.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+export const ChevronRightIcon = forwardRef(function ChevronRightIcon(props, ref) {
+    return (_jsx("svg", { ref: ref, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: 24, height: 24, stroke: "currentColor", strokeWidth: 1.5, fill: "none", ...props, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 4.5l7.5 7.5-7.5 7.5" }) }));
+});

package/dist/esm/components/hero-icons/24/outline/eye-icon.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const EyeIcon: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
+}, "ref"> & import("react").RefAttributes<SVGSVGElement>>;

package/dist/esm/components/hero-icons/24/outline/eye-icon.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+export const EyeIcon = forwardRef(function EyeIcon(props, ref) {
+    return (_jsxs("svg", { ref: ref, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: 24, height: 24, stroke: "currentColor", strokeWidth: 1.5, fill: "none", ...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" })] }));
+});

package/dist/esm/components/hero-icons/24/outline/eye-slash-icon.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const EyeSlashIcon: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
+}, "ref"> & import("react").RefAttributes<SVGSVGElement>>;

package/dist/esm/components/hero-icons/24/outline/eye-slash-icon.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+export const EyeSlashIcon = forwardRef(function EyeSlashIcon(props, ref) {
+    return (_jsx("svg", { ref: ref, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: 24, height: 24, stroke: "currentColor", strokeWidth: 1.5, fill: "none", ...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" }) }));
+});

package/dist/esm/components/hero-icons/24/outline/magnifying-glass-icon.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const MagnifyingGlassIcon: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
+}, "ref"> & import("react").RefAttributes<SVGSVGElement>>;

package/dist/esm/components/hero-icons/24/outline/magnifying-glass-icon.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+export const MagnifyingGlassIcon = forwardRef(function MagnifyingGlassIcon(props, ref) {
+    return (_jsx("svg", { ref: ref, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: 24, height: 24, stroke: "currentColor", strokeWidth: 1.5, fill: "none", ...props, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" }) }));
+});

package/dist/esm/components/hero-icons/24/outline/trash-icon.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const TrashIcon: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
+}, "ref"> & import("react").RefAttributes<SVGSVGElement>>;

package/dist/esm/components/hero-icons/24/outline/trash-icon.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+export const TrashIcon = forwardRef(function TrashIcon(props, ref) {
+    return (_jsx("svg", { ref: ref, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: 24, height: 24, stroke: "currentColor", strokeWidth: 1.5, fill: "none", ...props, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" }) }));
+});

package/dist/esm/components/hero-icons/24/outline/x-mark-icon.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const XMarkIcon: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
+}, "ref"> & import("react").RefAttributes<SVGSVGElement>>;

package/dist/esm/components/hero-icons/24/outline/x-mark-icon.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+export const XMarkIcon = forwardRef(function XMarkIcon(props, ref) {
+    return (_jsx("svg", { ref: ref, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: 24, height: 24, stroke: "currentColor", strokeWidth: 1.5, fill: "none", ...props, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) }));
+});

package/dist/esm/components/hero-icons/24/solid/exclamation-triangle-icon.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const ExclamationTriangleIcon: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
+}, "ref"> & import("react").RefAttributes<SVGSVGElement>>;

package/dist/esm/components/hero-icons/24/solid/exclamation-triangle-icon.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+export const ExclamationTriangleIcon = forwardRef(function ExclamationTriangleIcon(props, ref) {
+    return (_jsx("svg", { ref: ref, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: 24, height: 24, fill: "currentColor", ...props, children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z" }) }));
+});

package/dist/esm/components/index.d.ts

@@ -0,0 +1,42 @@
+export * from './alert/index.js';
+export * from './avatar/index.js';
+export * from './avatar-group/index.js';
+export * from './badge/index.js';
+export * from './breadcrumbs/index.js';
+export * from './button/index.js';
+export * from './button-group/index.js';
+export * from './caption/index.js';
+export * from './checkbox/index.js';
+export * from './color-picker/index.js';
+export * from './date-picker/index.js';
+export * from './date-picker-popover/index.js';
+export * from './date-range-picker-popover/index.js';
+export * from './dialog/index.js';
+export * from './empty-state/index.js';
+export * from './file-picker/index.js';
+export * from './filter-buttons/index.js';
+export * from './filtered-search/index.js';
+export * from './form-field/index.js';
+export * from './label/index.js';
+export * from './menu/index.js';
+export * from './nav-list/index.js';
+export * from './password-input/index.js';
+export * from './popover/index.js';
+export * from './portal/index.js';
+export * from './positioner/index.js';
+export * from './radio/index.js';
+export * from './segmented-control/index.js';
+export * from './select/index.js';
+export * from './selection-control/index.js';
+export * from './slide-over/index.js';
+export * from './slider/index.js';
+export * from './spinner/index.js';
+export * from './switch/index.js';
+export * from './table/index.js';
+export * from './tabs/index.js';
+export * from './tag/index.js';
+export * from './text-input/index.js';
+export * from './textarea/index.js';
+export * from './toast/index.js';
+export * from './toaster/index.js';
+export * from './tooltip/index.js';

package/dist/esm/components/index.js

@@ -0,0 +1,42 @@
+export * from './alert/index.js';
+export * from './avatar/index.js';
+export * from './avatar-group/index.js';
+export * from './badge/index.js';
+export * from './breadcrumbs/index.js';
+export * from './button/index.js';
+export * from './button-group/index.js';
+export * from './caption/index.js';
+export * from './checkbox/index.js';
+export * from './color-picker/index.js';
+export * from './date-picker/index.js';
+export * from './date-picker-popover/index.js';
+export * from './date-range-picker-popover/index.js';
+export * from './dialog/index.js';
+export * from './empty-state/index.js';
+export * from './file-picker/index.js';
+export * from './filter-buttons/index.js';
+export * from './filtered-search/index.js';
+export * from './form-field/index.js';
+export * from './label/index.js';
+export * from './menu/index.js';
+export * from './nav-list/index.js';
+export * from './password-input/index.js';
+export * from './popover/index.js';
+export * from './portal/index.js';
+export * from './positioner/index.js';
+export * from './radio/index.js';
+export * from './segmented-control/index.js';
+export * from './select/index.js';
+export * from './selection-control/index.js';
+export * from './slide-over/index.js';
+export * from './slider/index.js';
+export * from './spinner/index.js';
+export * from './switch/index.js';
+export * from './table/index.js';
+export * from './tabs/index.js';
+export * from './tag/index.js';
+export * from './text-input/index.js';
+export * from './textarea/index.js';
+export * from './toast/index.js';
+export * from './toaster/index.js';
+export * from './tooltip/index.js';

package/dist/esm/components/label/index.d.ts

@@ -0,0 +1 @@
+export * from './label.js';

package/dist/esm/components/label/index.js

@@ -0,0 +1 @@
+export * from './label.js';

package/dist/esm/components/label/label.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { classNames } from '../../lib/react-helpers.js';
+export const Label = forwardRef(function Label({ required = false, className = '', children, ...props }, ref) {
+    return (_jsx("label", { ...props, ref: ref, className: classNames(className, 'dc-label', {
+            'dc-label_required': required,
+        }), children: children }));
+});

package/dist/esm/components/menu/index.d.ts

@@ -0,0 +1,3 @@
+export * from './menu.js';
+export * from './menu-item.js';
+export * from './menu-separator.js';

package/dist/esm/components/menu/index.js

@@ -0,0 +1,3 @@
+export * from './menu.js';
+export * from './menu-item.js';
+export * from './menu-separator.js';

package/{types → dist/esm}/components/menu/menu-item.d.ts

@@ -1,13 +1,11 @@
 import { ComponentPropsWithRef, ReactNode } from 'react';
 type MenuItemHTMLProps = ComponentPropsWithRef<'button'>;
 type MenuItemBaseProps = Omit<MenuItemHTMLProps, 'children' | 'role'>;
-export type MenuItemAppearance = 'default' | 'destructive';
-export type MenuItemRole = 'menuitem' | 'menuitemradio';
 export type MenuItemProps = {
-    role?: MenuItemRole;
-    appearance?: MenuItemAppearance;
-    leftIcon?: ReactNode;
-    rightIcon?: ReactNode;
+    role?: 'menuitem' | 'menuitemradio';
+    destructive?: boolean;
+    iconLeft?: ReactNode;
+    iconRight?: ReactNode;
     children: ReactNode;
 } & MenuItemBaseProps;
 export declare const MenuItem: import("react").ForwardRefExoticComponent<Omit<MenuItemProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/esm/components/menu/menu-item.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { classNames } from '../../lib/react-helpers.js';
+export const MenuItem = forwardRef(function MenuItem({ role = 'menuitem', destructive, iconLeft, iconRight, children, className, ...props }, ref) {
+    let label = children;
+    if (iconLeft || iconRight) {
+        const className = classNames('dc-menu-btn__label', {
+            'dc-menu-btn__label_gap_left': iconLeft,
+            'dc-menu-btn__label_gap_right': iconRight,
+        });
+        label = _jsx("span", { className: className, children: label });
+    }
+    return (_jsx("li", { role: "presentation", children: _jsxs("button", { ...props, ref: ref, className: classNames(className, 'dc-menu-btn', {
+                'dc-menu-btn_destructive': destructive,
+            }), type: "button", role: role, tabIndex: -1, children: [iconLeft, label, iconRight] }) }));
+});

package/dist/esm/components/menu/menu-separator.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from '../../lib/react-helpers.js';
+export function MenuSeparator({ className, ...props }) {
+    return (_jsx("li", { ...props, className: classNames('dc-menu__separator', className), role: "separator" }));
+}

package/{types → dist/esm}/components/menu/menu.d.ts

@@ -1,6 +1,6 @@
 import { ComponentPropsWithoutRef, JSX, KeyboardEventHandler, MouseEventHandler, ReactNode, RefCallback } from 'react';
-import { ButtonAppearance, ButtonVariant } from '../button';
-import { PopoverAlignment, PopoverPlacement } from '../popover';
+import { ButtonSize, ButtonStyle, ButtonTint } from '../button/index.js';
+import { PopoverAlignment, PopoverPlacement } from '../popover/index.js';
 export type MenuButtonRenderFn = (props: {
     ref: RefCallback<HTMLElement>;
     id: string;
@@ -25,8 +25,9 @@ export type MenuProps = {
     onClose?: () => void;
     button: ReactNode | MenuButtonRenderFn;
     buttonClassName?: string;
-    buttonAppearance?: ButtonAppearance;
-    buttonVariant?: ButtonVariant;
+    buttonStyle?: ButtonStyle;
+    buttonSize?: ButtonSize;
+    buttonTint?: ButtonTint;
 } & MenuHTMLProps;
-export declare function Menu({ defaultIsOpen, placement, alignment, buttonClassName, buttonAppearance, buttonVariant, button, className, children, onOpen, onClose, onKeyDown, ...props }: MenuProps): import("react/jsx-runtime").JSX.Element;
+export declare function Menu({ defaultIsOpen, placement, alignment, buttonClassName, buttonStyle, buttonSize, buttonTint, button, className, children, onOpen, onClose, onKeyDown, ...props }: MenuProps): import("react/jsx-runtime").JSX.Element;
 export {};