@dt-dds/react-message 1.0.0-beta.88 → 1.0.0-beta.89
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/CHANGELOG.md +10 -0
- package/README.md +23 -36
- package/dist/index.d.mts +12 -10
- package/dist/index.d.ts +12 -10
- package/dist/index.js +213 -335
- package/dist/index.mjs +238 -333
- package/package.json +3 -2
package/dist/index.js
CHANGED
|
@@ -22,6 +22,9 @@ var __spreadValues = (a, b) => {
|
|
|
22
22
|
return a;
|
|
23
23
|
};
|
|
24
24
|
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
25
|
+
var __commonJS = (cb, mod) => function __require() {
|
|
26
|
+
return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
|
|
27
|
+
};
|
|
25
28
|
var __export = (target, all) => {
|
|
26
29
|
for (var name in all)
|
|
27
30
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -44,290 +47,73 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
44
47
|
));
|
|
45
48
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
46
49
|
|
|
50
|
+
// ../box/dist/index.js
|
|
51
|
+
var require_dist = __commonJS({
|
|
52
|
+
"../box/dist/index.js"(exports2, module2) {
|
|
53
|
+
"use strict";
|
|
54
|
+
var __create2 = Object.create;
|
|
55
|
+
var __defProp2 = Object.defineProperty;
|
|
56
|
+
var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
|
|
57
|
+
var __getOwnPropNames2 = Object.getOwnPropertyNames;
|
|
58
|
+
var __getProtoOf2 = Object.getPrototypeOf;
|
|
59
|
+
var __hasOwnProp2 = Object.prototype.hasOwnProperty;
|
|
60
|
+
var __export2 = (target, all) => {
|
|
61
|
+
for (var name in all)
|
|
62
|
+
__defProp2(target, name, { get: all[name], enumerable: true });
|
|
63
|
+
};
|
|
64
|
+
var __copyProps2 = (to, from, except, desc) => {
|
|
65
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
66
|
+
for (let key of __getOwnPropNames2(from))
|
|
67
|
+
if (!__hasOwnProp2.call(to, key) && key !== except)
|
|
68
|
+
__defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
|
|
69
|
+
}
|
|
70
|
+
return to;
|
|
71
|
+
};
|
|
72
|
+
var __toESM2 = (mod, isNodeMode, target) => (target = mod != null ? __create2(__getProtoOf2(mod)) : {}, __copyProps2(
|
|
73
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
74
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
75
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
76
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
77
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp2(target, "default", { value: mod, enumerable: true }) : target,
|
|
78
|
+
mod
|
|
79
|
+
));
|
|
80
|
+
var __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
|
|
81
|
+
var index_exports2 = {};
|
|
82
|
+
__export2(index_exports2, {
|
|
83
|
+
Box: () => Box2
|
|
84
|
+
});
|
|
85
|
+
module2.exports = __toCommonJS2(index_exports2);
|
|
86
|
+
var import_styled2 = __toESM2(require("@emotion/styled"));
|
|
87
|
+
var BoxStyled = import_styled2.default.div`
|
|
88
|
+
display: flex;
|
|
89
|
+
flex-direction: column;
|
|
90
|
+
align-items: center;
|
|
91
|
+
`;
|
|
92
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
93
|
+
var Box2 = ({
|
|
94
|
+
dataTestId,
|
|
95
|
+
children,
|
|
96
|
+
element = "div",
|
|
97
|
+
style
|
|
98
|
+
}) => {
|
|
99
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BoxStyled, { as: element, "data-testid": dataTestId, style, children });
|
|
100
|
+
};
|
|
101
|
+
}
|
|
102
|
+
});
|
|
103
|
+
|
|
47
104
|
// index.ts
|
|
48
105
|
var index_exports = {};
|
|
49
106
|
__export(index_exports, {
|
|
50
|
-
Message: () => Message
|
|
51
|
-
MessageIcons: () => MessageIcons
|
|
107
|
+
Message: () => Message
|
|
52
108
|
});
|
|
53
109
|
module.exports = __toCommonJS(index_exports);
|
|
54
110
|
|
|
55
111
|
// src/Message.tsx
|
|
112
|
+
var import_react_box = __toESM(require_dist());
|
|
113
|
+
var import_react_icon = require("@dt-dds/react-icon");
|
|
56
114
|
var import_react_typography = require("@dt-dds/react-typography");
|
|
57
|
-
|
|
58
|
-
// ../../dt-dds-react/core/assets/svgs/AllOut.tsx
|
|
59
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
60
|
-
|
|
61
|
-
// ../../dt-dds-react/core/assets/svgs/Apis.tsx
|
|
62
|
-
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
63
|
-
|
|
64
|
-
// ../../dt-dds-react/core/assets/svgs/Apps.tsx
|
|
65
|
-
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
66
|
-
|
|
67
|
-
// ../../dt-dds-react/core/assets/svgs/ArrowDropDown.tsx
|
|
68
|
-
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
69
|
-
|
|
70
|
-
// ../../dt-dds-react/core/assets/svgs/ArrowDropUp.tsx
|
|
71
|
-
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
72
|
-
|
|
73
|
-
// ../../dt-dds-react/core/assets/svgs/ArrowLeft.tsx
|
|
74
|
-
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
75
|
-
|
|
76
|
-
// ../../dt-dds-react/core/assets/svgs/ArrowRight.tsx
|
|
77
|
-
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
78
|
-
|
|
79
|
-
// ../../dt-dds-react/core/assets/svgs/AvatarThumbnail.tsx
|
|
80
|
-
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
81
|
-
|
|
82
|
-
// ../../dt-dds-react/core/assets/svgs/Bolt.tsx
|
|
83
|
-
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
84
|
-
|
|
85
|
-
// ../../dt-dds-react/core/assets/svgs/CalendarMonth.tsx
|
|
86
|
-
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
87
|
-
|
|
88
|
-
// ../../dt-dds-react/core/assets/svgs/Cancel.tsx
|
|
89
|
-
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
90
|
-
|
|
91
|
-
// ../../dt-dds-react/core/assets/svgs/Check.tsx
|
|
92
|
-
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
93
|
-
|
|
94
|
-
// ../../dt-dds-react/core/assets/svgs/CheckCircle.tsx
|
|
95
|
-
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
96
|
-
var CheckCircleOutlineIcon = (props) => {
|
|
97
|
-
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
98
|
-
"svg",
|
|
99
|
-
__spreadProps(__spreadValues({
|
|
100
|
-
fill: "currentColor",
|
|
101
|
-
height: "24",
|
|
102
|
-
viewBox: "0 0 24 24",
|
|
103
|
-
width: "24",
|
|
104
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
105
|
-
}, props), {
|
|
106
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z" })
|
|
107
|
-
})
|
|
108
|
-
);
|
|
109
|
-
};
|
|
110
|
-
var CheckCircle_default = CheckCircleOutlineIcon;
|
|
111
|
-
|
|
112
|
-
// ../../dt-dds-react/core/assets/svgs/CheckCircleOutline.tsx
|
|
113
|
-
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
114
|
-
|
|
115
|
-
// ../../dt-dds-react/core/assets/svgs/Close.tsx
|
|
116
|
-
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
117
|
-
var CloseIcon = (props) => {
|
|
118
|
-
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
119
|
-
"svg",
|
|
120
|
-
__spreadProps(__spreadValues({
|
|
121
|
-
fill: "none",
|
|
122
|
-
height: "24",
|
|
123
|
-
viewBox: "0 0 24 24",
|
|
124
|
-
width: "24",
|
|
125
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
126
|
-
}, props), {
|
|
127
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
128
|
-
"path",
|
|
129
|
-
{
|
|
130
|
-
d: "M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z",
|
|
131
|
-
fill: "currentColor"
|
|
132
|
-
}
|
|
133
|
-
)
|
|
134
|
-
})
|
|
135
|
-
);
|
|
136
|
-
};
|
|
137
|
-
var Close_default = CloseIcon;
|
|
138
|
-
|
|
139
|
-
// ../../dt-dds-react/core/assets/svgs/Copy.tsx
|
|
140
|
-
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
141
|
-
|
|
142
|
-
// ../../dt-dds-react/core/assets/svgs/Delete.tsx
|
|
143
|
-
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
144
|
-
|
|
145
|
-
// ../../dt-dds-react/core/assets/svgs/Edit.tsx
|
|
146
|
-
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
147
|
-
|
|
148
|
-
// ../../dt-dds-react/core/assets/svgs/Email.tsx
|
|
149
|
-
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
150
|
-
|
|
151
|
-
// ../../dt-dds-react/core/assets/svgs/EmailSend.tsx
|
|
152
|
-
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
153
|
-
|
|
154
|
-
// ../../dt-dds-react/core/assets/svgs/Error.tsx
|
|
155
115
|
var import_react = require("@emotion/react");
|
|
156
|
-
var
|
|
157
|
-
var Error2 = (props) => {
|
|
158
|
-
const theme = (0, import_react.useTheme)();
|
|
159
|
-
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
160
|
-
"svg",
|
|
161
|
-
__spreadProps(__spreadValues({
|
|
162
|
-
color: theme.palette.error.default,
|
|
163
|
-
fill: "none",
|
|
164
|
-
height: "24",
|
|
165
|
-
viewBox: "0 0 24 24",
|
|
166
|
-
width: "24",
|
|
167
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
168
|
-
}, props), {
|
|
169
|
-
children: [
|
|
170
|
-
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
171
|
-
"path",
|
|
172
|
-
{
|
|
173
|
-
d: "M19.0711 19.0711C17.1957 20.9464 14.6522 22 12 22C9.34784 22 6.8043 20.9464 4.92893 19.0711C3.05357 17.1957 2 14.6522 2 12C2 9.34784 3.05357 6.8043 4.92893 4.92893C6.8043 3.05357 9.34784 2 12 2C14.6522 2 17.1957 3.05357 19.0711 4.92893C20.9464 6.8043 22 9.34784 22 12C22 14.6522 20.9464 17.1957 19.0711 19.0711Z",
|
|
174
|
-
fill: "currentColor"
|
|
175
|
-
}
|
|
176
|
-
),
|
|
177
|
-
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
178
|
-
"path",
|
|
179
|
-
{
|
|
180
|
-
d: "M12.8797 13.6863L13.1157 6.48828H10.8997L11.0997 13.6863H12.8797ZM11.9907 17.5123C12.1621 17.5181 12.333 17.4894 12.4932 17.4281C12.6534 17.3667 12.7997 17.2739 12.9234 17.1551C13.0471 17.0362 13.1458 16.8938 13.2136 16.7362C13.2813 16.5786 13.3168 16.4091 13.318 16.2375C13.3191 16.066 13.2859 15.8959 13.2202 15.7375C13.1545 15.579 13.0577 15.4353 12.9356 15.3148C12.8135 15.1944 12.6684 15.0996 12.5091 15.0361C12.3497 14.9727 12.1792 14.9418 12.0077 14.9453C11.6733 14.9521 11.3547 15.0892 11.1198 15.3274C10.8849 15.5656 10.7522 15.886 10.75 16.2205C10.7478 16.555 10.8762 16.8772 11.1079 17.1184C11.3397 17.3597 11.6564 17.501 11.9907 17.5123Z",
|
|
181
|
-
fill: "white"
|
|
182
|
-
}
|
|
183
|
-
)
|
|
184
|
-
]
|
|
185
|
-
})
|
|
186
|
-
);
|
|
187
|
-
};
|
|
188
|
-
var Error_default = Error2;
|
|
189
|
-
|
|
190
|
-
// ../../dt-dds-react/core/assets/svgs/ErrorOutline.tsx
|
|
191
|
-
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
192
|
-
|
|
193
|
-
// ../../dt-dds-react/core/assets/svgs/EVStation.tsx
|
|
194
|
-
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
195
|
-
|
|
196
|
-
// ../../dt-dds-react/core/assets/svgs/Info.tsx
|
|
197
|
-
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
198
|
-
var Info = (props) => {
|
|
199
|
-
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
200
|
-
"svg",
|
|
201
|
-
__spreadProps(__spreadValues({
|
|
202
|
-
fill: "currentColor",
|
|
203
|
-
height: "24",
|
|
204
|
-
viewBox: "0 0 24 24",
|
|
205
|
-
width: "24",
|
|
206
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
207
|
-
}, props), {
|
|
208
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { d: "M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM13 17H11V11H13V17ZM13 9H11V7H13V9Z" })
|
|
209
|
-
})
|
|
210
|
-
);
|
|
211
|
-
};
|
|
212
|
-
var Info_default = Info;
|
|
213
|
-
|
|
214
|
-
// ../../dt-dds-react/core/assets/svgs/InfoOutline.tsx
|
|
215
|
-
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
216
|
-
|
|
217
|
-
// ../../dt-dds-react/core/assets/svgs/Input.tsx
|
|
218
|
-
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
219
|
-
|
|
220
|
-
// ../../dt-dds-react/core/assets/svgs/Language.tsx
|
|
221
|
-
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
222
|
-
|
|
223
|
-
// ../../dt-dds-react/core/assets/svgs/LocationOn.tsx
|
|
224
|
-
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
225
|
-
|
|
226
|
-
// ../../dt-dds-react/core/assets/svgs/LocationSearching.tsx
|
|
227
|
-
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
228
|
-
|
|
229
|
-
// ../../dt-dds-react/core/assets/svgs/MenuCompact.tsx
|
|
230
|
-
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
231
|
-
|
|
232
|
-
// ../../dt-dds-react/core/assets/svgs/MenuExpand.tsx
|
|
233
|
-
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
234
|
-
|
|
235
|
-
// ../../dt-dds-react/core/assets/svgs/Menu.tsx
|
|
236
|
-
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
237
|
-
|
|
238
|
-
// ../../dt-dds-react/core/assets/svgs/MoreHorizontal.tsx
|
|
239
|
-
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
240
|
-
|
|
241
|
-
// ../../dt-dds-react/core/assets/svgs/MoreVertical.tsx
|
|
242
|
-
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
243
|
-
|
|
244
|
-
// ../../dt-dds-react/core/assets/svgs/NoData.tsx
|
|
245
|
-
var import_react2 = require("@emotion/react");
|
|
246
|
-
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
247
|
-
|
|
248
|
-
// ../../dt-dds-react/core/assets/svgs/NotFound.tsx
|
|
249
|
-
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
250
|
-
|
|
251
|
-
// ../../dt-dds-react/core/assets/svgs/OutlinedArrowDropDown.tsx
|
|
252
|
-
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
253
|
-
|
|
254
|
-
// ../../dt-dds-react/core/assets/svgs/OutlinedArrowDropUp.tsx
|
|
255
|
-
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
256
|
-
|
|
257
|
-
// ../../dt-dds-react/core/assets/svgs/PhoneOutlined.tsx
|
|
258
|
-
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
259
|
-
|
|
260
|
-
// ../../dt-dds-react/core/assets/svgs/Payments.tsx
|
|
261
|
-
var import_jsx_runtime40 = require("react/jsx-runtime");
|
|
262
|
-
|
|
263
|
-
// ../../dt-dds-react/core/assets/svgs/Products.tsx
|
|
264
|
-
var import_jsx_runtime41 = require("react/jsx-runtime");
|
|
265
|
-
|
|
266
|
-
// ../../dt-dds-react/core/assets/svgs/RemoveCircleOutline.tsx
|
|
267
|
-
var import_jsx_runtime42 = require("react/jsx-runtime");
|
|
268
|
-
|
|
269
|
-
// ../../dt-dds-react/core/assets/svgs/Share.tsx
|
|
270
|
-
var import_jsx_runtime43 = require("react/jsx-runtime");
|
|
271
|
-
|
|
272
|
-
// ../../dt-dds-react/core/assets/svgs/Signout.tsx
|
|
273
|
-
var import_jsx_runtime44 = require("react/jsx-runtime");
|
|
274
|
-
|
|
275
|
-
// ../../dt-dds-react/core/assets/svgs/Teams.tsx
|
|
276
|
-
var import_jsx_runtime45 = require("react/jsx-runtime");
|
|
277
|
-
|
|
278
|
-
// ../../dt-dds-react/core/assets/svgs/Timeline.tsx
|
|
279
|
-
var import_jsx_runtime46 = require("react/jsx-runtime");
|
|
280
|
-
|
|
281
|
-
// ../../dt-dds-react/core/assets/svgs/Topic.tsx
|
|
282
|
-
var import_jsx_runtime47 = require("react/jsx-runtime");
|
|
283
|
-
|
|
284
|
-
// ../../dt-dds-react/core/assets/svgs/UnfoldLess.tsx
|
|
285
|
-
var import_jsx_runtime48 = require("react/jsx-runtime");
|
|
286
|
-
|
|
287
|
-
// ../../dt-dds-react/core/assets/svgs/UnfoldMore.tsx
|
|
288
|
-
var import_jsx_runtime49 = require("react/jsx-runtime");
|
|
289
|
-
|
|
290
|
-
// ../../dt-dds-react/core/assets/svgs/Username.tsx
|
|
291
|
-
var import_jsx_runtime50 = require("react/jsx-runtime");
|
|
292
|
-
|
|
293
|
-
// ../../dt-dds-react/core/assets/svgs/ViewAgenda.tsx
|
|
294
|
-
var import_jsx_runtime51 = require("react/jsx-runtime");
|
|
295
|
-
|
|
296
|
-
// ../../dt-dds-react/core/assets/svgs/Visibility.tsx
|
|
297
|
-
var import_jsx_runtime52 = require("react/jsx-runtime");
|
|
298
|
-
|
|
299
|
-
// ../../dt-dds-react/core/assets/svgs/VisibilityOff.tsx
|
|
300
|
-
var import_jsx_runtime53 = require("react/jsx-runtime");
|
|
301
|
-
|
|
302
|
-
// ../../dt-dds-react/core/assets/svgs/WarningOutline.tsx
|
|
303
|
-
var import_jsx_runtime54 = require("react/jsx-runtime");
|
|
304
|
-
|
|
305
|
-
// ../../dt-dds-react/core/assets/svgs/Warning.tsx
|
|
306
|
-
var import_jsx_runtime55 = require("react/jsx-runtime");
|
|
307
|
-
var Warning = (props) => {
|
|
308
|
-
return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
|
|
309
|
-
"svg",
|
|
310
|
-
__spreadProps(__spreadValues({
|
|
311
|
-
fill: "currentColor",
|
|
312
|
-
height: "24",
|
|
313
|
-
viewBox: "0 0 24 24",
|
|
314
|
-
width: "24",
|
|
315
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
316
|
-
}, props), {
|
|
317
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("path", { d: "M1 21.5H23L12 2.5L1 21.5ZM13 18.5H11V16.5H13V18.5ZM13 14.5H11V10.5H13V14.5Z" })
|
|
318
|
-
})
|
|
319
|
-
);
|
|
320
|
-
};
|
|
321
|
-
var Warning_default = Warning;
|
|
322
|
-
|
|
323
|
-
// ../../dt-dds-react/core/assets/svgs/Wifi.tsx
|
|
324
|
-
var import_jsx_runtime56 = require("react/jsx-runtime");
|
|
325
|
-
|
|
326
|
-
// ../../dt-dds-react/core/assets/svgs/Settings.tsx
|
|
327
|
-
var import_jsx_runtime57 = require("react/jsx-runtime");
|
|
328
|
-
|
|
329
|
-
// src/Message.styled.ts
|
|
330
|
-
var import_styled = __toESM(require("@emotion/styled"));
|
|
116
|
+
var import_react2 = require("react");
|
|
331
117
|
|
|
332
118
|
// src/types/index.ts
|
|
333
119
|
var OMessageType = {
|
|
@@ -338,97 +124,189 @@ var OMessageType = {
|
|
|
338
124
|
Warning: "warning"
|
|
339
125
|
};
|
|
340
126
|
|
|
127
|
+
// src/constants/index.ts
|
|
128
|
+
var MESSAGE_ICONS = {
|
|
129
|
+
[OMessageType.Error]: "error",
|
|
130
|
+
[OMessageType.Info]: "info",
|
|
131
|
+
[OMessageType.Success]: "check_circle",
|
|
132
|
+
[OMessageType.Warning]: "warning"
|
|
133
|
+
};
|
|
134
|
+
|
|
341
135
|
// src/Message.styled.ts
|
|
136
|
+
var import_styled = __toESM(require("@emotion/styled"));
|
|
342
137
|
var MessageStyled = import_styled.default.div`
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
138
|
+
display: grid;
|
|
139
|
+
padding: ${({ theme }) => `${theme.spacing.spacing_40} ${theme.spacing.spacing_50}`};
|
|
140
|
+
border-radius: ${({ theme }) => theme.shape.message};
|
|
141
|
+
|
|
142
|
+
${({ theme, messageType, orientation }) => {
|
|
143
|
+
const isDefault = messageType === OMessageType.Default;
|
|
144
|
+
const background = isDefault ? theme.palette.surface.light : theme.palette[messageType].light;
|
|
145
|
+
const border = isDefault ? theme.palette.border.medium : theme.palette[messageType].default;
|
|
146
|
+
const baseGrid = `
|
|
147
|
+
grid-template-columns: ${isDefault ? "1fr fit-content(100%)" : "fit-content(100%) 1fr fit-content(100%)"};
|
|
148
|
+
background-color: ${background};
|
|
149
|
+
border: 1px solid ${border};
|
|
150
|
+
gap: ${theme.spacing.spacing_50}
|
|
151
|
+
`;
|
|
152
|
+
if (orientation === "vertical") {
|
|
153
|
+
return `
|
|
154
|
+
${baseGrid};
|
|
155
|
+
grid-template-columns: 1fr fit-content(100%);
|
|
156
|
+
gap: ${theme.spacing.spacing_30};
|
|
157
|
+
|
|
158
|
+
& > :nth-child(1) {
|
|
159
|
+
grid-column: 1;
|
|
160
|
+
grid-row: 1;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
${isDefault ? `
|
|
164
|
+
& > :nth-child(2) {
|
|
165
|
+
grid-column: 2;
|
|
166
|
+
grid-row: 1;
|
|
167
|
+
}
|
|
168
|
+
` : `
|
|
169
|
+
& > :nth-child(2) {
|
|
170
|
+
grid-column: 1;
|
|
171
|
+
grid-row: 2;
|
|
172
|
+
}
|
|
173
|
+
& > :nth-child(3) {
|
|
174
|
+
grid-column: 2;
|
|
175
|
+
grid-row: 1;
|
|
176
|
+
}
|
|
177
|
+
`}
|
|
178
|
+
`;
|
|
179
|
+
}
|
|
180
|
+
return baseGrid;
|
|
181
|
+
}}
|
|
369
182
|
`;
|
|
370
|
-
var
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
183
|
+
var MessageActionsStyled = import_styled.default.div`
|
|
184
|
+
display: flex;
|
|
185
|
+
flex-direction: row;
|
|
186
|
+
gap: ${({ theme }) => theme.spacing.spacing_20};
|
|
187
|
+
|
|
188
|
+
button {
|
|
189
|
+
${({ theme, messageType }) => {
|
|
190
|
+
const isDefault = messageType === "default";
|
|
191
|
+
const color = isDefault ? theme.palette.content.default : theme.palette[messageType].dark;
|
|
192
|
+
const hoverBg = isDefault ? theme.palette.surface.medium : theme.palette[messageType].medium;
|
|
193
|
+
return `
|
|
194
|
+
color: ${color};
|
|
195
|
+
|
|
196
|
+
&:hover {
|
|
197
|
+
background-color: ${hoverBg};
|
|
198
|
+
color: ${color};
|
|
199
|
+
}
|
|
200
|
+
`;
|
|
201
|
+
}}
|
|
202
|
+
}
|
|
376
203
|
`;
|
|
377
204
|
var MessageButtonCloseStyled = import_styled.default.button`
|
|
378
|
-
${({ theme }) => `
|
|
379
|
-
color: ${theme.palette.content.default};
|
|
205
|
+
${({ theme, messageType, orientation }) => `
|
|
380
206
|
border: 0;
|
|
381
207
|
cursor: pointer;
|
|
382
208
|
background: transparent;
|
|
383
209
|
display: flex;
|
|
210
|
+
height: fit-content;
|
|
211
|
+
|
|
212
|
+
${orientation === "horizontal" && "align-self: center"};
|
|
384
213
|
|
|
214
|
+
&:focus-visible {
|
|
215
|
+
outline: 2px solid ${theme.palette.primary.default};
|
|
216
|
+
outline-offset: 1px;
|
|
217
|
+
}
|
|
218
|
+
|
|
385
219
|
&:hover {
|
|
386
|
-
background-color: ${theme.palette.surface.
|
|
220
|
+
background-color: ${messageType === OMessageType.Default ? theme.palette.surface.medium : theme.palette[messageType].medium};
|
|
387
221
|
}
|
|
388
222
|
`}
|
|
389
223
|
`;
|
|
390
224
|
|
|
391
225
|
// src/Message.tsx
|
|
392
|
-
var
|
|
393
|
-
var MessageIcons = {
|
|
394
|
-
[OMessageType.Error]: Error_default,
|
|
395
|
-
[OMessageType.Info]: Info_default,
|
|
396
|
-
[OMessageType.Success]: CheckCircle_default,
|
|
397
|
-
[OMessageType.Warning]: Warning_default,
|
|
398
|
-
[OMessageType.Default]: null
|
|
399
|
-
};
|
|
226
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
400
227
|
var Message = ({
|
|
401
228
|
children,
|
|
402
229
|
dataTestId,
|
|
403
230
|
style,
|
|
404
231
|
type = OMessageType.Default,
|
|
405
|
-
onClose
|
|
232
|
+
onClose,
|
|
233
|
+
description,
|
|
234
|
+
title,
|
|
235
|
+
orientation = "horizontal"
|
|
406
236
|
}) => {
|
|
407
|
-
const
|
|
408
|
-
const
|
|
409
|
-
|
|
237
|
+
const theme = (0, import_react.useTheme)();
|
|
238
|
+
const isDefault = type === OMessageType.Default;
|
|
239
|
+
const isHorizontal = orientation === "horizontal";
|
|
240
|
+
const isDismissible = !!onClose;
|
|
241
|
+
const textColor = isDefault ? "content.default" : `${type}.dark`;
|
|
242
|
+
const iconColor = isDefault ? theme.palette.content.default : theme.palette[type].dark;
|
|
243
|
+
const clonedChildren = (0, import_react2.useMemo)(
|
|
244
|
+
() => import_react2.Children.map(children, (child) => {
|
|
245
|
+
return child && (0, import_react2.cloneElement)(child, __spreadProps(__spreadValues({}, child.props), {
|
|
246
|
+
type
|
|
247
|
+
}));
|
|
248
|
+
}),
|
|
249
|
+
[children, type]
|
|
250
|
+
);
|
|
251
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
410
252
|
MessageStyled,
|
|
411
253
|
{
|
|
412
254
|
"data-testid": dataTestId != null ? dataTestId : "message",
|
|
255
|
+
messageType: type,
|
|
256
|
+
orientation,
|
|
413
257
|
style,
|
|
414
|
-
type,
|
|
415
258
|
children: [
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
259
|
+
!isDefault && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
260
|
+
import_react_icon.Icon,
|
|
261
|
+
{
|
|
262
|
+
code: MESSAGE_ICONS[type],
|
|
263
|
+
color: theme.palette[type].dark,
|
|
264
|
+
"data-testid": "message-icon",
|
|
265
|
+
dataTestId: "message-icon"
|
|
266
|
+
}
|
|
267
|
+
),
|
|
268
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
269
|
+
import_react_box.Box,
|
|
270
|
+
{
|
|
271
|
+
dataTestId: "message-content",
|
|
272
|
+
style: {
|
|
273
|
+
flexDirection: isHorizontal ? "row" : "column",
|
|
274
|
+
justifyContent: "space-between",
|
|
275
|
+
gap: isHorizontal ? theme.spacing.spacing_30 : theme.spacing.spacing_50,
|
|
276
|
+
alignItems: isHorizontal ? "center" : "start"
|
|
277
|
+
},
|
|
278
|
+
children: [
|
|
279
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_box.Box, { style: { alignItems: "flex-start" }, children: [
|
|
280
|
+
title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_typography.Typography, { color: textColor, fontStyles: "bodyLgBold", children: title }) : null,
|
|
281
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_typography.Typography, { color: textColor, fontStyles: "bodyLgRegular", children: description })
|
|
282
|
+
] }),
|
|
283
|
+
clonedChildren
|
|
284
|
+
]
|
|
285
|
+
}
|
|
286
|
+
),
|
|
287
|
+
isDismissible ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
288
|
+
MessageButtonCloseStyled,
|
|
289
|
+
{
|
|
290
|
+
"aria-label": "Close message",
|
|
291
|
+
messageType: type,
|
|
292
|
+
onClick: onClose,
|
|
293
|
+
orientation,
|
|
294
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icon.Icon, { code: "close", color: iconColor })
|
|
295
|
+
}
|
|
296
|
+
) : null
|
|
419
297
|
]
|
|
420
298
|
}
|
|
421
299
|
);
|
|
422
300
|
};
|
|
423
|
-
Message.
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
301
|
+
Message.Actions = ({ children, dataTestId, type }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
302
|
+
MessageActionsStyled,
|
|
303
|
+
{
|
|
304
|
+
"data-testid": dataTestId != null ? dataTestId : "message-actions",
|
|
305
|
+
messageType: type,
|
|
306
|
+
children
|
|
307
|
+
}
|
|
308
|
+
);
|
|
430
309
|
// Annotate the CommonJS export names for ESM import in node:
|
|
431
310
|
0 && (module.exports = {
|
|
432
|
-
Message
|
|
433
|
-
MessageIcons
|
|
311
|
+
Message
|
|
434
312
|
});
|