shared-design-system 1.8.0 → 1.9.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/README.md +40 -9
- package/dist/src/components/ListComponents.d.ts +5 -3
- package/dist/src/components/ListComponents.js +3 -2
- package/dist/src/components/ListComponents.js.map +1 -1
- package/dist/src/components/Table.d.ts +21 -0
- package/dist/src/components/Table.js +16 -2
- package/dist/src/components/Table.js.map +1 -1
- package/dist/src/components/Tabs.d.ts +8 -1
- package/dist/src/components/Tabs.js +2 -2
- package/dist/src/components/Tabs.js.map +1 -1
- package/dist/src/index.d.ts +3 -3
- package/dist/src/index.js +1 -1
- package/dist/src/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -73,21 +73,52 @@ export default config;
|
|
|
73
73
|
|
|
74
74
|
### 🔹 Điều hướng & Cấu trúc (Navigation & Layout)
|
|
75
75
|
* **Breadcrumbs**: Chỉ dẫn vị trí trang.
|
|
76
|
-
* **Tabs**: Hệ thống chuyển đổi nội dung.
|
|
76
|
+
* **Tabs**: Hệ thống chuyển đổi nội dung, hỗ trợ truyền `items` cho tiện lợi.
|
|
77
|
+
```jsx
|
|
78
|
+
<Tabs
|
|
79
|
+
value={currentTab}
|
|
80
|
+
onChange={setCurrentTab}
|
|
81
|
+
items={[
|
|
82
|
+
{ label: 'Tổng quan', value: 'overview' },
|
|
83
|
+
{ label: 'Cài đặt', value: 'settings' }
|
|
84
|
+
]}
|
|
85
|
+
/>
|
|
86
|
+
```
|
|
77
87
|
* **Steps**: Quy trình thực hiện (Workflow).
|
|
78
88
|
* **Stack**: Quản lý khoảng cách tự động giữa các phần tử.
|
|
79
89
|
* **Card**: Container bọc nội dung cao cấp.
|
|
80
90
|
|
|
81
91
|
### 🔹 Dữ liệu & Danh sách (Data Display)
|
|
82
|
-
* **Table**:
|
|
83
|
-
* **List & ListItem**:
|
|
92
|
+
* **Table**: Component xây dựng bảng dữ liệu chuyên nghiệp theo hướng data-driven.
|
|
84
93
|
```jsx
|
|
85
|
-
import {
|
|
86
|
-
|
|
87
|
-
<
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
94
|
+
import { Table } from 'shared-design-system';
|
|
95
|
+
|
|
96
|
+
<Table
|
|
97
|
+
columns={[
|
|
98
|
+
{ key: 'name', label: 'Họ tên' },
|
|
99
|
+
{ key: 'role', label: 'Vai trò' }
|
|
100
|
+
]}
|
|
101
|
+
data={[
|
|
102
|
+
{ name: 'Nguyễn Văn A', role: 'Admin' },
|
|
103
|
+
{ name: 'Lê Thị B', role: 'User' }
|
|
104
|
+
]}
|
|
105
|
+
/>
|
|
106
|
+
```
|
|
107
|
+
* **List & ListItem**: Danh sách hiển thị theo cấu trúc mảng hoặc children.
|
|
108
|
+
```jsx
|
|
109
|
+
import { List, ListItem, Button } from 'shared-design-system';
|
|
110
|
+
|
|
111
|
+
<List
|
|
112
|
+
items={[
|
|
113
|
+
{ title: 'Thông tin người dùng', id: 1 },
|
|
114
|
+
{ title: 'Cài đặt hệ thống', id: 2 }
|
|
115
|
+
]}
|
|
116
|
+
renderItem={(item) => (
|
|
117
|
+
<ListItem action={<Button size="sm">Sửa</Button>}>
|
|
118
|
+
{item.title}
|
|
119
|
+
</ListItem>
|
|
120
|
+
)}
|
|
121
|
+
/>
|
|
91
122
|
```
|
|
92
123
|
* **Tag/Chip**: Nhãn dán hỗ trợ nút đóng (close).
|
|
93
124
|
* **Avatar**: Ảnh đại diện hoặc tên viết tắt.
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
export interface ListProps extends React.HTMLAttributes<HTMLUListElement> {
|
|
3
|
-
children
|
|
2
|
+
export interface ListProps<T = any> extends Omit<React.HTMLAttributes<HTMLUListElement>, 'children'> {
|
|
3
|
+
children?: React.ReactNode;
|
|
4
|
+
items?: T[];
|
|
5
|
+
renderItem?: (item: T, index: number) => React.ReactNode;
|
|
4
6
|
}
|
|
5
|
-
export declare const List:
|
|
7
|
+
export declare const List: <T extends any>({ children, items, renderItem, className, style, ...props }: ListProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
6
8
|
export interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
|
|
7
9
|
children: React.ReactNode;
|
|
8
10
|
icon?: React.ReactNode;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import React from 'react';
|
|
2
3
|
import { tokens } from '../tokens';
|
|
3
|
-
export const List = ({ children, className = '', style = {} }) => (_jsx("ul", { style: {
|
|
4
|
+
export const List = ({ children, items, renderItem, className = '', style = {}, ...props }) => (_jsx("ul", { style: {
|
|
4
5
|
listStyle: 'none',
|
|
5
6
|
padding: 0,
|
|
6
7
|
margin: 0,
|
|
@@ -9,7 +10,7 @@ export const List = ({ children, className = '', style = {} }) => (_jsx("ul", {
|
|
|
9
10
|
overflow: 'hidden',
|
|
10
11
|
backgroundColor: tokens.color.surface,
|
|
11
12
|
...style
|
|
12
|
-
}, className: className, children: children }));
|
|
13
|
+
}, className: className, ...props, children: items && renderItem ? items.map((item, index) => _jsx(React.Fragment, { children: renderItem(item, index) }, index)) : children }));
|
|
13
14
|
export const ListItem = ({ children, icon, action, onClick, className = '', style = {}, divider = true, active = false, ...props }) => {
|
|
14
15
|
const itemStyle = {
|
|
15
16
|
display: 'flex',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListComponents.js","sourceRoot":"","sources":["../../../src/components/ListComponents.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"ListComponents.js","sourceRoot":"","sources":["../../../src/components/ListComponents.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,24 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
export interface TableColumn<T = any> {
|
|
3
|
+
key: string | number;
|
|
4
|
+
label: React.ReactNode;
|
|
5
|
+
width?: string | number;
|
|
6
|
+
align?: 'left' | 'center' | 'right';
|
|
7
|
+
render?: (value: any, record: T, index: number) => React.ReactNode;
|
|
8
|
+
headerStyle?: React.CSSProperties;
|
|
9
|
+
cellStyle?: React.CSSProperties;
|
|
10
|
+
}
|
|
11
|
+
export interface TableProps<T = any> {
|
|
12
|
+
columns: TableColumn<T>[];
|
|
13
|
+
data: T[];
|
|
14
|
+
onRowClick?: (record: T, index: number) => void;
|
|
15
|
+
className?: string;
|
|
16
|
+
style?: React.CSSProperties;
|
|
17
|
+
headerStyle?: React.CSSProperties;
|
|
18
|
+
rowStyle?: React.CSSProperties | ((record: T, index: number) => React.CSSProperties);
|
|
19
|
+
emptyText?: React.ReactNode;
|
|
20
|
+
}
|
|
21
|
+
export declare const Table: <T extends Record<string, any>>({ columns, data, onRowClick, className, style, headerStyle, rowStyle, emptyText, }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
2
22
|
export interface TableContainerProps {
|
|
3
23
|
children: React.ReactNode;
|
|
4
24
|
className?: string;
|
|
@@ -17,6 +37,7 @@ export interface TRProps {
|
|
|
17
37
|
children: React.ReactNode;
|
|
18
38
|
onClick?: React.MouseEventHandler<HTMLTableRowElement>;
|
|
19
39
|
active?: boolean;
|
|
40
|
+
style?: React.CSSProperties;
|
|
20
41
|
}
|
|
21
42
|
export declare const TR: React.FC<TRProps>;
|
|
22
43
|
export interface THProps {
|
|
@@ -1,5 +1,18 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { tokens } from '../tokens';
|
|
3
|
+
export const Table = ({ columns, data, onRowClick, className = '', style = {}, headerStyle = {}, rowStyle = {}, emptyText = 'Không có dữ liệu', }) => {
|
|
4
|
+
return (_jsxs(TableContainer, { className: className, style: style, children: [_jsx(THead, { children: _jsx(TR, { children: columns.map((col) => (_jsx(TH, { style: {
|
|
5
|
+
textAlign: col.align || 'left',
|
|
6
|
+
width: col.width,
|
|
7
|
+
...col.headerStyle,
|
|
8
|
+
...headerStyle,
|
|
9
|
+
}, children: col.label }, col.key.toString()))) }) }), _jsx(TBody, { children: data.length > 0 ? (data.map((record, rowIndex) => (_jsx(TR, { onClick: onRowClick ? () => onRowClick(record, rowIndex) : undefined, style: typeof rowStyle === 'function' ? rowStyle(record, rowIndex) : rowStyle, children: columns.map((col) => (_jsx(TD, { style: {
|
|
10
|
+
textAlign: col.align || 'left',
|
|
11
|
+
...col.cellStyle,
|
|
12
|
+
}, children: col.render
|
|
13
|
+
? col.render(record[col.key], record, rowIndex)
|
|
14
|
+
: record[col.key] }, col.key.toString()))) }, record.id || record.key || rowIndex)))) : (_jsx(TR, { children: _jsx(TD, { style: { textAlign: 'center', padding: tokens.spacing[12], color: tokens.color.textMuted }, children: emptyText }) })) })] }));
|
|
15
|
+
};
|
|
3
16
|
export const TableContainer = ({ children, className = '', style = {} }) => (_jsx("div", { style: {
|
|
4
17
|
width: '100%',
|
|
5
18
|
overflowX: 'auto',
|
|
@@ -20,11 +33,12 @@ export const THead = ({ children }) => (_jsx("thead", { style: {
|
|
|
20
33
|
borderBottom: `2px solid ${tokens.color.border}`,
|
|
21
34
|
}, children: children }));
|
|
22
35
|
export const TBody = ({ children }) => (_jsx("tbody", { style: { backgroundColor: tokens.color.surface }, children: children }));
|
|
23
|
-
export const TR = ({ children, onClick, active = false }) => (_jsx("tr", { onClick: onClick, style: {
|
|
36
|
+
export const TR = ({ children, onClick, active = false, style = {} }) => (_jsx("tr", { onClick: onClick, style: {
|
|
24
37
|
borderBottom: `1px solid ${tokens.color.surfaceAlt}`,
|
|
25
38
|
backgroundColor: active ? tokens.color.primaryLight + '44' : 'transparent',
|
|
26
39
|
transition: tokens.transition.fast,
|
|
27
40
|
cursor: onClick ? 'pointer' : 'default',
|
|
41
|
+
...style,
|
|
28
42
|
}, onMouseEnter: onClick
|
|
29
43
|
? (e) => {
|
|
30
44
|
e.currentTarget.style.backgroundColor = tokens.color.surfaceAlt;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../src/components/Table.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../src/components/Table.tsx"],"names":[],"mappings":"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"}
|
|
@@ -6,10 +6,17 @@ export interface TabProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
6
6
|
active?: boolean;
|
|
7
7
|
variant?: 'standard' | 'pills';
|
|
8
8
|
}
|
|
9
|
-
export interface
|
|
9
|
+
export interface TabItem {
|
|
10
|
+
label: string;
|
|
11
|
+
value: any;
|
|
12
|
+
icon?: React.ReactNode;
|
|
13
|
+
}
|
|
14
|
+
export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
|
|
10
15
|
value: any;
|
|
11
16
|
onChange: (value: any) => void;
|
|
12
17
|
variant?: 'standard' | 'pills';
|
|
18
|
+
items?: TabItem[];
|
|
19
|
+
children?: React.ReactNode;
|
|
13
20
|
}
|
|
14
21
|
export declare const Tabs: React.FC<TabsProps>;
|
|
15
22
|
export declare const Tab: React.FC<TabProps>;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { tokens } from '../tokens';
|
|
4
|
-
export const Tabs = ({ value, onChange, children, variant = 'standard', className = '', style = {} }) => {
|
|
4
|
+
export const Tabs = ({ value, onChange, items, children, variant = 'standard', className = '', style = {} }) => {
|
|
5
5
|
const containerStyle = {
|
|
6
6
|
display: 'flex',
|
|
7
7
|
borderBottom: variant === 'standard' ? `1px solid ${tokens.color.border}` : 'none',
|
|
@@ -10,7 +10,7 @@ export const Tabs = ({ value, onChange, children, variant = 'standard', classNam
|
|
|
10
10
|
overflowX: 'auto',
|
|
11
11
|
...style
|
|
12
12
|
};
|
|
13
|
-
return (_jsx("div", { style: containerStyle, className: className, children: React.Children.map(children, child => {
|
|
13
|
+
return (_jsx("div", { style: containerStyle, className: className, children: items ? items.map((item, index) => (_jsx(Tab, { label: item.label, value: item.value, icon: item.icon, active: item.value === value, onClick: () => onChange(item.value), variant: variant }, index))) : React.Children.map(children, child => {
|
|
14
14
|
if (!React.isValidElement(child))
|
|
15
15
|
return null;
|
|
16
16
|
return React.cloneElement(child, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/components/Tabs.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/components/Tabs.tsx"],"names":[],"mappings":"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"}
|
package/dist/src/index.d.ts
CHANGED
|
@@ -19,7 +19,7 @@ export type { AvatarProps } from './components/Avatar';
|
|
|
19
19
|
export { Switch } from './components/Switch';
|
|
20
20
|
export type { SwitchProps } from './components/Switch';
|
|
21
21
|
export { Tabs, Tab } from './components/Tabs';
|
|
22
|
-
export type { TabsProps, TabProps } from './components/Tabs';
|
|
22
|
+
export type { TabsProps, TabProps, TabItem } from './components/Tabs';
|
|
23
23
|
export { Breadcrumbs } from './components/Breadcrumbs';
|
|
24
24
|
export type { BreadcrumbsProps } from './components/Breadcrumbs';
|
|
25
25
|
export { Divider } from './components/Divider';
|
|
@@ -38,8 +38,8 @@ export { Tag } from './components/Tag';
|
|
|
38
38
|
export type { TagProps } from './components/Tag';
|
|
39
39
|
export { List, ListItem } from './components/ListComponents';
|
|
40
40
|
export type { ListProps, ListItemProps } from './components/ListComponents';
|
|
41
|
-
export { TableContainer, THead, TBody, TR, TH, TD } from './components/Table';
|
|
42
|
-
export type { TableContainerProps, THeadProps, TBodyProps, TRProps, THProps, TDProps } from './components/Table';
|
|
41
|
+
export { Table, TableContainer, THead, TBody, TR, TH, TD } from './components/Table';
|
|
42
|
+
export type { TableProps, TableColumn, TableContainerProps, THeadProps, TBodyProps, TRProps, THProps, TDProps } from './components/Table';
|
|
43
43
|
export { Radio, RadioGroup } from './components/Radio';
|
|
44
44
|
export type { RadioProps, RadioGroupProps } from './components/Radio';
|
|
45
45
|
export { Steps } from './components/Steps';
|
package/dist/src/index.js
CHANGED
|
@@ -21,7 +21,7 @@ export { Alert } from './components/Alert';
|
|
|
21
21
|
export { Progress } from './components/Progress';
|
|
22
22
|
export { Tag } from './components/Tag';
|
|
23
23
|
export { List, ListItem } from './components/ListComponents';
|
|
24
|
-
export { TableContainer, THead, TBody, TR, TH, TD } from './components/Table';
|
|
24
|
+
export { Table, TableContainer, THead, TBody, TR, TH, TD } from './components/Table';
|
|
25
25
|
export { Radio, RadioGroup } from './components/Radio';
|
|
26
26
|
export { Steps } from './components/Steps';
|
|
27
27
|
// ─── Design Tokens ────────────────────────────────────────────────────────────
|
package/dist/src/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAGzD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAG3C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAGzC,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAGjF,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAGvE,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAG7D,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAG3D,iFAAiF;AACjF,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAG9C,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAGvD,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAG/C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAGjD,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAG/C,iFAAiF;AACjF,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAG3C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAG3C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAGjD,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAGvC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAG7D,OAAO,EAAE,cAAc,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAGzD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAG3C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAGzC,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAGjF,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAGvE,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAG7D,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAG3D,iFAAiF;AACjF,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAG9C,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAGvD,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAG/C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAGjD,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAG/C,iFAAiF;AACjF,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAG3C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAG3C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAGjD,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAGvC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAG7D,OAAO,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAC;AAGrF,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGvD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAG3C,iFAAiF;AACjF,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}
|