@sproutsocial/seeds-react-message 1.0.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/.eslintignore +6 -0
- package/.eslintrc.js +4 -0
- package/.turbo/turbo-build.log +21 -0
- package/CHANGELOG.md +7 -0
- package/dist/esm/index.js +888 -0
- package/dist/esm/index.js.map +1 -0
- package/dist/index.d.mts +73 -0
- package/dist/index.d.ts +73 -0
- package/dist/index.js +919 -0
- package/dist/index.js.map +1 -0
- package/jest.config.js +9 -0
- package/package.json +45 -0
- package/src/Message.stories.tsx +75 -0
- package/src/Message.tsx +177 -0
- package/src/MessageTypes.ts +23 -0
- package/src/__tests__/Message.typetest.tsx +57 -0
- package/src/__tests__/features.test.tsx +10 -0
- package/src/constants.ts +7 -0
- package/src/index.ts +6 -0
- package/src/styled.d.ts +7 -0
- package/src/styles.ts +139 -0
- package/tsconfig.json +9 -0
- package/tsup.config.ts +12 -0
|
@@ -0,0 +1,888 @@
|
|
|
1
|
+
// src/Message.tsx
|
|
2
|
+
import * as React2 from "react";
|
|
3
|
+
import Avatar from "@sproutsocial/seeds-react-avatar";
|
|
4
|
+
import Button from "@sproutsocial/seeds-react-button";
|
|
5
|
+
import Checkbox from "@sproutsocial/seeds-react-checkbox";
|
|
6
|
+
|
|
7
|
+
// src/styles.ts
|
|
8
|
+
import { memo } from "react";
|
|
9
|
+
import styled2 from "styled-components";
|
|
10
|
+
|
|
11
|
+
// ../../node_modules/@babel/runtime/helpers/esm/extends.js
|
|
12
|
+
function _extends() {
|
|
13
|
+
_extends = Object.assign ? Object.assign.bind() : function(target) {
|
|
14
|
+
for (var i = 1; i < arguments.length; i++) {
|
|
15
|
+
var source = arguments[i];
|
|
16
|
+
for (var key in source) {
|
|
17
|
+
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
18
|
+
target[key] = source[key];
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
return target;
|
|
23
|
+
};
|
|
24
|
+
return _extends.apply(this, arguments);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
// ../../node_modules/@babel/runtime/helpers/esm/assertThisInitialized.js
|
|
28
|
+
function _assertThisInitialized(self) {
|
|
29
|
+
if (self === void 0) {
|
|
30
|
+
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
|
|
31
|
+
}
|
|
32
|
+
return self;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
// ../../node_modules/@babel/runtime/helpers/esm/setPrototypeOf.js
|
|
36
|
+
function _setPrototypeOf(o, p) {
|
|
37
|
+
_setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf2(o2, p2) {
|
|
38
|
+
o2.__proto__ = p2;
|
|
39
|
+
return o2;
|
|
40
|
+
};
|
|
41
|
+
return _setPrototypeOf(o, p);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
// ../../node_modules/@babel/runtime/helpers/esm/inheritsLoose.js
|
|
45
|
+
function _inheritsLoose(subClass, superClass) {
|
|
46
|
+
subClass.prototype = Object.create(superClass.prototype);
|
|
47
|
+
subClass.prototype.constructor = subClass;
|
|
48
|
+
_setPrototypeOf(subClass, superClass);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
// ../../node_modules/@babel/runtime/helpers/esm/getPrototypeOf.js
|
|
52
|
+
function _getPrototypeOf(o) {
|
|
53
|
+
_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf2(o2) {
|
|
54
|
+
return o2.__proto__ || Object.getPrototypeOf(o2);
|
|
55
|
+
};
|
|
56
|
+
return _getPrototypeOf(o);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
// ../../node_modules/@babel/runtime/helpers/esm/isNativeFunction.js
|
|
60
|
+
function _isNativeFunction(fn) {
|
|
61
|
+
try {
|
|
62
|
+
return Function.toString.call(fn).indexOf("[native code]") !== -1;
|
|
63
|
+
} catch (e) {
|
|
64
|
+
return typeof fn === "function";
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
// ../../node_modules/@babel/runtime/helpers/esm/isNativeReflectConstruct.js
|
|
69
|
+
function _isNativeReflectConstruct() {
|
|
70
|
+
try {
|
|
71
|
+
var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {
|
|
72
|
+
}));
|
|
73
|
+
} catch (t2) {
|
|
74
|
+
}
|
|
75
|
+
return (_isNativeReflectConstruct = function _isNativeReflectConstruct2() {
|
|
76
|
+
return !!t;
|
|
77
|
+
})();
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
// ../../node_modules/@babel/runtime/helpers/esm/construct.js
|
|
81
|
+
function _construct(t, e, r) {
|
|
82
|
+
if (_isNativeReflectConstruct())
|
|
83
|
+
return Reflect.construct.apply(null, arguments);
|
|
84
|
+
var o = [null];
|
|
85
|
+
o.push.apply(o, e);
|
|
86
|
+
var p = new (t.bind.apply(t, o))();
|
|
87
|
+
return r && _setPrototypeOf(p, r.prototype), p;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
// ../../node_modules/@babel/runtime/helpers/esm/wrapNativeSuper.js
|
|
91
|
+
function _wrapNativeSuper(Class) {
|
|
92
|
+
var _cache = typeof Map === "function" ? /* @__PURE__ */ new Map() : void 0;
|
|
93
|
+
_wrapNativeSuper = function _wrapNativeSuper2(Class2) {
|
|
94
|
+
if (Class2 === null || !_isNativeFunction(Class2))
|
|
95
|
+
return Class2;
|
|
96
|
+
if (typeof Class2 !== "function") {
|
|
97
|
+
throw new TypeError("Super expression must either be null or a function");
|
|
98
|
+
}
|
|
99
|
+
if (typeof _cache !== "undefined") {
|
|
100
|
+
if (_cache.has(Class2))
|
|
101
|
+
return _cache.get(Class2);
|
|
102
|
+
_cache.set(Class2, Wrapper);
|
|
103
|
+
}
|
|
104
|
+
function Wrapper() {
|
|
105
|
+
return _construct(Class2, arguments, _getPrototypeOf(this).constructor);
|
|
106
|
+
}
|
|
107
|
+
Wrapper.prototype = Object.create(Class2.prototype, {
|
|
108
|
+
constructor: {
|
|
109
|
+
value: Wrapper,
|
|
110
|
+
enumerable: false,
|
|
111
|
+
writable: true,
|
|
112
|
+
configurable: true
|
|
113
|
+
}
|
|
114
|
+
});
|
|
115
|
+
return _setPrototypeOf(Wrapper, Class2);
|
|
116
|
+
};
|
|
117
|
+
return _wrapNativeSuper(Class);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
// ../../node_modules/polished/dist/polished.esm.js
|
|
121
|
+
var ERRORS = {
|
|
122
|
+
"1": "Passed invalid arguments to hsl, please pass multiple numbers e.g. hsl(360, 0.75, 0.4) or an object e.g. rgb({ hue: 255, saturation: 0.4, lightness: 0.75 }).\n\n",
|
|
123
|
+
"2": "Passed invalid arguments to hsla, please pass multiple numbers e.g. hsla(360, 0.75, 0.4, 0.7) or an object e.g. rgb({ hue: 255, saturation: 0.4, lightness: 0.75, alpha: 0.7 }).\n\n",
|
|
124
|
+
"3": "Passed an incorrect argument to a color function, please pass a string representation of a color.\n\n",
|
|
125
|
+
"4": "Couldn't generate valid rgb string from %s, it returned %s.\n\n",
|
|
126
|
+
"5": "Couldn't parse the color string. Please provide the color as a string in hex, rgb, rgba, hsl or hsla notation.\n\n",
|
|
127
|
+
"6": "Passed invalid arguments to rgb, please pass multiple numbers e.g. rgb(255, 205, 100) or an object e.g. rgb({ red: 255, green: 205, blue: 100 }).\n\n",
|
|
128
|
+
"7": "Passed invalid arguments to rgba, please pass multiple numbers e.g. rgb(255, 205, 100, 0.75) or an object e.g. rgb({ red: 255, green: 205, blue: 100, alpha: 0.75 }).\n\n",
|
|
129
|
+
"8": "Passed invalid argument to toColorString, please pass a RgbColor, RgbaColor, HslColor or HslaColor object.\n\n",
|
|
130
|
+
"9": "Please provide a number of steps to the modularScale helper.\n\n",
|
|
131
|
+
"10": "Please pass a number or one of the predefined scales to the modularScale helper as the ratio.\n\n",
|
|
132
|
+
"11": 'Invalid value passed as base to modularScale, expected number or em string but got "%s"\n\n',
|
|
133
|
+
"12": 'Expected a string ending in "px" or a number passed as the first argument to %s(), got "%s" instead.\n\n',
|
|
134
|
+
"13": 'Expected a string ending in "px" or a number passed as the second argument to %s(), got "%s" instead.\n\n',
|
|
135
|
+
"14": 'Passed invalid pixel value ("%s") to %s(), please pass a value like "12px" or 12.\n\n',
|
|
136
|
+
"15": 'Passed invalid base value ("%s") to %s(), please pass a value like "12px" or 12.\n\n',
|
|
137
|
+
"16": "You must provide a template to this method.\n\n",
|
|
138
|
+
"17": "You passed an unsupported selector state to this method.\n\n",
|
|
139
|
+
"18": "minScreen and maxScreen must be provided as stringified numbers with the same units.\n\n",
|
|
140
|
+
"19": "fromSize and toSize must be provided as stringified numbers with the same units.\n\n",
|
|
141
|
+
"20": "expects either an array of objects or a single object with the properties prop, fromSize, and toSize.\n\n",
|
|
142
|
+
"21": "expects the objects in the first argument array to have the properties `prop`, `fromSize`, and `toSize`.\n\n",
|
|
143
|
+
"22": "expects the first argument object to have the properties `prop`, `fromSize`, and `toSize`.\n\n",
|
|
144
|
+
"23": "fontFace expects a name of a font-family.\n\n",
|
|
145
|
+
"24": "fontFace expects either the path to the font file(s) or a name of a local copy.\n\n",
|
|
146
|
+
"25": "fontFace expects localFonts to be an array.\n\n",
|
|
147
|
+
"26": "fontFace expects fileFormats to be an array.\n\n",
|
|
148
|
+
"27": "radialGradient requries at least 2 color-stops to properly render.\n\n",
|
|
149
|
+
"28": "Please supply a filename to retinaImage() as the first argument.\n\n",
|
|
150
|
+
"29": "Passed invalid argument to triangle, please pass correct pointingDirection e.g. 'right'.\n\n",
|
|
151
|
+
"30": "Passed an invalid value to `height` or `width`. Please provide a pixel based unit.\n\n",
|
|
152
|
+
"31": "The animation shorthand only takes 8 arguments. See the specification for more information: http://mdn.io/animation\n\n",
|
|
153
|
+
"32": "To pass multiple animations please supply them in arrays, e.g. animation(['rotate', '2s'], ['move', '1s'])\nTo pass a single animation please supply them in simple values, e.g. animation('rotate', '2s')\n\n",
|
|
154
|
+
"33": "The animation shorthand arrays can only have 8 elements. See the specification for more information: http://mdn.io/animation\n\n",
|
|
155
|
+
"34": "borderRadius expects a radius value as a string or number as the second argument.\n\n",
|
|
156
|
+
"35": 'borderRadius expects one of "top", "bottom", "left" or "right" as the first argument.\n\n',
|
|
157
|
+
"36": "Property must be a string value.\n\n",
|
|
158
|
+
"37": "Syntax Error at %s.\n\n",
|
|
159
|
+
"38": "Formula contains a function that needs parentheses at %s.\n\n",
|
|
160
|
+
"39": "Formula is missing closing parenthesis at %s.\n\n",
|
|
161
|
+
"40": "Formula has too many closing parentheses at %s.\n\n",
|
|
162
|
+
"41": "All values in a formula must have the same unit or be unitless.\n\n",
|
|
163
|
+
"42": "Please provide a number of steps to the modularScale helper.\n\n",
|
|
164
|
+
"43": "Please pass a number or one of the predefined scales to the modularScale helper as the ratio.\n\n",
|
|
165
|
+
"44": "Invalid value passed as base to modularScale, expected number or em/rem string but got %s.\n\n",
|
|
166
|
+
"45": "Passed invalid argument to hslToColorString, please pass a HslColor or HslaColor object.\n\n",
|
|
167
|
+
"46": "Passed invalid argument to rgbToColorString, please pass a RgbColor or RgbaColor object.\n\n",
|
|
168
|
+
"47": "minScreen and maxScreen must be provided as stringified numbers with the same units.\n\n",
|
|
169
|
+
"48": "fromSize and toSize must be provided as stringified numbers with the same units.\n\n",
|
|
170
|
+
"49": "Expects either an array of objects or a single object with the properties prop, fromSize, and toSize.\n\n",
|
|
171
|
+
"50": "Expects the objects in the first argument array to have the properties prop, fromSize, and toSize.\n\n",
|
|
172
|
+
"51": "Expects the first argument object to have the properties prop, fromSize, and toSize.\n\n",
|
|
173
|
+
"52": "fontFace expects either the path to the font file(s) or a name of a local copy.\n\n",
|
|
174
|
+
"53": "fontFace expects localFonts to be an array.\n\n",
|
|
175
|
+
"54": "fontFace expects fileFormats to be an array.\n\n",
|
|
176
|
+
"55": "fontFace expects a name of a font-family.\n\n",
|
|
177
|
+
"56": "linearGradient requries at least 2 color-stops to properly render.\n\n",
|
|
178
|
+
"57": "radialGradient requries at least 2 color-stops to properly render.\n\n",
|
|
179
|
+
"58": "Please supply a filename to retinaImage() as the first argument.\n\n",
|
|
180
|
+
"59": "Passed invalid argument to triangle, please pass correct pointingDirection e.g. 'right'.\n\n",
|
|
181
|
+
"60": "Passed an invalid value to `height` or `width`. Please provide a pixel based unit.\n\n",
|
|
182
|
+
"61": "Property must be a string value.\n\n",
|
|
183
|
+
"62": "borderRadius expects a radius value as a string or number as the second argument.\n\n",
|
|
184
|
+
"63": 'borderRadius expects one of "top", "bottom", "left" or "right" as the first argument.\n\n',
|
|
185
|
+
"64": "The animation shorthand only takes 8 arguments. See the specification for more information: http://mdn.io/animation.\n\n",
|
|
186
|
+
"65": "To pass multiple animations please supply them in arrays, e.g. animation(['rotate', '2s'], ['move', '1s'])\\nTo pass a single animation please supply them in simple values, e.g. animation('rotate', '2s').\n\n",
|
|
187
|
+
"66": "The animation shorthand arrays can only have 8 elements. See the specification for more information: http://mdn.io/animation.\n\n",
|
|
188
|
+
"67": "You must provide a template to this method.\n\n",
|
|
189
|
+
"68": "You passed an unsupported selector state to this method.\n\n",
|
|
190
|
+
"69": 'Expected a string ending in "px" or a number passed as the first argument to %s(), got %s instead.\n\n',
|
|
191
|
+
"70": 'Expected a string ending in "px" or a number passed as the second argument to %s(), got %s instead.\n\n',
|
|
192
|
+
"71": 'Passed invalid pixel value %s to %s(), please pass a value like "12px" or 12.\n\n',
|
|
193
|
+
"72": 'Passed invalid base value %s to %s(), please pass a value like "12px" or 12.\n\n',
|
|
194
|
+
"73": "Please provide a valid CSS variable.\n\n",
|
|
195
|
+
"74": "CSS variable not found.\n\n",
|
|
196
|
+
"75": "fromSize and toSize must be provided as stringified numbers with the same units as minScreen and maxScreen.\n"
|
|
197
|
+
};
|
|
198
|
+
function format() {
|
|
199
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
200
|
+
args[_key] = arguments[_key];
|
|
201
|
+
}
|
|
202
|
+
var a = args[0];
|
|
203
|
+
var b = [];
|
|
204
|
+
var c;
|
|
205
|
+
for (c = 1; c < args.length; c += 1) {
|
|
206
|
+
b.push(args[c]);
|
|
207
|
+
}
|
|
208
|
+
b.forEach(function(d) {
|
|
209
|
+
a = a.replace(/%[a-z]/, d);
|
|
210
|
+
});
|
|
211
|
+
return a;
|
|
212
|
+
}
|
|
213
|
+
var PolishedError = /* @__PURE__ */ function(_Error) {
|
|
214
|
+
_inheritsLoose(PolishedError2, _Error);
|
|
215
|
+
function PolishedError2(code) {
|
|
216
|
+
var _this;
|
|
217
|
+
if (process.env.NODE_ENV === "production") {
|
|
218
|
+
_this = _Error.call(this, "An error occurred. See https://github.com/styled-components/polished/blob/main/src/internalHelpers/errors.md#" + code + " for more information.") || this;
|
|
219
|
+
} else {
|
|
220
|
+
for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
|
|
221
|
+
args[_key2 - 1] = arguments[_key2];
|
|
222
|
+
}
|
|
223
|
+
_this = _Error.call(this, format.apply(void 0, [ERRORS[code]].concat(args))) || this;
|
|
224
|
+
}
|
|
225
|
+
return _assertThisInitialized(_this);
|
|
226
|
+
}
|
|
227
|
+
return PolishedError2;
|
|
228
|
+
}(/* @__PURE__ */ _wrapNativeSuper(Error));
|
|
229
|
+
function colorToInt(color) {
|
|
230
|
+
return Math.round(color * 255);
|
|
231
|
+
}
|
|
232
|
+
function convertToInt(red, green, blue) {
|
|
233
|
+
return colorToInt(red) + "," + colorToInt(green) + "," + colorToInt(blue);
|
|
234
|
+
}
|
|
235
|
+
function hslToRgb(hue, saturation, lightness, convert) {
|
|
236
|
+
if (convert === void 0) {
|
|
237
|
+
convert = convertToInt;
|
|
238
|
+
}
|
|
239
|
+
if (saturation === 0) {
|
|
240
|
+
return convert(lightness, lightness, lightness);
|
|
241
|
+
}
|
|
242
|
+
var huePrime = (hue % 360 + 360) % 360 / 60;
|
|
243
|
+
var chroma = (1 - Math.abs(2 * lightness - 1)) * saturation;
|
|
244
|
+
var secondComponent = chroma * (1 - Math.abs(huePrime % 2 - 1));
|
|
245
|
+
var red = 0;
|
|
246
|
+
var green = 0;
|
|
247
|
+
var blue = 0;
|
|
248
|
+
if (huePrime >= 0 && huePrime < 1) {
|
|
249
|
+
red = chroma;
|
|
250
|
+
green = secondComponent;
|
|
251
|
+
} else if (huePrime >= 1 && huePrime < 2) {
|
|
252
|
+
red = secondComponent;
|
|
253
|
+
green = chroma;
|
|
254
|
+
} else if (huePrime >= 2 && huePrime < 3) {
|
|
255
|
+
green = chroma;
|
|
256
|
+
blue = secondComponent;
|
|
257
|
+
} else if (huePrime >= 3 && huePrime < 4) {
|
|
258
|
+
green = secondComponent;
|
|
259
|
+
blue = chroma;
|
|
260
|
+
} else if (huePrime >= 4 && huePrime < 5) {
|
|
261
|
+
red = secondComponent;
|
|
262
|
+
blue = chroma;
|
|
263
|
+
} else if (huePrime >= 5 && huePrime < 6) {
|
|
264
|
+
red = chroma;
|
|
265
|
+
blue = secondComponent;
|
|
266
|
+
}
|
|
267
|
+
var lightnessModification = lightness - chroma / 2;
|
|
268
|
+
var finalRed = red + lightnessModification;
|
|
269
|
+
var finalGreen = green + lightnessModification;
|
|
270
|
+
var finalBlue = blue + lightnessModification;
|
|
271
|
+
return convert(finalRed, finalGreen, finalBlue);
|
|
272
|
+
}
|
|
273
|
+
var namedColorMap = {
|
|
274
|
+
aliceblue: "f0f8ff",
|
|
275
|
+
antiquewhite: "faebd7",
|
|
276
|
+
aqua: "00ffff",
|
|
277
|
+
aquamarine: "7fffd4",
|
|
278
|
+
azure: "f0ffff",
|
|
279
|
+
beige: "f5f5dc",
|
|
280
|
+
bisque: "ffe4c4",
|
|
281
|
+
black: "000",
|
|
282
|
+
blanchedalmond: "ffebcd",
|
|
283
|
+
blue: "0000ff",
|
|
284
|
+
blueviolet: "8a2be2",
|
|
285
|
+
brown: "a52a2a",
|
|
286
|
+
burlywood: "deb887",
|
|
287
|
+
cadetblue: "5f9ea0",
|
|
288
|
+
chartreuse: "7fff00",
|
|
289
|
+
chocolate: "d2691e",
|
|
290
|
+
coral: "ff7f50",
|
|
291
|
+
cornflowerblue: "6495ed",
|
|
292
|
+
cornsilk: "fff8dc",
|
|
293
|
+
crimson: "dc143c",
|
|
294
|
+
cyan: "00ffff",
|
|
295
|
+
darkblue: "00008b",
|
|
296
|
+
darkcyan: "008b8b",
|
|
297
|
+
darkgoldenrod: "b8860b",
|
|
298
|
+
darkgray: "a9a9a9",
|
|
299
|
+
darkgreen: "006400",
|
|
300
|
+
darkgrey: "a9a9a9",
|
|
301
|
+
darkkhaki: "bdb76b",
|
|
302
|
+
darkmagenta: "8b008b",
|
|
303
|
+
darkolivegreen: "556b2f",
|
|
304
|
+
darkorange: "ff8c00",
|
|
305
|
+
darkorchid: "9932cc",
|
|
306
|
+
darkred: "8b0000",
|
|
307
|
+
darksalmon: "e9967a",
|
|
308
|
+
darkseagreen: "8fbc8f",
|
|
309
|
+
darkslateblue: "483d8b",
|
|
310
|
+
darkslategray: "2f4f4f",
|
|
311
|
+
darkslategrey: "2f4f4f",
|
|
312
|
+
darkturquoise: "00ced1",
|
|
313
|
+
darkviolet: "9400d3",
|
|
314
|
+
deeppink: "ff1493",
|
|
315
|
+
deepskyblue: "00bfff",
|
|
316
|
+
dimgray: "696969",
|
|
317
|
+
dimgrey: "696969",
|
|
318
|
+
dodgerblue: "1e90ff",
|
|
319
|
+
firebrick: "b22222",
|
|
320
|
+
floralwhite: "fffaf0",
|
|
321
|
+
forestgreen: "228b22",
|
|
322
|
+
fuchsia: "ff00ff",
|
|
323
|
+
gainsboro: "dcdcdc",
|
|
324
|
+
ghostwhite: "f8f8ff",
|
|
325
|
+
gold: "ffd700",
|
|
326
|
+
goldenrod: "daa520",
|
|
327
|
+
gray: "808080",
|
|
328
|
+
green: "008000",
|
|
329
|
+
greenyellow: "adff2f",
|
|
330
|
+
grey: "808080",
|
|
331
|
+
honeydew: "f0fff0",
|
|
332
|
+
hotpink: "ff69b4",
|
|
333
|
+
indianred: "cd5c5c",
|
|
334
|
+
indigo: "4b0082",
|
|
335
|
+
ivory: "fffff0",
|
|
336
|
+
khaki: "f0e68c",
|
|
337
|
+
lavender: "e6e6fa",
|
|
338
|
+
lavenderblush: "fff0f5",
|
|
339
|
+
lawngreen: "7cfc00",
|
|
340
|
+
lemonchiffon: "fffacd",
|
|
341
|
+
lightblue: "add8e6",
|
|
342
|
+
lightcoral: "f08080",
|
|
343
|
+
lightcyan: "e0ffff",
|
|
344
|
+
lightgoldenrodyellow: "fafad2",
|
|
345
|
+
lightgray: "d3d3d3",
|
|
346
|
+
lightgreen: "90ee90",
|
|
347
|
+
lightgrey: "d3d3d3",
|
|
348
|
+
lightpink: "ffb6c1",
|
|
349
|
+
lightsalmon: "ffa07a",
|
|
350
|
+
lightseagreen: "20b2aa",
|
|
351
|
+
lightskyblue: "87cefa",
|
|
352
|
+
lightslategray: "789",
|
|
353
|
+
lightslategrey: "789",
|
|
354
|
+
lightsteelblue: "b0c4de",
|
|
355
|
+
lightyellow: "ffffe0",
|
|
356
|
+
lime: "0f0",
|
|
357
|
+
limegreen: "32cd32",
|
|
358
|
+
linen: "faf0e6",
|
|
359
|
+
magenta: "f0f",
|
|
360
|
+
maroon: "800000",
|
|
361
|
+
mediumaquamarine: "66cdaa",
|
|
362
|
+
mediumblue: "0000cd",
|
|
363
|
+
mediumorchid: "ba55d3",
|
|
364
|
+
mediumpurple: "9370db",
|
|
365
|
+
mediumseagreen: "3cb371",
|
|
366
|
+
mediumslateblue: "7b68ee",
|
|
367
|
+
mediumspringgreen: "00fa9a",
|
|
368
|
+
mediumturquoise: "48d1cc",
|
|
369
|
+
mediumvioletred: "c71585",
|
|
370
|
+
midnightblue: "191970",
|
|
371
|
+
mintcream: "f5fffa",
|
|
372
|
+
mistyrose: "ffe4e1",
|
|
373
|
+
moccasin: "ffe4b5",
|
|
374
|
+
navajowhite: "ffdead",
|
|
375
|
+
navy: "000080",
|
|
376
|
+
oldlace: "fdf5e6",
|
|
377
|
+
olive: "808000",
|
|
378
|
+
olivedrab: "6b8e23",
|
|
379
|
+
orange: "ffa500",
|
|
380
|
+
orangered: "ff4500",
|
|
381
|
+
orchid: "da70d6",
|
|
382
|
+
palegoldenrod: "eee8aa",
|
|
383
|
+
palegreen: "98fb98",
|
|
384
|
+
paleturquoise: "afeeee",
|
|
385
|
+
palevioletred: "db7093",
|
|
386
|
+
papayawhip: "ffefd5",
|
|
387
|
+
peachpuff: "ffdab9",
|
|
388
|
+
peru: "cd853f",
|
|
389
|
+
pink: "ffc0cb",
|
|
390
|
+
plum: "dda0dd",
|
|
391
|
+
powderblue: "b0e0e6",
|
|
392
|
+
purple: "800080",
|
|
393
|
+
rebeccapurple: "639",
|
|
394
|
+
red: "f00",
|
|
395
|
+
rosybrown: "bc8f8f",
|
|
396
|
+
royalblue: "4169e1",
|
|
397
|
+
saddlebrown: "8b4513",
|
|
398
|
+
salmon: "fa8072",
|
|
399
|
+
sandybrown: "f4a460",
|
|
400
|
+
seagreen: "2e8b57",
|
|
401
|
+
seashell: "fff5ee",
|
|
402
|
+
sienna: "a0522d",
|
|
403
|
+
silver: "c0c0c0",
|
|
404
|
+
skyblue: "87ceeb",
|
|
405
|
+
slateblue: "6a5acd",
|
|
406
|
+
slategray: "708090",
|
|
407
|
+
slategrey: "708090",
|
|
408
|
+
snow: "fffafa",
|
|
409
|
+
springgreen: "00ff7f",
|
|
410
|
+
steelblue: "4682b4",
|
|
411
|
+
tan: "d2b48c",
|
|
412
|
+
teal: "008080",
|
|
413
|
+
thistle: "d8bfd8",
|
|
414
|
+
tomato: "ff6347",
|
|
415
|
+
turquoise: "40e0d0",
|
|
416
|
+
violet: "ee82ee",
|
|
417
|
+
wheat: "f5deb3",
|
|
418
|
+
white: "fff",
|
|
419
|
+
whitesmoke: "f5f5f5",
|
|
420
|
+
yellow: "ff0",
|
|
421
|
+
yellowgreen: "9acd32"
|
|
422
|
+
};
|
|
423
|
+
function nameToHex(color) {
|
|
424
|
+
if (typeof color !== "string")
|
|
425
|
+
return color;
|
|
426
|
+
var normalizedColorName = color.toLowerCase();
|
|
427
|
+
return namedColorMap[normalizedColorName] ? "#" + namedColorMap[normalizedColorName] : color;
|
|
428
|
+
}
|
|
429
|
+
var hexRegex = /^#[a-fA-F0-9]{6}$/;
|
|
430
|
+
var hexRgbaRegex = /^#[a-fA-F0-9]{8}$/;
|
|
431
|
+
var reducedHexRegex = /^#[a-fA-F0-9]{3}$/;
|
|
432
|
+
var reducedRgbaHexRegex = /^#[a-fA-F0-9]{4}$/;
|
|
433
|
+
var rgbRegex = /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/i;
|
|
434
|
+
var rgbaRegex = /^rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*([-+]?[0-9]*[.]?[0-9]+)\s*\)$/i;
|
|
435
|
+
var hslRegex = /^hsl\(\s*(\d{0,3}[.]?[0-9]+)\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*\)$/i;
|
|
436
|
+
var hslaRegex = /^hsla\(\s*(\d{0,3}[.]?[0-9]+)\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*,\s*([-+]?[0-9]*[.]?[0-9]+)\s*\)$/i;
|
|
437
|
+
function parseToRgb(color) {
|
|
438
|
+
if (typeof color !== "string") {
|
|
439
|
+
throw new PolishedError(3);
|
|
440
|
+
}
|
|
441
|
+
var normalizedColor = nameToHex(color);
|
|
442
|
+
if (normalizedColor.match(hexRegex)) {
|
|
443
|
+
return {
|
|
444
|
+
red: parseInt("" + normalizedColor[1] + normalizedColor[2], 16),
|
|
445
|
+
green: parseInt("" + normalizedColor[3] + normalizedColor[4], 16),
|
|
446
|
+
blue: parseInt("" + normalizedColor[5] + normalizedColor[6], 16)
|
|
447
|
+
};
|
|
448
|
+
}
|
|
449
|
+
if (normalizedColor.match(hexRgbaRegex)) {
|
|
450
|
+
var alpha = parseFloat((parseInt("" + normalizedColor[7] + normalizedColor[8], 16) / 255).toFixed(2));
|
|
451
|
+
return {
|
|
452
|
+
red: parseInt("" + normalizedColor[1] + normalizedColor[2], 16),
|
|
453
|
+
green: parseInt("" + normalizedColor[3] + normalizedColor[4], 16),
|
|
454
|
+
blue: parseInt("" + normalizedColor[5] + normalizedColor[6], 16),
|
|
455
|
+
alpha
|
|
456
|
+
};
|
|
457
|
+
}
|
|
458
|
+
if (normalizedColor.match(reducedHexRegex)) {
|
|
459
|
+
return {
|
|
460
|
+
red: parseInt("" + normalizedColor[1] + normalizedColor[1], 16),
|
|
461
|
+
green: parseInt("" + normalizedColor[2] + normalizedColor[2], 16),
|
|
462
|
+
blue: parseInt("" + normalizedColor[3] + normalizedColor[3], 16)
|
|
463
|
+
};
|
|
464
|
+
}
|
|
465
|
+
if (normalizedColor.match(reducedRgbaHexRegex)) {
|
|
466
|
+
var _alpha = parseFloat((parseInt("" + normalizedColor[4] + normalizedColor[4], 16) / 255).toFixed(2));
|
|
467
|
+
return {
|
|
468
|
+
red: parseInt("" + normalizedColor[1] + normalizedColor[1], 16),
|
|
469
|
+
green: parseInt("" + normalizedColor[2] + normalizedColor[2], 16),
|
|
470
|
+
blue: parseInt("" + normalizedColor[3] + normalizedColor[3], 16),
|
|
471
|
+
alpha: _alpha
|
|
472
|
+
};
|
|
473
|
+
}
|
|
474
|
+
var rgbMatched = rgbRegex.exec(normalizedColor);
|
|
475
|
+
if (rgbMatched) {
|
|
476
|
+
return {
|
|
477
|
+
red: parseInt("" + rgbMatched[1], 10),
|
|
478
|
+
green: parseInt("" + rgbMatched[2], 10),
|
|
479
|
+
blue: parseInt("" + rgbMatched[3], 10)
|
|
480
|
+
};
|
|
481
|
+
}
|
|
482
|
+
var rgbaMatched = rgbaRegex.exec(normalizedColor.substring(0, 50));
|
|
483
|
+
if (rgbaMatched) {
|
|
484
|
+
return {
|
|
485
|
+
red: parseInt("" + rgbaMatched[1], 10),
|
|
486
|
+
green: parseInt("" + rgbaMatched[2], 10),
|
|
487
|
+
blue: parseInt("" + rgbaMatched[3], 10),
|
|
488
|
+
alpha: parseFloat("" + rgbaMatched[4])
|
|
489
|
+
};
|
|
490
|
+
}
|
|
491
|
+
var hslMatched = hslRegex.exec(normalizedColor);
|
|
492
|
+
if (hslMatched) {
|
|
493
|
+
var hue = parseInt("" + hslMatched[1], 10);
|
|
494
|
+
var saturation = parseInt("" + hslMatched[2], 10) / 100;
|
|
495
|
+
var lightness = parseInt("" + hslMatched[3], 10) / 100;
|
|
496
|
+
var rgbColorString = "rgb(" + hslToRgb(hue, saturation, lightness) + ")";
|
|
497
|
+
var hslRgbMatched = rgbRegex.exec(rgbColorString);
|
|
498
|
+
if (!hslRgbMatched) {
|
|
499
|
+
throw new PolishedError(4, normalizedColor, rgbColorString);
|
|
500
|
+
}
|
|
501
|
+
return {
|
|
502
|
+
red: parseInt("" + hslRgbMatched[1], 10),
|
|
503
|
+
green: parseInt("" + hslRgbMatched[2], 10),
|
|
504
|
+
blue: parseInt("" + hslRgbMatched[3], 10)
|
|
505
|
+
};
|
|
506
|
+
}
|
|
507
|
+
var hslaMatched = hslaRegex.exec(normalizedColor.substring(0, 50));
|
|
508
|
+
if (hslaMatched) {
|
|
509
|
+
var _hue = parseInt("" + hslaMatched[1], 10);
|
|
510
|
+
var _saturation = parseInt("" + hslaMatched[2], 10) / 100;
|
|
511
|
+
var _lightness = parseInt("" + hslaMatched[3], 10) / 100;
|
|
512
|
+
var _rgbColorString = "rgb(" + hslToRgb(_hue, _saturation, _lightness) + ")";
|
|
513
|
+
var _hslRgbMatched = rgbRegex.exec(_rgbColorString);
|
|
514
|
+
if (!_hslRgbMatched) {
|
|
515
|
+
throw new PolishedError(4, normalizedColor, _rgbColorString);
|
|
516
|
+
}
|
|
517
|
+
return {
|
|
518
|
+
red: parseInt("" + _hslRgbMatched[1], 10),
|
|
519
|
+
green: parseInt("" + _hslRgbMatched[2], 10),
|
|
520
|
+
blue: parseInt("" + _hslRgbMatched[3], 10),
|
|
521
|
+
alpha: parseFloat("" + hslaMatched[4])
|
|
522
|
+
};
|
|
523
|
+
}
|
|
524
|
+
throw new PolishedError(5);
|
|
525
|
+
}
|
|
526
|
+
var reduceHexValue = function reduceHexValue2(value) {
|
|
527
|
+
if (value.length === 7 && value[1] === value[2] && value[3] === value[4] && value[5] === value[6]) {
|
|
528
|
+
return "#" + value[1] + value[3] + value[5];
|
|
529
|
+
}
|
|
530
|
+
return value;
|
|
531
|
+
};
|
|
532
|
+
function numberToHex(value) {
|
|
533
|
+
var hex = value.toString(16);
|
|
534
|
+
return hex.length === 1 ? "0" + hex : hex;
|
|
535
|
+
}
|
|
536
|
+
function rgb(value, green, blue) {
|
|
537
|
+
if (typeof value === "number" && typeof green === "number" && typeof blue === "number") {
|
|
538
|
+
return reduceHexValue("#" + numberToHex(value) + numberToHex(green) + numberToHex(blue));
|
|
539
|
+
} else if (typeof value === "object" && green === void 0 && blue === void 0) {
|
|
540
|
+
return reduceHexValue("#" + numberToHex(value.red) + numberToHex(value.green) + numberToHex(value.blue));
|
|
541
|
+
}
|
|
542
|
+
throw new PolishedError(6);
|
|
543
|
+
}
|
|
544
|
+
function rgba(firstValue, secondValue, thirdValue, fourthValue) {
|
|
545
|
+
if (typeof firstValue === "string" && typeof secondValue === "number") {
|
|
546
|
+
var rgbValue = parseToRgb(firstValue);
|
|
547
|
+
return "rgba(" + rgbValue.red + "," + rgbValue.green + "," + rgbValue.blue + "," + secondValue + ")";
|
|
548
|
+
} else if (typeof firstValue === "number" && typeof secondValue === "number" && typeof thirdValue === "number" && typeof fourthValue === "number") {
|
|
549
|
+
return fourthValue >= 1 ? rgb(firstValue, secondValue, thirdValue) : "rgba(" + firstValue + "," + secondValue + "," + thirdValue + "," + fourthValue + ")";
|
|
550
|
+
} else if (typeof firstValue === "object" && secondValue === void 0 && thirdValue === void 0 && fourthValue === void 0) {
|
|
551
|
+
return firstValue.alpha >= 1 ? rgb(firstValue.red, firstValue.green, firstValue.blue) : "rgba(" + firstValue.red + "," + firstValue.green + "," + firstValue.blue + "," + firstValue.alpha + ")";
|
|
552
|
+
}
|
|
553
|
+
throw new PolishedError(7);
|
|
554
|
+
}
|
|
555
|
+
function curried(f, length, acc) {
|
|
556
|
+
return function fn() {
|
|
557
|
+
var combined = acc.concat(Array.prototype.slice.call(arguments));
|
|
558
|
+
return combined.length >= length ? f.apply(this, combined) : curried(f, length, combined);
|
|
559
|
+
};
|
|
560
|
+
}
|
|
561
|
+
function curry(f) {
|
|
562
|
+
return curried(f, f.length, []);
|
|
563
|
+
}
|
|
564
|
+
function guard(lowerBoundary, upperBoundary, value) {
|
|
565
|
+
return Math.max(lowerBoundary, Math.min(upperBoundary, value));
|
|
566
|
+
}
|
|
567
|
+
function transparentize(amount, color) {
|
|
568
|
+
if (color === "transparent")
|
|
569
|
+
return color;
|
|
570
|
+
var parsedColor = parseToRgb(color);
|
|
571
|
+
var alpha = typeof parsedColor.alpha === "number" ? parsedColor.alpha : 1;
|
|
572
|
+
var colorWithAlpha = _extends({}, parsedColor, {
|
|
573
|
+
alpha: guard(0, 1, +(alpha * 100 - parseFloat(amount) * 100).toFixed(2) / 100)
|
|
574
|
+
});
|
|
575
|
+
return rgba(colorWithAlpha);
|
|
576
|
+
}
|
|
577
|
+
var curriedTransparentize = /* @__PURE__ */ curry(transparentize);
|
|
578
|
+
|
|
579
|
+
// ../seeds-react-mixins/src/index.ts
|
|
580
|
+
import { css } from "styled-components";
|
|
581
|
+
import { theme } from "@sproutsocial/seeds-react-theme";
|
|
582
|
+
var visuallyHidden = css`
|
|
583
|
+
position: absolute;
|
|
584
|
+
width: 1px;
|
|
585
|
+
height: 1px;
|
|
586
|
+
padding: 0;
|
|
587
|
+
margin: -1px;
|
|
588
|
+
overflow: hidden;
|
|
589
|
+
clip: rect(0 0 0 0);
|
|
590
|
+
border: 0;
|
|
591
|
+
`;
|
|
592
|
+
var focusRing = css`
|
|
593
|
+
box-shadow: 0 0 0 1px ${theme.colors.button.primary.background.base},
|
|
594
|
+
0 0px 0px 4px
|
|
595
|
+
${curriedTransparentize(0.7, theme.colors.button.primary.background.base)};
|
|
596
|
+
outline: none;
|
|
597
|
+
|
|
598
|
+
&::-moz-focus-inner {
|
|
599
|
+
border: 0;
|
|
600
|
+
}
|
|
601
|
+
`;
|
|
602
|
+
var pill = css`
|
|
603
|
+
min-width: ${theme.space[600]};
|
|
604
|
+
min-height: ${theme.space[600]};
|
|
605
|
+
padding: ${theme.space[300]};
|
|
606
|
+
border-radius: ${theme.radii.pill};
|
|
607
|
+
`;
|
|
608
|
+
var disabled = css`
|
|
609
|
+
opacity: 0.4;
|
|
610
|
+
pointer-events: none;
|
|
611
|
+
`;
|
|
612
|
+
|
|
613
|
+
// ../seeds-react-box/dist/esm/index.js
|
|
614
|
+
import * as React from "react";
|
|
615
|
+
import styled from "styled-components";
|
|
616
|
+
import {
|
|
617
|
+
COMMON,
|
|
618
|
+
BORDER,
|
|
619
|
+
LAYOUT,
|
|
620
|
+
POSITION,
|
|
621
|
+
FLEXBOX,
|
|
622
|
+
GRID
|
|
623
|
+
} from "@sproutsocial/seeds-react-system-props";
|
|
624
|
+
import { jsx } from "react/jsx-runtime";
|
|
625
|
+
var Container = styled.div`
|
|
626
|
+
box-sizing: border-box;
|
|
627
|
+
font-family: ${({ theme: theme2 }) => theme2.fontFamily};
|
|
628
|
+
|
|
629
|
+
${COMMON}
|
|
630
|
+
${BORDER}
|
|
631
|
+
${LAYOUT}
|
|
632
|
+
${POSITION}
|
|
633
|
+
${FLEXBOX}
|
|
634
|
+
${GRID}
|
|
635
|
+
`;
|
|
636
|
+
var styles_default = Container;
|
|
637
|
+
var Box = React.forwardRef(
|
|
638
|
+
({ color, ...props }, ref) => {
|
|
639
|
+
return /* @__PURE__ */ jsx(
|
|
640
|
+
styles_default,
|
|
641
|
+
{
|
|
642
|
+
...props,
|
|
643
|
+
ref,
|
|
644
|
+
color
|
|
645
|
+
}
|
|
646
|
+
);
|
|
647
|
+
}
|
|
648
|
+
);
|
|
649
|
+
Box.displayName = "Box";
|
|
650
|
+
var Box_default = Box;
|
|
651
|
+
var src_default = Box_default;
|
|
652
|
+
|
|
653
|
+
// src/constants.ts
|
|
654
|
+
var MESSAGE_DENSITIES = {
|
|
655
|
+
COMPACT: "compact",
|
|
656
|
+
// Compact is deprecated. New applications should use condensed instead.
|
|
657
|
+
CONDENSED: "condensed",
|
|
658
|
+
SMALL: "small",
|
|
659
|
+
LARGE: "large"
|
|
660
|
+
};
|
|
661
|
+
|
|
662
|
+
// src/styles.ts
|
|
663
|
+
var Container2 = styled2(src_default)`
|
|
664
|
+
border-radius: ${(props) => props.theme.radii.outer};
|
|
665
|
+
border-width: ${(props) => props.theme.borderWidths[500]};
|
|
666
|
+
border-style: solid;
|
|
667
|
+
background-color: ${(props) => {
|
|
668
|
+
return props.theme.colors[props.bg];
|
|
669
|
+
}};
|
|
670
|
+
&:focus {
|
|
671
|
+
${focusRing} transition: box-shadow 0.15s;
|
|
672
|
+
}
|
|
673
|
+
`;
|
|
674
|
+
Container2.displayName = "Message.Container";
|
|
675
|
+
var MessageHeader = memo(styled2(src_default)`
|
|
676
|
+
padding: ${(props) => props.density === MESSAGE_DENSITIES.CONDENSED ? `0 0 0 ${props.theme.space[100]}` : props.theme.space[300]};
|
|
677
|
+
display: flex;
|
|
678
|
+
justify-content: space-between;
|
|
679
|
+
align-items: center;
|
|
680
|
+
border-bottom-width: ${(props) => props.density === MESSAGE_DENSITIES.CONDENSED ? 0 : props.theme.borderWidths[500]};
|
|
681
|
+
border-bottom-style: solid;
|
|
682
|
+
border-radius: ${(props) => props.theme.radii.outer}
|
|
683
|
+
${(props) => props.theme.radii.outer} 0 0;
|
|
684
|
+
${(props) => props.theme.typography[200]};
|
|
685
|
+
`);
|
|
686
|
+
var getContentPadding = (props) => {
|
|
687
|
+
if (!props.indentContent) {
|
|
688
|
+
return props.theme.space[400];
|
|
689
|
+
}
|
|
690
|
+
switch (props.density) {
|
|
691
|
+
case MESSAGE_DENSITIES.LARGE: {
|
|
692
|
+
return "64px";
|
|
693
|
+
}
|
|
694
|
+
case MESSAGE_DENSITIES.COMPACT: {
|
|
695
|
+
return "40px";
|
|
696
|
+
}
|
|
697
|
+
case MESSAGE_DENSITIES.CONDENSED: {
|
|
698
|
+
return "40px";
|
|
699
|
+
}
|
|
700
|
+
case MESSAGE_DENSITIES.SMALL:
|
|
701
|
+
default: {
|
|
702
|
+
return "56px";
|
|
703
|
+
}
|
|
704
|
+
}
|
|
705
|
+
};
|
|
706
|
+
var messagePadding = ({
|
|
707
|
+
density,
|
|
708
|
+
theme: theme2
|
|
709
|
+
}) => {
|
|
710
|
+
if (density === MESSAGE_DENSITIES.CONDENSED) {
|
|
711
|
+
return 0;
|
|
712
|
+
}
|
|
713
|
+
if (density === MESSAGE_DENSITIES.COMPACT) {
|
|
714
|
+
return theme2.space[300];
|
|
715
|
+
}
|
|
716
|
+
return theme2.space[400];
|
|
717
|
+
};
|
|
718
|
+
var MessageBody = styled2(src_default)`
|
|
719
|
+
padding: ${messagePadding} ${messagePadding} ${messagePadding}
|
|
720
|
+
${(props) => getContentPadding(props)};
|
|
721
|
+
font-family: ${(props) => props.theme.fontFamily};
|
|
722
|
+
${(props) => props.density === MESSAGE_DENSITIES.COMPACT || props.density === MESSAGE_DENSITIES.CONDENSED ? props.theme.typography[200] : props.theme.typography[300]};
|
|
723
|
+
`;
|
|
724
|
+
var MessageFooter = styled2(src_default)`
|
|
725
|
+
padding-bottom: ${(props) => props.density === MESSAGE_DENSITIES.CONDENSED ? 0 : props.theme.space[300]};
|
|
726
|
+
padding-left: ${(props) => getContentPadding(props)};
|
|
727
|
+
padding-right: ${(props) => props.density === MESSAGE_DENSITIES.CONDENSED ? 0 : props.theme.space[300]};
|
|
728
|
+
border-radius: 0 0 ${(props) => props.theme.radii.outer}
|
|
729
|
+
${(props) => props.theme.radii.outer};
|
|
730
|
+
display: flex;
|
|
731
|
+
justify-content: space-between;
|
|
732
|
+
align-items: center;
|
|
733
|
+
flex-wrap: ${(props) => props.density === MESSAGE_DENSITIES.CONDENSED ? "nowrap" : "wrap"};
|
|
734
|
+
`;
|
|
735
|
+
var MessageMeta = styled2(src_default)`
|
|
736
|
+
background: none;
|
|
737
|
+
border-width: 0;
|
|
738
|
+
border-style: none;
|
|
739
|
+
border-top-width: 1px;
|
|
740
|
+
border-top-style: solid;
|
|
741
|
+
display: block;
|
|
742
|
+
width: 100%;
|
|
743
|
+
text-align: start;
|
|
744
|
+
border-radius: 0 0 ${(props) => props.theme.radii.outer}
|
|
745
|
+
${(props) => props.theme.radii.outer};
|
|
746
|
+
${(props) => props.theme.typography[100]};
|
|
747
|
+
margin: ${(props) => props.theme.space[300]} 0
|
|
748
|
+
${(props) => props.theme.space[200]};
|
|
749
|
+
padding: ${(props) => props.theme.space[200]}
|
|
750
|
+
${(props) => props.theme.space[400]};
|
|
751
|
+
padding-left: ${(props) => getContentPadding(props)};
|
|
752
|
+
cursor: ${(props) => props.onClick ? "pointer" : "default"};
|
|
753
|
+
color: ${(props) => props.theme.colors.text.subtext};
|
|
754
|
+
&:focus {
|
|
755
|
+
${focusRing};
|
|
756
|
+
}
|
|
757
|
+
`;
|
|
758
|
+
var styles_default2 = Container2;
|
|
759
|
+
|
|
760
|
+
// src/Message.tsx
|
|
761
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
762
|
+
var avatarSizeMap = (density) => {
|
|
763
|
+
switch (density) {
|
|
764
|
+
case MESSAGE_DENSITIES.LARGE:
|
|
765
|
+
return "40px";
|
|
766
|
+
case MESSAGE_DENSITIES.COMPACT:
|
|
767
|
+
return "20px";
|
|
768
|
+
case MESSAGE_DENSITIES.CONDENSED:
|
|
769
|
+
return "24px";
|
|
770
|
+
case MESSAGE_DENSITIES.SMALL:
|
|
771
|
+
default:
|
|
772
|
+
return "32px";
|
|
773
|
+
}
|
|
774
|
+
};
|
|
775
|
+
var MessageContext = React2.createContext({
|
|
776
|
+
density: MESSAGE_DENSITIES.SMALL,
|
|
777
|
+
borderColor: "container.border.base",
|
|
778
|
+
bg: "container.background.base",
|
|
779
|
+
indentContent: true
|
|
780
|
+
});
|
|
781
|
+
var Message = ({
|
|
782
|
+
children,
|
|
783
|
+
density = MESSAGE_DENSITIES.SMALL,
|
|
784
|
+
borderColor = "container.border.base",
|
|
785
|
+
bg = "container.background.base",
|
|
786
|
+
indentContent = true,
|
|
787
|
+
innerRef,
|
|
788
|
+
qa,
|
|
789
|
+
...rest
|
|
790
|
+
}) => {
|
|
791
|
+
return /* @__PURE__ */ jsx2(
|
|
792
|
+
MessageContext.Provider,
|
|
793
|
+
{
|
|
794
|
+
value: {
|
|
795
|
+
density,
|
|
796
|
+
borderColor,
|
|
797
|
+
indentContent
|
|
798
|
+
},
|
|
799
|
+
children: /* @__PURE__ */ jsx2(
|
|
800
|
+
styles_default2,
|
|
801
|
+
{
|
|
802
|
+
borderColor,
|
|
803
|
+
bg,
|
|
804
|
+
ref: innerRef,
|
|
805
|
+
tabIndex: 0,
|
|
806
|
+
...qa,
|
|
807
|
+
...rest,
|
|
808
|
+
children
|
|
809
|
+
}
|
|
810
|
+
)
|
|
811
|
+
}
|
|
812
|
+
);
|
|
813
|
+
};
|
|
814
|
+
var MessageBody2 = (props) => /* @__PURE__ */ jsx2(MessageContext.Consumer, { children: ({ density, borderColor, indentContent }) => /* @__PURE__ */ jsx2(
|
|
815
|
+
MessageBody,
|
|
816
|
+
{
|
|
817
|
+
"data-qa-message-body": true,
|
|
818
|
+
density,
|
|
819
|
+
borderColor,
|
|
820
|
+
indentContent,
|
|
821
|
+
...props
|
|
822
|
+
}
|
|
823
|
+
) });
|
|
824
|
+
MessageBody2.displayName = "Message.Body";
|
|
825
|
+
Message.Body = MessageBody2;
|
|
826
|
+
var MessageHeader2 = (props) => /* @__PURE__ */ jsx2(MessageContext.Consumer, { children: ({ density, borderColor }) => /* @__PURE__ */ jsx2(
|
|
827
|
+
MessageHeader,
|
|
828
|
+
{
|
|
829
|
+
density,
|
|
830
|
+
borderColor,
|
|
831
|
+
...props
|
|
832
|
+
}
|
|
833
|
+
) });
|
|
834
|
+
MessageHeader2.displayName = "Message.Header";
|
|
835
|
+
Message.Header = MessageHeader2;
|
|
836
|
+
var MessageFooter2 = (props) => /* @__PURE__ */ jsx2(MessageContext.Consumer, { children: ({ density, borderColor, indentContent }) => /* @__PURE__ */ jsx2(
|
|
837
|
+
MessageFooter,
|
|
838
|
+
{
|
|
839
|
+
density,
|
|
840
|
+
borderColor,
|
|
841
|
+
indentContent,
|
|
842
|
+
...props
|
|
843
|
+
}
|
|
844
|
+
) });
|
|
845
|
+
MessageFooter2.displayName = "Message.Footer";
|
|
846
|
+
Message.Footer = MessageFooter2;
|
|
847
|
+
var MessageMeta2 = (props) => /* @__PURE__ */ jsx2(MessageContext.Consumer, { children: ({ density, borderColor, indentContent }) => /* @__PURE__ */ jsx2(
|
|
848
|
+
MessageMeta,
|
|
849
|
+
{
|
|
850
|
+
density,
|
|
851
|
+
borderColor,
|
|
852
|
+
indentContent,
|
|
853
|
+
...props
|
|
854
|
+
}
|
|
855
|
+
) });
|
|
856
|
+
MessageMeta2.displayName = "Message.Meta";
|
|
857
|
+
Message.Meta = MessageMeta2;
|
|
858
|
+
var MessageButton = (props) => /* @__PURE__ */ jsx2(Button, { ...props, appearance: props.appearance || "pill" });
|
|
859
|
+
MessageButton.displayName = "Message.Button";
|
|
860
|
+
Message.Button = MessageButton;
|
|
861
|
+
var MessageAvatar = (props) => /* @__PURE__ */ jsx2(MessageContext.Consumer, { children: ({ density }) => /* @__PURE__ */ jsx2(Avatar, { size: avatarSizeMap(density), ...props }) });
|
|
862
|
+
MessageAvatar.displayName = "Message.Avatar";
|
|
863
|
+
Message.Avatar = MessageAvatar;
|
|
864
|
+
var MessageCheckbox = (props) => /* @__PURE__ */ jsx2(MessageContext.Consumer, { children: ({ density }) => /* @__PURE__ */ jsx2(
|
|
865
|
+
Checkbox,
|
|
866
|
+
{
|
|
867
|
+
appearance: "pill",
|
|
868
|
+
density,
|
|
869
|
+
...props
|
|
870
|
+
}
|
|
871
|
+
) });
|
|
872
|
+
MessageCheckbox.displayName = "Message.Checkbox";
|
|
873
|
+
Message.Checkbox = MessageCheckbox;
|
|
874
|
+
Message.Context = MessageContext;
|
|
875
|
+
Message.DENSITIES = MESSAGE_DENSITIES;
|
|
876
|
+
var Message_default = Message;
|
|
877
|
+
|
|
878
|
+
// src/MessageTypes.ts
|
|
879
|
+
import "react";
|
|
880
|
+
|
|
881
|
+
// src/index.ts
|
|
882
|
+
var src_default2 = Message_default;
|
|
883
|
+
export {
|
|
884
|
+
MESSAGE_DENSITIES,
|
|
885
|
+
Message_default as Message,
|
|
886
|
+
src_default2 as default
|
|
887
|
+
};
|
|
888
|
+
//# sourceMappingURL=index.js.map
|