draft-components 3.2.1 → 3.4.0

package/css/draft-components.css

@@ -2056,6 +2056,192 @@
   color-scheme: dark;
 }
 
+.dc-search-select-button-label {
+  display: inline-flex;
+  gap: 0.5em;
+  align-items: center;
+}
+
+.dc-search-select-button-label > b {
+  font-weight: 700;
+}
+
+.dc-search-select-option {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 28px;
+  padding: 4px 8px;
+  font-size: 14px;
+  line-height: 1.25;
+  color: inherit;
+  cursor: default;
+  border-radius: 5px;
+}
+
+.dc-search-select-option_highlighted {
+  color: var(--dc-control-primary-text-color);
+  background: var(--dc-control-bg-inset);
+}
+
+.dc-search-select-option_selected {
+  color: var(--dc-control-on-primary-color);
+  background: var(--dc-control-primary-color);
+}
+
+.dc-search-select-option__caption {
+  font-size: 80%;
+  opacity: 0.75;
+}
+
+.dc-search-select-separator {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 8px 0;
+}
+
+.dc-search-select-separator::before,
+.dc-search-select-separator::after {
+  display: block;
+  height: 1px;
+  content: '';
+  background: var(--dc-control-bg-inset);
+}
+
+.dc-search-select-separator::before {
+  flex-shrink: 0;
+  width: 12px;
+}
+
+.dc-search-select-separator::after {
+  flex-grow: 1;
+}
+
+.dc-search-select-separator__label {
+  padding: 0 8px;
+  font-size: 12px;
+  color: var(--dc-control-secondary-text-color);
+}
+
+.dc-search-select {
+  --dc-search-select-font-size: 14px;
+  --dc-search-select-text-color: var(--dc-control-primary-text-color);
+  --dc-search-select-height: 36px;
+  --dc-search-select-padding-x: 12px;
+  --dc-search-select-radius: 7px;
+  --dc-search-select-border-color: var(--dc-control-border-color);
+  --dc-search-select-border-color-error: var(--dc-control-error-color);
+  --dc-search-select-bg: var(--dc-control-bg);
+  --dc-search-select-focus-ring-color: var(--dc-control-primary-color);
+
+  position: relative;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+  height: var(--dc-search-select-height);
+  padding: 0 var(--dc-search-select-padding-x);
+  padding-right: calc(var(--dc-search-select-height) + 0.15em);
+  font-family: var(--dc-primary-font);
+  font-size: var(--dc-search-select-font-size);
+  font-weight: 400;
+  line-height: 1.25;
+  color: var(--dc-search-select-text-color);
+  vertical-align: middle;
+  color-scheme: light;
+  background: var(--dc-search-select-bg);
+  border: 1px solid var(--dc-search-select-border-color);
+  border-radius: var(--dc-search-select-radius);
+}
+
+.dc-search-select:focus {
+  border-color: var(--dc-search-select-focus-ring-color);
+  box-shadow: 0 0 0 1px var(--dc-search-select-focus-ring-color);
+}
+
+.dc-search-select_loading,
+.dc-search-select_disabled {
+  pointer-events: none;
+}
+
+.dc-search-select_disabled {
+  opacity: var(--dc-disabled-state-opacity);
+}
+
+.dc-search-select_invalid {
+  border-color: var(--dc-search-select-border-color-error);
+}
+
+.dc-search-select_full-width {
+  display: flex;
+  width: 100%;
+}
+
+.dc-search-select_size_sm {
+  --dc-search-select-font-size: 13px;
+  --dc-search-select-height: 32px;
+  --dc-search-select-padding-x: 8px;
+  --dc-search-select-radius: 6px;
+}
+
+.dc-search-select_size_lg {
+  --dc-search-select-font-size: 15px;
+  --dc-search-select-height: 40px;
+  --dc-search-select-padding-x: 16px;
+  --dc-search-select-radius: 8px;
+}
+
+.dc-search-select__slot-right {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: var(--dc-search-select-height);
+  height: var(--dc-search-select-height);
+  pointer-events: none;
+}
+
+.dc-search-select__arrow {
+  transform: translateY(5%);
+}
+
+.dc-search-select__popover {
+  --dc-search-select-popover-padding: 8px;
+  --dc-search-select-popover-radius: 8px;
+
+  padding: 0;
+  padding-bottom: var(--dc-search-select-popover-padding);
+  border-radius: var(--dc-search-select-popover-radius);
+}
+
+.dc-search-select__textbox {
+  padding: var(--dc-search-select-popover-padding);
+}
+
+.dc-search-select__listbox {
+  max-height: 352px;
+  padding: 0 var(--dc-search-select-popover-padding);
+  margin: 0;
+  overflow-y: auto;
+  list-style: none;
+  border-bottom-right-radius: inherit;
+  border-bottom-left-radius: inherit;
+}
+
+.dc-search-select__listbox > [role="option"] + [role="option"] {
+  margin-top: 2px;
+}
+
+.dark .dc-search-select,
+.dark.dc-search-select {
+  color-scheme: dark;
+}
+
 .dc-switch {
   --dc-switch-width: 38px;
   --dc-switch-height: 24px;
@@ -3178,8 +3364,7 @@
   height: 1px;
   overflow: hidden;
   clip: rect(0 0 0 0);
-  -webkit-clip-path: inset(50%);
-          clip-path: inset(50%);
+  clip-path: inset(50%);
   white-space: nowrap;
 }
 

package/dist/components/button/icon-button.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ButtonProps } from './button.js';
 export type IconButtonProps = Omit<ButtonProps, 'caption' | 'iconLeft' | 'iconRight'>;
 export declare const IconButton: import("react").ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -45,8 +45,7 @@
   height: 1px;
   overflow: hidden;
   clip: rect(0 0 0 0);
-  -webkit-clip-path: inset(50%);
-          clip-path: inset(50%);
+  clip-path: inset(50%);
   white-space: nowrap;
 }
 

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

@@ -10,6 +10,6 @@ export type StringSetFilterItemProps = {
 export declare function StringSetFilterItem({ filter, isEditing, onEditStart, onEditCancel, onRemove, onChange, }: StringSetFilterItemProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace StringSetFilterItem {
     var defaultValueFormatter: (value: string) => string;
-    var defaultValuesFormatter: (values: string[]) => string;
+    var defaultValuesFormatter: (values: StringSetFilter["value"]) => string;
     var defaultOperatorFormatter: (operator: StringSetFilterOperator) => string;
 }

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

@@ -1,4 +1,3 @@
-/// <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?: ((instance: SVGSVGElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<SVGSVGElement> | null | undefined;
 }, "ref"> & import("react").RefAttributes<SVGSVGElement>>;

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

@@ -1,4 +1,3 @@
-/// <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?: ((instance: SVGSVGElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<SVGSVGElement> | null | undefined;
 }, "ref"> & import("react").RefAttributes<SVGSVGElement>>;

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

@@ -1,4 +1,3 @@
-/// <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?: ((instance: SVGSVGElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<SVGSVGElement> | null | undefined;
 }, "ref"> & import("react").RefAttributes<SVGSVGElement>>;

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

@@ -1,4 +1,3 @@
-/// <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?: ((instance: SVGSVGElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<SVGSVGElement> | null | undefined;
 }, "ref"> & import("react").RefAttributes<SVGSVGElement>>;

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

@@ -1,4 +1,3 @@
-/// <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?: ((instance: SVGSVGElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<SVGSVGElement> | null | undefined;
 }, "ref"> & import("react").RefAttributes<SVGSVGElement>>;

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

@@ -1,4 +1,3 @@
-/// <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?: ((instance: SVGSVGElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<SVGSVGElement> | null | undefined;
 }, "ref"> & import("react").RefAttributes<SVGSVGElement>>;

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

@@ -1,4 +1,3 @@
-/// <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?: ((instance: SVGSVGElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<SVGSVGElement> | null | undefined;
 }, "ref"> & import("react").RefAttributes<SVGSVGElement>>;

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

@@ -1,4 +1,3 @@
-/// <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?: ((instance: SVGSVGElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<SVGSVGElement> | null | undefined;
 }, "ref"> & import("react").RefAttributes<SVGSVGElement>>;

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

@@ -1,4 +1,3 @@
-/// <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?: ((instance: SVGSVGElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<SVGSVGElement> | null | undefined;
 }, "ref"> & import("react").RefAttributes<SVGSVGElement>>;

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

@@ -1,4 +1,3 @@
-/// <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?: ((instance: SVGSVGElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<SVGSVGElement> | null | undefined;
 }, "ref"> & import("react").RefAttributes<SVGSVGElement>>;

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

@@ -1,4 +1,3 @@
-/// <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?: ((instance: SVGSVGElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<SVGSVGElement> | null | undefined;
 }, "ref"> & import("react").RefAttributes<SVGSVGElement>>;

package/dist/components/index.d.ts

@@ -24,6 +24,7 @@ export * from './popover/index.js';
 export * from './portal/index.js';
 export * from './positioner/index.js';
 export * from './radio/index.js';
+export * from './search-select/index.js';
 export * from './segmented-control/index.js';
 export * from './select/index.js';
 export * from './selection-control/index.js';

package/dist/components/index.js

@@ -24,6 +24,7 @@ export * from './popover/index.js';
 export * from './portal/index.js';
 export * from './positioner/index.js';
 export * from './radio/index.js';
+export * from './search-select/index.js';
 export * from './segmented-control/index.js';
 export * from './select/index.js';
 export * from './selection-control/index.js';

package/dist/components/popover/popover.d.ts

@@ -34,18 +34,18 @@ export type PopoverProps = {
     onClose?: PopoverCloseCallback;
 } & PopoverHTMLProps;
 export declare const Popover: import("react").ForwardRefExoticComponent<{
-    defaultIsOpen?: boolean | undefined;
-    isOpen?: boolean | undefined;
-    shouldTrapFocus?: boolean | undefined;
-    shouldFocusAnchorAfterEscPress?: boolean | undefined;
-    transitionDurationMs?: number | undefined;
-    anchorGap?: number | undefined;
-    viewportGap?: number | undefined;
+    defaultIsOpen?: boolean;
+    isOpen?: boolean;
+    shouldTrapFocus?: boolean;
+    shouldFocusAnchorAfterEscPress?: boolean;
+    transitionDurationMs?: number;
+    anchorGap?: number;
+    viewportGap?: number;
     placement?: PopoverPlacement;
     alignment?: PopoverAlignment;
     anchor: ReactNode | PopoverAnchorRenderFn;
     children: ReactNode;
-    onOpen?: PopoverOpenCallback | undefined;
-    onClose?: PopoverCloseCallback | undefined;
+    onOpen?: PopoverOpenCallback;
+    onClose?: PopoverCloseCallback;
 } & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<PopoverRef>>;
 export {};

package/dist/components/search-select/context.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+export declare class OptionStore<T> {
+    private _map;
+    readonly idPrefix: string;
+    constructor(idPrefix?: string);
+    private _generateId;
+    get ids(): string[];
+    get values(): T[];
+    idOf(value: T): string | undefined;
+    append(value: T): string;
+    clear(): void;
+}
+export type SearchSelectContext<T> = {
+    options: OptionStore<T>;
+    selectedValue: T;
+    highlightedValue: T;
+    setSelectedValue: (value: T) => void;
+    setHighlightedValue: (value: T) => void;
+};
+export declare function useSearchSelectContext(): SearchSelectContext<any>;
+export declare function SearchSelectContextProvider<T>({ value, children, }: {
+    value: SearchSelectContext<T>;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/search-select/context.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+export class OptionStore {
+    _map;
+    idPrefix;
+    constructor(idPrefix = '') {
+        this._map = new Map();
+        this.idPrefix = idPrefix;
+    }
+    _generateId() {
+        const count = this._map.size;
+        return `${this.idPrefix}${count + 1}`;
+    }
+    get ids() {
+        return Array.from(this._map.values());
+    }
+    get values() {
+        return Array.from(this._map.keys());
+    }
+    idOf(value) {
+        return this._map.get(value);
+    }
+    append(value) {
+        let id = this._map.get(value);
+        if (id) {
+            return id;
+        }
+        id = this._generateId();
+        this._map.set(value, id);
+        return id;
+    }
+    clear() {
+        this._map.clear();
+    }
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const searchSelectContext = createContext(null);
+export function useSearchSelectContext() {
+    const ctx = useContext(searchSelectContext);
+    if (ctx === null) {
+        throw new Error('useSearchSelectContext must be used within SearchSelectContextProvider');
+    }
+    return ctx;
+}
+export function SearchSelectContextProvider({ value, children, }) {
+    return (_jsx(searchSelectContext.Provider, { value: value, children: children }));
+}

package/dist/components/search-select/icons.d.ts

@@ -0,0 +1,3 @@
+import { ComponentPropsWithoutRef } from 'react';
+export declare function MagnifyingGlass({ width, height, ...props }: ComponentPropsWithoutRef<'svg'>): import("react/jsx-runtime").JSX.Element;
+export declare function ChevronDown({ width, height, ...props }: ComponentPropsWithoutRef<'svg'>): import("react/jsx-runtime").JSX.Element;

package/dist/components/search-select/icons.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function MagnifyingGlass({ width = 24, height = 24, ...props }) {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", width: width, height: height, strokeWidth: 1.5, stroke: "currentColor", ...props, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" }) }));
+}
+export function ChevronDown({ width = 24, height = 24, ...props }) {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", width: width, height: height, strokeWidth: 1.5, stroke: "currentColor", ...props, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m19.5 8.25-7.5 7.5-7.5-7.5" }) }));
+}

package/dist/components/search-select/index.d.ts

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

package/dist/components/search-select/index.js

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

package/dist/components/search-select/search-select.css

@@ -0,0 +1,185 @@
+.dc-search-select-button-label {
+  display: inline-flex;
+  gap: 0.5em;
+  align-items: center;
+}
+
+.dc-search-select-button-label > b {
+  font-weight: 700;
+}
+
+.dc-search-select-option {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 28px;
+  padding: 4px 8px;
+  font-size: 14px;
+  line-height: 1.25;
+  color: inherit;
+  cursor: default;
+  border-radius: 5px;
+}
+
+.dc-search-select-option_highlighted {
+  color: var(--dc-control-primary-text-color);
+  background: var(--dc-control-bg-inset);
+}
+
+.dc-search-select-option_selected {
+  color: var(--dc-control-on-primary-color);
+  background: var(--dc-control-primary-color);
+}
+
+.dc-search-select-option__caption {
+  font-size: 80%;
+  opacity: 0.75;
+}
+
+.dc-search-select-separator {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 8px 0;
+}
+
+.dc-search-select-separator::before,
+.dc-search-select-separator::after {
+  display: block;
+  height: 1px;
+  content: '';
+  background: var(--dc-control-bg-inset);
+}
+
+.dc-search-select-separator::before {
+  flex-shrink: 0;
+  width: 12px;
+}
+
+.dc-search-select-separator::after {
+  flex-grow: 1;
+}
+
+.dc-search-select-separator__label {
+  padding: 0 8px;
+  font-size: 12px;
+  color: var(--dc-control-secondary-text-color);
+}
+
+.dc-search-select {
+  --dc-search-select-font-size: 14px;
+  --dc-search-select-text-color: var(--dc-control-primary-text-color);
+  --dc-search-select-height: 36px;
+  --dc-search-select-padding-x: 12px;
+  --dc-search-select-radius: 7px;
+  --dc-search-select-border-color: var(--dc-control-border-color);
+  --dc-search-select-border-color-error: var(--dc-control-error-color);
+  --dc-search-select-bg: var(--dc-control-bg);
+  --dc-search-select-focus-ring-color: var(--dc-control-primary-color);
+
+  position: relative;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+  height: var(--dc-search-select-height);
+  padding: 0 var(--dc-search-select-padding-x);
+  padding-right: calc(var(--dc-search-select-height) + 0.15em);
+  font-family: var(--dc-primary-font);
+  font-size: var(--dc-search-select-font-size);
+  font-weight: 400;
+  line-height: 1.25;
+  color: var(--dc-search-select-text-color);
+  vertical-align: middle;
+  color-scheme: light;
+  background: var(--dc-search-select-bg);
+  border: 1px solid var(--dc-search-select-border-color);
+  border-radius: var(--dc-search-select-radius);
+}
+
+.dc-search-select:focus {
+  border-color: var(--dc-search-select-focus-ring-color);
+  box-shadow: 0 0 0 1px var(--dc-search-select-focus-ring-color);
+}
+
+.dc-search-select_loading,
+.dc-search-select_disabled {
+  pointer-events: none;
+}
+
+.dc-search-select_disabled {
+  opacity: var(--dc-disabled-state-opacity);
+}
+
+.dc-search-select_invalid {
+  border-color: var(--dc-search-select-border-color-error);
+}
+
+.dc-search-select_full-width {
+  display: flex;
+  width: 100%;
+}
+
+.dc-search-select_size_sm {
+  --dc-search-select-font-size: 13px;
+  --dc-search-select-height: 32px;
+  --dc-search-select-padding-x: 8px;
+  --dc-search-select-radius: 6px;
+}
+
+.dc-search-select_size_lg {
+  --dc-search-select-font-size: 15px;
+  --dc-search-select-height: 40px;
+  --dc-search-select-padding-x: 16px;
+  --dc-search-select-radius: 8px;
+}
+
+.dc-search-select__slot-right {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: var(--dc-search-select-height);
+  height: var(--dc-search-select-height);
+  pointer-events: none;
+}
+
+.dc-search-select__arrow {
+  transform: translateY(5%);
+}
+
+.dc-search-select__popover {
+  --dc-search-select-popover-padding: 8px;
+  --dc-search-select-popover-radius: 8px;
+
+  padding: 0;
+  padding-bottom: var(--dc-search-select-popover-padding);
+  border-radius: var(--dc-search-select-popover-radius);
+}
+
+.dc-search-select__textbox {
+  padding: var(--dc-search-select-popover-padding);
+}
+
+.dc-search-select__listbox {
+  max-height: 352px;
+  padding: 0 var(--dc-search-select-popover-padding);
+  margin: 0;
+  overflow-y: auto;
+  list-style: none;
+  border-bottom-right-radius: inherit;
+  border-bottom-left-radius: inherit;
+}
+
+.dc-search-select__listbox > [role="option"] + [role="option"] {
+  margin-top: 2px;
+}
+
+.dark .dc-search-select,
+.dark.dc-search-select {
+  color-scheme: dark;
+}

package/dist/components/search-select/search-select.d.ts

@@ -0,0 +1,43 @@
+import { ReactNode } from 'react';
+type RenderLabelFn<Value> = (value: Value) => ReactNode;
+type RenderOptionsFn = (props: {
+    searchQuery: string;
+    searchQueryLowerCased: string;
+}) => ReactNode;
+export type SearchSelectSize = 'sm' | 'md' | 'lg';
+export type SearchSelectProps<Value> = {
+    className?: string;
+    size?: SearchSelectSize;
+    fullWidth?: boolean;
+    invalid?: boolean;
+    loading?: boolean;
+    disabled?: boolean;
+    textboxIcon?: ReactNode;
+    textboxAriaLabel?: string;
+    textboxPlaceholder?: string;
+    labelledBy?: string;
+    displayedValue?: ReactNode | RenderLabelFn<Value>;
+    children?: ReactNode | RenderOptionsFn;
+    value: Value;
+    onChange: (value: Value) => void;
+};
+export declare function SearchSelect<Value>({ className, size, fullWidth, invalid, loading, disabled, textboxIcon, textboxAriaLabel, textboxPlaceholder, labelledBy, displayedValue, children, value: selectedValue, onChange: onSelectedValueChange, }: SearchSelectProps<Value>): import("react/jsx-runtime").JSX.Element;
+export declare namespace SearchSelect {
+    var Option: <T>({ className, value, children, caption, }: {
+        className?: string;
+        value: T;
+        children: ReactNode;
+        caption?: ReactNode;
+    }) => import("react/jsx-runtime").JSX.Element;
+    var Separator: ({ className, children, }: {
+        className?: string;
+        children?: ReactNode;
+    }) => import("react/jsx-runtime").JSX.Element;
+    var ButtonLabel: ({ className, icon, value, children, }: {
+        className?: string;
+        icon?: ReactNode;
+        value: ReactNode;
+        children: ReactNode;
+    }) => import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/dist/components/search-select/search-select.js

@@ -0,0 +1,180 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState, useEffect, } from 'react';
+import { useSearchSelectContext, SearchSelectContextProvider, OptionStore, } from './context.js';
+import { classNames } from '../../lib/react-helpers.js';
+import { Popover } from '../popover/popover.js';
+import { TextInput } from '../text-input/text-input.js';
+import { Spinner } from '../spinner/spinner.js';
+import { ChevronDown, MagnifyingGlass } from './icons.js';
+export function SearchSelect({ className, size = 'md', fullWidth, invalid, loading, disabled, textboxIcon, textboxAriaLabel, textboxPlaceholder = '', labelledBy, displayedValue, children, value: selectedValue, onChange: onSelectedValueChange, }) {
+    const id = useId();
+    const buttonId = `${id}button`;
+    const textboxId = `${id}textbox`;
+    const listboxId = `${id}listbox`;
+    const [options] = useState(() => new OptionStore(`${id}option-`));
+    const [isOpen, setIsOpen] = useState(false);
+    const [searchQuery, setSearchQuery] = useState('');
+    const [highlightedValue, setHighlightedValue] = useState(selectedValue);
+    const openPopover = () => {
+        if (disabled || loading) {
+            return;
+        }
+        options.clear();
+        setSearchQuery('');
+        setHighlightedValue(selectedValue);
+        setIsOpen(true);
+        window.setTimeout(() => {
+            const textbox = window.document.getElementById(textboxId);
+            if (textbox) {
+                textbox.focus();
+            }
+        });
+    };
+    const closePopover = () => {
+        setIsOpen(false);
+        window.setTimeout(() => {
+            const button = window.document.getElementById(buttonId);
+            if (button) {
+                button.focus();
+            }
+        });
+    };
+    const setSelectedValue = (value) => {
+        onSelectedValueChange(value);
+        closePopover();
+    };
+    const handleButtonClick = () => {
+        if (isOpen) {
+            closePopover();
+        }
+        else {
+            openPopover();
+        }
+    };
+    const handleButtonKeyDown = (event) => {
+        let handled = false;
+        if (event.key === 'ArrowUp') {
+            handled = true;
+            openPopover();
+        }
+        else if (event.key === 'ArrowDown') {
+            handled = true;
+            openPopover();
+        }
+        if (handled) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    };
+    const handleTextboxChange = (event) => {
+        options.clear();
+        setSearchQuery(event.target.value);
+    };
+    const handleTextboxKeyDown = (event) => {
+        let handled = false;
+        if (event.key === 'ArrowUp') {
+            handled = true;
+            const values = options.values;
+            const index = values.indexOf(highlightedValue) - 1;
+            setHighlightedValue(index >= 0
+                ? values[index]
+                : values[values.length - 1]);
+        }
+        if (event.key === 'ArrowDown') {
+            handled = true;
+            const values = options.values;
+            const index = values.indexOf(highlightedValue) + 1;
+            setHighlightedValue(index < values.length
+                ? values[index]
+                : values[0]);
+        }
+        if (event.key === 'Home') {
+            handled = true;
+            const values = options.values;
+            setHighlightedValue(values[0]);
+        }
+        if (event.key === 'End') {
+            handled = true;
+            const values = options.values;
+            setHighlightedValue(values[values.length - 1]);
+        }
+        if (event.key === 'Enter') {
+            handled = true;
+            setSelectedValue(highlightedValue);
+        }
+        if (handled) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    };
+    useEffect(() => {
+        const optionId = options.idOf(highlightedValue);
+        if (!optionId) {
+            return;
+        }
+        const listbox = window.document.getElementById(listboxId);
+        const option = window.document.getElementById(optionId);
+        if (!listbox || !option) {
+            return;
+        }
+        const listboxRect = listbox.getBoundingClientRect();
+        const optionRect = option.getBoundingClientRect();
+        if (optionRect.top < listboxRect.top) {
+            listbox.scrollTo({
+                top: optionRect.top - listboxRect.top + listbox.scrollTop,
+            });
+        }
+        else if (optionRect.bottom > listboxRect.bottom) {
+            listbox.scrollTo({
+                top: optionRect.bottom - listboxRect.bottom + listbox.scrollTop,
+            });
+        }
+    }, [listboxId, options, highlightedValue]);
+    const ctx = {
+        options: options,
+        selectedValue,
+        highlightedValue,
+        setSelectedValue: setSelectedValue,
+        setHighlightedValue: setHighlightedValue,
+    };
+    return (_jsx(Popover, { className: "dc-search-select__popover", isOpen: isOpen, onClose: closePopover, anchor: (_jsxs("button", { className: classNames(className, {
+                'dc-search-select': true,
+                'dc-search-select_full-width': fullWidth,
+                'dc-search-select_invalid': invalid,
+                'dc-search-select_loading': loading,
+                'dc-search-select_disabled': disabled,
+                [`dc-search-select_size_${size}`]: size,
+            }), id: buttonId, "aria-expanded": isOpen, "aria-controls": listboxId, "aria-labelledby": labelledBy, tabIndex: disabled || loading ? -1 : undefined, type: "button", onClick: handleButtonClick, onKeyDown: handleButtonKeyDown, children: [typeof displayedValue === 'function'
+                    ? displayedValue(selectedValue)
+                    : displayedValue, _jsx("span", { className: "dc-search-select__slot-right", children: loading
+                        ? (_jsx(Spinner, { className: "dc-search-select__spinner", width: "1.05em", height: "1.05em" }))
+                        : (_jsx(ChevronDown, { className: "dc-search-select__arrow", width: "1.05em", height: "1.05em", strokeWidth: 2 })) })] })), alignment: "start", placement: "bottom", children: _jsxs(_Fragment, { children: [_jsx("div", { className: "dc-search-select__textbox", children: _jsx(TextInput, { id: textboxId, fullWidth: true, slotLeft: textboxIcon || _jsx(MagnifyingGlass, { width: 16, height: 16 }), placeholder: textboxPlaceholder, size: "sm", type: "text", role: "combobox", "aria-controls": listboxId, "aria-expanded": "true", "aria-autocomplete": "list", "aria-activedescendant": options.idOf(highlightedValue), "aria-label": textboxAriaLabel, value: searchQuery, onChange: handleTextboxChange, onKeyDown: handleTextboxKeyDown }) }), _jsx(SearchSelectContextProvider, { value: ctx, children: _jsx("ul", { className: "dc-search-select__listbox", id: listboxId, role: "listbox", children: typeof children === 'function'
+                            ? children({
+                                searchQuery,
+                                searchQueryLowerCased: searchQuery.toLowerCase(),
+                            })
+                            : children }) })] }) }));
+}
+SearchSelect.Option = function SearchSelectOption({ className, value, children, caption, }) {
+    const { options, selectedValue, highlightedValue, setSelectedValue, setHighlightedValue, } = useSearchSelectContext();
+    const id = options.append(value);
+    const selected = value === selectedValue;
+    const highlighted = value === highlightedValue;
+    return (
+    /* eslint-disable jsx-a11y/click-events-have-key-events */
+    _jsxs("li", { className: classNames(className, {
+            'dc-search-select-option': true,
+            'dc-search-select-option_selected': selected,
+            'dc-search-select-option_highlighted': highlighted,
+        }), id: id, role: "option", "aria-selected": highlighted, onClick: () => setSelectedValue(value), onMouseEnter: () => setHighlightedValue(value), children: [_jsx("div", { className: "dc-search-select-option__label", children: children }), caption
+                ? _jsx("div", { className: "dc-search-select-option__caption", children: caption })
+                : null] }));
+};
+SearchSelect.Separator = function SearchSelectSeparator({ className, children, }) {
+    return (_jsx("li", { className: classNames('dc-search-select-separator', className), role: "separator", children: children
+            ? _jsx("div", { className: "dc-search-select-separator__label", children: children })
+            : null }));
+};
+SearchSelect.ButtonLabel = function SearchSelectButtonLabel({ className, icon, value, children, }) {
+    return (_jsxs("div", { className: classNames('dc-search-select-button-label', className), children: [icon, _jsxs("span", { children: [children, " ", _jsx("b", { children: value })] })] }));
+};

package/dist/components/select/select.d.ts

@@ -20,30 +20,30 @@ export type SelectProps = SelectBaseProps & ({
     onChangeValue?: (value: string[]) => void;
 });
 export declare const Select: import("react").ForwardRefExoticComponent<(Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref"> & {
-    ref?: ((instance: HTMLSelectElement | null) => void) | import("react").RefObject<HTMLSelectElement> | null | undefined;
+    ref?: ((instance: HTMLSelectElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSelectElement> | null | undefined;
 }, "defaultValue" | "size" | "value" | "multiple"> & {
-    fullWidth?: boolean | undefined;
-    invalid?: boolean | undefined;
-    loading?: boolean | undefined;
-    size?: SelectSize | undefined;
-    displayedOptionsCount?: number | undefined;
+    fullWidth?: boolean;
+    invalid?: boolean;
+    loading?: boolean;
+    size?: SelectSize;
+    displayedOptionsCount?: number;
 } & {
-    multiple?: false | undefined;
-    value?: string | number | undefined;
-    defaultValue?: string | number | undefined;
-    onChangeValue?: ((value: string) => void) | undefined;
+    multiple?: false;
+    value?: string | number;
+    defaultValue?: string | number;
+    onChangeValue?: (value: string) => void;
 }, "ref"> | Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref"> & {
-    ref?: ((instance: HTMLSelectElement | null) => void) | import("react").RefObject<HTMLSelectElement> | null | undefined;
+    ref?: ((instance: HTMLSelectElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSelectElement> | null | undefined;
 }, "defaultValue" | "size" | "value" | "multiple"> & {
-    fullWidth?: boolean | undefined;
-    invalid?: boolean | undefined;
-    loading?: boolean | undefined;
-    size?: SelectSize | undefined;
-    displayedOptionsCount?: number | undefined;
+    fullWidth?: boolean;
+    invalid?: boolean;
+    loading?: boolean;
+    size?: SelectSize;
+    displayedOptionsCount?: number;
 } & {
     multiple: true;
-    value?: string[] | undefined;
-    defaultValue?: string[] | undefined;
-    onChangeValue?: ((value: string[]) => void) | undefined;
+    value?: string[];
+    defaultValue?: string[];
+    onChangeValue?: (value: string[]) => void;
 }, "ref">) & import("react").RefAttributes<HTMLSelectElement>>;
 export {};

package/dist/components/selection-control/selection-control.d.ts

@@ -11,7 +11,7 @@ export type SelectionControlProps = {
     children: JSX.Element | SelectionControlRenderFn;
 } & SelectionControlBaseProps;
 export declare const SelectionControl: import("react").ForwardRefExoticComponent<{
-    labelFor?: string | undefined;
+    labelFor?: string;
     caption?: ReactNode;
     label: ReactNode;
     children: JSX.Element | SelectionControlRenderFn;

package/dist/components/slide-over/slide-over.d.ts

@@ -14,10 +14,10 @@ export type SlideOverRef = {
     close: () => void;
 };
 export declare const SlideOver: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    animationDurationMs?: number | undefined;
-    animationDisabled?: boolean | undefined;
-    shouldCloseOnEscKeyPress?: boolean | undefined;
-    shouldCloseOnBackdropClick?: boolean | undefined;
+    animationDurationMs?: number;
+    animationDisabled?: boolean;
+    shouldCloseOnEscKeyPress?: boolean;
+    shouldCloseOnBackdropClick?: boolean;
     onClose: SlideOverCloseCallback;
 } & import("react").RefAttributes<SlideOverRef>> & {
     Header: typeof SlideOverHeader;

package/dist/components/spinner/spinner.d.ts

@@ -3,5 +3,5 @@ export type SpinnerProps = ComponentPropsWithoutRef<'svg'> & {
     size?: number | string;
 };
 export declare const Spinner: import("react").ForwardRefExoticComponent<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    size?: string | number | undefined;
+    size?: number | string;
 } & import("react").RefAttributes<SVGSVGElement>>;

package/dist/components/table/table-body.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithRef } from 'react';
 export type TableBodyProps = ComponentPropsWithRef<'tbody'>;
 export declare const TableBody: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {
-    ref?: ((instance: HTMLTableSectionElement | null) => void) | import("react").RefObject<HTMLTableSectionElement> | null | undefined;
+    ref?: ((instance: HTMLTableSectionElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLTableSectionElement> | null | undefined;
 }, "ref"> & import("react").RefAttributes<HTMLTableSectionElement>>;

package/dist/components/table/table-cell.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithRef } from 'react';
 export type TableCellProps = ComponentPropsWithRef<'td'>;
 export declare const TableCell: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref"> & {
-    ref?: ((instance: HTMLTableDataCellElement | null) => void) | import("react").RefObject<HTMLTableDataCellElement> | null | undefined;
+    ref?: ((instance: HTMLTableDataCellElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLTableDataCellElement> | null | undefined;
 }, "ref"> & import("react").RefAttributes<HTMLTableCellElement>>;

package/dist/components/toast/toast-button.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithRef } from 'react';
 export type ToastButtonProps = ComponentPropsWithRef<'button'>;
 export declare const ToastButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+    ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
 }, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/toaster/toaster.js

@@ -15,7 +15,7 @@ export class Toaster {
     onHide;
     constructor(params) {
         this._id = 0;
-        this.timeoutMs = params?.timeoutMs || 10000;
+        this.timeoutMs = params?.timeoutMs || 10_000;
         this.onShow = params?.onShowToast;
         this.onHide = params?.onHideToast;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "draft-components",
-  "version": "3.2.1",
+  "version": "3.4.0",
   "description": "The React based UI components library.",
   "type": "module",
   "exports": {
@@ -22,7 +22,7 @@
     "css"
   ],
   "scripts": {
-    "prepare": "husky install",
+    "prepare": "husky",
     "test": "vitest run",
     "coverage": "vitest run --coverage",
     "lint": "npm run lint-js && npm run lint-css",
@@ -55,47 +55,49 @@
     "react-dom": ">= 18"
   },
   "devDependencies": {
-    "@heroicons/react": "2.1.1",
-    "@storybook/addon-actions": "7.6.7",
-    "@storybook/addon-essentials": "7.6.7",
-    "@storybook/addon-links": "7.6.7",
-    "@storybook/addon-themes": "7.6.7",
-    "@storybook/react": "7.6.7",
-    "@storybook/react-vite": "7.6.7",
-    "@stylistic/eslint-plugin": "1.6.3",
-    "@testing-library/dom": "9.3.3",
-    "@testing-library/jest-dom": "6.2.0",
-    "@testing-library/react": "14.1.2",
+    "@heroicons/react": "2.1.5",
+    "@storybook/addon-actions": "^8.2.7",
+    "@storybook/addon-essentials": "^8.2.7",
+    "@storybook/addon-links": "^8.2.7",
+    "@storybook/addon-themes": "^8.2.7",
+    "@storybook/core-common": "^8.2.7",
+    "@storybook/react": "^8.2.7",
+    "@storybook/react-vite": "^8.2.7",
+    "@stylistic/eslint-plugin": "2.6.1",
+    "@testing-library/dom": "10.4.0",
+    "@testing-library/jest-dom": "6.4.8",
+    "@testing-library/react": "16.0.0",
     "@testing-library/user-event": "14.5.2",
-    "@types/node": "20.10.7",
-    "@types/react": "18.2.47",
-    "@types/react-dom": "18.2.18",
-    "@typescript-eslint/eslint-plugin": "7.1.1",
-    "@typescript-eslint/parser": "7.1.1",
-    "@vitest/coverage-istanbul": "1.1.3",
-    "autoprefixer": "10.4.16",
+    "@types/node": "20.14.13",
+    "@types/react": "18.3.3",
+    "@types/react-dom": "18.3.0",
+    "@typescript-eslint/eslint-plugin": "8.0.0",
+    "@typescript-eslint/parser": "8.0.0",
+    "@vitejs/plugin-react": "4.3.1",
+    "@vitest/coverage-istanbul": "2.0.5",
+    "autoprefixer": "10.4.19",
     "color": "4.2.3",
     "eslint": "8.57.0",
-    "eslint-plugin-jsx-a11y": "6.8.0",
-    "eslint-plugin-react": "7.34.0",
-    "eslint-plugin-react-hooks": "4.6.0",
+    "eslint-plugin-jsx-a11y": "6.9.0",
+    "eslint-plugin-react": "7.35.0",
+    "eslint-plugin-react-hooks": "4.6.2",
     "eslint-plugin-storybook": "0.8.0",
-    "eslint-plugin-testing-library": "6.2.0",
-    "glob": "10.3.10",
-    "husky": "8.0.3",
-    "jsdom": "23.2.0",
-    "lint-staged": "15.2.0",
-    "postcss": "8.4.33",
-    "postcss-import": "16.0.0",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "storybook": "7.6.7",
-    "stylelint": "16.2.1",
-    "stylelint-config-recess-order": "5.0.0",
-    "stylelint-config-standard": "36.0.0",
-    "typescript": "5.3.3",
-    "vite": "5.0.11",
-    "vitest": "1.1.3"
+    "eslint-plugin-testing-library": "6.2.2",
+    "glob": "11.0.0",
+    "husky": "9.1.4",
+    "jsdom": "24.1.1",
+    "lint-staged": "15.2.7",
+    "postcss": "8.4.40",
+    "postcss-import": "16.1.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "storybook": "^8.2.7",
+    "stylelint": "16.8.1",
+    "stylelint-config-recess-order": "5.0.1",
+    "stylelint-config-standard": "36.0.1",
+    "typescript": "5.5.4",
+    "vite": "5.3.5",
+    "vitest": "2.0.5"
   },
   "lint-staged": {
     "*.ts?(x)": "npm run lint-js",