@beydesign/storybook 0.2.12 → 0.2.14

package/dist/stories/Buttons/MainButton.js

@@ -220,7 +220,7 @@ const StyledButton = styled.button `
       var(--global-shadows-shadow-xs-color);
   }
 `;
-export const MainButton = ({ onClick, text, disabled = false, loading = false, type = ButtonType.Button, style, size = ButtonSize.xl, hierarchy = ButtonHierarchy.Primary, displayIcon, displayIconMode = ButtonDisplayMode.Default, state = ButtonState.Default, shape = ButtonShape.Square, destructive = false, showLeadingIcon = false, showTrailingIcon = false, leadingIcon = 'Circle', trailingIcon = 'Circle', testId, }) => {
+export const MainButton = ({ onClick, text, disabled = false, loading = false, type = ButtonType.Button, style, size = ButtonSize.xl, hierarchy = ButtonHierarchy.Primary, displayIcon, iconWeight = 'regular', displayIconMode = ButtonDisplayMode.Default, state = ButtonState.Default, shape = ButtonShape.Square, destructive = false, showLeadingIcon = false, showTrailingIcon = false, leadingIcon = 'Circle', trailingIcon = 'Circle', testId, }) => {
     const getIconSize = () => {
         const sizes = {
             [ButtonSize.xl]: 24,
@@ -282,7 +282,7 @@ export const MainButton = ({ onClick, text, disabled = false, loading = false, t
     const iconProps = {
         size: getIconSize(),
         color: disabled ? 'var(--color-text-text-disabled)' : 'currentColor',
-        weight: 'regular',
+        weight: iconWeight,
     };
     const sizeStyles = getButtonSize();
     const renderContent = () => {

package/dist/stories/Buttons/types.d.ts

@@ -1,4 +1,5 @@
 import type { CSSProperties } from 'react';
+import type { IconWeight } from '@phosphor-icons/react';
 import { IconName } from '../../utils';
 import { SxProps } from '@mui/material';
 import { Theme } from '@mui/material';
@@ -86,6 +87,8 @@ export interface MainButtonProps {
     hierarchy?: ButtonHierarchy;
     /** Icon to display when in icon mode */
     displayIcon?: IconName;
+    /** Weight of the rendered icons (defaults to `regular`) */
+    iconWeight?: IconWeight;
     /** How to display the icon */
     displayIconMode?: ButtonDisplayMode;
     /** Current state of the button */

package/dist/stories/EntityCard/EntityCard.js

@@ -17,7 +17,8 @@ export const EntityCard = ({ view = 'avatar', name, image, description = '', sho
     const showBadge = showStatusBadge && !!statusBadgeText;
     return (_jsxs(Box, { width: cardWidth, display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', bgcolor: hovered
             ? 'var(--color-background-bg-card-highlight-hover)'
-            : 'var(--color-background-bg-card-highlight)', border: '1px solid var(--color-border-border-subtle)', boxSizing: 'border-box', overflow: 'hidden', onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), sx: { transition: 'background-color 0.15s ease-in-out' }, "data-testid": `${entityKey}-entity-card`, children: [_jsxs(Box, { position: 'relative', width: '100%', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', overflow: 'hidden', sx: { aspectRatio: imageAspectRatio }, children: [image && !imageError ? (_jsx("img", { src: image, alt: name, width: '100%', height: '100%', style: { objectFit: 'cover', height: '100%', width: '100%' }, onError: () => setImageError(true) })) : (_jsx(Box, { width: '100%', height: '100%', bgcolor: 'var(--color-background-bg-element)', display: 'flex', justifyContent: 'center', alignItems: 'center', children: _jsx(UserCircle, { size: 74, weight: 'thin', color: 'var(--color-text-text-subtle)' }) })), _jsx(Box, { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, bgcolor: 'var(--color-background-bg-card-highlight-hover)', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: {
+            : 'var(--color-background-bg-card-highlight)', border: '1px solid var(--color-border-border-subtle)', boxSizing: 'border-box', overflow: 'hidden', onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), sx: { transition: 'background-color 0.15s ease-in-out' }, "data-testid": `${entityKey}-entity-card`, children: [_jsxs(Box, { position: 'relative', width: '100%', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', overflow: 'hidden', sx: { aspectRatio: imageAspectRatio }, children: [image && !imageError ? (_jsx("img", { src: image, alt: name, width: '100%', height: '100%', style: { objectFit: 'cover', height: '100%', width: '100%' }, onError: () => setImageError(true) })) : (_jsx(Box, { width: '100%', height: '100%', bgcolor: 'var(--color-background-bg-element)', display: 'flex', justifyContent: 'center', alignItems: 'center', children: _jsx(UserCircle, { size: 74, weight: 'thin', color: 'var(--color-text-text-subtle)' }) })), _jsx(Box, { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: {
+                            backgroundImage: 'linear-gradient(180deg, rgba(21, 0, 73, 0) 0%, rgba(72, 29, 180, 0.152) 16.76%, rgba(32, 13, 82, 0.36) 100%)',
                             opacity: hovered ? 1 : 0,
                             transition: 'opacity 0.15s ease-in-out',
                             pointerEvents: 'none',

package/dist/stories/UI/Menu.js

@@ -4,7 +4,7 @@ import { Fragment, useState } from 'react';
 import { MainButton, ButtonDisplayMode, ButtonHierarchy, ButtonType, ButtonSize, } from '../Buttons';
 import { Typography, TypographySize, TypographyWeight } from '../Typography';
 import { getIconComponent } from '../../utils';
-export const Menu = ({ icon = 'DotsThree', items, style, testKey, size = ButtonSize.xl, hierarchy = ButtonHierarchy.Secondary, }) => {
+export const Menu = ({ icon = 'DotsThreeOutline', iconWeight = 'bold', items, style, testKey, size = ButtonSize.xl, hierarchy = ButtonHierarchy.Tertiary, }) => {
     const [anchorEl, setAnchorEl] = useState(null);
     const open = Boolean(anchorEl);
     const handleClick = (event) => {
@@ -24,7 +24,14 @@ export const Menu = ({ icon = 'DotsThree', items, style, testKey, size = ButtonS
             return 'var(--color-text-text-error)';
         return 'var(--color-text-text-title)';
     };
-    return (_jsxs(Fragment, { children: [_jsx(MainButton, { displayIcon: icon, onClick: handleClick, type: ButtonType.Button, displayIconMode: ButtonDisplayMode.Only, hierarchy: hierarchy, size: size, style: style, testId: `${testKey}-menu-button` }), _jsx(MuiMenu, { id: "basic-menu", "data-testid": `${testKey}-menu`, anchorEl: anchorEl, open: open, onClose: handleClose, MenuListProps: {
+    return (_jsxs(Fragment, { children: [_jsx(MainButton, { displayIcon: icon, iconWeight: iconWeight, onClick: handleClick, type: ButtonType.Button, displayIconMode: ButtonDisplayMode.Only, hierarchy: hierarchy, size: size, style: {
+                    // The menu trigger sits on top of media (cards, images), so it uses a
+                    // theme-aware translucent overlay (white 30% in light, black 30% in
+                    // dark) with no shadow. Consumer `style` can still override.
+                    background: 'var(--color-background-bg-button-overlay)',
+                    boxShadow: 'none',
+                    ...style,
+                }, testId: `${testKey}-menu-button` }), _jsx(MuiMenu, { id: "basic-menu", "data-testid": `${testKey}-menu`, anchorEl: anchorEl, open: open, onClose: handleClose, MenuListProps: {
                     'aria-labelledby': 'basic-button',
                     style: {
                         padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)',

package/dist/stories/UI/Menu.stories.js

@@ -1,5 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Menu } from './Menu';
 import { ButtonSize, ButtonHierarchy } from '../Buttons';
+// The Menu trigger uses a theme-aware translucent overlay background
+// (`bg-button-overlay`), so it's designed to sit on top of media. This backdrop
+// mirrors how it appears on cards (EntityCard / AgentCard) — without it, the
+// overlay reads as a faint box against the plain page.
+const mediaBackdrop = 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?fm=jpg&q=60&w=600&ixlib=rb-4.0.3';
 const meta = {
     title: 'Design System/Components/UI/Menu',
     component: Menu,
@@ -7,16 +13,38 @@ const meta = {
         layout: 'centered',
     },
     tags: ['autodocs'],
+    decorators: [
+        (Story) => (_jsx("div", { style: {
+                width: 240,
+                height: 160,
+                borderRadius: 8,
+                overflow: 'hidden',
+                backgroundImage: `url(${mediaBackdrop})`,
+                backgroundSize: 'cover',
+                backgroundPosition: 'center',
+                display: 'flex',
+                alignItems: 'flex-start',
+                justifyContent: 'flex-end',
+                padding: 8,
+            }, children: _jsx(Story, {}) })),
+    ],
     argTypes: {
         icon: {
             control: 'select',
-            options: ['DotsThree', 'Pencil', 'Trash'],
-            defaultValue: 'DotsThree',
-            description: 'The icon to display in the menu',
+            options: ['DotsThreeOutline', 'DotsThree', 'Pencil', 'Trash'],
+            description: 'The icon to display in the menu trigger',
             table: {
-                type: {
-                    summary: 'string',
-                },
+                type: { summary: 'IconName' },
+                defaultValue: { summary: 'DotsThreeOutline' },
+            },
+        },
+        iconWeight: {
+            control: 'select',
+            options: ['thin', 'light', 'regular', 'bold', 'fill', 'duotone'],
+            description: 'Weight of the trigger icon',
+            table: {
+                type: { summary: 'IconWeight' },
+                defaultValue: { summary: 'bold' },
             },
         },
         items: {
@@ -50,7 +78,7 @@ const meta = {
             description: 'Hierarchy of the trigger button',
             table: {
                 type: { summary: 'ButtonHierarchy' },
-                defaultValue: { summary: ButtonHierarchy.Secondary },
+                defaultValue: { summary: ButtonHierarchy.Tertiary },
             },
         },
     },
@@ -58,7 +86,6 @@ const meta = {
 export default meta;
 export const Default = {
     args: {
-        icon: 'DotsThree',
         items: [
             { label: 'Edit', onClick: () => { }, destructive: false, icon: 'Pencil' },
             { label: 'Delete', onClick: () => { }, destructive: true, icon: 'Trash' },

package/dist/stories/UI/TabMenu.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TabMenuProps } from './types';
+export declare const TabMenu: React.FC<TabMenuProps>;

package/dist/stories/UI/TabMenu.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useLayoutEffect, useRef, useState } from 'react';
+import { Box } from '@mui/material';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+import { TabMenuSize } from './types';
+const SIZE_TOKENS = {
+    [TabMenuSize.md]: {
+        containerGap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)',
+        containerPadding: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)',
+        tabPaddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)',
+        tabRadius: 'var(--spacing-tokens-size-in-px-radius-radius-xs)',
+        tabHeight: '40px',
+        dividerHeight: '24px',
+        textSize: TypographySize.TextM,
+        textWeight: TypographyWeight.SemiBold,
+    },
+    [TabMenuSize.sm]: {
+        containerGap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xxs)',
+        containerPadding: 'var(--spacing-tokens-size-in-px-spacing-spacing-xxs)',
+        tabPaddingY: '5px',
+        tabRadius: 'var(--spacing-tokens-size-in-px-radius-radius-sm)',
+        tabHeight: 'auto',
+        dividerHeight: '20px',
+        textSize: TypographySize.TextS,
+        textWeight: TypographyWeight.Medium,
+    },
+};
+const normalizeTab = (tab) => typeof tab === 'string' ? { label: tab } : tab;
+export const TabMenu = ({ tabs, activeTab = 0, onTabChange, size = TabMenuSize.md, showDividers = true, animated = true, style, tabStyle, testId, }) => {
+    const tokens = SIZE_TOKENS[size];
+    const containerRef = useRef(null);
+    const tabRefs = useRef([]);
+    const [indicator, setIndicator] = useState(null);
+    useLayoutEffect(() => {
+        const measure = () => {
+            const container = containerRef.current;
+            const tab = tabRefs.current[activeTab];
+            if (!container || !tab)
+                return;
+            const containerRect = container.getBoundingClientRect();
+            const tabRect = tab.getBoundingClientRect();
+            setIndicator({
+                left: tabRect.left - containerRect.left,
+                top: tabRect.top - containerRect.top,
+                width: tabRect.width,
+                height: tabRect.height,
+            });
+        };
+        measure();
+        window.addEventListener('resize', measure);
+        return () => window.removeEventListener('resize', measure);
+    }, [activeTab, size, showDividers, tabs]);
+    return (_jsxs(Box, { ref: containerRef, "data-testid": testId, position: 'relative', display: 'inline-flex', flexDirection: 'row', alignItems: 'center', gap: tokens.containerGap, padding: tokens.containerPadding, bgcolor: 'var(--color-background-bg-component)', border: '1px solid var(--color-border-border-component)', borderRadius: 'var(--spacing-tokens-size-in-px-radius-radius-md)', sx: style, children: [indicator && (_jsx(Box, { "aria-hidden": true, position: 'absolute', bgcolor: 'var(--color-background-bg-brand-transparent)', borderRadius: tokens.tabRadius, sx: {
+                    left: 0,
+                    top: 0,
+                    width: indicator.width,
+                    height: indicator.height,
+                    transform: `translate(${indicator.left}px, ${indicator.top}px)`,
+                    transition: animated
+                        ? 'transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1)'
+                        : 'none',
+                    pointerEvents: 'none',
+                    zIndex: 0,
+                } })), tabs.map((tab, index) => {
+                const { label } = normalizeTab(tab);
+                const isActive = index === activeTab;
+                return (_jsxs(React.Fragment, { children: [showDividers && index > 0 && (_jsx(Box, { width: '1px', height: tokens.dividerHeight, bgcolor: 'var(--color-border-border-divider)', flexShrink: 0, sx: { zIndex: 1 } })), _jsx(Box, { ref: (el) => {
+                                tabRefs.current[index] = el;
+                            }, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', position: 'relative', flexShrink: 0, height: tokens.tabHeight, paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-4xl)', paddingY: tokens.tabPaddingY, borderRadius: tokens.tabRadius, onClick: onTabChange ? () => onTabChange(index) : undefined, sx: {
+                                zIndex: 1,
+                                cursor: onTabChange ? 'pointer' : 'default',
+                                '&:hover': onTabChange && !isActive
+                                    ? {
+                                        bgcolor: 'var(--color-background-bg-brand-transparent-hover)',
+                                        transition: 'background-color 0.15s ease',
+                                    }
+                                    : undefined,
+                                ...tabStyle,
+                            }, children: _jsx(Typography, { size: tokens.textSize, weight: tokens.textWeight, color: isActive
+                                    ? 'var(--color-text-text-clicable)'
+                                    : 'var(--color-text-text-subtle)', textStyle: {
+                                    transition: animated ? 'color 0.25s ease' : 'none',
+                                }, children: label }) })] }, index));
+            })] }));
+};

package/dist/stories/UI/TabMenu.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { TabMenu } from './TabMenu';
+declare const meta: Meta<typeof TabMenu>;
+export default meta;
+type Story = StoryObj<typeof TabMenu>;
+export declare const Medium: Story;
+export declare const Small: Story;
+export declare const MediumStatic: Story;
+export declare const SmallStatic: Story;

package/dist/stories/UI/TabMenu.stories.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { TabMenu } from './TabMenu';
+import { TabMenuSize } from './types';
+const meta = {
+    title: 'Design System/Components/UI/TabMenu',
+    component: TabMenu,
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=6516-41431',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        tabs: {
+            control: 'object',
+            description: 'Tabs to render (labels or { label, value } objects)',
+            table: {
+                type: { summary: 'string[] | TabMenuTab[]' },
+            },
+        },
+        activeTab: {
+            control: 'number',
+            description: 'Index of the active tab',
+            table: {
+                type: { summary: 'number' },
+                defaultValue: { summary: '0' },
+            },
+        },
+        onTabChange: {
+            description: 'Called with the index of the clicked tab',
+            table: {
+                type: { summary: 'function' },
+            },
+        },
+        size: {
+            control: 'select',
+            options: Object.values(TabMenuSize),
+            description: 'Size variant of the tab menu',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'md' },
+            },
+        },
+        showDividers: {
+            control: 'boolean',
+            description: 'Show the vertical dividers between tabs',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'true' },
+            },
+        },
+        animated: {
+            control: 'boolean',
+            description: 'Animate the active highlight when switching tabs',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'true' },
+            },
+        },
+        testId: {
+            control: 'text',
+            description: 'Test ID of the tab menu',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+    },
+};
+export default meta;
+const TABS = ['Tab name', 'Tab name', 'Tab name', 'Tab name', 'Tab name'];
+const InteractiveTabMenu = (args) => {
+    const [activeTab, setActiveTab] = useState(args.activeTab ?? 0);
+    return _jsx(TabMenu, { ...args, activeTab: activeTab, onTabChange: setActiveTab });
+};
+export const Medium = {
+    render: (args) => _jsx(InteractiveTabMenu, { ...args }),
+    args: {
+        tabs: TABS,
+        activeTab: 0,
+        size: TabMenuSize.md,
+        showDividers: true,
+        animated: true,
+        testId: 'tab-menu',
+    },
+};
+export const Small = {
+    render: (args) => _jsx(InteractiveTabMenu, { ...args }),
+    args: {
+        ...Medium.args,
+        size: TabMenuSize.sm,
+    },
+};
+export const MediumStatic = {
+    render: (args) => _jsx(InteractiveTabMenu, { ...args }),
+    args: {
+        ...Medium.args,
+        animated: false,
+    },
+};
+export const SmallStatic = {
+    render: (args) => _jsx(InteractiveTabMenu, { ...args }),
+    args: {
+        ...Medium.args,
+        size: TabMenuSize.sm,
+        animated: false,
+    },
+};

package/dist/stories/UI/index.d.ts

@@ -12,3 +12,4 @@ export * from './SkeletonLoader';
 export * from './Topbar';
 export * from './types';
 export * from './Stepper';
+export * from './TabMenu';

package/dist/stories/UI/index.js

@@ -12,3 +12,4 @@ export * from './SkeletonLoader';
 export * from './Topbar';
 export * from './types';
 export * from './Stepper';
+export * from './TabMenu';

package/dist/stories/UI/types.d.ts

@@ -1,5 +1,6 @@
 import { Theme, SxProps, TooltipProps } from '@mui/material';
 import { ReactElement, ReactNode } from 'react';
+import type { IconWeight } from '@phosphor-icons/react';
 import { IconName } from '../../utils';
 import { ButtonSize, ButtonHierarchy } from '../Buttons';
 /**
@@ -200,6 +201,8 @@ export interface MenuItemProps {
 export type MenuProps = {
     /** Icon */
     icon?: IconName;
+    /** Weight of the trigger icon (defaults to `bold`) */
+    iconWeight?: IconWeight;
     /** Items */
     items?: MenuItemProps[];
     /** Style */
@@ -444,3 +447,42 @@ export interface StepperProps {
     /** Connector width of the stepper */
     connectorWidth?: string | number;
 }
+/**
+ * TabMenu size variants
+ */
+export declare enum TabMenuSize {
+    md = "md",
+    sm = "sm"
+}
+/**
+ * A single tab within a {@link TabMenu}.
+ */
+export interface TabMenuTab {
+    /** Label shown on the tab */
+    label: string;
+    /** Optional value identifying the tab. Defaults to the label. */
+    value?: string;
+}
+/**
+ * TabMenu component props — a bordered segmented control of selectable tabs.
+ */
+export interface TabMenuProps {
+    /** Tabs to render. Accepts labels or `{ label, value }` objects. */
+    tabs: (string | TabMenuTab)[];
+    /** Index of the active tab. Defaults to `0`. */
+    activeTab?: number;
+    /** Called with the index of the tab that was clicked. */
+    onTabChange?: (index: number) => void;
+    /** Size variant. Defaults to `Md`. */
+    size?: TabMenuSize;
+    /** Show the vertical dividers between tabs. Defaults to `true`. */
+    showDividers?: boolean;
+    /** Animate the active highlight when switching tabs. Defaults to `true`. */
+    animated?: boolean;
+    /** Custom style of the container. */
+    style?: SxProps<Theme>;
+    /** Custom style applied to each tab. */
+    tabStyle?: SxProps<Theme>;
+    /** Test ID of the tab menu. */
+    testId?: string;
+}

package/dist/stories/UI/types.js

@@ -119,3 +119,11 @@ export var FeatureBannerMedia;
     FeatureBannerMedia["Image"] = "Image";
     FeatureBannerMedia["None"] = "None";
 })(FeatureBannerMedia || (FeatureBannerMedia = {}));
+/**
+ * TabMenu size variants
+ */
+export var TabMenuSize;
+(function (TabMenuSize) {
+    TabMenuSize["md"] = "md";
+    TabMenuSize["sm"] = "sm";
+})(TabMenuSize || (TabMenuSize = {}));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@beydesign/storybook",
   "private": false,
-  "version": "0.2.12",
+  "version": "0.2.14",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -35,10 +35,12 @@
     "@mui/icons-material": "^5.18.0",
     "@mui/material": "^5.18.0",
     "@phosphor-icons/react": "^2.1.10",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
     "typescript": "~5.9.3"
   },
+  "peerDependencies": {
+    "react": "^18.3.1 || ^19.0.0",
+    "react-dom": "^18.3.1 || ^19.0.0"
+  },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.7",
     "@storybook/addon-designs": "^8.2.1",
@@ -66,6 +68,8 @@
     "eslint-plugin-storybook": "^0.11.6",
     "postcss": "^8.5.8",
     "prettier": "^3.8.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "storybook": "^8.6.17",
     "typescript-eslint": "^7.18.0",
     "vite": "^5.4.21"