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