draft-components 2.8.0 → 2.9.0

package/css/draft-components.css

@@ -2123,6 +2123,239 @@
   padding-top: 4px;
 }
 
+.dc-slider-range {
+  --dc-slider-range-active-track-left: 0%;
+  --dc-slider-range-active-track-right: 0%;
+  --dc-slider-range-labels-margin-bottom: 12px;
+  --dc-slider-range-tick-marks-margin-top: 2px;
+
+  /* Label properties */
+  --dc-slider-range-label-height: 24px;
+  --dc-slider-range-label-padding-x: 8px;
+  --dc-slider-range-label-radius: 6px;
+  --dc-slider-range-label-text-color: var(--dc-white);
+  --dc-slider-range-label-bg: var(--dc-gray-800);
+
+  /* Track properties */
+  --dc-slider-range-track-width: 100%;
+  --dc-slider-range-track-height: 4px;
+  --dc-slider-range-track-radius: 0;
+  --dc-slider-range-track-border-color: transparent;
+  --dc-slider-range-track-bg: var(--dc-control-bg-inset);
+  --dc-slider-range-active-track-bg: var(--dc-control-primary-color);
+
+  /* Thumb properties */
+  --dc-slider-range-thumb-width: 20px;
+  --dc-slider-range-thumb-height: 20px;
+  --dc-slider-range-thumb-border: 4px solid var(--dc-control-primary-color);
+  --dc-slider-range-thumb-radius: 50%;
+  --dc-slider-range-thumb-bg: var(--dc-control-bg);
+  --dc-slider-range-thumb-shadow: 0 0 0 transparent;
+  --dc-slider-focus-ring:
+    var(--dc-slider-range-thumb-shadow),
+    0 0 0 1px white,
+    0 0 0 4px var(--dc-focus-ring-color);
+
+  /* Tick mark properties */
+  --dc-slider-range-tick-mark-font: var(--dc-text-xs);
+  --dc-slider-range-tick-mark-gap: 4px;
+  --dc-slider-range-tick-mark-width: 2px;
+  --dc-slider-range-tick-mark-height: 8px;
+  --dc-slider-range-tick-mark-color: var(--dc-control-border-color);
+  --dc-slider-range-tick-mark-label-color: var(--dc-control-secondary-text-color);
+
+  color-scheme: light;
+  font-family: var(--dc-primary-font);
+  position: relative;
+}
+
+.dc-slider-range__labels-container {
+  position: relative;
+  width: 100%;
+  height: var(--dc-slider-range-thumb-height);
+  margin-bottom: var(--dc-slider-range-labels-margin-bottom);
+  border: none;
+}
+
+.dc-slider-range__label {
+  font: var(--dc-text-xs);
+  color: var(--dc-slider-range-label-text-color);
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  height: var(--dc-slider-range-label-height);
+  max-width: 100%;
+  padding: 0 var(--dc-slider-range-label-padding-x);
+  text-align: center;
+  border-radius: var(--dc-slider-range-label-radius);
+  background: var(--dc-slider-range-label-bg);
+  font-variant-numeric: tabular-nums;
+}
+
+.dc-slider-range__label[hidden] {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.dc-slider-range__label-text {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.dc-slider-range__track {
+  position: relative;
+  display: block;
+  width: var(--dc-slider-range-track-width);
+  height: max(var(--dc-slider-range-track-height), var(--dc-slider-range-thumb-height));
+}
+
+.dc-slider-range__track::before,
+.dc-slider-range__track::after {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  top: 50%;
+  display: block;
+  box-sizing: border-box;
+  height: var(--dc-slider-range-track-height);
+  transform: translateY(-50%);
+  border-radius: var(--dc-slider-range-track-radius);
+}
+
+.dc-slider-range__track::before {
+  width: 100%;
+  background: var(--dc-slider-range-track-bg);
+  box-shadow: inset 0 0 0 1px var(--dc-slider-range-track-border-color);
+}
+
+.dc-slider-range__track::after {
+  right: var(--dc-slider-range-active-track-right);
+  left: var(--dc-slider-range-active-track-left);
+  background: var(--dc-slider-range-active-track-bg);
+}
+
+.dc-slider-range_disabled .dc-slider-range__track {
+  opacity: var(--dc-disabled-state-opacity);
+}
+
+.dc-slider-range__input {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  cursor: default;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  pointer-events: none;
+  background: none;
+}
+
+.dc-slider-range__input_active {
+  z-index: 1;
+}
+
+.dc-slider-range__input:focus {
+  outline: none;
+}
+
+.dc-slider-range__input::-webkit-slider-runnable-track {
+  -webkit-appearance: none;
+          appearance: none;
+  width: 100%;
+  height: 100%;
+  background: none;
+}
+
+.dc-slider-range__input::-moz-range-track {
+  -moz-appearance: none;
+       appearance: none;
+  width: 100%;
+  height: 100%;
+  background: none;
+}
+
+.dc-slider-range__input::-webkit-slider-thumb {
+  -webkit-appearance: none;
+          appearance: none;
+  display: inline-block;
+  box-sizing: border-box;
+  width: var(--dc-slider-range-thumb-width);
+  height: var(--dc-slider-range-thumb-height);
+  margin: 0;
+  padding: 0;
+  pointer-events: all;
+  border: var(--dc-slider-range-thumb-border);
+  border-radius: var(--dc-slider-range-thumb-radius);
+  background: var(--dc-slider-range-thumb-bg);
+  box-shadow: var(--dc-slider-range-thumb-shadow);
+}
+
+.dc-slider-range__input:focus::-webkit-slider-thumb {
+  box-shadow: var(--dc-slider-focus-ring);
+}
+
+.dc-slider-range input::-moz-range-thumb {
+  -moz-appearance: none;
+       appearance: none;
+  display: inline-block;
+  box-sizing: border-box;
+  width: var(--dc-slider-range-thumb-width);
+  height: var(--dc-slider-range-thumb-height);
+  margin: 0;
+  padding: 0;
+  pointer-events: all;
+  border: var(--dc-slider-range-thumb-border);
+  border-radius: var(--dc-slider-range-thumb-radius);
+  background: var(--dc-slider-range-thumb-bg);
+  box-shadow: var(--dc-slider-range-thumb-shadow);
+}
+
+.dc-slider-range__input:focus::-moz-range-thumb {
+  box-shadow: var(--dc-slider-focus-ring);
+}
+
+.dc-slider-range__tick-marks {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  margin: var(--dc-slider-range-tick-marks-margin-top) 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.dc-slider-range__tick-marks > li {
+  font: var(--dc-slider-range-tick-mark-font);
+  color: var(--dc-slider-range-tick-mark-label-color);
+  display: inline-flex;
+  cursor: default;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  flex-direction: column;
+  gap: var(--dc-slider-range-tick-mark-gap);
+  align-items: center;
+  width: var(--dc-slider-range-thumb-width);
+  min-width: var(--dc-slider-range-thumb-width);
+  white-space: nowrap;
+}
+
+.dc-slider-range__tick-marks > li::before {
+  content: "";
+  display: inline-flex;
+  flex-shrink: 0;
+  width: var(--dc-slider-range-tick-mark-width);
+  height: var(--dc-slider-range-tick-mark-height);
+  background: var(--dc-slider-range-tick-mark-color);
+}
+
 .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);

package/dist/components/index.d.ts

@@ -2,13 +2,13 @@ export * from './alert/index.js';
 export * from './avatar/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 './button/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-picker/index.js';
 export * from './date-range-picker-popover/index.js';
 export * from './dialog/index.js';
 export * from './empty-state/index.js';
@@ -28,6 +28,7 @@ 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-range/index.js';
 export * from './slider/index.js';
 export * from './spinner/index.js';
 export * from './switch/index.js';

package/dist/components/index.js

@@ -2,13 +2,13 @@ export * from './alert/index.js';
 export * from './avatar/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 './button/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-picker/index.js';
 export * from './date-range-picker-popover/index.js';
 export * from './dialog/index.js';
 export * from './empty-state/index.js';
@@ -28,6 +28,7 @@ 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-range/index.js';
 export * from './slider/index.js';
 export * from './spinner/index.js';
 export * from './switch/index.js';

package/dist/components/slider-range/index.d.ts

@@ -0,0 +1,2 @@
+export * from './slider-range.js';
+export { type SliderRangeTickMarkDescriptor } from './slider-range-data-list.js';

package/dist/components/slider-range/index.js

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

package/dist/components/slider-range/slider-range-data-list.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+export type SliderRangeTickMarkDescriptor = {
+    value: number;
+    label?: ReactNode;
+};
+export declare function SliderRangeDataList({ className, id, tickMarks, }: {
+    className?: string;
+    id: string;
+    tickMarks: SliderRangeTickMarkDescriptor[];
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/slider-range/slider-range-data-list.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from '../../lib/index.js';
+export function SliderRangeDataList({ className, id, tickMarks, }) {
+    const renderedOptions = [];
+    const renderedTickMarks = [];
+    for (const { value, label } of tickMarks) {
+        const key = `${value}-tick-mark`;
+        renderedOptions.push(_jsx("option", { value: value }, key));
+        renderedTickMarks.push(_jsx("li", { children: label }, key));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("datalist", { id: id, children: renderedOptions }), _jsx("ol", { className: classNames('dc-slider-range__tick-marks', className), children: renderedTickMarks })] }));
+}

package/dist/components/slider-range/slider-range-label.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+type SliderRangeLabelProps = {
+    className?: string;
+    hidden?: boolean;
+    htmlFor: string | string[];
+    children: ReactNode;
+};
+export declare const SliderRangeLabel: import("react").ForwardRefExoticComponent<SliderRangeLabelProps & import("react").RefAttributes<HTMLOutputElement>>;
+export {};

package/dist/components/slider-range/slider-range-label.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { classNames } from '../../lib/index.js';
+export const SliderRangeLabel = forwardRef(({ className, hidden, htmlFor, children, }, ref) => (_jsx("output", { ref: ref, hidden: hidden, htmlFor: Array.isArray(htmlFor) ? htmlFor.join(' ') : htmlFor, className: classNames('dc-slider-range__label', className), children: _jsx("span", { className: "dc-slider-range__label-text", children: children }) })));
+SliderRangeLabel.displayName = 'SliderRangeLabel';

package/dist/components/slider-range/slider-range.d.ts

@@ -0,0 +1,20 @@
+import { CSSProperties, ReactNode } from 'react';
+import { SliderRangeTickMarkDescriptor } from './slider-range-data-list.js';
+export type SliderRangeValue = {
+    readonly min: number;
+    readonly max: number;
+};
+export type SliderRangeProps = {
+    style?: CSSProperties;
+    className?: string;
+    tickMarks?: SliderRangeTickMarkDescriptor[];
+    disabled?: boolean;
+    min?: number;
+    max?: number;
+    step?: number;
+    name?: string;
+    value: SliderRangeValue;
+    onChange: (value: SliderRangeValue) => void;
+    renderValue?: (value: number) => ReactNode;
+};
+export declare function SliderRange({ style, className, tickMarks, disabled, min, max, step, name, value: range, onChange: onChangeRange, renderValue, }: SliderRangeProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/slider-range/slider-range.js

@@ -0,0 +1,147 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useLayoutEffect, useRef, useState, } from 'react';
+import { classNames, formatNumber, formatPercent, getCustomPropertyValue } from '../../lib/index.js';
+import { SliderRangeLabel } from './slider-range-label.js';
+import { SliderRangeDataList } from './slider-range-data-list.js';
+const inputKeys = ['min', 'max'];
+const numberFormatter = new Intl.NumberFormat();
+export function SliderRange({ style, className, tickMarks, disabled, min = 0, max = 100, step = 1, name, value: range, onChange: onChangeRange, renderValue = numberFormatter.format, }) {
+    const id = useId();
+    const containerRef = useRef(null);
+    const labelsContainerRef = useRef(null);
+    const minValueLabelRef = useRef(null);
+    const maxValueLabelRef = useRef(null);
+    const rangeLabelRef = useRef(null);
+    const [focusedInputKey, setFocusedInputKey] = useState('min');
+    let dataListId;
+    let dataList;
+    if (tickMarks && tickMarks.length > 0) {
+        dataListId = `${id}data-list`;
+        dataList = _jsx(SliderRangeDataList, { id: dataListId, tickMarks: tickMarks });
+    }
+    const handleFocus = (key) => () => {
+        setFocusedInputKey(key);
+    };
+    const handleChange = (key) => (event) => {
+        const value = Number(event.target.value);
+        const { min, max } = range;
+        if (key === 'min') {
+            onChangeRange({ max, min: Math.min(max, value) });
+        }
+        else {
+            onChangeRange({ min, max: Math.max(min, value) });
+        }
+    };
+    const activeTrackLeft = calcTrackOffsetInPercent(range.min, {
+        min,
+        max,
+        step,
+    });
+    const activeTrackRight = calcTrackOffsetInPercent(range.max, {
+        min,
+        max,
+        step,
+    });
+    useLayoutEffect(() => {
+        const container = containerRef.current;
+        if (!container) {
+            throw new Error('container ref is not set');
+        }
+        const labelsContainer = labelsContainerRef.current;
+        if (!labelsContainer) {
+            throw new Error('labelsContainer ref is not set');
+        }
+        const minLabel = minValueLabelRef.current;
+        if (!minLabel) {
+            throw new Error('minValueLabel ref is not set');
+        }
+        const maxLabel = maxValueLabelRef.current;
+        if (!maxLabel) {
+            throw new Error('maxValueLabel ref is not set');
+        }
+        const rangeLabel = rangeLabelRef.current;
+        if (!rangeLabel) {
+            throw new Error('rangeLabel ref is not set');
+        }
+        const resizeObserver = new ResizeObserver(() => {
+            const thumbWidth = parseFloat(getCustomPropertyValue(container, '--dc-slider-range-thumb-width'));
+            const labelsContainerWidth = getElementWidth(labelsContainer);
+            const minLabelWidth = getElementWidth(minLabel);
+            const maxLabelWidth = getElementWidth(maxLabel);
+            const rangeLabelWidth = getElementWidth(rangeLabel);
+            const minLabelOffset = calcLabelOffsetInPixels(minLabelWidth, {
+                thumbWidth,
+                containerWidth: labelsContainerWidth,
+                offsetInPercent: activeTrackLeft,
+            });
+            setElementTranslateX(minLabel, minLabelOffset);
+            const maxLabelOffset = calcLabelOffsetInPixels(maxLabelWidth, {
+                thumbWidth,
+                containerWidth: labelsContainerWidth,
+                offsetInPercent: activeTrackRight,
+            });
+            setElementTranslateX(maxLabel, maxLabelOffset);
+            let rangeLabelOffset;
+            if (focusedInputKey === 'max') {
+                rangeLabelOffset = minLabelOffset;
+            }
+            else {
+                rangeLabelOffset = (maxLabelOffset + maxLabelWidth) - rangeLabelWidth;
+            }
+            setElementTranslateX(rangeLabel, rangeLabelOffset);
+            const shouldShowRangeLabel = (minLabelOffset + minLabelWidth) >= maxLabelOffset;
+            if (shouldShowRangeLabel) {
+                minLabel.hidden = true;
+                maxLabel.hidden = true;
+                rangeLabel.hidden = false;
+            }
+            else {
+                minLabel.hidden = false;
+                maxLabel.hidden = false;
+                rangeLabel.hidden = true;
+            }
+        });
+        resizeObserver.observe(labelsContainer);
+        return () => resizeObserver.unobserve(labelsContainer);
+    }, [focusedInputKey, activeTrackLeft, activeTrackRight]);
+    return (_jsxs("div", { ref: containerRef, style: {
+            ...style,
+            '--dc-slider-range-active-track-left': formatPercent(activeTrackLeft),
+            '--dc-slider-range-active-track-right': formatPercent(1 - activeTrackRight),
+        }, className: classNames(className, {
+            'dc-slider-range': true,
+            'dc-slider-range_disabled': disabled,
+        }), children: [_jsxs("div", { ref: labelsContainerRef, className: "dc-slider-range__labels-container", children: [_jsx(SliderRangeLabel, { ref: minValueLabelRef, htmlFor: generateInputId(id, 'min'), children: renderValue(range.min) }), _jsx(SliderRangeLabel, { ref: maxValueLabelRef, htmlFor: generateInputId(id, 'max'), children: renderValue(range.max) }), _jsx(SliderRangeLabel, { ref: rangeLabelRef, hidden: true, htmlFor: [generateInputId(id, 'min'), generateInputId(id, 'max')], children: range.min === range.max
+                            ? _jsx(_Fragment, { children: renderValue(range.min) })
+                            : _jsxs(_Fragment, { children: [renderValue(range.min), " - ", renderValue(range.max)] }) })] }), _jsx("div", { className: "dc-slider-range__track", children: inputKeys.map((inputKey) => (_jsx("input", { id: generateInputId(id, inputKey), className: classNames({
+                        'dc-slider-range__input': true,
+                        'dc-slider-range__input_active': focusedInputKey === inputKey,
+                    }), type: "range", min: min, max: max, step: step, list: dataListId, name: name ? `${name}[${inputKey}]` : undefined, value: range[inputKey], disabled: disabled, onChange: handleChange(inputKey), onFocus: handleFocus(inputKey) }, inputKey))) }), dataList] }));
+}
+function generateInputId(id, inputKey) {
+    return `${id}input-range-${inputKey}`;
+}
+function calcTrackOffsetInPercent(value, opts) {
+    return Math.round(value / opts.step) * opts.step / (opts.max - opts.min);
+}
+function calcLabelOffsetInPixels(labelWidth, opts) {
+    let offset = ((opts.offsetInPercent * opts.containerWidth) -
+        (opts.offsetInPercent * opts.thumbWidth) -
+        ((labelWidth - opts.thumbWidth) / 2));
+    const min = 0;
+    const max = opts.containerWidth - labelWidth;
+    if (offset < min) {
+        offset = min;
+    }
+    if (offset > max) {
+        offset = max;
+    }
+    return offset;
+}
+function getElementWidth(element) {
+    const rect = element.getBoundingClientRect();
+    return rect.width;
+}
+function setElementTranslateX(element, offsetX) {
+    element.style.transform = `translateX(${formatNumber(offsetX)}px)`;
+}

package/dist/hooks/use-callback-ref.d.ts

@@ -1,3 +1,3 @@
-type Callback = (...args: unknown[]) => unknown;
+type Callback = (...args: any[]) => any;
 export declare function useCallbackRef<T extends Callback>(callback: T): T;
 export {};

package/dist/lib/helpers.d.ts

@@ -3,4 +3,6 @@ export declare function once<T extends AnyFunction>(fn: T): (...args: Parameters
 export declare function assertIfNullable<T>(value: T, message?: string): asserts value is NonNullable<T>;
 export declare function exhaustiveCheck(value: never, message?: string): never;
 export declare function noop(): undefined;
+export declare function formatNumber(num: number, fractionDigits?: number): number;
+export declare function formatPercent(percent: number): string;
 export {};

package/dist/lib/helpers.js

@@ -20,3 +20,9 @@ export function exhaustiveCheck(value, message) {
 export function noop() {
     return undefined;
 }
+export function formatNumber(num, fractionDigits = 5) {
+    return Number(num.toFixed(fractionDigits));
+}
+export function formatPercent(percent) {
+    return `${formatNumber(percent * 100)}%`;
+}

package/dist/lib/react-helpers.d.ts

@@ -12,3 +12,4 @@ export type ReactElementWithRef = ReactElement & {
 export declare function isReactElementWithRef(element: unknown): element is ReactElementWithRef;
 export declare function focusElement(element: EventTarget | null | undefined): void;
 export declare function getRefElement<T extends HTMLElement>(ref: RefObject<T> | MutableRefObject<T>, message?: string): NonNullable<T>;
+export declare function getCustomPropertyValue(element: HTMLElement, property: string): string;

package/dist/lib/react-helpers.js

@@ -47,3 +47,6 @@ export function getRefElement(ref, message = 'getElementFromRef: ref value is nu
     }
     return value;
 }
+export function getCustomPropertyValue(element, property) {
+    return window.getComputedStyle(element).getPropertyValue(property) || '';
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "draft-components",
-  "version": "2.8.0",
+  "version": "2.9.0",
   "description": "The React based UI components library.",
   "type": "module",
   "exports": {
@@ -53,49 +53,47 @@
   },
   "devDependencies": {
     "@alexzimakov/eslint-config": "1.8.0",
-    "@heroicons/react": "2.0.18",
-    "@storybook/addon-actions": "7.5.3",
-    "@storybook/addon-essentials": "7.5.3",
-    "@storybook/addon-links": "7.5.3",
-    "@storybook/addon-themes": "7.5.3",
-    "@storybook/react": "7.5.3",
-    "@storybook/react-vite": "7.5.3",
+    "@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",
     "@testing-library/dom": "9.3.3",
-    "@testing-library/jest-dom": "6.1.4",
-    "@testing-library/react": "14.0.0",
-    "@testing-library/user-event": "14.5.1",
-    "@types/node": "20.9.0",
-    "@types/react": "18.2.37",
-    "@types/react-dom": "18.2.15",
-    "@typescript-eslint/eslint-plugin": "6.10.0",
-    "@vitest/coverage-istanbul": "0.34.6",
+    "@testing-library/jest-dom": "6.2.0",
+    "@testing-library/react": "14.1.2",
+    "@testing-library/user-event": "14.5.2",
+    "@types/node": "20.10.6",
+    "@types/react": "18.2.46",
+    "@types/react-dom": "18.2.18",
+    "@typescript-eslint/eslint-plugin": "6.17.0",
+    "@typescript-eslint/parser": "6.17.0",
+    "@vitest/coverage-istanbul": "1.1.2",
     "autoprefixer": "10.4.16",
-    "eslint": "8.53.0",
+    "eslint": "8.56.0",
     "eslint-plugin-jsx-a11y": "6.8.0",
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-storybook": "0.6.15",
-    "eslint-plugin-testing-library": "6.1.0",
+    "eslint-plugin-testing-library": "6.2.0",
     "husky": "8.0.3",
-    "jsdom": "22.1.0",
-    "lint-staged": "15.0.2",
-    "postcss": "8.4.31",
-    "postcss-import": "15.1.0",
+    "jsdom": "23.0.1",
+    "lint-staged": "15.2.0",
+    "postcss": "8.4.32",
+    "postcss-import": "16.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "storybook": "7.5.3",
-    "stylelint": "15.11.0",
-    "stylelint-config-standard": "34.0.0",
-    "stylelint-order": "6.0.3",
-    "typescript": "5.2.2",
-    "vite": "4.5.0",
-    "vitest": "0.34.6"
+    "storybook": "7.6.7",
+    "stylelint": "16.1.0",
+    "stylelint-config-standard": "36.0.0",
+    "stylelint-order": "6.0.4",
+    "typescript": "5.3.3",
+    "vite": "5.0.10",
+    "vitest": "1.1.2"
   },
   "lint-staged": {
     "*.ts?(x)": "npm run lint-js",
     "*.css": "npm run lint-css"
-  },
-  "dependencies": {
-    "@typescript-eslint/parser": "6.10.0"
   }
 }