@mailstep/design-system 0.8.31-beta.4 → 0.8.32-beta.1

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

@@ -1,68 +1,36 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback } from 'react';
-import { AddPhoto as AddPhotoIcon } from '../../../../Elements/Icon/icons/AddPhoto';
-import { Container, HiddenInput } from './styles';
-export var AddPhoto = function (_a) {
-    var onImageUpload = _a.onImageUpload, isDisabled = _a.isDisabled, hasRemove = _a.hasRemove;
-    var handleImageUpload = useCallback(function (event) {
-        var _a, _b;
-        if (!((_b = (_a = event.target) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b[0]))
-            return;
-        var reader = new FileReader();
-        reader.readAsDataURL(event.target.files[0]);
-        reader.onload = function () { return __awaiter(void 0, void 0, void 0, function () {
-            var _a, _b;
-            return __generator(this, function (_c) {
-                switch (_c.label) {
-                    case 0: return [4 /*yield*/, (onImageUpload === null || onImageUpload === void 0 ? void 0 : onImageUpload({
-                            base64image: (_a = reader.result) === null || _a === void 0 ? void 0 : _a.split(',').pop(),
-                            base64WithDataDeclaration: reader.result,
-                            file: (_b = event.target.files) === null || _b === void 0 ? void 0 : _b[0]
-                        }))];
-                    case 1:
-                        _c.sent();
-                        return [2 /*return*/];
-                }
-            });
-        }); };
-    }, [onImageUpload]);
-    if (!onImageUpload)
-        return null;
-    return (_jsxs(Container, { isDisabled: isDisabled, hasRemove: hasRemove, children: [_jsx(HiddenInput, { disabled: isDisabled, onChange: handleImageUpload, type: "file", accept: "image/*;capture=camera", capture: "environment" }), _jsx(AddPhotoIcon, { width: "36", height: "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, {
-    isDisabled?: boolean | undefined;
-    hasRemove?: boolean | undefined;
+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/system').Theme, {}, never>;
+export declare const HiddenInput: import("styled-components").StyledComponent<"input", import("@xstyled/styled-components").Theme, {}, never>;

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

@@ -1,14 +1,30 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import styled, { th } from '@xstyled/styled-components';
-export var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  flex-shrink: 0;\n  transition: all 0.2s linear;\n  height: 85px !important;\n  width: 85px !important;\n  border-radius: ", ";\n  border: ", ";\n  border-color: ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  margin-right: 15px;\n  opacity: ", ";\n  margin-top: ", ";\n"], ["\n  position: relative;\n  flex-shrink: 0;\n  transition: all 0.2s linear;\n  height: 85px !important;\n  width: 85px !important;\n  border-radius: ", ";\n  border: ", ";\n  border-color: ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  margin-right: 15px;\n  opacity: ", ";\n  margin-top: ", ";\n"])), th.radius('lg'), th.border('mediumSlim'), th.color('red1'), function (_a) {
-    var isDisabled = _a.isDisabled;
-    return (isDisabled ? 0.6 : 1);
-}, function (_a) {
-    var hasRemove = _a.hasRemove;
-    return (hasRemove ? '15px' : '');
-});
-export var HiddenInput = styled.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  opacity: 0;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n"], ["\n  opacity: 0;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n"])));
-var templateObject_1, templateObject_2;
+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

@@ -1,7 +1,18 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Icon } from '../../../../Elements/Icon';
-import { Container } from './styles';
-export var CloseButton = function (_a) {
-    var onImageRemove = _a.onImageRemove, isDisabled = _a.isDisabled;
-    return (_jsx(Container, { onClick: !isDisabled ? onImageRemove : undefined, isDisabled: isDisabled, children: _jsx(Icon, { icon: "close", size: "22px", fill: isDisabled ? 'magenta60' : 'red1' }) }));
+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, {
-    isDisabled?: boolean | undefined;
+export declare const Container: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
+    isDisabled?: boolean;
 }, never>;

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

@@ -1,10 +1,18 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import styled, { th } from '@xstyled/styled-components';
-export var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 30px;\n  height: 30px;\n  background-color: ", ";\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 0.2s linear;\n"], ["\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 30px;\n  height: 30px;\n  background-color: ", ";\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 0.2s linear;\n"])), function (_a) {
-    var isDisabled = _a.isDisabled;
-    return th.color(isDisabled ? 'bgLightGray1' : 'red20');
-});
-var templateObject_1;
+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

@@ -1,10 +1,29 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CloseButton } from '../CloseButton';
-import { ImageTag } from '../ImageTag';
-import { Image, ImageWrapper } from './styles';
-export var ImageElement = function (_a) {
-    var label = _a.label, onImageRemove = _a.onImageRemove, isDisabled = _a.isDisabled, onClick = _a.onClick, imageUrl = _a.imageUrl, selected = _a.selected, visible = _a.visible;
-    if (!imageUrl)
-        return null;
-    return (_jsxs(ImageWrapper, { visible: visible, hasImageRemove: !!onImageRemove, children: [_jsx(Image, { src: imageUrl, alt: "", width: "85px", height: "85px", onClick: onClick, selected: selected }), onImageRemove && _jsx(CloseButton, { onImageRemove: onImageRemove, isDisabled: isDisabled }), _jsx(ImageTag, { label: label })] }));
+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, {
-    selected?: boolean | undefined;
+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/system').Theme, {
+export declare const ImageWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     visible: boolean;
     hasImageRemove: boolean;
 }, never>;

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

@@ -1,25 +1,22 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import styled from '@xstyled/styled-components';
-import { th } from '@xstyled/system';
-export var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
-export var Image = styled.img(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: ", ";\n  border: ", ";\n  border-color: red1;\n  cursor: pointer;\n  transition: all 0.2s;\n"], ["\n  border-radius: ", ";\n  border: ", ";\n  border-color: red1;\n  cursor: pointer;\n  transition: all 0.2s;\n"])), th.radius('lg'), function (_a) {
-    var selected = _a.selected;
-    return (selected ? "3px solid" : '0');
-});
-export var ImageWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  padding-right: ", ";\n  padding-top: ", ";\n  width: 100px;\n  height: ", ";\n  display: ", ";\n  user-select: none;\n"], ["\n  position: relative;\n  padding-right: ", ";\n  padding-top: ", ";\n  width: 100px;\n  height: ", ";\n  display: ", ";\n  user-select: none;\n"])), function (_a) {
-    var hasImageRemove = _a.hasImageRemove;
-    return (hasImageRemove ? '15px' : '0');
-}, function (_a) {
-    var hasImageRemove = _a.hasImageRemove;
-    return (hasImageRemove ? '15px' : '0');
-}, function (_a) {
-    var hasImageRemove = _a.hasImageRemove;
-    return (hasImageRemove ? '100px' : '85px');
-}, function (_a) {
-    var visible = _a.visible;
-    return (visible ? 'block' : 'none');
-});
-var templateObject_1, templateObject_2, templateObject_3;
+import styled$1 from "@xstyled/styled-components";
+import { th as th$1 } from "@xstyled/system";
+//#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

@@ -1,9 +1,15 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import Tag from '../../../../Elements/Tag';
-import { Container } from './styles';
-export var ImageTag = function (_a) {
-    var label = _a.label;
-    if (!label)
-        return null;
-    return (_jsx(Container, { children: _jsx(Tag, { size: "small", color: "darkGreen", textColor: "white", children: _jsx("b", { children: label }) }) }));
+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/styled-components").Theme, {}, never>;

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

@@ -1,7 +1,9 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import styled from '@xstyled/styled-components';
-export var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  bottom: 2px;\n  left: 2px;\n"], ["\n  position: absolute;\n  bottom: 2px;\n  left: 2px;\n"])));
-var templateObject_1;
+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

@@ -1,15 +1,14 @@
-import { useState, useCallback } from 'react';
-export var useControls = function (_a) {
-    var max = _a.max, _b = _a.total, total = _b === void 0 ? 0 : _b;
-    var _c = useState(0), position = _c[0], setPosition = _c[1];
-    var moveList = useCallback(function (direction) { return function () {
-        if (max) {
-            setPosition(function (position) { return Math.min(Math.max(position + direction, 0), total - max); });
-        }
-    }; }, [total]);
-    return {
-        moveList: moveList,
-        position: position,
-        hasControls: !!max && total > max
-    };
+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

@@ -1,20 +1,15 @@
-import { useCallback, useState } from 'react';
-export var useOnElementClick = function (_a) {
-    var onImageClick = _a.onImageClick, onOpenLightBox = _a.onOpenLightBox, selectable = _a.selectable;
-    var _b = useState(-1), selected = _b[0], setSelected = _b[1];
-    var handleOnClick = useCallback(function (item, index) { return function () {
-        if (onImageClick) {
-            onImageClick(item);
-        }
-        else {
-            onOpenLightBox(index)();
-        }
-        if (selectable) {
-            setSelected(function (selected) { return selected !== index ? index : -1; });
-        }
-    }; }, [onImageClick, onOpenLightBox]);
-    return {
-        handleOnClick: handleOnClick,
-        selected: selected
-    };
+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

@@ -1,2 +1,5 @@
-import { ImageList } from './ImageList';
-export default ImageList;
+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,6 +1,6 @@
-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 | undefined;
+export declare const ImageListContainer: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const Control: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
+    isLeft?: boolean;
     isDisabled: boolean;
-    hasRemove?: boolean | undefined;
+    hasRemove?: boolean;
 }, never>;

package/ui/Blocks/ImageList/styles.js

@@ -1,20 +1,29 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import styled from '@xstyled/styled-components';
-export var ImageListContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  overflow-x: scroll;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  position: relative;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"], ["\n  display: flex;\n  overflow-x: scroll;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  position: relative;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"])));
-export var Control = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 24px;\n  margin-right: ", ";\n  margin-top: ", ";\n  cursor: pointer;\n  display: flex;\n  transition: all 0.4s;\n\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n  }\n"], ["\n  width: 24px;\n  margin-right: ", ";\n  margin-top: ", ";\n  cursor: pointer;\n  display: flex;\n  transition: all 0.4s;\n\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n  }\n"])), function (_a) {
-    var isLeft = _a.isLeft;
-    return (isLeft ? '15px' : 0);
-}, function (_a) {
-    var hasRemove = _a.hasRemove;
-    return (hasRemove ? '15px' : 0);
-}, function (_a) {
-    var isDisabled = _a.isDisabled;
-    return (isDisabled ? 'gray' : 'black');
-}, function (_a) {
-    var isDisabled = _a.isDisabled;
-    return (isDisabled ? 'gray' : 'red1');
-});
-var templateObject_1, templateObject_2;
+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/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;