@mailstep/design-system 0.8.26 → 0.8.27-beta.1

package/ui/Blocks/ImageList/ImageList.js

@@ -0,0 +1,80 @@
+import Icon from "../../Elements/Icon/Icon.js";
+import { useLightBox } from "../LightBox/hooks/useLightBox.js";
+import LightBox_default from "../LightBox/index.js";
+import { AddPhoto } from "./components/AddPhoto/index.js";
+import { ImageElement } from "./components/ImageElement/index.js";
+import { useControls } from "./hooks/useControls.js";
+import { useOnElementClick } from "./hooks/useOnElementClick.js";
+import { Control, ImageListContainer } from "./styles.js";
+import { useRef } from "react";
+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 ref = useRef(null);
+	const { events } = useDraggable(ref, { isMounted: !!images?.length });
+	const { isLightBoxOpen, onCloseLightBox, onOpenLightBox, lightBoxData } = useLightBox();
+	const { handleOnClick, selected } = useOnElementClick({
+		onImageClick,
+		onOpenLightBox,
+		selectable
+	});
+	const { hasControls, position, moveList } = useControls({
+		max,
+		total: images?.length
+	});
+	return /* @__PURE__ */ jsxs(x.div, {
+		display: "flex",
+		alignItems: "center",
+		children: [
+			/* @__PURE__ */ jsx(AddPhoto, {
+				onImageUpload,
+				isDisabled,
+				hasRemove: !!onImageRemove
+			}),
+			hasControls && /* @__PURE__ */ jsx(Control, {
+				onClick: moveList(-1),
+				isLeft: true,
+				isDisabled: position === 0,
+				hasRemove: !!onImageRemove,
+				children: /* @__PURE__ */ jsx(Icon, {
+					icon: "lessThen",
+					size: "24px"
+				})
+			}),
+			images && /* @__PURE__ */ jsx(ImageListContainer, {
+				ref,
+				...events,
+				children: images.map((item, index) => /* @__PURE__ */ jsx(ImageElement, {
+					imageUrl: item.smallUrl ?? item.url,
+					onImageRemove: onImageRemove?.(item.id),
+					onClick: handleOnClick(item, index),
+					isDisabled,
+					label: item?.label,
+					selected: index === selected,
+					visible: !max || index >= position && index < position + max
+				}, item.id ?? index))
+			}),
+			hasControls && /* @__PURE__ */ jsx(Control, {
+				onClick: moveList(1),
+				isDisabled: !!images && !!max && position >= images?.length - max,
+				hasRemove: !!onImageRemove,
+				children: /* @__PURE__ */ jsx(Icon, {
+					icon: "greaterThan",
+					size: "24px"
+				})
+			}),
+			/* @__PURE__ */ jsx(LightBox_default, {
+				initialSlide: lightBoxData?.initialSlide,
+				isLightBoxOpen,
+				onCloseLightBox,
+				lightBoxAction,
+				lightBoxActionTitle,
+				images
+			})
+		]
+	});
+};
+//#endregion
+export { ImageList };

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

@@ -1,6 +1,5 @@
-import { FC } from 'react';
-import { ImageUploadProps } from '../../types';
-
+import { type FC } from 'react';
+import { type ImageUploadProps } from '../../types';
 interface AddPhotoProps {
     onImageUpload?: (props: ImageUploadProps) => Promise<void>;
     isDisabled?: boolean;

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

@@ -0,0 +1,36 @@
+import { AddPhoto as AddPhoto$1 } from "../../../../Elements/Icon/icons/AddPhoto.js";
+import { Container, HiddenInput } from "./styles.js";
+import { useCallback } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Blocks/ImageList/components/AddPhoto/index.tsx
+const AddPhoto = ({ onImageUpload, isDisabled, hasRemove }) => {
+	const handleImageUpload = useCallback((event) => {
+		if (!event.target?.files?.[0]) return;
+		const reader = new FileReader();
+		reader.readAsDataURL(event.target.files[0]);
+		reader.onload = async () => {
+			await onImageUpload?.({
+				base64image: reader.result?.split(",").pop(),
+				base64WithDataDeclaration: reader.result,
+				file: event.target.files?.[0]
+			});
+		};
+	}, [onImageUpload]);
+	if (!onImageUpload) return null;
+	return /* @__PURE__ */ jsxs(Container, {
+		isDisabled,
+		hasRemove,
+		children: [/* @__PURE__ */ jsx(HiddenInput, {
+			disabled: isDisabled,
+			onChange: handleImageUpload,
+			type: "file",
+			accept: "image/*;capture=camera",
+			capture: "environment"
+		}), /* @__PURE__ */ jsx(AddPhoto$1, {
+			width: "36",
+			height: "36"
+		})]
+	});
+};
+//#endregion
+export { AddPhoto };

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

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

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

@@ -0,0 +1,30 @@
+import styled$1, { th } from "@xstyled/styled-components";
+//#region packages/ui/Blocks/ImageList/components/AddPhoto/styles.ts
+const Container = styled$1.div`
+  position: relative;
+  flex-shrink: 0;
+  transition: all 0.2s linear;
+  height: 85px !important;
+  width: 85px !important;
+  border-radius: ${th.radius("lg")};
+  border: ${th.border("mediumSlim")};
+  border-color: ${th.color("red1")};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  margin-right: 15px;
+  opacity: ${({ isDisabled }) => isDisabled ? .6 : 1};
+  margin-top: ${({ hasRemove }) => hasRemove ? "15px" : ""};
+`;
+const HiddenInput = styled$1.input`
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+`;
+//#endregion
+export { Container, HiddenInput };

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

@@ -1,5 +1,4 @@
-import { FC } from 'react';
-
+import { type FC } from 'react';
 interface CloseButtonProps {
     onImageRemove: () => void;
     isDisabled?: boolean;

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

@@ -0,0 +1,18 @@
+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/ImageList/components/CloseButton/index.tsx
+const CloseButton = ({ onImageRemove, isDisabled }) => {
+	return /* @__PURE__ */ jsx(Container, {
+		onClick: !isDisabled ? onImageRemove : void 0,
+		isDisabled,
+		children: /* @__PURE__ */ jsx(Icon, {
+			icon: "close",
+			size: "22px",
+			fill: isDisabled ? "magenta60" : "red1"
+		})
+	});
+};
+//#endregion
+export { CloseButton };

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

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

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

@@ -0,0 +1,18 @@
+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")};
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s linear;
+`;
+//#endregion
+export { Container };

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

@@ -1,5 +1,4 @@
-import { FC } from 'react';
-
+import { type FC } from 'react';
 interface ImageElementProps {
     label?: string;
     onImageRemove?: () => void;

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

@@ -0,0 +1,29 @@
+import { CloseButton } from "../CloseButton/index.js";
+import { ImageTag } from "../ImageTag/index.js";
+import { 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 }) => {
+	if (!imageUrl) return null;
+	return /* @__PURE__ */ jsxs(ImageWrapper, {
+		visible,
+		hasImageRemove: !!onImageRemove,
+		children: [
+			/* @__PURE__ */ jsx(Image, {
+				src: imageUrl,
+				alt: "",
+				width: "85px",
+				height: "85px",
+				onClick,
+				selected
+			}),
+			onImageRemove && /* @__PURE__ */ jsx(CloseButton, {
+				onImageRemove,
+				isDisabled
+			}),
+			/* @__PURE__ */ jsx(ImageTag, { label })
+		]
+	});
+};
+//#endregion
+export { ImageElement };

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

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

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

@@ -0,0 +1,22 @@
+import styled$1 from "@xstyled/styled-components";
+import { th as th$1 } from "/home/linomorfed/Projects/design-system/node_modules/@xstyled/system/dist/index.mjs";
+//#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"};
+  display: ${({ visible }) => visible ? "block" : "none"};
+  user-select: none;
+`;
+//#endregion
+export { Container, Image, ImageWrapper };

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

@@ -1,5 +1,4 @@
-import { FC } from 'react';
-
+import { type FC } from 'react';
 interface ImageTagProps {
     label?: string;
 }

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

@@ -0,0 +1,15 @@
+import Tag_default from "../../../../Elements/Tag/index.js";
+import { Container } from "./styles.js";
+import { jsx } from "react/jsx-runtime";
+//#region packages/ui/Blocks/ImageList/components/ImageTag/index.tsx
+const ImageTag = ({ label }) => {
+	if (!label) return null;
+	return /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(Tag_default, {
+		size: "small",
+		color: "darkGreen",
+		textColor: "white",
+		children: /* @__PURE__ */ jsx("b", { children: label })
+	}) });
+};
+//#endregion
+export { ImageTag };

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

@@ -1 +1 @@
-export declare const Container: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const Container: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;

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

@@ -0,0 +1,9 @@
+import styled$1 from "@xstyled/styled-components";
+//#region packages/ui/Blocks/ImageList/components/ImageTag/styles.ts
+const Container = styled$1.div`
+  position: absolute;
+  bottom: 2px;
+  left: 2px;
+`;
+//#endregion
+export { Container };

package/ui/Blocks/ImageList/hooks/useControls.js

@@ -0,0 +1,14 @@
+import { useCallback, useState } from "react";
+//#region packages/ui/Blocks/ImageList/hooks/useControls.ts
+const useControls = ({ max, total = 0 }) => {
+	const [position, setPosition] = useState(0);
+	return {
+		moveList: useCallback((direction) => () => {
+			if (max) setPosition((position) => Math.min(Math.max(position + direction, 0), total - max));
+		}, [total]),
+		position,
+		hasControls: !!max && total > max
+	};
+};
+//#endregion
+export { useControls };

package/ui/Blocks/ImageList/hooks/useOnElementClick.d.ts

@@ -1,5 +1,4 @@
-import { ImageData } from '../../LightBox';
-
+import { type ImageData } from '../../LightBox';
 type Props = {
     onImageClick?: (item: ImageData) => void;
     onOpenLightBox: (index: number) => () => void;

package/ui/Blocks/ImageList/hooks/useOnElementClick.js

@@ -0,0 +1,15 @@
+import { useCallback, useState } from "react";
+//#region packages/ui/Blocks/ImageList/hooks/useOnElementClick.ts
+const useOnElementClick = ({ onImageClick, onOpenLightBox, selectable }) => {
+	const [selected, setSelected] = useState(-1);
+	return {
+		handleOnClick: useCallback((item, index) => () => {
+			if (onImageClick) onImageClick(item);
+			else onOpenLightBox(index)();
+			if (selectable) setSelected((selected) => selected !== index ? index : -1);
+		}, [onImageClick, onOpenLightBox]),
+		selected
+	};
+};
+//#endregion
+export { useOnElementClick };

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

@@ -1,6 +1,5 @@
 import { ImageList } from './ImageList';
-import { ImageData } from '../LightBox';
-
+import { type ImageData } from '../LightBox';
 export { type ImageUploadProps } from './types';
 export { type ImageData };
 export default ImageList;

package/ui/Blocks/ImageList/index.js

@@ -0,0 +1,5 @@
+import { ImageList } from "./ImageList.js";
+//#region packages/ui/Blocks/ImageList/index.ts
+var ImageList_default = ImageList;
+//#endregion
+export { ImageList_default as default };

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

@@ -1,8 +1,7 @@
 import { StoryObj } from '@storybook/react-webpack5';
-
 declare const meta: {
     title: string;
-    component: import('react').FC<import('../types').ImageListProps>;
+    component: import("react").FC<import("../types").ImageListProps>;
     tags: string[];
     argTypes: {};
 };

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

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

package/ui/Blocks/ImageList/styles.js

@@ -0,0 +1,29 @@
+import styled$1 from "@xstyled/styled-components";
+//#region packages/ui/Blocks/ImageList/styles.ts
+const ImageListContainer = styled$1.div`
+  display: flex;
+  overflow-x: scroll;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  position: relative;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;
+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;
+
+  color: ${({ isDisabled }) => isDisabled ? "gray" : "black"};
+
+  &:hover {
+    color: ${({ isDisabled }) => isDisabled ? "gray" : "red1"};
+  }
+`;
+//#endregion
+export { Control, ImageListContainer };

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

@@ -1,5 +1,4 @@
-import { ImageData } from '../LightBox';
-
+import { type ImageData } from '../LightBox';
 export interface ImageUploadProps {
     base64image?: string;
     base64WithDataDeclaration?: string;

package/ui/Blocks/ImageList/types.js

@@ -0,0 +1 @@
+export {};

package/ui/Blocks/LanguageSwitch/LanguageSwitch.d.ts

@@ -1,5 +1,4 @@
-import { FC } from 'react';
-import { LanguageSwitchProps } from './types';
-
+import type { FC } from 'react';
+import type { LanguageSwitchProps } from './types';
 declare const LanguageSwitch: FC<LanguageSwitchProps>;
 export default LanguageSwitch;

package/ui/Blocks/LanguageSwitch/LanguageSwitch.js

@@ -0,0 +1,53 @@
+import Icon from "../../Elements/Icon/Icon.js";
+import { DropdownMenu } from "../../Elements/DropdownMenu/DropdownMenu.js";
+import "../../Elements/DropdownMenu/index.js";
+import Popover from "../Popover/index.js";
+import { LanguageFlagWrap, LanguageSwitchWrap, StyledFlag } from "./styles.js";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Blocks/LanguageSwitch/LanguageSwitch.tsx
+const placementMap = {
+	left: "bottom-start",
+	right: "bottom-end"
+};
+const LanguageSwitch = ({ activeLanguage, onLanguageChange, languageItems, placement = "right", withTitle, languageFlagWrapBackgroundColor }) => {
+	const [flagDropdownVisible, setFlagDropdownVisible] = useState(false);
+	const flagWrapRef = useRef(null);
+	const onClose = useCallback(() => {
+		setFlagDropdownVisible(false);
+	}, []);
+	const handleFlagClick = useCallback(() => {
+		setFlagDropdownVisible(!flagDropdownVisible);
+	}, [flagDropdownVisible]);
+	const languageToggle = useCallback((languageCode) => () => {
+		onLanguageChange?.(languageCode);
+	}, [onLanguageChange]);
+	const activeLanguageObj = useMemo(() => languageItems?.find((language) => language.languageCode === activeLanguage), [activeLanguage, languageItems]);
+	const filteredLanguages = useMemo(() => languageItems?.filter((language) => language.languageCode !== activeLanguage), [languageItems, activeLanguage]);
+	const formattedLanguages = useMemo(() => filteredLanguages?.map(({ title, icon, languageCode }) => ({
+		title,
+		icon,
+		onClick: languageToggle(languageCode)
+	})), [filteredLanguages, languageToggle]);
+	if (!activeLanguageObj || !languageItems) return null;
+	return /* @__PURE__ */ jsxs(LanguageSwitchWrap, { children: [/* @__PURE__ */ jsxs(LanguageFlagWrap, {
+		ref: flagWrapRef,
+		onClick: handleFlagClick,
+		backgroundColor: languageFlagWrapBackgroundColor,
+		withTitle,
+		children: [/* @__PURE__ */ jsxs(StyledFlag, { children: [activeLanguageObj.icon, withTitle && activeLanguageObj.title] }), /* @__PURE__ */ jsx(Icon, {
+			icon: "chevronDown",
+			size: "10px"
+		})]
+	}), flagDropdownVisible && /* @__PURE__ */ jsx(Popover, {
+		parentRef: flagWrapRef,
+		onClose,
+		placement: placementMap[placement],
+		children: /* @__PURE__ */ jsx(DropdownMenu, {
+			showMenu: true,
+			items: formattedLanguages
+		})
+	})] });
+};
+//#endregion
+export { LanguageSwitch as default };

package/ui/Blocks/LanguageSwitch/index.d.ts

@@ -1,5 +1,4 @@
-import { default as LanguageSwitch } from './LanguageSwitch';
+import LanguageSwitch from './LanguageSwitch';
 import { LanguageItem } from './types';
-
 export default LanguageSwitch;
 export type { LanguageItem };

package/ui/Blocks/LanguageSwitch/index.js

@@ -0,0 +1,5 @@
+import LanguageSwitch from "./LanguageSwitch.js";
+//#region packages/ui/Blocks/LanguageSwitch/index.ts
+var LanguageSwitch_default = LanguageSwitch;
+//#endregion
+export { LanguageSwitch_default as default };

package/ui/Blocks/LanguageSwitch/stories/LanguageSwith.stories.d.ts

@@ -1,8 +1,7 @@
 import { StoryObj } from '@storybook/react-webpack5';
-
 declare const meta: {
     title: string;
-    component: import('react').FC<import('../types').LanguageSwitchProps>;
+    component: import("react").FC<import("../types").LanguageSwitchProps>;
     tags: string[];
     argTypes: {};
 };

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

@@ -1,6 +1,6 @@
-export declare const StyledFlag: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
-export declare const LanguageSwitchWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
-export declare const LanguageFlagWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+export declare const StyledFlag: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const LanguageSwitchWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const LanguageFlagWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     backgroundColor?: string;
     withTitle?: boolean;
 }, never>;

package/ui/Blocks/LanguageSwitch/styles.js

@@ -0,0 +1,32 @@
+import styled$1 from "@xstyled/styled-components";
+//#region packages/ui/Blocks/LanguageSwitch/styles.ts
+const StyledFlag = styled$1.div`
+  cursor: pointer;
+  font-size: 16px;
+  display: flex;
+  gap: 6px;
+  align-items: center;
+`;
+const LanguageSwitchWrap = styled$1.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: fit-content;
+`;
+const LanguageFlagWrap = styled$1.div`
+  cursor: pointer;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: ${({ withTitle }) => withTitle ? "16px" : "8px"};
+  padding: 6px;
+  border-radius: 10px;
+  background: ${({ backgroundColor }) => backgroundColor || "white"};
+
+  @media (min-width: 768px) {
+    padding: 7px 12px;
+  }
+`;
+//#endregion
+export { LanguageFlagWrap, LanguageSwitchWrap, StyledFlag };

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

@@ -1,5 +1,4 @@
 import { ReactElement } from 'react';
-
 export type LanguageItem = {
     languageCode: string;
     icon: ReactElement;

package/ui/Blocks/LanguageSwitch/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -1,4 +1,3 @@
-import { FC } from 'react';
-import { LightBoxProps } from './types';
-
+import { type FC } from 'react';
+import { type LightBoxProps } from './types';
 export declare const LightBox: FC<LightBoxProps>;

package/ui/Blocks/LightBox/LightBox.js

@@ -0,0 +1,41 @@
+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 { 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 }) => {
+	if (!images?.length) return null;
+	return /* @__PURE__ */ jsx(Modal_default, {
+		isShown: isLightBoxOpen,
+		onClose: onCloseLightBox,
+		variant: "mobileFullscreen",
+		top: "10px",
+		children: /* @__PURE__ */ jsx(Swiper, {
+			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))
+		})
+	});
+};
+//#endregion
+export { LightBox };