@dust-tt/sparkle 0.1.92 → 0.1.94

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.
@@ -1,6 +1,6 @@
1
- import React, { ReactNode } from "react";
1
+ import React from "react";
2
2
  type AvatarProps = {
3
- size: "xs" | "sm" | "md" | "lg" | "xl" | "auto";
3
+ size?: "xs" | "sm" | "md" | "lg" | "xl" | "auto";
4
4
  name?: string;
5
5
  visual?: string | React.ReactNode;
6
6
  clickable?: boolean;
@@ -10,11 +10,13 @@ type AvatarProps = {
10
10
  };
11
11
  export declare function Avatar({ size, name, visual, onClick, clickable, busy, isRounded, }: AvatarProps): React.JSX.Element;
12
12
  export declare namespace Avatar {
13
- var Stack: ({ children, nbMoreItems, size, }: AvatarStackProps) => React.JSX.Element;
13
+ var Stack: ({ children, nbMoreItems, size, isRounded, hasMagnifier, }: AvatarStackProps) => React.JSX.Element;
14
14
  }
15
15
  interface AvatarStackProps {
16
- children: ReactNode;
16
+ children: React.ReactElement<AvatarProps> | React.ReactElement<AvatarProps>[];
17
17
  nbMoreItems?: number;
18
- size?: "sm" | "md";
18
+ size?: "xs" | "sm" | "md";
19
+ isRounded?: boolean;
20
+ hasMagnifier?: boolean;
19
21
  }
20
22
  export {};
package/dist/esm/index.js CHANGED
@@ -102,7 +102,7 @@ var SvgArrowDownOnSquare$1 = function (props) { return (React.createElement("svg
102
102
  React.createElement("path", { fill: "currentColor", d: "M13.5 10H18l-6 6-6-6h4.5V3h3v7ZM4 19h16v-7h2v8a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-8h2v7Z" }))); };
103
103
 
104
104
  var SvgArrowPath$1 = function (props) { return (React.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24" }, props),
105
- React.createElement("path", { fill: "#000", d: "M12 5.5A6.5 6.5 0 0 0 5.5 12h-3a9.5 9.5 0 0 1 16.218-6.718L21 3v6.5h-6.5l2.096-2.096A6.48 6.48 0 0 0 12 5.5ZM7.404 16.596 9.5 14.5H3V21l2.282-2.282A9.5 9.5 0 0 0 21.5 12h-3a6.5 6.5 0 0 1-11.096 4.596Z" }))); };
105
+ React.createElement("path", { fill: "currentColor", d: "M12 5.5A6.5 6.5 0 0 0 5.5 12h-3a9.5 9.5 0 0 1 16.218-6.718L21 3v6.5h-6.5l2.096-2.096A6.48 6.48 0 0 0 12 5.5ZM7.404 16.596 9.5 14.5H3V21l2.282-2.282A9.5 9.5 0 0 0 21.5 12h-3a6.5 6.5 0 0 1-11.096 4.596Z" }))); };
106
106
 
107
107
  var SvgArrowUpOnSquare$1 = function (props) { return (React.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24" }, props),
108
108
  React.createElement("path", { fill: "currentColor", d: "m6 8 6-6 6 6h-4.5v7h-3V8H6Z" }),
@@ -149,11 +149,11 @@ var SvgChevronUpDown$1 = function (props) { return (React.createElement("svg", _
149
149
 
150
150
  var SvgClipboard$1 = function (props) { return (React.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24" }, props),
151
151
  React.createElement("path", { fill: "currentColor", d: "M17 21v-3H7a1 1 0 0 1-1-1V7H3a1 1 0 0 0-1 1v13a1 1 0 0 0 1 1h13a1 1 0 0 0 1-1Z" }),
152
- React.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M7 16a1 1 0 0 0 1 1h12.99c.558 0 1.007-.451 1.007-1.008L22 3.008C22 2.45 21.549 2 20.992 2H8.008C7.45 2 7 2.451 7 3.007V16ZM20 4l-.003 11H9V4h11Z", clipRule: "evenodd" }))); };
152
+ React.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M7 16a1 1 0 0 0 1 1h12.99c.558 0 1.007-.451 1.007-1.008L22 3.008C22 2.45 21.549 2 20.992 2H8.008C7.45 2 7 2.451 7 3.007V16ZM19.502 4.5l-.002 10h-10v-10h10.002Z", clipRule: "evenodd" }))); };
153
153
 
154
154
  var SvgClipboardCheck$1 = function (props) { return (React.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24" }, props),
155
- React.createElement("path", { fill: "currentColor", d: "M14.5 9.5 18 6l1.5 1.5-5 5L11 9l1.5-1.5 2 2Z" }),
156
- React.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M8 17a1 1 0 0 1-1-1V3.008C7 2.45 7.449 2 8.007 2h12.986C21.549 2 22 2.449 22 3.007l-.003 12.985c0 .557-.449 1.008-1.008 1.008H8Zm11.997-2L20 4H9v11h10.997Z", clipRule: "evenodd" }),
155
+ React.createElement("path", { fill: "currentColor", d: "M14 9.5 17.5 6 19 7.5l-5 5L10.5 9 12 7.5l2 2Z" }),
156
+ React.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M8 17a1 1 0 0 1-1-1V3.008C7 2.45 7.449 2 8.007 2h12.986C21.549 2 22 2.449 22 3.007l-.003 12.985c0 .557-.449 1.008-1.008 1.008H8Zm11.5-2.5.002-10H9.5v10h10Z", clipRule: "evenodd" }),
157
157
  React.createElement("path", { fill: "currentColor", d: "M17 18v3a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h3v10a1 1 0 0 0 1 1h10Z" }))); };
158
158
 
159
159
  var SvgClock$1 = function (props) { return (React.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24" }, props),
@@ -252,7 +252,7 @@ var SvgPaperAirplane$1 = function (props) { return (React.createElement("svg", _
252
252
  React.createElement("path", { fill: "currentColor", d: "M1.946 9.316c-.522-.175-.526-.456.011-.635L21.043 2.32c.529-.176.832.12.684.638l-5.453 19.086c-.151.529-.456.547-.68.045L12 14l6-8-8 6-8.054-2.684Z" }))); };
253
253
 
254
254
  var SvgPause$1 = function (props) { return (React.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24" }, props),
255
- React.createElement("path", { fill: "#000", d: "M6 5h4v14H6V5Zm8 0h4v14h-4V5Z" }))); };
255
+ React.createElement("path", { fill: "currentColor", d: "M6 5h4v14H6V5Zm8 0h4v14h-4V5Z" }))); };
256
256
 
257
257
  var SvgPencilSquare$1 = function (props) { return (React.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24" }, props),
258
258
  React.createElement("path", { fill: "currentColor", d: "M7.243 17.996H3v-4.242L14.435 2.319a1 1 0 0 1 1.414 0l2.829 2.828a1 1 0 0 1 0 1.414L7.243 17.996Zm-4.243 2h18v2H3v-2Z" }))); };
@@ -261,7 +261,7 @@ var SvgPlanet$1 = function (props) { return (React.createElement("svg", __assign
261
261
  React.createElement("path", { fill: "currentColor", d: "M5.322 5.966A9.169 9.169 0 0 1 7.2 4.386a4.482 4.482 0 0 0-.844-.157c-.572-.043-.823.093-.93.2-.106.107-.242.357-.2.93.015.183.047.386.097.607Zm15.404 8.245c.061.123.12.245.177.366.476 1.02.791 2.018.859 2.914.067.891-.106 1.82-.78 2.494-.674.674-1.603.847-2.495.78-.78-.06-1.637-.306-2.52-.683h-.003a13.258 13.258 0 0 1-.462-.207c-2.033-.962-4.359-2.654-6.542-4.838-2.181-2.181-3.872-4.505-4.835-6.536-.073-.155-.143-.31-.209-.463l.001-.002c-.379-.885-.626-1.745-.685-2.527-.068-.892.105-1.82.78-2.495.673-.674 1.602-.847 2.494-.78.896.068 1.892.383 2.913.86.124.057.248.117.373.18a8.996 8.996 0 0 1 8.572 2.362 8.996 8.996 0 0 1 2.362 8.575Zm-1.113 2.593a9.035 9.035 0 0 1-1.576 1.871c.218.05.419.082.6.095.573.044.824-.092.93-.2.108-.106.244-.357.2-.93a4.468 4.468 0 0 0-.154-.836Zm-13.977 1.56a8.993 8.993 0 0 1-2.417-8.341c1.082 1.98 2.705 4.1 4.68 6.075 1.977 1.977 4.098 3.6 6.08 4.683a8.993 8.993 0 0 1-8.343-2.417Z" }))); };
262
262
 
263
263
  var SvgPlay$1 = function (props) { return (React.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24" }, props),
264
- React.createElement("path", { fill: "#000", d: "M19.376 12.416 8.777 19.482A.5.5 0 0 1 8 19.066V4.934a.5.5 0 0 1 .777-.416l10.599 7.066a.5.5 0 0 1 0 .832Z" }))); };
264
+ React.createElement("path", { fill: "currentColor", d: "M19.376 12.416 8.777 19.482A.5.5 0 0 1 8 19.066V4.934a.5.5 0 0 1 .777-.416l10.599 7.066a.5.5 0 0 1 0 .832Z" }))); };
265
265
 
266
266
  var SvgPlus$1 = function (props) { return (React.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24" }, props),
267
267
  React.createElement("path", { fill: "currentColor", d: "M10.5 10.5V5h3v5.5H19v3h-5.5V19h-3v-5.5H5v-3h5.5Z" }))); };
@@ -288,7 +288,7 @@ var SvgSquare3Stack3D$1 = function (props) { return (React.createElement("svg",
288
288
  React.createElement("path", { fill: "currentColor", d: "m20.083 10.5 1.202.721a.5.5 0 0 1 0 .858L12 17.649l-9.285-5.57a.5.5 0 0 1 0-.858l1.202-.721L12 15.35l8.083-4.85Zm0 4.7 1.202.721a.5.5 0 0 1 0 .858l-8.77 5.262a1 1 0 0 1-1.03 0l-8.77-5.262a.5.5 0 0 1 0-.858l1.202-.721L12 20.05l8.083-4.85ZM12.514 1.309l8.771 5.262a.5.5 0 0 1 0 .858L12 12.999 2.715 7.43a.5.5 0 0 1 0-.858l8.77-5.262a1 1 0 0 1 1.03 0Z" }))); };
289
289
 
290
290
  var SvgStop$1 = function (props) { return (React.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24" }, props),
291
- React.createElement("path", { fill: "#000", d: "M6 5h12a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Z" }))); };
291
+ React.createElement("path", { fill: "currentColor", d: "M6 5h12a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Z" }))); };
292
292
 
293
293
  var SvgTestTube$1 = function (props) { return (React.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24" }, props),
294
294
  React.createElement("path", { fill: "currentColor", d: "M17 2v2h-1v14a4 4 0 0 1-8 0V4H7V2h10Zm-4 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm-2-3a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm3-8h-4v4h4V4Z" }))); };
@@ -297,7 +297,7 @@ var SvgTrash$1 = function (props) { return (React.createElement("svg", __assign(
297
297
  React.createElement("path", { fill: "currentColor", d: "M17 5h4v2h-1v14a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7H3V5h4V3a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v2Zm-8 5v9h2v-9H9Zm4 0v9h2v-9h-2ZM9 4v1h6V4H9Z" }))); };
298
298
 
299
299
  var SvgUser$1 = function (props) { return (React.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24" }, props),
300
- React.createElement("path", { fill: "#000", d: "M12 13a5 5 0 1 0 0-10 5 5 0 0 0 0 10ZM12 14a8 8 0 0 0-8 8h16a8 8 0 0 0-8-8Z" }))); };
300
+ React.createElement("path", { fill: "currentColor", d: "M12 13a5 5 0 1 0 0-10 5 5 0 0 0 0 10ZM12 14a8 8 0 0 0-8 8h16a8 8 0 0 0-8-8Z" }))); };
301
301
 
302
302
  var SvgUserGroup$1 = function (props) { return (React.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24" }, props),
303
303
  React.createElement("path", { fill: "#0F172A", d: "M17 8A5 5 0 1 1 7 8a5 5 0 0 1 10 0ZM4 22a8 8 0 1 1 16 0H4ZM5.223 6.24A7.012 7.012 0 0 0 5 8c0 1.936.786 3.689 2.057 4.956A3.5 3.5 0 0 1 5.224 6.24ZM19 8a6.978 6.978 0 0 1-2.056 4.956 3.5 3.5 0 0 0 1.834-6.716c.145.563.222 1.152.222 1.76ZM.174 22a6.5 6.5 0 0 1 5.797-7.979A9.984 9.984 0 0 0 2 22H.174ZM22 22h1.826a6.5 6.5 0 0 0-5.797-7.979A9.984 9.984 0 0 1 22 22Z" }))); };
@@ -411,13 +411,14 @@ function Avatar(_a) {
411
411
  size === "auto" && React__default.createElement("div", { style: { paddingBottom: "100%" } }),
412
412
  typeof visual === "string" ? (React__default.createElement("img", { src: visual, alt: name, className: classNames(sizeClasses$4[size], "s-h-full s-w-full s-object-cover s-object-center") })) : visual ? (visual) : name ? (React__default.createElement("span", { className: classNames(getTextVariant(name), textSize[size], "s-select-none s-font-medium") }, /\+/.test(name) ? name : name[0].toUpperCase())) : (React__default.createElement(SvgUser$1, { className: "s-h-1/2 s-w-1/2 s-opacity-20" }))));
413
413
  }
414
- var SIZE_SETTINGS = {
415
- sm: { widthHovered: "44px", width: "32px" },
416
- md: { widthHovered: "52px", width: "40px" }, // Adjust these values as needed for the 'md' size
414
+ var sizeClassesPx = {
415
+ xs: 24,
416
+ sm: 32,
417
+ md: 40,
417
418
  };
418
419
  Avatar.Stack = function (_a) {
419
- var children = _a.children, nbMoreItems = _a.nbMoreItems, _b = _a.size, size = _b === void 0 ? "sm" : _b;
420
- var _c = __read(useState(false), 2), isHovered = _c[0], setIsHovered = _c[1];
420
+ var children = _a.children, nbMoreItems = _a.nbMoreItems, _b = _a.size, size = _b === void 0 ? "sm" : _b, _c = _a.isRounded, isRounded = _c === void 0 ? false : _c, _d = _a.hasMagnifier, hasMagnifier = _d === void 0 ? true : _d;
421
+ var _e = __read(useState(false), 2), isHovered = _e[0], setIsHovered = _e[1];
421
422
  var childrenArray = React__default.Children.toArray(children);
422
423
  var handleMouseEnter = function () {
423
424
  if (childrenArray.length > 1) {
@@ -429,21 +430,43 @@ Avatar.Stack = function (_a) {
429
430
  setIsHovered(false);
430
431
  }
431
432
  };
432
- var sizeSetting = SIZE_SETTINGS[size];
433
+ var sizeSetting = {
434
+ marginLeft: 0,
435
+ widthHovered: sizeClassesPx[size] * 0.6,
436
+ width: sizeClassesPx[size] * 0.25,
437
+ };
438
+ var collapsedWidth = sizeSetting.width * (childrenArray.length + Number(Boolean(nbMoreItems))) +
439
+ (sizeClassesPx[size] - sizeSetting.width);
440
+ var openedWidth = sizeSetting.widthHovered *
441
+ (childrenArray.length + Number(Boolean(nbMoreItems))) +
442
+ (sizeClassesPx[size] - sizeSetting.widthHovered);
443
+ var transitionSettings = "width 200ms ease-out";
433
444
  return (React__default.createElement("div", { className: "s-flex s-flex-row", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: {
434
- marginLeft: "20px",
445
+ width: "".concat(isHovered ? openedWidth : collapsedWidth, "px"),
446
+ transition: transitionSettings,
435
447
  } },
436
- childrenArray.map(function (child, i) { return (React__default.createElement("div", { key: i, className: "s-cursor-pointer s-drop-shadow-md", style: {
437
- width: isHovered ? sizeSetting.widthHovered : sizeSetting.width,
438
- transition: "width 200ms ease-out",
439
- marginLeft: "-20px",
440
- } }, child)); }),
448
+ childrenArray.map(function (child, i) {
449
+ if (React__default.isValidElement(child)) {
450
+ return (React__default.createElement("div", { key: i, className: "s-cursor-pointer s-drop-shadow-md", style: {
451
+ width: isHovered ? sizeSetting.widthHovered : sizeSetting.width,
452
+ transition: transitionSettings,
453
+ } }, hasMagnifier ? (React__default.createElement("div", { style: {
454
+ transform: "scale(".concat(1 - (childrenArray.length - i) * 0.06, ")"),
455
+ } }, React__default.cloneElement(child, {
456
+ size: size,
457
+ isRounded: isRounded,
458
+ }))) : (React__default.createElement(React__default.Fragment, null, React__default.cloneElement(child, {
459
+ size: size,
460
+ isRounded: isRounded,
461
+ })))));
462
+ }
463
+ return null;
464
+ }),
441
465
  Boolean(nbMoreItems) && (React__default.createElement("div", { className: "s-cursor-pointer s-drop-shadow-md", style: {
442
466
  width: isHovered ? sizeSetting.widthHovered : sizeSetting.width,
443
- transition: "width 200ms ease-out",
444
- marginLeft: "-20px",
467
+ transition: transitionSettings,
445
468
  } },
446
- React__default.createElement(Avatar, { size: size, name: "+" + String(Number(nbMoreItems) < 10 ? nbMoreItems : ""), isRounded: true, clickable: true })))));
469
+ React__default.createElement(Avatar, { size: size, name: "+" + String(Number(nbMoreItems) < 10 ? nbMoreItems : ""), isRounded: isRounded, clickable: true })))));
447
470
  };
448
471
 
449
472
  var IconSizes = {
@@ -485,7 +508,9 @@ function Tooltip(_a) {
485
508
  var hiddenOnMobileClasses = "s-hidden sm:s-block";
486
509
  var tooltipCenterClasses = "s-left-1/2 -s-translate-x-1/2";
487
510
  var tooltipPositionClasses = position === "above" ? "s-bottom-full s-mb-2" : "s-top-full s-mt-2";
488
- var labelClasses = "s-whitespace-nowrap";
511
+ // if tooltip text is too long we need to wrap it
512
+ var labelLength = (label === null || label === void 0 ? void 0 : label.length) || 0;
513
+ var labelClasses = labelLength > 80 ? "w-[38em]" : "s-whitespace-nowrap";
489
514
  return (React__default.createElement("div", { onMouseEnter: handleMouseOver, onMouseLeave: handleMouseLeave, className: "s-relative s-inline-block" },
490
515
  children,
491
516
  React__default.createElement("div", { className: classNames("".concat(isHovered ? visibleClasses : hiddenClasses), baseClasses, hiddenOnMobileClasses, tooltipPositionClasses, tooltipCenterClasses, contentChildren ? "" : labelClasses), onAnimationEnd: function () { return setIsHovered(false); } }, contentChildren || label)));
@@ -32462,7 +32487,7 @@ var SvgArrowDownOnSquare = function (props) { return (React.createElement("svg",
32462
32487
  React.createElement("path", { fill: "currentColor", d: "M13 10h4l-5 5-5-5h4V3h2v7Zm-9 9h16v-7h2v8a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-8h2v7Z" }))); };
32463
32488
 
32464
32489
  var SvgArrowPath = function (props) { return (React.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24" }, props),
32465
- React.createElement("path", { fill: "#000", d: "M12 5a7 7 0 0 0-6.93 8H3.056a9 9 0 0 1 15.554-7.11L20.5 4v5h-5l1.694-1.693A6.982 6.982 0 0 0 12 5ZM6.807 16.694 8.5 15h-5v5l1.89-1.89A9 9 0 0 0 20.945 11H18.93a7 7 0 0 1-12.123 5.694Z" }))); };
32490
+ React.createElement("path", { fill: "currentColor", d: "M12 5a7 7 0 0 0-6.93 8H3.056a9 9 0 0 1 15.554-7.11L20.5 4v5h-5l1.694-1.693A6.982 6.982 0 0 0 12 5ZM6.807 16.694 8.5 15h-5v5l1.89-1.89A9 9 0 0 0 20.945 11H18.93a7 7 0 0 1-12.123 5.694Z" }))); };
32466
32491
 
32467
32492
  var SvgArrowUpOnSquare = function (props) { return (React.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24" }, props),
32468
32493
  React.createElement("path", { fill: "currentColor", d: "m7 8 5-5 5 5h-4v7h-2V8H7Z" }),
@@ -32527,8 +32552,8 @@ var SvgCloudArrowLeftRight = function (props) { return (React.createElement("svg
32527
32552
  React.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M23 14.5a6.5 6.5 0 0 1-6.5 6.5h-7a8.5 8.5 0 1 1 7.215-12.997A6.5 6.5 0 0 1 23 14.5ZM9.5 6a6.5 6.5 0 0 0 0 13h7a4.5 4.5 0 1 0-.957-8.898A6.502 6.502 0 0 0 9.5 6Z", clipRule: "evenodd" }))); };
32528
32553
 
32529
32554
  var SvgCloudX = function (props) { return (React.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24" }, props),
32530
- React.createElement("path", { fill: "#000", d: "m8.793 11.707 1.793 1.793-1.793 1.793 1.414 1.414L12 14.914l1.793 1.793 1.414-1.414-1.793-1.793 1.793-1.793-1.414-1.414L12 12.086l-1.793-1.793-1.414 1.414Z" }),
32531
- React.createElement("path", { fill: "#000", fillRule: "evenodd", d: "M16.5 21h-7a8.5 8.5 0 1 1 7.215-12.997A6.5 6.5 0 0 1 16.5 21Zm-7-15a6.5 6.5 0 0 0 0 13h7a4.5 4.5 0 1 0-.957-8.898A6.502 6.502 0 0 0 9.5 6Z", clipRule: "evenodd" }))); };
32555
+ React.createElement("path", { fill: "currentColor", d: "m8.793 11.707 1.793 1.793-1.793 1.793 1.414 1.414L12 14.914l1.793 1.793 1.414-1.414-1.793-1.793 1.793-1.793-1.414-1.414L12 12.086l-1.793-1.793-1.414 1.414Z" }),
32556
+ React.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M16.5 21h-7a8.5 8.5 0 1 1 7.215-12.997A6.5 6.5 0 0 1 16.5 21Zm-7-15a6.5 6.5 0 0 0 0 13h7a4.5 4.5 0 1 0-.957-8.898A6.502 6.502 0 0 0 9.5 6Z", clipRule: "evenodd" }))); };
32532
32557
 
32533
32558
  var SvgCog6Tooth = function (props) { return (React.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24" }, props),
32534
32559
  React.createElement("path", { fill: "currentColor", d: "m12 1 9.5 5.5v11L12 23l-9.5-5.5v-11L12 1Zm0 2.311L4.5 7.653v8.694l7.5 4.342 7.5-4.342V7.653L12 3.311ZM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" }))); };
@@ -32612,7 +32637,7 @@ var SvgPaperAirplane = function (props) { return (React.createElement("svg", __a
32612
32637
  React.createElement("path", { fill: "currentColor", d: "m21.726 2.957-5.453 19.086c-.15.529-.475.553-.717.07L11 13 1.923 9.37c-.51-.205-.504-.51.034-.689L21.043 2.32c.528-.176.832.12.683.638Zm-2.69 2.14L6.811 9.17 11 10.886 15 9l-1.753 4 2.242 4.507 3.546-12.41Z" }))); };
32613
32638
 
32614
32639
  var SvgPause = function (props) { return (React.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24" }, props),
32615
- React.createElement("path", { fill: "#000", d: "M7 5h2v14H7V5Zm8 0h2v14h-2V5Z" }))); };
32640
+ React.createElement("path", { fill: "currentColor", d: "M7 5h2v14H7V5Zm8 0h2v14h-2V5Z" }))); };
32616
32641
 
32617
32642
  var SvgPencilSquare = function (props) { return (React.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24" }, props),
32618
32643
  React.createElement("path", { fill: "currentColor", d: "M6.414 15.89 16.556 5.748l-1.414-1.414L5 14.476v1.414h1.414Zm.829 2H3v-4.243L14.435 2.212a1 1 0 0 1 1.414 0l2.829 2.829a1 1 0 0 1 0 1.414L7.243 17.89ZM3 19.89h18v2H3v-2Z" }))); };
@@ -32621,7 +32646,7 @@ var SvgPlanet = function (props) { return (React.createElement("svg", __assign({
32621
32646
  React.createElement("path", { fill: "currentColor", d: "M3.918 8.037A9 9 0 0 0 15.966 20.08c.873.373 1.719.618 2.49.681.902.074 1.844-.096 2.526-.777.752-.752.88-1.816.746-2.812-.123-.91-.48-1.92-1.002-2.962A9 9 0 0 0 9.791 3.273c-1.044-.523-2.055-.881-2.965-1.005-.997-.135-2.062-.007-2.815.746-.682.683-.851 1.626-.777 2.528.064.773.31 1.62.684 2.495Zm1.404-2.071a4.135 4.135 0 0 1-.095-.587c-.048-.587.09-.843.198-.95.12-.12.423-.275 1.132-.179.198.027.413.072.643.135a9.04 9.04 0 0 0-1.878 1.58Zm14.29 10.837a4.9 4.9 0 0 1 .134.637c.096.708-.06 1.011-.178 1.13-.109.108-.364.246-.95.199a4.116 4.116 0 0 1-.581-.094 9.04 9.04 0 0 0 1.575-1.872Zm-3.73 1.023c-1.677-.878-3.625-2.323-5.507-4.205-1.88-1.88-3.324-3.825-4.203-5.5A7.018 7.018 0 0 1 9.97 5.298a7 7 0 0 1 5.912 12.528Zm-2.277.99a7 7 0 0 1-8.42-8.419c.964 1.516 2.25 3.112 3.776 4.638 1.528 1.528 3.126 2.815 4.644 3.78Z" }))); };
32622
32647
 
32623
32648
  var SvgPlay = function (props) { return (React.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24" }, props),
32624
- React.createElement("path", { fill: "#000", d: "M16.394 12 10 7.737v8.526L16.394 12Zm2.982.416L8.777 19.482A.5.5 0 0 1 8 19.066V4.934a.5.5 0 0 1 .777-.416l10.599 7.066a.5.5 0 0 1 0 .832Z" }))); };
32649
+ React.createElement("path", { fill: "currentColor", d: "M16.394 12 10 7.737v8.526L16.394 12Zm2.982.416L8.777 19.482A.5.5 0 0 1 8 19.066V4.934a.5.5 0 0 1 .777-.416l10.599 7.066a.5.5 0 0 1 0 .832Z" }))); };
32625
32650
 
32626
32651
  var SvgPlus = function (props) { return (React.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24" }, props),
32627
32652
  React.createElement("path", { fill: "currentColor", d: "M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2h6Z" }))); };
@@ -32648,7 +32673,7 @@ var SvgSquare3Stack3D = function (props) { return (React.createElement("svg", __
32648
32673
  React.createElement("path", { fill: "currentColor", d: "m20.083 15.2 1.202.721a.5.5 0 0 1 0 .858l-8.77 5.262a1 1 0 0 1-1.03 0l-8.77-5.262a.5.5 0 0 1 0-.858l1.202-.721L12 20.05l8.083-4.85Zm0-4.7 1.202.721a.5.5 0 0 1 0 .858L12 17.649l-9.285-5.57a.5.5 0 0 1 0-.858l1.202-.721L12 15.35l8.083-4.85Zm-7.569-9.191 8.771 5.262a.5.5 0 0 1 0 .858L12 12.999 2.715 7.43a.5.5 0 0 1 0-.858l8.77-5.262a1 1 0 0 1 1.03 0ZM12 3.332 5.887 7 12 10.667 18.113 7 12 3.332Z" }))); };
32649
32674
 
32650
32675
  var SvgStop = function (props) { return (React.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24" }, props),
32651
- React.createElement("path", { fill: "#000", d: "M7 7v10h10V7H7ZM6 5h12a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Z" }))); };
32676
+ React.createElement("path", { fill: "currentColor", d: "M7 7v10h10V7H7ZM6 5h12a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Z" }))); };
32652
32677
 
32653
32678
  var SvgTestTube = function (props) { return (React.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24" }, props),
32654
32679
  React.createElement("path", { fill: "currentColor", d: "M17 2v2h-1v14a4 4 0 0 1-8 0V4H7V2h10Zm-3 8h-4v8a2 2 0 1 0 4 0v-8Zm-1 5a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm-2-3a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm3-8h-4v4h4V4Z" }))); };
@@ -32657,8 +32682,8 @@ var SvgTrash = function (props) { return (React.createElement("svg", __assign({
32657
32682
  React.createElement("path", { fill: "currentColor", d: "M17 5h4v2h-1v14a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7H3V5h4V3a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v2Zm1 2H6v13h12V7Zm-9 3h2v8H9v-8Zm4 0h2v8h-2v-8ZM9 4v1h6V4H9Z" }))); };
32658
32683
 
32659
32684
  var SvgUser = function (props) { return (React.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24" }, props),
32660
- React.createElement("path", { fill: "#000", fillRule: "evenodd", d: "M17 8A5 5 0 1 1 7 8a5 5 0 0 1 10 0Zm-2 0a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z", clipRule: "evenodd" }),
32661
- React.createElement("path", { fill: "#000", d: "M12 14a8 8 0 0 0-8 8h2a6 6 0 0 1 12 0h2a8 8 0 0 0-8-8Z" }))); };
32685
+ React.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M17 8A5 5 0 1 1 7 8a5 5 0 0 1 10 0Zm-2 0a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z", clipRule: "evenodd" }),
32686
+ React.createElement("path", { fill: "currentColor", d: "M12 14a8 8 0 0 0-8 8h2a6 6 0 0 1 12 0h2a8 8 0 0 0-8-8Z" }))); };
32662
32687
 
32663
32688
  var SvgUserGroup = function (props) { return (React.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24" }, props),
32664
32689
  React.createElement("path", { fill: "#0F172A", fillRule: "evenodd", d: "M12 13a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0-2a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z", clipRule: "evenodd" }),