@dust-tt/sparkle 0.1.91 → 0.1.93

package/dist/esm/components/Avatar.d.ts

@@ -1,6 +1,6 @@
-import React, { ReactNode } from "react";
+import React from "react";
 type AvatarProps = {
-    size: "xs" | "sm" | "md" | "lg" | "xl" | "auto";
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | "auto";
     name?: string;
     visual?: string | React.ReactNode;
     clickable?: boolean;
@@ -10,11 +10,13 @@ type AvatarProps = {
 };
 export declare function Avatar({ size, name, visual, onClick, clickable, busy, isRounded, }: AvatarProps): React.JSX.Element;
 export declare namespace Avatar {
-    var Stack: ({ children, nbMoreItems, size, }: AvatarStackProps) => React.JSX.Element;
+    var Stack: ({ children, nbMoreItems, size, isRounded, hasMagnifier, }: AvatarStackProps) => React.JSX.Element;
 }
 interface AvatarStackProps {
-    children: ReactNode;
+    children: React.ReactElement<AvatarProps> | React.ReactElement<AvatarProps>[];
     nbMoreItems?: number;
-    size?: "sm" | "md";
+    size?: "xs" | "sm" | "md";
+    isRounded?: boolean;
+    hasMagnifier?: boolean;
 }
 export {};

package/dist/esm/components/Modal.d.ts

@@ -10,5 +10,5 @@ interface ModalProps {
     title?: string;
     isFullScreen?: boolean;
 }
-export declare function Modal({ isOpen, onClose, children, hasChanged, onSave, title, isFullScreen, }: ModalProps): React.JSX.Element;
+export declare function Modal({ isOpen, onClose, action, children, hasChanged, onSave, title, isFullScreen, }: ModalProps): React.JSX.Element;
 export {};

package/dist/esm/index.js

@@ -102,7 +102,7 @@ var SvgArrowDownOnSquare$1 = function (props) { return (React.createElement("svg
     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" }))); };
 
 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),
-    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" }))); };
+    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" }))); };
 
 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),
     React.createElement("path", { fill: "currentColor", d: "m6 8 6-6 6 6h-4.5v7h-3V8H6Z" }),
@@ -252,7 +252,7 @@ var SvgPaperAirplane$1 = function (props) { return (React.createElement("svg", _
     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" }))); };
 
 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),
-    React.createElement("path", { fill: "#000", d: "M6 5h4v14H6V5Zm8 0h4v14h-4V5Z" }))); };
+    React.createElement("path", { fill: "currentColor", d: "M6 5h4v14H6V5Zm8 0h4v14h-4V5Z" }))); };
 
 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),
     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
     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" }))); };
 
 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),
-    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" }))); };
+    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" }))); };
 
 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),
     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",
     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" }))); };
 
 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),
-    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" }))); };
+    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" }))); };
 
 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),
     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(
     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" }))); };
 
 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),
-    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" }))); };
+    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" }))); };
 
 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),
     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) {
         size === "auto" && React__default.createElement("div", { style: { paddingBottom: "100%" } }),
         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" }))));
 }
-var SIZE_SETTINGS = {
-    sm: { widthHovered: "44px", width: "32px" },
-    md: { widthHovered: "52px", width: "40px" }, // Adjust these values as needed for the 'md' size
+var sizeClassesPx = {
+    xs: 24,
+    sm: 32,
+    md: 40,
 };
 Avatar.Stack = function (_a) {
-    var children = _a.children, nbMoreItems = _a.nbMoreItems, _b = _a.size, size = _b === void 0 ? "sm" : _b;
-    var _c = __read(useState(false), 2), isHovered = _c[0], setIsHovered = _c[1];
+    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;
+    var _e = __read(useState(false), 2), isHovered = _e[0], setIsHovered = _e[1];
     var childrenArray = React__default.Children.toArray(children);
     var handleMouseEnter = function () {
         if (childrenArray.length > 1) {
@@ -429,21 +430,43 @@ Avatar.Stack = function (_a) {
             setIsHovered(false);
         }
     };
-    var sizeSetting = SIZE_SETTINGS[size];
+    var sizeSetting = {
+        marginLeft: 0,
+        widthHovered: sizeClassesPx[size] * 0.6,
+        width: sizeClassesPx[size] * 0.25,
+    };
+    var collapsedWidth = sizeSetting.width * (childrenArray.length + Number(Boolean(nbMoreItems))) +
+        (sizeClassesPx[size] - sizeSetting.width);
+    var openedWidth = sizeSetting.widthHovered *
+        (childrenArray.length + Number(Boolean(nbMoreItems))) +
+        (sizeClassesPx[size] - sizeSetting.widthHovered);
+    var transitionSettings = "width 200ms ease-out";
     return (React__default.createElement("div", { className: "s-flex s-flex-row", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: {
-            marginLeft: "20px",
+            width: "".concat(isHovered ? openedWidth : collapsedWidth, "px"),
+            transition: transitionSettings,
         } },
-        childrenArray.map(function (child, i) { return (React__default.createElement("div", { key: i, className: "s-cursor-pointer s-drop-shadow-md", style: {
-                width: isHovered ? sizeSetting.widthHovered : sizeSetting.width,
-                transition: "width 200ms ease-out",
-                marginLeft: "-20px",
-            } }, child)); }),
+        childrenArray.map(function (child, i) {
+            if (React__default.isValidElement(child)) {
+                return (React__default.createElement("div", { key: i, className: "s-cursor-pointer s-drop-shadow-md", style: {
+                        width: isHovered ? sizeSetting.widthHovered : sizeSetting.width,
+                        transition: transitionSettings,
+                    } }, hasMagnifier ? (React__default.createElement("div", { style: {
+                        transform: "scale(".concat(1 - (childrenArray.length - i) * 0.06, ")"),
+                    } }, React__default.cloneElement(child, {
+                    size: size,
+                    isRounded: isRounded,
+                }))) : (React__default.createElement(React__default.Fragment, null, React__default.cloneElement(child, {
+                    size: size,
+                    isRounded: isRounded,
+                })))));
+            }
+            return null;
+        }),
         Boolean(nbMoreItems) && (React__default.createElement("div", { className: "s-cursor-pointer s-drop-shadow-md", style: {
                 width: isHovered ? sizeSetting.widthHovered : sizeSetting.width,
-                transition: "width 200ms ease-out",
-                marginLeft: "-20px",
+                transition: transitionSettings,
             } },
-            React__default.createElement(Avatar, { size: size, name: "+" + String(Number(nbMoreItems) < 10 ? nbMoreItems : ""), isRounded: true, clickable: true })))));
+            React__default.createElement(Avatar, { size: size, name: "+" + String(Number(nbMoreItems) < 10 ? nbMoreItems : ""), isRounded: isRounded, clickable: true })))));
 };
 
 var IconSizes = {
@@ -32462,7 +32485,7 @@ var SvgArrowDownOnSquare = function (props) { return (React.createElement("svg",
     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" }))); };
 
 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),
-    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" }))); };
+    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" }))); };
 
 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),
     React.createElement("path", { fill: "currentColor", d: "m7 8 5-5 5 5h-4v7h-2V8H7Z" }),
@@ -32527,8 +32550,8 @@ var SvgCloudArrowLeftRight = function (props) { return (React.createElement("svg
     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" }))); };
 
 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),
-    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" }),
-    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" }))); };
+    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" }),
+    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" }))); };
 
 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),
     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 +32635,7 @@ var SvgPaperAirplane = function (props) { return (React.createElement("svg", __a
     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" }))); };
 
 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),
-    React.createElement("path", { fill: "#000", d: "M7 5h2v14H7V5Zm8 0h2v14h-2V5Z" }))); };
+    React.createElement("path", { fill: "currentColor", d: "M7 5h2v14H7V5Zm8 0h2v14h-2V5Z" }))); };
 
 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),
     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 +32644,7 @@ var SvgPlanet = function (props) { return (React.createElement("svg", __assign({
     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" }))); };
 
 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),
-    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" }))); };
+    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" }))); };
 
 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),
     React.createElement("path", { fill: "currentColor", d: "M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2h6Z" }))); };
@@ -32648,7 +32671,7 @@ var SvgSquare3Stack3D = function (props) { return (React.createElement("svg", __
     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" }))); };
 
 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),
-    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" }))); };
+    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" }))); };
 
 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),
     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 +32680,8 @@ var SvgTrash = function (props) { return (React.createElement("svg", __assign({
     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" }))); };
 
 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),
-    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" }),
-    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" }))); };
+    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" }),
+    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" }))); };
 
 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),
     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" }),
@@ -32749,7 +32772,7 @@ function IconToggleButton(_a) {
 }
 
 function Modal(_a) {
-    var isOpen = _a.isOpen, onClose = _a.onClose, children = _a.children, hasChanged = _a.hasChanged, onSave = _a.onSave, title = _a.title, _b = _a.isFullScreen, isFullScreen = _b === void 0 ? false : _b;
+    var isOpen = _a.isOpen, onClose = _a.onClose, action = _a.action, children = _a.children, hasChanged = _a.hasChanged, onSave = _a.onSave, title = _a.title, _b = _a.isFullScreen, isFullScreen = _b === void 0 ? false : _b;
     var buttonBarProps = hasChanged
         ? {
             variant: "validate",
@@ -32770,7 +32793,7 @@ function Modal(_a) {
                         React__default.createElement(_t.Panel, { className: classNames("s-relative s-transform s-overflow-hidden s-bg-white s-px-4 s-transition-all sm:s-px-6", isFullScreen
                                 ? "s-m-0 s-h-full s-max-h-full s-w-full s-max-w-full"
                                 : "s-max-w-2xl s-rounded-lg s-shadow-xl lg:s-w-1/2") },
-                            React__default.createElement(BarHeader, { title: title || "", rightActions: React__default.createElement(BarHeader.ButtonBar, __assign({}, buttonBarProps)) }),
+                            React__default.createElement(BarHeader, { title: title || "", leftActions: action ? React__default.createElement(Button, __assign({}, action)) : undefined, rightActions: React__default.createElement(BarHeader.ButtonBar, __assign({}, buttonBarProps)) }),
                             React__default.createElement("div", { className: "s-pb-6 s-pt-14 ".concat(isFullScreen ? "s-h-full s-overflow-y-auto" : "") }, children))))))));
 }