sag_components 1.0.643 → 1.0.644
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.
|
@@ -18,7 +18,6 @@ const ICON_TYPE_LEGEND_LINE_ICON = 'LegendLineIcon';
|
|
|
18
18
|
const BarChartsByWeeks = props => {
|
|
19
19
|
const {
|
|
20
20
|
title,
|
|
21
|
-
lineChartData,
|
|
22
21
|
barChartData,
|
|
23
22
|
width,
|
|
24
23
|
height,
|
|
@@ -112,24 +111,10 @@ const BarChartsByWeeks = props => {
|
|
|
112
111
|
id: "ResponsiveContainer",
|
|
113
112
|
width: "100%",
|
|
114
113
|
height: showLegend ? '80%' : '86%'
|
|
115
|
-
}, /*#__PURE__*/_react.default.createElement(_recharts.
|
|
116
|
-
data: [],
|
|
117
|
-
margin: {
|
|
118
|
-
top: 20,
|
|
119
|
-
right: 90,
|
|
120
|
-
left: 90,
|
|
121
|
-
bottom: 10
|
|
122
|
-
}
|
|
123
|
-
}, /*#__PURE__*/_react.default.createElement(_recharts.Line, {
|
|
124
|
-
type: "monotone",
|
|
125
|
-
dataKey: "existingShoppersPercentValue",
|
|
126
|
-
fill: "38ACFF",
|
|
127
|
-
name: "existingShopper",
|
|
128
|
-
stroke: "38ACFF"
|
|
129
|
-
})), /*#__PURE__*/_react.default.createElement(_recharts.BarChart, {
|
|
114
|
+
}, /*#__PURE__*/_react.default.createElement(_recharts.BarChart, {
|
|
130
115
|
width: BarChartContainerWidth,
|
|
131
116
|
height: BarChartContainerHeight,
|
|
132
|
-
data:
|
|
117
|
+
data: barChartData,
|
|
133
118
|
margin: {
|
|
134
119
|
top: 20,
|
|
135
120
|
right: 0,
|
|
@@ -171,22 +156,6 @@ exports.BarChartsByWeeks = BarChartsByWeeks;
|
|
|
171
156
|
var _default = exports.default = BarChartsByWeeks;
|
|
172
157
|
BarChartsByWeeks.defaultProps = {
|
|
173
158
|
title: 'String',
|
|
174
|
-
lineChartData: [{
|
|
175
|
-
title: '202320',
|
|
176
|
-
value: 6
|
|
177
|
-
}, {
|
|
178
|
-
title: '202321',
|
|
179
|
-
value: 15.2
|
|
180
|
-
}, {
|
|
181
|
-
title: '202322',
|
|
182
|
-
value: 40
|
|
183
|
-
}, {
|
|
184
|
-
title: '202323',
|
|
185
|
-
value: 39
|
|
186
|
-
}, {
|
|
187
|
-
title: '202324',
|
|
188
|
-
value: 17
|
|
189
|
-
}],
|
|
190
159
|
barChartData: [{
|
|
191
160
|
title: '202320',
|
|
192
161
|
value: 542366
|
|
@@ -9,6 +9,8 @@ exports.default = exports.ReportTable = void 0;
|
|
|
9
9
|
var _react = _interopRequireWildcard(require("react"));
|
|
10
10
|
var _ArrowSelectIcon = _interopRequireDefault(require("./icons/ArrowSelectIcon"));
|
|
11
11
|
var _Duplicate = _interopRequireDefault(require("./icons/Duplicate"));
|
|
12
|
+
var _CheckBoxCheckedIcon = require("./icons/CheckBoxCheckedIcon");
|
|
13
|
+
var _CheckBoxNotCheckedIcon = require("./icons/CheckBoxNotCheckedIcon");
|
|
12
14
|
var _ReportTable = require("./ReportTable.style");
|
|
13
15
|
var _InfoIcon = require("./icons/InfoIcon");
|
|
14
16
|
/* eslint-disable import/no-unresolved */
|
|
@@ -23,95 +25,183 @@ const ReportTable = props => {
|
|
|
23
25
|
disableInfo,
|
|
24
26
|
selectTextColor,
|
|
25
27
|
onSelectRowClick,
|
|
28
|
+
onCheckRowClick,
|
|
26
29
|
buttonText,
|
|
27
|
-
buttonIconName
|
|
30
|
+
buttonIconName,
|
|
31
|
+
useCheckBoxes
|
|
28
32
|
} = props;
|
|
29
33
|
const [FormattedTableData, setFormattedTableData] = (0, _react.useState)(tableData);
|
|
30
34
|
(0, _react.useEffect)(() => {
|
|
35
|
+
var _newTableData$columns, _tableData$columnsHea, _newTableData$columns2, _tableData$rowsValues;
|
|
31
36
|
if (!tableData || !tableData.columnsHeadings || !tableData.rowsValues) {
|
|
32
37
|
return;
|
|
33
38
|
}
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
tableData.rowsValues.forEach(item => {
|
|
45
|
-
newTableData.rowsValues.push(item);
|
|
39
|
+
const newTableData = {
|
|
40
|
+
columnsHeadings: [],
|
|
41
|
+
rowsValues: []
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
// column heading - checkbox
|
|
45
|
+
if (useCheckBoxes && !((_newTableData$columns = newTableData.columnsHeadings) !== null && _newTableData$columns !== void 0 && _newTableData$columns.some(item => item.label === 'checkbox' && item.key === 'checkbox'))) {
|
|
46
|
+
newTableData.columnsHeadings.push({
|
|
47
|
+
label: 'checkbox',
|
|
48
|
+
key: 'checkbox'
|
|
46
49
|
});
|
|
47
|
-
setFormattedTableData(newTableData);
|
|
48
|
-
return;
|
|
49
50
|
}
|
|
50
|
-
if (useSelectButtons) {
|
|
51
|
-
var _tableData$columnsHea2, _newTableData$columns, _tableData$rowsValues;
|
|
52
|
-
// use select Buttons - add a "button" to table data
|
|
53
51
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
52
|
+
// columnsHeadings - regular columns
|
|
53
|
+
tableData === null || tableData === void 0 ? void 0 : (_tableData$columnsHea = tableData.columnsHeadings) === null || _tableData$columnsHea === void 0 ? void 0 : _tableData$columnsHea.forEach(item => {
|
|
54
|
+
newTableData.columnsHeadings.push(item);
|
|
55
|
+
});
|
|
58
56
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
57
|
+
// column heading - select button
|
|
58
|
+
if (useSelectButtons && !((_newTableData$columns2 = newTableData.columnsHeadings) !== null && _newTableData$columns2 !== void 0 && _newTableData$columns2.some(item => item.label === 'button' && item.key === 'button'))) {
|
|
59
|
+
newTableData.columnsHeadings.push({
|
|
60
|
+
label: 'button',
|
|
61
|
+
key: 'button'
|
|
62
62
|
});
|
|
63
|
-
if (!((_newTableData$columns = newTableData.columnsHeadings) !== null && _newTableData$columns !== void 0 && _newTableData$columns.some(item => item.label === 'button' && item.key === 'button'))) {
|
|
64
|
-
newTableData.columnsHeadings.push({
|
|
65
|
-
label: 'button',
|
|
66
|
-
key: 'button'
|
|
67
|
-
});
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
// rowsValues
|
|
71
|
-
const newRowValues = (_tableData$rowsValues = tableData.rowsValues) === null || _tableData$rowsValues === void 0 ? void 0 : _tableData$rowsValues.map((item, index) => useSelectButtons ? {
|
|
72
|
-
...item,
|
|
73
|
-
button: 'button',
|
|
74
|
-
rowIndex: index
|
|
75
|
-
} : item);
|
|
76
|
-
newTableData.rowsValues = newRowValues;
|
|
77
|
-
setFormattedTableData(newTableData);
|
|
78
63
|
}
|
|
79
|
-
|
|
64
|
+
|
|
65
|
+
// rowsValues
|
|
66
|
+
const newRowValues = (_tableData$rowsValues = tableData.rowsValues) === null || _tableData$rowsValues === void 0 ? void 0 : _tableData$rowsValues.map(item => useCheckBoxes ? {
|
|
67
|
+
checkbox: 'checkbox',
|
|
68
|
+
...item
|
|
69
|
+
} : item);
|
|
70
|
+
const newRowValuesStep2 = newRowValues === null || newRowValues === void 0 ? void 0 : newRowValues.map(item => useSelectButtons ? {
|
|
71
|
+
...item,
|
|
72
|
+
button: 'button'
|
|
73
|
+
} : item);
|
|
74
|
+
const newRowValuesStep3 = newRowValuesStep2 === null || newRowValuesStep2 === void 0 ? void 0 : newRowValuesStep2.map(item => useCheckBoxes ? {
|
|
75
|
+
...item,
|
|
76
|
+
checkboxState: false
|
|
77
|
+
} : item);
|
|
78
|
+
const newRowValuesStep4 = newRowValuesStep3 === null || newRowValuesStep3 === void 0 ? void 0 : newRowValuesStep3.map((item, index) => ({
|
|
79
|
+
...item,
|
|
80
|
+
index
|
|
81
|
+
}));
|
|
82
|
+
newTableData.rowsValues = newRowValuesStep4;
|
|
83
|
+
setFormattedTableData(newTableData);
|
|
84
|
+
}, [tableData, useSelectButtons, useCheckBoxes]);
|
|
80
85
|
const columnsNumber = tableData.columnsHeadings.length;
|
|
81
86
|
const tableWidthSize = 100 / (useSelectButtons ? maxColumnsNumber + 1 : maxColumnsNumber) * (useSelectButtons ? columnsNumber + 1 : columnsNumber);
|
|
82
|
-
const
|
|
87
|
+
const handleSelectButtonRowClick = row => {
|
|
83
88
|
const {
|
|
84
|
-
|
|
89
|
+
checkbox: propToRemove,
|
|
85
90
|
...rest
|
|
86
91
|
} = row;
|
|
87
|
-
|
|
92
|
+
const {
|
|
93
|
+
button: propToRemove2,
|
|
94
|
+
...rest2
|
|
95
|
+
} = rest;
|
|
96
|
+
const {
|
|
97
|
+
checkboxState: propToRemove3,
|
|
98
|
+
...rest3
|
|
99
|
+
} = rest2;
|
|
100
|
+
onSelectRowClick(rest3);
|
|
101
|
+
};
|
|
102
|
+
const handleRowCheckBoxClick = row => {
|
|
103
|
+
var _FormattedTableData$r;
|
|
104
|
+
if (!row) return;
|
|
105
|
+
const updatedRow = {
|
|
106
|
+
...row,
|
|
107
|
+
checkboxState: !(row !== null && row !== void 0 && row.checkboxState)
|
|
108
|
+
};
|
|
109
|
+
const updatedTableRowsData = FormattedTableData === null || FormattedTableData === void 0 ? void 0 : (_FormattedTableData$r = FormattedTableData.rowsValues) === null || _FormattedTableData$r === void 0 ? void 0 : _FormattedTableData$r.map(item => item.index === row.index ? updatedRow : item);
|
|
110
|
+
setFormattedTableData({
|
|
111
|
+
...FormattedTableData,
|
|
112
|
+
rowsValues: updatedTableRowsData
|
|
113
|
+
});
|
|
114
|
+
const {
|
|
115
|
+
checkbox: propToRemove,
|
|
116
|
+
...rest
|
|
117
|
+
} = updatedRow;
|
|
118
|
+
const {
|
|
119
|
+
button: propToRemove2,
|
|
120
|
+
...rest2
|
|
121
|
+
} = rest;
|
|
122
|
+
onCheckRowClick(rest2);
|
|
88
123
|
};
|
|
89
124
|
const displaySelectButton = rowData => /*#__PURE__*/_react.default.createElement(_ReportTable.SelectButtonContainer, {
|
|
90
|
-
|
|
125
|
+
className: "SelectButtonContainer"
|
|
91
126
|
}, /*#__PURE__*/_react.default.createElement(_ReportTable.SelectButtonSubContainer, {
|
|
92
|
-
|
|
127
|
+
className: "SelectButtonSubContainer",
|
|
93
128
|
selectTextColor: selectTextColor,
|
|
94
|
-
onClick: () =>
|
|
129
|
+
onClick: () => handleSelectButtonRowClick(rowData)
|
|
95
130
|
}, buttonText || 'Select', ' ', buttonIconName === 'duplicate' ? /*#__PURE__*/_react.default.createElement(_Duplicate.default, {
|
|
96
131
|
color: selectTextColor
|
|
97
132
|
}) : /*#__PURE__*/_react.default.createElement(_ArrowSelectIcon.default, {
|
|
98
|
-
|
|
133
|
+
className: "ArrowSelectIcon"
|
|
134
|
+
})));
|
|
135
|
+
const displayCheckBox = rowData => /*#__PURE__*/_react.default.createElement(_ReportTable.SelectCheckboxContainer, {
|
|
136
|
+
className: "SelectCheckboxContainer"
|
|
137
|
+
}, /*#__PURE__*/_react.default.createElement(_ReportTable.SelectCheckboxSubContainer, {
|
|
138
|
+
className: "SelectCheckboxSubContainer",
|
|
139
|
+
selectTextColor: selectTextColor,
|
|
140
|
+
onClick: () => handleRowCheckBoxClick(rowData)
|
|
141
|
+
}, rowData !== null && rowData !== void 0 && rowData.checkboxState ? /*#__PURE__*/_react.default.createElement(_CheckBoxCheckedIcon.CheckBoxCheckedIcon, {
|
|
142
|
+
className: "CheckBoxCheckedIcon",
|
|
143
|
+
width: "14px",
|
|
144
|
+
height: "14px",
|
|
145
|
+
color: selectTextColor
|
|
146
|
+
}) : /*#__PURE__*/_react.default.createElement(_CheckBoxNotCheckedIcon.CheckBoxNotCheckedIcon, {
|
|
147
|
+
className: "CheckBoxNotCheckedIcon",
|
|
148
|
+
width: "14px",
|
|
149
|
+
height: "14px",
|
|
150
|
+
color: "#212121"
|
|
99
151
|
})));
|
|
152
|
+
const getMaxColnumber = () => {
|
|
153
|
+
let colNumber = maxColumnsNumber;
|
|
154
|
+
if (useSelectButtons) {
|
|
155
|
+
colNumber = +1;
|
|
156
|
+
}
|
|
157
|
+
if (useCheckBoxes) {
|
|
158
|
+
colNumber = +1;
|
|
159
|
+
}
|
|
160
|
+
return colNumber;
|
|
161
|
+
};
|
|
100
162
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ReportTable.TableWrapper, {
|
|
101
|
-
maxColumnsNumber:
|
|
163
|
+
maxColumnsNumber: getMaxColnumber(),
|
|
102
164
|
columnsNumber: columnsNumber
|
|
103
165
|
}, /*#__PURE__*/_react.default.createElement(_ReportTable.Table, {
|
|
104
166
|
tableWidthSize: tableWidthSize
|
|
105
|
-
}, /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr",
|
|
167
|
+
}, /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr", {
|
|
168
|
+
className: "headerRow"
|
|
169
|
+
}, FormattedTableData.columnsHeadings.map((headline, index) => headline.label === 'button' || headline.label === 'checkbox' ?
|
|
170
|
+
/*#__PURE__*/
|
|
171
|
+
// eslint-disable-next-line react/no-array-index-key
|
|
172
|
+
_react.default.createElement(_ReportTable.Th, {
|
|
106
173
|
key: index
|
|
107
|
-
}) :
|
|
174
|
+
}) :
|
|
175
|
+
/*#__PURE__*/
|
|
176
|
+
// eslint-disable-next-line react/no-array-index-key
|
|
177
|
+
_react.default.createElement(_ReportTable.Th, {
|
|
108
178
|
key: index
|
|
109
|
-
}, headline.label)))), /*#__PURE__*/_react.default.createElement("tbody", null, FormattedTableData.rowsValues.map((rowData, index) =>
|
|
179
|
+
}, headline.label)))), /*#__PURE__*/_react.default.createElement("tbody", null, FormattedTableData.rowsValues.map((rowData, index) =>
|
|
180
|
+
/*#__PURE__*/
|
|
181
|
+
// eslint-disable-next-line react/no-array-index-key
|
|
182
|
+
_react.default.createElement(_ReportTable.Tr, {
|
|
183
|
+
className: "row",
|
|
110
184
|
key: index,
|
|
111
185
|
useColorLinearGradient: useColorLinearGradient
|
|
112
|
-
}, Object.values(rowData).map((value, dataIndex) =>
|
|
186
|
+
}, Object.values(rowData).map((value, dataIndex) =>
|
|
187
|
+
// eslint-disable-next-line no-nested-ternary
|
|
188
|
+
value === 'checkbox' ?
|
|
189
|
+
/*#__PURE__*/
|
|
190
|
+
// eslint-disable-next-line react/no-array-index-key
|
|
191
|
+
_react.default.createElement(_ReportTable.Td, {
|
|
192
|
+
className: "checkbox",
|
|
193
|
+
key: index
|
|
194
|
+
}, displayCheckBox(rowData)) : value === 'button' ?
|
|
195
|
+
/*#__PURE__*/
|
|
196
|
+
// eslint-disable-next-line react/no-array-index-key
|
|
197
|
+
_react.default.createElement(_ReportTable.Td, {
|
|
198
|
+
className: "button",
|
|
113
199
|
key: index
|
|
114
|
-
}, displaySelectButton(rowData)) :
|
|
200
|
+
}, displaySelectButton(rowData)) :
|
|
201
|
+
/*#__PURE__*/
|
|
202
|
+
// eslint-disable-next-line react/no-array-index-key
|
|
203
|
+
_react.default.createElement(_ReportTable.Td, {
|
|
204
|
+
className: "cell",
|
|
115
205
|
key: dataIndex
|
|
116
206
|
}, value))))))), !disableInfo ? /*#__PURE__*/_react.default.createElement(_ReportTable.InfoBlock, null, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
|
|
117
207
|
color: "#1B30AA"
|
|
@@ -163,5 +253,7 @@ ReportTable.defaultProps = {
|
|
|
163
253
|
useSelectButtons: false,
|
|
164
254
|
disableInfo: false,
|
|
165
255
|
selectTextColor: '#229E38',
|
|
166
|
-
onSelectRowClick: () => {}
|
|
256
|
+
onSelectRowClick: () => {},
|
|
257
|
+
onCheckRowClick: () => {},
|
|
258
|
+
useCheckBoxes: false
|
|
167
259
|
};
|
|
@@ -4,10 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.Tr = exports.Th = exports.Td = exports.TableWrapper = exports.Table = exports.SelectButtonSubContainer = exports.SelectButtonContainer = exports.InfoText = exports.InfoBlock = void 0;
|
|
7
|
+
exports.Tr = exports.Th = exports.Td = exports.TableWrapper = exports.Table = exports.SelectCheckboxSubContainer = exports.SelectCheckboxContainer = exports.SelectButtonSubContainer = exports.SelectButtonContainer = exports.InfoText = exports.InfoBlock = void 0;
|
|
8
8
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
|
|
9
9
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
10
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
|
|
10
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
|
|
11
11
|
const scrollableStyles = "\n overflow-y: auto;\n\n &::-webkit-scrollbar {\n height: 10px;\n }\n\n &::-webkit-scrollbar-track {\n background: #E8E8E8;\n border-radius: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background: #D0D0D0;\n border-radius: 5px;\n }\n";
|
|
12
12
|
const TableWrapper = exports.TableWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n white-space: nowrap;\n border: 1px solid #dddddd;\n border-radius: ", ";\n overflow-x: ", ";\n ", "\n"])), props => props.columnsNumber > props.maxColumnsNumber ? ' 12px 12px 6px 6px' : '12px', props => props.columnsNumber > props.maxColumnsNumber ? 'auto' : 'hidden', scrollableStyles);
|
|
13
13
|
const Table = exports.Table = _styledComponents.default.table(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n font-family: \"Poppins\", sans-serif;\n width: ", ";\n table-layout: fixed;\n position: relative;\n background-color: white;\n border-collapse: collapse;\n th,\n td {\n width: 100%;\n text-align: left;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n"])), props => "".concat(props.tableWidthSize, "%"));
|
|
@@ -17,4 +17,6 @@ const Tr = exports.Tr = _styledComponents.default.tr(_templateObject5 || (_templ
|
|
|
17
17
|
const InfoText = exports.InfoText = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 400;\n font-size: 14px;\n color: #212121;\n padding-top: 20px;\n padding-bottom: 20px;\n"])));
|
|
18
18
|
const InfoBlock = exports.InfoBlock = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 8px;\n background-color: white;\n"])));
|
|
19
19
|
const SelectButtonContainer = exports.SelectButtonContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n justify-content: flex-start;\n"])));
|
|
20
|
-
const SelectButtonSubContainer = exports.SelectButtonSubContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n font-size: 12px;\n padding: 2px 10px;\n justify-content: flex-
|
|
20
|
+
const SelectButtonSubContainer = exports.SelectButtonSubContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n font-size: 12px;\n padding: 2px 10px;\n justify-content: flex-start;\n gap: 8px;\n color: ", ";\n border-radius: 10px;\n &:hover {\n background-color: #f0f0f0;\n cursor: pointer;\n }\n"])), props => props.selectTextColor);
|
|
21
|
+
const SelectCheckboxContainer = exports.SelectCheckboxContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n justify-content: flex-start;\n"])));
|
|
22
|
+
const SelectCheckboxSubContainer = exports.SelectCheckboxSubContainer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n font-size: 12px;\n padding: 2px;\n justify-content: flex-start;\n gap: 8px;\n color: ", ";\n &:hover {\n background-color: #f0f0f0;\n cursor: pointer;\n }\n"])), props => props.selectTextColor);
|