draft-components 3.4.0 → 3.6.0

package/css/draft-components.css

@@ -953,6 +953,8 @@
 .dc-button {
   --dc-button-height: 36px;
   --dc-button-radius: 9px;
+  --dc-button-padding-left: 16px;
+  --dc-button-padding-right: 16px;
   --dc-button-text-color: var(--dc-button-gray-text-color);
   --dc-button-border-color: var(--dc-button-gray-border-color);
   --dc-button-bg: var(--dc-button-gray-bg);
@@ -967,7 +969,7 @@
   place-items: center;
   justify-content: center;
   height: var(--dc-button-height);
-  padding: 0 16px;
+  padding: 0 var(--dc-button-padding-right) 0 var(--dc-button-padding-left);
   font: 500 var(--dc-text-sm);
   color: var(--dc-button-text-color);
   text-align: center;
@@ -1043,6 +1045,14 @@
   grid-template-columns: repeat(3, auto);
 }
 
+.dc-button_has_icon-left {
+  padding-left: calc(var(--dc-button-padding-left) / 1.6);
+}
+
+.dc-button_has_icon-right {
+  padding-right: calc(var(--dc-button-padding-right) / 1.6);
+}
+
 .dc-button_style_tinted {
   --dc-button-text-color: var(--dc-button-gray-tinted-text-color);
   --dc-button-bg: var(--dc-button-gray-tinted-bg);
@@ -1064,36 +1074,36 @@
 .dc-button_xs {
   --dc-button-height: 28px;
   --dc-button-radius: 7px;
+  --dc-button-padding-left: 8px;
+  --dc-button-padding-right: 8px;
 
-  padding-right: 8px;
-  padding-left: 8px;
   font: 500 var(--dc-text-xs);
 }
 
 .dc-button_sm {
   --dc-button-height: 32px;
   --dc-button-radius: 8px;
+  --dc-button-padding-left: 12px;
+  --dc-button-padding-right: 12px;
 
-  padding-right: 12px;
-  padding-left: 12px;
   font: 500 var(--dc-text-sm);
 }
 
 .dc-button_lg {
   --dc-button-height: 40px;
   --dc-button-radius: 10px;
+  --dc-button-padding-left: 18px;
+  --dc-button-padding-right: 18px;
 
-  padding-right: 18px;
-  padding-left: 18px;
   font: 500 var(--dc-text-md);
 }
 
 .dc-button_xl {
   --dc-button-height: 44px;
   --dc-button-radius: 11px;
+  --dc-button-padding-left: 20px;
+  --dc-button-padding-right: 20px;
 
-  padding-right: 20px;
-  padding-left: 20px;
   font: 500 var(--dc-text-md);
 }
 
@@ -1687,14 +1697,17 @@
   border-radius: var(--dc-input-border-radius);
 }
 
-.dc-text-input > :first-child {
-  border-top-left-radius: calc(var(--dc-input-border-radius) - 1px);
-  border-bottom-left-radius: calc(var(--dc-input-border-radius) - 1px);
+.dc-text-input_full-width {
+  display: flex;
+  width: 100%;
 }
 
-.dc-text-input > :last-child {
-  border-top-right-radius: calc(var(--dc-input-border-radius) - 1px);
-  border-bottom-right-radius: calc(var(--dc-input-border-radius) - 1px);
+.dc-text-input_invalid {
+  border-color: var(--dc-input-border-color-error);
+}
+
+.dc-text-input_disabled {
+  opacity: var(--dc-disabled-state-opacity);
 }
 
 .dc-text-input_focused {
@@ -1702,17 +1715,14 @@
   box-shadow: 0 0 0 1px var(--dc-input-focus-ring-color);
 }
 
-.dc-text-input_disabled {
-  opacity: var(--dc-disabled-state-opacity);
-}
-
-.dc-text-input_invalid {
-  border-color: var(--dc-input-border-color-error);
+.dc-text-input > :first-child {
+  border-top-left-radius: calc(var(--dc-input-border-radius) - 1px);
+  border-bottom-left-radius: calc(var(--dc-input-border-radius) - 1px);
 }
 
-.dc-text-input_full-width {
-  display: flex;
-  width: 100%;
+.dc-text-input > :last-child {
+  border-top-right-radius: calc(var(--dc-input-border-radius) - 1px);
+  border-bottom-right-radius: calc(var(--dc-input-border-radius) - 1px);
 }
 
 .dc-text-input_sm {
@@ -1758,6 +1768,18 @@
   outline: none;
 }
 
+.dc-text-input_align_left .dc-text-input__native {
+  text-align: left;
+}
+
+.dc-text-input_align_right .dc-text-input__native {
+  text-align: right;
+}
+
+.dc-text-input_align_center .dc-text-input__native {
+  text-align: center;
+}
+
 .dc-text-input__slot-left,
 .dc-text-input__slot-right {
   box-sizing: border-box;
@@ -2158,6 +2180,7 @@
 
 .dc-search-select:focus {
   border-color: var(--dc-search-select-focus-ring-color);
+  outline: none;
   box-shadow: 0 0 0 1px var(--dc-search-select-focus-ring-color);
 }
 
@@ -3132,19 +3155,19 @@
   font-size: 15px;
 }
 
-.dc-segmented__item + .dc-segmented__item::before {
-  display: block;
-  float: left;
-  width: 1px;
-  height: calc(var(--dc-segmented-button-height) - var(--dc-segmented-button-radius) * 2);
-  content: "";
-  background: var(--dc-segmented-delimiter-color);
-  transform: translateY(var(--dc-segmented-button-radius));
+.dc-segmented__item + .dc-segmented__item {
+  background-image: linear-gradient(to bottom,
+    transparent 25%,
+    var(--dc-segmented-delimiter-color) 25% 75%,
+    transparent 75%
+  );
+  background-repeat: no-repeat;
+  background-size: 1px 100%;
 }
 
-.dc-segmented__item_selected::before,
-.dc-segmented__item_selected + .dc-segmented__item::before {
-  visibility: hidden;
+.dc-segmented__item_selected,
+.dc-segmented__item_selected + .dc-segmented__item {
+  background-image: none;
 }
 
 .dc-segmented-button {
@@ -3508,9 +3531,9 @@
   box-sizing: border-box;
   width: 100%;
   overflow-x: auto;
+  scroll-snap-type: x mandatory;
   border: 0 solid var(--dc-table-border-color);
   scroll-behavior: smooth;
-  scroll-snap-type: x mandatory;
 }
 
 .dc-table-container_border_all {
@@ -3547,9 +3570,9 @@
   padding:
     var(--dc-table-cell-padding-y)
     var(--dc-table-cell-padding-x);
+  scroll-snap-align: start;
   background: var(--dc-table-bg);
   border-bottom: 1px solid var(--dc-table-border-color);
-  scroll-snap-align: start;
 }
 
 .dc-table-cell_head {
@@ -4093,6 +4116,10 @@
   color-scheme: light;
 }
 
+.dc-empty-state_full_height {
+  height: 100%;
+}
+
 .dc-empty-state__image {
   color: var(--dc-empty-state-secondary-color);
 }
@@ -4631,9 +4658,9 @@
 
 .dc-filter-value-list > li {
   display: flex;
-  scroll-snap-align: start;
   align-items: center;
   min-height: 32px;
+  scroll-snap-align: start;
 }
 
 .dc-filter-popover {

package/dist/components/button/button.css

@@ -1,6 +1,8 @@
 .dc-button {
   --dc-button-height: 36px;
   --dc-button-radius: 9px;
+  --dc-button-padding-left: 16px;
+  --dc-button-padding-right: 16px;
   --dc-button-text-color: var(--dc-button-gray-text-color);
   --dc-button-border-color: var(--dc-button-gray-border-color);
   --dc-button-bg: var(--dc-button-gray-bg);
@@ -15,7 +17,7 @@
   place-items: center;
   justify-content: center;
   height: var(--dc-button-height);
-  padding: 0 16px;
+  padding: 0 var(--dc-button-padding-right) 0 var(--dc-button-padding-left);
   font: 500 var(--dc-text-sm);
   color: var(--dc-button-text-color);
   text-align: center;
@@ -91,6 +93,14 @@
   grid-template-columns: repeat(3, auto);
 }
 
+.dc-button_has_icon-left {
+  padding-left: calc(var(--dc-button-padding-left) / 1.6);
+}
+
+.dc-button_has_icon-right {
+  padding-right: calc(var(--dc-button-padding-right) / 1.6);
+}
+
 .dc-button_style_tinted {
   --dc-button-text-color: var(--dc-button-gray-tinted-text-color);
   --dc-button-bg: var(--dc-button-gray-tinted-bg);
@@ -112,36 +122,36 @@
 .dc-button_xs {
   --dc-button-height: 28px;
   --dc-button-radius: 7px;
+  --dc-button-padding-left: 8px;
+  --dc-button-padding-right: 8px;
 
-  padding-right: 8px;
-  padding-left: 8px;
   font: 500 var(--dc-text-xs);
 }
 
 .dc-button_sm {
   --dc-button-height: 32px;
   --dc-button-radius: 8px;
+  --dc-button-padding-left: 12px;
+  --dc-button-padding-right: 12px;
 
-  padding-right: 12px;
-  padding-left: 12px;
   font: 500 var(--dc-text-sm);
 }
 
 .dc-button_lg {
   --dc-button-height: 40px;
   --dc-button-radius: 10px;
+  --dc-button-padding-left: 18px;
+  --dc-button-padding-right: 18px;
 
-  padding-right: 18px;
-  padding-left: 18px;
   font: 500 var(--dc-text-md);
 }
 
 .dc-button_xl {
   --dc-button-height: 44px;
   --dc-button-radius: 11px;
+  --dc-button-padding-left: 20px;
+  --dc-button-padding-right: 20px;
 
-  padding-right: 20px;
-  padding-left: 20px;
   font: 500 var(--dc-text-md);
 }
 

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

@@ -14,6 +14,10 @@
   color-scheme: light;
 }
 
+.dc-empty-state_full_height {
+  height: 100%;
+}
+
 .dc-empty-state__image {
   color: var(--dc-empty-state-secondary-color);
 }

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

@@ -7,6 +7,7 @@ export type EmptyStateProps = {
     message?: ReactNode;
     primaryAction?: ReactNode;
     secondaryAction?: ReactNode;
+    fullHeight?: boolean;
 } & EmptyStateBaseProps;
-export declare function EmptyState({ className, image, title, message, primaryAction, secondaryAction, children, ...props }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
+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,7 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { classNames } from '../../lib/react-helpers.js';
-export function EmptyState({ className, image, title, message, primaryAction, secondaryAction, children, ...props }) {
-    return (_jsxs("div", { ...props, className: classNames('dc-empty-state', className), children: [image
+export function EmptyState({ className, image, title, message, primaryAction, secondaryAction, fullHeight, children, ...props }) {
+    return (_jsxs("div", { ...props, className: classNames(className, {
+            'dc-empty-state': true,
+            'dc-empty-state_full_height': fullHeight,
+        }), children: [image
                 ? _jsx("div", { className: "dc-empty-state__image", children: image })
                 : null, title
                 ? _jsx("h2", { className: "dc-empty-state__title", children: title })

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

@@ -11,7 +11,7 @@
 
 .dc-filter-value-list > li {
   display: flex;
-  scroll-snap-align: start;
   align-items: center;
   min-height: 32px;
+  scroll-snap-align: start;
 }

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

@@ -94,9 +94,9 @@
 
 .dc-filter-value-list > li {
   display: flex;
-  scroll-snap-align: start;
   align-items: center;
   min-height: 32px;
+  scroll-snap-align: start;
 }
 
 .dc-filter-popover {

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

@@ -100,6 +100,7 @@
 
 .dc-search-select:focus {
   border-color: var(--dc-search-select-focus-ring-color);
+  outline: none;
   box-shadow: 0 0 0 1px var(--dc-search-select-focus-ring-color);
 }
 

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

@@ -12,6 +12,7 @@ export type SearchSelectProps<Value> = {
     invalid?: boolean;
     loading?: boolean;
     disabled?: boolean;
+    readOnly?: boolean;
     textboxIcon?: ReactNode;
     textboxAriaLabel?: string;
     textboxPlaceholder?: string;
@@ -21,7 +22,7 @@ export type SearchSelectProps<Value> = {
     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 function SearchSelect<Value>({ className, size, fullWidth, invalid, loading, disabled, readOnly, 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;

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

@@ -6,7 +6,7 @@ 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, }) {
+export function SearchSelect({ className, size = 'md', fullWidth, invalid, loading, disabled, readOnly, textboxIcon, textboxAriaLabel, textboxPlaceholder = '', labelledBy, displayedValue, children, value: selectedValue, onChange: onSelectedValueChange, }) {
     const id = useId();
     const buttonId = `${id}button`;
     const textboxId = `${id}textbox`;
@@ -16,7 +16,7 @@ export function SearchSelect({ className, size = 'md', fullWidth, invalid, loadi
     const [searchQuery, setSearchQuery] = useState('');
     const [highlightedValue, setHighlightedValue] = useState(selectedValue);
     const openPopover = () => {
-        if (disabled || loading) {
+        if (readOnly || disabled || loading) {
             return;
         }
         options.clear();

package/dist/components/segmented-control/segmented-control.css

@@ -46,19 +46,19 @@
   font-size: 15px;
 }
 
-.dc-segmented__item + .dc-segmented__item::before {
-  display: block;
-  float: left;
-  width: 1px;
-  height: calc(var(--dc-segmented-button-height) - var(--dc-segmented-button-radius) * 2);
-  content: "";
-  background: var(--dc-segmented-delimiter-color);
-  transform: translateY(var(--dc-segmented-button-radius));
+.dc-segmented__item + .dc-segmented__item {
+  background-image: linear-gradient(to bottom,
+    transparent 25%,
+    var(--dc-segmented-delimiter-color) 25% 75%,
+    transparent 75%
+  );
+  background-repeat: no-repeat;
+  background-size: 1px 100%;
 }
 
-.dc-segmented__item_selected::before,
-.dc-segmented__item_selected + .dc-segmented__item::before {
-  visibility: hidden;
+.dc-segmented__item_selected,
+.dc-segmented__item_selected + .dc-segmented__item {
+  background-image: none;
 }
 
 .dc-segmented-button {

package/dist/components/table/table.css

@@ -19,9 +19,9 @@
   box-sizing: border-box;
   width: 100%;
   overflow-x: auto;
+  scroll-snap-type: x mandatory;
   border: 0 solid var(--dc-table-border-color);
   scroll-behavior: smooth;
-  scroll-snap-type: x mandatory;
 }
 
 .dc-table-container_border_all {
@@ -58,9 +58,9 @@
   padding:
     var(--dc-table-cell-padding-y)
     var(--dc-table-cell-padding-x);
+  scroll-snap-align: start;
   background: var(--dc-table-bg);
   border-bottom: 1px solid var(--dc-table-border-color);
-  scroll-snap-align: start;
 }
 
 .dc-table-cell_head {

package/dist/components/text-input/text-input.css

@@ -29,14 +29,17 @@
   border-radius: var(--dc-input-border-radius);
 }
 
-.dc-text-input > :first-child {
-  border-top-left-radius: calc(var(--dc-input-border-radius) - 1px);
-  border-bottom-left-radius: calc(var(--dc-input-border-radius) - 1px);
+.dc-text-input_full-width {
+  display: flex;
+  width: 100%;
 }
 
-.dc-text-input > :last-child {
-  border-top-right-radius: calc(var(--dc-input-border-radius) - 1px);
-  border-bottom-right-radius: calc(var(--dc-input-border-radius) - 1px);
+.dc-text-input_invalid {
+  border-color: var(--dc-input-border-color-error);
+}
+
+.dc-text-input_disabled {
+  opacity: var(--dc-disabled-state-opacity);
 }
 
 .dc-text-input_focused {
@@ -44,17 +47,14 @@
   box-shadow: 0 0 0 1px var(--dc-input-focus-ring-color);
 }
 
-.dc-text-input_disabled {
-  opacity: var(--dc-disabled-state-opacity);
-}
-
-.dc-text-input_invalid {
-  border-color: var(--dc-input-border-color-error);
+.dc-text-input > :first-child {
+  border-top-left-radius: calc(var(--dc-input-border-radius) - 1px);
+  border-bottom-left-radius: calc(var(--dc-input-border-radius) - 1px);
 }
 
-.dc-text-input_full-width {
-  display: flex;
-  width: 100%;
+.dc-text-input > :last-child {
+  border-top-right-radius: calc(var(--dc-input-border-radius) - 1px);
+  border-bottom-right-radius: calc(var(--dc-input-border-radius) - 1px);
 }
 
 .dc-text-input_sm {
@@ -100,6 +100,18 @@
   outline: none;
 }
 
+.dc-text-input_align_left .dc-text-input__native {
+  text-align: left;
+}
+
+.dc-text-input_align_right .dc-text-input__native {
+  text-align: right;
+}
+
+.dc-text-input_align_center .dc-text-input__native {
+  text-align: center;
+}
+
 .dc-text-input__slot-left,
 .dc-text-input__slot-right {
   box-sizing: border-box;

package/dist/components/text-input/text-input.d.ts

@@ -4,6 +4,7 @@ type TextInputBaseProps = Omit<TextInputHTMLProps, 'type' | 'size'>;
 export type TextInputType = 'date' | 'datetime-local' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week';
 export type TextInputSize = 'sm' | 'md' | 'lg';
 export type TextInputSlotStyle = 'plain' | 'tinted';
+export type TextInputTextAlign = 'left' | 'right' | 'center';
 export type TextInputSlotRenderer = (props: {
     className: string;
 }) => ReactNode;
@@ -17,6 +18,7 @@ export type TextInputProps = TextInputBaseProps & {
     slotLeft?: ReactNode | TextInputSlotRenderer;
     slotRight?: ReactNode | TextInputSlotRenderer;
     slotStyle?: TextInputSlotStyle;
+    textAlign?: TextInputTextAlign;
     onChangeValue?: TextInputValueChangeHandler;
 };
 export declare const TextInput: import("react").ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/text-input/text-input.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useState } from 'react';
 import { classNames } from '../../lib/react-helpers.js';
-export const TextInput = forwardRef(function TextInput({ style, className, fullWidth, size = 'md', sizeInChars, slotStyle = 'plain', slotLeft, slotRight, type = 'text', invalid, disabled, onChange, onFocus, onBlur, onChangeValue, ...props }, ref) {
+export const TextInput = forwardRef(function TextInput({ style, className, fullWidth, size = 'md', sizeInChars, slotStyle = 'plain', textAlign = 'left', slotLeft, slotRight, type = 'text', invalid, disabled, onChange, onFocus, onBlur, onChangeValue, ...props }, ref) {
     const [focused, setFocused] = useState(false);
     let elementBeforeInput;
     if (slotLeft) {
@@ -46,6 +46,7 @@ export const TextInput = forwardRef(function TextInput({ style, className, fullW
     return (_jsxs("div", { style: style, className: classNames(className, 'dc-text-input', {
             [`dc-text-input_${size}`]: size,
             [`dc-text-input_slot_${slotStyle}`]: slotStyle,
+            [`dc-text-input_align_${textAlign}`]: textAlign,
             'dc-text-input_full-width': fullWidth,
             'dc-text-input_invalid': invalid,
             'dc-text-input_focused': focused,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "draft-components",
-  "version": "3.4.0",
+  "version": "3.6.0",
   "description": "The React based UI components library.",
   "type": "module",
   "exports": {
@@ -26,7 +26,7 @@
     "test": "vitest run",
     "coverage": "vitest run --coverage",
     "lint": "npm run lint-js && npm run lint-css",
-    "lint-js": "eslint '**/*.[jt]s?(x)'",
+    "lint-js": "eslint",
     "lint-css": "stylelint 'src/**/*.css'",
     "typecheck": "tsc --project 'tsconfig.json' --noEmit",
     "prebuild": "npm run typecheck && npm run lint && npm run test",
@@ -55,49 +55,50 @@
     "react-dom": ">= 18"
   },
   "devDependencies": {
-    "@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",
+    "@eslint/js": "9.16.0",
+    "@heroicons/react": "2.2.0",
+    "@storybook/addon-actions": "8.4.7",
+    "@storybook/addon-essentials": "8.4.7",
+    "@storybook/addon-links": "8.4.7",
+    "@storybook/addon-themes": "8.4.7",
+    "@storybook/core-common": "8.4.7",
+    "@storybook/react": "8.4.7",
+    "@storybook/react-vite": "8.4.7",
+    "@stylistic/eslint-plugin": "2.12.1",
     "@testing-library/dom": "10.4.0",
-    "@testing-library/jest-dom": "6.4.8",
-    "@testing-library/react": "16.0.0",
+    "@testing-library/jest-dom": "6.6.3",
+    "@testing-library/react": "16.1.0",
     "@testing-library/user-event": "14.5.2",
-    "@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",
+    "@types/node": "20.17.10",
+    "@types/react": "18.3.16",
+    "@types/react-dom": "18.3.5",
+    "@vitejs/plugin-react": "4.3.4",
+    "@vitest/coverage-istanbul": "2.1.8",
+    "autoprefixer": "10.4.20",
     "color": "4.2.3",
-    "eslint": "8.57.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.2",
+    "eslint": "9.16.0",
+    "eslint-plugin-jsx-a11y": "6.10.2",
+    "eslint-plugin-react": "7.37.2",
+    "eslint-plugin-react-hooks": "5.1.0",
+    "eslint-plugin-storybook": "0.11.1",
+    "eslint-plugin-testing-library": "7.1.1",
     "glob": "11.0.0",
-    "husky": "9.1.4",
-    "jsdom": "24.1.1",
-    "lint-staged": "15.2.7",
-    "postcss": "8.4.40",
+    "globals": "15.13.0",
+    "husky": "9.1.7",
+    "jsdom": "25.0.1",
+    "lint-staged": "15.2.11",
+    "postcss": "8.4.49",
     "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",
+    "storybook": "^8.4.7",
+    "stylelint": "16.11.0",
+    "stylelint-config-recess-order": "5.1.1",
     "stylelint-config-standard": "36.0.1",
-    "typescript": "5.5.4",
-    "vite": "5.3.5",
-    "vitest": "2.0.5"
+    "typescript": "5.7.2",
+    "typescript-eslint": "8.18.0",
+    "vite": "6.0.3",
+    "vitest": "2.1.8"
   },
   "lint-staged": {
     "*.ts?(x)": "npm run lint-js",