dt-design-system - npm Package Compare versions

Comparing version 3.8.5 to 3.8.6

es/button/button.js

@@ -34,8 +34,4 @@ "use client";
     const defaultType = tag === "button" ? "button" : undefined;
-    return (_jsx(Tag
-    // @ts-ignore
-    , { 
-        // @ts-ignore
-        ref: ref, type: defaultType, ...props, onMouseDown: mouseDowned, onKeyDown: keyDowned, onKeyUp: keyUp, className: classes, children: children }));
+    return (_jsx(Tag, { ref: ref, type: defaultType, ...props, onMouseDown: mouseDowned, onKeyDown: keyDowned, onKeyUp: keyUp, className: classes, children: children }));
 });
 export default Button;

es/checkbox/checkbox.js

@@ -25,6 +25,4 @@ "use client";
     });
-    return (_jsxs("label", { 
-        // @ts-ignore
-        ref: ref, className: classes, children: [_jsx("input", { className: css.checkbox, onChange: _onChange, type: "checkbox", checked: checked, disabled: disabled, required: required, ...props }), _jsx("span", { className: visualInputClasses, onMouseDown: createRipple }), label && _jsx("div", { className: css.label, children: label })] }));
+    return (_jsxs("label", { ref: ref, className: classes, children: [_jsx("input", { className: css.checkbox, onChange: _onChange, type: "checkbox", checked: checked, disabled: disabled, required: required, ...props }), _jsx("span", { className: visualInputClasses, onMouseDown: createRipple }), label && _jsx("div", { className: css.label, children: label })] }));
 });
 export default Checkbox;

es/date-picker/calendar-date.d.ts

 import * as React from "react";
 declare const _default: React.MemoExoticComponent<typeof CalendarDate>;
 export default _default;
-declare function CalendarDate({ date, month, year, value, hint, onChange, minDate, maxDate, decorator, extended, }: {
-    date: any;
-    month: any;
-    year: any;
-    value: any;
-    hint: any;
-    onChange: any;
-    minDate: any;
-    maxDate: any;
-    decorator: any;
-    extended: any;
-}): import("react/jsx-runtime").JSX.Element;
+type Props = {
+    date: string;
+    month: number;
+    year: number;
+    value?: string;
+    hint?: string;
+    onChange: (value: string) => void;
+    minDate?: Date;
+    maxDate?: Date;
+    decorator?: React.ComponentType<{
+        children: React.ReactNode;
+    }>;
+    extended?: boolean;
+};
+declare function CalendarDate({ date, month, year, value, hint, onChange, minDate, maxDate, decorator, extended, }: Props): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=calendar-date.d.ts.map

es/date-picker/calendar-date.js

@@ -17,3 +17,3 @@ import { jsx as _jsx } from "react/jsx-runtime";
     const isHidden = extended && !inMonth;
-    const isDisabled = isHidden | (minDate && _date < minDate) || (maxDate && _date > maxDate);
+    const isDisabled = isHidden || (minDate && _date < minDate) || (maxDate && _date > maxDate);
     const updateDateSelection = () => {
@@ -20,0 +20,0 @@ if (isDisabled)

es/date-picker/calendar-header.d.ts

@@ -1,15 +0,17 @@
-export default function Header({ goToPreviousMonth, goToNextMonth, monthName, monthNames, availableMonths, year, yearRange, setMonth, setYear, pastMonthDisabled, futureMonthDisabled, extended, }: {
-    goToPreviousMonth: any;
-    goToNextMonth: any;
-    monthName: any;
-    monthNames: any;
-    availableMonths: any;
-    year: any;
-    yearRange: any;
-    setMonth: any;
-    setYear: any;
-    pastMonthDisabled: any;
-    futureMonthDisabled: any;
-    extended: any;
-}): import("react/jsx-runtime").JSX.Element;
+type Props = {
+    goToPreviousMonth: () => void;
+    goToNextMonth: () => void;
+    monthName: string;
+    monthNames: string[];
+    availableMonths: string[];
+    year: number;
+    yearRange: number[];
+    setMonth: (month: number) => void;
+    setYear: (year: number) => void;
+    pastMonthDisabled: boolean;
+    futureMonthDisabled: boolean;
+    extended?: boolean;
+};
+export default function Header({ goToPreviousMonth, goToNextMonth, monthName, monthNames, availableMonths, year, yearRange, setMonth, setYear, pastMonthDisabled, futureMonthDisabled, extended, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
 //# sourceMappingURL=calendar-header.d.ts.map

es/date-picker/calendar-month.d.ts

@@ -9,3 +9,3 @@ import * as React from "react";
     year: number;
-    value?: string | number | readonly string[];
+    value?: string;
     hint?: string;
@@ -15,3 +15,5 @@ onChange: (value: string) => void;
     maxDate?: Date;
-    decorators?: Record<string, React.ReactNode>;
+    decorators?: Record<string, React.ComponentType<{
+        children: React.ReactNode;
+    }>>;
     extended?: boolean;
@@ -18,0 +20,0 @@ };

es/date-picker/date-picker.d.ts

@@ -8,3 +8,3 @@ import * as React from "react";
     extended?: boolean;
-    value?: string | number | readonly string[];
+    value?: string;
     hint?: string;
@@ -19,3 +19,5 @@ onChange: (value: string) => void;
     defaultYear?: number;
-    decorators?: Record<string, React.ReactNode>;
+    decorators?: Record<string, React.ComponentType<{
+        children: React.ReactNode;
+    }>>;
 };
@@ -22,0 +24,0 @@ declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;

es/date-picker/date-picker.js

@@ -82,3 +82,3 @@ "use client";
     const classes = classNames(css.root, className);
-    return (_jsx("div", { ref: ref, className: classes, children: _jsxs("div", { className: css.inner, children: [_jsx(CalendarHeader, { goToPreviousMonth: goToPreviousMonth, goToNextMonth: goToNextMonth, monthName: monthName, year: year, yearRange: yearRange, monthNames: monthNames, availableMonths: availableMonths, setMonth: setMonth, setYear: setYear, pastMonthDisabled: pastMonthDisabled, futureMonthDisabled: futureMonthDisabled, extended: extended }), _jsxs("div", { className: css.months, children: [_jsx(CalendarMonth, { locale: locale, calendarDates: calendarDates, days: days, i18nWeekDays: i18nWeekDays, month: month, year: year, value: value, hint: hint, onChange: onChange, minDate: minDate, maxDate: maxDate, decorators: decorators, extended: extended }), secondCalendarDates && (_jsx(CalendarMonth, { locale: locale, calendarDates: secondCalendarDates, days: days, i18nWeekDays: i18nWeekDays, month: secondMonth.month, year: secondMonth.year, value: value, hint: hint, onChange: onChange, minDate: minDate, maxDate: maxDate, decorators: decorators, extended: extended }))] })] }) }));
+    return (_jsx("div", { ref: ref, className: classes, children: _jsxs("div", { className: css.inner, children: [_jsx(CalendarHeader, { goToPreviousMonth: goToPreviousMonth, goToNextMonth: goToNextMonth, monthName: monthName, year: year, yearRange: yearRange, monthNames: monthNames, availableMonths: availableMonths, setMonth: setMonth, setYear: setYear, pastMonthDisabled: Boolean(pastMonthDisabled), futureMonthDisabled: Boolean(futureMonthDisabled), extended: extended }), _jsxs("div", { className: css.months, children: [_jsx(CalendarMonth, { locale: locale, calendarDates: calendarDates, days: days, i18nWeekDays: i18nWeekDays, month: month, year: year, value: value, hint: hint, onChange: onChange, minDate: minDate, maxDate: maxDate, decorators: decorators, extended: extended }), secondCalendarDates && (_jsx(CalendarMonth, { locale: locale, calendarDates: secondCalendarDates, days: days, i18nWeekDays: i18nWeekDays, month: secondMonth.month, year: secondMonth.year, value: value, hint: hint, onChange: onChange, minDate: minDate, maxDate: maxDate, decorators: decorators, extended: extended }))] })] }) }));
 }
@@ -85,0 +85,0 @@ function getSecondMonth(month, year) {

es/dialog/dialog.d.ts

@@ -12,5 +12,2 @@ import * as React from "react";
     closeOnBackdropClick?: boolean;
-    /**
-     * @deprecated alwaysRender should not be used
-     */
     alwaysRender?: boolean;
@@ -17,0 +14,0 @@ container?: string | null;

es/dropdown/dropdown.d.ts

@@ -13,4 +13,4 @@ import * as React from "react";
 };
-declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLElement>>;
+declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
 export default _default;
 //# sourceMappingURL=dropdown.d.ts.map

es/dropdown/dropdown.js

 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import Pannel from "./pannel";
-import useWindowDimentions from "../lib/hooks/use-window-dimensions";
+import Panel from "./panel";
+import useWindowDimensions from "../lib/hooks/use-window-dimensions";
 import Popover from "../popover";
 export default React.forwardRef(Dropdown);
 function Dropdown({ title, className, innerClassName, breakpoint = 480, onClose, open, onOpenChange, content, children, }, ref) {
-    const { width: windowWidth } = useWindowDimentions();
-    const displayMode = windowWidth && windowWidth <= breakpoint ? "pannel" : "dropdown";
-    const isInPannelMode = displayMode === "pannel";
-    return isInPannelMode ? (_jsxs(_Fragment, { children: [children, open && (_jsx(Pannel, { ref: ref, title: title, className: className, innerClassName: innerClassName, onClose: onClose, children: content }))] })) : (_jsx(Popover, { ref: ref, trigger: children, className: className, innerClassName: innerClassName, open: open, onOpenChange: onOpenChange, contentProps: {
+    const { width: windowWidth } = useWindowDimensions();
+    const displayMode = windowWidth && windowWidth <= breakpoint ? "panel" : "dropdown";
+    const isInPanelMode = displayMode === "panel";
+    return isInPanelMode ? (_jsxs(_Fragment, { children: [children, open && (_jsx(Panel, { ref: ref, title: title, className: className, innerClassName: innerClassName, onClose: onClose, children: content }))] })) : (_jsx(Popover, { ref: ref, trigger: children, className: className, innerClassName: innerClassName, open: open, onOpenChange: onOpenChange, contentProps: {
             onClick: (e) => e.stopPropagation(),
         }, children: content }));
 }

es/input/date-input.d.ts

@@ -18,3 +18,5 @@ import * as React from "react";
     }) => void;
-    decorators?: Record<string, React.ReactNode>;
+    decorators?: Record<string, React.ComponentType<{
+        children: React.ReactNode;
+    }>>;
     extended?: boolean;
@@ -21,0 +23,0 @@ setTouched?: (touched: boolean) => void;

es/input/date-input.js

@@ -37,6 +37,6 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
     const inputValue = dateValue || uncontrolledDateValue;
-    const formatedValue = inputValue
+    const formattedValue = inputValue
         ? inputValue.toLocaleDateString("fr-FR")
         : "";
-    return (_jsxs(_Fragment, { children: [_jsx(VisuallyHidden, { asChild: true, children: _jsx("input", { className: css.hidden, ref: inputRef, type: "text", value: value, defaultValue: value === undefined ? uncontrolledValue : undefined, onChange: onChange, onFocus: forwardFocus, name: props.name, required: props.required, pattern: props.pattern }) }), _jsx(Dropdown, { ref: dropdownRef, className: css.dateDropdown, innerClassName: css.dateDropdownInner, title: label, onClose: setDatePickerVisible, open: datePickerVisible, onOpenChange: handleOpenChange, content: _jsx(DatePicker, { className: css.datePicker, min: min, max: max, value: value || uncontrolledValue, hint: hint, onChange: _onChange, onDisplayedMonthChange: onDisplayedMonthChange, defaultMonth: defaultMonth, defaultYear: defaultYear, decorators: decorators, extended: extended }), children: _jsx(Input, { ref: ref, type: "text", icon: "Calendar", className: css.dateField, onClick: toggleDatePicker, value: formatedValue, placeholder: placeholder, compact: compact, ...props, readOnly: true, loading: loading, required: undefined, defaultValue: undefined, onChange: undefined, name: undefined, pattern: undefined }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(VisuallyHidden, { asChild: true, children: _jsx("input", { className: css.hidden, ref: inputRef, type: "text", value: value, defaultValue: value === undefined ? uncontrolledValue : undefined, onChange: onChange, onFocus: forwardFocus, name: props.name, required: props.required, pattern: props.pattern }) }), _jsx(Dropdown, { ref: dropdownRef, className: css.dateDropdown, innerClassName: css.dateDropdownInner, title: label, onClose: setDatePickerVisible, open: datePickerVisible, onOpenChange: handleOpenChange, content: _jsx(DatePicker, { className: css.datePicker, min: min, max: max, value: (value || uncontrolledValue), hint: hint, onChange: _onChange, onDisplayedMonthChange: onDisplayedMonthChange, defaultMonth: defaultMonth, defaultYear: defaultYear, decorators: decorators, extended: extended }), children: _jsx(Input, { ref: ref, type: "text", icon: "Calendar", className: css.dateField, onClick: toggleDatePicker, value: formattedValue, placeholder: placeholder, compact: compact, ...props, readOnly: true, loading: loading, required: undefined, defaultValue: undefined, onChange: undefined, name: undefined, pattern: undefined }) })] }));
 }

es/input/input.d.ts

@@ -12,3 +12,5 @@ import * as React from "react";
     defaultYear?: number | undefined;
-    decorators?: Record<string, React.ReactNode> | undefined;
+    decorators?: Record<string, React.ComponentType<{
+        children: React.ReactNode;
+    }>> | undefined;
     extended?: boolean | undefined;
@@ -15,0 +17,0 @@ dropdownAlign?: "right" | "left" | undefined;

es/input/input.js

@@ -49,7 +49,3 @@ "use client";
     const Label = label ? "label" : "div";
-    return (_jsxs("div", { 
-        // @ts-ignore
-        ref: ref, className: classes, children: [_jsxs(Label, { className: css.label, children: [(label || (isValid && !error)) && (_jsxs("span", { className: css.labelText, children: [label, isValid && !error && (_jsx(Icons.Check, { className: css.validIndicator }))] })), isDate ? (_jsx(DateInput, { inputRef: inputRef, label: label, onChange: _onChange, value: value, loading: loading, compact: compact, setTouched: setTouched, ...props })) : (_jsxs("div", { className: css.fieldWrapper, children: [Icon && _jsx(Icon, {}), _jsx("input", { 
-                                // @ts-ignore
-                                ref: inputRef, type: type, className: css.field, value: value, onChange: _onChange, "aria-invalid": isValid !== undefined && !isValid, ...props, disabled: loading || props.disabled, autoComplete: allowOptions ? "off" : undefined, list: allowOptions ? listId : undefined, onKeyDown: handleSpaceKeyPress, onBlur: isDate ? undefined : handleBlur }), allowOptions && (_jsx("datalist", { id: listId, children: options.map((option) => (_jsx("option", { value: option }, option))) })), loading && _jsx(Loader, { variant: "overlay", className: css.loader })] }))] }), patternError && (_jsx("div", { className: css.patternErrorMessage, children: patternError })), error && (_jsx("div", { className: css.errorMessage, role: "alert", children: error }))] }));
+    return (_jsxs("div", { ref: ref, className: classes, children: [_jsxs(Label, { className: css.label, children: [(label || (isValid && !error)) && (_jsxs("span", { className: css.labelText, children: [label, isValid && !error && (_jsx(Icons.Check, { className: css.validIndicator }))] })), isDate ? (_jsx(DateInput, { inputRef: inputRef, label: label, onChange: _onChange, value: value, loading: loading, compact: compact, setTouched: setTouched, ...props })) : (_jsxs("div", { className: css.fieldWrapper, children: [Icon && _jsx(Icon, {}), _jsx("input", { ref: inputRef, type: type, className: css.field, value: value, onChange: _onChange, "aria-invalid": isValid !== undefined && !isValid, ...props, disabled: loading || props.disabled, autoComplete: allowOptions ? "off" : undefined, list: allowOptions ? listId : undefined, onKeyDown: handleSpaceKeyPress, onBlur: isDate ? undefined : handleBlur }), allowOptions && (_jsx("datalist", { id: listId, children: options.map((option) => (_jsx("option", { value: option }, option))) })), loading && _jsx(Loader, { variant: "overlay", className: css.loader })] }))] }), patternError && (_jsx("div", { className: css.patternErrorMessage, children: patternError })), error && (_jsx("div", { className: css.errorMessage, role: "alert", children: error }))] }));
 }

es/input/utils.js

 export function triggerInputChange(node, value) {
-  const inputTypes = [window.HTMLInputElement, window.HTMLSelectElement, window.HTMLTextAreaElement];
-  if (inputTypes.indexOf(node.__proto__.constructor) > -1) {
-    const setValue = Object.getOwnPropertyDescriptor(node.__proto__, "value").set;
-    const event = new Event("input", {
-      bubbles: true
-    });
-    setValue.call(node, value);
-    node.dispatchEvent(event);
-  }
-}
+    const inputTypes = [
+        window.HTMLInputElement,
+        window.HTMLSelectElement,
+        window.HTMLTextAreaElement,
+    ];
+    if (inputTypes.indexOf(Object.getPrototypeOf(node).constructor) > -1) {
+        const setValue = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(node), "value")?.set;
+        const event = new Event("input", { bubbles: true });
+        if (setValue) {
+            setValue.call(node, value);
+            node.dispatchEvent(event);
+        }
+    }
+}

es/multiple-select/multiple-select.js

@@ -80,18 +80,16 @@ "use client";
     });
-    return (_jsxs("div", { 
-        // @ts-ignore
-        ref: ref, className: classes, children: [_jsxs("label", { className: cssInput.label, children: [(label || isValid) && (_jsxs("span", { className: cssInput.labelText, children: [label, isValid && _jsx(Icons.Check, { className: cssInput.validIndicator })] })), _jsx(Dropdown, { ref: dropdownRef, innerClassName: css.dropdownInner, onClose: setOpened, title: label, open: opened, content: options.map((option) => {
-                            const isString = typeof option === "string";
-                            const label = isString ? option : option.label;
-                            const value = isString ? option : option.value;
-                            const disabled = !isString && option.disabled;
-                            const isSelected = values.find((o) => {
-                                const isString = typeof o === "string";
-                                return isString ? o === value : o.value === value;
-                            });
-                            const classes = classNames(css.option, {
-                                [css.optionSelected]: isSelected,
-                            });
-                            return (_jsx("div", { role: "listitem", children: _jsx(Checkbox, { label: label, className: classes, checked: !!isSelected, onChange: _onChange(option), disabled: disabled, tabIndex: opened ? 0 : -1 }) }, value));
-                        }), children: _jsxs("div", { className: cssInput.fieldWrapper, children: [Icon && _jsx(Icon, {}), _jsx("input", { ref: inputRef, type: "text", ...props, className: cssInput.field, value: valueLabel, "aria-invalid": isValid !== undefined && !isValid, onClick: toggleDropdown, disabled: isDisabled, onKeyDown: handleSpaceKeyPress, readOnly: true }), loading && (_jsx(Loader, { variant: "overlay", className: cssInput.loader }))] }) })] }), error && (_jsx("div", { className: cssInput.errorMessage, role: "alert", children: error }))] }));
+    return (_jsxs("div", { ref: ref, className: classes, children: [_jsxs("label", { className: cssInput.label, children: [(label || isValid) && (_jsxs("span", { className: cssInput.labelText, children: [label, isValid && _jsx(Icons.Check, { className: cssInput.validIndicator })] })), _jsx(Dropdown, { ref: dropdownRef, onClose: setOpened, title: label, open: opened, content: _jsx("div", { className: css.dropdownInner, children: options.map((option) => {
+                                const isString = typeof option === "string";
+                                const label = isString ? option : option.label;
+                                const value = isString ? option : option.value;
+                                const disabled = !isString && option.disabled;
+                                const isSelected = values.find((o) => {
+                                    const isString = typeof o === "string";
+                                    return isString ? o === value : o.value === value;
+                                });
+                                const classes = classNames(css.option, {
+                                    [css.optionSelected]: isSelected,
+                                });
+                                return (_jsx("div", { role: "listitem", children: _jsx(Checkbox, { label: label, className: classes, checked: !!isSelected, onChange: _onChange(option), disabled: disabled, tabIndex: opened ? 0 : -1 }) }, value));
+                            }) }), children: _jsxs("div", { className: cssInput.fieldWrapper, children: [Icon && _jsx(Icon, {}), _jsx("input", { ref: inputRef, type: "text", ...props, className: cssInput.field, value: valueLabel, "aria-invalid": isValid !== undefined && !isValid, onClick: toggleDropdown, disabled: isDisabled, onKeyDown: handleSpaceKeyPress, readOnly: true }), loading && (_jsx(Loader, { variant: "overlay", className: cssInput.loader }))] }) })] }), error && (_jsx("div", { className: cssInput.errorMessage, role: "alert", children: error }))] }));
 }
@@ -98,0 +96,0 @@ function getNewValues(option, values, uniqueChoice) {

es/popover/popover.d.ts

@@ -10,4 +10,4 @@ import * as React from "react";
     children: React.ReactNode;
-} & React.RefAttributes<unknown>>;
+} & React.RefAttributes<HTMLDivElement>>;
 export default _default;
 //# sourceMappingURL=popover.d.ts.map

es/textarea/textarea.js

@@ -23,4 +23,4 @@ "use client";
             const computedStyle = window.getComputedStyle(field);
-            const paddingTop = parseInt(computedStyle.getPropertyValue("padding-top") ?? 0);
-            const paddingBottom = parseInt(computedStyle.getPropertyValue("padding-bottom") ?? 0);
+            const paddingTop = parseInt(computedStyle.getPropertyValue("padding-top") ?? "0");
+            const paddingBottom = parseInt(computedStyle.getPropertyValue("padding-bottom") ?? "0");
             const height = paddingTop + field.scrollHeight + paddingBottom;
@@ -53,5 +53,3 @@ field.style.height = `${height}px`;
     });
-    return (_jsxs("div", { className: classes, children: [_jsxs("label", { className: css.label, children: [(label || isValid) && (_jsxs("span", { className: css.labelText, children: [label, isValid && _jsx(Icons.Check, { className: css.validIndicator })] })), _jsxs("div", { 
-                        // @ts-ignore
-                        ref: innerRef, className: css.fieldWrapper, children: [_jsx("textarea", { ...props, className: css.field, value: value, onChange: _onChange, onInput: handleInput, onFocus: handleFocus, onBlur: handleBlur, "aria-invalid": isValid !== undefined && !isValid, disabled: loading || props.disabled }), loading && _jsx(Loader, { variant: "overlay", className: css.loader })] })] }), patternError && (_jsx("div", { className: css.patternErrorMessage, children: patternError })), error && (_jsx("div", { className: css.errorMessage, role: "alert", children: error }))] }));
+    return (_jsxs("div", { className: classes, children: [_jsxs("label", { className: css.label, children: [(label || isValid) && (_jsxs("span", { className: css.labelText, children: [label, isValid && _jsx(Icons.Check, { className: css.validIndicator })] })), _jsxs("div", { ref: innerRef, className: css.fieldWrapper, children: [_jsx("textarea", { ...props, className: css.field, value: value, onChange: _onChange, onInput: handleInput, onFocus: handleFocus, onBlur: handleBlur, "aria-invalid": isValid !== undefined && !isValid, disabled: loading || props.disabled }), loading && _jsx(Loader, { variant: "overlay", className: css.loader })] })] }), patternError && (_jsx("div", { className: css.patternErrorMessage, children: patternError })), error && (_jsx("div", { className: css.errorMessage, role: "alert", children: error }))] }));
 }

package.json

 {
   "name": "dt-design-system",
-  "version": "3.8.5",
+  "version": "3.8.6",
+  "type": "module",
+  "engines": {
+    "node": "20.x"
+  },
   "peerDependencies": {
@@ -21,41 +25,39 @@ "react": "^17.0.0 || ^18.0.0",
   "devDependencies": {
-    "@babel/cli": "7.23.4",
-    "@babel/core": "7.23.7",
+    "@babel/cli": "7.24.1",
+    "@babel/core": "7.24.4",
     "@babel/plugin-proposal-class-properties": "7.18.6",
-    "@babel/preset-react": "7.23.3",
-    "@babel/preset-typescript": "7.23.3",
-    "@storybook/addon-actions": "7.6.10",
-    "@storybook/addon-essentials": "7.6.10",
-    "@storybook/addon-interactions": "7.6.10",
-    "@storybook/addon-links": "7.6.10",
-    "@storybook/react": "7.6.10",
-    "@storybook/react-webpack5": "7.6.10",
+    "@babel/preset-react": "7.24.1",
+    "@babel/preset-typescript": "7.24.1",
+    "@storybook/addon-actions": "8.0.6",
+    "@storybook/addon-essentials": "8.0.6",
+    "@storybook/addon-interactions": "8.0.6",
+    "@storybook/addon-links": "8.0.6",
+    "@storybook/blocks": "8.0.6",
+    "@storybook/manager-api": "8.0.6",
+    "@storybook/react": "8.0.6",
+    "@storybook/react-vite": "8.0.6",
+    "@storybook/theming": "8.0.6",
     "@types/css-modules": "1.0.5",
-    "@types/react": "18.2.48",
-    "@types/react-dom": "18.2.18",
-    "@typescript-eslint/eslint-plugin": "6.19.1",
-    "@typescript-eslint/parser": "6.19.1",
+    "@types/react": "18.2.75",
+    "@types/react-dom": "18.2.24",
+    "@typescript-eslint/eslint-plugin": "7.6.0",
+    "@typescript-eslint/parser": "7.6.0",
     "cpx2": "7.0.1",
-    "eslint": "8.56.0",
-    "eslint-config-prettier": "9.1.0",
-    "eslint-plugin-react": "7.33.2",
-    "eslint-plugin-react-hooks": "4.6.0",
+    "eslint": "9.0.0",
+    "eslint-plugin-react": "7.34.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "storybook": "7.6.10",
-    "storybook-css-modules-preset": "1.1.1",
-    "typescript": "5.3.3"
+    "storybook": "8.0.6",
+    "typescript": "5.4.4",
+    "vite": "5.2.8"
   },
-  "resolutions": {
-    "jackspeak": "2.1.1"
-  },
   "scripts": {
     "clean": "rm -rf es",
-    "build": "babel src -x '.js,.ts,.tsx' -d es && tsc",
-    "lint": "eslint --ext .js,.ts,.tsx src",
+    "build": "tsc",
     "postbuild": "cpx 'src/**/*.{json,css}' es",
     "prepublishOnly": "yarn clean && yarn build",
-    "watch": "yarn clean && babel ./src -x '.js,.ts,.tsx' -d ./es -w & cpx 'src/**/*.{json,css}' ./es -w",
+    "watch": "yarn clean && tsc --watch & cpx 'src/**/*.{json,css}' ./es -w",
     "storybook": "yarn watch & storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "lint": "eslint"
   },
@@ -62,0 +64,0 @@ "packageManager": "yarn@1.22.18",

No alert changes

Improved metrics

Total package byte prevSize

787337

increased by0.16%

Number of package files

194

increased by1.04%

Lines of code

7376

increased by0.01%

Is type module

Yes

Worsened metrics

Dev dependency count

27

increased by3.85%

No dependency changes