@sproutsocial/seeds-react-accordion 0.2.1 → 0.2.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.turbo/turbo-build.log +8 -8
- package/CHANGELOG.md +36 -0
- package/dist/esm/index.js +98 -1087
- package/dist/esm/index.js.map +1 -1
- package/dist/index.js +103 -1069
- package/dist/index.js.map +1 -1
- package/package.json +7 -6
- package/src/Accordion.stories.tsx +48 -0
- package/src/AccordionTrigger.tsx +9 -5
- package/src/styles.ts +13 -9
package/dist/index.js
CHANGED
|
@@ -5,9 +5,6 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
|
5
5
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
6
|
var __getProtoOf = Object.getPrototypeOf;
|
|
7
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
-
var __commonJS = (cb, mod) => function __require() {
|
|
9
|
-
return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
|
|
10
|
-
};
|
|
11
8
|
var __export = (target, all) => {
|
|
12
9
|
for (var name in all)
|
|
13
10
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -30,76 +27,6 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
30
27
|
));
|
|
31
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
32
29
|
|
|
33
|
-
// ../../node_modules/object-assign/index.js
|
|
34
|
-
var require_object_assign = __commonJS({
|
|
35
|
-
"../../node_modules/object-assign/index.js"(exports2, module2) {
|
|
36
|
-
"use strict";
|
|
37
|
-
var getOwnPropertySymbols = Object.getOwnPropertySymbols;
|
|
38
|
-
var hasOwnProperty = Object.prototype.hasOwnProperty;
|
|
39
|
-
var propIsEnumerable = Object.prototype.propertyIsEnumerable;
|
|
40
|
-
function toObject(val) {
|
|
41
|
-
if (val === null || val === void 0) {
|
|
42
|
-
throw new TypeError("Object.assign cannot be called with null or undefined");
|
|
43
|
-
}
|
|
44
|
-
return Object(val);
|
|
45
|
-
}
|
|
46
|
-
function shouldUseNative() {
|
|
47
|
-
try {
|
|
48
|
-
if (!Object.assign) {
|
|
49
|
-
return false;
|
|
50
|
-
}
|
|
51
|
-
var test1 = new String("abc");
|
|
52
|
-
test1[5] = "de";
|
|
53
|
-
if (Object.getOwnPropertyNames(test1)[0] === "5") {
|
|
54
|
-
return false;
|
|
55
|
-
}
|
|
56
|
-
var test2 = {};
|
|
57
|
-
for (var i = 0; i < 10; i++) {
|
|
58
|
-
test2["_" + String.fromCharCode(i)] = i;
|
|
59
|
-
}
|
|
60
|
-
var order2 = Object.getOwnPropertyNames(test2).map(function(n) {
|
|
61
|
-
return test2[n];
|
|
62
|
-
});
|
|
63
|
-
if (order2.join("") !== "0123456789") {
|
|
64
|
-
return false;
|
|
65
|
-
}
|
|
66
|
-
var test3 = {};
|
|
67
|
-
"abcdefghijklmnopqrst".split("").forEach(function(letter) {
|
|
68
|
-
test3[letter] = letter;
|
|
69
|
-
});
|
|
70
|
-
if (Object.keys(Object.assign({}, test3)).join("") !== "abcdefghijklmnopqrst") {
|
|
71
|
-
return false;
|
|
72
|
-
}
|
|
73
|
-
return true;
|
|
74
|
-
} catch (err) {
|
|
75
|
-
return false;
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
module2.exports = shouldUseNative() ? Object.assign : function(target, source) {
|
|
79
|
-
var from;
|
|
80
|
-
var to = toObject(target);
|
|
81
|
-
var symbols;
|
|
82
|
-
for (var s = 1; s < arguments.length; s++) {
|
|
83
|
-
from = Object(arguments[s]);
|
|
84
|
-
for (var key in from) {
|
|
85
|
-
if (hasOwnProperty.call(from, key)) {
|
|
86
|
-
to[key] = from[key];
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
if (getOwnPropertySymbols) {
|
|
90
|
-
symbols = getOwnPropertySymbols(from);
|
|
91
|
-
for (var i = 0; i < symbols.length; i++) {
|
|
92
|
-
if (propIsEnumerable.call(from, symbols[i])) {
|
|
93
|
-
to[symbols[i]] = from[symbols[i]];
|
|
94
|
-
}
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
}
|
|
98
|
-
return to;
|
|
99
|
-
};
|
|
100
|
-
}
|
|
101
|
-
});
|
|
102
|
-
|
|
103
30
|
// src/index.ts
|
|
104
31
|
var index_exports = {};
|
|
105
32
|
__export(index_exports, {
|
|
@@ -182,941 +109,52 @@ var Accordion = ({
|
|
|
182
109
|
var RadixAccordion3 = require("@radix-ui/react-accordion");
|
|
183
110
|
|
|
184
111
|
// src/styles.ts
|
|
185
|
-
var
|
|
112
|
+
var import_styled_components2 = __toESM(require("styled-components"));
|
|
186
113
|
var RadixAccordion2 = __toESM(require("@radix-ui/react-accordion"));
|
|
114
|
+
var import_styled_system = require("styled-system");
|
|
115
|
+
var import_seeds_react_system_props2 = require("@sproutsocial/seeds-react-system-props");
|
|
187
116
|
|
|
188
|
-
//
|
|
189
|
-
var
|
|
190
|
-
var
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
};
|
|
211
|
-
var defaults = {
|
|
212
|
-
breakpoints: [40, 52, 64].map(function(n) {
|
|
213
|
-
return n + "em";
|
|
214
|
-
})
|
|
215
|
-
};
|
|
216
|
-
var createMediaQuery = function createMediaQuery2(n) {
|
|
217
|
-
return "@media screen and (min-width: " + n + ")";
|
|
218
|
-
};
|
|
219
|
-
var getValue = function getValue2(n, scale) {
|
|
220
|
-
return get(scale, n, n);
|
|
221
|
-
};
|
|
222
|
-
var get = function get2(obj, key, def, p, undef) {
|
|
223
|
-
key = key && key.split ? key.split(".") : [key];
|
|
224
|
-
for (p = 0; p < key.length; p++) {
|
|
225
|
-
obj = obj ? obj[key[p]] : undef;
|
|
226
|
-
}
|
|
227
|
-
return obj === undef ? def : obj;
|
|
228
|
-
};
|
|
229
|
-
var createParser = function createParser2(config9) {
|
|
230
|
-
var cache = {};
|
|
231
|
-
var parse = function parse2(props) {
|
|
232
|
-
var styles = {};
|
|
233
|
-
var shouldSort = false;
|
|
234
|
-
var isCacheDisabled = props.theme && props.theme.disableStyledSystemCache;
|
|
235
|
-
for (var key in props) {
|
|
236
|
-
if (!config9[key]) continue;
|
|
237
|
-
var sx = config9[key];
|
|
238
|
-
var raw = props[key];
|
|
239
|
-
var scale = get(props.theme, sx.scale, sx.defaults);
|
|
240
|
-
if (typeof raw === "object") {
|
|
241
|
-
cache.breakpoints = !isCacheDisabled && cache.breakpoints || get(props.theme, "breakpoints", defaults.breakpoints);
|
|
242
|
-
if (Array.isArray(raw)) {
|
|
243
|
-
cache.media = !isCacheDisabled && cache.media || [null].concat(cache.breakpoints.map(createMediaQuery));
|
|
244
|
-
styles = merge(styles, parseResponsiveStyle(cache.media, sx, scale, raw, props));
|
|
245
|
-
continue;
|
|
246
|
-
}
|
|
247
|
-
if (raw !== null) {
|
|
248
|
-
styles = merge(styles, parseResponsiveObject(cache.breakpoints, sx, scale, raw, props));
|
|
249
|
-
shouldSort = true;
|
|
250
|
-
}
|
|
251
|
-
continue;
|
|
252
|
-
}
|
|
253
|
-
(0, import_object_assign.default)(styles, sx(raw, scale, props));
|
|
254
|
-
}
|
|
255
|
-
if (shouldSort) {
|
|
256
|
-
styles = sort(styles);
|
|
257
|
-
}
|
|
258
|
-
return styles;
|
|
259
|
-
};
|
|
260
|
-
parse.config = config9;
|
|
261
|
-
parse.propNames = Object.keys(config9);
|
|
262
|
-
parse.cache = cache;
|
|
263
|
-
var keys = Object.keys(config9).filter(function(k) {
|
|
264
|
-
return k !== "config";
|
|
265
|
-
});
|
|
266
|
-
if (keys.length > 1) {
|
|
267
|
-
keys.forEach(function(key) {
|
|
268
|
-
var _createParser;
|
|
269
|
-
parse[key] = createParser2((_createParser = {}, _createParser[key] = config9[key], _createParser));
|
|
270
|
-
});
|
|
271
|
-
}
|
|
272
|
-
return parse;
|
|
273
|
-
};
|
|
274
|
-
var parseResponsiveStyle = function parseResponsiveStyle2(mediaQueries, sx, scale, raw, _props) {
|
|
275
|
-
var styles = {};
|
|
276
|
-
raw.slice(0, mediaQueries.length).forEach(function(value, i) {
|
|
277
|
-
var media = mediaQueries[i];
|
|
278
|
-
var style = sx(value, scale, _props);
|
|
279
|
-
if (!media) {
|
|
280
|
-
(0, import_object_assign.default)(styles, style);
|
|
281
|
-
} else {
|
|
282
|
-
var _assign2;
|
|
283
|
-
(0, import_object_assign.default)(styles, (_assign2 = {}, _assign2[media] = (0, import_object_assign.default)({}, styles[media], style), _assign2));
|
|
284
|
-
}
|
|
285
|
-
});
|
|
286
|
-
return styles;
|
|
287
|
-
};
|
|
288
|
-
var parseResponsiveObject = function parseResponsiveObject2(breakpoints, sx, scale, raw, _props) {
|
|
289
|
-
var styles = {};
|
|
290
|
-
for (var key in raw) {
|
|
291
|
-
var breakpoint = breakpoints[key];
|
|
292
|
-
var value = raw[key];
|
|
293
|
-
var style = sx(value, scale, _props);
|
|
294
|
-
if (!breakpoint) {
|
|
295
|
-
(0, import_object_assign.default)(styles, style);
|
|
296
|
-
} else {
|
|
297
|
-
var _assign3;
|
|
298
|
-
var media = createMediaQuery(breakpoint);
|
|
299
|
-
(0, import_object_assign.default)(styles, (_assign3 = {}, _assign3[media] = (0, import_object_assign.default)({}, styles[media], style), _assign3));
|
|
300
|
-
}
|
|
301
|
-
}
|
|
302
|
-
return styles;
|
|
303
|
-
};
|
|
304
|
-
var createStyleFunction = function createStyleFunction2(_ref) {
|
|
305
|
-
var properties = _ref.properties, property = _ref.property, scale = _ref.scale, _ref$transform = _ref.transform, transform = _ref$transform === void 0 ? getValue : _ref$transform, defaultScale = _ref.defaultScale;
|
|
306
|
-
properties = properties || [property];
|
|
307
|
-
var sx = function sx2(value, scale2, _props) {
|
|
308
|
-
var result = {};
|
|
309
|
-
var n = transform(value, scale2, _props);
|
|
310
|
-
if (n === null) return;
|
|
311
|
-
properties.forEach(function(prop) {
|
|
312
|
-
result[prop] = n;
|
|
313
|
-
});
|
|
314
|
-
return result;
|
|
315
|
-
};
|
|
316
|
-
sx.scale = scale;
|
|
317
|
-
sx.defaults = defaultScale;
|
|
318
|
-
return sx;
|
|
319
|
-
};
|
|
320
|
-
var system = function system2(args) {
|
|
321
|
-
if (args === void 0) {
|
|
322
|
-
args = {};
|
|
323
|
-
}
|
|
324
|
-
var config9 = {};
|
|
325
|
-
Object.keys(args).forEach(function(key) {
|
|
326
|
-
var conf = args[key];
|
|
327
|
-
if (conf === true) {
|
|
328
|
-
config9[key] = createStyleFunction({
|
|
329
|
-
property: key,
|
|
330
|
-
scale: key
|
|
331
|
-
});
|
|
332
|
-
return;
|
|
333
|
-
}
|
|
334
|
-
if (typeof conf === "function") {
|
|
335
|
-
config9[key] = conf;
|
|
336
|
-
return;
|
|
337
|
-
}
|
|
338
|
-
config9[key] = createStyleFunction(conf);
|
|
339
|
-
});
|
|
340
|
-
var parser = createParser(config9);
|
|
341
|
-
return parser;
|
|
342
|
-
};
|
|
343
|
-
var compose = function compose2() {
|
|
344
|
-
var config9 = {};
|
|
345
|
-
for (var _len = arguments.length, parsers = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
346
|
-
parsers[_key] = arguments[_key];
|
|
347
|
-
}
|
|
348
|
-
parsers.forEach(function(parser2) {
|
|
349
|
-
if (!parser2 || !parser2.config) return;
|
|
350
|
-
(0, import_object_assign.default)(config9, parser2.config);
|
|
351
|
-
});
|
|
352
|
-
var parser = createParser(config9);
|
|
353
|
-
return parser;
|
|
354
|
-
};
|
|
355
|
-
|
|
356
|
-
// ../../node_modules/@styled-system/layout/dist/index.esm.js
|
|
357
|
-
var isNumber = function isNumber2(n) {
|
|
358
|
-
return typeof n === "number" && !isNaN(n);
|
|
359
|
-
};
|
|
360
|
-
var getWidth = function getWidth2(n, scale) {
|
|
361
|
-
return get(scale, n, !isNumber(n) || n > 1 ? n : n * 100 + "%");
|
|
362
|
-
};
|
|
363
|
-
var config = {
|
|
364
|
-
width: {
|
|
365
|
-
property: "width",
|
|
366
|
-
scale: "sizes",
|
|
367
|
-
transform: getWidth
|
|
368
|
-
},
|
|
369
|
-
height: {
|
|
370
|
-
property: "height",
|
|
371
|
-
scale: "sizes"
|
|
372
|
-
},
|
|
373
|
-
minWidth: {
|
|
374
|
-
property: "minWidth",
|
|
375
|
-
scale: "sizes"
|
|
376
|
-
},
|
|
377
|
-
minHeight: {
|
|
378
|
-
property: "minHeight",
|
|
379
|
-
scale: "sizes"
|
|
380
|
-
},
|
|
381
|
-
maxWidth: {
|
|
382
|
-
property: "maxWidth",
|
|
383
|
-
scale: "sizes"
|
|
384
|
-
},
|
|
385
|
-
maxHeight: {
|
|
386
|
-
property: "maxHeight",
|
|
387
|
-
scale: "sizes"
|
|
388
|
-
},
|
|
389
|
-
size: {
|
|
390
|
-
properties: ["width", "height"],
|
|
391
|
-
scale: "sizes"
|
|
392
|
-
},
|
|
393
|
-
overflow: true,
|
|
394
|
-
overflowX: true,
|
|
395
|
-
overflowY: true,
|
|
396
|
-
display: true,
|
|
397
|
-
verticalAlign: true
|
|
398
|
-
};
|
|
399
|
-
var layout = system(config);
|
|
400
|
-
var index_esm_default = layout;
|
|
401
|
-
|
|
402
|
-
// ../../node_modules/@styled-system/color/dist/index.esm.js
|
|
403
|
-
var config2 = {
|
|
404
|
-
color: {
|
|
405
|
-
property: "color",
|
|
406
|
-
scale: "colors"
|
|
407
|
-
},
|
|
408
|
-
backgroundColor: {
|
|
409
|
-
property: "backgroundColor",
|
|
410
|
-
scale: "colors"
|
|
411
|
-
},
|
|
412
|
-
opacity: true
|
|
413
|
-
};
|
|
414
|
-
config2.bg = config2.backgroundColor;
|
|
415
|
-
var color = system(config2);
|
|
416
|
-
var index_esm_default2 = color;
|
|
417
|
-
|
|
418
|
-
// ../../node_modules/@styled-system/typography/dist/index.esm.js
|
|
419
|
-
var defaults2 = {
|
|
420
|
-
fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72]
|
|
421
|
-
};
|
|
422
|
-
var config3 = {
|
|
423
|
-
fontFamily: {
|
|
424
|
-
property: "fontFamily",
|
|
425
|
-
scale: "fonts"
|
|
426
|
-
},
|
|
427
|
-
fontSize: {
|
|
428
|
-
property: "fontSize",
|
|
429
|
-
scale: "fontSizes",
|
|
430
|
-
defaultScale: defaults2.fontSizes
|
|
431
|
-
},
|
|
432
|
-
fontWeight: {
|
|
433
|
-
property: "fontWeight",
|
|
434
|
-
scale: "fontWeights"
|
|
435
|
-
},
|
|
436
|
-
lineHeight: {
|
|
437
|
-
property: "lineHeight",
|
|
438
|
-
scale: "lineHeights"
|
|
439
|
-
},
|
|
440
|
-
letterSpacing: {
|
|
441
|
-
property: "letterSpacing",
|
|
442
|
-
scale: "letterSpacings"
|
|
443
|
-
},
|
|
444
|
-
textAlign: true,
|
|
445
|
-
fontStyle: true
|
|
446
|
-
};
|
|
447
|
-
var typography = system(config3);
|
|
448
|
-
var index_esm_default3 = typography;
|
|
449
|
-
|
|
450
|
-
// ../../node_modules/@styled-system/flexbox/dist/index.esm.js
|
|
451
|
-
var config4 = {
|
|
452
|
-
alignItems: true,
|
|
453
|
-
alignContent: true,
|
|
454
|
-
justifyItems: true,
|
|
455
|
-
justifyContent: true,
|
|
456
|
-
flexWrap: true,
|
|
457
|
-
flexDirection: true,
|
|
458
|
-
// item
|
|
459
|
-
flex: true,
|
|
460
|
-
flexGrow: true,
|
|
461
|
-
flexShrink: true,
|
|
462
|
-
flexBasis: true,
|
|
463
|
-
justifySelf: true,
|
|
464
|
-
alignSelf: true,
|
|
465
|
-
order: true
|
|
466
|
-
};
|
|
467
|
-
var flexbox = system(config4);
|
|
468
|
-
var index_esm_default4 = flexbox;
|
|
469
|
-
|
|
470
|
-
// ../../node_modules/@styled-system/grid/dist/index.esm.js
|
|
471
|
-
var defaults3 = {
|
|
472
|
-
space: [0, 4, 8, 16, 32, 64, 128, 256, 512]
|
|
473
|
-
};
|
|
474
|
-
var config5 = {
|
|
475
|
-
gridGap: {
|
|
476
|
-
property: "gridGap",
|
|
477
|
-
scale: "space",
|
|
478
|
-
defaultScale: defaults3.space
|
|
479
|
-
},
|
|
480
|
-
gridColumnGap: {
|
|
481
|
-
property: "gridColumnGap",
|
|
482
|
-
scale: "space",
|
|
483
|
-
defaultScale: defaults3.space
|
|
484
|
-
},
|
|
485
|
-
gridRowGap: {
|
|
486
|
-
property: "gridRowGap",
|
|
487
|
-
scale: "space",
|
|
488
|
-
defaultScale: defaults3.space
|
|
489
|
-
},
|
|
490
|
-
gridColumn: true,
|
|
491
|
-
gridRow: true,
|
|
492
|
-
gridAutoFlow: true,
|
|
493
|
-
gridAutoColumns: true,
|
|
494
|
-
gridAutoRows: true,
|
|
495
|
-
gridTemplateColumns: true,
|
|
496
|
-
gridTemplateRows: true,
|
|
497
|
-
gridTemplateAreas: true,
|
|
498
|
-
gridArea: true
|
|
499
|
-
};
|
|
500
|
-
var grid = system(config5);
|
|
501
|
-
var index_esm_default5 = grid;
|
|
502
|
-
|
|
503
|
-
// ../../node_modules/@styled-system/border/dist/index.esm.js
|
|
504
|
-
var config6 = {
|
|
505
|
-
border: {
|
|
506
|
-
property: "border",
|
|
507
|
-
scale: "borders"
|
|
508
|
-
},
|
|
509
|
-
borderWidth: {
|
|
510
|
-
property: "borderWidth",
|
|
511
|
-
scale: "borderWidths"
|
|
512
|
-
},
|
|
513
|
-
borderStyle: {
|
|
514
|
-
property: "borderStyle",
|
|
515
|
-
scale: "borderStyles"
|
|
516
|
-
},
|
|
517
|
-
borderColor: {
|
|
518
|
-
property: "borderColor",
|
|
519
|
-
scale: "colors"
|
|
520
|
-
},
|
|
521
|
-
borderRadius: {
|
|
522
|
-
property: "borderRadius",
|
|
523
|
-
scale: "radii"
|
|
524
|
-
},
|
|
525
|
-
borderTop: {
|
|
526
|
-
property: "borderTop",
|
|
527
|
-
scale: "borders"
|
|
528
|
-
},
|
|
529
|
-
borderTopLeftRadius: {
|
|
530
|
-
property: "borderTopLeftRadius",
|
|
531
|
-
scale: "radii"
|
|
532
|
-
},
|
|
533
|
-
borderTopRightRadius: {
|
|
534
|
-
property: "borderTopRightRadius",
|
|
535
|
-
scale: "radii"
|
|
536
|
-
},
|
|
537
|
-
borderRight: {
|
|
538
|
-
property: "borderRight",
|
|
539
|
-
scale: "borders"
|
|
540
|
-
},
|
|
541
|
-
borderBottom: {
|
|
542
|
-
property: "borderBottom",
|
|
543
|
-
scale: "borders"
|
|
544
|
-
},
|
|
545
|
-
borderBottomLeftRadius: {
|
|
546
|
-
property: "borderBottomLeftRadius",
|
|
547
|
-
scale: "radii"
|
|
548
|
-
},
|
|
549
|
-
borderBottomRightRadius: {
|
|
550
|
-
property: "borderBottomRightRadius",
|
|
551
|
-
scale: "radii"
|
|
552
|
-
},
|
|
553
|
-
borderLeft: {
|
|
554
|
-
property: "borderLeft",
|
|
555
|
-
scale: "borders"
|
|
556
|
-
},
|
|
557
|
-
borderX: {
|
|
558
|
-
properties: ["borderLeft", "borderRight"],
|
|
559
|
-
scale: "borders"
|
|
560
|
-
},
|
|
561
|
-
borderY: {
|
|
562
|
-
properties: ["borderTop", "borderBottom"],
|
|
563
|
-
scale: "borders"
|
|
564
|
-
}
|
|
565
|
-
};
|
|
566
|
-
config6.borderTopWidth = {
|
|
567
|
-
property: "borderTopWidth",
|
|
568
|
-
scale: "borderWidths"
|
|
569
|
-
};
|
|
570
|
-
config6.borderTopColor = {
|
|
571
|
-
property: "borderTopColor",
|
|
572
|
-
scale: "colors"
|
|
573
|
-
};
|
|
574
|
-
config6.borderTopStyle = {
|
|
575
|
-
property: "borderTopStyle",
|
|
576
|
-
scale: "borderStyles"
|
|
577
|
-
};
|
|
578
|
-
config6.borderTopLeftRadius = {
|
|
579
|
-
property: "borderTopLeftRadius",
|
|
580
|
-
scale: "radii"
|
|
581
|
-
};
|
|
582
|
-
config6.borderTopRightRadius = {
|
|
583
|
-
property: "borderTopRightRadius",
|
|
584
|
-
scale: "radii"
|
|
585
|
-
};
|
|
586
|
-
config6.borderBottomWidth = {
|
|
587
|
-
property: "borderBottomWidth",
|
|
588
|
-
scale: "borderWidths"
|
|
589
|
-
};
|
|
590
|
-
config6.borderBottomColor = {
|
|
591
|
-
property: "borderBottomColor",
|
|
592
|
-
scale: "colors"
|
|
593
|
-
};
|
|
594
|
-
config6.borderBottomStyle = {
|
|
595
|
-
property: "borderBottomStyle",
|
|
596
|
-
scale: "borderStyles"
|
|
597
|
-
};
|
|
598
|
-
config6.borderBottomLeftRadius = {
|
|
599
|
-
property: "borderBottomLeftRadius",
|
|
600
|
-
scale: "radii"
|
|
601
|
-
};
|
|
602
|
-
config6.borderBottomRightRadius = {
|
|
603
|
-
property: "borderBottomRightRadius",
|
|
604
|
-
scale: "radii"
|
|
605
|
-
};
|
|
606
|
-
config6.borderLeftWidth = {
|
|
607
|
-
property: "borderLeftWidth",
|
|
608
|
-
scale: "borderWidths"
|
|
609
|
-
};
|
|
610
|
-
config6.borderLeftColor = {
|
|
611
|
-
property: "borderLeftColor",
|
|
612
|
-
scale: "colors"
|
|
613
|
-
};
|
|
614
|
-
config6.borderLeftStyle = {
|
|
615
|
-
property: "borderLeftStyle",
|
|
616
|
-
scale: "borderStyles"
|
|
617
|
-
};
|
|
618
|
-
config6.borderRightWidth = {
|
|
619
|
-
property: "borderRightWidth",
|
|
620
|
-
scale: "borderWidths"
|
|
621
|
-
};
|
|
622
|
-
config6.borderRightColor = {
|
|
623
|
-
property: "borderRightColor",
|
|
624
|
-
scale: "colors"
|
|
625
|
-
};
|
|
626
|
-
config6.borderRightStyle = {
|
|
627
|
-
property: "borderRightStyle",
|
|
628
|
-
scale: "borderStyles"
|
|
629
|
-
};
|
|
630
|
-
var border = system(config6);
|
|
631
|
-
var index_esm_default6 = border;
|
|
632
|
-
|
|
633
|
-
// ../../node_modules/@styled-system/background/dist/index.esm.js
|
|
634
|
-
var config7 = {
|
|
635
|
-
background: true,
|
|
636
|
-
backgroundImage: true,
|
|
637
|
-
backgroundSize: true,
|
|
638
|
-
backgroundPosition: true,
|
|
639
|
-
backgroundRepeat: true
|
|
640
|
-
};
|
|
641
|
-
config7.bgImage = config7.backgroundImage;
|
|
642
|
-
config7.bgSize = config7.backgroundSize;
|
|
643
|
-
config7.bgPosition = config7.backgroundPosition;
|
|
644
|
-
config7.bgRepeat = config7.backgroundRepeat;
|
|
645
|
-
var background = system(config7);
|
|
646
|
-
var index_esm_default7 = background;
|
|
647
|
-
|
|
648
|
-
// ../../node_modules/@styled-system/position/dist/index.esm.js
|
|
649
|
-
var defaults4 = {
|
|
650
|
-
space: [0, 4, 8, 16, 32, 64, 128, 256, 512]
|
|
651
|
-
};
|
|
652
|
-
var config8 = {
|
|
653
|
-
position: true,
|
|
654
|
-
zIndex: {
|
|
655
|
-
property: "zIndex",
|
|
656
|
-
scale: "zIndices"
|
|
657
|
-
},
|
|
658
|
-
top: {
|
|
659
|
-
property: "top",
|
|
660
|
-
scale: "space",
|
|
661
|
-
defaultScale: defaults4.space
|
|
662
|
-
},
|
|
663
|
-
right: {
|
|
664
|
-
property: "right",
|
|
665
|
-
scale: "space",
|
|
666
|
-
defaultScale: defaults4.space
|
|
667
|
-
},
|
|
668
|
-
bottom: {
|
|
669
|
-
property: "bottom",
|
|
670
|
-
scale: "space",
|
|
671
|
-
defaultScale: defaults4.space
|
|
672
|
-
},
|
|
673
|
-
left: {
|
|
674
|
-
property: "left",
|
|
675
|
-
scale: "space",
|
|
676
|
-
defaultScale: defaults4.space
|
|
677
|
-
}
|
|
678
|
-
};
|
|
679
|
-
var position = system(config8);
|
|
680
|
-
var index_esm_default8 = position;
|
|
681
|
-
|
|
682
|
-
// ../../node_modules/@styled-system/space/dist/index.esm.js
|
|
683
|
-
var defaults5 = {
|
|
684
|
-
space: [0, 4, 8, 16, 32, 64, 128, 256, 512]
|
|
685
|
-
};
|
|
686
|
-
var isNumber3 = function isNumber4(n) {
|
|
687
|
-
return typeof n === "number" && !isNaN(n);
|
|
688
|
-
};
|
|
689
|
-
var getMargin = function getMargin2(n, scale) {
|
|
690
|
-
if (!isNumber3(n)) {
|
|
691
|
-
return get(scale, n, n);
|
|
692
|
-
}
|
|
693
|
-
var isNegative = n < 0;
|
|
694
|
-
var absolute = Math.abs(n);
|
|
695
|
-
var value = get(scale, absolute, absolute);
|
|
696
|
-
if (!isNumber3(value)) {
|
|
697
|
-
return isNegative ? "-" + value : value;
|
|
698
|
-
}
|
|
699
|
-
return value * (isNegative ? -1 : 1);
|
|
700
|
-
};
|
|
701
|
-
var configs = {};
|
|
702
|
-
configs.margin = {
|
|
703
|
-
margin: {
|
|
704
|
-
property: "margin",
|
|
705
|
-
scale: "space",
|
|
706
|
-
transform: getMargin,
|
|
707
|
-
defaultScale: defaults5.space
|
|
708
|
-
},
|
|
709
|
-
marginTop: {
|
|
710
|
-
property: "marginTop",
|
|
711
|
-
scale: "space",
|
|
712
|
-
transform: getMargin,
|
|
713
|
-
defaultScale: defaults5.space
|
|
714
|
-
},
|
|
715
|
-
marginRight: {
|
|
716
|
-
property: "marginRight",
|
|
717
|
-
scale: "space",
|
|
718
|
-
transform: getMargin,
|
|
719
|
-
defaultScale: defaults5.space
|
|
720
|
-
},
|
|
721
|
-
marginBottom: {
|
|
722
|
-
property: "marginBottom",
|
|
723
|
-
scale: "space",
|
|
724
|
-
transform: getMargin,
|
|
725
|
-
defaultScale: defaults5.space
|
|
726
|
-
},
|
|
727
|
-
marginLeft: {
|
|
728
|
-
property: "marginLeft",
|
|
729
|
-
scale: "space",
|
|
730
|
-
transform: getMargin,
|
|
731
|
-
defaultScale: defaults5.space
|
|
732
|
-
},
|
|
733
|
-
marginX: {
|
|
734
|
-
properties: ["marginLeft", "marginRight"],
|
|
735
|
-
scale: "space",
|
|
736
|
-
transform: getMargin,
|
|
737
|
-
defaultScale: defaults5.space
|
|
738
|
-
},
|
|
739
|
-
marginY: {
|
|
740
|
-
properties: ["marginTop", "marginBottom"],
|
|
741
|
-
scale: "space",
|
|
742
|
-
transform: getMargin,
|
|
743
|
-
defaultScale: defaults5.space
|
|
744
|
-
}
|
|
745
|
-
};
|
|
746
|
-
configs.margin.m = configs.margin.margin;
|
|
747
|
-
configs.margin.mt = configs.margin.marginTop;
|
|
748
|
-
configs.margin.mr = configs.margin.marginRight;
|
|
749
|
-
configs.margin.mb = configs.margin.marginBottom;
|
|
750
|
-
configs.margin.ml = configs.margin.marginLeft;
|
|
751
|
-
configs.margin.mx = configs.margin.marginX;
|
|
752
|
-
configs.margin.my = configs.margin.marginY;
|
|
753
|
-
configs.padding = {
|
|
754
|
-
padding: {
|
|
755
|
-
property: "padding",
|
|
756
|
-
scale: "space",
|
|
757
|
-
defaultScale: defaults5.space
|
|
758
|
-
},
|
|
759
|
-
paddingTop: {
|
|
760
|
-
property: "paddingTop",
|
|
761
|
-
scale: "space",
|
|
762
|
-
defaultScale: defaults5.space
|
|
763
|
-
},
|
|
764
|
-
paddingRight: {
|
|
765
|
-
property: "paddingRight",
|
|
766
|
-
scale: "space",
|
|
767
|
-
defaultScale: defaults5.space
|
|
768
|
-
},
|
|
769
|
-
paddingBottom: {
|
|
770
|
-
property: "paddingBottom",
|
|
771
|
-
scale: "space",
|
|
772
|
-
defaultScale: defaults5.space
|
|
773
|
-
},
|
|
774
|
-
paddingLeft: {
|
|
775
|
-
property: "paddingLeft",
|
|
776
|
-
scale: "space",
|
|
777
|
-
defaultScale: defaults5.space
|
|
778
|
-
},
|
|
779
|
-
paddingX: {
|
|
780
|
-
properties: ["paddingLeft", "paddingRight"],
|
|
781
|
-
scale: "space",
|
|
782
|
-
defaultScale: defaults5.space
|
|
783
|
-
},
|
|
784
|
-
paddingY: {
|
|
785
|
-
properties: ["paddingTop", "paddingBottom"],
|
|
786
|
-
scale: "space",
|
|
787
|
-
defaultScale: defaults5.space
|
|
788
|
-
}
|
|
789
|
-
};
|
|
790
|
-
configs.padding.p = configs.padding.padding;
|
|
791
|
-
configs.padding.pt = configs.padding.paddingTop;
|
|
792
|
-
configs.padding.pr = configs.padding.paddingRight;
|
|
793
|
-
configs.padding.pb = configs.padding.paddingBottom;
|
|
794
|
-
configs.padding.pl = configs.padding.paddingLeft;
|
|
795
|
-
configs.padding.px = configs.padding.paddingX;
|
|
796
|
-
configs.padding.py = configs.padding.paddingY;
|
|
797
|
-
var margin = system(configs.margin);
|
|
798
|
-
var padding = system(configs.padding);
|
|
799
|
-
var space = compose(margin, padding);
|
|
800
|
-
|
|
801
|
-
// ../../node_modules/@styled-system/shadow/dist/index.esm.js
|
|
802
|
-
var shadow = system({
|
|
803
|
-
boxShadow: {
|
|
804
|
-
property: "boxShadow",
|
|
805
|
-
scale: "shadows"
|
|
806
|
-
},
|
|
807
|
-
textShadow: {
|
|
808
|
-
property: "textShadow",
|
|
809
|
-
scale: "shadows"
|
|
810
|
-
}
|
|
811
|
-
});
|
|
812
|
-
|
|
813
|
-
// ../../node_modules/@styled-system/css/dist/index.esm.js
|
|
814
|
-
function _extends() {
|
|
815
|
-
_extends = Object.assign || function(target) {
|
|
816
|
-
for (var i = 1; i < arguments.length; i++) {
|
|
817
|
-
var source = arguments[i];
|
|
818
|
-
for (var key in source) {
|
|
819
|
-
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
820
|
-
target[key] = source[key];
|
|
821
|
-
}
|
|
822
|
-
}
|
|
823
|
-
}
|
|
824
|
-
return target;
|
|
825
|
-
};
|
|
826
|
-
return _extends.apply(this, arguments);
|
|
827
|
-
}
|
|
828
|
-
var get3 = function get4(obj, key, def, p, undef) {
|
|
829
|
-
key = key && key.split ? key.split(".") : [key];
|
|
830
|
-
for (p = 0; p < key.length; p++) {
|
|
831
|
-
obj = obj ? obj[key[p]] : undef;
|
|
832
|
-
}
|
|
833
|
-
return obj === undef ? def : obj;
|
|
834
|
-
};
|
|
835
|
-
var defaultBreakpoints = [40, 52, 64].map(function(n) {
|
|
836
|
-
return n + "em";
|
|
837
|
-
});
|
|
838
|
-
var defaultTheme = {
|
|
839
|
-
space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
|
|
840
|
-
fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72]
|
|
841
|
-
};
|
|
842
|
-
var aliases = {
|
|
843
|
-
bg: "backgroundColor",
|
|
844
|
-
m: "margin",
|
|
845
|
-
mt: "marginTop",
|
|
846
|
-
mr: "marginRight",
|
|
847
|
-
mb: "marginBottom",
|
|
848
|
-
ml: "marginLeft",
|
|
849
|
-
mx: "marginX",
|
|
850
|
-
my: "marginY",
|
|
851
|
-
p: "padding",
|
|
852
|
-
pt: "paddingTop",
|
|
853
|
-
pr: "paddingRight",
|
|
854
|
-
pb: "paddingBottom",
|
|
855
|
-
pl: "paddingLeft",
|
|
856
|
-
px: "paddingX",
|
|
857
|
-
py: "paddingY"
|
|
858
|
-
};
|
|
859
|
-
var multiples = {
|
|
860
|
-
marginX: ["marginLeft", "marginRight"],
|
|
861
|
-
marginY: ["marginTop", "marginBottom"],
|
|
862
|
-
paddingX: ["paddingLeft", "paddingRight"],
|
|
863
|
-
paddingY: ["paddingTop", "paddingBottom"],
|
|
864
|
-
size: ["width", "height"]
|
|
865
|
-
};
|
|
866
|
-
var scales = {
|
|
867
|
-
color: "colors",
|
|
868
|
-
backgroundColor: "colors",
|
|
869
|
-
borderColor: "colors",
|
|
870
|
-
margin: "space",
|
|
871
|
-
marginTop: "space",
|
|
872
|
-
marginRight: "space",
|
|
873
|
-
marginBottom: "space",
|
|
874
|
-
marginLeft: "space",
|
|
875
|
-
marginX: "space",
|
|
876
|
-
marginY: "space",
|
|
877
|
-
padding: "space",
|
|
878
|
-
paddingTop: "space",
|
|
879
|
-
paddingRight: "space",
|
|
880
|
-
paddingBottom: "space",
|
|
881
|
-
paddingLeft: "space",
|
|
882
|
-
paddingX: "space",
|
|
883
|
-
paddingY: "space",
|
|
884
|
-
top: "space",
|
|
885
|
-
right: "space",
|
|
886
|
-
bottom: "space",
|
|
887
|
-
left: "space",
|
|
888
|
-
gridGap: "space",
|
|
889
|
-
gridColumnGap: "space",
|
|
890
|
-
gridRowGap: "space",
|
|
891
|
-
gap: "space",
|
|
892
|
-
columnGap: "space",
|
|
893
|
-
rowGap: "space",
|
|
894
|
-
fontFamily: "fonts",
|
|
895
|
-
fontSize: "fontSizes",
|
|
896
|
-
fontWeight: "fontWeights",
|
|
897
|
-
lineHeight: "lineHeights",
|
|
898
|
-
letterSpacing: "letterSpacings",
|
|
899
|
-
border: "borders",
|
|
900
|
-
borderTop: "borders",
|
|
901
|
-
borderRight: "borders",
|
|
902
|
-
borderBottom: "borders",
|
|
903
|
-
borderLeft: "borders",
|
|
904
|
-
borderWidth: "borderWidths",
|
|
905
|
-
borderStyle: "borderStyles",
|
|
906
|
-
borderRadius: "radii",
|
|
907
|
-
borderTopRightRadius: "radii",
|
|
908
|
-
borderTopLeftRadius: "radii",
|
|
909
|
-
borderBottomRightRadius: "radii",
|
|
910
|
-
borderBottomLeftRadius: "radii",
|
|
911
|
-
borderTopWidth: "borderWidths",
|
|
912
|
-
borderTopColor: "colors",
|
|
913
|
-
borderTopStyle: "borderStyles",
|
|
914
|
-
borderBottomWidth: "borderWidths",
|
|
915
|
-
borderBottomColor: "colors",
|
|
916
|
-
borderBottomStyle: "borderStyles",
|
|
917
|
-
borderLeftWidth: "borderWidths",
|
|
918
|
-
borderLeftColor: "colors",
|
|
919
|
-
borderLeftStyle: "borderStyles",
|
|
920
|
-
borderRightWidth: "borderWidths",
|
|
921
|
-
borderRightColor: "colors",
|
|
922
|
-
borderRightStyle: "borderStyles",
|
|
923
|
-
outlineColor: "colors",
|
|
924
|
-
boxShadow: "shadows",
|
|
925
|
-
textShadow: "shadows",
|
|
926
|
-
zIndex: "zIndices",
|
|
927
|
-
width: "sizes",
|
|
928
|
-
minWidth: "sizes",
|
|
929
|
-
maxWidth: "sizes",
|
|
930
|
-
height: "sizes",
|
|
931
|
-
minHeight: "sizes",
|
|
932
|
-
maxHeight: "sizes",
|
|
933
|
-
flexBasis: "sizes",
|
|
934
|
-
size: "sizes",
|
|
935
|
-
// svg
|
|
936
|
-
fill: "colors",
|
|
937
|
-
stroke: "colors"
|
|
938
|
-
};
|
|
939
|
-
var positiveOrNegative = function positiveOrNegative2(scale, value) {
|
|
940
|
-
if (typeof value !== "number" || value >= 0) {
|
|
941
|
-
return get3(scale, value, value);
|
|
942
|
-
}
|
|
943
|
-
var absolute = Math.abs(value);
|
|
944
|
-
var n = get3(scale, absolute, absolute);
|
|
945
|
-
if (typeof n === "string") return "-" + n;
|
|
946
|
-
return n * -1;
|
|
947
|
-
};
|
|
948
|
-
var transforms = ["margin", "marginTop", "marginRight", "marginBottom", "marginLeft", "marginX", "marginY", "top", "bottom", "left", "right"].reduce(function(acc, curr) {
|
|
949
|
-
var _extends2;
|
|
950
|
-
return _extends({}, acc, (_extends2 = {}, _extends2[curr] = positiveOrNegative, _extends2));
|
|
951
|
-
}, {});
|
|
952
|
-
var responsive = function responsive2(styles) {
|
|
953
|
-
return function(theme) {
|
|
954
|
-
var next = {};
|
|
955
|
-
var breakpoints = get3(theme, "breakpoints", defaultBreakpoints);
|
|
956
|
-
var mediaQueries = [null].concat(breakpoints.map(function(n) {
|
|
957
|
-
return "@media screen and (min-width: " + n + ")";
|
|
958
|
-
}));
|
|
959
|
-
for (var key in styles) {
|
|
960
|
-
var value = typeof styles[key] === "function" ? styles[key](theme) : styles[key];
|
|
961
|
-
if (value == null) continue;
|
|
962
|
-
if (!Array.isArray(value)) {
|
|
963
|
-
next[key] = value;
|
|
964
|
-
continue;
|
|
965
|
-
}
|
|
966
|
-
for (var i = 0; i < value.slice(0, mediaQueries.length).length; i++) {
|
|
967
|
-
var media = mediaQueries[i];
|
|
968
|
-
if (!media) {
|
|
969
|
-
next[key] = value[i];
|
|
970
|
-
continue;
|
|
971
|
-
}
|
|
972
|
-
next[media] = next[media] || {};
|
|
973
|
-
if (value[i] == null) continue;
|
|
974
|
-
next[media][key] = value[i];
|
|
975
|
-
}
|
|
976
|
-
}
|
|
977
|
-
return next;
|
|
978
|
-
};
|
|
979
|
-
};
|
|
980
|
-
var css = function css2(args) {
|
|
981
|
-
return function(props) {
|
|
982
|
-
if (props === void 0) {
|
|
983
|
-
props = {};
|
|
984
|
-
}
|
|
985
|
-
var theme = _extends({}, defaultTheme, {}, props.theme || props);
|
|
986
|
-
var result = {};
|
|
987
|
-
var obj = typeof args === "function" ? args(theme) : args;
|
|
988
|
-
var styles = responsive(obj)(theme);
|
|
989
|
-
for (var key in styles) {
|
|
990
|
-
var x = styles[key];
|
|
991
|
-
var val = typeof x === "function" ? x(theme) : x;
|
|
992
|
-
if (key === "variant") {
|
|
993
|
-
var variant3 = css2(get3(theme, val))(theme);
|
|
994
|
-
result = _extends({}, result, {}, variant3);
|
|
995
|
-
continue;
|
|
996
|
-
}
|
|
997
|
-
if (val && typeof val === "object") {
|
|
998
|
-
result[key] = css2(val)(theme);
|
|
999
|
-
continue;
|
|
1000
|
-
}
|
|
1001
|
-
var prop = get3(aliases, key, key);
|
|
1002
|
-
var scaleName = get3(scales, prop);
|
|
1003
|
-
var scale = get3(theme, scaleName, get3(theme, prop, {}));
|
|
1004
|
-
var transform = get3(transforms, prop, get3);
|
|
1005
|
-
var value = transform(scale, val, val);
|
|
1006
|
-
if (multiples[prop]) {
|
|
1007
|
-
var dirs = multiples[prop];
|
|
1008
|
-
for (var i = 0; i < dirs.length; i++) {
|
|
1009
|
-
result[dirs[i]] = value;
|
|
1010
|
-
}
|
|
1011
|
-
} else {
|
|
1012
|
-
result[prop] = value;
|
|
1013
|
-
}
|
|
1014
|
-
}
|
|
1015
|
-
return result;
|
|
1016
|
-
};
|
|
1017
|
-
};
|
|
1018
|
-
var index_esm_default9 = css;
|
|
117
|
+
// ../seeds-react-mixins/dist/esm/index.js
|
|
118
|
+
var import_styled_components = require("styled-components");
|
|
119
|
+
var import_seeds_react_theme = require("@sproutsocial/seeds-react-theme");
|
|
120
|
+
var visuallyHidden = import_styled_components.css`
|
|
121
|
+
position: absolute;
|
|
122
|
+
width: 1px;
|
|
123
|
+
height: 1px;
|
|
124
|
+
padding: 0;
|
|
125
|
+
margin: -1px;
|
|
126
|
+
overflow: hidden;
|
|
127
|
+
clip: rect(0 0 0 0);
|
|
128
|
+
border: 0;
|
|
129
|
+
`;
|
|
130
|
+
var focusRing = import_styled_components.css`
|
|
131
|
+
box-shadow: 0 0 0 1px ${import_seeds_react_theme.theme.colors.button.primary.background.base},
|
|
132
|
+
0 0px 0px 4px
|
|
133
|
+
color-mix(
|
|
134
|
+
in srgb,
|
|
135
|
+
${import_seeds_react_theme.theme.colors.button.primary.background.base},
|
|
136
|
+
transparent 70%
|
|
137
|
+
);
|
|
138
|
+
outline: none;
|
|
1019
139
|
|
|
1020
|
-
|
|
1021
|
-
|
|
1022
|
-
var _config;
|
|
1023
|
-
var scale = _ref.scale, _ref$prop = _ref.prop, prop = _ref$prop === void 0 ? "variant" : _ref$prop, _ref$variants = _ref.variants, variants = _ref$variants === void 0 ? {} : _ref$variants, key = _ref.key;
|
|
1024
|
-
var sx;
|
|
1025
|
-
if (Object.keys(variants).length) {
|
|
1026
|
-
sx = function sx2(value, scale2, props) {
|
|
1027
|
-
return index_esm_default9(get(scale2, value, null))(props.theme);
|
|
1028
|
-
};
|
|
1029
|
-
} else {
|
|
1030
|
-
sx = function sx2(value, scale2) {
|
|
1031
|
-
return get(scale2, value, null);
|
|
1032
|
-
};
|
|
140
|
+
&::-moz-focus-inner {
|
|
141
|
+
border: 0;
|
|
1033
142
|
}
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
};
|
|
1040
|
-
|
|
1041
|
-
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
prop: "textStyle"
|
|
1046
|
-
});
|
|
1047
|
-
var colorStyle = variant({
|
|
1048
|
-
key: "colorStyles",
|
|
1049
|
-
prop: "colors"
|
|
1050
|
-
});
|
|
1051
|
-
|
|
1052
|
-
// ../../node_modules/styled-system/dist/index.esm.js
|
|
1053
|
-
var width = index_esm_default.width;
|
|
1054
|
-
var height = index_esm_default.height;
|
|
1055
|
-
var minWidth = index_esm_default.minWidth;
|
|
1056
|
-
var minHeight = index_esm_default.minHeight;
|
|
1057
|
-
var maxWidth = index_esm_default.maxWidth;
|
|
1058
|
-
var maxHeight = index_esm_default.maxHeight;
|
|
1059
|
-
var size = index_esm_default.size;
|
|
1060
|
-
var verticalAlign = index_esm_default.verticalAlign;
|
|
1061
|
-
var display = index_esm_default.display;
|
|
1062
|
-
var overflow = index_esm_default.overflow;
|
|
1063
|
-
var overflowX = index_esm_default.overflowX;
|
|
1064
|
-
var overflowY = index_esm_default.overflowY;
|
|
1065
|
-
var opacity = index_esm_default2.opacity;
|
|
1066
|
-
var fontSize = index_esm_default3.fontSize;
|
|
1067
|
-
var fontFamily = index_esm_default3.fontFamily;
|
|
1068
|
-
var fontWeight = index_esm_default3.fontWeight;
|
|
1069
|
-
var lineHeight = index_esm_default3.lineHeight;
|
|
1070
|
-
var textAlign = index_esm_default3.textAlign;
|
|
1071
|
-
var fontStyle = index_esm_default3.fontStyle;
|
|
1072
|
-
var letterSpacing = index_esm_default3.letterSpacing;
|
|
1073
|
-
var alignItems = index_esm_default4.alignItems;
|
|
1074
|
-
var alignContent = index_esm_default4.alignContent;
|
|
1075
|
-
var justifyItems = index_esm_default4.justifyItems;
|
|
1076
|
-
var justifyContent = index_esm_default4.justifyContent;
|
|
1077
|
-
var flexWrap = index_esm_default4.flexWrap;
|
|
1078
|
-
var flexDirection = index_esm_default4.flexDirection;
|
|
1079
|
-
var flex = index_esm_default4.flex;
|
|
1080
|
-
var flexGrow = index_esm_default4.flexGrow;
|
|
1081
|
-
var flexShrink = index_esm_default4.flexShrink;
|
|
1082
|
-
var flexBasis = index_esm_default4.flexBasis;
|
|
1083
|
-
var justifySelf = index_esm_default4.justifySelf;
|
|
1084
|
-
var alignSelf = index_esm_default4.alignSelf;
|
|
1085
|
-
var order = index_esm_default4.order;
|
|
1086
|
-
var gridGap = index_esm_default5.gridGap;
|
|
1087
|
-
var gridColumnGap = index_esm_default5.gridColumnGap;
|
|
1088
|
-
var gridRowGap = index_esm_default5.gridRowGap;
|
|
1089
|
-
var gridColumn = index_esm_default5.gridColumn;
|
|
1090
|
-
var gridRow = index_esm_default5.gridRow;
|
|
1091
|
-
var gridAutoFlow = index_esm_default5.gridAutoFlow;
|
|
1092
|
-
var gridAutoColumns = index_esm_default5.gridAutoColumns;
|
|
1093
|
-
var gridAutoRows = index_esm_default5.gridAutoRows;
|
|
1094
|
-
var gridTemplateColumns = index_esm_default5.gridTemplateColumns;
|
|
1095
|
-
var gridTemplateRows = index_esm_default5.gridTemplateRows;
|
|
1096
|
-
var gridTemplateAreas = index_esm_default5.gridTemplateAreas;
|
|
1097
|
-
var gridArea = index_esm_default5.gridArea;
|
|
1098
|
-
var borderWidth = index_esm_default6.borderWidth;
|
|
1099
|
-
var borderStyle = index_esm_default6.borderStyle;
|
|
1100
|
-
var borderColor = index_esm_default6.borderColor;
|
|
1101
|
-
var borderTop = index_esm_default6.borderTop;
|
|
1102
|
-
var borderRight = index_esm_default6.borderRight;
|
|
1103
|
-
var borderBottom = index_esm_default6.borderBottom;
|
|
1104
|
-
var borderLeft = index_esm_default6.borderLeft;
|
|
1105
|
-
var borderRadius = index_esm_default6.borderRadius;
|
|
1106
|
-
var backgroundImage = index_esm_default7.backgroundImage;
|
|
1107
|
-
var backgroundSize = index_esm_default7.backgroundSize;
|
|
1108
|
-
var backgroundPosition = index_esm_default7.backgroundPosition;
|
|
1109
|
-
var backgroundRepeat = index_esm_default7.backgroundRepeat;
|
|
1110
|
-
var zIndex = index_esm_default8.zIndex;
|
|
1111
|
-
var top = index_esm_default8.top;
|
|
1112
|
-
var right = index_esm_default8.right;
|
|
1113
|
-
var bottom = index_esm_default8.bottom;
|
|
1114
|
-
var left = index_esm_default8.left;
|
|
143
|
+
`;
|
|
144
|
+
var pill = import_styled_components.css`
|
|
145
|
+
min-width: ${import_seeds_react_theme.theme.space[600]};
|
|
146
|
+
min-height: ${import_seeds_react_theme.theme.space[600]};
|
|
147
|
+
padding: ${import_seeds_react_theme.theme.space[300]};
|
|
148
|
+
border-radius: ${import_seeds_react_theme.theme.radii.pill};
|
|
149
|
+
`;
|
|
150
|
+
var disabled = import_styled_components.css`
|
|
151
|
+
opacity: 0.4;
|
|
152
|
+
pointer-events: none;
|
|
153
|
+
`;
|
|
1115
154
|
|
|
1116
155
|
// src/styles.ts
|
|
1117
|
-
var
|
|
1118
|
-
var
|
|
1119
|
-
var animations = import_styled_components.css`
|
|
156
|
+
var StyledAccordionItem = (0, import_styled_components2.default)(RadixAccordion2.Item)``;
|
|
157
|
+
var animations = import_styled_components2.css`
|
|
1120
158
|
@keyframes slideDown {
|
|
1121
159
|
from {
|
|
1122
160
|
height: 0;
|
|
@@ -1135,7 +173,7 @@ var animations = import_styled_components.css`
|
|
|
1135
173
|
}
|
|
1136
174
|
}
|
|
1137
175
|
`;
|
|
1138
|
-
var StyledRadixAccordionTrigger = (0,
|
|
176
|
+
var StyledRadixAccordionTrigger = (0, import_styled_components2.default)(
|
|
1139
177
|
RadixAccordion2.Trigger
|
|
1140
178
|
)`
|
|
1141
179
|
padding: 0;
|
|
@@ -1147,7 +185,7 @@ var StyledRadixAccordionTrigger = (0, import_styled_components.default)(
|
|
|
1147
185
|
outline: none;
|
|
1148
186
|
border: none;
|
|
1149
187
|
background: transparent;
|
|
1150
|
-
${({ theme }) =>
|
|
188
|
+
${({ theme: theme2 }) => theme2.typography[200]};
|
|
1151
189
|
|
|
1152
190
|
.triggerIcon {
|
|
1153
191
|
transition: transform 300ms ease-in-out;
|
|
@@ -1160,12 +198,16 @@ var StyledRadixAccordionTrigger = (0, import_styled_components.default)(
|
|
|
1160
198
|
}
|
|
1161
199
|
|
|
1162
200
|
&[data-styled] {
|
|
1163
|
-
padding: ${({ theme }) =>
|
|
201
|
+
padding: ${({ theme: theme2 }) => theme2.space[400]};
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
&:focus {
|
|
205
|
+
${focusRing}
|
|
1164
206
|
}
|
|
1165
207
|
|
|
1166
208
|
${import_seeds_react_system_props2.COMMON}
|
|
1167
209
|
`;
|
|
1168
|
-
var StyledRadixAccordionContent = (0,
|
|
210
|
+
var StyledRadixAccordionContent = (0, import_styled_components2.default)(
|
|
1169
211
|
RadixAccordion2.Content
|
|
1170
212
|
)`
|
|
1171
213
|
${animations}
|
|
@@ -1181,42 +223,42 @@ var StyledRadixAccordionContent = (0, import_styled_components.default)(
|
|
|
1181
223
|
}
|
|
1182
224
|
|
|
1183
225
|
&[data-styled="true"] {
|
|
1184
|
-
border-left: ${({ theme }) => `${
|
|
1185
|
-
border-right: ${({ theme }) => `${
|
|
1186
|
-
background: ${({ theme }) =>
|
|
226
|
+
border-left: ${({ theme: theme2 }) => `${theme2.borderWidths[500]} solid ${theme2.colors.container.border.base}`};
|
|
227
|
+
border-right: ${({ theme: theme2 }) => `${theme2.borderWidths[500]} solid ${theme2.colors.container.border.base}`};
|
|
228
|
+
background: ${({ theme: theme2 }) => theme2.colors.container.background.base};
|
|
1187
229
|
}
|
|
1188
230
|
|
|
1189
231
|
.accordion-item:last-child[data-state="open"] &[data-styled="true"],
|
|
1190
232
|
.accordion-item:last-child[data-state="closed"] &[data-styled="true"] {
|
|
1191
|
-
border-bottom: ${({ theme }) => `${
|
|
1192
|
-
border-bottom-left-radius: ${({ theme }) =>
|
|
1193
|
-
border-bottom-right-radius: ${({ theme }) =>
|
|
233
|
+
border-bottom: ${({ theme: theme2 }) => `${theme2.borderWidths[500]} solid ${theme2.colors.container.border.base}`};
|
|
234
|
+
border-bottom-left-radius: ${({ theme: theme2 }) => theme2.radii.outer};
|
|
235
|
+
border-bottom-right-radius: ${({ theme: theme2 }) => theme2.radii.outer};
|
|
1194
236
|
}
|
|
1195
237
|
`;
|
|
1196
|
-
var StyledAccordionArea =
|
|
238
|
+
var StyledAccordionArea = import_styled_components2.default.div`
|
|
1197
239
|
display: flex;
|
|
1198
240
|
align-items: center;
|
|
1199
241
|
justify-content: space-between;
|
|
1200
242
|
width: 100%;
|
|
1201
243
|
`;
|
|
1202
|
-
var FlexCenter =
|
|
244
|
+
var FlexCenter = import_styled_components2.default.div`
|
|
1203
245
|
display: flex;
|
|
1204
246
|
align-items: center;
|
|
1205
247
|
`;
|
|
1206
|
-
var ContentContainer =
|
|
1207
|
-
color: ${({ theme }) =>
|
|
248
|
+
var ContentContainer = import_styled_components2.default.div`
|
|
249
|
+
color: ${({ theme: theme2 }) => theme2.colors.text.body};
|
|
1208
250
|
background: transparent;
|
|
1209
|
-
font-family: ${({ theme }) =>
|
|
251
|
+
font-family: ${({ theme: theme2 }) => theme2.fontFamily};
|
|
1210
252
|
|
|
1211
253
|
&[data-styled="true"] {
|
|
1212
|
-
padding: ${({ theme }) =>
|
|
1213
|
-
${({ theme }) =>
|
|
254
|
+
padding: ${({ theme: theme2 }) => theme2.space[400]};
|
|
255
|
+
${({ theme: theme2 }) => theme2.typography[200]};
|
|
1214
256
|
}
|
|
1215
257
|
|
|
1216
258
|
.accordion-item:last-child[data-state="open"] &[data-styled="true"],
|
|
1217
259
|
.accordion-item:last-child[data-state="closed"] &[data-styled="true"] {
|
|
1218
|
-
border-bottom-left-radius: ${({ theme }) =>
|
|
1219
|
-
border-bottom-right-radius: ${({ theme }) =>
|
|
260
|
+
border-bottom-left-radius: ${({ theme: theme2 }) => theme2.radii.outer};
|
|
261
|
+
border-bottom-right-radius: ${({ theme: theme2 }) => theme2.radii.outer};
|
|
1220
262
|
}
|
|
1221
263
|
|
|
1222
264
|
${import_seeds_react_system_props2.COMMON}
|
|
@@ -1225,39 +267,39 @@ var ContentContainer = import_styled_components.default.div`
|
|
|
1225
267
|
${import_seeds_react_system_props2.LAYOUT}
|
|
1226
268
|
${import_seeds_react_system_props2.FLEXBOX}
|
|
1227
269
|
`;
|
|
1228
|
-
var TriggerContainer =
|
|
270
|
+
var TriggerContainer = import_styled_components2.default.div`
|
|
1229
271
|
display: flex;
|
|
1230
272
|
align-items: center;
|
|
1231
273
|
|
|
1232
|
-
|
|
1233
|
-
border-top: ${
|
|
1234
|
-
border-left: ${
|
|
1235
|
-
border-right: ${
|
|
1236
|
-
background: ${
|
|
1237
|
-
}
|
|
274
|
+
${({ $styled, theme: theme2 }) => $styled && `
|
|
275
|
+
border-top: ${theme2.borderWidths[500]} solid ${theme2.colors.container.border.base};
|
|
276
|
+
border-left: ${theme2.borderWidths[500]} solid ${theme2.colors.container.border.base};
|
|
277
|
+
border-right: ${theme2.borderWidths[500]} solid ${theme2.colors.container.border.base};
|
|
278
|
+
background: ${theme2.colors.container.background.base};
|
|
279
|
+
`}
|
|
1238
280
|
|
|
1239
281
|
.accordion-item[data-state="open"] &[data-styled="true"] {
|
|
1240
|
-
border-bottom: ${({ theme }) => `${
|
|
282
|
+
border-bottom: ${({ theme: theme2 }) => `${theme2.borderWidths[500]} solid ${theme2.colors.container.border.base}`};
|
|
1241
283
|
}
|
|
1242
284
|
|
|
1243
285
|
.accordion-item[data-state="closed"] &[data-styled="true"] {
|
|
1244
286
|
transition: border-bottom-color 0s ease-in-out 0.3s;
|
|
1245
|
-
border-bottom: ${({ theme }) => `${
|
|
287
|
+
border-bottom: ${({ theme: theme2 }) => `${theme2.borderWidths[500]} solid transparent`};
|
|
1246
288
|
}
|
|
1247
289
|
|
|
1248
290
|
.accordion-item:first-child &[data-styled="true"] {
|
|
1249
|
-
border-top-left-radius: ${({ theme }) =>
|
|
1250
|
-
border-top-right-radius: ${({ theme }) =>
|
|
291
|
+
border-top-left-radius: ${({ theme: theme2 }) => theme2.radii.outer};
|
|
292
|
+
border-top-right-radius: ${({ theme: theme2 }) => theme2.radii.outer};
|
|
1251
293
|
}
|
|
1252
294
|
|
|
1253
295
|
.accordion-item:last-child &[data-styled="true"] {
|
|
1254
|
-
border-bottom: ${({ theme }) => `${
|
|
296
|
+
border-bottom: ${({ theme: theme2 }) => `${theme2.borderWidths[500]} solid ${theme2.colors.container.border.base}`};
|
|
1255
297
|
}
|
|
1256
298
|
|
|
1257
299
|
.accordion-item:last-child[data-state="closed"] &[data-styled="true"] {
|
|
1258
300
|
transition: border-radius 0s linear 0.3s;
|
|
1259
|
-
border-bottom-left-radius: ${({ theme }) =>
|
|
1260
|
-
border-bottom-right-radius: ${({ theme }) =>
|
|
301
|
+
border-bottom-left-radius: ${({ theme: theme2 }) => theme2.radii.outer};
|
|
302
|
+
border-bottom-right-radius: ${({ theme: theme2 }) => theme2.radii.outer};
|
|
1261
303
|
}
|
|
1262
304
|
|
|
1263
305
|
${import_seeds_react_system_props2.COMMON}
|
|
@@ -1265,19 +307,19 @@ var TriggerContainer = import_styled_components.default.div`
|
|
|
1265
307
|
${import_seeds_react_system_props2.LAYOUT}
|
|
1266
308
|
${import_seeds_react_system_props2.FLEXBOX}
|
|
1267
309
|
`;
|
|
1268
|
-
var TitleStyles =
|
|
310
|
+
var TitleStyles = import_styled_components2.default.h4`
|
|
1269
311
|
margin: 0;
|
|
1270
312
|
font-weight: normal;
|
|
1271
313
|
|
|
1272
314
|
&[data-styled="true"] {
|
|
1273
|
-
font-size: ${({ theme }) =>
|
|
1274
|
-
font-weight: ${({ theme }) =>
|
|
1275
|
-
color: ${({ theme }) =>
|
|
315
|
+
font-size: ${({ theme: theme2 }) => theme2.fontSizes[200]};
|
|
316
|
+
font-weight: ${({ theme: theme2 }) => theme2.fontWeights.semibold};
|
|
317
|
+
color: ${({ theme: theme2 }) => theme2.colors.text.headline};
|
|
1276
318
|
}
|
|
1277
319
|
|
|
1278
320
|
${import_seeds_react_system_props2.COMMON}
|
|
1279
321
|
${import_seeds_react_system_props2.TYPOGRAPHY}
|
|
1280
|
-
${fontSize}
|
|
322
|
+
${import_styled_system.fontSize}
|
|
1281
323
|
`;
|
|
1282
324
|
|
|
1283
325
|
// src/AccordionItem.tsx
|
|
@@ -1317,8 +359,8 @@ var AccordionTrigger = ({
|
|
|
1317
359
|
const { triggerIcon, triggerPosition, styled: styled2 } = (0, import_react3.useContext)(AccordionContext);
|
|
1318
360
|
const validatedActions = relatedActions?.slice(0, MAX_RELATED_ACTIONS);
|
|
1319
361
|
const {
|
|
1320
|
-
color
|
|
1321
|
-
padding
|
|
362
|
+
color,
|
|
363
|
+
padding,
|
|
1322
364
|
paddingBottom,
|
|
1323
365
|
paddingTop,
|
|
1324
366
|
paddingX,
|
|
@@ -1332,16 +374,16 @@ var AccordionTrigger = ({
|
|
|
1332
374
|
pl,
|
|
1333
375
|
px,
|
|
1334
376
|
py,
|
|
1335
|
-
fontFamily
|
|
377
|
+
fontFamily,
|
|
1336
378
|
fontSize: fontSize2,
|
|
1337
|
-
fontStyle
|
|
1338
|
-
fontWeight
|
|
1339
|
-
lineHeight
|
|
1340
|
-
textAlign
|
|
379
|
+
fontStyle,
|
|
380
|
+
fontWeight,
|
|
381
|
+
lineHeight,
|
|
382
|
+
textAlign,
|
|
1341
383
|
...triggerProps
|
|
1342
384
|
} = rest;
|
|
1343
385
|
const spacingProps = {
|
|
1344
|
-
padding
|
|
386
|
+
padding,
|
|
1345
387
|
paddingBottom,
|
|
1346
388
|
paddingTop,
|
|
1347
389
|
paddingX,
|
|
@@ -1358,15 +400,16 @@ var AccordionTrigger = ({
|
|
|
1358
400
|
};
|
|
1359
401
|
const typographyProps = Object.fromEntries(
|
|
1360
402
|
Object.entries({
|
|
1361
|
-
color
|
|
1362
|
-
fontFamily
|
|
403
|
+
color,
|
|
404
|
+
fontFamily,
|
|
1363
405
|
fontSize: fontSize2,
|
|
1364
|
-
fontStyle
|
|
1365
|
-
fontWeight
|
|
1366
|
-
lineHeight
|
|
1367
|
-
textAlign
|
|
406
|
+
fontStyle,
|
|
407
|
+
fontWeight,
|
|
408
|
+
lineHeight,
|
|
409
|
+
textAlign
|
|
1368
410
|
}).filter(([_, value]) => value != null)
|
|
1369
411
|
);
|
|
412
|
+
const shouldRenderActionsBlock = Boolean(overflowMenu || validatedActions);
|
|
1370
413
|
const renderedOverflowMenu = overflowMenu && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
1371
414
|
import_seeds_react_menu2.ActionMenu,
|
|
1372
415
|
{
|
|
@@ -1380,7 +423,7 @@ var AccordionTrigger = ({
|
|
|
1380
423
|
{
|
|
1381
424
|
name: "ellipsis-horizontal-outline",
|
|
1382
425
|
"aria-hidden": "true",
|
|
1383
|
-
color
|
|
426
|
+
color
|
|
1384
427
|
}
|
|
1385
428
|
)
|
|
1386
429
|
}
|
|
@@ -1399,9 +442,9 @@ var AccordionTrigger = ({
|
|
|
1399
442
|
display: "flex",
|
|
1400
443
|
alignItems: "center",
|
|
1401
444
|
gap: "300",
|
|
1402
|
-
color
|
|
445
|
+
color,
|
|
1403
446
|
children: [
|
|
1404
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_seeds_react_icon3.Icon, { name: iconName, color
|
|
447
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_seeds_react_icon3.Icon, { name: iconName, color }),
|
|
1405
448
|
children2
|
|
1406
449
|
]
|
|
1407
450
|
}
|
|
@@ -1417,11 +460,11 @@ var AccordionTrigger = ({
|
|
|
1417
460
|
{
|
|
1418
461
|
onClick: action.onClick,
|
|
1419
462
|
"aria-label": action["aria-label"],
|
|
1420
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_seeds_react_icon3.Icon, { name: action.iconName, color
|
|
463
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_seeds_react_icon3.Icon, { name: action.iconName, color, "aria-hidden": "true" })
|
|
1421
464
|
},
|
|
1422
465
|
`${action.iconName}-${index}`
|
|
1423
466
|
)) });
|
|
1424
|
-
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(TriggerContainer, { "data-styled": styled2, ...triggerProps, children: [
|
|
467
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(TriggerContainer, { "data-styled": styled2, $styled: styled2, ...triggerProps, children: [
|
|
1425
468
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(StyledRadixAccordionTrigger, { "data-styled": styled2, ...spacingProps, children: triggerPosition === "right" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(StyledAccordionArea, { children: [
|
|
1426
469
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(FlexCenter, { children: [
|
|
1427
470
|
leftSlot,
|
|
@@ -1437,7 +480,7 @@ var AccordionTrigger = ({
|
|
|
1437
480
|
] }),
|
|
1438
481
|
rightSlot
|
|
1439
482
|
] }) }),
|
|
1440
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_seeds_react_box.Box, { mr: 300, display: "flex", children: [
|
|
483
|
+
shouldRenderActionsBlock && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_seeds_react_box.Box, { mr: 300, display: "flex", children: [
|
|
1441
484
|
renderedOverflowMenu,
|
|
1442
485
|
renderedRelatedActions
|
|
1443
486
|
] })
|
|
@@ -1450,13 +493,4 @@ var AccordionTrigger = ({
|
|
|
1450
493
|
AccordionItem,
|
|
1451
494
|
AccordionTrigger
|
|
1452
495
|
});
|
|
1453
|
-
/*! Bundled license information:
|
|
1454
|
-
|
|
1455
|
-
object-assign/index.js:
|
|
1456
|
-
(*
|
|
1457
|
-
object-assign
|
|
1458
|
-
(c) Sindre Sorhus
|
|
1459
|
-
@license MIT
|
|
1460
|
-
*)
|
|
1461
|
-
*/
|
|
1462
496
|
//# sourceMappingURL=index.js.map
|