draft-components 3.6.0 → 4.0.0

package/dist/components/dialog/index.js

@@ -2,3 +2,4 @@ export * from './dialog.js';
 export * from './dialog-header.js';
 export * from './dialog-body.js';
 export * from './dialog-footer.js';
+//# sourceMappingURL=index.js.map

package/dist/components/dialog/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/dialog/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC"}

package/dist/components/empty-state/empty-state.css

@@ -1,7 +1,7 @@
 .dc-empty-state {
-  --dc-empty-state-inner-width: 640px;
-  --dc-empty-state-primary-color: var(--dc-primary-text-color);
-  --dc-empty-state-secondary-color: var(--dc-secondary-text-color);
+  --max-width: 640px;
+  --primary-color: var(--dc-text-color-primary);
+  --secondary-color: var(--dc-text-color-secondary);
 
   box-sizing: border-box;
   display: flex;
@@ -19,12 +19,12 @@
 }
 
 .dc-empty-state__image {
-  color: var(--dc-empty-state-secondary-color);
+  color: var(--secondary-color);
 }
 
 .dc-empty-state__title,
 .dc-empty-state__message {
-  max-width: var(--dc-empty-state-inner-width);
+  max-width: var(--max-width);
   margin: 0;
 }
 

package/dist/components/empty-state/empty-state.d.ts

@@ -1,13 +1,13 @@
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
-type EmptyStateHTMLProps = ComponentPropsWithoutRef<'div'>;
-type EmptyStateBaseProps = Omit<EmptyStateHTMLProps, 'title'>;
-export type EmptyStateProps = {
+import { type ComponentProps, type ReactNode } from 'react';
+type EmptyStateHTMLProps = ComponentProps<'div'>;
+type EmptyStateBaseProps = {
     image?: ReactNode;
     title?: ReactNode;
     message?: ReactNode;
     primaryAction?: ReactNode;
     secondaryAction?: ReactNode;
     fullHeight?: boolean;
-} & EmptyStateBaseProps;
+};
+export type EmptyStateProps = EmptyStateBaseProps & Omit<EmptyStateHTMLProps, keyof EmptyStateBaseProps>;
 export declare function EmptyState({ className, image, title, message, primaryAction, secondaryAction, fullHeight, children, ...props }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/empty-state/empty-state.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import {} from 'react';
 import { classNames } from '../../lib/react-helpers.js';
 export function EmptyState({ className, image, title, message, primaryAction, secondaryAction, fullHeight, children, ...props }) {
     return (_jsxs("div", { ...props, className: classNames(className, {
@@ -18,3 +19,4 @@ export function EmptyState({ className, image, title, message, primaryAction, se
                 ? _jsx("div", { className: "dc-empty-state__content", children: children })
                 : null] }));
 }
+//# sourceMappingURL=empty-state.js.map

package/dist/components/empty-state/empty-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty-state.js","sourceRoot":"","sources":["../../../src/components/empty-state/empty-state.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAiBxD,MAAM,UAAU,UAAU,CAAC,EACzB,SAAS,EACT,KAAK,EACL,KAAK,EACL,OAAO,EACP,aAAa,EACb,eAAe,EACf,UAAU,EACV,QAAQ,EACR,GAAG,KAAK,EACQ;IAChB,OAAO,CACL,kBACM,KAAK,EACT,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE;YAC/B,gBAAgB,EAAE,IAAI;YACtB,4BAA4B,EAAE,UAAU;SACzC,CAAC,aAED,KAAK;gBACJ,CAAC,CAAC,cAAK,SAAS,EAAC,uBAAuB,YAAE,KAAK,GAAO;gBACtD,CAAC,CAAC,IAAI,EACP,KAAK;gBACJ,CAAC,CAAC,aAAI,SAAS,EAAC,uBAAuB,YAAE,KAAK,GAAM;gBACpD,CAAC,CAAC,IAAI,EACP,OAAO;gBACN,CAAC,CAAC,cAAK,SAAS,EAAC,yBAAyB,YAAE,OAAO,GAAO;gBAC1D,CAAC,CAAC,IAAI,EACP,aAAa;gBACZ,CAAC,CAAC,cAAK,SAAS,EAAC,gCAAgC,YAAE,aAAa,GAAO;gBACvE,CAAC,CAAC,IAAI,EACP,eAAe;gBACd,CAAC,CAAC,cAAK,SAAS,EAAC,kCAAkC,YAAE,eAAe,GAAO;gBAC3E,CAAC,CAAC,IAAI,EACP,QAAQ;gBACP,CAAC,CAAC,cAAK,SAAS,EAAC,yBAAyB,YAAE,QAAQ,GAAO;gBAC3D,CAAC,CAAC,IAAI,IACJ,CACP,CAAC;AACJ,CAAC"}

package/dist/components/empty-state/index.js

@@ -1 +1,2 @@
 export * from './empty-state.js';
+//# sourceMappingURL=index.js.map

package/dist/components/empty-state/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/empty-state/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}

package/dist/components/file-picker/file-picker.css

@@ -1,10 +1,10 @@
 .dc-file-picker {
-  --dc-file-picker-label-color: var(--dc-control-primary-text-color);
-  --dc-file-picker-icon-color: var(--dc-control-secondary-text-color);
-  --dc-file-picker-caption-color: var(--dc-control-secondary-text-color);
-  --dc-file-picker-border-color: var(--dc-control-border-color);
-  --dc-file-picker-border-color-drag-over: var(--dc-control-primary-color);
-  --dc-file-picker-bg-drag-over: var(--dc-control-secondary-color);
+  --label-color: var(--dc-neutral-900);
+  --icon-color: var(--dc-neutral-500);
+  --caption-color: var(--dc-neutral-500);
+  --border-color: var(--dc-neutral-300);
+  --border-color-drag-over: var(--dc-blue-500);
+  --background-drag-over: rgb(var(--dc-blue-500-rgb) / 10%);
 
   position: relative;
   box-sizing: border-box;
@@ -14,7 +14,7 @@
   align-items: center;
   padding: 16px 20px;
   color-scheme: light;
-  border: 1px dashed var(--dc-file-picker-border-color);
+  border: 1px dashed var(--border-color);
   border-radius: 8px;
 }
 
@@ -38,21 +38,17 @@
 .dc-file-picker__icon {
   display: inline-flex;
   margin-right: 16px;
-  color: var(--dc-file-picker-icon-color);
+  color: var(--icon-color);
 }
 
 .dc-file-picker__label {
-  color: var(--dc-file-picker-label-color);
+  color: var(--label-color);
 }
 
 .dc-file-picker__caption {
   margin-top: 4px;
   font-size: 12px;
-  color: var(--dc-file-picker-caption-color);
-}
-
-.dc-file-picker__button {
-  box-shadow: none;
+  color: var(--caption-color);
 }
 
 .dc-file-picker_disabled {
@@ -64,11 +60,18 @@
 }
 
 .dc-file-picker_dragging-over {
-  background: var(--dc-file-picker-bg-drag-over);
-  border-color: var(--dc-file-picker-border-color-drag-over);
+  background: var(--background-drag-over);
+  border-color: var(--border-color-drag-over);
 }
 
 .dark .dc-file-picker,
 .dark.dc-file-picker {
+  --label-color: var(--dc-white);
+  --icon-color: var(--dc-neutral-400);
+  --caption-color: var(--dc-neutral-400);
+  --border-color: var(--dc-neutral-600);
+  --border-color-drag-over: var(--dc-blue-400);
+  --background-drag-over: rgb(var(--dc-blue-300-rgb) / 20%);
+
   color-scheme: dark;
 }

package/dist/components/file-picker/file-picker.d.ts

@@ -1,13 +1,13 @@
-import { type ComponentPropsWithRef, type ReactNode } from 'react';
-type FilePickerHTMLProps = ComponentPropsWithRef<'input'>;
-type FilePickerBaseProps = Omit<FilePickerHTMLProps, 'type'>;
-export type SelectFilesHandler = (files: File[]) => void;
-export type FilePickerProps = FilePickerBaseProps & {
+import { type ComponentProps, type ReactNode } from 'react';
+export type FilePickerSelectFilesHandler = (files: File[]) => void;
+type FilePickerHTMLProps = ComponentProps<'input'>;
+type FilePickerBaseProps = {
     label: ReactNode;
     icon?: ReactNode;
     caption?: ReactNode;
     buttonLabel?: ReactNode;
-    onSelectFiles?: SelectFilesHandler;
+    onSelectFiles?: FilePickerSelectFilesHandler;
 };
-export declare const FilePicker: import("react").ForwardRefExoticComponent<Omit<FilePickerProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export type FilePickerProps = FilePickerBaseProps & Omit<FilePickerHTMLProps, (keyof FilePickerBaseProps) | 'type'>;
+export declare function FilePicker({ ref, label, icon, caption, buttonLabel, id, style, className, disabled, onSelectFiles, ...props }: FilePickerProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/file-picker/file-picker.js

@@ -1,15 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useId, useRef, useState, } from 'react';
-import { classNames, mergeRefs } from '../../lib/react-helpers.js';
+import { useId, useRef, useState, } from 'react';
+import { classNames } from '../../lib/react-helpers.js';
 import { Button } from '../button/index.js';
-export const FilePicker = forwardRef(function FilePicker({ label, icon, caption, buttonLabel = 'Browse', id, style, className, disabled, onSelectFiles, ...props }, ref) {
+export function FilePicker({ ref, label, icon, caption, buttonLabel = 'Browse', id, style, className, disabled, onSelectFiles, ...props }) {
     const defaultId = useId();
     const inputId = id || defaultId;
     const inputRef = useRef(null);
     const [draggingOver, setDraggingOver] = useState(false);
+    const selectFiles = (files) => {
+        if (typeof onSelectFiles === 'function') {
+            onSelectFiles(files ? Array.from(files) : []);
+        }
+    };
     const handleChange = (event) => {
-        const fileList = event.target.files;
-        onSelectFiles?.(fileList ? Array.from(fileList) : []);
+        selectFiles(event.target.files);
     };
     const handleDragOver = (event) => {
         event.preventDefault();
@@ -30,12 +34,24 @@ export const FilePicker = forwardRef(function FilePicker({ label, icon, caption,
         event.stopPropagation();
         if (!disabled) {
             setDraggingOver(false);
-            const fileList = event.dataTransfer.files;
-            onSelectFiles?.(fileList ? Array.from(fileList) : []);
+            selectFiles(event.dataTransfer.files);
         }
     };
     return (_jsxs("div", { style: style, className: 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: [_jsx("input", { ...props, id: inputId, ref: mergeRefs(ref, inputRef), className: "dc-file-picker__input", type: "file", disabled: disabled, onChange: handleChange }), _jsxs("div", { className: "dc-file-picker__body", children: [Boolean(icon) && (_jsx("div", { className: "dc-file-picker__icon", children: icon })), _jsxs("div", { children: [_jsx("label", { className: "dc-file-picker__label", htmlFor: inputId, children: label }), Boolean(caption) && (_jsx("div", { className: "dc-file-picker__caption", children: caption }))] })] }), _jsx(Button, { className: "dc-file-picker__button", onClick: () => inputRef.current?.click(), children: buttonLabel })] }));
-});
+        }), onDragOver: handleDragOver, onDragLeave: handleDragEnd, onDrop: handleDrop, "data-testid": "file-picker", children: [_jsx("input", { ...props, id: inputId, ref: (el) => {
+                    inputRef.current = el;
+                    if (typeof ref === 'function') {
+                        ref(el);
+                    }
+                    else if (ref) {
+                        ref.current = el;
+                    }
+                }, className: "dc-file-picker__input", type: "file", disabled: disabled, onChange: handleChange }), _jsxs("div", { className: "dc-file-picker__body", children: [Boolean(icon) && (_jsx("div", { className: "dc-file-picker__icon", children: icon })), _jsxs("div", { children: [_jsx("label", { className: "dc-file-picker__label", htmlFor: inputId, children: label }), Boolean(caption) && (_jsx("div", { className: "dc-file-picker__caption", children: caption }))] })] }), _jsx(Button, { className: "dc-file-picker__button", onClick: () => {
+                    if (inputRef.current instanceof HTMLInputElement) {
+                        inputRef.current.click();
+                    }
+                }, children: buttonLabel })] }));
+}
+//# sourceMappingURL=file-picker.js.map

package/dist/components/file-picker/file-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-picker.js","sourceRoot":"","sources":["../../../src/components/file-picker/file-picker.tsx"],"names":[],"mappings":"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"}

package/dist/components/file-picker/index.js

@@ -1 +1,2 @@
 export * from './file-picker.js';
+//# sourceMappingURL=index.js.map

package/dist/components/file-picker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/file-picker/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}

package/dist/components/filter-buttons/filter-button.d.ts

@@ -1,7 +1,8 @@
-import { ComponentPropsWithRef } from 'react';
-type FilterButtonHTMLProps = ComponentPropsWithRef<'button'>;
-export type FilterButtonProps = {
+import { type ComponentProps } from 'react';
+type FilterButtonHTMLProps = ComponentProps<'button'>;
+type FilterButtonBaseProps = {
     isActive?: boolean;
-} & FilterButtonHTMLProps;
-export declare const FilterButton: import("react").ForwardRefExoticComponent<Omit<FilterButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+};
+export type FilterButtonProps = FilterButtonBaseProps & Omit<FilterButtonHTMLProps, keyof FilterButtonBaseProps>;
+export declare function FilterButton({ ref, isActive, 'aria-pressed': ariaPressed, className, children, ...props }: FilterButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/filter-buttons/filter-button.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import {} from 'react';
 import { classNames } from '../../lib/react-helpers.js';
-export const FilterButton = forwardRef(function FilterButton({ isActive = false, 'aria-pressed': ariaPressed = isActive, className, children, ...props }, ref) {
+export function FilterButton({ ref, isActive = false, 'aria-pressed': ariaPressed = isActive, className, children, ...props }) {
     return (_jsx("button", { ...props, ref: ref, className: classNames('dc-filter-button', isActive && 'active', className), "data-active": isActive, "aria-pressed": ariaPressed, children: children }));
-});
+}
+//# sourceMappingURL=filter-button.js.map

package/dist/components/filter-buttons/filter-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-button.js","sourceRoot":"","sources":["../../../src/components/filter-buttons/filter-button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuB,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAYxD,MAAM,UAAU,YAAY,CAAC,EAC3B,GAAG,EACH,QAAQ,GAAG,KAAK,EAChB,cAAc,EAAE,WAAW,GAAG,QAAQ,EACtC,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACU;IAClB,OAAO,CACL,oBACM,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CACnB,kBAAkB,EAClB,QAAQ,IAAI,QAAQ,EACpB,SAAS,CACV,iBACY,QAAQ,kBACP,WAAW,YAExB,QAAQ,GACF,CACV,CAAC;AACJ,CAAC"}

package/dist/components/filter-buttons/filter-buttons.css

@@ -1,10 +1,12 @@
 .dc-filter-buttons {
-  --dc-filter-button-text-color: var(--dc-button-gray-tinted-text-color);
-  --dc-filter-button-bg: var(--dc-button-gray-tinted-bg);
-  --dc-filter-button-bg-hover: var(--dc-button-gray-tinted-bg-hover);
-  --dc-filter-button-text-color-active: var(--dc-button-blue-text-color);
-  --dc-filter-button-bg-active: var(--dc-button-blue-bg);
-  --dc-filter-button-bg-active-hover: var(--dc-button-blue-bg-hover);
+  --color: var(--dc-neutral-900);
+  --color-active: var(--dc-white);
+  --background: rgb(var(--dc-neutral-900-rgb) / 5%);
+  --background-hover: rgb(var(--dc-neutral-900-rgb) / 10%);
+  --background-active: var(--dc-blue-500);
+  --background-active-hover: var(--dc-blue-600);
+  --focus-ring-color: var(--dc-neutral-900);
+  --focus-ring-color-active: var(--dc-white);
 
   position: relative;
   display: flex;
@@ -26,34 +28,57 @@
   height: 28px;
   padding: 0 8px;
   font: var(--dc-text-sm);
-  color: var(--dc-filter-button-text-color);
+  color: var(--color);
   white-space: nowrap;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
-  background: var(--dc-filter-button-bg);
+  background: var(--background);
   border: 1px solid transparent;
   border-radius: 7px;
   transition-duration: 0.2s;
   transition-property: color, background-color;
 }
 
+.dc-filter-button:focus {
+  outline: none;
+}
+
+.dc-filter-button:focus-visible {
+  outline: 1px solid var(--focus-ring-color);
+  outline-offset: -2px;
+}
+
 .dc-filter-button:hover {
-  background: var(--dc-filter-button-bg-hover);
+  background: var(--background-hover);
 }
 
 .dc-filter-button.active,
 .dc-filter-button[aria-pressed="true"] {
-  color: var(--dc-filter-button-text-color-active);
-  background: var(--dc-filter-button-bg-active);
+  color: var(--color-active);
+  background: var(--background-active);
 }
 
 .dc-filter-button.active:hover,
 .dc-filter-button[aria-pressed="true"]:hover {
-  background: var(--dc-filter-button-bg-active-hover);
+  background: var(--background-active-hover);
+}
+
+.dc-filter-button.active:focus-visible,
+.dc-filter-button[aria-pressed="true"]:focus-visible {
+  outline-color: var(--focus-ring-color-active);
 }
 
 .dark .dc-filter-buttons,
 .dark.dc-filter-buttons {
+  --color: var(--dc-white);
+  --color-active: var(--dc-white);
+  --background: rgb(var(--dc-neutral-50-rgb) / 20%);
+  --background-hover: rgb(var(--dc-neutral-50-rgb) / 30%);
+  --background-active: var(--dc-blue-500);
+  --background-active-hover: var(--dc-blue-400);
+  --focus-ring-color: var(--dc-white);
+  --focus-ring-color-active: var(--dc-white);
+
   color-scheme: dark;
 }

package/dist/components/filter-buttons/filter-buttons.d.ts

@@ -1,5 +1,5 @@
-import { ComponentPropsWithoutRef } from 'react';
-type FilterButtonsHTMLProps = ComponentPropsWithoutRef<'div'>;
+import { type ComponentProps } from 'react';
+type FilterButtonsHTMLProps = ComponentProps<'div'>;
 export type FilterButtonsProps = FilterButtonsHTMLProps;
 export declare function FilterButtons({ className, children, ...props }: FilterButtonsProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/filter-buttons/filter-buttons.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useLayoutEffect, useRef } from 'react';
-import { assertIfNullable } from '../../lib/helpers.js';
+import { assertNullOrUndefined } from '../../lib/helpers.js';
 import { classNames } from '../../lib/react-helpers.js';
 export function FilterButtons({ className, children, ...props }) {
     const ref = useRef(null);
     useLayoutEffect(() => {
         const el = ref.current;
-        assertIfNullable(el, 'FilterButtons ref was not set');
+        assertNullOrUndefined(el, 'FilterButtons ref was not set');
         for (const child of el.children) {
             if (child instanceof HTMLButtonElement
                 && child.dataset.active === 'true') {
@@ -20,3 +20,4 @@ export function FilterButtons({ className, children, ...props }) {
     }, []);
     return (_jsx("div", { ...props, ref: ref, role: "group", className: classNames(className, 'dc-filter-buttons'), children: children }));
 }
+//# sourceMappingURL=filter-buttons.js.map

package/dist/components/filter-buttons/filter-buttons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-buttons.js","sourceRoot":"","sources":["../../../src/components/filter-buttons/filter-buttons.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuB,eAAe,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAMxD,MAAM,UAAU,aAAa,CAAC,EAC5B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACW;IACnB,MAAM,GAAG,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAEhD,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,EAAE,GAAG,GAAG,CAAC,OAAO,CAAC;QACvB,qBAAqB,CAAC,EAAE,EAAE,+BAA+B,CAAC,CAAC;QAE3D,KAAK,MAAM,KAAK,IAAI,EAAE,CAAC,QAAQ,EAAE,CAAC;YAChC,IACE,KAAK,YAAY,iBAAiB;mBAC/B,KAAK,CAAC,OAAO,CAAC,MAAM,KAAK,MAAM,EAClC,CAAC;gBACD,MAAM,MAAM,GAAG,EAAE,CAAC,WAAW,GAAG,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC,UAAU,CAAC;gBACrE,IAAI,MAAM,GAAG,CAAC,EAAE,CAAC;oBACf,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC;gBACnC,CAAC;gBACD,MAAM;YACR,CAAC;QACH,CAAC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,iBACM,KAAK,EACT,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,mBAAmB,CAAC,YAEpD,QAAQ,GACL,CACP,CAAC;AACJ,CAAC"}

package/dist/components/filter-buttons/index.js

@@ -1,2 +1,3 @@
 export * from './filter-buttons.js';
 export * from './filter-button.js';
+//# sourceMappingURL=index.js.map

package/dist/components/filter-buttons/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/filter-buttons/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC"}

package/dist/components/filtered-search/filter-item.css

@@ -23,7 +23,7 @@
 
 .dc-filter-form__buttons {
   display: flex;
-  gap: 4px;
+  gap: 8px;
   align-items: center;
   justify-content: flex-end;
   margin-top: 16px;

package/dist/components/filtered-search/filter-item.d.ts

@@ -1,4 +1,4 @@
-import { Filter } from './types.js';
+import { type Filter } from './types.js';
 export type FilterItemProps = {
     filter: Filter;
     isEditing: boolean;

package/dist/components/filtered-search/filter-item.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import {} from './types.js';
 import { StringFilter } from './model/string-filter.js';
 import { StringSetFilter } from './model/string-set-filter.js';
-import { exhaustiveCheck } from '../../lib/index.js';
+import { exhaustiveCheck } from '../../lib/helpers.js';
 import { StringFilterItem } from './string-filter-item.js';
 import { StringSetFilterItem } from './string-set-filter-item.js';
 export function FilterItem({ filter, isEditing, onEditStart, onEditCancel, onRemove, onChange, }) {
@@ -15,3 +16,4 @@ export function FilterItem({ filter, isEditing, onEditStart, onEditCancel, onRem
             exhaustiveCheck(filterType, `Unable to render filter type ${filterType}.`);
     }
 }
+//# sourceMappingURL=filter-item.js.map

package/dist/components/filtered-search/filter-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-item.js","sourceRoot":"","sources":["../../../src/components/filtered-search/filter-item.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAe,MAAM,YAAY,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAWlE,MAAM,UAAU,UAAU,CAAC,EACzB,MAAM,EACN,SAAS,EACT,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,QAAQ,GACQ;IAChB,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC;IAC/B,QAAQ,UAAU,EAAE,CAAC;QACnB,KAAK,YAAY,CAAC,IAAI;YACpB,OAAO,CACL,KAAC,gBAAgB,IACf,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,GAClB,CACH,CAAC;QACJ,KAAK,eAAe,CAAC,IAAI;YACvB,OAAO,CACL,KAAC,mBAAmB,IAClB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,GAClB,CACH,CAAC;QACJ;YACE,eAAe,CAAC,UAAU,EAAE,gCAAgC,UAAU,GAAG,CAAC,CAAC;IAC/E,CAAC;AACH,CAAC"}

package/dist/components/filtered-search/filter-operator-select.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { classNames } from '../../lib/index.js';
+import { classNames } from '../../lib/react-helpers.js';
 import { Select } from '../select/index.js';
 export function FilterOperatorSelect({ accessibleName, className, label, values, value, onChange, formatValue, }) {
     const shouldRenderSelect = values.length > 1;
@@ -10,3 +10,4 @@ export function FilterOperatorSelect({ accessibleName, className, label, values,
                     ? label
                     : `${label} ${formatValue(value)}` }), shouldRenderSelect && (_jsx(Select, { size: "sm", "data-testid": "filter-operator-select", "aria-label": accessibleName, value: value, onChangeValue: onValueChanged, children: values.map((value) => (_jsx("option", { value: value, children: formatValue(value) }, value))) }))] }));
 }
+//# sourceMappingURL=filter-operator-select.js.map

package/dist/components/filtered-search/filter-operator-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-operator-select.js","sourceRoot":"","sources":["../../../src/components/filtered-search/filter-operator-select.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAY5C,MAAM,UAAU,oBAAoB,CAAmB,EACrD,cAAc,EACd,SAAS,EACT,KAAK,EACL,MAAM,EACN,KAAK,EACL,QAAQ,EACR,WAAW,GACkB;IAC7B,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;IAC7C,MAAM,cAAc,GAAG,CAAC,QAAgB,EAAE,EAAE;QAC1C,QAAQ,CAAC,QAAa,CAAC,CAAC;IAC1B,CAAC,CAAC;IACF,OAAO,CACL,eAAK,SAAS,EAAE,UAAU,CAAC,2BAA2B,EAAE,SAAS,CAAC,aAChE,yBACG,kBAAkB;oBACjB,CAAC,CAAC,KAAK;oBACP,CAAC,CAAC,GAAG,KAAK,IAAI,WAAW,CAAC,KAAK,CAAC,EAAE,GAC/B,EACN,kBAAkB,IAAI,CACrB,KAAC,MAAM,IACL,IAAI,EAAC,IAAI,iBACG,wBAAwB,gBACxB,cAAc,EAC1B,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,cAAc,YAE5B,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACrB,iBAAoB,KAAK,EAAE,KAAK,YAC7B,WAAW,CAAC,KAAK,CAAC,IADR,KAAK,CAET,CACV,CAAC,GACK,CACV,IACG,CACP,CAAC;AACJ,CAAC"}

package/dist/components/filtered-search/filter-token.css

@@ -2,14 +2,14 @@
   display: inline-flex;
   align-items: center;
   min-width: 0;
-  color: var(--dc-filtered-search-token-color);
-  background: var(--dc-filtered-search-token-bg);
+  color: var(--token-color);
+  background: var(--token-background);
   border-radius: 6px;
 }
 
 .dc-filter-token_highlighted {
-  color: var(--dc-filtered-search-token-color-selected);
-  background: var(--dc-filtered-search-token-bg-selected);
+  color: var(--token-color-selected);
+  background: var(--token-background-selected);
 }
 
 .dc-filter-token__label,
@@ -28,8 +28,8 @@
   max-width: 100%;
   padding: 0 4px 0 8px;
   overflow: hidden;
-  line-height: 28px;
   text-overflow: ellipsis;
+  line-height: 28px;
   white-space: nowrap;
   border-top-left-radius: inherit;
   border-bottom-left-radius: inherit;
@@ -47,13 +47,13 @@
 
 .dc-filter-token__label:focus,
 .dc-filter-token__button:focus {
-  background: var(--dc-filtered-search-token-bg-hover);
   outline: none;
+  background: var(--token-background-hover);
 }
 
 .dc-filter-token__label:hover,
 .dc-filter-token__button:hover {
-  background: var(--dc-filtered-search-token-bg-hover) !important;
+  background: var(--token-background-hover) !important;
 }
 
 .dc-filter-token__label:focus:not(:focus-visible),

package/dist/components/filtered-search/filter-token.d.ts

@@ -1,9 +1,12 @@
-import { MouseEventHandler, ReactNode } from 'react';
-export type FilterTokenProps = {
+import { type ComponentProps, type MouseEventHandler, type ReactNode } from 'react';
+type FilterTokenHTMLProps = ComponentProps<'div'>;
+type FilterTokenBaseProps = {
     className?: string;
     isHighlighted?: boolean;
     children: ReactNode;
     onClickLabel?: MouseEventHandler<HTMLSpanElement>;
     onClickCloseButton?: MouseEventHandler<HTMLButtonElement>;
 };
-export declare const FilterToken: import("react").ForwardRefExoticComponent<FilterTokenProps & import("react").RefAttributes<HTMLDivElement>>;
+export type FilterTokenProps = FilterTokenBaseProps & Omit<FilterTokenHTMLProps, keyof FilterTokenBaseProps>;
+export declare function FilterToken({ ref, className, isHighlighted, children, onClickLabel, onClickCloseButton, }: FilterTokenProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/filtered-search/filter-token.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { classNames } from '../../lib/index.js';
+import {} from 'react';
+import { classNames } from '../../lib/react-helpers.js';
 import { useTranslations } from './use-translations.js';
 import { XMarkIcon } from '../hero-icons/24/outline/x-mark-icon.js';
-export const FilterToken = forwardRef(function FilterToken({ className, isHighlighted, children, onClickLabel, onClickCloseButton, }, ref) {
+export function FilterToken({ ref, className, isHighlighted, children, onClickLabel, onClickCloseButton, }) {
     const { removeFilterButton } = useTranslations();
     return (_jsxs("div", { ref: ref, "data-testid": "filter-token", className: classNames(className, {
             'dc-filter-token': true,
             'dc-filter-token_highlighted': isHighlighted,
         }), children: [_jsx("button", { className: "dc-filter-token__label", onClick: onClickLabel, children: children }), _jsx("button", { className: "dc-filter-token__button", type: "button", "aria-label": removeFilterButton, onClick: onClickCloseButton, children: _jsx(XMarkIcon, { width: 16, height: 16 }) })] }));
-});
+}
+//# sourceMappingURL=filter-token.js.map

package/dist/components/filtered-search/filter-token.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-token.js","sourceRoot":"","sources":["../../../src/components/filtered-search/filter-token.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA+D,MAAM,OAAO,CAAC;AACpF,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAgBpE,MAAM,UAAU,WAAW,CAAC,EAC1B,GAAG,EACH,SAAS,EACT,aAAa,EACb,QAAQ,EACR,YAAY,EACZ,kBAAkB,GACD;IACjB,MAAM,EAAE,kBAAkB,EAAE,GAAG,eAAe,EAAE,CAAC;IACjD,OAAO,CACL,eACE,GAAG,EAAE,GAAG,iBACI,cAAc,EAC1B,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE;YAC/B,iBAAiB,EAAE,IAAI;YACvB,6BAA6B,EAAE,aAAa;SAC7C,CAAC,aAEF,iBAAQ,SAAS,EAAC,wBAAwB,EAAC,OAAO,EAAE,YAAY,YAC7D,QAAQ,GACF,EACT,iBACE,SAAS,EAAC,yBAAyB,EACnC,IAAI,EAAC,QAAQ,gBACD,kBAAkB,EAC9B,OAAO,EAAE,kBAAkB,YAE3B,KAAC,SAAS,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,GAC7B,IACL,CACP,CAAC;AACJ,CAAC"}

package/dist/components/filtered-search/filter-value-list.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from '../../lib/index.js';
+import {} from 'react';
+import { classNames } from '../../lib/react-helpers.js';
 import { SelectionControl } from '../selection-control/index.js';
 import { Checkbox } from '../checkbox/index.js';
 export function FilterValueList({ className, values, checkedValues, onChangeCheckedValues, formatValue, }) {
@@ -13,3 +14,4 @@ export function FilterValueList({ className, values, checkedValues, onChangeChec
     };
     return (_jsx("ul", { className: classNames('dc-filter-value-list', className), children: values.map((value) => (_jsx("li", { children: _jsx(SelectionControl, { label: formatValue(value), children: _jsx(Checkbox, { value: value, checked: checkedValues.includes(value), onChange: onChange }) }) }, value))) }));
 }
+//# sourceMappingURL=filter-value-list.js.map

package/dist/components/filtered-search/filter-value-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-value-list.js","sourceRoot":"","sources":["../../../src/components/filtered-search/filter-value-list.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAUhD,MAAM,UAAU,eAAe,CAAC,EAC9B,SAAS,EACT,MAAM,EACN,aAAa,EACb,qBAAqB,EACrB,WAAW,GACU;IACrB,MAAM,QAAQ,GAAyC,CAAC,KAAK,EAAE,EAAE;QAC/D,MAAM,eAAe,GAAG,KAAK,CAAC,aAAa,CAAC;QAC5C,MAAM,KAAK,GAAG,eAAe,CAAC,KAAK,CAAC;QACpC,MAAM,OAAO,GAAG,eAAe,CAAC,OAAO,CAAC;QACxC,qBAAqB,CAAC,OAAO;YAC3B,CAAC,CAAC,CAAC,GAAG,aAAa,EAAE,KAAK,CAAC;YAC3B,CAAC,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC;IAChE,CAAC,CAAC;IAEF,OAAO,CACL,aAAI,SAAS,EAAE,UAAU,CAAC,sBAAsB,EAAE,SAAS,CAAC,YACzD,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACrB,uBACE,KAAC,gBAAgB,IAAC,KAAK,EAAE,WAAW,CAAC,KAAK,CAAC,YACzC,KAAC,QAAQ,IACP,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,EACtC,QAAQ,EAAE,QAAQ,GAClB,GACe,IAPZ,KAAK,CAQT,CACN,CAAC,GACC,CACN,CAAC;AACJ,CAAC"}