@itcase/storybook-config 1.2.40 → 1.2.41

package/README.md

@@ -1,3 +1,70 @@
 # ITCase Storybook Config
 
+Конфигурация Storybook для проектов на React, Next.js и React Native.
+
+Сторисы находятся в папке **`stories`**.
+
+## Запуск Storybook
+
+Перед запуском установите зависимости: `npm install`.
+
+### React (Webpack)
+
+```bash
+npm run storybook-react-webpack
+# или через Makefile (с очисткой кэша):
+make storybook-react-webpack
+```
+
+### React (Vite)
+
+```bash
+npm run storybook-vite
+# или:
+make storybook-vite
+```
+
+### Next.js
+
+```bash
+npm run storybook-next-js
+# или:
+make storybook-next-js
+```
+
+### Next.js + Vite
+
+```bash
+npm run storybook-next-js-vite
+# или:
+make storybook-next-js-vite
+```
+
+### React Native (нативное приложение)
+
+**iOS:**
+
+```bash
+npm run storybook-react-native-ios
+# или:
+make storybook-react-native-ios
+```
+
+**Android:**
+
+```bash
+npm run storybook-react-native-android
+# или:
+make storybook-react-native-android
+```
+
+### React Native Web
+
+Storybook в браузере для React Native компонентов:
+
+```bash
+npm run storybook-react-native-web
+# или:
+make storybook-react-native-web
+```
 

package/dist/{UIContext-7wI7giOz.js → Notification-CP4IyQPf.js}

@@ -2852,24 +2852,185 @@ const useAppearanceConfig = (appearance, componentConfig, isDisabled) => {
     return appearanceConfig;
 };
 
-const STATUSES$1 = {
+const STATUSES = {
     error: 'error',
     info: 'info',
     success: 'success',
     warning: 'warning',
 };
-const NotificationsContext$1 = createContext([]);
+const NotificationsContext = createContext([]);
 /* eslint-disable @typescript-eslint/no-unused-vars */
-const NotificationsAPIContext$1 = createContext({
+const NotificationsAPIContext = createContext({
     hideNotifications: (targetId) => { },
     showNotification: (notification, onClose) => { },
-    notificationStatuses: STATUSES$1,
+    notificationStatuses: STATUSES,
 });
+/* eslint-enable @typescript-eslint/no-unused-vars */
+function NotificationsProvider(props) {
+    const { initialNotificationsList = [], isLogRequestsErrors, children } = props;
+    const [notificationsList, setNotificationsList] = useState(() => {
+        // We need to set id to every notification item and original list also be have new id's
+        return (initialNotificationsList || []).map((notificationItem) => {
+            return createNotification(notificationItem, notificationItem.onClose);
+        });
+    });
+    const hideNotifications = useCallback((targetId) => {
+        // If not target, then nothing to hide
+        if (!targetId) {
+            return;
+        }
+        setNotificationsList((prevNotificationsList) => {
+            const newState = prevNotificationsList.filter((notificationItem) => {
+                // Check on need to hide, if current notification is target for hide
+                const isNeedToHide = String(notificationItem.id) === String(targetId);
+                // Callback for close if exists
+                if (isNeedToHide) {
+                    clearTimeout(notificationItem._closeTimeout);
+                    // @typescript-eslint/no-unused-expressions
+                    notificationItem.onClose && notificationItem.onClose();
+                }
+                // Save in state if no need to hide
+                return !isNeedToHide;
+            });
+            // Set new notifications list without target item to state
+            return newState;
+        });
+    }, []);
+    const showNotification = useCallback((notification, onClose) => {
+        const newNotificationItem = createNotification(notification, onClose);
+        setNotificationsList((prevNotificationsList) => {
+            const newState = prevNotificationsList.slice();
+            const existsNotificationIndex = newState.findIndex((notificationItem) => String(notificationItem.id) === String(newNotificationItem.id));
+            // Add new notification
+            if (existsNotificationIndex === -1) {
+                return [...newState, newNotificationItem];
+            }
+            // Or update exists notification
+            const updatedNotificationItem = newState[existsNotificationIndex];
+            // Clear timeout to avoid close event for updated notification
+            clearTimeout(updatedNotificationItem._closeTimeout);
+            updatedNotificationItem._closeTimeout = undefined;
+            // Replace exists notification by new one
+            newState[existsNotificationIndex] = newNotificationItem;
+            return newState;
+        });
+        if (newNotificationItem.closeByTime) {
+            newNotificationItem._closeTimeout = setTimeout(() => hideNotifications(newNotificationItem.id), newNotificationItem.closeByTime);
+        }
+        return newNotificationItem;
+    }, 
+    // "hideNotifications" is never changed
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    const notificationsAPI = useMemo(() => ({
+        hideNotifications: hideNotifications,
+        notificationStatuses: STATUSES,
+        showNotification: showNotification,
+    }), 
+    // Functions is never changes, no sense to set as dependencies
+    // eslint-disable-next-line
+    []);
+    useEffect(() => {
+        // Set timeout for initial notifications list one time on first render
+        notificationsList.forEach((notificationItem) => {
+            if (notificationItem.closeByTime) {
+                setTimeout(() => hideNotifications(notificationItem.id), notificationItem.closeByTime);
+            }
+        });
+        // Show notifications on all requests errors.
+        // Enable one time without disabling. Use "isLogging" on request config level
+        // to disable notifications logger.
+        if (isLogRequestsErrors) {
+            axiosInstanceITCase.responseErrorHandler.loggerManager = {
+                log: (responseError) => {
+                    if (responseError.message) {
+                        // prevent from showing many network errors
+                        const errorListToDedupe = ['network'];
+                        const id = errorListToDedupe.includes(responseError.key)
+                            ? responseError.key
+                            : undefined;
+                        showNotification({
+                            id: id,
+                            title: responseError.message,
+                            status: 'error',
+                            closeByTime: 4000,
+                        });
+                    }
+                },
+            };
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return (jsx(NotificationsAPIContext.Provider, { value: notificationsAPI, children: jsx(NotificationsContext.Provider, { value: notificationsList, children: children }) }));
+}
 function useNotifications() {
-    return useContext(NotificationsContext$1);
+    return useContext(NotificationsContext);
 }
 function useNotificationsAPI() {
-    return useContext(NotificationsAPIContext$1);
+    return useContext(NotificationsAPIContext);
+}
+const statusToAppearanceList = {
+    error: 'errorPrimary sizeS solid rounded',
+    info: 'infoPrimary sizeS solid rounded',
+    success: 'successPrimary sizeS solid rounded',
+    warning: 'warningPrimary sizeS solid rounded',
+};
+function createNotification(notification, onClose) {
+    // Default notification item properties
+    let id = v4().split('-')[0];
+    let title = '';
+    let text = '';
+    let closeIcon = '';
+    let closeIconSrc = '';
+    let type = 'float';
+    let buttonLabel = '';
+    let status = STATUSES.warning;
+    let closeByTime = 4500;
+    let appearance = statusToAppearanceList[status];
+    let after = null;
+    let isLoading = false;
+    let closeIconAppearance = '';
+    let onClickButton = () => { };
+    if (typeof notification === 'string') {
+        text = notification;
+    }
+    else if (typeof notification === 'object') {
+        id = String(notification.id ?? id);
+        title = notification.title ?? title;
+        text = notification.text ?? text;
+        closeIconAppearance =
+            notification.closeIconAppearance ?? closeIconAppearance;
+        type = notification.type ?? type;
+        closeIcon = notification.closeIcon ?? closeIcon;
+        closeIconSrc = notification.closeIconSrc ?? closeIconSrc;
+        buttonLabel = notification.buttonLabel ?? buttonLabel;
+        onClickButton = notification.onClickButton ?? onClickButton;
+        status = notification.status ?? status;
+        closeByTime = notification.closeByTime ?? closeByTime;
+        isLoading = notification.isLoading ?? isLoading;
+        after = notification.after ?? after;
+        appearance =
+            notification.appearance ??
+                statusToAppearanceList[notification.status] ??
+                appearance;
+    }
+    return {
+        id: id,
+        appearance: appearance,
+        type: type,
+        title: title,
+        status: status,
+        text: text,
+        buttonLabel: buttonLabel,
+        after: after,
+        closeByTime: closeByTime,
+        closeIcon: closeIcon,
+        closeIconAppearance: closeIconAppearance,
+        closeIconSrc: closeIconSrc,
+        isLoading: isLoading,
+        onClickButton: onClickButton,
+        onClose: onClose,
+    };
 }
 
 var tablet = "48em";
@@ -3007,7 +3168,7 @@ const setViewportProperty = () => {
     document.documentElement.style.setProperty('--vh', `${vh}px`);
 };
 
-const UserDeviceContext$1 = createContext({
+const UserDeviceContext = createContext({
     isMobile: false,
     isTablet: false,
     isDesktop: false,
@@ -3015,7 +3176,7 @@ const UserDeviceContext$1 = createContext({
     deviceCurrentType: '',
     deviceTypesList: [],
 });
-memo(function UIProvider(props) {
+const UIProvider = memo(function UIProvider(props) {
     const { userDeviceState = {}, children } = props;
     /** NOTE:
      * Remember that the "useMediaQueries" hook works by next scenario:
@@ -3061,10 +3222,10 @@ memo(function UIProvider(props) {
         setViewportProperty();
         window.addEventListener('resize', setViewportProperty);
     }, []);
-    return (jsx(UserDeviceContext$1.Provider, { value: deviceContextState, children: children }));
+    return (jsx(UserDeviceContext.Provider, { value: deviceContextState, children: children }));
 });
 function useUserDeviceContext() {
-    const context = useContext(UserDeviceContext$1);
+    const context = useContext(UserDeviceContext);
     if (!context) {
         throw new Error('useUserDeviceContext is not defined');
     }
@@ -3456,7 +3617,7 @@ function useStyles(props) {
                 }
                 else {
                     // Some properties doesn't have any units
-                    const ignorePX = ['zIndex', 'order', 'flexGrow'].includes(styleAttributeKey);
+                    const ignorePX = ['zIndex', 'order', 'flexGrow', 'opacity'].includes(styleAttributeKey);
                     if (!ignorePX) {
                         // Add px to non-unit value
                         value = `${value}px`;
@@ -5524,236 +5685,4 @@ function NotificationWrapper(props) {
     return (jsx("div", { className: clsx('notification', className), "data-testid": dataTestId, "data-tour": dataTour, children: jsx("div", { className: "notification__wrapper", children: notifications.map((notification) => (jsx(Notification, { id: notification.id, appearance: notification.appearance, type: notification.type, title: notification.title, status: notification.status, text: notification.text, buttonLabel: notification.buttonLabel, after: notification.after, closeIcon: notification.closeIcon, closeIconSrc: notification.closeIconSrc, isLoading: notification.isLoading, onClickButton: notification.onClickButton, onClickClose: hideNotifications }, notification.id))) }) }));
 }
 
-const STATUSES = {
-    error: 'error',
-    info: 'info',
-    success: 'success',
-    warning: 'warning',
-};
-const NotificationsContext = createContext([]);
-/* eslint-disable @typescript-eslint/no-unused-vars */
-const NotificationsAPIContext = createContext({
-    hideNotifications: (targetId) => { },
-    showNotification: (notification, onClose) => { },
-    notificationStatuses: STATUSES,
-});
-/* eslint-enable @typescript-eslint/no-unused-vars */
-function NotificationsProvider(props) {
-    const { initialNotificationsList = [], isLogRequestsErrors, children } = props;
-    const [notificationsList, setNotificationsList] = useState(() => {
-        // We need to set id to every notification item and original list also be have new id's
-        return (initialNotificationsList || []).map((notificationItem) => {
-            return createNotification(notificationItem, notificationItem.onClose);
-        });
-    });
-    const hideNotifications = useCallback((targetId) => {
-        // If not target, then nothing to hide
-        if (!targetId) {
-            return;
-        }
-        setNotificationsList((prevNotificationsList) => {
-            const newState = prevNotificationsList.filter((notificationItem) => {
-                // Check on need to hide, if current notification is target for hide
-                const isNeedToHide = String(notificationItem.id) === String(targetId);
-                // Callback for close if exists
-                if (isNeedToHide) {
-                    clearTimeout(notificationItem._closeTimeout);
-                    // @typescript-eslint/no-unused-expressions
-                    notificationItem.onClose && notificationItem.onClose();
-                }
-                // Save in state if no need to hide
-                return !isNeedToHide;
-            });
-            // Set new notifications list without target item to state
-            return newState;
-        });
-    }, []);
-    const showNotification = useCallback((notification, onClose) => {
-        const newNotificationItem = createNotification(notification, onClose);
-        setNotificationsList((prevNotificationsList) => {
-            const newState = prevNotificationsList.slice();
-            const existsNotificationIndex = newState.findIndex((notificationItem) => String(notificationItem.id) === String(newNotificationItem.id));
-            // Add new notification
-            if (existsNotificationIndex === -1) {
-                return [...newState, newNotificationItem];
-            }
-            // Or update exists notification
-            const updatedNotificationItem = newState[existsNotificationIndex];
-            // Clear timeout to avoid close event for updated notification
-            clearTimeout(updatedNotificationItem._closeTimeout);
-            updatedNotificationItem._closeTimeout = undefined;
-            // Replace exists notification by new one
-            newState[existsNotificationIndex] = newNotificationItem;
-            return newState;
-        });
-        if (newNotificationItem.closeByTime) {
-            newNotificationItem._closeTimeout = setTimeout(() => hideNotifications(newNotificationItem.id), newNotificationItem.closeByTime);
-        }
-        return newNotificationItem;
-    }, 
-    // "hideNotifications" is never changed
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []);
-    const notificationsAPI = useMemo(() => ({
-        hideNotifications: hideNotifications,
-        notificationStatuses: STATUSES,
-        showNotification: showNotification,
-    }), 
-    // Functions is never changes, no sense to set as dependencies
-    // eslint-disable-next-line
-    []);
-    useEffect(() => {
-        // Set timeout for initial notifications list one time on first render
-        notificationsList.forEach((notificationItem) => {
-            if (notificationItem.closeByTime) {
-                setTimeout(() => hideNotifications(notificationItem.id), notificationItem.closeByTime);
-            }
-        });
-        // Show notifications on all requests errors.
-        // Enable one time without disabling. Use "isLogging" on request config level
-        // to disable notifications logger.
-        if (isLogRequestsErrors) {
-            axiosInstanceITCase.responseErrorHandler.loggerManager = {
-                log: (responseError) => {
-                    if (responseError.message) {
-                        // prevent from showing many network errors
-                        const errorListToDedupe = ['network'];
-                        const id = errorListToDedupe.includes(responseError.key)
-                            ? responseError.key
-                            : undefined;
-                        showNotification({
-                            id: id,
-                            title: responseError.message,
-                            status: 'error',
-                            closeByTime: 4000,
-                        });
-                    }
-                },
-            };
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    return (jsx(NotificationsAPIContext.Provider, { value: notificationsAPI, children: jsx(NotificationsContext.Provider, { value: notificationsList, children: children }) }));
-}
-const statusToAppearanceList = {
-    error: 'errorPrimary sizeS solid rounded',
-    info: 'infoPrimary sizeS solid rounded',
-    success: 'successPrimary sizeS solid rounded',
-    warning: 'warningPrimary sizeS solid rounded',
-};
-function createNotification(notification, onClose) {
-    // Default notification item properties
-    let id = v4().split('-')[0];
-    let title = '';
-    let text = '';
-    let closeIcon = '';
-    let closeIconSrc = '';
-    let type = 'float';
-    let buttonLabel = '';
-    let status = STATUSES.warning;
-    let closeByTime = 4500;
-    let appearance = statusToAppearanceList[status];
-    let after = null;
-    let isLoading = false;
-    let closeIconAppearance = '';
-    let onClickButton = () => { };
-    if (typeof notification === 'string') {
-        text = notification;
-    }
-    else if (typeof notification === 'object') {
-        id = String(notification.id ?? id);
-        title = notification.title ?? title;
-        text = notification.text ?? text;
-        closeIconAppearance =
-            notification.closeIconAppearance ?? closeIconAppearance;
-        type = notification.type ?? type;
-        closeIcon = notification.closeIcon ?? closeIcon;
-        closeIconSrc = notification.closeIconSrc ?? closeIconSrc;
-        buttonLabel = notification.buttonLabel ?? buttonLabel;
-        onClickButton = notification.onClickButton ?? onClickButton;
-        status = notification.status ?? status;
-        closeByTime = notification.closeByTime ?? closeByTime;
-        isLoading = notification.isLoading ?? isLoading;
-        after = notification.after ?? after;
-        appearance =
-            notification.appearance ??
-                statusToAppearanceList[notification.status] ??
-                appearance;
-    }
-    return {
-        id: id,
-        appearance: appearance,
-        type: type,
-        title: title,
-        status: status,
-        text: text,
-        buttonLabel: buttonLabel,
-        after: after,
-        closeByTime: closeByTime,
-        closeIcon: closeIcon,
-        closeIconAppearance: closeIconAppearance,
-        closeIconSrc: closeIconSrc,
-        isLoading: isLoading,
-        onClickButton: onClickButton,
-        onClose: onClose,
-    };
-}
-
-const UserDeviceContext = createContext({
-    isMobile: false,
-    isTablet: false,
-    isDesktop: false,
-    deviceCurrentMainType: '',
-    deviceCurrentType: '',
-    deviceTypesList: [],
-});
-const UIProvider = memo(function UIProvider(props) {
-    const { userDeviceState = {}, children } = props;
-    /** NOTE:
-     * Remember that the "useMediaQueries" hook works by next scenario:
-     * when changing the device type(browser width), the hook will first "enable"
-     * the new type(set true), and then "disable" the previous one(set false),
-     * what provoke to double rendering, and in moment we have two different types as "true".
-     * We will need to look at how to change this behavior.
-     */
-    const allDevicesTypes = useMediaQueries(userDeviceState);
-    const { isMobile, isTablet, isDesktop, ...fullNamedDeviceTypes } = allDevicesTypes;
-    const deviceCurrentMainType = (isMobile && 'mobile') ||
-        (isTablet && 'tablet') ||
-        (isDesktop && 'desktop') ||
-        '';
-    const [deviceCurrentType, deviceTypesList] = useMemo(() => {
-        const deviceTypesList = Object.keys(allDevicesTypes).map((key) => camelCase(key.replace('is', '')));
-        // In same time "allDevicesTypes" can contain "isMobile" and "isMobileLarge" as true
-        let deviceCurrentType = Object.keys(fullNamedDeviceTypes).find(
-        // If "fullNamedDeviceTypes.isMobileLarge: true" - that our device
-        (key) => fullNamedDeviceTypes[key]);
-        // Or set main type (e.g. "isMobile")
-        if (!deviceCurrentType) {
-            deviceCurrentType = deviceCurrentMainType;
-        }
-        deviceCurrentType = camelCase(deviceCurrentType.replace('is', ''));
-        // On server side render we doesn't known user device and we need to set special word
-        return [deviceCurrentType || '_none_', deviceTypesList];
-    }, [allDevicesTypes, deviceCurrentMainType, fullNamedDeviceTypes]);
-    const deviceContextState = useMemo(() => {
-        return {
-            ...allDevicesTypes,
-            deviceCurrentMainType: deviceCurrentMainType,
-            deviceCurrentType: deviceCurrentType,
-            deviceTypesList: deviceTypesList,
-        };
-    }, [
-        allDevicesTypes,
-        deviceCurrentMainType,
-        deviceCurrentType,
-        deviceTypesList,
-    ]);
-    useEffect(() => {
-        setViewportProperty();
-        window.addEventListener('resize', setViewportProperty);
-    }, []);
-    return (jsx(UserDeviceContext.Provider, { value: deviceContextState, children: children }));
-});
-
 export { NotificationsProvider as N, UIProvider as U, NotificationWrapper as a };

package/dist/{UIContext-Xx74DZVi.js → Notification-CVCYHdTh.js}

@@ -2872,24 +2872,185 @@ const useAppearanceConfig = (appearance, componentConfig, isDisabled) => {
     return appearanceConfig;
 };
 
-const STATUSES$1 = {
+const STATUSES = {
     error: 'error',
     info: 'info',
     success: 'success',
     warning: 'warning',
 };
-const NotificationsContext$1 = React.createContext([]);
+const NotificationsContext = React.createContext([]);
 /* eslint-disable @typescript-eslint/no-unused-vars */
-const NotificationsAPIContext$1 = React.createContext({
+const NotificationsAPIContext = React.createContext({
     hideNotifications: (targetId) => { },
     showNotification: (notification, onClose) => { },
-    notificationStatuses: STATUSES$1,
+    notificationStatuses: STATUSES,
 });
+/* eslint-enable @typescript-eslint/no-unused-vars */
+function NotificationsProvider(props) {
+    const { initialNotificationsList = [], isLogRequestsErrors, children } = props;
+    const [notificationsList, setNotificationsList] = React.useState(() => {
+        // We need to set id to every notification item and original list also be have new id's
+        return (initialNotificationsList || []).map((notificationItem) => {
+            return createNotification(notificationItem, notificationItem.onClose);
+        });
+    });
+    const hideNotifications = React.useCallback((targetId) => {
+        // If not target, then nothing to hide
+        if (!targetId) {
+            return;
+        }
+        setNotificationsList((prevNotificationsList) => {
+            const newState = prevNotificationsList.filter((notificationItem) => {
+                // Check on need to hide, if current notification is target for hide
+                const isNeedToHide = String(notificationItem.id) === String(targetId);
+                // Callback for close if exists
+                if (isNeedToHide) {
+                    clearTimeout(notificationItem._closeTimeout);
+                    // @typescript-eslint/no-unused-expressions
+                    notificationItem.onClose && notificationItem.onClose();
+                }
+                // Save in state if no need to hide
+                return !isNeedToHide;
+            });
+            // Set new notifications list without target item to state
+            return newState;
+        });
+    }, []);
+    const showNotification = React.useCallback((notification, onClose) => {
+        const newNotificationItem = createNotification(notification, onClose);
+        setNotificationsList((prevNotificationsList) => {
+            const newState = prevNotificationsList.slice();
+            const existsNotificationIndex = newState.findIndex((notificationItem) => String(notificationItem.id) === String(newNotificationItem.id));
+            // Add new notification
+            if (existsNotificationIndex === -1) {
+                return [...newState, newNotificationItem];
+            }
+            // Or update exists notification
+            const updatedNotificationItem = newState[existsNotificationIndex];
+            // Clear timeout to avoid close event for updated notification
+            clearTimeout(updatedNotificationItem._closeTimeout);
+            updatedNotificationItem._closeTimeout = undefined;
+            // Replace exists notification by new one
+            newState[existsNotificationIndex] = newNotificationItem;
+            return newState;
+        });
+        if (newNotificationItem.closeByTime) {
+            newNotificationItem._closeTimeout = setTimeout(() => hideNotifications(newNotificationItem.id), newNotificationItem.closeByTime);
+        }
+        return newNotificationItem;
+    }, 
+    // "hideNotifications" is never changed
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    const notificationsAPI = React.useMemo(() => ({
+        hideNotifications: hideNotifications,
+        notificationStatuses: STATUSES,
+        showNotification: showNotification,
+    }), 
+    // Functions is never changes, no sense to set as dependencies
+    // eslint-disable-next-line
+    []);
+    React.useEffect(() => {
+        // Set timeout for initial notifications list one time on first render
+        notificationsList.forEach((notificationItem) => {
+            if (notificationItem.closeByTime) {
+                setTimeout(() => hideNotifications(notificationItem.id), notificationItem.closeByTime);
+            }
+        });
+        // Show notifications on all requests errors.
+        // Enable one time without disabling. Use "isLogging" on request config level
+        // to disable notifications logger.
+        if (isLogRequestsErrors) {
+            common.axiosInstanceITCase.responseErrorHandler.loggerManager = {
+                log: (responseError) => {
+                    if (responseError.message) {
+                        // prevent from showing many network errors
+                        const errorListToDedupe = ['network'];
+                        const id = errorListToDedupe.includes(responseError.key)
+                            ? responseError.key
+                            : undefined;
+                        showNotification({
+                            id: id,
+                            title: responseError.message,
+                            status: 'error',
+                            closeByTime: 4000,
+                        });
+                    }
+                },
+            };
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return (jsxRuntime.jsx(NotificationsAPIContext.Provider, { value: notificationsAPI, children: jsxRuntime.jsx(NotificationsContext.Provider, { value: notificationsList, children: children }) }));
+}
 function useNotifications() {
-    return React.useContext(NotificationsContext$1);
+    return React.useContext(NotificationsContext);
 }
 function useNotificationsAPI() {
-    return React.useContext(NotificationsAPIContext$1);
+    return React.useContext(NotificationsAPIContext);
+}
+const statusToAppearanceList = {
+    error: 'errorPrimary sizeS solid rounded',
+    info: 'infoPrimary sizeS solid rounded',
+    success: 'successPrimary sizeS solid rounded',
+    warning: 'warningPrimary sizeS solid rounded',
+};
+function createNotification(notification, onClose) {
+    // Default notification item properties
+    let id = v4().split('-')[0];
+    let title = '';
+    let text = '';
+    let closeIcon = '';
+    let closeIconSrc = '';
+    let type = 'float';
+    let buttonLabel = '';
+    let status = STATUSES.warning;
+    let closeByTime = 4500;
+    let appearance = statusToAppearanceList[status];
+    let after = null;
+    let isLoading = false;
+    let closeIconAppearance = '';
+    let onClickButton = () => { };
+    if (typeof notification === 'string') {
+        text = notification;
+    }
+    else if (typeof notification === 'object') {
+        id = String(notification.id ?? id);
+        title = notification.title ?? title;
+        text = notification.text ?? text;
+        closeIconAppearance =
+            notification.closeIconAppearance ?? closeIconAppearance;
+        type = notification.type ?? type;
+        closeIcon = notification.closeIcon ?? closeIcon;
+        closeIconSrc = notification.closeIconSrc ?? closeIconSrc;
+        buttonLabel = notification.buttonLabel ?? buttonLabel;
+        onClickButton = notification.onClickButton ?? onClickButton;
+        status = notification.status ?? status;
+        closeByTime = notification.closeByTime ?? closeByTime;
+        isLoading = notification.isLoading ?? isLoading;
+        after = notification.after ?? after;
+        appearance =
+            notification.appearance ??
+                statusToAppearanceList[notification.status] ??
+                appearance;
+    }
+    return {
+        id: id,
+        appearance: appearance,
+        type: type,
+        title: title,
+        status: status,
+        text: text,
+        buttonLabel: buttonLabel,
+        after: after,
+        closeByTime: closeByTime,
+        closeIcon: closeIcon,
+        closeIconAppearance: closeIconAppearance,
+        closeIconSrc: closeIconSrc,
+        isLoading: isLoading,
+        onClickButton: onClickButton,
+        onClose: onClose,
+    };
 }
 
 var tablet = "48em";
@@ -3027,7 +3188,7 @@ const setViewportProperty = () => {
     document.documentElement.style.setProperty('--vh', `${vh}px`);
 };
 
-const UserDeviceContext$1 = React.createContext({
+const UserDeviceContext = React.createContext({
     isMobile: false,
     isTablet: false,
     isDesktop: false,
@@ -3035,7 +3196,7 @@ const UserDeviceContext$1 = React.createContext({
     deviceCurrentType: '',
     deviceTypesList: [],
 });
-React.memo(function UIProvider(props) {
+const UIProvider = React.memo(function UIProvider(props) {
     const { userDeviceState = {}, children } = props;
     /** NOTE:
      * Remember that the "useMediaQueries" hook works by next scenario:
@@ -3081,10 +3242,10 @@ React.memo(function UIProvider(props) {
         setViewportProperty();
         window.addEventListener('resize', setViewportProperty);
     }, []);
-    return (jsxRuntime.jsx(UserDeviceContext$1.Provider, { value: deviceContextState, children: children }));
+    return (jsxRuntime.jsx(UserDeviceContext.Provider, { value: deviceContextState, children: children }));
 });
 function useUserDeviceContext() {
-    const context = React.useContext(UserDeviceContext$1);
+    const context = React.useContext(UserDeviceContext);
     if (!context) {
         throw new Error('useUserDeviceContext is not defined');
     }
@@ -3476,7 +3637,7 @@ function useStyles(props) {
                 }
                 else {
                     // Some properties doesn't have any units
-                    const ignorePX = ['zIndex', 'order', 'flexGrow'].includes(styleAttributeKey);
+                    const ignorePX = ['zIndex', 'order', 'flexGrow', 'opacity'].includes(styleAttributeKey);
                     if (!ignorePX) {
                         // Add px to non-unit value
                         value = `${value}px`;
@@ -5544,238 +5705,6 @@ function NotificationWrapper(props) {
     return (jsxRuntime.jsx("div", { className: clsx('notification', className), "data-testid": dataTestId, "data-tour": dataTour, children: jsxRuntime.jsx("div", { className: "notification__wrapper", children: notifications.map((notification) => (jsxRuntime.jsx(Notification, { id: notification.id, appearance: notification.appearance, type: notification.type, title: notification.title, status: notification.status, text: notification.text, buttonLabel: notification.buttonLabel, after: notification.after, closeIcon: notification.closeIcon, closeIconSrc: notification.closeIconSrc, isLoading: notification.isLoading, onClickButton: notification.onClickButton, onClickClose: hideNotifications }, notification.id))) }) }));
 }
 
-const STATUSES = {
-    error: 'error',
-    info: 'info',
-    success: 'success',
-    warning: 'warning',
-};
-const NotificationsContext = React.createContext([]);
-/* eslint-disable @typescript-eslint/no-unused-vars */
-const NotificationsAPIContext = React.createContext({
-    hideNotifications: (targetId) => { },
-    showNotification: (notification, onClose) => { },
-    notificationStatuses: STATUSES,
-});
-/* eslint-enable @typescript-eslint/no-unused-vars */
-function NotificationsProvider(props) {
-    const { initialNotificationsList = [], isLogRequestsErrors, children } = props;
-    const [notificationsList, setNotificationsList] = React.useState(() => {
-        // We need to set id to every notification item and original list also be have new id's
-        return (initialNotificationsList || []).map((notificationItem) => {
-            return createNotification(notificationItem, notificationItem.onClose);
-        });
-    });
-    const hideNotifications = React.useCallback((targetId) => {
-        // If not target, then nothing to hide
-        if (!targetId) {
-            return;
-        }
-        setNotificationsList((prevNotificationsList) => {
-            const newState = prevNotificationsList.filter((notificationItem) => {
-                // Check on need to hide, if current notification is target for hide
-                const isNeedToHide = String(notificationItem.id) === String(targetId);
-                // Callback for close if exists
-                if (isNeedToHide) {
-                    clearTimeout(notificationItem._closeTimeout);
-                    // @typescript-eslint/no-unused-expressions
-                    notificationItem.onClose && notificationItem.onClose();
-                }
-                // Save in state if no need to hide
-                return !isNeedToHide;
-            });
-            // Set new notifications list without target item to state
-            return newState;
-        });
-    }, []);
-    const showNotification = React.useCallback((notification, onClose) => {
-        const newNotificationItem = createNotification(notification, onClose);
-        setNotificationsList((prevNotificationsList) => {
-            const newState = prevNotificationsList.slice();
-            const existsNotificationIndex = newState.findIndex((notificationItem) => String(notificationItem.id) === String(newNotificationItem.id));
-            // Add new notification
-            if (existsNotificationIndex === -1) {
-                return [...newState, newNotificationItem];
-            }
-            // Or update exists notification
-            const updatedNotificationItem = newState[existsNotificationIndex];
-            // Clear timeout to avoid close event for updated notification
-            clearTimeout(updatedNotificationItem._closeTimeout);
-            updatedNotificationItem._closeTimeout = undefined;
-            // Replace exists notification by new one
-            newState[existsNotificationIndex] = newNotificationItem;
-            return newState;
-        });
-        if (newNotificationItem.closeByTime) {
-            newNotificationItem._closeTimeout = setTimeout(() => hideNotifications(newNotificationItem.id), newNotificationItem.closeByTime);
-        }
-        return newNotificationItem;
-    }, 
-    // "hideNotifications" is never changed
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []);
-    const notificationsAPI = React.useMemo(() => ({
-        hideNotifications: hideNotifications,
-        notificationStatuses: STATUSES,
-        showNotification: showNotification,
-    }), 
-    // Functions is never changes, no sense to set as dependencies
-    // eslint-disable-next-line
-    []);
-    React.useEffect(() => {
-        // Set timeout for initial notifications list one time on first render
-        notificationsList.forEach((notificationItem) => {
-            if (notificationItem.closeByTime) {
-                setTimeout(() => hideNotifications(notificationItem.id), notificationItem.closeByTime);
-            }
-        });
-        // Show notifications on all requests errors.
-        // Enable one time without disabling. Use "isLogging" on request config level
-        // to disable notifications logger.
-        if (isLogRequestsErrors) {
-            common.axiosInstanceITCase.responseErrorHandler.loggerManager = {
-                log: (responseError) => {
-                    if (responseError.message) {
-                        // prevent from showing many network errors
-                        const errorListToDedupe = ['network'];
-                        const id = errorListToDedupe.includes(responseError.key)
-                            ? responseError.key
-                            : undefined;
-                        showNotification({
-                            id: id,
-                            title: responseError.message,
-                            status: 'error',
-                            closeByTime: 4000,
-                        });
-                    }
-                },
-            };
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    return (jsxRuntime.jsx(NotificationsAPIContext.Provider, { value: notificationsAPI, children: jsxRuntime.jsx(NotificationsContext.Provider, { value: notificationsList, children: children }) }));
-}
-const statusToAppearanceList = {
-    error: 'errorPrimary sizeS solid rounded',
-    info: 'infoPrimary sizeS solid rounded',
-    success: 'successPrimary sizeS solid rounded',
-    warning: 'warningPrimary sizeS solid rounded',
-};
-function createNotification(notification, onClose) {
-    // Default notification item properties
-    let id = v4().split('-')[0];
-    let title = '';
-    let text = '';
-    let closeIcon = '';
-    let closeIconSrc = '';
-    let type = 'float';
-    let buttonLabel = '';
-    let status = STATUSES.warning;
-    let closeByTime = 4500;
-    let appearance = statusToAppearanceList[status];
-    let after = null;
-    let isLoading = false;
-    let closeIconAppearance = '';
-    let onClickButton = () => { };
-    if (typeof notification === 'string') {
-        text = notification;
-    }
-    else if (typeof notification === 'object') {
-        id = String(notification.id ?? id);
-        title = notification.title ?? title;
-        text = notification.text ?? text;
-        closeIconAppearance =
-            notification.closeIconAppearance ?? closeIconAppearance;
-        type = notification.type ?? type;
-        closeIcon = notification.closeIcon ?? closeIcon;
-        closeIconSrc = notification.closeIconSrc ?? closeIconSrc;
-        buttonLabel = notification.buttonLabel ?? buttonLabel;
-        onClickButton = notification.onClickButton ?? onClickButton;
-        status = notification.status ?? status;
-        closeByTime = notification.closeByTime ?? closeByTime;
-        isLoading = notification.isLoading ?? isLoading;
-        after = notification.after ?? after;
-        appearance =
-            notification.appearance ??
-                statusToAppearanceList[notification.status] ??
-                appearance;
-    }
-    return {
-        id: id,
-        appearance: appearance,
-        type: type,
-        title: title,
-        status: status,
-        text: text,
-        buttonLabel: buttonLabel,
-        after: after,
-        closeByTime: closeByTime,
-        closeIcon: closeIcon,
-        closeIconAppearance: closeIconAppearance,
-        closeIconSrc: closeIconSrc,
-        isLoading: isLoading,
-        onClickButton: onClickButton,
-        onClose: onClose,
-    };
-}
-
-const UserDeviceContext = React.createContext({
-    isMobile: false,
-    isTablet: false,
-    isDesktop: false,
-    deviceCurrentMainType: '',
-    deviceCurrentType: '',
-    deviceTypesList: [],
-});
-const UIProvider = React.memo(function UIProvider(props) {
-    const { userDeviceState = {}, children } = props;
-    /** NOTE:
-     * Remember that the "useMediaQueries" hook works by next scenario:
-     * when changing the device type(browser width), the hook will first "enable"
-     * the new type(set true), and then "disable" the previous one(set false),
-     * what provoke to double rendering, and in moment we have two different types as "true".
-     * We will need to look at how to change this behavior.
-     */
-    const allDevicesTypes = useMediaQueries(userDeviceState);
-    const { isMobile, isTablet, isDesktop, ...fullNamedDeviceTypes } = allDevicesTypes;
-    const deviceCurrentMainType = (isMobile && 'mobile') ||
-        (isTablet && 'tablet') ||
-        (isDesktop && 'desktop') ||
-        '';
-    const [deviceCurrentType, deviceTypesList] = React.useMemo(() => {
-        const deviceTypesList = Object.keys(allDevicesTypes).map((key) => camelCase(key.replace('is', '')));
-        // In same time "allDevicesTypes" can contain "isMobile" and "isMobileLarge" as true
-        let deviceCurrentType = Object.keys(fullNamedDeviceTypes).find(
-        // If "fullNamedDeviceTypes.isMobileLarge: true" - that our device
-        (key) => fullNamedDeviceTypes[key]);
-        // Or set main type (e.g. "isMobile")
-        if (!deviceCurrentType) {
-            deviceCurrentType = deviceCurrentMainType;
-        }
-        deviceCurrentType = camelCase(deviceCurrentType.replace('is', ''));
-        // On server side render we doesn't known user device and we need to set special word
-        return [deviceCurrentType || '_none_', deviceTypesList];
-    }, [allDevicesTypes, deviceCurrentMainType, fullNamedDeviceTypes]);
-    const deviceContextState = React.useMemo(() => {
-        return {
-            ...allDevicesTypes,
-            deviceCurrentMainType: deviceCurrentMainType,
-            deviceCurrentType: deviceCurrentType,
-            deviceTypesList: deviceTypesList,
-        };
-    }, [
-        allDevicesTypes,
-        deviceCurrentMainType,
-        deviceCurrentType,
-        deviceTypesList,
-    ]);
-    React.useEffect(() => {
-        setViewportProperty();
-        window.addEventListener('resize', setViewportProperty);
-    }, []);
-    return (jsxRuntime.jsx(UserDeviceContext.Provider, { value: deviceContextState, children: children }));
-});
-
 exports.NotificationWrapper = NotificationWrapper;
 exports.NotificationsProvider = NotificationsProvider;
 exports.UIProvider = UIProvider;

package/dist/cjs/decorators/withNextDecorator.js

@@ -2,12 +2,12 @@
 
 var _rollupPluginBabelHelpers = require('../../_rollupPluginBabelHelpers-Wvf9ehn_.js');
 var React = require('react');
-var UIContext = require('../../UIContext-Xx74DZVi.js');
+var Notification = require('../../Notification-CVCYHdTh.js');
 require('react/jsx-runtime');
+require('@itcase/common');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('lodash/upperFirst');
-require('@itcase/common');
 require('lodash/maxBy');
 
 var _excluded = ["storesData"];
@@ -32,9 +32,9 @@ function withNextDecoratorFactory(_ref) {
         pageProps: appArgs
       });
     }
-    return /*#__PURE__*/React.createElement(RootStoreProvider, appArgs.rootStoreInitialData, /*#__PURE__*/React.createElement(UIContext.UIProvider, null, /*#__PURE__*/React.createElement(UIContext.NotificationsProvider, {
+    return /*#__PURE__*/React.createElement(RootStoreProvider, appArgs.rootStoreInitialData, /*#__PURE__*/React.createElement(Notification.UIProvider, null, /*#__PURE__*/React.createElement(Notification.NotificationsProvider, {
       initialNotificationsList: parameters.initialNotificationsList || args.initialNotificationsList || []
-    }, /*#__PURE__*/React.createElement(UIContext.NotificationWrapper, {
+    }, /*#__PURE__*/React.createElement(Notification.NotificationWrapper, {
       className: "notification_global notification_global_right_top"
     }), /*#__PURE__*/React.createElement(Story, appContext))));
   };

package/dist/cjs/decorators/withUiDecorator.js

@@ -1,20 +1,20 @@
 'use strict';
 
 var React = require('react');
-var UIContext = require('../../UIContext-Xx74DZVi.js');
+var Notification = require('../../Notification-CVCYHdTh.js');
 require('react/jsx-runtime');
+require('@itcase/common');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('lodash/upperFirst');
-require('@itcase/common');
 require('lodash/maxBy');
 
 function withUiDecorator(Story, _ref) {
   var args = _ref.args,
     parameters = _ref.parameters;
-  return /*#__PURE__*/React.createElement(UIContext.UIProvider, null, /*#__PURE__*/React.createElement(UIContext.NotificationsProvider, {
+  return /*#__PURE__*/React.createElement(Notification.UIProvider, null, /*#__PURE__*/React.createElement(Notification.NotificationsProvider, {
     initialNotificationsList: parameters.initialNotificationsList || args.initialNotificationsList || []
-  }, /*#__PURE__*/React.createElement(UIContext.NotificationWrapper, null), /*#__PURE__*/React.createElement(Story, null)));
+  }, /*#__PURE__*/React.createElement(Notification.NotificationWrapper, null), /*#__PURE__*/React.createElement(Story, null)));
 }
 
 exports.withUiDecorator = withUiDecorator;

package/dist/cjs/decorators.js

@@ -14,7 +14,7 @@ require('./components/FormSubmitWrapper.js');
 require('lodash/camelCase');
 require('@itcase/common');
 require('msw');
-require('../UIContext-Xx74DZVi.js');
+require('../Notification-CVCYHdTh.js');
 require('react/jsx-runtime');
 require('lodash/upperFirst');
 require('lodash/maxBy');

package/dist/decorators/withNextDecorator.js

@@ -1,11 +1,11 @@
 import { _ as _objectWithoutProperties } from '../_rollupPluginBabelHelpers-47UUmXIE.js';
 import React__default from 'react';
-import { U as UIProvider, N as NotificationsProvider, a as NotificationWrapper } from '../UIContext-7wI7giOz.js';
+import { U as UIProvider, N as NotificationsProvider, a as NotificationWrapper } from '../Notification-CP4IyQPf.js';
 import 'react/jsx-runtime';
+import '@itcase/common';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import 'lodash/upperFirst';
-import '@itcase/common';
 import 'lodash/maxBy';
 
 var _excluded = ["storesData"];

package/dist/decorators/withUiDecorator.js

@@ -1,10 +1,10 @@
 import React__default from 'react';
-import { U as UIProvider, N as NotificationsProvider, a as NotificationWrapper } from '../UIContext-7wI7giOz.js';
+import { U as UIProvider, N as NotificationsProvider, a as NotificationWrapper } from '../Notification-CP4IyQPf.js';
 import 'react/jsx-runtime';
+import '@itcase/common';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import 'lodash/upperFirst';
-import '@itcase/common';
 import 'lodash/maxBy';
 
 function withUiDecorator(Story, _ref) {

package/dist/decorators.js

@@ -12,7 +12,7 @@ import './components/FormSubmitWrapper.js';
 import 'lodash/camelCase';
 import '@itcase/common';
 import 'msw';
-import './UIContext-7wI7giOz.js';
+import './Notification-CP4IyQPf.js';
 import 'react/jsx-runtime';
 import 'lodash/upperFirst';
 import 'lodash/maxBy';

package/package.json

@@ -1,7 +1,6 @@
 {
   "name": "@itcase/storybook-config",
-  "version": "1.2.40",
-  "type": "module",
+  "version": "1.2.41",
   "author": "ITCase",
   "description": "Storybook configuration package",
   "engines": {
@@ -12,13 +11,11 @@
     "build-js": "rm -rf dist && NODE_ENV=production rollup -c",
     "prepare": "npx husky install",
     "prepack": "npm run build",
-    "android": "react-native run-android",
-    "ios": "react-native run-ios",
-    "react-native-start": "react-native start -- --reset-cache",
-    "storybook-react-native-start": "sb-rn-get-stories --config-path ./.storybook-react-native && STORYBOOK_ENABLED=true react-native start",
+    "ios": "react-native run-ios -- --reset-cache",
+    "android": "react-native run-android -- --reset-cache",
     "storybook-react-native-ios": "sb-rn-get-stories --config-path ./.storybook-react-native && react-native run-ios",
     "storybook-react-native-android": "sb-rn-get-stories --config-path ./.storybook-react-native && react-native run-android",
-    "storybook-webpack": "storybook dev -p 6006 --config-dir .storybook-react-webpack5",
+    "storybook-react-webpack": "storybook dev -p 6006 --config-dir .storybook-react-webpack",
     "storybook-next-js": "storybook dev -p 6006 --config-dir .storybook-next-js",
     "storybook-vite": "storybook dev -p 6006 --config-dir .storybook-vite",
     "storybook-next-js-vite": "storybook dev -p 6006 --config-dir ..storybook-next-js-vite",
@@ -84,45 +81,34 @@
     "react": "19.2.4",
     "react-dom": "19.2.4"
   },
-  "peerDependencies": {
-    "storybook": "^10.2.8",
-    "@storybook/nextjs-vite": "^10.2.8",
-    "@storybook/addon-links": "^10.2.8",
-    "@storybook/addon-themes": "^10.2.8",
-    "@storybook/addon-designs": "^11.1.2",
-    "@storybook/addon-docs": "^10.2.8",
-    "@storybook/addon-vitest": "^10.2.8",
-    "storybook-addon-source-link": "^2.0.1",
-    "@storybook/builder-vite": "^10.2.8"
-  },
   "dependencies": {
     "@gorhom/bottom-sheet": "^5.2.8",
     "@itcase/config": "^1.6.51",
     "@itcase/storybook-addon-auth": "^1.0.5",
-    "@react-native-async-storage/async-storage": "^2.2.0",
+    "@react-native-async-storage/async-storage": "^3.0.1",
     "@react-native-community/datetimepicker": "^8.6.0",
-    "@storybook/addon-designs": "^11.1.2",
-    "@storybook/addon-docs": "^10.2.10",
-    "@storybook/addon-links": "^10.2.10",
+    "@storybook/addon-docs": "^10.2.14",
+    "@storybook/addon-links": "^10.2.14",
     "@storybook/addon-ondevice-actions": "10.2.3",
     "@storybook/addon-ondevice-backgrounds": "10.2.3",
     "@storybook/addon-ondevice-controls": "10.2.3",
     "@storybook/addon-ondevice-notes": "^10.2.3",
     "@storybook/addon-react-native-web": "^0.0.29",
     "@storybook/addon-styling-webpack": "^3.0.0",
-    "@storybook/addon-themes": "^10.2.10",
-    "@storybook/addon-vitest": "^10.2.10",
+    "@storybook/addon-themes": "^10.2.14",
+    "@storybook/addon-vitest": "^10.2.14",
     "@storybook/addon-webpack5-compiler-swc": "^4.0.2",
-    "@storybook/nextjs": "^10.2.10",
-    "@storybook/nextjs-vite": "^10.2.10",
-    "@storybook/react": "^10.2.10",
+    "@storybook/builder-vite": "^10.2.14",
+    "@storybook/nextjs": "^10.2.14",
+    "@storybook/nextjs-vite": "^10.2.14",
+    "@storybook/react": "^10.2.14",
     "@storybook/react-native": "10.2.3",
     "@storybook/react-native-ui-lite": "10.2.3",
-    "@storybook/react-native-web-vite": "^10.2.10",
-    "@storybook/react-vite": "^10.2.10",
-    "@vitest/browser-playwright": "^4.0.18",
-    "@storybook/react-webpack5": "^10.2.10",
+    "@storybook/react-native-web-vite": "^10.2.14",
+    "@storybook/react-vite": "^10.2.14",
+    "@storybook/react-webpack5": "^10.2.14",
     "@vitejs/plugin-react": "^5.1.4",
+    "@vitest/browser-playwright": "^4.0.18",
     "babel-loader": "^10.0.0",
     "babel-plugin-react-native-web": "^0.21.2",
     "babel-plugin-transform-inline-environment-variables": "^0.4.4",
@@ -131,16 +117,16 @@
     "msw": "^2.12.10",
     "msw-storybook-addon": "^2.0.6",
     "react": "19.2.4",
-    "react-dom": "^19.2.4",
-    "react-native": "0.84.0",
+    "react-dom": "19.2.4",
+    "react-native": "0.84.1",
     "react-native-gesture-handler": "^2.30.0",
     "react-native-reanimated": "^4.2.2",
-    "react-native-safe-area-context": "^5.6.2",
+    "react-native-safe-area-context": "^5.7.0",
     "react-native-svg": "^15.15.3",
     "react-native-web": "^0.21.2",
     "react-native-worklets": "^0.7.4",
-    "storybook": "^10.2.10",
-    "storybook-addon-source-link": "^2.0.1",
+    "storybook": "^10.2.14",
+    "vite-plugin-babel": "^1.5.1",
     "vite-plugin-svgr": "^4.5.0",
     "vite-tsconfig-paths": "^6.1.1",
     "vitest": "^4.0.18",
@@ -155,40 +141,40 @@
     "@commitlint/config-conventional": "^20.4.2",
     "@itcase/common": "^1.2.41",
     "@itcase/lint": "^1.1.97",
-    "@itcase/ui": "^1.9.61",
-    "@react-native-community/cli": "20.1.1",
-    "@react-native-community/cli-platform-android": "20.1.1",
-    "@react-native-community/cli-platform-ios": "20.1.1",
-    "@react-native/babel-preset": "0.84.0",
-    "@react-native/eslint-config": "0.84.0",
-    "@react-native/metro-config": "0.84.0",
-    "@react-native/typescript-config": "0.84.0",
+    "@itcase/ui": "^1.9.66",
+    "@react-native-community/cli": "20.1.2",
+    "@react-native-community/cli-platform-android": "20.1.2",
+    "@react-native-community/cli-platform-ios": "20.1.2",
+    "@react-native/babel-preset": "0.84.1",
+    "@react-native/eslint-config": "0.84.1",
+    "@react-native/metro-config": "0.84.1",
+    "@react-native/typescript-config": "0.84.1",
     "@rollup/plugin-babel": "^6.1.0",
     "@rollup/plugin-commonjs": "^29.0.0",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
-    "@storybook/addon-docs": "^10.2.10",
+    "@storybook/addon-docs": "^10.2.14",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "babel-plugin-transform-inline-environment-variables": "^0.4.4",
-    "conventional-changelog-conventionalcommits": "^9.1.0",
+    "conventional-changelog-conventionalcommits": "^9.2.0",
     "eslint": "9.39.2",
     "glob": "^13.0.6",
     "husky": "^9.1.7",
-    "lint-staged": "^16.2.7",
+    "lint-staged": "^16.3.1",
     "next": "^16.1.6",
     "prettier": "^3.8.1",
     "react": "19.2.4",
     "react-docgen-typescript": "^2.4.0",
     "react-dom": "19.2.4",
-    "react-native": "0.84.0",
+    "react-native": "0.84.1",
     "react-native-web": "^0.21.2",
-    "rollup": "^4.57.1",
+    "rollup": "^4.59.0",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "semantic-release": "^25.0.3",
-    "storybook": "^10.2.10",
-    "stylelint": "^17.3.0",
+    "storybook": "^10.2.14",
+    "stylelint": "^17.4.0",
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
     "vite-plugin-babel": "^1.5.1"