@dust-tt/sparkle 0.2.491-rc → 0.2.492-rc
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/dist/cjs/index.js +1 -1
- package/dist/esm/components/Dialog.d.ts +5 -3
- package/dist/esm/components/Dialog.d.ts.map +1 -1
- package/dist/esm/components/Dialog.js +5 -4
- package/dist/esm/components/Dialog.js.map +1 -1
- package/dist/esm/components/InteractiveImageGrid.d.ts +4 -1
- package/dist/esm/components/InteractiveImageGrid.d.ts.map +1 -1
- package/dist/esm/components/InteractiveImageGrid.js +59 -64
- package/dist/esm/components/InteractiveImageGrid.js.map +1 -1
- package/dist/esm/stories/InteractiveImageGrid.stories.d.ts.map +1 -1
- package/dist/esm/stories/InteractiveImageGrid.stories.js +7 -1
- package/dist/esm/stories/InteractiveImageGrid.stories.js.map +1 -1
- package/dist/sparkle.css +38 -14
- package/package.json +1 -1
- package/src/components/Dialog.tsx +16 -3
- package/src/components/InteractiveImageGrid.tsx +96 -80
- package/src/stories/InteractiveImageGrid.stories.tsx +8 -0
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { CheckedState } from "@radix-ui/react-checkbox";
|
|
2
2
|
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
|
3
3
|
import * as React from "react";
|
|
4
|
-
import { Button, Checkbox } from "../components";
|
|
4
|
+
import { Button, ButtonProps, Checkbox } from "../components";
|
|
5
5
|
declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
|
|
6
6
|
declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
7
7
|
declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
|
|
8
8
|
declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
|
|
9
9
|
declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
10
|
-
declare const DIALOG_SIZES: readonly ["md", "lg", "xl"];
|
|
10
|
+
declare const DIALOG_SIZES: readonly ["md", "lg", "xl", "full"];
|
|
11
11
|
type DialogSizeType = (typeof DIALOG_SIZES)[number];
|
|
12
12
|
interface DialogContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
|
|
13
13
|
size?: DialogSizeType;
|
|
@@ -16,10 +16,12 @@ interface DialogContentProps extends React.ComponentPropsWithoutRef<typeof Dialo
|
|
|
16
16
|
}
|
|
17
17
|
declare const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
18
18
|
interface NewDialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
19
|
+
buttonSize?: ButtonProps["size"];
|
|
20
|
+
buttonVariant?: ButtonProps["variant"];
|
|
19
21
|
hideButton?: boolean;
|
|
20
22
|
}
|
|
21
23
|
declare const DialogHeader: {
|
|
22
|
-
({ className, children, hideButton, ...props }: NewDialogHeaderProps): React.JSX.Element;
|
|
24
|
+
({ className, children, buttonSize, buttonVariant, hideButton, ...props }: NewDialogHeaderProps): React.JSX.Element;
|
|
23
25
|
displayName: string;
|
|
24
26
|
};
|
|
25
27
|
declare const DialogContainer: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAG1D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,
|
|
1
|
+
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAG1D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,MAAM,EACN,WAAW,EACX,QAAQ,EAGT,MAAM,qBAAqB,CAAC;AAI7B,QAAA,MAAM,MAAM,uCAAuB,CAAC;AACpC,QAAA,MAAM,aAAa,8GAA0B,CAAC;AAC9C,QAAA,MAAM,WAAW,4GAAwB,CAAC;AAC1C,QAAA,MAAM,YAAY,6CAAyB,CAAC;AAE5C,QAAA,MAAM,aAAa,8JAajB,CAAC;AAGH,QAAA,MAAM,YAAY,qCAAsC,CAAC;AACzD,KAAK,cAAc,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AA0BpD,UAAU,kBACR,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC;IACtE,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,QAAA,MAAM,aAAa,2FAwBlB,CAAC;AAGF,UAAU,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,UAAU,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACjC,aAAa,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACvC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,QAAA,MAAM,YAAY;+EAOf,oBAAoB;;CAetB,CAAC;AAGF,QAAA,MAAM,eAAe;oBAElB,MAAM,cAAc,CAAC,cAAc,CAAC;;CAWtC,CAAC;AAGF,UAAU,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtE,eAAe,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC;IACtD,gBAAgB,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC;IACvD,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,mBAAmB,CAAC,EAAE;QACpB,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,OAAO,CAAC;QACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;QACxC,KAAK,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAC;KAC/C,CAAC;CACH;AAED,QAAA,MAAM,YAAY;sHAQf,iBAAiB;;CAwCnB,CAAC;AAGF,QAAA,MAAM,WAAW;aAGJ,MAAM,SAAS;4CAiB1B,CAAC;AAGH,QAAA,MAAM,iBAAiB,8KAarB,CAAC;AAGH,OAAO,EACL,MAAM,EACN,WAAW,EACX,eAAe,EACf,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,WAAW,EACX,aAAa,GACd,CAAC"}
|
|
@@ -3,7 +3,7 @@ import * as DialogPrimitive from "@radix-ui/react-dialog";
|
|
|
3
3
|
import { FocusScope } from "@radix-ui/react-focus-scope";
|
|
4
4
|
import { cva } from "class-variance-authority";
|
|
5
5
|
import * as React from "react";
|
|
6
|
-
import { Button, Checkbox, Label, ScrollArea } from "../components";
|
|
6
|
+
import { Button, Checkbox, Label, ScrollArea, } from "../components";
|
|
7
7
|
import { XMarkIcon } from "../icons/app";
|
|
8
8
|
import { cn } from "../lib/utils";
|
|
9
9
|
var Dialog = DialogPrimitive.Root;
|
|
@@ -15,11 +15,12 @@ var DialogOverlay = React.forwardRef(function (_a, ref) {
|
|
|
15
15
|
return (React.createElement(DialogPrimitive.Overlay, __assign({ className: cn("s-fixed s-inset-0 s-z-50 data-[state=open]:s-animate-in data-[state=closed]:s-animate-out data-[state=closed]:s-fade-out-0 data-[state=open]:s-fade-in-0", "s-bg-muted-foreground/75 dark:s-bg-muted-foreground-night/75", className) }, props, { ref: ref })));
|
|
16
16
|
});
|
|
17
17
|
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
|
|
18
|
-
var DIALOG_SIZES = ["md", "lg", "xl"];
|
|
18
|
+
var DIALOG_SIZES = ["md", "lg", "xl", "full"];
|
|
19
19
|
var sizeClasses = {
|
|
20
20
|
md: "sm:s-max-w-md",
|
|
21
21
|
lg: "sm:s-max-w-xl",
|
|
22
22
|
xl: "sm:s-max-w-3xl",
|
|
23
|
+
full: "sm:s-max-w-full sm:s-h-full",
|
|
23
24
|
};
|
|
24
25
|
var dialogVariants = cva(cn("s-fixed s-left-[50%] s-top-[50%] s-z-50 s-overflow-hidden s-translate-x-[-50%] s-translate-y-[-50%] s-duration-200 data-[state=open]:s-animate-in data-[state=closed]:s-animate-out data-[state=closed]:s-fade-out-0 data-[state=open]:s-fade-in-0 data-[state=closed]:s-zoom-out-95 data-[state=open]:s-zoom-in-95 data-[state=closed]:s-slide-out-to-left-1/2 data-[state=closed]:s-slide-out-to-top-[48%] data-[state=open]:s-slide-in-from-left-1/2 data-[state=open]:s-slide-in-from-top-[48%]", "s-rounded-2xl s-grid s-w-full s-border s-border s-shadow-lg s-sm:rounded-lg", "s-bg-background dark:s-bg-background-night", "s-border-border dark:s-border-border-night"), {
|
|
25
26
|
variants: {
|
|
@@ -38,10 +39,10 @@ var DialogContent = React.forwardRef(function (_a, ref) {
|
|
|
38
39
|
});
|
|
39
40
|
DialogContent.displayName = DialogPrimitive.Content.displayName;
|
|
40
41
|
var DialogHeader = function (_a) {
|
|
41
|
-
var className = _a.className, children = _a.children, _b = _a.hideButton, hideButton =
|
|
42
|
+
var className = _a.className, children = _a.children, _b = _a.buttonSize, buttonSize = _b === void 0 ? "mini" : _b, _c = _a.buttonVariant, buttonVariant = _c === void 0 ? "ghost" : _c, _d = _a.hideButton, hideButton = _d === void 0 ? false : _d, props = __rest(_a, ["className", "children", "buttonSize", "buttonVariant", "hideButton"]);
|
|
42
43
|
return (React.createElement("div", __assign({ className: cn("s-z-50 s-flex s-flex-none s-flex-col s-gap-0 s-px-5 s-py-4 s-text-left", className) }, props),
|
|
43
44
|
children,
|
|
44
|
-
React.createElement(DialogClose, { asChild: true, className: "s-absolute s-right-3 s-top-3" }, !hideButton && React.createElement(Button, { icon: XMarkIcon, variant:
|
|
45
|
+
React.createElement(DialogClose, { asChild: true, className: "s-absolute s-right-3 s-top-3" }, !hideButton && (React.createElement(Button, { icon: XMarkIcon, variant: buttonVariant, size: buttonSize })))));
|
|
45
46
|
};
|
|
46
47
|
DialogHeader.displayName = "DialogHeader";
|
|
47
48
|
var DialogContainer = function (_a) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/components/Dialog.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAC/C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,
|
|
1
|
+
{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/components/Dialog.tsx"],"names":[],"mappings":"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"}
|
|
@@ -9,6 +9,9 @@ interface InteractiveImageGridProps {
|
|
|
9
9
|
title: string;
|
|
10
10
|
}[];
|
|
11
11
|
}
|
|
12
|
-
declare
|
|
12
|
+
declare function InteractiveImageGrid({ className, images, }: InteractiveImageGridProps): React.JSX.Element;
|
|
13
|
+
declare namespace InteractiveImageGrid {
|
|
14
|
+
var displayName: string;
|
|
15
|
+
}
|
|
13
16
|
export { InteractiveImageGrid };
|
|
14
17
|
//# sourceMappingURL=InteractiveImageGrid.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InteractiveImageGrid.d.ts","sourceRoot":"","sources":["../../../src/components/InteractiveImageGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"InteractiveImageGrid.d.ts","sourceRoot":"","sources":["../../../src/components/InteractiveImageGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AA8G1B,UAAU,yBAAyB;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE;QACN,GAAG,EAAE,MAAM,CAAC;QACZ,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,SAAS,CAAC,EAAE,OAAO,CAAC;QACpB,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;CACL;AAED,iBAAS,oBAAoB,CAAC,EAC5B,SAAS,EACT,MAAM,GACP,EAAE,yBAAyB,qBAkL3B;kBArLQ,oBAAoB;;;AAyL7B,OAAO,EAAE,oBAAoB,EAAE,CAAC"}
|
|
@@ -1,11 +1,17 @@
|
|
|
1
1
|
import { __awaiter, __generator, __read } from "tslib";
|
|
2
2
|
import React from "react";
|
|
3
|
-
import { Button, Spinner } from "../components";
|
|
4
|
-
import { ArrowDownOnSquareIcon, ChevronLeftIcon, ChevronRightIcon,
|
|
3
|
+
import { Button, Dialog, DialogContent, DialogHeader, DialogTrigger, Spinner, } from "../components";
|
|
4
|
+
import { ArrowDownOnSquareIcon, ChevronLeftIcon, ChevronRightIcon, } from "../icons/app";
|
|
5
5
|
import { cn } from "../lib/utils";
|
|
6
|
+
var ImageLoadingState = React.forwardRef(function (_a, ref) {
|
|
7
|
+
var className = _a.className, _b = _a.size, size = _b === void 0 ? "lg" : _b;
|
|
8
|
+
return (React.createElement("div", { ref: ref, className: cn("s-mx-auto s-flex s-aspect-square s-w-full s-min-w-[50vh]", "s-max-w-[80vh] s-items-center s-justify-center", "s-bg-muted-background dark:s-bg-muted-background-night", className) },
|
|
9
|
+
React.createElement(Spinner, { variant: "dark", size: size })));
|
|
10
|
+
});
|
|
11
|
+
ImageLoadingState.displayName = "ImageLoadingState";
|
|
6
12
|
var ImagePreview = React.forwardRef(function (_a, ref) {
|
|
7
13
|
var image = _a.image, onClick = _a.onClick, onDownload = _a.onDownload;
|
|
8
|
-
return (React.createElement("div", { ref: ref, onClick: onClick, className: cn("s-group/preview s-relative", "s-cursor-pointer s-overflow-hidden s-rounded-2xl", "s-bg-muted-background dark:s-bg-muted-background-night") }, image.isLoading ? (React.createElement("div", { className: "s-flex s-h-full s-w-full s-items-center s-justify-center" },
|
|
14
|
+
return (React.createElement("div", { ref: ref, onClick: onClick, className: cn("s-group/preview s-relative s-aspect-square", "s-cursor-pointer s-overflow-hidden s-rounded-2xl", "s-bg-muted-background dark:s-bg-muted-background-night") }, image.isLoading ? (React.createElement("div", { className: "s-flex s-h-full s-w-full s-items-center s-justify-center" },
|
|
9
15
|
React.createElement(Spinner, { variant: "dark", size: "md" }))) : (React.createElement(React.Fragment, null,
|
|
10
16
|
React.createElement("img", { src: image.imageUrl, alt: image.alt, className: "s-h-full s-w-full s-rounded-2xl s-object-cover" }),
|
|
11
17
|
React.createElement("div", { className: cn("s-absolute s-inset-0 s-bg-gradient-to-b", "s-from-black/40 s-via-transparent s-to-black/40", "s-opacity-0 s-transition-opacity s-duration-200", "group-hover/preview:s-opacity-100") }),
|
|
@@ -13,11 +19,11 @@ var ImagePreview = React.forwardRef(function (_a, ref) {
|
|
|
13
19
|
React.createElement(Button, { variant: "ghost", size: "xs", icon: ArrowDownOnSquareIcon, className: "s-text-white dark:s-text-white", tooltip: "Download", onClick: onDownload }))))));
|
|
14
20
|
});
|
|
15
21
|
ImagePreview.displayName = "ImagePreview";
|
|
16
|
-
|
|
22
|
+
function InteractiveImageGrid(_a) {
|
|
23
|
+
var _this = this;
|
|
17
24
|
var className = _a.className, images = _a.images;
|
|
18
25
|
var _b = __read(React.useState(null), 2), currentImageIndex = _b[0], setCurrentImageIndex = _b[1];
|
|
19
|
-
var _c = __read(React.useState(false), 2),
|
|
20
|
-
var _d = __read(React.useState(false), 2), imageLoaded = _d[0], setImageLoaded = _d[1];
|
|
26
|
+
var _c = __read(React.useState(false), 2), imageLoaded = _c[0], setImageLoaded = _c[1];
|
|
21
27
|
var handleNext = React.useCallback(function () {
|
|
22
28
|
if (currentImageIndex === null) {
|
|
23
29
|
return;
|
|
@@ -30,7 +36,7 @@ var InteractiveImageGrid = React.forwardRef(function (_a, ref) {
|
|
|
30
36
|
}
|
|
31
37
|
setCurrentImageIndex((currentImageIndex - 1 + images.length) % images.length);
|
|
32
38
|
}, [currentImageIndex, images.length]);
|
|
33
|
-
var handleDownload = React.useCallback(function (downloadUrl, title) { return __awaiter(
|
|
39
|
+
var handleDownload = React.useCallback(function (downloadUrl, title) { return __awaiter(_this, void 0, void 0, function () {
|
|
34
40
|
var link;
|
|
35
41
|
return __generator(this, function (_a) {
|
|
36
42
|
if (!downloadUrl || !title) {
|
|
@@ -46,7 +52,7 @@ var InteractiveImageGrid = React.forwardRef(function (_a, ref) {
|
|
|
46
52
|
});
|
|
47
53
|
}); }, []);
|
|
48
54
|
React.useEffect(function () {
|
|
49
|
-
if (
|
|
55
|
+
if (currentImageIndex === null) {
|
|
50
56
|
return;
|
|
51
57
|
}
|
|
52
58
|
// Only handle keyboard events if the image is zoomed.
|
|
@@ -57,76 +63,65 @@ var InteractiveImageGrid = React.forwardRef(function (_a, ref) {
|
|
|
57
63
|
else if (e.key === "ArrowLeft") {
|
|
58
64
|
handlePrevious();
|
|
59
65
|
}
|
|
60
|
-
else if (e.key === "Escape") {
|
|
61
|
-
setIsZoomed(false);
|
|
62
|
-
setCurrentImageIndex(null);
|
|
63
|
-
}
|
|
64
66
|
};
|
|
65
67
|
window.addEventListener("keydown", handleKeyDown);
|
|
66
68
|
return function () { return window.removeEventListener("keydown", handleKeyDown); };
|
|
67
|
-
}, [
|
|
68
|
-
return (React.createElement(
|
|
69
|
-
|
|
70
|
-
React.createElement(
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
69
|
+
}, [currentImageIndex, handleNext, handlePrevious]);
|
|
70
|
+
return (React.createElement(Dialog, { open: currentImageIndex !== null, onOpenChange: function (open) { return !open && setCurrentImageIndex(null); } },
|
|
71
|
+
React.createElement(DialogTrigger, { asChild: true },
|
|
72
|
+
React.createElement("div", { className: cn("s-@container", className) }, images.length === 1 ? (React.createElement("div", { className: "s-h-80 s-w-80" },
|
|
73
|
+
React.createElement(ImagePreview, { image: images[0], onClick: function () {
|
|
74
|
+
setCurrentImageIndex(0);
|
|
75
|
+
}, onDownload: function (e) { return __awaiter(_this, void 0, void 0, function () {
|
|
76
|
+
return __generator(this, function (_a) {
|
|
77
|
+
switch (_a.label) {
|
|
78
|
+
case 0:
|
|
79
|
+
e.stopPropagation();
|
|
80
|
+
return [4 /*yield*/, handleDownload(images[0].downloadUrl, images[0].title)];
|
|
81
|
+
case 1:
|
|
82
|
+
_a.sent();
|
|
83
|
+
return [2 /*return*/];
|
|
84
|
+
}
|
|
85
|
+
});
|
|
86
|
+
}); } }))) : (React.createElement("div", { className: "s-grid s-grid-cols-2 s-gap-2 @xxs:s-grid-cols-3 @xs:s-grid-cols-4" }, images.map(function (image, idx) { return (React.createElement(ImagePreview, { key: idx, image: image, onClick: function () {
|
|
87
|
+
setCurrentImageIndex(idx);
|
|
88
|
+
}, onDownload: function (e) { return __awaiter(_this, void 0, void 0, function () {
|
|
74
89
|
return __generator(this, function (_a) {
|
|
75
90
|
switch (_a.label) {
|
|
76
91
|
case 0:
|
|
77
92
|
e.stopPropagation();
|
|
78
|
-
return [4 /*yield*/, handleDownload(
|
|
93
|
+
return [4 /*yield*/, handleDownload(image.downloadUrl, image.title)];
|
|
79
94
|
case 1:
|
|
80
95
|
_a.sent();
|
|
81
96
|
return [2 /*return*/];
|
|
82
97
|
}
|
|
83
98
|
});
|
|
84
|
-
}); } }))
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
case 0:
|
|
99
|
+
}); } })); }))))),
|
|
100
|
+
React.createElement(DialogContent, { size: "full", className: "s-rounded-none s-border-0 s-bg-white/95 s-p-0 s-shadow-none s-outline-none s-ring-0 dark:s-bg-gray-900/95" }, currentImageIndex !== null && (React.createElement("div", { className: "s-relative s-flex s-h-full s-w-full s-flex-col" },
|
|
101
|
+
React.createElement(DialogHeader, { buttonVariant: "outline", buttonSize: "md", className: "s-h-6" }),
|
|
102
|
+
React.createElement("div", { className: "s-flex s-flex-1 s-items-center s-justify-center" },
|
|
103
|
+
React.createElement("div", { className: "s-relative s-flex s-items-center s-gap-4" },
|
|
104
|
+
images.length > 1 && (React.createElement(Button, { variant: "ghost", size: "md", icon: ChevronLeftIcon, onClick: function (e) {
|
|
91
105
|
e.stopPropagation();
|
|
92
|
-
|
|
93
|
-
case 1:
|
|
94
|
-
_a.sent();
|
|
95
|
-
return [2 /*return*/];
|
|
96
|
-
}
|
|
97
|
-
});
|
|
98
|
-
}); } })); }))),
|
|
99
|
-
isZoomed && currentImageIndex !== null && (React.createElement("div", { className: cn("s-fixed s-inset-0 s-z-50 s-flex s-items-center s-justify-center", "s-bg-white/95 dark:s-bg-gray-900/95") },
|
|
100
|
-
React.createElement("div", { className: "s-relative s-flex s-h-full s-w-full s-flex-col" },
|
|
101
|
-
React.createElement("div", { className: "s-absolute s-right-4 s-top-4 s-z-10 s-flex s-gap-2" },
|
|
102
|
-
React.createElement(Button, { variant: "outline", size: "md", icon: XMarkIcon, tooltip: "Close", onClick: function () {
|
|
103
|
-
setIsZoomed(false);
|
|
104
|
-
setCurrentImageIndex(null);
|
|
106
|
+
handlePrevious();
|
|
105
107
|
} })),
|
|
106
|
-
|
|
107
|
-
React.createElement(
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
case 1:
|
|
124
|
-
_a.sent();
|
|
125
|
-
return [2 /*return*/];
|
|
126
|
-
}
|
|
127
|
-
});
|
|
128
|
-
}); } }))))))))));
|
|
129
|
-
});
|
|
108
|
+
images[currentImageIndex].isLoading ? (React.createElement(ImageLoadingState, { size: "lg" })) : (React.createElement("img", { src: images[currentImageIndex].imageUrl, alt: images[currentImageIndex].alt, className: cn("s-max-h-[90vh] s-min-h-[50vh] s-w-auto s-min-w-[50vh]", "s-checkerboard s-object-contain"), onLoad: function () { return setImageLoaded(true); } })),
|
|
109
|
+
images.length > 1 && (React.createElement(Button, { variant: "ghost", size: "md", icon: ChevronRightIcon, onClick: function (e) {
|
|
110
|
+
e.stopPropagation();
|
|
111
|
+
handleNext();
|
|
112
|
+
} })))),
|
|
113
|
+
!images[currentImageIndex].isLoading && (React.createElement(React.Fragment, null, imageLoaded ? (React.createElement("div", { className: "s-absolute s-bottom-3 s-right-3 s-z-10" },
|
|
114
|
+
React.createElement(Button, { variant: "outline", size: "md", icon: ArrowDownOnSquareIcon, tooltip: "Download", onClick: function () { return __awaiter(_this, void 0, void 0, function () {
|
|
115
|
+
return __generator(this, function (_a) {
|
|
116
|
+
switch (_a.label) {
|
|
117
|
+
case 0: return [4 /*yield*/, handleDownload(images[currentImageIndex].downloadUrl, images[currentImageIndex].title)];
|
|
118
|
+
case 1:
|
|
119
|
+
_a.sent();
|
|
120
|
+
return [2 /*return*/];
|
|
121
|
+
}
|
|
122
|
+
});
|
|
123
|
+
}); } }))) : (React.createElement(ImageLoadingState, { size: "lg" })))))))));
|
|
124
|
+
}
|
|
130
125
|
InteractiveImageGrid.displayName = "InteractiveImageGrid";
|
|
131
126
|
export { InteractiveImageGrid };
|
|
132
127
|
//# sourceMappingURL=InteractiveImageGrid.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InteractiveImageGrid.js","sourceRoot":"","sources":["../../../src/components/InteractiveImageGrid.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,
|
|
1
|
+
{"version":3,"file":"InteractiveImageGrid.js","sourceRoot":"","sources":["../../../src/components/InteractiveImageGrid.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InteractiveImageGrid.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/InteractiveImageGrid.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,QAAA,MAAM,IAAI;;;;;;;CAGuB,CAAC;AAElC,eAAe,IAAI,CAAC;AA8CpB,eAAO,MAAM,uBAAuB,
|
|
1
|
+
{"version":3,"file":"InteractiveImageGrid.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/InteractiveImageGrid.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,QAAA,MAAM,IAAI;;;;;;;CAGuB,CAAC;AAElC,eAAe,IAAI,CAAC;AA8CpB,eAAO,MAAM,uBAAuB,yBAmBnC,CAAC"}
|
|
@@ -53,7 +53,13 @@ export var InteractiveImageExample = function () { return (React.createElement("
|
|
|
53
53
|
React.createElement("div", { className: "s-w-[700px]" },
|
|
54
54
|
React.createElement("h2", null, "Interactive Image Grid"),
|
|
55
55
|
React.createElement(InteractiveImageGrid, { images: images })),
|
|
56
|
+
React.createElement("div", { className: "s-w-[300px]" },
|
|
57
|
+
React.createElement("h2", null, "Interactive Image Grid with small width"),
|
|
58
|
+
React.createElement(InteractiveImageGrid, { images: images })),
|
|
56
59
|
React.createElement("div", { className: "s-w-[700px]" },
|
|
57
60
|
React.createElement("h2", null, "Interactive Image Grid with 1 image"),
|
|
58
|
-
React.createElement(InteractiveImageGrid, { images: images.slice(1, 2) }))
|
|
61
|
+
React.createElement(InteractiveImageGrid, { images: images.slice(1, 2) })),
|
|
62
|
+
React.createElement("div", { className: "s-w-[700px]" },
|
|
63
|
+
React.createElement("h2", null, "Interactive Image Grid with 1 image (loading)"),
|
|
64
|
+
React.createElement(InteractiveImageGrid, { images: images.slice(0, 1) })))); };
|
|
59
65
|
//# sourceMappingURL=InteractiveImageGrid.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InteractiveImageGrid.stories.js","sourceRoot":"","sources":["../../../src/stories/InteractiveImageGrid.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;AAEhF,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,IAAM,IAAI,GAAG;IACX,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,QAAQ;CACY,CAAC;AAElC,eAAe,IAAI,CAAC;AAEpB,IAAM,MAAM,GAAG;IACb;QACE,GAAG,EAAE,wCAAwC;QAC7C,SAAS,EAAE,IAAI;QACf,KAAK,EAAE,wCAAwC;KAChD;IACD;QACE,GAAG,EAAE,iCAAiC;QACtC,WAAW,EAAE,qDAAqD;QAClE,QAAQ,EAAE,qDAAqD;QAC/D,KAAK,EAAE,iCAAiC;KACzC;IACD;QACE,GAAG,EAAE,iCAAiC;QACtC,WAAW,EAAE,qDAAqD;QAClE,QAAQ,EAAE,qDAAqD;QAC/D,KAAK,EAAE,iCAAiC;KACzC;IACD;QACE,GAAG,EAAE,iCAAiC;QACtC,WAAW,EAAE,qDAAqD;QAClE,QAAQ,EAAE,qDAAqD;QAC/D,KAAK,EAAE,iCAAiC;KACzC;IACD;QACE,GAAG,EAAE,iCAAiC;QACtC,WAAW,EAAE,qDAAqD;QAClE,QAAQ,EAAE,qDAAqD;QAC/D,KAAK,EAAE,iCAAiC;KACzC;IACD;QACE,GAAG,EAAE,iCAAiC;QACtC,WAAW,EAAE,qDAAqD;QAClE,QAAQ,EAAE,qDAAqD;QAC/D,KAAK,EAAE,iCAAiC;KACzC;IACD;QACE,GAAG,EAAE,qCAAqC;QAC1C,WAAW,EAAE,+CAA+C;QAC5D,QAAQ,EAAE,+CAA+C;QACzD,KAAK,EAAE,iCAAiC;KACzC;CACF,CAAC;AAEF,MAAM,CAAC,IAAM,uBAAuB,GAAG,cAAM,OAAA,CAC3C,6BAAK,SAAS,EAAC,2BAA2B;IACxC,6BAAK,SAAS,EAAC,aAAa;QAC1B,yDAA+B;QAC/B,oBAAC,oBAAoB,IAAC,MAAM,EAAE,MAAM,GAAI,CACpC;IACN,6BAAK,SAAS,EAAC,aAAa;QAC1B,sEAA4C;QAC5C,oBAAC,oBAAoB,IAAC,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GAAI,CAChD,CACF,CACP,
|
|
1
|
+
{"version":3,"file":"InteractiveImageGrid.stories.js","sourceRoot":"","sources":["../../../src/stories/InteractiveImageGrid.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;AAEhF,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,IAAM,IAAI,GAAG;IACX,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,QAAQ;CACY,CAAC;AAElC,eAAe,IAAI,CAAC;AAEpB,IAAM,MAAM,GAAG;IACb;QACE,GAAG,EAAE,wCAAwC;QAC7C,SAAS,EAAE,IAAI;QACf,KAAK,EAAE,wCAAwC;KAChD;IACD;QACE,GAAG,EAAE,iCAAiC;QACtC,WAAW,EAAE,qDAAqD;QAClE,QAAQ,EAAE,qDAAqD;QAC/D,KAAK,EAAE,iCAAiC;KACzC;IACD;QACE,GAAG,EAAE,iCAAiC;QACtC,WAAW,EAAE,qDAAqD;QAClE,QAAQ,EAAE,qDAAqD;QAC/D,KAAK,EAAE,iCAAiC;KACzC;IACD;QACE,GAAG,EAAE,iCAAiC;QACtC,WAAW,EAAE,qDAAqD;QAClE,QAAQ,EAAE,qDAAqD;QAC/D,KAAK,EAAE,iCAAiC;KACzC;IACD;QACE,GAAG,EAAE,iCAAiC;QACtC,WAAW,EAAE,qDAAqD;QAClE,QAAQ,EAAE,qDAAqD;QAC/D,KAAK,EAAE,iCAAiC;KACzC;IACD;QACE,GAAG,EAAE,iCAAiC;QACtC,WAAW,EAAE,qDAAqD;QAClE,QAAQ,EAAE,qDAAqD;QAC/D,KAAK,EAAE,iCAAiC;KACzC;IACD;QACE,GAAG,EAAE,qCAAqC;QAC1C,WAAW,EAAE,+CAA+C;QAC5D,QAAQ,EAAE,+CAA+C;QACzD,KAAK,EAAE,iCAAiC;KACzC;CACF,CAAC;AAEF,MAAM,CAAC,IAAM,uBAAuB,GAAG,cAAM,OAAA,CAC3C,6BAAK,SAAS,EAAC,2BAA2B;IACxC,6BAAK,SAAS,EAAC,aAAa;QAC1B,yDAA+B;QAC/B,oBAAC,oBAAoB,IAAC,MAAM,EAAE,MAAM,GAAI,CACpC;IACN,6BAAK,SAAS,EAAC,aAAa;QAC1B,0EAAgD;QAChD,oBAAC,oBAAoB,IAAC,MAAM,EAAE,MAAM,GAAI,CACpC;IACN,6BAAK,SAAS,EAAC,aAAa;QAC1B,sEAA4C;QAC5C,oBAAC,oBAAoB,IAAC,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GAAI,CAChD;IACN,6BAAK,SAAS,EAAC,aAAa;QAC1B,gFAAsD;QACtD,oBAAC,oBAAoB,IAAC,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GAAI,CAChD,CACF,CACP,EAnB4C,CAmB5C,CAAC"}
|
package/dist/sparkle.css
CHANGED
|
@@ -969,8 +969,8 @@ select {
|
|
|
969
969
|
bottom: 0.25rem;
|
|
970
970
|
}
|
|
971
971
|
|
|
972
|
-
.s-bottom-
|
|
973
|
-
bottom:
|
|
972
|
+
.s-bottom-3 {
|
|
973
|
+
bottom: 0.75rem;
|
|
974
974
|
}
|
|
975
975
|
|
|
976
976
|
.s-bottom-6 {
|
|
@@ -1029,10 +1029,6 @@ select {
|
|
|
1029
1029
|
right: 0.75rem;
|
|
1030
1030
|
}
|
|
1031
1031
|
|
|
1032
|
-
.s-right-4 {
|
|
1033
|
-
right: 1rem;
|
|
1034
|
-
}
|
|
1035
|
-
|
|
1036
1032
|
.s-right-6 {
|
|
1037
1033
|
right: 1.5rem;
|
|
1038
1034
|
}
|
|
@@ -1061,10 +1057,6 @@ select {
|
|
|
1061
1057
|
top: 0.75rem;
|
|
1062
1058
|
}
|
|
1063
1059
|
|
|
1064
|
-
.s-top-4 {
|
|
1065
|
-
top: 1rem;
|
|
1066
|
-
}
|
|
1067
|
-
|
|
1068
1060
|
.s-top-6 {
|
|
1069
1061
|
top: 1.5rem;
|
|
1070
1062
|
}
|
|
@@ -1668,6 +1660,10 @@ select {
|
|
|
1668
1660
|
width: 250px;
|
|
1669
1661
|
}
|
|
1670
1662
|
|
|
1663
|
+
.s-w-\[300px\] {
|
|
1664
|
+
width: 300px;
|
|
1665
|
+
}
|
|
1666
|
+
|
|
1671
1667
|
.s-w-\[350px\] {
|
|
1672
1668
|
width: 350px;
|
|
1673
1669
|
}
|
|
@@ -1738,10 +1734,6 @@ select {
|
|
|
1738
1734
|
min-width: 0px;
|
|
1739
1735
|
}
|
|
1740
1736
|
|
|
1741
|
-
.s-min-w-\[1024px\] {
|
|
1742
|
-
min-width: 1024px;
|
|
1743
|
-
}
|
|
1744
|
-
|
|
1745
1737
|
.s-min-w-\[20px\] {
|
|
1746
1738
|
min-width: 20px;
|
|
1747
1739
|
}
|
|
@@ -1754,6 +1746,10 @@ select {
|
|
|
1754
1746
|
min-width: 28px;
|
|
1755
1747
|
}
|
|
1756
1748
|
|
|
1749
|
+
.s-min-w-\[50vh\] {
|
|
1750
|
+
min-width: 50vh;
|
|
1751
|
+
}
|
|
1752
|
+
|
|
1757
1753
|
.s-min-w-\[8rem\] {
|
|
1758
1754
|
min-width: 8rem;
|
|
1759
1755
|
}
|
|
@@ -2364,6 +2360,10 @@ select {
|
|
|
2364
2360
|
border-radius: 0.375rem;
|
|
2365
2361
|
}
|
|
2366
2362
|
|
|
2363
|
+
.s-rounded-none {
|
|
2364
|
+
border-radius: 0px;
|
|
2365
|
+
}
|
|
2366
|
+
|
|
2367
2367
|
.s-rounded-sm {
|
|
2368
2368
|
border-radius: 0.125rem;
|
|
2369
2369
|
}
|
|
@@ -2386,6 +2386,10 @@ select {
|
|
|
2386
2386
|
border-width: 1px;
|
|
2387
2387
|
}
|
|
2388
2388
|
|
|
2389
|
+
.s-border-0 {
|
|
2390
|
+
border-width: 0px;
|
|
2391
|
+
}
|
|
2392
|
+
|
|
2389
2393
|
.s-border-b {
|
|
2390
2394
|
border-bottom-width: 1px;
|
|
2391
2395
|
}
|
|
@@ -4986,6 +4990,12 @@ select {
|
|
|
4986
4990
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
4987
4991
|
}
|
|
4988
4992
|
|
|
4993
|
+
.s-shadow-none {
|
|
4994
|
+
--tw-shadow: 0 0 #0000;
|
|
4995
|
+
--tw-shadow-colored: 0 0 #0000;
|
|
4996
|
+
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
4997
|
+
}
|
|
4998
|
+
|
|
4989
4999
|
.s-shadow-sm {
|
|
4990
5000
|
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
4991
5001
|
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
|
|
@@ -5003,6 +5013,12 @@ select {
|
|
|
5003
5013
|
outline-offset: 2px;
|
|
5004
5014
|
}
|
|
5005
5015
|
|
|
5016
|
+
.s-ring-0 {
|
|
5017
|
+
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
5018
|
+
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
|
5019
|
+
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
|
5020
|
+
}
|
|
5021
|
+
|
|
5006
5022
|
.s-ring-2 {
|
|
5007
5023
|
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
5008
5024
|
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
|
@@ -8593,10 +8609,18 @@ select {
|
|
|
8593
8609
|
}
|
|
8594
8610
|
|
|
8595
8611
|
@media (min-width: 640px) {
|
|
8612
|
+
.sm\:s-h-full {
|
|
8613
|
+
height: 100%;
|
|
8614
|
+
}
|
|
8615
|
+
|
|
8596
8616
|
.sm\:s-max-w-3xl {
|
|
8597
8617
|
max-width: 48rem;
|
|
8598
8618
|
}
|
|
8599
8619
|
|
|
8620
|
+
.sm\:s-max-w-full {
|
|
8621
|
+
max-width: 100%;
|
|
8622
|
+
}
|
|
8623
|
+
|
|
8600
8624
|
.sm\:s-max-w-md {
|
|
8601
8625
|
max-width: 28rem;
|
|
8602
8626
|
}
|
package/package.json
CHANGED
|
@@ -4,7 +4,13 @@ import { FocusScope } from "@radix-ui/react-focus-scope";
|
|
|
4
4
|
import { cva } from "class-variance-authority";
|
|
5
5
|
import * as React from "react";
|
|
6
6
|
|
|
7
|
-
import {
|
|
7
|
+
import {
|
|
8
|
+
Button,
|
|
9
|
+
ButtonProps,
|
|
10
|
+
Checkbox,
|
|
11
|
+
Label,
|
|
12
|
+
ScrollArea,
|
|
13
|
+
} from "@sparkle/components";
|
|
8
14
|
import { XMarkIcon } from "@sparkle/icons/app";
|
|
9
15
|
import { cn } from "@sparkle/lib/utils";
|
|
10
16
|
|
|
@@ -29,13 +35,14 @@ const DialogOverlay = React.forwardRef<
|
|
|
29
35
|
));
|
|
30
36
|
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
|
|
31
37
|
|
|
32
|
-
const DIALOG_SIZES = ["md", "lg", "xl"] as const;
|
|
38
|
+
const DIALOG_SIZES = ["md", "lg", "xl", "full"] as const;
|
|
33
39
|
type DialogSizeType = (typeof DIALOG_SIZES)[number];
|
|
34
40
|
|
|
35
41
|
const sizeClasses: Record<DialogSizeType, string> = {
|
|
36
42
|
md: "sm:s-max-w-md",
|
|
37
43
|
lg: "sm:s-max-w-xl",
|
|
38
44
|
xl: "sm:s-max-w-3xl",
|
|
45
|
+
full: "sm:s-max-w-full sm:s-h-full",
|
|
39
46
|
};
|
|
40
47
|
|
|
41
48
|
const dialogVariants = cva(
|
|
@@ -90,12 +97,16 @@ const DialogContent = React.forwardRef<
|
|
|
90
97
|
DialogContent.displayName = DialogPrimitive.Content.displayName;
|
|
91
98
|
|
|
92
99
|
interface NewDialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
100
|
+
buttonSize?: ButtonProps["size"];
|
|
101
|
+
buttonVariant?: ButtonProps["variant"];
|
|
93
102
|
hideButton?: boolean;
|
|
94
103
|
}
|
|
95
104
|
|
|
96
105
|
const DialogHeader = ({
|
|
97
106
|
className,
|
|
98
107
|
children,
|
|
108
|
+
buttonSize = "mini",
|
|
109
|
+
buttonVariant = "ghost",
|
|
99
110
|
hideButton = false,
|
|
100
111
|
...props
|
|
101
112
|
}: NewDialogHeaderProps) => (
|
|
@@ -108,7 +119,9 @@ const DialogHeader = ({
|
|
|
108
119
|
>
|
|
109
120
|
{children}
|
|
110
121
|
<DialogClose asChild className="s-absolute s-right-3 s-top-3">
|
|
111
|
-
{!hideButton &&
|
|
122
|
+
{!hideButton && (
|
|
123
|
+
<Button icon={XMarkIcon} variant={buttonVariant} size={buttonSize} />
|
|
124
|
+
)}
|
|
112
125
|
</DialogClose>
|
|
113
126
|
</div>
|
|
114
127
|
);
|