@zimyo/ui 1.1.4 → 1.1.5

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.
@@ -0,0 +1,630 @@
1
+ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
2
+ import React from 'react';
3
+ import { useTheme, Button as Button$1, CircularProgress, Card, CardHeader as CardHeader$1, Typography, CardActions as CardActions$1, Box, Skeleton, FormControl, Select as Select$1, OutlinedInput, IconButton, MenuItem, ListItemText, FormHelperText, Chip, Accordion as Accordion$1, AccordionSummary, AccordionDetails, FormControlLabel, Switch as Switch$1, TextField, InputAdornment, FormLabel, RadioGroup as RadioGroup$1, Radio, GlobalStyles, CssBaseline } from '@mui/material';
4
+ import MuiCardContent from '@mui/material/CardContent';
5
+ import CardMedia from '@mui/material/CardMedia';
6
+ import { ExpandMore, Clear } from '@mui/icons-material';
7
+ import { createTheme, ThemeProvider } from '@mui/material/styles';
8
+
9
+ const Button = React.forwardRef(({ children, loading = false, loadingText, loaderSize = 18, loaderPosition = 'start', variant = 'contained', color = 'primary', size = 'medium', sx = {}, disabled, startIcon, endIcon, ...props }, ref) => {
10
+ useTheme();
11
+ const showStartSpinner = loading && loaderPosition === 'start';
12
+ const showEndSpinner = loading && loaderPosition === 'end';
13
+ const showCenterSpinner = loading && loaderPosition === 'center';
14
+ return (jsx(Button$1, { ref: ref, variant: variant, color: color, size: size, disabled: disabled || loading, startIcon: showStartSpinner ? (jsx(CircularProgress, { size: loaderSize, color: "inherit" })) : (startIcon), endIcon: showEndSpinner ? (jsx(CircularProgress, { size: loaderSize, color: "inherit" })) : (endIcon), sx: {
15
+ // borderRadius: theme.radius.sm,
16
+ fontWeight: 500,
17
+ textTransform: 'none',
18
+ letterSpacing: '0.5px',
19
+ px: size === 'small' ? 1.5 : size === 'large' ? 3 : 2,
20
+ py: size === 'small' ? 0.5 : size === 'large' ? 1.5 : 1,
21
+ position: 'relative',
22
+ ...sx,
23
+ }, ...props, children: showCenterSpinner ? (jsx(CircularProgress, { size: loaderSize, color: "inherit" })) : loading && loadingText ? (loadingText) : (children) }));
24
+ });
25
+ Button.displayName = 'Button';
26
+
27
+ const CardRoot = ({ children, sx = {}, elevation = 1, variant = 'elevated', ...props }) => {
28
+ const theme = useTheme();
29
+ return (jsx(Card, { elevation: variant === 'elevated' ? elevation : 0, variant: variant === 'outlined' ? 'outlined' : 'elevation', sx: {
30
+ borderRadius: theme.radius?.sm || 8,
31
+ border: variant === 'bordered' ? `1px solid ${theme.palette.divider}` : 'none',
32
+ overflow: 'hidden',
33
+ backgroundColor: theme.palette.background.paper,
34
+ ...sx,
35
+ }, ...props, children: children }));
36
+ };
37
+
38
+ const CardHeader = ({ title, subtitle, action, }) => (jsx(CardHeader$1, { title: typeof title === 'string' ? (jsx(Typography, { variant: "h6", fontWeight: 600, children: title })) : (title), subheader: typeof subtitle === 'string' ? (jsx(Typography, { variant: "body2", color: "text.secondary", children: subtitle })) : (subtitle), action: action }));
39
+
40
+ const CardContent = ({ children, sx }) => (jsx(MuiCardContent, { sx: sx, children: children }));
41
+
42
+ const CardActions = ({ children, sx }) => (jsx(CardActions$1, { sx: sx, children: children }));
43
+
44
+ const CardImage = ({ src, height = 160, alt = 'card image' }) => (jsx(CardMedia, { component: "img", height: height, image: src, alt: alt }));
45
+
46
+ const CardSkeleton = ({ lines = 3 }) => (jsxs(Box, { p: 2, children: [jsx(Skeleton, { variant: "rectangular", height: 140 }), [...Array(lines)].map((_, i) => (jsx(Skeleton, { variant: "text", height: 20, sx: { mt: 1 } }, i)))] }));
47
+
48
+ Object.assign(CardRoot, {
49
+ Header: CardHeader,
50
+ Content: CardContent,
51
+ Body: CardContent, // alias
52
+ Actions: CardActions,
53
+ Image: CardImage,
54
+ Skeleton: CardSkeleton,
55
+ });
56
+
57
+ const Select = React.forwardRef(({ label = '', options = [], value, onChange, error = false, helperText = '', required = false, placeholder = 'Select...', isMulti = false, disabled = false, ...rest }, ref) => {
58
+ useTheme();
59
+ const handleRemoveChip = (chipValue) => (e) => {
60
+ e.stopPropagation();
61
+ const newValue = value.filter((v) => v !== chipValue);
62
+ onChange?.({
63
+ target: {
64
+ name: rest.name,
65
+ value: newValue,
66
+ },
67
+ });
68
+ };
69
+ const renderValue = (selected) => {
70
+ if (isMulti && Array.isArray(selected)) {
71
+ return (jsx(Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: 0.5 }, children: selected.map((val) => {
72
+ const label = options.find((o) => o.value === val)?.label || val;
73
+ return jsx(Box, { onMouseDown: (e) => e.stopPropagation(), children: jsx(Chip, { onDelete: handleRemoveChip(val), label: label, sx: { borderRadius: '12px' } }) }, val);
74
+ }) }));
75
+ }
76
+ return options.find((o) => o.value === selected)?.label || placeholder;
77
+ };
78
+ const handleClearSelection = (e) => {
79
+ e.stopPropagation();
80
+ const emptyValue = isMulti ? [] : '';
81
+ onChange?.({
82
+ target: {
83
+ name: rest.name,
84
+ value: emptyValue,
85
+ },
86
+ });
87
+ };
88
+ return (jsxs(FormControl, { fullWidth: true, error: error, disabled: disabled, sx: {
89
+ '& .MuiOutlinedInput-root': {
90
+ borderRadius: '8px',
91
+ minHeight: '44px',
92
+ // backgroundColor: theme.palette.background.paper,
93
+ fontSize: '14px'
94
+ },
95
+ '& .MuiSelect-select': {
96
+ fontSize: '14px',
97
+ padding: '10px 14px',
98
+ },
99
+ '& .MuiSelect-placeholder': {
100
+ fontSize: '14px',
101
+ },
102
+ '& .MuiMenuItem-root': {
103
+ fontSize: '14px',
104
+ },
105
+ '& .MuiChip-label': {
106
+ fontSize: '14px',
107
+ },
108
+ }, children: [jsx(Select$1, { displayEmpty: true,
109
+ // labelId={labelId}
110
+ multiple: isMulti, value: value || (isMulti ? [] : ''), onChange: onChange, input: jsx(OutlinedInput, { label: label }), renderValue: renderValue, ref: ref, IconComponent: ExpandMore, endAdornment: value && !isMulti && ((isMulti && value.length > 0) || (!isMulti && value !== '')) ? (jsx(IconButton, { sx: { marginRight: '1rem' }, size: "small", onClick: handleClearSelection, children: jsx(Clear, { fontSize: "small" }) })) : null, variant: "outlined", ...rest, children: options && options.map((option) => (jsx(MenuItem, { value: option.value, children: isMulti ? (jsx(Fragment, { children: jsx(ListItemText, { primary: option.label }) })) : (option.label || placeholder) }, option.value))) }), helperText && jsx(FormHelperText, { children: helperText })] }));
111
+ });
112
+
113
+ const AccordionContext = React.createContext({});
114
+ // Main Accordion Container Component
115
+ const Accordion = React.forwardRef(({ type = 'single', collapsible = false, value: controlledValue, defaultValue, onValueChange, children, sx = {}, ...props }, ref) => {
116
+ const theme = useTheme();
117
+ // Internal state management
118
+ const [internalValue, setInternalValue] = React.useState(() => {
119
+ if (controlledValue !== undefined)
120
+ return controlledValue;
121
+ if (defaultValue !== undefined)
122
+ return defaultValue;
123
+ return type === 'multiple' ? [] : '';
124
+ });
125
+ const value = controlledValue !== undefined ? controlledValue : internalValue;
126
+ const handleValueChange = React.useCallback((newValue) => {
127
+ if (controlledValue === undefined) {
128
+ setInternalValue(newValue);
129
+ }
130
+ onValueChange?.(newValue);
131
+ }, [controlledValue, onValueChange]);
132
+ const contextValue = React.useMemo(() => ({
133
+ type,
134
+ collapsible,
135
+ value,
136
+ defaultValue,
137
+ onValueChange: handleValueChange,
138
+ }), [type, collapsible, value, defaultValue, handleValueChange]);
139
+ return (jsx(AccordionContext.Provider, { value: contextValue, children: jsx("div", { ref: ref, style: {
140
+ display: 'flex',
141
+ flexDirection: 'column',
142
+ gap: theme.spacing(1),
143
+ }, ...props, children: children }) }));
144
+ });
145
+ // AccordionItem Component
146
+ const AccordionItem = React.forwardRef(({ value: itemValue, children, sx = {}, ...props }, ref) => {
147
+ const theme = useTheme();
148
+ const context = React.useContext(AccordionContext);
149
+ const isExpanded = React.useMemo(() => {
150
+ if (context.type === 'multiple') {
151
+ return Array.isArray(context.value) && context.value.includes(itemValue);
152
+ }
153
+ return context.value === itemValue;
154
+ }, [context.value, context.type, itemValue]);
155
+ const handleChange = React.useCallback(() => {
156
+ if (!context.onValueChange)
157
+ return;
158
+ if (context.type === 'multiple') {
159
+ const currentValue = Array.isArray(context.value) ? context.value : [];
160
+ const newValue = isExpanded
161
+ ? currentValue.filter(v => v !== itemValue)
162
+ : [...currentValue, itemValue];
163
+ context.onValueChange(newValue);
164
+ }
165
+ else {
166
+ const newValue = isExpanded && context.collapsible ? '' : itemValue;
167
+ context.onValueChange(newValue);
168
+ }
169
+ }, [context, itemValue, isExpanded]);
170
+ return (jsx(Accordion$1, { ref: ref, expanded: isExpanded, onChange: handleChange, variant: "outlined", sx: {
171
+ borderRadius: theme.radius?.sm || theme.shape.borderRadius,
172
+ '&:before': {
173
+ display: 'none',
174
+ },
175
+ '&.Mui-expanded': {
176
+ margin: 0,
177
+ },
178
+ border: `1px solid ${theme.palette.divider}`,
179
+ ...sx,
180
+ }, ...props, children: children }));
181
+ });
182
+ // AccordionTrigger Component
183
+ const AccordionTrigger = React.forwardRef(({ children, sx = {}, expandIcon, ...props }, ref) => {
184
+ const theme = useTheme();
185
+ const defaultExpandIcon = expandIcon !== undefined ? expandIcon : jsx(ExpandMore, {});
186
+ return (jsx(AccordionSummary, { ref: ref, expandIcon: defaultExpandIcon, sx: {
187
+ borderRadius: theme.radius?.sm || theme.shape.borderRadius,
188
+ minHeight: 56,
189
+ fontWeight: 500,
190
+ '&.Mui-expanded': {
191
+ minHeight: 56,
192
+ borderBottomLeftRadius: 0,
193
+ borderBottomRightRadius: 0,
194
+ borderBottom: `1px solid ${theme.palette.divider}`,
195
+ },
196
+ '& .MuiAccordionSummary-content': {
197
+ margin: '12px 0',
198
+ '&.Mui-expanded': {
199
+ margin: '12px 0',
200
+ },
201
+ },
202
+ '& .MuiAccordionSummary-expandIconWrapper': {
203
+ transition: theme.transitions.create('transform', {
204
+ duration: theme.transitions.duration.shortest,
205
+ }),
206
+ '&.Mui-expanded': {
207
+ transform: 'rotate(180deg)',
208
+ },
209
+ },
210
+ '&:hover': {
211
+ backgroundColor: theme.palette.action.hover,
212
+ },
213
+ ...sx,
214
+ }, ...props, children: children }));
215
+ });
216
+ // AccordionContent Component
217
+ const AccordionContent = React.forwardRef(({ children, sx = {}, ...props }, ref) => {
218
+ const theme = useTheme();
219
+ return (jsx(AccordionDetails, { ref: ref, sx: {
220
+ padding: theme.spacing(2),
221
+ borderBottomLeftRadius: theme.radius?.sm || theme.shape.borderRadius,
222
+ borderBottomRightRadius: theme.radius?.sm || theme.shape.borderRadius,
223
+ ...sx,
224
+ }, ...props, children: children }));
225
+ });
226
+
227
+ const Switch = React.forwardRef(({ label = '', helperText = '', error = false, onChange, checked, required = false, disabled = false, ...rest }, ref) => {
228
+ return (jsxs(FormControl, { error: error, disabled: disabled, component: "fieldset", children: [jsx(FormControlLabel, { control: jsx(Switch$1, { inputRef: ref, checked: checked, onChange: (e, checked) => onChange?.(e, checked), disabled: disabled, required: required == 1 || required === true ? true : false, ...rest }), label: label }), helperText && jsx(FormHelperText, { children: helperText })] }));
229
+ });
230
+
231
+ const TextInput = React.forwardRef(({ label = '', placeholder, IS_MANDATORY = false,
232
+ // multiline = false,
233
+ startIcon, endIcon, error = false, helperText, type = 'text', variant = 'outlined', ...rest }, ref) => {
234
+ return (jsx(TextField, { fullWidth: true, inputRef: ref, type: type,
235
+ // multiline={multiline}
236
+ label: label, placeholder: placeholder, required: (IS_MANDATORY == 1 || IS_MANDATORY == true) ? true : false, error: error, InputLabelProps: !label ? { shrink: false } : undefined, sx: {
237
+ '& .MuiInputLabel-outlined': {
238
+ top: '-4px',
239
+ fontSize: '13px',
240
+ fontWeight: 500,
241
+ },
242
+ '& .MuiOutlinedInput-root': {
243
+ minHeight: '44px',
244
+ borderRadius: '10px',
245
+ },
246
+ '& input': {
247
+ padding: '10.5px 14px',
248
+ },
249
+ '& input::placeholder': {
250
+ fontSize: '13px',
251
+ opacity: 0.5,
252
+ },
253
+ }, helperText: helperText, InputProps: {
254
+ startAdornment: startIcon ? (jsx(InputAdornment, { position: "start", children: startIcon })) : undefined,
255
+ endAdornment: endIcon ? (jsx(InputAdornment, { position: "end", children: endIcon })) : undefined,
256
+ }, variant: variant, ...rest }));
257
+ });
258
+
259
+ const RadioGroup = React.forwardRef(({ label, options = [], value, defaultValue, onChange, name, disabled = false, required = false, error = false, helperText, row = false, size = 'medium', color = 'primary', sx = {}, radioSx = {}, labelSx = {}, ...props }, ref) => {
260
+ const theme = useTheme();
261
+ const [internalValue, setInternalValue] = React.useState(value || defaultValue || '');
262
+ // Sync with external value prop
263
+ React.useEffect(() => {
264
+ if (value !== undefined) {
265
+ setInternalValue(value);
266
+ }
267
+ }, [value]);
268
+ const handleChange = (event) => {
269
+ const newValue = event.target.value;
270
+ if (value === undefined) {
271
+ setInternalValue(newValue);
272
+ }
273
+ onChange?.(newValue);
274
+ };
275
+ const currentValue = value !== undefined ? value : internalValue;
276
+ return (jsxs(FormControl, { ref: ref, component: "fieldset", variant: "standard", disabled: disabled, required: required, error: error, sx: {
277
+ borderRadius: '8px',
278
+ ...sx,
279
+ }, ...props, children: [label && (jsxs(FormLabel, { component: "legend", sx: {
280
+ fontWeight: 500,
281
+ fontSize: size === 'small' ? '0.875rem' : '1rem',
282
+ color: disabled
283
+ ? theme.palette.text.disabled
284
+ : error
285
+ ? theme.palette.error.main
286
+ : theme.palette.text.primary,
287
+ '&.Mui-focused': {
288
+ color: error
289
+ ? theme.palette.error.main
290
+ : `${theme.palette[color].main}`,
291
+ },
292
+ mb: 1,
293
+ ...labelSx,
294
+ }, children: [label, required && (jsx(Typography, { component: "span", sx: {
295
+ color: theme.palette.error.main,
296
+ ml: 0.5,
297
+ fontSize: 'inherit',
298
+ }, children: "*" }))] })), jsx(RadioGroup$1, { name: name, value: currentValue, onChange: handleChange, row: row, sx: {
299
+ gap: size === 'small' ? 1 : 1.5,
300
+ '& .MuiFormControlLabel-root': {
301
+ marginLeft: 0,
302
+ marginRight: row ? 2 : 0,
303
+ },
304
+ }, children: options.map((option) => (jsx(Box, { children: jsx(FormControlLabel, { value: option.value, disabled: disabled || option.disabled, control: jsx(Radio, { size: size, color: color, sx: {
305
+ '&.Mui-checked': {
306
+ color: error
307
+ ? theme.palette.error.main
308
+ : `${theme.palette[color].main}`,
309
+ },
310
+ alignSelf: option.description ? 'flex-start' : 'center',
311
+ mt: option.description ? 0.25 : 0,
312
+ ...radioSx,
313
+ } }), label: jsxs(Box, { sx: { display: 'flex', flexDirection: 'column' }, children: [jsx(Typography, { variant: size === 'small' ? 'body2' : 'body1', sx: {
314
+ fontWeight: 400,
315
+ color: disabled || option.disabled
316
+ ? theme.palette.text.disabled
317
+ : theme.palette.text.primary,
318
+ lineHeight: 1.5,
319
+ }, children: option.label }), option.description && (jsx(Typography, { variant: "caption", sx: {
320
+ color: disabled || option.disabled
321
+ ? theme.palette.text.disabled
322
+ : theme.palette.text.secondary,
323
+ mt: 0.25,
324
+ lineHeight: 1.4,
325
+ }, children: option.description }))] }), sx: {
326
+ alignItems: option.description ? 'flex-start' : 'center',
327
+ margin: 0,
328
+ display: 'flex',
329
+ '& .MuiFormControlLabel-label': {
330
+ ml: 1,
331
+ flex: 1,
332
+ },
333
+ '& .MuiButtonBase-root': {
334
+ p: size === 'small' ? 0.5 : 1,
335
+ },
336
+ } }) }, option.value))) }), helperText && (jsx(FormHelperText, { sx: {
337
+ mt: 1,
338
+ fontSize: size === 'small' ? '0.75rem' : '0.875rem',
339
+ color: error
340
+ ? theme.palette.error.main
341
+ : theme.palette.text.secondary,
342
+ }, children: helperText }))] }));
343
+ });
344
+
345
+ const Heading = ({ level = 1, ...props }) => {
346
+ const variant = `h${level}`;
347
+ return (jsx(Typography, { variant: variant, component: props.component || `h${level}`, fontWeight: 600, gutterBottom: true, ...props }));
348
+ };
349
+
350
+ const Text = ({ size = 'md', ...props }) => {
351
+ const variantMap = {
352
+ sm: 'body2',
353
+ md: 'body1',
354
+ lg: 'subtitle1',
355
+ };
356
+ return (jsx(Typography, { variant: variantMap[size], component: props.component || 'p', ...props }));
357
+ };
358
+
359
+ const Lead = (props) => {
360
+ return (jsx(Typography, { variant: "subtitle1", component: props.component || 'p', fontWeight: 400, color: "text.secondary", ...props }));
361
+ };
362
+
363
+ const Muted = (props) => {
364
+ return (jsx(Typography, { variant: "body2", component: props.component || 'span', color: "text.disabled", ...props }));
365
+ };
366
+
367
+ const Strong = (props) => {
368
+ return (jsx(Typography, { component: props.component || 'strong', fontWeight: 500, display: "inline", ...props }));
369
+ };
370
+
371
+ const Caption = (props) => {
372
+ return (jsx(Typography, { variant: "caption", color: "text.secondary", component: props.component || 'span', ...props }));
373
+ };
374
+
375
+ const Blockquote = (props) => {
376
+ return (jsx(Typography, { component: "blockquote", sx: {
377
+ borderLeft: '4px solid',
378
+ borderColor: 'divider',
379
+ pl: 2,
380
+ color: 'text.secondary',
381
+ fontStyle: 'italic',
382
+ }, ...props }));
383
+ };
384
+
385
+ const Code = ({ children, sx }) => {
386
+ return (jsx(Box, { component: "code", sx: {
387
+ fontFamily: 'monospace',
388
+ backgroundColor: 'grey.100',
389
+ color: 'primary.main',
390
+ px: 0.5,
391
+ py: 0.25,
392
+ borderRadius: 1,
393
+ fontSize: '0.875rem',
394
+ ...sx,
395
+ }, children: children }));
396
+ };
397
+
398
+ const designTokens = {
399
+ colors: {
400
+ primary: {
401
+ 50: '#e3f2fd',
402
+ 100: '#bbdefb',
403
+ 500: '#2196f3',
404
+ 900: '#0d47a1',
405
+ },
406
+ secondary: {
407
+ 50: '#fce4ec',
408
+ 100: '#f8bbd9',
409
+ 500: '#e91e63',
410
+ 900: '#880e4f',
411
+ },
412
+ neutral: {
413
+ 50: '#fafafa',
414
+ 100: '#f5f5f5',
415
+ 200: '#eeeeee',
416
+ 500: '#9e9e9e',
417
+ 900: '#212121',
418
+ },
419
+ },
420
+ spacing: {
421
+ xs: '4px',
422
+ sm: '8px',
423
+ md: '16px',
424
+ lg: '24px',
425
+ xl: '32px',
426
+ },
427
+ radius: {
428
+ xs: "2px",
429
+ sm: '4px',
430
+ md: '8px',
431
+ lg: '12px',
432
+ xl: '16px',
433
+ full: '9999px',
434
+ },
435
+ typography: {
436
+ fontFamily: `'Inter', system-ui, sans-serif`,
437
+ fontSize: {
438
+ xs: '0.75rem',
439
+ sm: '0.875rem',
440
+ md: '1rem',
441
+ lg: '1.25rem',
442
+ xl: '1.5rem',
443
+ },
444
+ },
445
+ };
446
+
447
+ const createCustomTheme = (config = {}) => {
448
+ const { primaryColor = designTokens.colors.primary[500], secondaryColor = designTokens.colors.secondary[500], } = config;
449
+ return createTheme({
450
+ palette: {
451
+ primary: {
452
+ main: primaryColor,
453
+ },
454
+ secondary: {
455
+ main: secondaryColor,
456
+ },
457
+ divider: '#e5e5e5'
458
+ },
459
+ typography: {
460
+ fontFamily: designTokens.typography.fontFamily,
461
+ fontSize: 14,
462
+ h1: {
463
+ fontSize: '3rem', // 48px
464
+ fontWeight: 700,
465
+ lineHeight: 1.2,
466
+ },
467
+ h2: {
468
+ fontSize: '2.25rem', // 36px
469
+ fontWeight: 600,
470
+ lineHeight: 1.25,
471
+ },
472
+ h3: {
473
+ fontSize: '1.875rem', // 30px
474
+ fontWeight: 600,
475
+ lineHeight: 1.3,
476
+ },
477
+ h4: {
478
+ fontSize: '1.5rem', // 24px
479
+ fontWeight: 500,
480
+ lineHeight: 1.35,
481
+ },
482
+ h5: {
483
+ fontSize: '1.25rem', // 20px
484
+ fontWeight: 500,
485
+ lineHeight: 1.4,
486
+ },
487
+ h6: {
488
+ fontSize: '1rem', // 16px
489
+ fontWeight: 500,
490
+ lineHeight: 1.5,
491
+ },
492
+ body1: {
493
+ fontSize: '1rem', // 16px
494
+ lineHeight: '1.625rem', // 26px
495
+ },
496
+ body2: {
497
+ fontSize: '0.875rem', // 14px
498
+ lineHeight: '1.5rem', // 24px
499
+ },
500
+ caption: {
501
+ fontSize: '0.875rem',
502
+ lineHeight: '1.25rem', // 20px
503
+ },
504
+ button: {
505
+ fontSize: '0.875rem',
506
+ lineHeight: '1.5rem',
507
+ textTransform: 'none',
508
+ },
509
+ subtitle1: {
510
+ fontSize: '1rem', // 16px
511
+ lineHeight: '1.5rem', // 24px
512
+ // fontWeight: 500
513
+ },
514
+ },
515
+ spacing: 8,
516
+ shape: {
517
+ borderRadius: 8,
518
+ },
519
+ radius: designTokens.radius,
520
+ components: {
521
+ MuiButton: {
522
+ styleOverrides: {
523
+ root: {
524
+ textTransform: 'none',
525
+ borderRadius: designTokens.radius.md,
526
+ // fontWeight: 600,
527
+ letterSpacing: '0.5px',
528
+ padding: '6px 12px',
529
+ },
530
+ sizeSmall: {
531
+ padding: '4px 12px',
532
+ // fontSize: '0.875rem',
533
+ },
534
+ sizeLarge: {
535
+ padding: '12px 24px',
536
+ // fontSize: '1rem',
537
+ },
538
+ },
539
+ defaultProps: {
540
+ disableElevation: true
541
+ }
542
+ },
543
+ MuiCard: {
544
+ styleOverrides: {
545
+ root: {
546
+ borderRadius: '12px',
547
+ boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
548
+ },
549
+ },
550
+ },
551
+ MuiTextField: {
552
+ styleOverrides: {
553
+ root: {
554
+ '& .MuiOutlinedInput-root': {
555
+ borderRadius: '8px',
556
+ },
557
+ },
558
+ },
559
+ },
560
+ },
561
+ });
562
+ };
563
+ // Default theme
564
+ const theme = createCustomTheme();
565
+
566
+ function styleInject(css, ref) {
567
+ if ( ref === void 0 ) ref = {};
568
+ var insertAt = ref.insertAt;
569
+
570
+ if (!css || typeof document === 'undefined') { return; }
571
+
572
+ var head = document.head || document.getElementsByTagName('head')[0];
573
+ var style = document.createElement('style');
574
+ style.type = 'text/css';
575
+
576
+ if (insertAt === 'top') {
577
+ if (head.firstChild) {
578
+ head.insertBefore(style, head.firstChild);
579
+ } else {
580
+ head.appendChild(style);
581
+ }
582
+ } else {
583
+ head.appendChild(style);
584
+ }
585
+
586
+ if (style.styleSheet) {
587
+ style.styleSheet.cssText = css;
588
+ } else {
589
+ style.appendChild(document.createTextNode(css));
590
+ }
591
+ }
592
+
593
+ var css_248z$4 = "/* inter-cyrillic-ext-300-normal */\n@font-face {\n font-family: 'Inter';\n font-style: normal;\n font-display: swap;\n font-weight: 300;\n src: url(./files/inter-cyrillic-ext-300-normal.woff2) format('woff2'), url(./files/inter-cyrillic-ext-300-normal.woff) format('woff');\n unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;\n}\n\n/* inter-cyrillic-300-normal */\n@font-face {\n font-family: 'Inter';\n font-style: normal;\n font-display: swap;\n font-weight: 300;\n src: url(./files/inter-cyrillic-300-normal.woff2) format('woff2'), url(./files/inter-cyrillic-300-normal.woff) format('woff');\n unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;\n}\n\n/* inter-greek-ext-300-normal */\n@font-face {\n font-family: 'Inter';\n font-style: normal;\n font-display: swap;\n font-weight: 300;\n src: url(./files/inter-greek-ext-300-normal.woff2) format('woff2'), url(./files/inter-greek-ext-300-normal.woff) format('woff');\n unicode-range: U+1F00-1FFF;\n}\n\n/* inter-greek-300-normal */\n@font-face {\n font-family: 'Inter';\n font-style: normal;\n font-display: swap;\n font-weight: 300;\n src: url(./files/inter-greek-300-normal.woff2) format('woff2'), url(./files/inter-greek-300-normal.woff) format('woff');\n unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;\n}\n\n/* inter-vietnamese-300-normal */\n@font-face {\n font-family: 'Inter';\n font-style: normal;\n font-display: swap;\n font-weight: 300;\n src: url(./files/inter-vietnamese-300-normal.woff2) format('woff2'), url(./files/inter-vietnamese-300-normal.woff) format('woff');\n unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;\n}\n\n/* inter-latin-ext-300-normal */\n@font-face {\n font-family: 'Inter';\n font-style: normal;\n font-display: swap;\n font-weight: 300;\n src: url(./files/inter-latin-ext-300-normal.woff2) format('woff2'), url(./files/inter-latin-ext-300-normal.woff) format('woff');\n unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;\n}\n\n/* inter-latin-300-normal */\n@font-face {\n font-family: 'Inter';\n font-style: normal;\n font-display: swap;\n font-weight: 300;\n src: url(./files/inter-latin-300-normal.woff2) format('woff2'), url(./files/inter-latin-300-normal.woff) format('woff');\n unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;\n}";
594
+ styleInject(css_248z$4);
595
+
596
+ var css_248z$3 = "/* inter-cyrillic-ext-400-normal */\n@font-face {\n font-family: 'Inter';\n font-style: normal;\n font-display: swap;\n font-weight: 400;\n src: url(./files/inter-cyrillic-ext-400-normal.woff2) format('woff2'), url(./files/inter-cyrillic-ext-400-normal.woff) format('woff');\n unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;\n}\n\n/* inter-cyrillic-400-normal */\n@font-face {\n font-family: 'Inter';\n font-style: normal;\n font-display: swap;\n font-weight: 400;\n src: url(./files/inter-cyrillic-400-normal.woff2) format('woff2'), url(./files/inter-cyrillic-400-normal.woff) format('woff');\n unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;\n}\n\n/* inter-greek-ext-400-normal */\n@font-face {\n font-family: 'Inter';\n font-style: normal;\n font-display: swap;\n font-weight: 400;\n src: url(./files/inter-greek-ext-400-normal.woff2) format('woff2'), url(./files/inter-greek-ext-400-normal.woff) format('woff');\n unicode-range: U+1F00-1FFF;\n}\n\n/* inter-greek-400-normal */\n@font-face {\n font-family: 'Inter';\n font-style: normal;\n font-display: swap;\n font-weight: 400;\n src: url(./files/inter-greek-400-normal.woff2) format('woff2'), url(./files/inter-greek-400-normal.woff) format('woff');\n unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;\n}\n\n/* inter-vietnamese-400-normal */\n@font-face {\n font-family: 'Inter';\n font-style: normal;\n font-display: swap;\n font-weight: 400;\n src: url(./files/inter-vietnamese-400-normal.woff2) format('woff2'), url(./files/inter-vietnamese-400-normal.woff) format('woff');\n unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;\n}\n\n/* inter-latin-ext-400-normal */\n@font-face {\n font-family: 'Inter';\n font-style: normal;\n font-display: swap;\n font-weight: 400;\n src: url(./files/inter-latin-ext-400-normal.woff2) format('woff2'), url(./files/inter-latin-ext-400-normal.woff) format('woff');\n unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;\n}\n\n/* inter-latin-400-normal */\n@font-face {\n font-family: 'Inter';\n font-style: normal;\n font-display: swap;\n font-weight: 400;\n src: url(./files/inter-latin-400-normal.woff2) format('woff2'), url(./files/inter-latin-400-normal.woff) format('woff');\n unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;\n}";
597
+ styleInject(css_248z$3);
598
+
599
+ var css_248z$2 = "/* inter-cyrillic-ext-500-normal */\n@font-face {\n font-family: 'Inter';\n font-style: normal;\n font-display: swap;\n font-weight: 500;\n src: url(./files/inter-cyrillic-ext-500-normal.woff2) format('woff2'), url(./files/inter-cyrillic-ext-500-normal.woff) format('woff');\n unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;\n}\n\n/* inter-cyrillic-500-normal */\n@font-face {\n font-family: 'Inter';\n font-style: normal;\n font-display: swap;\n font-weight: 500;\n src: url(./files/inter-cyrillic-500-normal.woff2) format('woff2'), url(./files/inter-cyrillic-500-normal.woff) format('woff');\n unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;\n}\n\n/* inter-greek-ext-500-normal */\n@font-face {\n font-family: 'Inter';\n font-style: normal;\n font-display: swap;\n font-weight: 500;\n src: url(./files/inter-greek-ext-500-normal.woff2) format('woff2'), url(./files/inter-greek-ext-500-normal.woff) format('woff');\n unicode-range: U+1F00-1FFF;\n}\n\n/* inter-greek-500-normal */\n@font-face {\n font-family: 'Inter';\n font-style: normal;\n font-display: swap;\n font-weight: 500;\n src: url(./files/inter-greek-500-normal.woff2) format('woff2'), url(./files/inter-greek-500-normal.woff) format('woff');\n unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;\n}\n\n/* inter-vietnamese-500-normal */\n@font-face {\n font-family: 'Inter';\n font-style: normal;\n font-display: swap;\n font-weight: 500;\n src: url(./files/inter-vietnamese-500-normal.woff2) format('woff2'), url(./files/inter-vietnamese-500-normal.woff) format('woff');\n unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;\n}\n\n/* inter-latin-ext-500-normal */\n@font-face {\n font-family: 'Inter';\n font-style: normal;\n font-display: swap;\n font-weight: 500;\n src: url(./files/inter-latin-ext-500-normal.woff2) format('woff2'), url(./files/inter-latin-ext-500-normal.woff) format('woff');\n unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;\n}\n\n/* inter-latin-500-normal */\n@font-face {\n font-family: 'Inter';\n font-style: normal;\n font-display: swap;\n font-weight: 500;\n src: url(./files/inter-latin-500-normal.woff2) format('woff2'), url(./files/inter-latin-500-normal.woff) format('woff');\n unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;\n}";
600
+ styleInject(css_248z$2);
601
+
602
+ var css_248z$1 = "/* inter-cyrillic-ext-600-normal */\n@font-face {\n font-family: 'Inter';\n font-style: normal;\n font-display: swap;\n font-weight: 600;\n src: url(./files/inter-cyrillic-ext-600-normal.woff2) format('woff2'), url(./files/inter-cyrillic-ext-600-normal.woff) format('woff');\n unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;\n}\n\n/* inter-cyrillic-600-normal */\n@font-face {\n font-family: 'Inter';\n font-style: normal;\n font-display: swap;\n font-weight: 600;\n src: url(./files/inter-cyrillic-600-normal.woff2) format('woff2'), url(./files/inter-cyrillic-600-normal.woff) format('woff');\n unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;\n}\n\n/* inter-greek-ext-600-normal */\n@font-face {\n font-family: 'Inter';\n font-style: normal;\n font-display: swap;\n font-weight: 600;\n src: url(./files/inter-greek-ext-600-normal.woff2) format('woff2'), url(./files/inter-greek-ext-600-normal.woff) format('woff');\n unicode-range: U+1F00-1FFF;\n}\n\n/* inter-greek-600-normal */\n@font-face {\n font-family: 'Inter';\n font-style: normal;\n font-display: swap;\n font-weight: 600;\n src: url(./files/inter-greek-600-normal.woff2) format('woff2'), url(./files/inter-greek-600-normal.woff) format('woff');\n unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;\n}\n\n/* inter-vietnamese-600-normal */\n@font-face {\n font-family: 'Inter';\n font-style: normal;\n font-display: swap;\n font-weight: 600;\n src: url(./files/inter-vietnamese-600-normal.woff2) format('woff2'), url(./files/inter-vietnamese-600-normal.woff) format('woff');\n unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;\n}\n\n/* inter-latin-ext-600-normal */\n@font-face {\n font-family: 'Inter';\n font-style: normal;\n font-display: swap;\n font-weight: 600;\n src: url(./files/inter-latin-ext-600-normal.woff2) format('woff2'), url(./files/inter-latin-ext-600-normal.woff) format('woff');\n unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;\n}\n\n/* inter-latin-600-normal */\n@font-face {\n font-family: 'Inter';\n font-style: normal;\n font-display: swap;\n font-weight: 600;\n src: url(./files/inter-latin-600-normal.woff2) format('woff2'), url(./files/inter-latin-600-normal.woff) format('woff');\n unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;\n}";
603
+ styleInject(css_248z$1);
604
+
605
+ var css_248z = "/* inter-cyrillic-ext-700-normal */\n@font-face {\n font-family: 'Inter';\n font-style: normal;\n font-display: swap;\n font-weight: 700;\n src: url(./files/inter-cyrillic-ext-700-normal.woff2) format('woff2'), url(./files/inter-cyrillic-ext-700-normal.woff) format('woff');\n unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;\n}\n\n/* inter-cyrillic-700-normal */\n@font-face {\n font-family: 'Inter';\n font-style: normal;\n font-display: swap;\n font-weight: 700;\n src: url(./files/inter-cyrillic-700-normal.woff2) format('woff2'), url(./files/inter-cyrillic-700-normal.woff) format('woff');\n unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;\n}\n\n/* inter-greek-ext-700-normal */\n@font-face {\n font-family: 'Inter';\n font-style: normal;\n font-display: swap;\n font-weight: 700;\n src: url(./files/inter-greek-ext-700-normal.woff2) format('woff2'), url(./files/inter-greek-ext-700-normal.woff) format('woff');\n unicode-range: U+1F00-1FFF;\n}\n\n/* inter-greek-700-normal */\n@font-face {\n font-family: 'Inter';\n font-style: normal;\n font-display: swap;\n font-weight: 700;\n src: url(./files/inter-greek-700-normal.woff2) format('woff2'), url(./files/inter-greek-700-normal.woff) format('woff');\n unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;\n}\n\n/* inter-vietnamese-700-normal */\n@font-face {\n font-family: 'Inter';\n font-style: normal;\n font-display: swap;\n font-weight: 700;\n src: url(./files/inter-vietnamese-700-normal.woff2) format('woff2'), url(./files/inter-vietnamese-700-normal.woff) format('woff');\n unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;\n}\n\n/* inter-latin-ext-700-normal */\n@font-face {\n font-family: 'Inter';\n font-style: normal;\n font-display: swap;\n font-weight: 700;\n src: url(./files/inter-latin-ext-700-normal.woff2) format('woff2'), url(./files/inter-latin-ext-700-normal.woff) format('woff');\n unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;\n}\n\n/* inter-latin-700-normal */\n@font-face {\n font-family: 'Inter';\n font-style: normal;\n font-display: swap;\n font-weight: 700;\n src: url(./files/inter-latin-700-normal.woff2) format('woff2'), url(./files/inter-latin-700-normal.woff) format('woff');\n unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;\n}";
606
+ styleInject(css_248z);
607
+
608
+ const Fonts = () => (jsx(GlobalStyles, { styles: {
609
+ body: {
610
+ WebkitFontSmoothing: 'antialiased',
611
+ MozOsxFontSmoothing: 'grayscale',
612
+ },
613
+ html: {
614
+ fontFamily: "'Inter', system-ui, sans-serif",
615
+ },
616
+ } }));
617
+
618
+ const UILibraryThemeProvider = ({ children, primaryColor, secondaryColor, enableCssBaseline = true, }) => {
619
+ const themeConfig = {};
620
+ if (primaryColor) {
621
+ themeConfig.primaryColor = primaryColor;
622
+ }
623
+ if (secondaryColor) {
624
+ themeConfig.secondaryColor = secondaryColor;
625
+ }
626
+ const theme = createCustomTheme(themeConfig);
627
+ return (jsxs(ThemeProvider, { theme: theme, children: [enableCssBaseline && jsx(CssBaseline, {}), jsx(Fonts, {}), children] }));
628
+ };
629
+
630
+ export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Blockquote, Button, Caption, Code, Heading, Lead, Muted, RadioGroup, Select, Strong, Switch, Text, TextInput, UILibraryThemeProvider, createCustomTheme, designTokens, theme };