@beydesign/storybook 0.1.20 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/App.js +65 -8
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/stories/Agent/AgentCard.js +9 -9
- package/dist/stories/Agent/AgentCardSkeleton.js +1 -1
- package/dist/stories/Agent/CreateNewCard.js +4 -4
- package/dist/stories/Buttons/MainButton.js +51 -51
- package/dist/stories/Buttons/ToggleButtonGroup.js +4 -4
- package/dist/stories/Credits/CreditsCard.js +4 -4
- package/dist/stories/Credits/CreditsCardSkeleton.js +2 -2
- package/dist/stories/EntityCard/EntityCard.js +3 -3
- package/dist/stories/EntityCard/EntityCardSkeleton.js +1 -1
- package/dist/stories/Form/AutoComplete.js +10 -10
- package/dist/stories/Form/Checkbox.js +7 -7
- package/dist/stories/Form/Dropdown.js +16 -16
- package/dist/stories/Form/FileUpload/FileUpload.js +15 -15
- package/dist/stories/Form/FileUpload/FileUploading.js +8 -8
- package/dist/stories/Form/FileUpload/UploadedFile.js +2 -2
- package/dist/stories/Form/TextArea.js +7 -7
- package/dist/stories/Form/TextInput.js +10 -10
- package/dist/stories/Form/Toggle.js +5 -5
- package/dist/stories/Form/Toggle.stories.js +1 -1
- package/dist/stories/Foundations/Colors.js +69 -71
- package/dist/stories/Navigation/ComplexHeader.js +1 -1
- package/dist/stories/Navigation/Header.js +1 -1
- package/dist/stories/Navigation/NavItem.js +9 -9
- package/dist/stories/Navigation/NavItem.stories.js +2 -2
- package/dist/stories/Navigation/Sidebar.js +7 -8
- package/dist/stories/Navigation/Sidebar.stories.js +1 -1
- package/dist/stories/PlanCard/PlanCard.d.ts +3 -0
- package/dist/stories/PlanCard/PlanCard.js +13 -0
- package/dist/stories/PlanCard/PlanCard.stories.d.ts +9 -0
- package/dist/stories/PlanCard/PlanCard.stories.js +125 -0
- package/dist/stories/PlanCard/PlanCardSkeleton.d.ts +3 -0
- package/dist/stories/PlanCard/PlanCardSkeleton.js +6 -0
- package/dist/stories/PlanCard/PlanCardSkeleton.stories.d.ts +7 -0
- package/dist/stories/PlanCard/PlanCardSkeleton.stories.js +40 -0
- package/dist/stories/PlanCard/index.d.ts +3 -0
- package/dist/stories/PlanCard/index.js +3 -0
- package/dist/stories/PlanCard/types.d.ts +61 -0
- package/dist/stories/PlanCard/types.js +1 -0
- package/dist/stories/StripeProduct/StripeProduct.js +5 -7
- package/dist/stories/StripeProduct/StripeProductCardSkeleton.js +1 -1
- package/dist/stories/Typography/Typography.js +1 -1
- package/dist/stories/UI/Avatar.js +6 -6
- package/dist/stories/UI/Badge.js +4 -4
- package/dist/stories/UI/CheckIcon.d.ts +3 -0
- package/dist/stories/UI/CheckIcon.js +36 -0
- package/dist/stories/UI/CheckIcon.stories.d.ts +7 -0
- package/dist/stories/UI/CheckIcon.stories.js +48 -0
- package/dist/stories/UI/FeatureBanner.js +2 -2
- package/dist/stories/UI/HintBubble.js +3 -3
- package/dist/stories/UI/Logo.js +1 -1
- package/dist/stories/UI/Logo.stories.js +1 -1
- package/dist/stories/UI/Menu.js +10 -3
- package/dist/stories/UI/ProgressIndicator.js +1 -1
- package/dist/stories/UI/PromoBanner.js +6 -3
- package/dist/stories/UI/SkeletonLoader.js +1 -1
- package/dist/stories/UI/Stepper.js +12 -12
- package/dist/stories/UI/index.d.ts +1 -0
- package/dist/stories/UI/index.js +1 -0
- package/dist/stories/UI/types.d.ts +42 -0
- package/dist/stories/UI/types.js +30 -0
- package/package.json +2 -2
package/dist/App.js
CHANGED
|
@@ -1,7 +1,51 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useState } from 'react';
|
|
3
3
|
import { EntityCard, EntityCardSkeleton } from './stories/EntityCard';
|
|
4
|
+
import { PlanCard, PlanCardSkeleton } from './stories/PlanCard';
|
|
5
|
+
import { BadgeColor } from './stories/UI';
|
|
4
6
|
import './App.css';
|
|
7
|
+
const plans = [
|
|
8
|
+
{
|
|
9
|
+
id: 'free',
|
|
10
|
+
title: 'Free',
|
|
11
|
+
description: 'Discover what Beyond Presence has to offer.',
|
|
12
|
+
price: '€0',
|
|
13
|
+
badgeText: 'Current Plan',
|
|
14
|
+
badgeColor: BadgeColor.Green,
|
|
15
|
+
buttonText: 'Current plan',
|
|
16
|
+
buttonDisabled: true,
|
|
17
|
+
features: [
|
|
18
|
+
'1 credit (1 min of Conversational Agent video)',
|
|
19
|
+
'5 stock Digital Twins',
|
|
20
|
+
],
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
id: 'personal',
|
|
24
|
+
title: 'Personal',
|
|
25
|
+
description: 'Tailored for personal projects and independent creators.',
|
|
26
|
+
price: '€50',
|
|
27
|
+
features: [
|
|
28
|
+
'50 credits (50 min of Conversational Agent video)',
|
|
29
|
+
'5 stock Digital Twins',
|
|
30
|
+
'1 active Conversational Agent',
|
|
31
|
+
],
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
id: 'pro',
|
|
35
|
+
title: 'Pro',
|
|
36
|
+
description: 'Designed for professionals looking to expand their reach.',
|
|
37
|
+
price: '€210',
|
|
38
|
+
badgeText: 'Most Popular',
|
|
39
|
+
badgeColor: BadgeColor.Lemon,
|
|
40
|
+
highlighted: true,
|
|
41
|
+
features: [
|
|
42
|
+
'300 credits (300 min of Conversational Agent video)',
|
|
43
|
+
'5 stock Digital Twins',
|
|
44
|
+
'3 active Conversational Agents',
|
|
45
|
+
'Priority support',
|
|
46
|
+
],
|
|
47
|
+
},
|
|
48
|
+
];
|
|
5
49
|
const avatars = [
|
|
6
50
|
{
|
|
7
51
|
id: 'nelly',
|
|
@@ -57,17 +101,17 @@ function App() {
|
|
|
57
101
|
marginBottom: '24px',
|
|
58
102
|
padding: '8px 16px',
|
|
59
103
|
borderRadius: '6px',
|
|
60
|
-
border: '1px solid var(--
|
|
61
|
-
background: 'var(--
|
|
62
|
-
color: 'var(--
|
|
104
|
+
border: '1px solid var(--color-border-border-component)',
|
|
105
|
+
background: 'var(--color-background-bg-white)',
|
|
106
|
+
color: 'var(--color-text-text-title)',
|
|
63
107
|
cursor: 'pointer',
|
|
64
108
|
}, children: loading ? 'Show loaded cards' : 'Show loading skeletons' }), _jsx("h2", { style: {
|
|
65
109
|
fontFamily: 'Figtree, sans-serif',
|
|
66
|
-
color: 'var(--
|
|
110
|
+
color: 'var(--color-text-text-title)',
|
|
67
111
|
marginBottom: '4px',
|
|
68
112
|
}, children: "Explore our Avatar Library" }), _jsx("p", { style: {
|
|
69
113
|
fontFamily: 'Figtree, sans-serif',
|
|
70
|
-
color: 'var(--
|
|
114
|
+
color: 'var(--color-text-text-subtle)',
|
|
71
115
|
marginBottom: '24px',
|
|
72
116
|
}, children: "Select the perfect studio-quality digital human to make your interactions feel personal." }), _jsx("div", { style: {
|
|
73
117
|
display: 'flex',
|
|
@@ -92,11 +136,11 @@ function App() {
|
|
|
92
136
|
},
|
|
93
137
|
], description: "daijdaij pa oapopao ao opaop op", showDescription: true }, avatar.id))) }), _jsx("h2", { style: {
|
|
94
138
|
fontFamily: 'Figtree, sans-serif',
|
|
95
|
-
color: 'var(--
|
|
139
|
+
color: 'var(--color-text-text-title)',
|
|
96
140
|
margin: '40px 0 4px',
|
|
97
141
|
}, children: "Explore our Agent library" }), _jsx("p", { style: {
|
|
98
142
|
fontFamily: 'Figtree, sans-serif',
|
|
99
|
-
color: 'var(--
|
|
143
|
+
color: 'var(--color-text-text-subtle)',
|
|
100
144
|
marginBottom: '24px',
|
|
101
145
|
}, children: "Your active agents \u2014 hover a card to join a live conversation." }), _jsx("div", { style: {
|
|
102
146
|
display: 'flex',
|
|
@@ -104,6 +148,19 @@ function App() {
|
|
|
104
148
|
gap: '16px',
|
|
105
149
|
}, children: avatars
|
|
106
150
|
.slice(0, 4)
|
|
107
|
-
.map((avatar) => loading ? (_jsx(EntityCardSkeleton, { view: "agent" }, `agent-${avatar.id}`)) : (_jsx(EntityCard, { view: "agent", name: `${avatar.name} Customer Support`, image: avatar.image, showStatusBadge: true, statusBadgeText: "Active", onPreview: () => console.log('Join', avatar.name), previewButtonText: "Join", previewIcon: "VideoCamera", showMenu: true, menuItems: agentMenuItems }, `agent-${avatar.id}`))) })
|
|
151
|
+
.map((avatar) => loading ? (_jsx(EntityCardSkeleton, { view: "agent" }, `agent-${avatar.id}`)) : (_jsx(EntityCard, { view: "agent", name: `${avatar.name} Customer Support`, image: avatar.image, showStatusBadge: true, statusBadgeText: "Active", onPreview: () => console.log('Join', avatar.name), previewButtonText: "Join", previewIcon: "VideoCamera", showMenu: true, menuItems: agentMenuItems }, `agent-${avatar.id}`))) }), _jsx("h2", { style: {
|
|
152
|
+
fontFamily: 'Figtree, sans-serif',
|
|
153
|
+
color: 'var(--color-text-text-title)',
|
|
154
|
+
margin: '40px 0 4px',
|
|
155
|
+
}, children: "Subscription plans" }), _jsx("p", { style: {
|
|
156
|
+
fontFamily: 'Figtree, sans-serif',
|
|
157
|
+
color: 'var(--color-text-text-subtle)',
|
|
158
|
+
marginBottom: '24px',
|
|
159
|
+
}, children: "Choose the plan that's right for you." }), _jsx("div", { style: {
|
|
160
|
+
display: 'flex',
|
|
161
|
+
flexWrap: 'wrap',
|
|
162
|
+
alignItems: 'flex-start',
|
|
163
|
+
gap: '16px',
|
|
164
|
+
}, children: plans.map((plan) => loading ? (_jsx(PlanCardSkeleton, { featuresCount: plan.features.length }, plan.id)) : (_jsx(PlanCard, { title: plan.title, description: plan.description, price: plan.price, badgeText: plan.badgeText, badgeColor: plan.badgeColor, highlighted: plan.highlighted, buttonText: plan.buttonText, buttonDisabled: plan.buttonDisabled, features: plan.features, onButtonClick: () => console.log('Plan action', plan.title) }, plan.id))) })] }));
|
|
108
165
|
}
|
|
109
166
|
export default App;
|
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
|
@@ -45,18 +45,18 @@ export const AgentCard = ({ title, description = '', date = '', showDate = false
|
|
|
45
45
|
// Render loading state or placeholder
|
|
46
46
|
const renderImageContent = () => {
|
|
47
47
|
if (isLoading) {
|
|
48
|
-
return (_jsx(Box, { width: '100%', height: '100%', bgcolor: 'var(--
|
|
48
|
+
return (_jsx(Box, { width: '100%', height: '100%', bgcolor: 'var(--color-background-bg-element)', display: 'flex', justifyContent: 'center', alignItems: 'center', children: _jsxs(Box, { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsx(ArrowsClockwise, { size: 24, color: 'var(--color-text-text-subtle)', className: "spin-animation" }), _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-subtle)', children: "Loading preview..." })] }) }));
|
|
49
49
|
}
|
|
50
50
|
if (imageError || !agentImage) {
|
|
51
|
-
return (_jsx(Box, { width: '100%', height: '100%', bgcolor: 'var(--
|
|
51
|
+
return (_jsx(Box, { width: '100%', height: '100%', bgcolor: 'var(--color-background-bg-element)', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', border: '2px solid var(--color-border-border-component)', boxSizing: 'border-box', display: 'flex', justifyContent: 'center', alignItems: 'center', children: _jsx(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, children: "No Preview Available" }) }));
|
|
52
52
|
}
|
|
53
53
|
return (_jsx("img", { src: agentImage, alt: "Agent", width: '100%', height: '100%', style: { objectFit: 'cover', height: '100%', width: '100%' } }));
|
|
54
54
|
};
|
|
55
55
|
return (_jsxs(Box, { width: 'auto', display: 'flex', flexDirection: 'column', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', bgcolor: isError
|
|
56
|
-
? 'var(--
|
|
56
|
+
? 'var(--color-background-bg-error-subtle)'
|
|
57
57
|
: isDraft
|
|
58
|
-
? 'var(--
|
|
59
|
-
: 'var(--
|
|
58
|
+
? 'var(--color-background-bg-element)'
|
|
59
|
+
: 'var(--color-background-bg-component)', boxShadow: `var(--global-shadows-shadow-xs-offset-x) var(--global-shadows-shadow-xs-offset-y) var(--global-shadows-shadow-xs-blur) var(--global-shadows-shadow-xs-spread) var(--global-shadows-shadow-xs-color)`, "data-testid": `${agentKey}-parent`, children: [_jsx("style", { children: `
|
|
60
60
|
@keyframes spin {
|
|
61
61
|
0% { transform: rotate(0deg); }
|
|
62
62
|
100% { transform: rotate(360deg); }
|
|
@@ -79,12 +79,12 @@ export const AgentCard = ({ title, description = '', date = '', showDate = false
|
|
|
79
79
|
position: 'absolute',
|
|
80
80
|
right: '8px',
|
|
81
81
|
top: '8px',
|
|
82
|
-
}, testKey: agentKey })), isReady && hovered && onPreview && active && (_jsx(Box, { position: 'absolute', top: '0', left: '0', width: '100%', height: '100%', bgcolor: 'var(--
|
|
82
|
+
}, testKey: agentKey })), isReady && hovered && onPreview && active && (_jsx(Box, { position: 'absolute', top: '0', left: '0', width: '100%', height: '100%', bgcolor: 'var(--color-background-bg-component-hover)', sx: { zIndex: 1 }, display: 'flex', justifyContent: 'center', alignItems: 'center', children: _jsx(MainButton, { text: previewButtonText, onClick: onPreview, showTrailingIcon: true, trailingIcon: "Play", hierarchy: ButtonHierarchy.SecondaryTransparent, size: ButtonSize.sm, style: { border: 'none' }, testId: `${agentKey}-preview-button` }) })), isProcessing && (_jsxs(Box, { position: 'absolute', top: '0', left: '0', width: '100%', height: '100%', bgcolor: 'var(--color-background-bg-component-hover)', style: { zIndex: 1 }, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsx(ArrowsClockwise, { size: 24, color: 'var(--color-text-text-white)', className: "spin-animation" }), _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.SemiBold, color: 'var(--color-text-text-white)', children: processingText }), showProgressIndicator && (_jsx(ProgressIndicator, { mode: ProgressIndicatorMode.Percentage, currentValue: progressValue, maxValue: 100, textColor: 'var(--color-text-text-white)' }))] })), isError && (_jsxs(Box, { position: 'absolute', top: '0', left: '0', width: '100%', height: '100%', bgcolor: 'var(--color-background-bg-error-solid)', style: { zIndex: 1, opacity: 0.7 }, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsx(Warning, { size: 74, color: 'var(--color-text-text-white)' }), _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.SemiBold, color: 'var(--color-text-text-white)', children: "Something went wrong" })] }))] }), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', children: [_jsx(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, textStyle: {
|
|
83
83
|
maxWidth: '140px',
|
|
84
84
|
overflow: 'hidden',
|
|
85
85
|
whiteSpace: 'nowrap',
|
|
86
86
|
textOverflow: 'ellipsis',
|
|
87
|
-
}, children: title }), agentId && (_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', children: [_jsxs(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: 'var(--
|
|
87
|
+
}, children: title }), agentId && (_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', children: [_jsxs(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: 'var(--color-text-text-title)', textStyle: {
|
|
88
88
|
maxWidth: '100px',
|
|
89
89
|
overflow: 'hidden',
|
|
90
90
|
whiteSpace: 'nowrap',
|
|
@@ -94,9 +94,9 @@ export const AgentCard = ({ title, description = '', date = '', showDate = false
|
|
|
94
94
|
width: '20px',
|
|
95
95
|
height: '20px',
|
|
96
96
|
weight: 'bold',
|
|
97
|
-
color: 'var(--
|
|
97
|
+
color: 'var(--color-text-text-accent)',
|
|
98
98
|
style: { cursor: 'pointer' },
|
|
99
99
|
onClick: () => onClickAgentId(agentId),
|
|
100
100
|
'data-testid': `${agentKey}-copy-icon`,
|
|
101
|
-
})] }))] }), (showDate || showActiveToggle) && (_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', children: [showDate && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--
|
|
101
|
+
})] }))] }), (showDate || showActiveToggle) && (_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', children: [showDate && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-subtle)', children: date })), showActiveToggle && (_jsx(Toggle, { checked: active, onChange: (checked) => onActiveToggleChange?.(checked), disabled: activeToggleDisabled, text: "Active", togglePosition: TogglePosition.Right, style: { flex: 1 } }))] })), showBadges && (_jsx(Box, { display: 'flex', flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', children: badges.map((badge, index) => (_jsx(Badge, { text: badge, size: BadgeSize.lg, fill: true }, `badge-${index}-${badge}`))) })), showDescription && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-paragraph)', children: description }))] }));
|
|
102
102
|
};
|
|
@@ -2,5 +2,5 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { Box } from '@mui/material';
|
|
3
3
|
import { SkeletonLoader } from '../UI';
|
|
4
4
|
export const AgentCardSkeleton = ({ width = 'auto', showDate = false, showBadges = false, showDescription = false, style, }) => {
|
|
5
|
-
return (_jsxs(Box, { width: width, display: "flex", flexDirection: "column", borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', padding: "var(--spacing-tokens-size-in-px-spacing-spacing-xl)", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-lg)", bgcolor: "var(--
|
|
5
|
+
return (_jsxs(Box, { width: width, display: "flex", flexDirection: "column", borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', padding: "var(--spacing-tokens-size-in-px-spacing-spacing-xl)", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-lg)", bgcolor: "var(--color-background-bg-component)", boxShadow: `var(--global-shadows-shadow-xs-offset-x) var(--global-shadows-shadow-xs-offset-y) var(--global-shadows-shadow-xs-blur) var(--global-shadows-shadow-xs-spread) var(--global-shadows-shadow-xs-color)`, style: style, children: [_jsx(Box, { width: "100%", height: "268px", sx: { aspectRatio: 1 }, borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-sm)", overflow: "hidden", children: _jsx(SkeletonLoader, {}) }), _jsx(SkeletonLoader, { width: "70%", height: "24px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }), showDate && (_jsx(SkeletonLoader, { width: "100%", height: "20px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" })), showBadges && (_jsxs(Box, { display: "flex", flexDirection: "row", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", children: [_jsx(SkeletonLoader, { width: "60px", height: "24px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }), _jsx(SkeletonLoader, { width: "80px", height: "24px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" })] })), showDescription && (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-sm)", children: [_jsx(SkeletonLoader, { width: "100%", height: "16px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }), _jsx(SkeletonLoader, { width: "80%", height: "16px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" })] }))] }));
|
|
6
6
|
};
|
|
@@ -8,18 +8,18 @@ import { Plus } from '@phosphor-icons/react';
|
|
|
8
8
|
*/
|
|
9
9
|
export const CreateNewCard = ({ text, onClick, }) => {
|
|
10
10
|
return (_jsx(Box, { width: 'auto', height: 'auto', sx: {
|
|
11
|
-
backgroundColor: 'var(--
|
|
11
|
+
backgroundColor: 'var(--color-background-bg-element)',
|
|
12
12
|
cursor: 'pointer',
|
|
13
13
|
transition: 'all 0.2s ease-in-out',
|
|
14
14
|
borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)',
|
|
15
15
|
'&:hover': {
|
|
16
|
-
backgroundColor: 'var(--
|
|
16
|
+
backgroundColor: 'var(--color-background-bg-card-highlight-hover)',
|
|
17
17
|
},
|
|
18
18
|
position: 'relative',
|
|
19
19
|
overflow: 'hidden',
|
|
20
20
|
boxShadow: `var(--global-shadows-shadow-xs-offset-x) var(--global-shadows-shadow-xs-offset-y) var(--global-shadows-shadow-xs-blur) var(--global-shadows-shadow-xs-spread) var(--global-shadows-shadow-xs-color)`,
|
|
21
|
-
}, onClick: onClick, children: _jsxs(Box, { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', padding: '24px', sx: { gap: '16px' }, children: [_jsx(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, color: 'var(--
|
|
21
|
+
}, onClick: onClick, children: _jsxs(Box, { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', padding: '24px', sx: { gap: '16px' }, children: [_jsx(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, color: 'var(--color-background-bg-brand-primary)', children: text }), _jsx(Box, { display: 'flex', width: '48px', height: '48px', borderRadius: '50%', sx: {
|
|
22
22
|
alignItems: 'center',
|
|
23
23
|
justifyContent: 'center',
|
|
24
|
-
}, children: _jsx(Plus, { size: 36, weight: "fill", color: 'var(--
|
|
24
|
+
}, children: _jsx(Plus, { size: 36, weight: "fill", color: 'var(--color-background-bg-brand-primary)' }) })] }) }));
|
|
25
25
|
};
|
|
@@ -16,29 +16,29 @@ const StyledButton = styled.button `
|
|
|
16
16
|
background: ${(props) => {
|
|
17
17
|
if (props.$destructive) {
|
|
18
18
|
if (props.$state === ButtonState.Disabled || props.$disabled)
|
|
19
|
-
return 'var(--
|
|
20
|
-
return 'var(--
|
|
19
|
+
return 'var(--color-background-bg-error-solid)';
|
|
20
|
+
return 'var(--color-background-bg-error)';
|
|
21
21
|
}
|
|
22
22
|
switch (props.$hierarchy) {
|
|
23
23
|
case ButtonHierarchy.Primary:
|
|
24
24
|
if (props.$state === ButtonState.Disabled || props.$disabled)
|
|
25
|
-
return 'var(--
|
|
26
|
-
return 'var(--
|
|
25
|
+
return 'var(--color-background-bg-button-disabled)';
|
|
26
|
+
return 'var(--color-background-bg-brand-primary)';
|
|
27
27
|
case ButtonHierarchy.PrimaryLemon:
|
|
28
28
|
if (props.$state === ButtonState.Disabled || props.$disabled)
|
|
29
|
-
return 'var(--
|
|
29
|
+
return 'var(--color-background-bg-element)';
|
|
30
30
|
return 'var(--primitives-desktop-primary-brand-lemon-400)';
|
|
31
31
|
case ButtonHierarchy.Secondary:
|
|
32
32
|
if (props.$state === ButtonState.Disabled || props.$disabled)
|
|
33
|
-
return 'var(--
|
|
34
|
-
return 'var(--
|
|
33
|
+
return 'var(--color-background-bg-component-disabled)';
|
|
34
|
+
return 'var(--color-background-bg-component)';
|
|
35
35
|
case ButtonHierarchy.SecondaryColor:
|
|
36
36
|
if (props.$state === ButtonState.Disabled || props.$disabled)
|
|
37
|
-
return 'var(--
|
|
38
|
-
return 'var(--
|
|
37
|
+
return 'var(--color-background-bg-element)';
|
|
38
|
+
return 'var(--color-background-bg-component)';
|
|
39
39
|
case ButtonHierarchy.SecondaryTransparent:
|
|
40
40
|
if (props.$state === ButtonState.Disabled || props.$disabled)
|
|
41
|
-
return 'var(--
|
|
41
|
+
return 'var(--color-background-bg-overlay-1)';
|
|
42
42
|
return 'var(--primitives-desktop-primary-transparent-violet-50)';
|
|
43
43
|
case ButtonHierarchy.Tertiary:
|
|
44
44
|
if (props.$state === ButtonState.Disabled || props.$disabled)
|
|
@@ -49,76 +49,76 @@ const StyledButton = styled.button `
|
|
|
49
49
|
return 'var(--primitives-desktop-primary-white-0)';
|
|
50
50
|
return 'var(--primitives-desktop-primary-white-0)';
|
|
51
51
|
default:
|
|
52
|
-
return 'var(--
|
|
52
|
+
return 'var(--color-background-bg-brand-primary)';
|
|
53
53
|
}
|
|
54
54
|
}};
|
|
55
55
|
color: ${(props) => {
|
|
56
56
|
if (props.$destructive) {
|
|
57
57
|
if (props.$state === ButtonState.Disabled || props.$disabled)
|
|
58
|
-
return 'var(--
|
|
59
|
-
return 'var(--
|
|
58
|
+
return 'var(--color-text-text-white)';
|
|
59
|
+
return 'var(--color-text-text-white)';
|
|
60
60
|
}
|
|
61
61
|
switch (props.$hierarchy) {
|
|
62
62
|
case ButtonHierarchy.Primary:
|
|
63
63
|
if (props.$state === ButtonState.Disabled || props.$disabled)
|
|
64
|
-
return 'var(--
|
|
65
|
-
return 'var(--
|
|
64
|
+
return 'var(--color-text-text-white)';
|
|
65
|
+
return 'var(--color-text-text-white)';
|
|
66
66
|
case ButtonHierarchy.PrimaryLemon:
|
|
67
67
|
if (props.$state === ButtonState.Disabled || props.$disabled)
|
|
68
|
-
return 'var(--
|
|
69
|
-
return 'var(--
|
|
68
|
+
return 'var(--color-text-text-subtle)';
|
|
69
|
+
return 'var(--color-text-text-title)';
|
|
70
70
|
case ButtonHierarchy.Secondary:
|
|
71
71
|
if (props.$state === ButtonState.Disabled || props.$disabled)
|
|
72
|
-
return 'var(--
|
|
73
|
-
return 'var(--
|
|
72
|
+
return 'var(--color-text-text-disabled)';
|
|
73
|
+
return 'var(--color-text-text-title)';
|
|
74
74
|
case ButtonHierarchy.SecondaryColor:
|
|
75
75
|
if (props.$state === ButtonState.Disabled || props.$disabled)
|
|
76
|
-
return 'var(--
|
|
77
|
-
return 'var(--
|
|
76
|
+
return 'var(--color-text-text-disabled)';
|
|
77
|
+
return 'var(--color-text-text-accent)';
|
|
78
78
|
case ButtonHierarchy.SecondaryTransparent:
|
|
79
79
|
if (props.$state === ButtonState.Disabled || props.$disabled)
|
|
80
|
-
return 'var(--
|
|
81
|
-
return 'var(--
|
|
80
|
+
return 'var(--color-text-text-white)';
|
|
81
|
+
return 'var(--color-text-text-white)';
|
|
82
82
|
case ButtonHierarchy.Tertiary:
|
|
83
83
|
if (props.$state === ButtonState.Disabled || props.$disabled)
|
|
84
|
-
return 'var(--
|
|
85
|
-
return 'var(--
|
|
84
|
+
return 'var(--color-text-text-disabled)';
|
|
85
|
+
return 'var(--color-text-text-title)';
|
|
86
86
|
case ButtonHierarchy.TertiaryColor:
|
|
87
87
|
if (props.$state === ButtonState.Disabled || props.$disabled)
|
|
88
|
-
return 'var(--
|
|
89
|
-
return 'var(--
|
|
88
|
+
return 'var(--color-text-text-disabled)';
|
|
89
|
+
return 'var(--color-text-text-accent)';
|
|
90
90
|
default:
|
|
91
|
-
return 'var(--
|
|
91
|
+
return 'var(--color-text-text-white)';
|
|
92
92
|
}
|
|
93
93
|
}};
|
|
94
94
|
border: 1px solid
|
|
95
95
|
${(props) => {
|
|
96
96
|
if (props.$destructive) {
|
|
97
97
|
if (props.$state === ButtonState.Disabled || props.$disabled)
|
|
98
|
-
return 'var(--
|
|
99
|
-
return 'var(--
|
|
98
|
+
return 'var(--color-border-border-disabled)';
|
|
99
|
+
return 'var(--color-background-bg-error)';
|
|
100
100
|
}
|
|
101
101
|
switch (props.$hierarchy) {
|
|
102
102
|
case ButtonHierarchy.Primary:
|
|
103
103
|
if (props.$state === ButtonState.Disabled || props.$disabled)
|
|
104
|
-
return 'var(--
|
|
105
|
-
return 'var(--
|
|
104
|
+
return 'var(--color-border-border-component)';
|
|
105
|
+
return 'var(--color-background-bg-brand-primary)';
|
|
106
106
|
case ButtonHierarchy.PrimaryLemon:
|
|
107
107
|
if (props.$state === ButtonState.Disabled || props.$disabled)
|
|
108
|
-
return 'var(--
|
|
108
|
+
return 'var(--color-border-border-component)';
|
|
109
109
|
return 'var(--primitives-desktop-primary-brand-lemon-400)';
|
|
110
110
|
case ButtonHierarchy.Secondary:
|
|
111
111
|
if (props.$state === ButtonState.Disabled || props.$disabled)
|
|
112
|
-
return 'var(--
|
|
113
|
-
return 'var(--
|
|
112
|
+
return 'var(--color-border-border-component)';
|
|
113
|
+
return 'var(--color-border-border-component)';
|
|
114
114
|
case ButtonHierarchy.SecondaryColor:
|
|
115
115
|
if (props.$state === ButtonState.Disabled || props.$disabled)
|
|
116
|
-
return 'var(--
|
|
117
|
-
return 'var(--
|
|
116
|
+
return 'var(--color-border-border-component)';
|
|
117
|
+
return 'var(--color-border-border-brand)';
|
|
118
118
|
case ButtonHierarchy.SecondaryTransparent:
|
|
119
119
|
if (props.$state === ButtonState.Disabled || props.$disabled)
|
|
120
|
-
return 'var(--
|
|
121
|
-
return 'var(--
|
|
120
|
+
return 'var(--color-border-border-disabled)';
|
|
121
|
+
return 'var(--color-border-border-white)';
|
|
122
122
|
case ButtonHierarchy.Tertiary:
|
|
123
123
|
if (props.$state === ButtonState.Disabled || props.$disabled)
|
|
124
124
|
return 'var(--primitives-desktop-primary-white-0)';
|
|
@@ -128,7 +128,7 @@ const StyledButton = styled.button `
|
|
|
128
128
|
return 'var(--primitives-desktop-primary-white-0)';
|
|
129
129
|
return 'var(--primitives-desktop-primary-white-0)';
|
|
130
130
|
default:
|
|
131
|
-
return 'var(--
|
|
131
|
+
return 'var(--color-background-bg-brand-primary)';
|
|
132
132
|
}
|
|
133
133
|
}};
|
|
134
134
|
display: flex;
|
|
@@ -152,21 +152,21 @@ const StyledButton = styled.button `
|
|
|
152
152
|
}
|
|
153
153
|
switch (props.$hierarchy) {
|
|
154
154
|
case ButtonHierarchy.Primary:
|
|
155
|
-
return 'var(--
|
|
155
|
+
return 'var(--color-background-bg-brand-primary-hover)';
|
|
156
156
|
case ButtonHierarchy.PrimaryLemon:
|
|
157
157
|
return 'var(--primitives-desktop-primary-brand-lemon-500)';
|
|
158
158
|
case ButtonHierarchy.Secondary:
|
|
159
|
-
return 'var(--
|
|
159
|
+
return 'var(--color-background-bg-card-highlight-hover)';
|
|
160
160
|
case ButtonHierarchy.SecondaryColor:
|
|
161
|
-
return 'var(--
|
|
161
|
+
return 'var(--color-background-bg-card-highlight-hover)';
|
|
162
162
|
case ButtonHierarchy.SecondaryTransparent:
|
|
163
|
-
return 'var(--
|
|
163
|
+
return 'var(--color-background-bg-brand-primary-hover)';
|
|
164
164
|
case ButtonHierarchy.Tertiary:
|
|
165
165
|
return 'var(--primitives-desktop-primary-white-40)';
|
|
166
166
|
case ButtonHierarchy.TertiaryColor:
|
|
167
|
-
return 'var(--
|
|
167
|
+
return 'var(--color-background-bg-card-highlight-hover)';
|
|
168
168
|
default:
|
|
169
|
-
return 'var(--
|
|
169
|
+
return 'var(--color-background-bg-brand-primary-hover)';
|
|
170
170
|
}
|
|
171
171
|
}};
|
|
172
172
|
border-color: ${(props) => {
|
|
@@ -175,13 +175,13 @@ const StyledButton = styled.button `
|
|
|
175
175
|
}
|
|
176
176
|
switch (props.$hierarchy) {
|
|
177
177
|
case ButtonHierarchy.Primary:
|
|
178
|
-
return 'var(--
|
|
178
|
+
return 'var(--color-background-bg-brand-primary-hover)';
|
|
179
179
|
case ButtonHierarchy.PrimaryLemon:
|
|
180
180
|
return 'var(--primitives-desktop-primary-brand-lemon-500)';
|
|
181
181
|
case ButtonHierarchy.Secondary:
|
|
182
|
-
return 'var(--
|
|
182
|
+
return 'var(--color-background-bg-card-highlight-hover)';
|
|
183
183
|
case ButtonHierarchy.SecondaryColor:
|
|
184
|
-
return 'var(--
|
|
184
|
+
return 'var(--color-background-bg-brand-primary-hover)';
|
|
185
185
|
case ButtonHierarchy.SecondaryTransparent:
|
|
186
186
|
return 'var(--primitives-desktop-primary-white-100)';
|
|
187
187
|
case ButtonHierarchy.Tertiary:
|
|
@@ -189,7 +189,7 @@ const StyledButton = styled.button `
|
|
|
189
189
|
case ButtonHierarchy.TertiaryColor:
|
|
190
190
|
return 'var(--primitives-desktop-primary-white-0)';
|
|
191
191
|
default:
|
|
192
|
-
return 'var(--
|
|
192
|
+
return 'var(--color-background-bg-brand-primary-hover)';
|
|
193
193
|
}
|
|
194
194
|
}};
|
|
195
195
|
box-shadow: var(--global-shadows-shadow-xs-offset-x)
|
|
@@ -260,7 +260,7 @@ export const MainButton = ({ onClick, text, disabled = false, loading = false, t
|
|
|
260
260
|
};
|
|
261
261
|
const iconProps = {
|
|
262
262
|
size: getIconSize(),
|
|
263
|
-
color: disabled ? 'var(--
|
|
263
|
+
color: disabled ? 'var(--color-text-text-disabled)' : 'currentColor',
|
|
264
264
|
weight: 'regular',
|
|
265
265
|
};
|
|
266
266
|
const sizeStyles = getButtonSize();
|
|
@@ -4,8 +4,8 @@ import { Box } from '@mui/material';
|
|
|
4
4
|
import { MainButton } from './MainButton';
|
|
5
5
|
export const ToggleButtonGroup = ({ onChange, options, selectedOption, disabled, size = ToggleButtonGroupSize.lg, style, }) => {
|
|
6
6
|
const selectedOptionStyle = {
|
|
7
|
-
backgroundColor: 'var(--
|
|
8
|
-
color: 'var(--
|
|
7
|
+
backgroundColor: 'var(--color-background-bg-card-highlight-hover)',
|
|
8
|
+
color: 'var(--color-text-text-accent)',
|
|
9
9
|
};
|
|
10
10
|
const unselectedOptionStyle = {
|
|
11
11
|
backgroundColor: 'transparent',
|
|
@@ -25,9 +25,9 @@ export const ToggleButtonGroup = ({ onChange, options, selectedOption, disabled,
|
|
|
25
25
|
return (_jsx(Box, { display: "flex", flexDirection: "row", sx: {
|
|
26
26
|
borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)',
|
|
27
27
|
overflow: 'hidden',
|
|
28
|
-
backgroundColor: 'var(--
|
|
28
|
+
backgroundColor: 'var(--color-background-bg-component)',
|
|
29
29
|
...style,
|
|
30
|
-
}, gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', border: `1px solid var(--
|
|
30
|
+
}, gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', border: `1px solid var(--color-border-border-component)`, width: 'fit-content', children: options.map((option) => {
|
|
31
31
|
const isSelected = option === selectedOption;
|
|
32
32
|
return (_jsx(MainButton, { text: option, onClick: () => onChange(option), size: getButtonSize(), hierarchy: ButtonHierarchy.Tertiary, type: ButtonType.Button, style: isSelected ? selectedOptionStyle : unselectedOptionStyle, disabled: disabled }, option));
|
|
33
33
|
}) }));
|
|
@@ -14,9 +14,9 @@ const StyledCard = styled.div `
|
|
|
14
14
|
? 'var(--spacing-tokens-size-in-px-spacing-spacing-md)'
|
|
15
15
|
: 'var(--spacing-tokens-size-in-px-spacing-spacing-md) var(--spacing-tokens-size-in-px-spacing-spacing-lg)'};
|
|
16
16
|
background-color: ${({ $warning }) => $warning
|
|
17
|
-
? 'var(--
|
|
18
|
-
: 'var(--
|
|
19
|
-
border: 1px solid var(--
|
|
17
|
+
? 'var(--color-background-bg-badge-accent-red)'
|
|
18
|
+
: 'var(--color-background-bg-card-highlight)'};
|
|
19
|
+
border: 1px solid var(--color-border-border-component);
|
|
20
20
|
border-radius: var(--spacing-tokens-size-in-px-spacing-spacing-md);
|
|
21
21
|
padding: ${({ $collapsed }) => $collapsed
|
|
22
22
|
? 'var(--spacing-tokens-size-in-px-spacing-spacing-md)'
|
|
@@ -49,5 +49,5 @@ export const CreditsCard = ({ size = CreditsCardSize.Expanded, className, maxCre
|
|
|
49
49
|
const case3 = !overUsageEnabled && creditsLimitReached; // if over usage is not enabled and credits limit is reached
|
|
50
50
|
const availableCredits = creditsLimitReached ? 0 : maxCredits - usedCredits;
|
|
51
51
|
const isValid = maxCredits !== undefined && availableCredits !== undefined;
|
|
52
|
-
return (_jsxs(StyledCard, { "$collapsed": isCollapsed, "$size": size, className: className, "$warning": case3, children: [!isCollapsed && isValid && (_jsxs(React.Fragment, { children: [case2 && (_jsx(CreditRow, { style: { justifyContent: 'end' }, children: _jsx(MainButton, { text: "Upgrade", hierarchy: ButtonHierarchy.TertiaryColor, size: ButtonSize.md, style: { padding: '0' }, onClick: () => onUpgradeClick?.() }) })), _jsxs(CreditRow, { children: [case2 && (_jsxs(Box, { gap: "2px", display: "flex", flexDirection: "row", children: [_jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--
|
|
52
|
+
return (_jsxs(StyledCard, { "$collapsed": isCollapsed, "$size": size, className: className, "$warning": case3, children: [!isCollapsed && isValid && (_jsxs(React.Fragment, { children: [case2 && (_jsx(CreditRow, { style: { justifyContent: 'end' }, children: _jsx(MainButton, { text: "Upgrade", hierarchy: ButtonHierarchy.TertiaryColor, size: ButtonSize.md, style: { padding: '0' }, onClick: () => onUpgradeClick?.() }) })), _jsxs(CreditRow, { children: [case2 && (_jsxs(Box, { gap: "2px", display: "flex", flexDirection: "row", children: [_jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--color-text-text-title)", children: "My Credits:" }) }), _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--color-text-text-title)", children: `${availableCredits}/` }) }), _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--color-text-text-paragraph)", children: `${maxCredits}` }) })] })), case3 && (_jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--color-text-text-title)", children: "Credits Limit Reached" }) })), !case2 && (_jsx(MainButton, { text: "Upgrade", hierarchy: ButtonHierarchy.TertiaryColor, size: ButtonSize.md, style: { padding: '0' }, onClick: () => onUpgradeClick?.() }))] }), case1 && (_jsx(CreditRow, { children: _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--color-text-text-title)", children: `Overused: ${overUsedCredits}` }) }) })), _jsx(CreditRow, { children: _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--color-text-text-subtle)", children: managedAgentsInfoText }) }) }), _jsx(CreditRow, { children: _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--color-text-text-subtle)", children: speechToVideoInfoText }) }) })] })), isCollapsed && isValid && (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", alignItems: "center", justifyContent: "center", children: [case2 && (_jsx(CreditRow, { "$collapsed": true, children: _jsxs(Box, { display: "flex", flexDirection: "row", gap: "2px", children: [_jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Medium, color: "var(--color-text-text-title)", children: `${formatNumberShort(availableCredits)}/` }) }), _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Medium, color: "var(--color-text-text-paragraph)", children: `${formatNumberShort(maxCredits)}` }) })] }) })), case3 && (_jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Medium, color: "var(--color-text-text-title)", textStyle: { textOverflow: 'ellipsis' }, title: "Credits Limit Reached", children: "Cred..." }) })), case1 && (_jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--color-text-text-title)", children: `${formatNumberShort(overUsedCredits)}` }) })), _jsx(Box, { onClick: (e) => e.stopPropagation(), children: _jsx(MainButton, { text: "Upgrade", hierarchy: ButtonHierarchy.TertiaryColor, size: ButtonSize.md, style: { padding: '0' }, onClick: () => onUpgradeClick?.() }) })] }))] }));
|
|
53
53
|
};
|
|
@@ -11,8 +11,8 @@ const StyledSkeletonCard = styled.div `
|
|
|
11
11
|
padding: ${({ $collapsed }) => $collapsed
|
|
12
12
|
? 'var(--spacing-tokens-size-in-px-spacing-spacing-md)'
|
|
13
13
|
: '8px var(--spacing-tokens-size-in-px-spacing-spacing-lg)'};
|
|
14
|
-
background-color: var(--
|
|
15
|
-
border: 1px solid var(--
|
|
14
|
+
background-color: var(--color-background-bg-card-highlight);
|
|
15
|
+
border: 1px solid var(--color-border-border-component);
|
|
16
16
|
border-radius: var(--spacing-tokens-size-in-px-spacing-spacing-md);
|
|
17
17
|
width: 100%;
|
|
18
18
|
height: auto;
|
|
@@ -15,8 +15,8 @@ export const EntityCard = ({ view = 'avatar', name, image, description = '', sho
|
|
|
15
15
|
const hasMenu = showMenu && menuItems.length > 0;
|
|
16
16
|
const showActions = hovered && (!!onPreview || hasMenu);
|
|
17
17
|
const showBadge = showStatusBadge && !!statusBadgeText;
|
|
18
|
-
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: 'var(--
|
|
18
|
+
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: 'var(--color-background-bg-card-highlight)', border: '1px solid var(--color-border-border-subtle)', boxSizing: 'border-box', overflow: 'hidden', "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 }, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), 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', left: 0, right: 0, bottom: 0, display: 'flex', alignItems: 'center', padding: '24px 12px 12px', sx: {
|
|
19
19
|
backgroundImage: 'linear-gradient(rgba(45, 38, 55, 0) 0%, rgba(45, 38, 55, 0.16) 34%, rgba(45, 38, 55, 0.64) 100%)',
|
|
20
|
-
}, children: _jsx(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, color: 'var(--
|
|
21
|
-
(previewButtonText ? (_jsx(MainButton, { text: previewButtonText, showLeadingIcon: true, leadingIcon: previewIcon, hierarchy: ButtonHierarchy.Primary, size: ButtonSize.sm, onClick: onPreview, testId: `${entityKey}-preview-button` })) : (_jsx(MainButton, { displayIcon: previewIcon, displayIconMode: ButtonDisplayMode.Only, hierarchy: ButtonHierarchy.Primary, size: ButtonSize.sm, onClick: onPreview, testId: `${entityKey}-preview-button` }))), hasMenu && (_jsx(Menu, { items: menuItems, testKey: entityKey, size: ButtonSize.sm }))] }))] }), showDescription && description && (_jsx(Box, { display: 'flex', alignItems: 'center', padding: '0 12px', width: '100%', boxSizing: 'border-box', children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--
|
|
20
|
+
}, children: _jsx(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, color: 'var(--color-text-text-white)', textStyle: { wordBreak: 'break-word' }, children: name }) }), showBadge && (_jsx(Box, { position: 'absolute', top: '8px', left: '8px', sx: { zIndex: 2 }, children: _jsx(Badge, { text: statusBadgeText, color: statusBadgeColor, size: BadgeSize.md, showIcon: true, icon: 'Circle', iconWeight: 'fill', iconSize: '8px', iconColor: 'var(--color-background-bg-success)' }) })), showActions && (_jsxs(Box, { position: 'absolute', top: '8px', right: '8px', display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', sx: { zIndex: 2 }, children: [onPreview &&
|
|
21
|
+
(previewButtonText ? (_jsx(MainButton, { text: previewButtonText, showLeadingIcon: true, leadingIcon: previewIcon, hierarchy: ButtonHierarchy.Primary, size: ButtonSize.sm, onClick: onPreview, testId: `${entityKey}-preview-button` })) : (_jsx(MainButton, { displayIcon: previewIcon, displayIconMode: ButtonDisplayMode.Only, hierarchy: ButtonHierarchy.Primary, size: ButtonSize.sm, onClick: onPreview, testId: `${entityKey}-preview-button` }))), hasMenu && (_jsx(Menu, { items: menuItems, testKey: entityKey, size: ButtonSize.sm }))] }))] }), showDescription && description && (_jsx(Box, { display: 'flex', alignItems: 'center', padding: '0 12px', width: '100%', boxSizing: 'border-box', children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-label)', textStyle: { wordBreak: 'break-word' }, children: description }) }))] }));
|
|
22
22
|
};
|
|
@@ -5,5 +5,5 @@ export const EntityCardSkeleton = ({ view = 'avatar', width, showDescription = f
|
|
|
5
5
|
const isAgent = view === 'agent';
|
|
6
6
|
const cardWidth = width ?? (isAgent ? '280px' : '218px');
|
|
7
7
|
const imageAspectRatio = isAgent ? '1 / 1' : '203 / 264';
|
|
8
|
-
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: 'var(--
|
|
8
|
+
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: 'var(--color-background-bg-card-highlight)', border: '1px solid var(--color-border-border-subtle)', boxSizing: 'border-box', overflow: 'hidden', style: style, children: [_jsx(Box, { width: '100%', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', overflow: 'hidden', sx: { aspectRatio: imageAspectRatio }, children: _jsx(SkeletonLoader, {}) }), showDescription && (_jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', padding: '0 12px', width: '100%', boxSizing: 'border-box', children: [_jsx(SkeletonLoader, { width: '100%', height: '16px', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)' }), _jsx(SkeletonLoader, { width: '70%', height: '16px', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)' })] }))] }));
|
|
9
9
|
};
|