@mailstep/design-system 0.13.3 → 0.13.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.13.3",
+  "version": "0.13.5",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

package/ui/Blocks/Header/components/UserMenu/index.js

@@ -6,8 +6,8 @@ import { UserInfoBlock } from "./components/UserInfo/index.js";
 import { useLogout } from "./hooks/useLogout.js";
 import { DropdownContentWrap, Line } from "./styles.js";
 import { useRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { th, useTheme } from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Trans } from "@lingui/react";
 //#region packages/ui/Blocks/Header/components/UserMenu/index.tsx
 const UserMenu = ({ user, onLogout, hasUserMenu, userMenuOverride, withInitials, withChevron, withName, ignoreClickOutsideClosest }) => {

package/ui/Blocks/HidePrint/HidePrint.js

@@ -1,6 +1,6 @@
 import "react";
-import styled from "styled-components";
 import { jsx } from "react/jsx-runtime";
+import styled from "styled-components";
 //#region packages/ui/Blocks/HidePrint/HidePrint.tsx
 const HideWrapper = styled.div`
   display: contents;

package/ui/Blocks/ImageList/ImageList.js

@@ -1,4 +1,5 @@
 import Icon from "../../Elements/Icon/Icon.js";
+import { useImageDownload } from "../LightBox/hooks/useImageDownload.js";
 import { useLightBox } from "../LightBox/hooks/useLightBox.js";
 import LightBox_default from "../LightBox/index.js";
 import { AddPhoto } from "./components/AddPhoto/index.js";
@@ -7,11 +8,11 @@ import { useControls } from "./hooks/useControls.js";
 import { useOnElementClick } from "./hooks/useOnElementClick.js";
 import { Control, ImageListContainer } from "./styles.js";
 import { useRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { x } from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useDraggable } from "react-use-draggable-scroll";
 //#region packages/ui/Blocks/ImageList/ImageList.tsx
-const ImageList = ({ onImageUpload, onImageRemove, onImageClick, lightBoxAction, lightBoxActionTitle, images, isDisabled, selectable, max }) => {
+const ImageList = ({ onImageUpload, onImageRemove, onImageClick, lightBoxAction, lightBoxActionTitle, images, isDisabled, selectable, max, downloadable, onImageDownload, downloadTitle }) => {
 	const ref = useRef(null);
 	const { events } = useDraggable(ref, { isMounted: !!images?.length });
 	const { isLightBoxOpen, onCloseLightBox, onOpenLightBox, lightBoxData } = useLightBox();
@@ -24,20 +25,22 @@ const ImageList = ({ onImageUpload, onImageRemove, onImageClick, lightBoxAction,
 		max,
 		total: images?.length
 	});
+	const { getDownloadHandler } = useImageDownload({
+		downloadable,
+		onImageDownload
+	});
 	return /* @__PURE__ */ jsxs(x.div, {
 		display: "flex",
 		alignItems: "center",
 		children: [
 			/* @__PURE__ */ jsx(AddPhoto, {
 				onImageUpload,
-				isDisabled,
-				hasRemove: !!onImageRemove
+				isDisabled
 			}),
 			hasControls && /* @__PURE__ */ jsx(Control, {
 				onClick: moveList(-1),
 				isLeft: true,
 				isDisabled: position === 0,
-				hasRemove: !!onImageRemove,
 				children: /* @__PURE__ */ jsx(Icon, {
 					icon: "lessThen",
 					size: "24px"
@@ -49,6 +52,8 @@ const ImageList = ({ onImageUpload, onImageRemove, onImageClick, lightBoxAction,
 				children: images.map((item, index) => /* @__PURE__ */ jsx(ImageElement, {
 					imageUrl: item.smallUrl ?? item.url,
 					onImageRemove: onImageRemove?.(item.id),
+					onImageDownload: getDownloadHandler(item),
+					downloadTitle,
 					onClick: handleOnClick(item, index),
 					isDisabled,
 					label: item?.label,
@@ -59,7 +64,6 @@ const ImageList = ({ onImageUpload, onImageRemove, onImageClick, lightBoxAction,
 			hasControls && /* @__PURE__ */ jsx(Control, {
 				onClick: moveList(1),
 				isDisabled: !!images && !!max && position >= images?.length - max,
-				hasRemove: !!onImageRemove,
 				children: /* @__PURE__ */ jsx(Icon, {
 					icon: "greaterThan",
 					size: "24px"
@@ -71,7 +75,10 @@ const ImageList = ({ onImageUpload, onImageRemove, onImageClick, lightBoxAction,
 				onCloseLightBox,
 				lightBoxAction,
 				lightBoxActionTitle,
-				images
+				images,
+				downloadable,
+				onImageDownload,
+				downloadTitle
 			})
 		]
 	});

package/ui/Blocks/ImageList/components/AddPhoto/index.d.ts

@@ -3,7 +3,6 @@ import { type ImageUploadProps } from '../../types';
 type AddPhotoProps = {
     onImageUpload?: (props: ImageUploadProps) => Promise<void>;
     isDisabled?: boolean;
-    hasRemove?: boolean;
 };
 export declare const AddPhoto: FC<AddPhotoProps>;
 export {};

package/ui/Blocks/ImageList/components/AddPhoto/index.js

@@ -6,12 +6,11 @@ import { useImageUpload } from "./hooks/useImageUpload.js";
 import { Container, ErrorWrapper, HiddenInput, Wrapper } from "./styles.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region packages/ui/Blocks/ImageList/components/AddPhoto/index.tsx
-const AddPhoto = ({ onImageUpload, isDisabled, hasRemove }) => {
+const AddPhoto = ({ onImageUpload, isDisabled }) => {
 	const { handleImageUpload, hasInvalidFormat } = useImageUpload({ onImageUpload });
 	if (!onImageUpload) return null;
 	return /* @__PURE__ */ jsxs(Wrapper, { children: [/* @__PURE__ */ jsxs(Container, {
 		isDisabled,
-		hasRemove,
 		children: [/* @__PURE__ */ jsx(HiddenInput, {
 			disabled: isDisabled,
 			onChange: handleImageUpload,
@@ -22,13 +21,10 @@ const AddPhoto = ({ onImageUpload, isDisabled, hasRemove }) => {
 			width: "36",
 			height: "36"
 		})]
-	}), hasInvalidFormat && /* @__PURE__ */ jsx(ErrorWrapper, {
-		hasRemove,
-		children: /* @__PURE__ */ jsx(ErrorMessage, {
-			appearance: "inline",
-			children: "Unsupported file format"
-		})
-	})] });
+	}), hasInvalidFormat && /* @__PURE__ */ jsx(ErrorWrapper, { children: /* @__PURE__ */ jsx(ErrorMessage, {
+		appearance: "inline",
+		children: "Unsupported file format"
+	}) })] });
 };
 //#endregion
 export { AddPhoto };

package/ui/Blocks/ImageList/components/AddPhoto/styles.d.ts

@@ -1,9 +1,6 @@
 export declare const Container: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     isDisabled?: boolean;
-    hasRemove?: boolean;
 }, never>;
 export declare const HiddenInput: import("styled-components").StyledComponent<"input", import("@xstyled/styled-components").Theme, {}, never>;
 export declare const Wrapper: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
-export declare const ErrorWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
-    hasRemove?: boolean;
-}, never>;
+export declare const ErrorWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;

package/ui/Blocks/ImageList/components/AddPhoto/styles.js

@@ -3,6 +3,7 @@ import styled$1, { th } from "@xstyled/styled-components";
 const Container = styled$1.div`
   position: relative;
   flex-shrink: 0;
+  box-sizing: border-box;
   transition: all 0.2s linear;
   height: 85px !important;
   width: 85px !important;
@@ -15,7 +16,6 @@ const Container = styled$1.div`
   cursor: pointer;
   margin-right: 15px;
   opacity: ${({ isDisabled }) => isDisabled ? .6 : 1};
-  margin-top: ${({ hasRemove }) => hasRemove ? "15px" : ""};
 `;
 const HiddenInput = styled$1.input`
   opacity: 0;
@@ -32,7 +32,7 @@ const Wrapper = styled$1.div`
 `;
 const ErrorWrapper = styled$1.div`
   position: absolute;
-  top: ${({ hasRemove }) => hasRemove ? "100px" : "85px"};
+  top: 85px;
   left: 0;
   width: 85px;
   line-height: 1.2;

package/ui/Blocks/ImageList/components/CloseButton/index.js

@@ -9,8 +9,8 @@ const CloseButton = ({ onImageRemove, isDisabled }) => {
 		isDisabled,
 		children: /* @__PURE__ */ jsx(Icon, {
 			icon: "close",
-			size: "22px",
-			fill: isDisabled ? "magenta60" : "red1"
+			size: "14px",
+			fill: "gray1"
 		})
 	});
 };

package/ui/Blocks/ImageList/components/CloseButton/styles.js

@@ -2,17 +2,22 @@ import styled$1, { th } from "@xstyled/styled-components";
 //#region packages/ui/Blocks/ImageList/components/CloseButton/styles.ts
 const Container = styled$1.div`
   position: absolute;
-  top: 0;
-  right: 0;
-  width: 30px;
-  height: 30px;
-  background-color: ${({ isDisabled }) => th.color(isDisabled ? "bgLightGray1" : "red20")};
+  top: 2px;
+  right: 2px;
+  width: 24px;
+  height: 24px;
+  background-color: ${th.color("bgLightGray1")};
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
-  cursor: pointer;
-  transition: all 0.2s linear;
+  cursor: ${({ isDisabled }) => isDisabled ? "default" : "pointer"};
+  opacity: ${({ isDisabled }) => isDisabled ? .5 : .8};
+  transition: opacity 0.2s linear;
+
+  &:hover {
+    opacity: ${({ isDisabled }) => isDisabled ? .5 : 1};
+  }
 `;
 //#endregion
 export { Container };

package/ui/Blocks/ImageList/components/ImageElement/index.d.ts

@@ -2,6 +2,8 @@ import { type FC } from 'react';
 interface ImageElementProps {
     label?: string;
     onImageRemove?: () => void;
+    onImageDownload?: () => void;
+    downloadTitle?: string;
     onClick: () => void;
     imageUrl: string | undefined;
     isDisabled?: boolean;

package/ui/Blocks/ImageList/components/ImageElement/index.js

@@ -1,26 +1,28 @@
+import { DownloadButton } from "../../../LightBox/components/DownloadButton/index.js";
 import { CloseButton } from "../CloseButton/index.js";
 import { ImageTag } from "../ImageTag/index.js";
-import { Image, ImageWrapper } from "./styles.js";
+import { DownloadButtonWrapper, Image, ImageWrapper } from "./styles.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region packages/ui/Blocks/ImageList/components/ImageElement/index.tsx
-const ImageElement = ({ label, onImageRemove, isDisabled, onClick, imageUrl, selected, visible }) => {
+const ImageElement = ({ label, onImageRemove, onImageDownload, downloadTitle, isDisabled, onClick, imageUrl, selected, visible }) => {
 	if (!imageUrl) return null;
 	return /* @__PURE__ */ jsxs(ImageWrapper, {
 		visible,
-		hasImageRemove: !!onImageRemove,
+		selected,
 		children: [
 			/* @__PURE__ */ jsx(Image, {
 				src: imageUrl,
 				alt: "",
-				width: "85px",
-				height: "85px",
-				onClick,
-				selected
+				onClick
 			}),
 			onImageRemove && /* @__PURE__ */ jsx(CloseButton, {
 				onImageRemove,
 				isDisabled
 			}),
+			onImageDownload && /* @__PURE__ */ jsx(DownloadButtonWrapper, { children: /* @__PURE__ */ jsx(DownloadButton, {
+				onImageDownload,
+				title: downloadTitle
+			}) }),
 			/* @__PURE__ */ jsx(ImageTag, { label })
 		]
 	});

package/ui/Blocks/ImageList/components/ImageElement/styles.d.ts

@@ -1,8 +1,6 @@
-export declare const Container: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
-export declare const Image: import("styled-components").StyledComponent<"img", import("@xstyled/styled-components").Theme, {
-    selected?: boolean;
-}, never>;
 export declare const ImageWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     visible: boolean;
-    hasImageRemove: boolean;
+    selected?: boolean;
 }, never>;
+export declare const Image: import("styled-components").StyledComponent<"img", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const DownloadButtonWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;

package/ui/Blocks/ImageList/components/ImageElement/styles.js

@@ -1,22 +1,30 @@
-import styled$1 from "@xstyled/styled-components";
-import { th as th$1 } from "@xstyled/system";
+import styled$1, { th } from "@xstyled/styled-components";
 //#region packages/ui/Blocks/ImageList/components/ImageElement/styles.ts
-const Container = styled$1.div``;
-const Image = styled$1.img`
-  border-radius: ${th$1.radius("lg")};
-  border: ${({ selected }) => selected ? `3px solid` : "0"};
-  border-color: red1;
-  cursor: pointer;
-  transition: all 0.2s;
-`;
 const ImageWrapper = styled$1.div`
   position: relative;
-  padding-right: ${({ hasImageRemove }) => hasImageRemove ? "15px" : "0"};
-  padding-top: ${({ hasImageRemove }) => hasImageRemove ? "15px" : "0"};
-  width: 100px;
-  height: ${({ hasImageRemove }) => hasImageRemove ? "100px" : "85px"};
+  flex-shrink: 0;
+  box-sizing: border-box;
+  width: 85px;
+  height: 85px;
+  border: ${({ selected }) => th.border(selected ? "mediumSlim" : "slim")};
+  border-color: ${({ selected }) => th.color(selected ? "red1" : "lightGray6")};
+  border-radius: ${th.radius("lg")};
+  overflow: hidden;
   display: ${({ visible }) => visible ? "block" : "none"};
   user-select: none;
+  transition: border-color 0.2s;
+`;
+const Image = styled$1.img`
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  cursor: pointer;
+`;
+const DownloadButtonWrapper = styled$1.div`
+  position: absolute;
+  right: 2px;
+  bottom: 2px;
 `;
 //#endregion
-export { Container, Image, ImageWrapper };
+export { DownloadButtonWrapper, Image, ImageWrapper };

package/ui/Blocks/ImageList/styles.d.ts

@@ -2,5 +2,4 @@ export declare const ImageListContainer: import("styled-components").StyledCompo
 export declare const Control: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     isLeft?: boolean;
     isDisabled: boolean;
-    hasRemove?: boolean;
 }, never>;

package/ui/Blocks/ImageList/styles.js

@@ -6,6 +6,7 @@ const ImageListContainer = styled$1.div`
   -ms-overflow-style: none;
   scrollbar-width: none;
   position: relative;
+  gap: 15px;
 
   &::-webkit-scrollbar {
     display: none;
@@ -14,7 +15,6 @@ const ImageListContainer = styled$1.div`
 const Control = styled$1.div`
   width: 24px;
   margin-right: ${({ isLeft }) => isLeft ? "15px" : 0};
-  margin-top: ${({ hasRemove }) => hasRemove ? "15px" : 0};
   cursor: pointer;
   display: flex;
   transition: all 0.4s;

package/ui/Blocks/ImageList/types.d.ts

@@ -14,4 +14,7 @@ export interface ImageListProps {
     isDisabled?: boolean;
     selectable?: boolean;
     max?: number;
+    downloadable?: boolean;
+    onImageDownload?: (item: ImageData) => () => void;
+    downloadTitle?: string;
 }

package/ui/Blocks/LightBox/LightBox.js

@@ -1,11 +1,21 @@
 import Button from "../../Elements/Button/Button.js";
 import "../../Elements/Button/index.js";
 import Modal_default from "../Modal/index.js";
-import { ButtonContainer, Container, Description, Image } from "./styles.js";
+import { DownloadButton } from "./components/DownloadButton/index.js";
+import { useImageDownload } from "./hooks/useImageDownload.js";
+import { ButtonContainer, Container, Description, DownloadButtonWrapper, Image } from "./styles.js";
+import { useCallback } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Swiper, SwiperSlide } from "swiper/react";
 //#region packages/ui/Blocks/LightBox/LightBox.tsx
-const LightBox = ({ isLightBoxOpen, onCloseLightBox, lightBoxAction, lightBoxActionTitle, images, initialSlide = 0 }) => {
+const LightBox = ({ isLightBoxOpen, onCloseLightBox, lightBoxAction, lightBoxActionTitle, images, initialSlide = 0, downloadable, onImageDownload, downloadTitle }) => {
+	const { getDownloadHandler } = useImageDownload({
+		downloadable,
+		onImageDownload
+	});
+	const handleLightBoxAction = useCallback((id) => () => {
+		lightBoxAction?.(id)();
+	}, [lightBoxAction]);
 	if (!images?.length) return null;
 	return /* @__PURE__ */ jsx(Modal_default, {
 		isShown: isLightBoxOpen,
@@ -16,24 +26,32 @@ const LightBox = ({ isLightBoxOpen, onCloseLightBox, lightBoxAction, lightBoxAct
 			initialSlide,
 			slidesPerView: 1,
 			autoHeight: true,
-			children: images.map((item) => /* @__PURE__ */ jsx(SwiperSlide, { children: /* @__PURE__ */ jsxs(Container, { children: [
-				/* @__PURE__ */ jsx(Image, {
-					src: item.originalUrl ?? item.url,
-					loading: "lazy",
-					alt: ""
-				}),
-				(item.date || item.description) && /* @__PURE__ */ jsxs(Description, { children: [
-					item.date,
-					" ",
-					item.description
-				] }),
-				!!item.withLightBoxAction && lightBoxAction && lightBoxActionTitle && /* @__PURE__ */ jsx(ButtonContainer, { children: /* @__PURE__ */ jsx(Button, {
-					onClick: lightBoxAction(item.id),
-					appearance: "primary",
-					variant: "default",
-					children: lightBoxActionTitle
-				}) })
-			] }) }, item.id))
+			children: images.map((item) => {
+				const handleImageDownload = getDownloadHandler(item);
+				return /* @__PURE__ */ jsx(SwiperSlide, { children: /* @__PURE__ */ jsxs(Container, { children: [
+					/* @__PURE__ */ jsx(Image, {
+						src: item.originalUrl ?? item.url,
+						loading: "lazy",
+						alt: ""
+					}),
+					handleImageDownload && /* @__PURE__ */ jsx(DownloadButtonWrapper, { children: /* @__PURE__ */ jsx(DownloadButton, {
+						onImageDownload: handleImageDownload,
+						title: downloadTitle,
+						isLarge: true
+					}) }),
+					(item.date || item.description) && /* @__PURE__ */ jsxs(Description, { children: [
+						item.date,
+						" ",
+						item.description
+					] }),
+					!!item.withLightBoxAction && lightBoxAction && lightBoxActionTitle && /* @__PURE__ */ jsx(ButtonContainer, { children: /* @__PURE__ */ jsx(Button, {
+						onClick: handleLightBoxAction(item.id),
+						appearance: "primary",
+						variant: "default",
+						children: lightBoxActionTitle
+					}) })
+				] }) }, item.id);
+			})
 		})
 	});
 };

package/ui/Blocks/LightBox/components/DownloadButton/index.d.ts

@@ -0,0 +1,8 @@
+import { type FC } from 'react';
+type DownloadButtonProps = {
+    onImageDownload: () => void;
+    title?: string;
+    isLarge?: boolean;
+};
+export declare const DownloadButton: FC<DownloadButtonProps>;
+export {};

package/ui/Blocks/LightBox/components/DownloadButton/index.js

@@ -0,0 +1,21 @@
+import Icon from "../../../../Elements/Icon/Icon.js";
+import "../../../../Elements/Icon/index.js";
+import { Container } from "./styles.js";
+import { jsx } from "react/jsx-runtime";
+//#region packages/ui/Blocks/LightBox/components/DownloadButton/index.tsx
+const DownloadButton = ({ onImageDownload, title = "Download", isLarge }) => {
+	return /* @__PURE__ */ jsx(Container, {
+		type: "button",
+		isLarge,
+		onClick: onImageDownload,
+		title,
+		"aria-label": title,
+		children: /* @__PURE__ */ jsx(Icon, {
+			icon: "download",
+			size: isLarge ? "18px" : "14px",
+			fill: "gray1"
+		})
+	});
+};
+//#endregion
+export { DownloadButton };

package/ui/Blocks/LightBox/components/DownloadButton/styles.d.ts

@@ -0,0 +1,3 @@
+export declare const Container: import("styled-components").StyledComponent<"button", import("@xstyled/styled-components").Theme, {
+    isLarge?: boolean;
+}, never>;

package/ui/Blocks/LightBox/components/DownloadButton/styles.js

@@ -0,0 +1,22 @@
+import styled$1, { th } from "@xstyled/styled-components";
+//#region packages/ui/Blocks/LightBox/components/DownloadButton/styles.ts
+const Container = styled$1.button`
+  width: ${({ isLarge }) => isLarge ? "34px" : "24px"};
+  height: ${({ isLarge }) => isLarge ? "34px" : "24px"};
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background-color: ${({ isLarge }) => th.color(isLarge ? "bgLightGray2" : "bgLightGray1")};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  opacity: 0.8;
+  transition: opacity 0.2s linear;
+
+  &:hover {
+    opacity: 1;
+  }
+`;
+//#endregion
+export { Container };

package/ui/Blocks/LightBox/hooks/useImageDownload.d.ts

@@ -0,0 +1,10 @@
+import { type ImageData } from '../types';
+type Props = {
+    downloadable?: boolean;
+    onImageDownload?: (item: ImageData) => () => void;
+};
+type HookType = (props: Props) => {
+    getDownloadHandler: (item: ImageData) => (() => void) | undefined;
+};
+export declare const useImageDownload: HookType;
+export {};

package/ui/Blocks/LightBox/hooks/useImageDownload.js

@@ -0,0 +1,19 @@
+import { downloadImage } from "../utils/downloadImage.js";
+import { useCallback } from "react";
+//#region packages/ui/Blocks/LightBox/hooks/useImageDownload.ts
+const useImageDownload = ({ downloadable, onImageDownload }) => {
+	return { getDownloadHandler: useCallback((item) => {
+		if (onImageDownload) return onImageDownload(item);
+		if (!downloadable) return void 0;
+		const url = item.originalUrl ?? item.url;
+		if (!url) return void 0;
+		return () => {
+			downloadImage({
+				url,
+				fileName: item.originalName
+			});
+		};
+	}, [downloadable, onImageDownload]) };
+};
+//#endregion
+export { useImageDownload };

package/ui/Blocks/LightBox/styles.d.ts

@@ -2,3 +2,4 @@ export declare const Container: import("styled-components").StyledComponent<"div
 export declare const Image: import("styled-components").StyledComponent<"img", import("@xstyled/styled-components").Theme, {}, never>;
 export declare const ButtonContainer: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
 export declare const Description: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const DownloadButtonWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;

package/ui/Blocks/LightBox/styles.js

@@ -24,5 +24,10 @@ const Description = styled$1.div`
   bottom: 0px;
   background: rgba(255, 255, 255, 0.8);
 `;
+const DownloadButtonWrapper = styled$1.div`
+  position: absolute;
+  top: 10px;
+  left: 10px;
+`;
 //#endregion
-export { ButtonContainer, Container, Description, Image };
+export { ButtonContainer, Container, Description, DownloadButtonWrapper, Image };

package/ui/Blocks/LightBox/types.d.ts

@@ -14,6 +14,7 @@ export interface ImageData {
     date?: string;
     smallUrl?: string;
     originalUrl?: string;
+    originalName?: string | null;
     description?: string | null;
     withLightBoxAction?: boolean;
 }
@@ -24,4 +25,7 @@ export interface LightBoxProps {
     lightBoxAction?: (id?: string) => () => Promise<void>;
     lightBoxActionTitle?: string;
     initialSlide?: number;
+    downloadable?: boolean;
+    onImageDownload?: (item: ImageData) => () => void;
+    downloadTitle?: string;
 }

package/ui/Blocks/LightBox/utils/downloadImage.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    url: string;
+    fileName?: string | null;
+};
+type FuncType = (props: Props) => Promise<void>;
+export declare const downloadImage: FuncType;
+export {};

package/ui/Blocks/LightBox/utils/downloadImage.js

@@ -0,0 +1,21 @@
+import { getImageFileName } from "./getImageFileName.js";
+//#region packages/ui/Blocks/LightBox/utils/downloadImage.ts
+const downloadImage = async ({ url, fileName }) => {
+	try {
+		const response = await fetch(url);
+		if (!response.ok) throw new Error(`Image download failed with status ${response.status}`);
+		const objectUrl = URL.createObjectURL(await response.blob());
+		const link = document.createElement("a");
+		link.href = objectUrl;
+		link.download = getImageFileName({
+			url,
+			fileName
+		});
+		link.click();
+		URL.revokeObjectURL(objectUrl);
+	} catch {
+		window.open(url, "_blank", "noopener,noreferrer");
+	}
+};
+//#endregion
+export { downloadImage };

package/ui/Blocks/LightBox/utils/getImageFileName.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    url: string;
+    fileName?: string | null;
+};
+type FuncType = (props: Props) => string;
+export declare const getImageFileName: FuncType;
+export {};

package/ui/Blocks/LightBox/utils/getImageFileName.js

@@ -0,0 +1,8 @@
+//#region packages/ui/Blocks/LightBox/utils/getImageFileName.ts
+const getImageFileName = ({ url, fileName }) => {
+	if (fileName) return fileName;
+	const lastSegment = new URL(url, window.location.href).pathname.split("/").pop();
+	return lastSegment ? decodeURIComponent(lastSegment) : "image";
+};
+//#endregion
+export { getImageFileName };

package/ui/Blocks/LoginPage/LoginPage.js

@@ -5,8 +5,8 @@ import { LoginForm } from "./components/LoginForm.js";
 import "./utils/links.js";
 import { SocialLinks } from "./components/SocialLinks.js";
 import { CardBodyWithLanguage, LanguageBox, LogoWrapper, MailTo, MainLogo, Version, Wrapper } from "./styles.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { x } from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Trans } from "@lingui/react";
 //#region packages/ui/Blocks/LoginPage/LoginPage.tsx
 const Login = ({ onSubmit, activeLanguage, onLanguageChange, children, brand, brandVariant, isSubmitting, isSubmitDisabled, withDistributionCenterSelect, distributionCenterOptions, selectedDistributionCenter, onChangeDistributionCenter, languageItems, version, backgroundImage, admin, hasSupport = true, hasSocialLinks = true, withPassword = true, withLogin = true, loginLabel, passwordLabel, formHeader }) => {

package/ui/Blocks/LoginPage/components/LoginForm.js

@@ -1,9 +1,9 @@
-import Button from "../../../Elements/Button/Button.js";
-import SingleSelect from "../../../Elements/SingleSelect/SingleSelect.js";
 import { Input } from "../../../Forms/Input/Input.js";
+import SingleSelect from "../../../Elements/SingleSelect/SingleSelect.js";
+import Button from "../../../Elements/Button/Button.js";
 import { useCallback, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import styled$1, { x } from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { i18n } from "@lingui/core";
 import { Trans } from "@lingui/react";
 //#region packages/ui/Blocks/LoginPage/components/LoginForm.tsx