@mailstep/design-system 0.8.30 → 0.8.31-beta.2

package/ui/Blocks/Header/styles.js

@@ -1,34 +1,11 @@
-import { headerHeight } from "./utils/constants.js";
-import styled$1, { th } from "@xstyled/styled-components";
-//#region packages/ui/Blocks/Header/styles.ts
-const Container = styled$1.header`
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 8px;
-  height: ${headerHeight};
-  border-bottom: 1px solid ${th.color("lightGray7")};
-
-  @media (min-width: 768px) {
-    padding: 0 20px;
-  }
-`;
-const LeftSide = styled$1.div`
-  display: flex;
-`;
-const LanguageWrapper = styled$1.div`
-  display: flex;
-  justify-content: flex-end;
-`;
-const RightSide = styled$1.div`
-  display: flex;
-  gap: 4px;
-  align-items: center;
-
-  @media (min-width: 768px) {
-    gap: 20px;
-  }
-`;
-//#endregion
-export { Container, LanguageWrapper, LeftSide, RightSide };
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { headerHeight } from './utils/constants';
+import styled, { th } from '@xstyled/styled-components';
+export var Container = styled.header(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0 8px;\n  height: ", ";\n  border-bottom: 1px solid ", ";\n\n  @media (min-width: 768px) {\n    padding: 0 20px;\n  }\n"], ["\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0 8px;\n  height: ", ";\n  border-bottom: 1px solid ", ";\n\n  @media (min-width: 768px) {\n    padding: 0 20px;\n  }\n"])), headerHeight, th.color('lightGray7'));
+export var LeftSide = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+export var LanguageWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-end;\n"], ["\n  display: flex;\n  justify-content: flex-end;\n"])));
+export var RightSide = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  gap: 4px;\n  align-items: center;\n\n  @media (min-width: 768px) {\n    gap: 20px;\n  }\n"], ["\n  display: flex;\n  gap: 4px;\n  align-items: center;\n\n  @media (min-width: 768px) {\n    gap: 20px;\n  }\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/ui/Blocks/Header/utils/constants.js

@@ -1,4 +1 @@
-//#region packages/ui/Blocks/Header/utils/constants.ts
-const headerHeight = "52px";
-//#endregion
-export { headerHeight };
+export var headerHeight = '52px';

package/ui/Blocks/Header/utils/languageItems.d.ts

@@ -1,2 +1,3 @@
-import type { LanguageItem } from '../../LanguageSwitch';
+import { LanguageItem } from '../../LanguageSwitch';
+
 export declare const languageItems: LanguageItem[];

package/ui/Blocks/Header/utils/languageItems.js

@@ -1,15 +1,15 @@
-import { FlagUSA } from "../../../Elements/Icon/icons/FlagUSA.js";
-import { FlagCZ } from "../../../Elements/Icon/icons/FlagCZ.js";
-import { jsx } from "react/jsx-runtime";
-//#region packages/ui/Blocks/Header/utils/languageItems.tsx
-const languageItems = [{
-	languageCode: "cs",
-	icon: /* @__PURE__ */ jsx(FlagCZ, { height: "16px" }),
-	title: "Česky"
-}, {
-	languageCode: "en",
-	icon: /* @__PURE__ */ jsx(FlagUSA, { height: "16px" }),
-	title: "English"
-}];
-//#endregion
-export { languageItems };
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FlagCZ } from '../../../Elements/Icon/icons/FlagCZ';
+import { FlagUSA } from '../../../Elements/Icon/icons/FlagUSA';
+export var languageItems = [
+    {
+        languageCode: 'cs',
+        icon: _jsx(FlagCZ, { height: "16px" }),
+        title: 'Česky'
+    },
+    {
+        languageCode: 'en',
+        icon: _jsx(FlagUSA, { height: "16px" }),
+        title: 'English'
+    }
+];

package/ui/Blocks/HidePrint/HidePrint.d.ts

@@ -1,4 +1,5 @@
-import React from 'react';
+import { default as React } from 'react';
+
 type Props = {
     children: React.ReactNode;
 };

package/ui/Blocks/HidePrint/HidePrint.js

@@ -1,13 +1,13 @@
-import "react";
-import { jsx } from "react/jsx-runtime";
-import styled from "styled-components";
-//#region packages/ui/Blocks/HidePrint/HidePrint.tsx
-const HideWrapper = styled.div`
-  display: contents;
-  @media print {
-    display: none;
-  }
-`;
-const HidePrint = ({ children }) => /* @__PURE__ */ jsx(HideWrapper, { children });
-//#endregion
-export { HidePrint as default };
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from 'styled-components';
+var HideWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: contents;\n  @media print {\n    display: none;\n  }\n"], ["\n  display: contents;\n  @media print {\n    display: none;\n  }\n"])));
+var HidePrint = function (_a) {
+    var children = _a.children;
+    return _jsx(HideWrapper, { children: children });
+};
+export default HidePrint;
+var templateObject_1;

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

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

package/ui/Blocks/ImageList/ImageList.js

@@ -1,80 +1,34 @@
-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
-			})
-		]
-	});
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { useDraggable } from 'react-use-draggable-scroll';
+import Icon from '../../Elements/Icon/Icon';
+import LightBox, { useLightBox } from '../LightBox';
+import { AddPhoto } from './components/AddPhoto';
+import { ImageElement } from './components/ImageElement';
+import { useControls } from './hooks/useControls';
+import { useOnElementClick } from './hooks/useOnElementClick';
+import { x } from '@xstyled/styled-components';
+import { ImageListContainer, Control } from './styles';
+export var ImageList = function (_a) {
+    var onImageUpload = _a.onImageUpload, onImageRemove = _a.onImageRemove, onImageClick = _a.onImageClick, lightBoxAction = _a.lightBoxAction, lightBoxActionTitle = _a.lightBoxActionTitle, images = _a.images, isDisabled = _a.isDisabled, selectable = _a.selectable, max = _a.max;
+    var ref = useRef(null);
+    var events = useDraggable(ref, { isMounted: !!(images === null || images === void 0 ? void 0 : images.length) }).events;
+    var _b = useLightBox(), isLightBoxOpen = _b.isLightBoxOpen, onCloseLightBox = _b.onCloseLightBox, onOpenLightBox = _b.onOpenLightBox, lightBoxData = _b.lightBoxData;
+    var _c = useOnElementClick({ onImageClick: onImageClick, onOpenLightBox: onOpenLightBox, selectable: selectable }), handleOnClick = _c.handleOnClick, selected = _c.selected;
+    var _d = useControls({ max: max, total: images === null || images === void 0 ? void 0 : images.length }), hasControls = _d.hasControls, position = _d.position, moveList = _d.moveList;
+    return (_jsxs(x.div, { display: "flex", alignItems: "center", children: [_jsx(AddPhoto, { onImageUpload: onImageUpload, isDisabled: isDisabled, hasRemove: !!onImageRemove }), hasControls && (_jsx(Control, { onClick: moveList(-1), isLeft: true, isDisabled: position === 0, hasRemove: !!onImageRemove, children: _jsx(Icon, { icon: "lessThen", size: "24px" }) })), images && (_jsx(ImageListContainer, __assign({ ref: ref }, events, { children: images.map(function (item, index) {
+                    var _a, _b;
+                    return (_jsx(ImageElement, { imageUrl: (_a = item.smallUrl) !== null && _a !== void 0 ? _a : item.url, onImageRemove: onImageRemove === null || onImageRemove === void 0 ? void 0 : onImageRemove(item.id), onClick: handleOnClick(item, index), isDisabled: isDisabled, label: item === null || item === void 0 ? void 0 : item.label, selected: index === selected, visible: !max || (index >= position && index < position + max) }, (_b = item.id) !== null && _b !== void 0 ? _b : index));
+                }) }))), hasControls && (_jsx(Control, { onClick: moveList(1), isDisabled: !!images && !!max && position >= (images === null || images === void 0 ? void 0 : images.length) - max, hasRemove: !!onImageRemove, children: _jsx(Icon, { icon: "greaterThan", size: "24px" }) })), _jsx(LightBox, { initialSlide: lightBoxData === null || lightBoxData === void 0 ? void 0 : lightBoxData.initialSlide, isLightBoxOpen: isLightBoxOpen, onCloseLightBox: onCloseLightBox, lightBoxAction: lightBoxAction, lightBoxActionTitle: lightBoxActionTitle, images: images })] }));
 };
-//#endregion
-export { ImageList };

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

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

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

@@ -1,36 +1,68 @@
-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"
-		})]
-	});
+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" })] }));
 };
-//#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;
-    hasRemove?: boolean;
+export declare const Container: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+    isDisabled?: boolean | undefined;
+    hasRemove?: boolean | undefined;
 }, 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

@@ -1,30 +1,14 @@
-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 };
+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;

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

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

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

@@ -1,18 +1,7 @@
-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"
-		})
-	});
+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' }) }));
 };
-//#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;
+export declare const Container: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+    isDisabled?: boolean | undefined;
 }, never>;

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

@@ -1,18 +1,10 @@
-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 };
+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;

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

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

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

@@ -1,29 +1,10 @@
-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 })
-		]
-	});
+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 })] }));
 };
-//#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;
+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;
 }, 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

@@ -1,22 +1,25 @@
-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 };
+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;