@sproutsocial/seeds-react-accordion 0.2.0 → 0.2.2
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 +15 -0
- package/dist/esm/index.js +656 -53
- package/dist/esm/index.js.map +1 -1
- package/dist/index.js +664 -61
- package/dist/index.js.map +1 -1
- package/package.json +4 -4
- package/src/Accordion.stories.tsx +67 -0
- package/src/AccordionTrigger.tsx +22 -9
- package/src/styles.ts +13 -10
package/dist/index.js
CHANGED
|
@@ -182,7 +182,7 @@ var Accordion = ({
|
|
|
182
182
|
var RadixAccordion3 = require("@radix-ui/react-accordion");
|
|
183
183
|
|
|
184
184
|
// src/styles.ts
|
|
185
|
-
var
|
|
185
|
+
var import_styled_components2 = __toESM(require("styled-components"));
|
|
186
186
|
var RadixAccordion2 = __toESM(require("@radix-ui/react-accordion"));
|
|
187
187
|
|
|
188
188
|
// ../../node_modules/@styled-system/core/dist/index.esm.js
|
|
@@ -946,18 +946,18 @@ var positiveOrNegative = function positiveOrNegative2(scale, value) {
|
|
|
946
946
|
return n * -1;
|
|
947
947
|
};
|
|
948
948
|
var transforms = ["margin", "marginTop", "marginRight", "marginBottom", "marginLeft", "marginX", "marginY", "top", "bottom", "left", "right"].reduce(function(acc, curr) {
|
|
949
|
-
var
|
|
950
|
-
return _extends({}, acc, (
|
|
949
|
+
var _extends22;
|
|
950
|
+
return _extends({}, acc, (_extends22 = {}, _extends22[curr] = positiveOrNegative, _extends22));
|
|
951
951
|
}, {});
|
|
952
952
|
var responsive = function responsive2(styles) {
|
|
953
|
-
return function(
|
|
953
|
+
return function(theme2) {
|
|
954
954
|
var next = {};
|
|
955
|
-
var breakpoints = get3(
|
|
955
|
+
var breakpoints = get3(theme2, "breakpoints", defaultBreakpoints);
|
|
956
956
|
var mediaQueries = [null].concat(breakpoints.map(function(n) {
|
|
957
957
|
return "@media screen and (min-width: " + n + ")";
|
|
958
958
|
}));
|
|
959
959
|
for (var key in styles) {
|
|
960
|
-
var value = typeof styles[key] === "function" ? styles[key](
|
|
960
|
+
var value = typeof styles[key] === "function" ? styles[key](theme2) : styles[key];
|
|
961
961
|
if (value == null) continue;
|
|
962
962
|
if (!Array.isArray(value)) {
|
|
963
963
|
next[key] = value;
|
|
@@ -982,25 +982,25 @@ var css = function css2(args) {
|
|
|
982
982
|
if (props === void 0) {
|
|
983
983
|
props = {};
|
|
984
984
|
}
|
|
985
|
-
var
|
|
985
|
+
var theme2 = _extends({}, defaultTheme, {}, props.theme || props);
|
|
986
986
|
var result = {};
|
|
987
|
-
var obj = typeof args === "function" ? args(
|
|
988
|
-
var styles = responsive(obj)(
|
|
987
|
+
var obj = typeof args === "function" ? args(theme2) : args;
|
|
988
|
+
var styles = responsive(obj)(theme2);
|
|
989
989
|
for (var key in styles) {
|
|
990
990
|
var x = styles[key];
|
|
991
|
-
var val = typeof x === "function" ? x(
|
|
991
|
+
var val = typeof x === "function" ? x(theme2) : x;
|
|
992
992
|
if (key === "variant") {
|
|
993
|
-
var variant3 = css2(get3(
|
|
993
|
+
var variant3 = css2(get3(theme2, val))(theme2);
|
|
994
994
|
result = _extends({}, result, {}, variant3);
|
|
995
995
|
continue;
|
|
996
996
|
}
|
|
997
997
|
if (val && typeof val === "object") {
|
|
998
|
-
result[key] = css2(val)(
|
|
998
|
+
result[key] = css2(val)(theme2);
|
|
999
999
|
continue;
|
|
1000
1000
|
}
|
|
1001
1001
|
var prop = get3(aliases, key, key);
|
|
1002
1002
|
var scaleName = get3(scales, prop);
|
|
1003
|
-
var scale = get3(
|
|
1003
|
+
var scale = get3(theme2, scaleName, get3(theme2, prop, {}));
|
|
1004
1004
|
var transform = get3(transforms, prop, get3);
|
|
1005
1005
|
var value = transform(scale, val, val);
|
|
1006
1006
|
if (multiples[prop]) {
|
|
@@ -1115,8 +1115,591 @@ var left = index_esm_default8.left;
|
|
|
1115
1115
|
|
|
1116
1116
|
// src/styles.ts
|
|
1117
1117
|
var import_seeds_react_system_props2 = require("@sproutsocial/seeds-react-system-props");
|
|
1118
|
-
|
|
1119
|
-
|
|
1118
|
+
|
|
1119
|
+
// ../../node_modules/@babel/runtime/helpers/esm/extends.js
|
|
1120
|
+
function _extends2() {
|
|
1121
|
+
return _extends2 = Object.assign ? Object.assign.bind() : function(n) {
|
|
1122
|
+
for (var e = 1; e < arguments.length; e++) {
|
|
1123
|
+
var t = arguments[e];
|
|
1124
|
+
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
|
|
1125
|
+
}
|
|
1126
|
+
return n;
|
|
1127
|
+
}, _extends2.apply(null, arguments);
|
|
1128
|
+
}
|
|
1129
|
+
|
|
1130
|
+
// ../../node_modules/@babel/runtime/helpers/esm/assertThisInitialized.js
|
|
1131
|
+
function _assertThisInitialized(e) {
|
|
1132
|
+
if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
|
|
1133
|
+
return e;
|
|
1134
|
+
}
|
|
1135
|
+
|
|
1136
|
+
// ../../node_modules/@babel/runtime/helpers/esm/setPrototypeOf.js
|
|
1137
|
+
function _setPrototypeOf(t, e) {
|
|
1138
|
+
return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(t2, e2) {
|
|
1139
|
+
return t2.__proto__ = e2, t2;
|
|
1140
|
+
}, _setPrototypeOf(t, e);
|
|
1141
|
+
}
|
|
1142
|
+
|
|
1143
|
+
// ../../node_modules/@babel/runtime/helpers/esm/inheritsLoose.js
|
|
1144
|
+
function _inheritsLoose(t, o) {
|
|
1145
|
+
t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o);
|
|
1146
|
+
}
|
|
1147
|
+
|
|
1148
|
+
// ../../node_modules/@babel/runtime/helpers/esm/getPrototypeOf.js
|
|
1149
|
+
function _getPrototypeOf(t) {
|
|
1150
|
+
return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(t2) {
|
|
1151
|
+
return t2.__proto__ || Object.getPrototypeOf(t2);
|
|
1152
|
+
}, _getPrototypeOf(t);
|
|
1153
|
+
}
|
|
1154
|
+
|
|
1155
|
+
// ../../node_modules/@babel/runtime/helpers/esm/isNativeFunction.js
|
|
1156
|
+
function _isNativeFunction(t) {
|
|
1157
|
+
try {
|
|
1158
|
+
return -1 !== Function.toString.call(t).indexOf("[native code]");
|
|
1159
|
+
} catch (n) {
|
|
1160
|
+
return "function" == typeof t;
|
|
1161
|
+
}
|
|
1162
|
+
}
|
|
1163
|
+
|
|
1164
|
+
// ../../node_modules/@babel/runtime/helpers/esm/isNativeReflectConstruct.js
|
|
1165
|
+
function _isNativeReflectConstruct() {
|
|
1166
|
+
try {
|
|
1167
|
+
var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {
|
|
1168
|
+
}));
|
|
1169
|
+
} catch (t2) {
|
|
1170
|
+
}
|
|
1171
|
+
return (_isNativeReflectConstruct = function _isNativeReflectConstruct2() {
|
|
1172
|
+
return !!t;
|
|
1173
|
+
})();
|
|
1174
|
+
}
|
|
1175
|
+
|
|
1176
|
+
// ../../node_modules/@babel/runtime/helpers/esm/construct.js
|
|
1177
|
+
function _construct(t, e, r) {
|
|
1178
|
+
if (_isNativeReflectConstruct()) return Reflect.construct.apply(null, arguments);
|
|
1179
|
+
var o = [null];
|
|
1180
|
+
o.push.apply(o, e);
|
|
1181
|
+
var p = new (t.bind.apply(t, o))();
|
|
1182
|
+
return r && _setPrototypeOf(p, r.prototype), p;
|
|
1183
|
+
}
|
|
1184
|
+
|
|
1185
|
+
// ../../node_modules/@babel/runtime/helpers/esm/wrapNativeSuper.js
|
|
1186
|
+
function _wrapNativeSuper(t) {
|
|
1187
|
+
var r = "function" == typeof Map ? /* @__PURE__ */ new Map() : void 0;
|
|
1188
|
+
return _wrapNativeSuper = function _wrapNativeSuper2(t2) {
|
|
1189
|
+
if (null === t2 || !_isNativeFunction(t2)) return t2;
|
|
1190
|
+
if ("function" != typeof t2) throw new TypeError("Super expression must either be null or a function");
|
|
1191
|
+
if (void 0 !== r) {
|
|
1192
|
+
if (r.has(t2)) return r.get(t2);
|
|
1193
|
+
r.set(t2, Wrapper);
|
|
1194
|
+
}
|
|
1195
|
+
function Wrapper() {
|
|
1196
|
+
return _construct(t2, arguments, _getPrototypeOf(this).constructor);
|
|
1197
|
+
}
|
|
1198
|
+
return Wrapper.prototype = Object.create(t2.prototype, {
|
|
1199
|
+
constructor: {
|
|
1200
|
+
value: Wrapper,
|
|
1201
|
+
enumerable: false,
|
|
1202
|
+
writable: true,
|
|
1203
|
+
configurable: true
|
|
1204
|
+
}
|
|
1205
|
+
}), _setPrototypeOf(Wrapper, t2);
|
|
1206
|
+
}, _wrapNativeSuper(t);
|
|
1207
|
+
}
|
|
1208
|
+
|
|
1209
|
+
// ../../node_modules/polished/dist/polished.esm.js
|
|
1210
|
+
var ERRORS = {
|
|
1211
|
+
"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",
|
|
1212
|
+
"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",
|
|
1213
|
+
"3": "Passed an incorrect argument to a color function, please pass a string representation of a color.\n\n",
|
|
1214
|
+
"4": "Couldn't generate valid rgb string from %s, it returned %s.\n\n",
|
|
1215
|
+
"5": "Couldn't parse the color string. Please provide the color as a string in hex, rgb, rgba, hsl or hsla notation.\n\n",
|
|
1216
|
+
"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",
|
|
1217
|
+
"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",
|
|
1218
|
+
"8": "Passed invalid argument to toColorString, please pass a RgbColor, RgbaColor, HslColor or HslaColor object.\n\n",
|
|
1219
|
+
"9": "Please provide a number of steps to the modularScale helper.\n\n",
|
|
1220
|
+
"10": "Please pass a number or one of the predefined scales to the modularScale helper as the ratio.\n\n",
|
|
1221
|
+
"11": 'Invalid value passed as base to modularScale, expected number or em string but got "%s"\n\n',
|
|
1222
|
+
"12": 'Expected a string ending in "px" or a number passed as the first argument to %s(), got "%s" instead.\n\n',
|
|
1223
|
+
"13": 'Expected a string ending in "px" or a number passed as the second argument to %s(), got "%s" instead.\n\n',
|
|
1224
|
+
"14": 'Passed invalid pixel value ("%s") to %s(), please pass a value like "12px" or 12.\n\n',
|
|
1225
|
+
"15": 'Passed invalid base value ("%s") to %s(), please pass a value like "12px" or 12.\n\n',
|
|
1226
|
+
"16": "You must provide a template to this method.\n\n",
|
|
1227
|
+
"17": "You passed an unsupported selector state to this method.\n\n",
|
|
1228
|
+
"18": "minScreen and maxScreen must be provided as stringified numbers with the same units.\n\n",
|
|
1229
|
+
"19": "fromSize and toSize must be provided as stringified numbers with the same units.\n\n",
|
|
1230
|
+
"20": "expects either an array of objects or a single object with the properties prop, fromSize, and toSize.\n\n",
|
|
1231
|
+
"21": "expects the objects in the first argument array to have the properties `prop`, `fromSize`, and `toSize`.\n\n",
|
|
1232
|
+
"22": "expects the first argument object to have the properties `prop`, `fromSize`, and `toSize`.\n\n",
|
|
1233
|
+
"23": "fontFace expects a name of a font-family.\n\n",
|
|
1234
|
+
"24": "fontFace expects either the path to the font file(s) or a name of a local copy.\n\n",
|
|
1235
|
+
"25": "fontFace expects localFonts to be an array.\n\n",
|
|
1236
|
+
"26": "fontFace expects fileFormats to be an array.\n\n",
|
|
1237
|
+
"27": "radialGradient requries at least 2 color-stops to properly render.\n\n",
|
|
1238
|
+
"28": "Please supply a filename to retinaImage() as the first argument.\n\n",
|
|
1239
|
+
"29": "Passed invalid argument to triangle, please pass correct pointingDirection e.g. 'right'.\n\n",
|
|
1240
|
+
"30": "Passed an invalid value to `height` or `width`. Please provide a pixel based unit.\n\n",
|
|
1241
|
+
"31": "The animation shorthand only takes 8 arguments. See the specification for more information: http://mdn.io/animation\n\n",
|
|
1242
|
+
"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",
|
|
1243
|
+
"33": "The animation shorthand arrays can only have 8 elements. See the specification for more information: http://mdn.io/animation\n\n",
|
|
1244
|
+
"34": "borderRadius expects a radius value as a string or number as the second argument.\n\n",
|
|
1245
|
+
"35": 'borderRadius expects one of "top", "bottom", "left" or "right" as the first argument.\n\n',
|
|
1246
|
+
"36": "Property must be a string value.\n\n",
|
|
1247
|
+
"37": "Syntax Error at %s.\n\n",
|
|
1248
|
+
"38": "Formula contains a function that needs parentheses at %s.\n\n",
|
|
1249
|
+
"39": "Formula is missing closing parenthesis at %s.\n\n",
|
|
1250
|
+
"40": "Formula has too many closing parentheses at %s.\n\n",
|
|
1251
|
+
"41": "All values in a formula must have the same unit or be unitless.\n\n",
|
|
1252
|
+
"42": "Please provide a number of steps to the modularScale helper.\n\n",
|
|
1253
|
+
"43": "Please pass a number or one of the predefined scales to the modularScale helper as the ratio.\n\n",
|
|
1254
|
+
"44": "Invalid value passed as base to modularScale, expected number or em/rem string but got %s.\n\n",
|
|
1255
|
+
"45": "Passed invalid argument to hslToColorString, please pass a HslColor or HslaColor object.\n\n",
|
|
1256
|
+
"46": "Passed invalid argument to rgbToColorString, please pass a RgbColor or RgbaColor object.\n\n",
|
|
1257
|
+
"47": "minScreen and maxScreen must be provided as stringified numbers with the same units.\n\n",
|
|
1258
|
+
"48": "fromSize and toSize must be provided as stringified numbers with the same units.\n\n",
|
|
1259
|
+
"49": "Expects either an array of objects or a single object with the properties prop, fromSize, and toSize.\n\n",
|
|
1260
|
+
"50": "Expects the objects in the first argument array to have the properties prop, fromSize, and toSize.\n\n",
|
|
1261
|
+
"51": "Expects the first argument object to have the properties prop, fromSize, and toSize.\n\n",
|
|
1262
|
+
"52": "fontFace expects either the path to the font file(s) or a name of a local copy.\n\n",
|
|
1263
|
+
"53": "fontFace expects localFonts to be an array.\n\n",
|
|
1264
|
+
"54": "fontFace expects fileFormats to be an array.\n\n",
|
|
1265
|
+
"55": "fontFace expects a name of a font-family.\n\n",
|
|
1266
|
+
"56": "linearGradient requries at least 2 color-stops to properly render.\n\n",
|
|
1267
|
+
"57": "radialGradient requries at least 2 color-stops to properly render.\n\n",
|
|
1268
|
+
"58": "Please supply a filename to retinaImage() as the first argument.\n\n",
|
|
1269
|
+
"59": "Passed invalid argument to triangle, please pass correct pointingDirection e.g. 'right'.\n\n",
|
|
1270
|
+
"60": "Passed an invalid value to `height` or `width`. Please provide a pixel based unit.\n\n",
|
|
1271
|
+
"61": "Property must be a string value.\n\n",
|
|
1272
|
+
"62": "borderRadius expects a radius value as a string or number as the second argument.\n\n",
|
|
1273
|
+
"63": 'borderRadius expects one of "top", "bottom", "left" or "right" as the first argument.\n\n',
|
|
1274
|
+
"64": "The animation shorthand only takes 8 arguments. See the specification for more information: http://mdn.io/animation.\n\n",
|
|
1275
|
+
"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",
|
|
1276
|
+
"66": "The animation shorthand arrays can only have 8 elements. See the specification for more information: http://mdn.io/animation.\n\n",
|
|
1277
|
+
"67": "You must provide a template to this method.\n\n",
|
|
1278
|
+
"68": "You passed an unsupported selector state to this method.\n\n",
|
|
1279
|
+
"69": 'Expected a string ending in "px" or a number passed as the first argument to %s(), got %s instead.\n\n',
|
|
1280
|
+
"70": 'Expected a string ending in "px" or a number passed as the second argument to %s(), got %s instead.\n\n',
|
|
1281
|
+
"71": 'Passed invalid pixel value %s to %s(), please pass a value like "12px" or 12.\n\n',
|
|
1282
|
+
"72": 'Passed invalid base value %s to %s(), please pass a value like "12px" or 12.\n\n',
|
|
1283
|
+
"73": "Please provide a valid CSS variable.\n\n",
|
|
1284
|
+
"74": "CSS variable not found.\n\n",
|
|
1285
|
+
"75": "fromSize and toSize must be provided as stringified numbers with the same units as minScreen and maxScreen.\n"
|
|
1286
|
+
};
|
|
1287
|
+
function format() {
|
|
1288
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
1289
|
+
args[_key] = arguments[_key];
|
|
1290
|
+
}
|
|
1291
|
+
var a = args[0];
|
|
1292
|
+
var b = [];
|
|
1293
|
+
var c;
|
|
1294
|
+
for (c = 1; c < args.length; c += 1) {
|
|
1295
|
+
b.push(args[c]);
|
|
1296
|
+
}
|
|
1297
|
+
b.forEach(function(d) {
|
|
1298
|
+
a = a.replace(/%[a-z]/, d);
|
|
1299
|
+
});
|
|
1300
|
+
return a;
|
|
1301
|
+
}
|
|
1302
|
+
var PolishedError = /* @__PURE__ */ function(_Error) {
|
|
1303
|
+
_inheritsLoose(PolishedError2, _Error);
|
|
1304
|
+
function PolishedError2(code) {
|
|
1305
|
+
var _this;
|
|
1306
|
+
if (process.env.NODE_ENV === "production") {
|
|
1307
|
+
_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;
|
|
1308
|
+
} else {
|
|
1309
|
+
for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
|
|
1310
|
+
args[_key2 - 1] = arguments[_key2];
|
|
1311
|
+
}
|
|
1312
|
+
_this = _Error.call(this, format.apply(void 0, [ERRORS[code]].concat(args))) || this;
|
|
1313
|
+
}
|
|
1314
|
+
return _assertThisInitialized(_this);
|
|
1315
|
+
}
|
|
1316
|
+
return PolishedError2;
|
|
1317
|
+
}(/* @__PURE__ */ _wrapNativeSuper(Error));
|
|
1318
|
+
function colorToInt(color2) {
|
|
1319
|
+
return Math.round(color2 * 255);
|
|
1320
|
+
}
|
|
1321
|
+
function convertToInt(red, green, blue) {
|
|
1322
|
+
return colorToInt(red) + "," + colorToInt(green) + "," + colorToInt(blue);
|
|
1323
|
+
}
|
|
1324
|
+
function hslToRgb(hue, saturation, lightness, convert) {
|
|
1325
|
+
if (convert === void 0) {
|
|
1326
|
+
convert = convertToInt;
|
|
1327
|
+
}
|
|
1328
|
+
if (saturation === 0) {
|
|
1329
|
+
return convert(lightness, lightness, lightness);
|
|
1330
|
+
}
|
|
1331
|
+
var huePrime = (hue % 360 + 360) % 360 / 60;
|
|
1332
|
+
var chroma = (1 - Math.abs(2 * lightness - 1)) * saturation;
|
|
1333
|
+
var secondComponent = chroma * (1 - Math.abs(huePrime % 2 - 1));
|
|
1334
|
+
var red = 0;
|
|
1335
|
+
var green = 0;
|
|
1336
|
+
var blue = 0;
|
|
1337
|
+
if (huePrime >= 0 && huePrime < 1) {
|
|
1338
|
+
red = chroma;
|
|
1339
|
+
green = secondComponent;
|
|
1340
|
+
} else if (huePrime >= 1 && huePrime < 2) {
|
|
1341
|
+
red = secondComponent;
|
|
1342
|
+
green = chroma;
|
|
1343
|
+
} else if (huePrime >= 2 && huePrime < 3) {
|
|
1344
|
+
green = chroma;
|
|
1345
|
+
blue = secondComponent;
|
|
1346
|
+
} else if (huePrime >= 3 && huePrime < 4) {
|
|
1347
|
+
green = secondComponent;
|
|
1348
|
+
blue = chroma;
|
|
1349
|
+
} else if (huePrime >= 4 && huePrime < 5) {
|
|
1350
|
+
red = secondComponent;
|
|
1351
|
+
blue = chroma;
|
|
1352
|
+
} else if (huePrime >= 5 && huePrime < 6) {
|
|
1353
|
+
red = chroma;
|
|
1354
|
+
blue = secondComponent;
|
|
1355
|
+
}
|
|
1356
|
+
var lightnessModification = lightness - chroma / 2;
|
|
1357
|
+
var finalRed = red + lightnessModification;
|
|
1358
|
+
var finalGreen = green + lightnessModification;
|
|
1359
|
+
var finalBlue = blue + lightnessModification;
|
|
1360
|
+
return convert(finalRed, finalGreen, finalBlue);
|
|
1361
|
+
}
|
|
1362
|
+
var namedColorMap = {
|
|
1363
|
+
aliceblue: "f0f8ff",
|
|
1364
|
+
antiquewhite: "faebd7",
|
|
1365
|
+
aqua: "00ffff",
|
|
1366
|
+
aquamarine: "7fffd4",
|
|
1367
|
+
azure: "f0ffff",
|
|
1368
|
+
beige: "f5f5dc",
|
|
1369
|
+
bisque: "ffe4c4",
|
|
1370
|
+
black: "000",
|
|
1371
|
+
blanchedalmond: "ffebcd",
|
|
1372
|
+
blue: "0000ff",
|
|
1373
|
+
blueviolet: "8a2be2",
|
|
1374
|
+
brown: "a52a2a",
|
|
1375
|
+
burlywood: "deb887",
|
|
1376
|
+
cadetblue: "5f9ea0",
|
|
1377
|
+
chartreuse: "7fff00",
|
|
1378
|
+
chocolate: "d2691e",
|
|
1379
|
+
coral: "ff7f50",
|
|
1380
|
+
cornflowerblue: "6495ed",
|
|
1381
|
+
cornsilk: "fff8dc",
|
|
1382
|
+
crimson: "dc143c",
|
|
1383
|
+
cyan: "00ffff",
|
|
1384
|
+
darkblue: "00008b",
|
|
1385
|
+
darkcyan: "008b8b",
|
|
1386
|
+
darkgoldenrod: "b8860b",
|
|
1387
|
+
darkgray: "a9a9a9",
|
|
1388
|
+
darkgreen: "006400",
|
|
1389
|
+
darkgrey: "a9a9a9",
|
|
1390
|
+
darkkhaki: "bdb76b",
|
|
1391
|
+
darkmagenta: "8b008b",
|
|
1392
|
+
darkolivegreen: "556b2f",
|
|
1393
|
+
darkorange: "ff8c00",
|
|
1394
|
+
darkorchid: "9932cc",
|
|
1395
|
+
darkred: "8b0000",
|
|
1396
|
+
darksalmon: "e9967a",
|
|
1397
|
+
darkseagreen: "8fbc8f",
|
|
1398
|
+
darkslateblue: "483d8b",
|
|
1399
|
+
darkslategray: "2f4f4f",
|
|
1400
|
+
darkslategrey: "2f4f4f",
|
|
1401
|
+
darkturquoise: "00ced1",
|
|
1402
|
+
darkviolet: "9400d3",
|
|
1403
|
+
deeppink: "ff1493",
|
|
1404
|
+
deepskyblue: "00bfff",
|
|
1405
|
+
dimgray: "696969",
|
|
1406
|
+
dimgrey: "696969",
|
|
1407
|
+
dodgerblue: "1e90ff",
|
|
1408
|
+
firebrick: "b22222",
|
|
1409
|
+
floralwhite: "fffaf0",
|
|
1410
|
+
forestgreen: "228b22",
|
|
1411
|
+
fuchsia: "ff00ff",
|
|
1412
|
+
gainsboro: "dcdcdc",
|
|
1413
|
+
ghostwhite: "f8f8ff",
|
|
1414
|
+
gold: "ffd700",
|
|
1415
|
+
goldenrod: "daa520",
|
|
1416
|
+
gray: "808080",
|
|
1417
|
+
green: "008000",
|
|
1418
|
+
greenyellow: "adff2f",
|
|
1419
|
+
grey: "808080",
|
|
1420
|
+
honeydew: "f0fff0",
|
|
1421
|
+
hotpink: "ff69b4",
|
|
1422
|
+
indianred: "cd5c5c",
|
|
1423
|
+
indigo: "4b0082",
|
|
1424
|
+
ivory: "fffff0",
|
|
1425
|
+
khaki: "f0e68c",
|
|
1426
|
+
lavender: "e6e6fa",
|
|
1427
|
+
lavenderblush: "fff0f5",
|
|
1428
|
+
lawngreen: "7cfc00",
|
|
1429
|
+
lemonchiffon: "fffacd",
|
|
1430
|
+
lightblue: "add8e6",
|
|
1431
|
+
lightcoral: "f08080",
|
|
1432
|
+
lightcyan: "e0ffff",
|
|
1433
|
+
lightgoldenrodyellow: "fafad2",
|
|
1434
|
+
lightgray: "d3d3d3",
|
|
1435
|
+
lightgreen: "90ee90",
|
|
1436
|
+
lightgrey: "d3d3d3",
|
|
1437
|
+
lightpink: "ffb6c1",
|
|
1438
|
+
lightsalmon: "ffa07a",
|
|
1439
|
+
lightseagreen: "20b2aa",
|
|
1440
|
+
lightskyblue: "87cefa",
|
|
1441
|
+
lightslategray: "789",
|
|
1442
|
+
lightslategrey: "789",
|
|
1443
|
+
lightsteelblue: "b0c4de",
|
|
1444
|
+
lightyellow: "ffffe0",
|
|
1445
|
+
lime: "0f0",
|
|
1446
|
+
limegreen: "32cd32",
|
|
1447
|
+
linen: "faf0e6",
|
|
1448
|
+
magenta: "f0f",
|
|
1449
|
+
maroon: "800000",
|
|
1450
|
+
mediumaquamarine: "66cdaa",
|
|
1451
|
+
mediumblue: "0000cd",
|
|
1452
|
+
mediumorchid: "ba55d3",
|
|
1453
|
+
mediumpurple: "9370db",
|
|
1454
|
+
mediumseagreen: "3cb371",
|
|
1455
|
+
mediumslateblue: "7b68ee",
|
|
1456
|
+
mediumspringgreen: "00fa9a",
|
|
1457
|
+
mediumturquoise: "48d1cc",
|
|
1458
|
+
mediumvioletred: "c71585",
|
|
1459
|
+
midnightblue: "191970",
|
|
1460
|
+
mintcream: "f5fffa",
|
|
1461
|
+
mistyrose: "ffe4e1",
|
|
1462
|
+
moccasin: "ffe4b5",
|
|
1463
|
+
navajowhite: "ffdead",
|
|
1464
|
+
navy: "000080",
|
|
1465
|
+
oldlace: "fdf5e6",
|
|
1466
|
+
olive: "808000",
|
|
1467
|
+
olivedrab: "6b8e23",
|
|
1468
|
+
orange: "ffa500",
|
|
1469
|
+
orangered: "ff4500",
|
|
1470
|
+
orchid: "da70d6",
|
|
1471
|
+
palegoldenrod: "eee8aa",
|
|
1472
|
+
palegreen: "98fb98",
|
|
1473
|
+
paleturquoise: "afeeee",
|
|
1474
|
+
palevioletred: "db7093",
|
|
1475
|
+
papayawhip: "ffefd5",
|
|
1476
|
+
peachpuff: "ffdab9",
|
|
1477
|
+
peru: "cd853f",
|
|
1478
|
+
pink: "ffc0cb",
|
|
1479
|
+
plum: "dda0dd",
|
|
1480
|
+
powderblue: "b0e0e6",
|
|
1481
|
+
purple: "800080",
|
|
1482
|
+
rebeccapurple: "639",
|
|
1483
|
+
red: "f00",
|
|
1484
|
+
rosybrown: "bc8f8f",
|
|
1485
|
+
royalblue: "4169e1",
|
|
1486
|
+
saddlebrown: "8b4513",
|
|
1487
|
+
salmon: "fa8072",
|
|
1488
|
+
sandybrown: "f4a460",
|
|
1489
|
+
seagreen: "2e8b57",
|
|
1490
|
+
seashell: "fff5ee",
|
|
1491
|
+
sienna: "a0522d",
|
|
1492
|
+
silver: "c0c0c0",
|
|
1493
|
+
skyblue: "87ceeb",
|
|
1494
|
+
slateblue: "6a5acd",
|
|
1495
|
+
slategray: "708090",
|
|
1496
|
+
slategrey: "708090",
|
|
1497
|
+
snow: "fffafa",
|
|
1498
|
+
springgreen: "00ff7f",
|
|
1499
|
+
steelblue: "4682b4",
|
|
1500
|
+
tan: "d2b48c",
|
|
1501
|
+
teal: "008080",
|
|
1502
|
+
thistle: "d8bfd8",
|
|
1503
|
+
tomato: "ff6347",
|
|
1504
|
+
turquoise: "40e0d0",
|
|
1505
|
+
violet: "ee82ee",
|
|
1506
|
+
wheat: "f5deb3",
|
|
1507
|
+
white: "fff",
|
|
1508
|
+
whitesmoke: "f5f5f5",
|
|
1509
|
+
yellow: "ff0",
|
|
1510
|
+
yellowgreen: "9acd32"
|
|
1511
|
+
};
|
|
1512
|
+
function nameToHex(color2) {
|
|
1513
|
+
if (typeof color2 !== "string") return color2;
|
|
1514
|
+
var normalizedColorName = color2.toLowerCase();
|
|
1515
|
+
return namedColorMap[normalizedColorName] ? "#" + namedColorMap[normalizedColorName] : color2;
|
|
1516
|
+
}
|
|
1517
|
+
var hexRegex = /^#[a-fA-F0-9]{6}$/;
|
|
1518
|
+
var hexRgbaRegex = /^#[a-fA-F0-9]{8}$/;
|
|
1519
|
+
var reducedHexRegex = /^#[a-fA-F0-9]{3}$/;
|
|
1520
|
+
var reducedRgbaHexRegex = /^#[a-fA-F0-9]{4}$/;
|
|
1521
|
+
var rgbRegex = /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/i;
|
|
1522
|
+
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;
|
|
1523
|
+
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;
|
|
1524
|
+
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;
|
|
1525
|
+
function parseToRgb(color2) {
|
|
1526
|
+
if (typeof color2 !== "string") {
|
|
1527
|
+
throw new PolishedError(3);
|
|
1528
|
+
}
|
|
1529
|
+
var normalizedColor = nameToHex(color2);
|
|
1530
|
+
if (normalizedColor.match(hexRegex)) {
|
|
1531
|
+
return {
|
|
1532
|
+
red: parseInt("" + normalizedColor[1] + normalizedColor[2], 16),
|
|
1533
|
+
green: parseInt("" + normalizedColor[3] + normalizedColor[4], 16),
|
|
1534
|
+
blue: parseInt("" + normalizedColor[5] + normalizedColor[6], 16)
|
|
1535
|
+
};
|
|
1536
|
+
}
|
|
1537
|
+
if (normalizedColor.match(hexRgbaRegex)) {
|
|
1538
|
+
var alpha = parseFloat((parseInt("" + normalizedColor[7] + normalizedColor[8], 16) / 255).toFixed(2));
|
|
1539
|
+
return {
|
|
1540
|
+
red: parseInt("" + normalizedColor[1] + normalizedColor[2], 16),
|
|
1541
|
+
green: parseInt("" + normalizedColor[3] + normalizedColor[4], 16),
|
|
1542
|
+
blue: parseInt("" + normalizedColor[5] + normalizedColor[6], 16),
|
|
1543
|
+
alpha
|
|
1544
|
+
};
|
|
1545
|
+
}
|
|
1546
|
+
if (normalizedColor.match(reducedHexRegex)) {
|
|
1547
|
+
return {
|
|
1548
|
+
red: parseInt("" + normalizedColor[1] + normalizedColor[1], 16),
|
|
1549
|
+
green: parseInt("" + normalizedColor[2] + normalizedColor[2], 16),
|
|
1550
|
+
blue: parseInt("" + normalizedColor[3] + normalizedColor[3], 16)
|
|
1551
|
+
};
|
|
1552
|
+
}
|
|
1553
|
+
if (normalizedColor.match(reducedRgbaHexRegex)) {
|
|
1554
|
+
var _alpha = parseFloat((parseInt("" + normalizedColor[4] + normalizedColor[4], 16) / 255).toFixed(2));
|
|
1555
|
+
return {
|
|
1556
|
+
red: parseInt("" + normalizedColor[1] + normalizedColor[1], 16),
|
|
1557
|
+
green: parseInt("" + normalizedColor[2] + normalizedColor[2], 16),
|
|
1558
|
+
blue: parseInt("" + normalizedColor[3] + normalizedColor[3], 16),
|
|
1559
|
+
alpha: _alpha
|
|
1560
|
+
};
|
|
1561
|
+
}
|
|
1562
|
+
var rgbMatched = rgbRegex.exec(normalizedColor);
|
|
1563
|
+
if (rgbMatched) {
|
|
1564
|
+
return {
|
|
1565
|
+
red: parseInt("" + rgbMatched[1], 10),
|
|
1566
|
+
green: parseInt("" + rgbMatched[2], 10),
|
|
1567
|
+
blue: parseInt("" + rgbMatched[3], 10)
|
|
1568
|
+
};
|
|
1569
|
+
}
|
|
1570
|
+
var rgbaMatched = rgbaRegex.exec(normalizedColor.substring(0, 50));
|
|
1571
|
+
if (rgbaMatched) {
|
|
1572
|
+
return {
|
|
1573
|
+
red: parseInt("" + rgbaMatched[1], 10),
|
|
1574
|
+
green: parseInt("" + rgbaMatched[2], 10),
|
|
1575
|
+
blue: parseInt("" + rgbaMatched[3], 10),
|
|
1576
|
+
alpha: parseFloat("" + rgbaMatched[4])
|
|
1577
|
+
};
|
|
1578
|
+
}
|
|
1579
|
+
var hslMatched = hslRegex.exec(normalizedColor);
|
|
1580
|
+
if (hslMatched) {
|
|
1581
|
+
var hue = parseInt("" + hslMatched[1], 10);
|
|
1582
|
+
var saturation = parseInt("" + hslMatched[2], 10) / 100;
|
|
1583
|
+
var lightness = parseInt("" + hslMatched[3], 10) / 100;
|
|
1584
|
+
var rgbColorString = "rgb(" + hslToRgb(hue, saturation, lightness) + ")";
|
|
1585
|
+
var hslRgbMatched = rgbRegex.exec(rgbColorString);
|
|
1586
|
+
if (!hslRgbMatched) {
|
|
1587
|
+
throw new PolishedError(4, normalizedColor, rgbColorString);
|
|
1588
|
+
}
|
|
1589
|
+
return {
|
|
1590
|
+
red: parseInt("" + hslRgbMatched[1], 10),
|
|
1591
|
+
green: parseInt("" + hslRgbMatched[2], 10),
|
|
1592
|
+
blue: parseInt("" + hslRgbMatched[3], 10)
|
|
1593
|
+
};
|
|
1594
|
+
}
|
|
1595
|
+
var hslaMatched = hslaRegex.exec(normalizedColor.substring(0, 50));
|
|
1596
|
+
if (hslaMatched) {
|
|
1597
|
+
var _hue = parseInt("" + hslaMatched[1], 10);
|
|
1598
|
+
var _saturation = parseInt("" + hslaMatched[2], 10) / 100;
|
|
1599
|
+
var _lightness = parseInt("" + hslaMatched[3], 10) / 100;
|
|
1600
|
+
var _rgbColorString = "rgb(" + hslToRgb(_hue, _saturation, _lightness) + ")";
|
|
1601
|
+
var _hslRgbMatched = rgbRegex.exec(_rgbColorString);
|
|
1602
|
+
if (!_hslRgbMatched) {
|
|
1603
|
+
throw new PolishedError(4, normalizedColor, _rgbColorString);
|
|
1604
|
+
}
|
|
1605
|
+
return {
|
|
1606
|
+
red: parseInt("" + _hslRgbMatched[1], 10),
|
|
1607
|
+
green: parseInt("" + _hslRgbMatched[2], 10),
|
|
1608
|
+
blue: parseInt("" + _hslRgbMatched[3], 10),
|
|
1609
|
+
alpha: parseFloat("" + hslaMatched[4])
|
|
1610
|
+
};
|
|
1611
|
+
}
|
|
1612
|
+
throw new PolishedError(5);
|
|
1613
|
+
}
|
|
1614
|
+
var reduceHexValue = function reduceHexValue2(value) {
|
|
1615
|
+
if (value.length === 7 && value[1] === value[2] && value[3] === value[4] && value[5] === value[6]) {
|
|
1616
|
+
return "#" + value[1] + value[3] + value[5];
|
|
1617
|
+
}
|
|
1618
|
+
return value;
|
|
1619
|
+
};
|
|
1620
|
+
function numberToHex(value) {
|
|
1621
|
+
var hex = value.toString(16);
|
|
1622
|
+
return hex.length === 1 ? "0" + hex : hex;
|
|
1623
|
+
}
|
|
1624
|
+
function rgb(value, green, blue) {
|
|
1625
|
+
if (typeof value === "number" && typeof green === "number" && typeof blue === "number") {
|
|
1626
|
+
return reduceHexValue("#" + numberToHex(value) + numberToHex(green) + numberToHex(blue));
|
|
1627
|
+
} else if (typeof value === "object" && green === void 0 && blue === void 0) {
|
|
1628
|
+
return reduceHexValue("#" + numberToHex(value.red) + numberToHex(value.green) + numberToHex(value.blue));
|
|
1629
|
+
}
|
|
1630
|
+
throw new PolishedError(6);
|
|
1631
|
+
}
|
|
1632
|
+
function rgba(firstValue, secondValue, thirdValue, fourthValue) {
|
|
1633
|
+
if (typeof firstValue === "string" && typeof secondValue === "number") {
|
|
1634
|
+
var rgbValue = parseToRgb(firstValue);
|
|
1635
|
+
return "rgba(" + rgbValue.red + "," + rgbValue.green + "," + rgbValue.blue + "," + secondValue + ")";
|
|
1636
|
+
} else if (typeof firstValue === "number" && typeof secondValue === "number" && typeof thirdValue === "number" && typeof fourthValue === "number") {
|
|
1637
|
+
return fourthValue >= 1 ? rgb(firstValue, secondValue, thirdValue) : "rgba(" + firstValue + "," + secondValue + "," + thirdValue + "," + fourthValue + ")";
|
|
1638
|
+
} else if (typeof firstValue === "object" && secondValue === void 0 && thirdValue === void 0 && fourthValue === void 0) {
|
|
1639
|
+
return firstValue.alpha >= 1 ? rgb(firstValue.red, firstValue.green, firstValue.blue) : "rgba(" + firstValue.red + "," + firstValue.green + "," + firstValue.blue + "," + firstValue.alpha + ")";
|
|
1640
|
+
}
|
|
1641
|
+
throw new PolishedError(7);
|
|
1642
|
+
}
|
|
1643
|
+
function curried(f, length, acc) {
|
|
1644
|
+
return function fn() {
|
|
1645
|
+
var combined = acc.concat(Array.prototype.slice.call(arguments));
|
|
1646
|
+
return combined.length >= length ? f.apply(this, combined) : curried(f, length, combined);
|
|
1647
|
+
};
|
|
1648
|
+
}
|
|
1649
|
+
function curry(f) {
|
|
1650
|
+
return curried(f, f.length, []);
|
|
1651
|
+
}
|
|
1652
|
+
function guard(lowerBoundary, upperBoundary, value) {
|
|
1653
|
+
return Math.max(lowerBoundary, Math.min(upperBoundary, value));
|
|
1654
|
+
}
|
|
1655
|
+
function transparentize(amount, color2) {
|
|
1656
|
+
if (color2 === "transparent") return color2;
|
|
1657
|
+
var parsedColor = parseToRgb(color2);
|
|
1658
|
+
var alpha = typeof parsedColor.alpha === "number" ? parsedColor.alpha : 1;
|
|
1659
|
+
var colorWithAlpha = _extends2({}, parsedColor, {
|
|
1660
|
+
alpha: guard(0, 1, +(alpha * 100 - parseFloat(amount) * 100).toFixed(2) / 100)
|
|
1661
|
+
});
|
|
1662
|
+
return rgba(colorWithAlpha);
|
|
1663
|
+
}
|
|
1664
|
+
var curriedTransparentize = /* @__PURE__ */ curry(transparentize);
|
|
1665
|
+
|
|
1666
|
+
// ../seeds-react-mixins/dist/esm/index.js
|
|
1667
|
+
var import_styled_components = require("styled-components");
|
|
1668
|
+
var import_seeds_react_theme = require("@sproutsocial/seeds-react-theme");
|
|
1669
|
+
var visuallyHidden = import_styled_components.css`
|
|
1670
|
+
position: absolute;
|
|
1671
|
+
width: 1px;
|
|
1672
|
+
height: 1px;
|
|
1673
|
+
padding: 0;
|
|
1674
|
+
margin: -1px;
|
|
1675
|
+
overflow: hidden;
|
|
1676
|
+
clip: rect(0 0 0 0);
|
|
1677
|
+
border: 0;
|
|
1678
|
+
`;
|
|
1679
|
+
var focusRing = import_styled_components.css`
|
|
1680
|
+
box-shadow: 0 0 0 1px ${import_seeds_react_theme.theme.colors.button.primary.background.base},
|
|
1681
|
+
0 0px 0px 4px
|
|
1682
|
+
${curriedTransparentize(0.7, import_seeds_react_theme.theme.colors.button.primary.background.base)};
|
|
1683
|
+
outline: none;
|
|
1684
|
+
|
|
1685
|
+
&::-moz-focus-inner {
|
|
1686
|
+
border: 0;
|
|
1687
|
+
}
|
|
1688
|
+
`;
|
|
1689
|
+
var pill = import_styled_components.css`
|
|
1690
|
+
min-width: ${import_seeds_react_theme.theme.space[600]};
|
|
1691
|
+
min-height: ${import_seeds_react_theme.theme.space[600]};
|
|
1692
|
+
padding: ${import_seeds_react_theme.theme.space[300]};
|
|
1693
|
+
border-radius: ${import_seeds_react_theme.theme.radii.pill};
|
|
1694
|
+
`;
|
|
1695
|
+
var disabled = import_styled_components.css`
|
|
1696
|
+
opacity: 0.4;
|
|
1697
|
+
pointer-events: none;
|
|
1698
|
+
`;
|
|
1699
|
+
|
|
1700
|
+
// src/styles.ts
|
|
1701
|
+
var StyledAccordionItem = (0, import_styled_components2.default)(RadixAccordion2.Item)``;
|
|
1702
|
+
var animations = import_styled_components2.css`
|
|
1120
1703
|
@keyframes slideDown {
|
|
1121
1704
|
from {
|
|
1122
1705
|
height: 0;
|
|
@@ -1135,7 +1718,7 @@ var animations = import_styled_components.css`
|
|
|
1135
1718
|
}
|
|
1136
1719
|
}
|
|
1137
1720
|
`;
|
|
1138
|
-
var StyledRadixAccordionTrigger = (0,
|
|
1721
|
+
var StyledRadixAccordionTrigger = (0, import_styled_components2.default)(
|
|
1139
1722
|
RadixAccordion2.Trigger
|
|
1140
1723
|
)`
|
|
1141
1724
|
padding: 0;
|
|
@@ -1147,10 +1730,9 @@ var StyledRadixAccordionTrigger = (0, import_styled_components.default)(
|
|
|
1147
1730
|
outline: none;
|
|
1148
1731
|
border: none;
|
|
1149
1732
|
background: transparent;
|
|
1150
|
-
${({ theme }) =>
|
|
1733
|
+
${({ theme: theme2 }) => theme2.typography[200]};
|
|
1151
1734
|
|
|
1152
1735
|
.triggerIcon {
|
|
1153
|
-
color: ${({ theme }) => theme.colors.icon.base};
|
|
1154
1736
|
transition: transform 300ms ease-in-out;
|
|
1155
1737
|
}
|
|
1156
1738
|
|
|
@@ -1161,12 +1743,16 @@ var StyledRadixAccordionTrigger = (0, import_styled_components.default)(
|
|
|
1161
1743
|
}
|
|
1162
1744
|
|
|
1163
1745
|
&[data-styled] {
|
|
1164
|
-
padding: ${({ theme }) =>
|
|
1746
|
+
padding: ${({ theme: theme2 }) => theme2.space[400]};
|
|
1747
|
+
}
|
|
1748
|
+
|
|
1749
|
+
&:focus {
|
|
1750
|
+
${focusRing}
|
|
1165
1751
|
}
|
|
1166
1752
|
|
|
1167
1753
|
${import_seeds_react_system_props2.COMMON}
|
|
1168
1754
|
`;
|
|
1169
|
-
var StyledRadixAccordionContent = (0,
|
|
1755
|
+
var StyledRadixAccordionContent = (0, import_styled_components2.default)(
|
|
1170
1756
|
RadixAccordion2.Content
|
|
1171
1757
|
)`
|
|
1172
1758
|
${animations}
|
|
@@ -1182,42 +1768,42 @@ var StyledRadixAccordionContent = (0, import_styled_components.default)(
|
|
|
1182
1768
|
}
|
|
1183
1769
|
|
|
1184
1770
|
&[data-styled="true"] {
|
|
1185
|
-
border-left: ${({ theme }) => `${
|
|
1186
|
-
border-right: ${({ theme }) => `${
|
|
1187
|
-
background: ${({ theme }) =>
|
|
1771
|
+
border-left: ${({ theme: theme2 }) => `${theme2.borderWidths[500]} solid ${theme2.colors.container.border.base}`};
|
|
1772
|
+
border-right: ${({ theme: theme2 }) => `${theme2.borderWidths[500]} solid ${theme2.colors.container.border.base}`};
|
|
1773
|
+
background: ${({ theme: theme2 }) => theme2.colors.container.background.base};
|
|
1188
1774
|
}
|
|
1189
1775
|
|
|
1190
1776
|
.accordion-item:last-child[data-state="open"] &[data-styled="true"],
|
|
1191
1777
|
.accordion-item:last-child[data-state="closed"] &[data-styled="true"] {
|
|
1192
|
-
border-bottom: ${({ theme }) => `${
|
|
1193
|
-
border-bottom-left-radius: ${({ theme }) =>
|
|
1194
|
-
border-bottom-right-radius: ${({ theme }) =>
|
|
1778
|
+
border-bottom: ${({ theme: theme2 }) => `${theme2.borderWidths[500]} solid ${theme2.colors.container.border.base}`};
|
|
1779
|
+
border-bottom-left-radius: ${({ theme: theme2 }) => theme2.radii.outer};
|
|
1780
|
+
border-bottom-right-radius: ${({ theme: theme2 }) => theme2.radii.outer};
|
|
1195
1781
|
}
|
|
1196
1782
|
`;
|
|
1197
|
-
var StyledAccordionArea =
|
|
1783
|
+
var StyledAccordionArea = import_styled_components2.default.div`
|
|
1198
1784
|
display: flex;
|
|
1199
1785
|
align-items: center;
|
|
1200
1786
|
justify-content: space-between;
|
|
1201
1787
|
width: 100%;
|
|
1202
1788
|
`;
|
|
1203
|
-
var FlexCenter =
|
|
1789
|
+
var FlexCenter = import_styled_components2.default.div`
|
|
1204
1790
|
display: flex;
|
|
1205
1791
|
align-items: center;
|
|
1206
1792
|
`;
|
|
1207
|
-
var ContentContainer =
|
|
1208
|
-
color: ${({ theme }) =>
|
|
1793
|
+
var ContentContainer = import_styled_components2.default.div`
|
|
1794
|
+
color: ${({ theme: theme2 }) => theme2.colors.text.body};
|
|
1209
1795
|
background: transparent;
|
|
1210
|
-
font-family: ${({ theme }) =>
|
|
1796
|
+
font-family: ${({ theme: theme2 }) => theme2.fontFamily};
|
|
1211
1797
|
|
|
1212
1798
|
&[data-styled="true"] {
|
|
1213
|
-
padding: ${({ theme }) =>
|
|
1214
|
-
${({ theme }) =>
|
|
1799
|
+
padding: ${({ theme: theme2 }) => theme2.space[400]};
|
|
1800
|
+
${({ theme: theme2 }) => theme2.typography[200]};
|
|
1215
1801
|
}
|
|
1216
1802
|
|
|
1217
1803
|
.accordion-item:last-child[data-state="open"] &[data-styled="true"],
|
|
1218
1804
|
.accordion-item:last-child[data-state="closed"] &[data-styled="true"] {
|
|
1219
|
-
border-bottom-left-radius: ${({ theme }) =>
|
|
1220
|
-
border-bottom-right-radius: ${({ theme }) =>
|
|
1805
|
+
border-bottom-left-radius: ${({ theme: theme2 }) => theme2.radii.outer};
|
|
1806
|
+
border-bottom-right-radius: ${({ theme: theme2 }) => theme2.radii.outer};
|
|
1221
1807
|
}
|
|
1222
1808
|
|
|
1223
1809
|
${import_seeds_react_system_props2.COMMON}
|
|
@@ -1226,39 +1812,39 @@ var ContentContainer = import_styled_components.default.div`
|
|
|
1226
1812
|
${import_seeds_react_system_props2.LAYOUT}
|
|
1227
1813
|
${import_seeds_react_system_props2.FLEXBOX}
|
|
1228
1814
|
`;
|
|
1229
|
-
var TriggerContainer =
|
|
1815
|
+
var TriggerContainer = import_styled_components2.default.div`
|
|
1230
1816
|
display: flex;
|
|
1231
1817
|
align-items: center;
|
|
1232
1818
|
|
|
1233
|
-
|
|
1234
|
-
border-top: ${
|
|
1235
|
-
border-left: ${
|
|
1236
|
-
border-right: ${
|
|
1237
|
-
background: ${
|
|
1238
|
-
}
|
|
1819
|
+
${({ $styled, theme: theme2 }) => $styled && `
|
|
1820
|
+
border-top: ${theme2.borderWidths[500]} solid ${theme2.colors.container.border.base};
|
|
1821
|
+
border-left: ${theme2.borderWidths[500]} solid ${theme2.colors.container.border.base};
|
|
1822
|
+
border-right: ${theme2.borderWidths[500]} solid ${theme2.colors.container.border.base};
|
|
1823
|
+
background: ${theme2.colors.container.background.base};
|
|
1824
|
+
`}
|
|
1239
1825
|
|
|
1240
1826
|
.accordion-item[data-state="open"] &[data-styled="true"] {
|
|
1241
|
-
border-bottom: ${({ theme }) => `${
|
|
1827
|
+
border-bottom: ${({ theme: theme2 }) => `${theme2.borderWidths[500]} solid ${theme2.colors.container.border.base}`};
|
|
1242
1828
|
}
|
|
1243
1829
|
|
|
1244
1830
|
.accordion-item[data-state="closed"] &[data-styled="true"] {
|
|
1245
1831
|
transition: border-bottom-color 0s ease-in-out 0.3s;
|
|
1246
|
-
border-bottom: ${({ theme }) => `${
|
|
1832
|
+
border-bottom: ${({ theme: theme2 }) => `${theme2.borderWidths[500]} solid transparent`};
|
|
1247
1833
|
}
|
|
1248
1834
|
|
|
1249
1835
|
.accordion-item:first-child &[data-styled="true"] {
|
|
1250
|
-
border-top-left-radius: ${({ theme }) =>
|
|
1251
|
-
border-top-right-radius: ${({ theme }) =>
|
|
1836
|
+
border-top-left-radius: ${({ theme: theme2 }) => theme2.radii.outer};
|
|
1837
|
+
border-top-right-radius: ${({ theme: theme2 }) => theme2.radii.outer};
|
|
1252
1838
|
}
|
|
1253
1839
|
|
|
1254
1840
|
.accordion-item:last-child &[data-styled="true"] {
|
|
1255
|
-
border-bottom: ${({ theme }) => `${
|
|
1841
|
+
border-bottom: ${({ theme: theme2 }) => `${theme2.borderWidths[500]} solid ${theme2.colors.container.border.base}`};
|
|
1256
1842
|
}
|
|
1257
1843
|
|
|
1258
1844
|
.accordion-item:last-child[data-state="closed"] &[data-styled="true"] {
|
|
1259
1845
|
transition: border-radius 0s linear 0.3s;
|
|
1260
|
-
border-bottom-left-radius: ${({ theme }) =>
|
|
1261
|
-
border-bottom-right-radius: ${({ theme }) =>
|
|
1846
|
+
border-bottom-left-radius: ${({ theme: theme2 }) => theme2.radii.outer};
|
|
1847
|
+
border-bottom-right-radius: ${({ theme: theme2 }) => theme2.radii.outer};
|
|
1262
1848
|
}
|
|
1263
1849
|
|
|
1264
1850
|
${import_seeds_react_system_props2.COMMON}
|
|
@@ -1266,14 +1852,14 @@ var TriggerContainer = import_styled_components.default.div`
|
|
|
1266
1852
|
${import_seeds_react_system_props2.LAYOUT}
|
|
1267
1853
|
${import_seeds_react_system_props2.FLEXBOX}
|
|
1268
1854
|
`;
|
|
1269
|
-
var TitleStyles =
|
|
1855
|
+
var TitleStyles = import_styled_components2.default.h4`
|
|
1270
1856
|
margin: 0;
|
|
1271
1857
|
font-weight: normal;
|
|
1272
1858
|
|
|
1273
1859
|
&[data-styled="true"] {
|
|
1274
|
-
font-size: ${({ theme }) =>
|
|
1275
|
-
font-weight: ${({ theme }) =>
|
|
1276
|
-
color: ${({ theme }) =>
|
|
1860
|
+
font-size: ${({ theme: theme2 }) => theme2.fontSizes[200]};
|
|
1861
|
+
font-weight: ${({ theme: theme2 }) => theme2.fontWeights.semibold};
|
|
1862
|
+
color: ${({ theme: theme2 }) => theme2.colors.text.headline};
|
|
1277
1863
|
}
|
|
1278
1864
|
|
|
1279
1865
|
${import_seeds_react_system_props2.COMMON}
|
|
@@ -1368,6 +1954,7 @@ var AccordionTrigger = ({
|
|
|
1368
1954
|
textAlign: textAlign2
|
|
1369
1955
|
}).filter(([_, value]) => value != null)
|
|
1370
1956
|
);
|
|
1957
|
+
const shouldRenderActionsBlock = Boolean(overflowMenu || validatedActions);
|
|
1371
1958
|
const renderedOverflowMenu = overflowMenu && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
1372
1959
|
import_seeds_react_menu2.ActionMenu,
|
|
1373
1960
|
{
|
|
@@ -1376,7 +1963,14 @@ var AccordionTrigger = ({
|
|
|
1376
1963
|
{
|
|
1377
1964
|
"aria-label": overflowMenu["aria-label"],
|
|
1378
1965
|
appearance: "unstyled",
|
|
1379
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
1966
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
1967
|
+
import_seeds_react_icon3.Icon,
|
|
1968
|
+
{
|
|
1969
|
+
name: "ellipsis-horizontal-outline",
|
|
1970
|
+
"aria-hidden": "true",
|
|
1971
|
+
color: color2
|
|
1972
|
+
}
|
|
1973
|
+
)
|
|
1380
1974
|
}
|
|
1381
1975
|
),
|
|
1382
1976
|
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_seeds_react_menu2.MenuContent, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_seeds_react_menu2.MenuGroup, { id: "overflow-actions", children: overflowMenu.items.map((item, index) => {
|
|
@@ -1387,10 +1981,19 @@ var AccordionTrigger = ({
|
|
|
1387
1981
|
id: id || `overflow-item-${index}`,
|
|
1388
1982
|
onClick,
|
|
1389
1983
|
...menuItemProps,
|
|
1390
|
-
children: iconName ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
1391
|
-
|
|
1392
|
-
|
|
1393
|
-
|
|
1984
|
+
children: iconName ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
1985
|
+
import_seeds_react_box.Box,
|
|
1986
|
+
{
|
|
1987
|
+
display: "flex",
|
|
1988
|
+
alignItems: "center",
|
|
1989
|
+
gap: "300",
|
|
1990
|
+
color: color2,
|
|
1991
|
+
children: [
|
|
1992
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_seeds_react_icon3.Icon, { name: iconName, color: color2 }),
|
|
1993
|
+
children2
|
|
1994
|
+
]
|
|
1995
|
+
}
|
|
1996
|
+
) : children2
|
|
1394
1997
|
},
|
|
1395
1998
|
id || `overflow-item-${index}`
|
|
1396
1999
|
);
|
|
@@ -1402,11 +2005,11 @@ var AccordionTrigger = ({
|
|
|
1402
2005
|
{
|
|
1403
2006
|
onClick: action.onClick,
|
|
1404
2007
|
"aria-label": action["aria-label"],
|
|
1405
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_seeds_react_icon3.Icon, { name: action.iconName, "aria-hidden": "true" })
|
|
2008
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_seeds_react_icon3.Icon, { name: action.iconName, color: color2, "aria-hidden": "true" })
|
|
1406
2009
|
},
|
|
1407
2010
|
`${action.iconName}-${index}`
|
|
1408
2011
|
)) });
|
|
1409
|
-
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(TriggerContainer, { "data-styled": styled2, ...triggerProps, children: [
|
|
2012
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(TriggerContainer, { "data-styled": styled2, $styled: styled2, ...triggerProps, children: [
|
|
1410
2013
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(StyledRadixAccordionTrigger, { "data-styled": styled2, ...spacingProps, children: triggerPosition === "right" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(StyledAccordionArea, { children: [
|
|
1411
2014
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(FlexCenter, { children: [
|
|
1412
2015
|
leftSlot,
|
|
@@ -1422,7 +2025,7 @@ var AccordionTrigger = ({
|
|
|
1422
2025
|
] }),
|
|
1423
2026
|
rightSlot
|
|
1424
2027
|
] }) }),
|
|
1425
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_seeds_react_box.Box, { mr: 300, display: "flex", children: [
|
|
2028
|
+
shouldRenderActionsBlock && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_seeds_react_box.Box, { mr: 300, display: "flex", children: [
|
|
1426
2029
|
renderedOverflowMenu,
|
|
1427
2030
|
renderedRelatedActions
|
|
1428
2031
|
] })
|