@mailstep/design-system 0.2.0-beta.0 → 0.2.0-beta.2

package/Blocks/CornerDialog/CornerDialog.d.ts

@@ -0,0 +1,2 @@
+import { CornerDialogProps } from './types';
+export declare const CornerDialog: ({ title, children, onClose, statusToTitle, isOpen, intent: _intent, }: CornerDialogProps) => JSX.Element | null;

package/Blocks/CornerDialog/CornerDialog.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { statusToColors, statusToIcon } from './utils';
+import { Portal } from '../../Elements/Portal';
+import { Icon } from '../../Elements/Icon';
+import { Container, Header, Status, StatusText, Wrapper, CloseBtn } from './styles';
+export var CornerDialog = function (_a) {
+    var title = _a.title, children = _a.children, onClose = _a.onClose, statusToTitle = _a.statusToTitle, _b = _a.isOpen, isOpen = _b === void 0 ? true : _b, _intent = _a.intent;
+    var _c = useState(false), isMounted = _c[0], setIsMounted = _c[1];
+    useEffect(function () {
+        setIsMounted(true);
+    }, []);
+    var intent = _intent !== null && _intent !== void 0 ? _intent : 'info';
+    var _d = statusToColors[intent], fontColor = _d.fontColor, backgroundColor = _d.backgroundColor, fill = _d.fill;
+    if (!isOpen)
+        return null;
+    return (_jsx(Portal, { children: _jsxs(Container, { "$mounted": isMounted, children: [_jsxs(Status, { background: backgroundColor, children: [_jsx(Icon, { icon: statusToIcon[intent], fill: fill }), _jsx(StatusText, { fontColor: fontColor, children: statusToTitle[intent]() })] }), _jsx(Header, { children: title }), _jsx(CloseBtn, { onClick: onClose, children: _jsx(Icon, { icon: "close", size: "25px" }) }), _jsx(Wrapper, { children: children })] }) }));
+};

package/Blocks/CornerDialog/index.d.ts

@@ -0,0 +1,3 @@
+import { CornerDialog } from './CornerDialog';
+export type { Intent, CornerDialogProps } from './types';
+export default CornerDialog;

package/Blocks/CornerDialog/index.js

@@ -0,0 +1,2 @@
+import { CornerDialog } from './CornerDialog';
+export default CornerDialog;

package/Blocks/CornerDialog/stories/CornerDialog.stories.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ title, children, onClose, statusToTitle, isOpen, intent: _intent, }: import("..").CornerDialogProps) => JSX.Element | null;
+    tags: string[];
+    argTypes: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const InfoCornerDialog: Story;
+export declare const SuccessCornerDialog: Story;
+export declare const ErrorCornerDialog: Story;
+export declare const WarningCornerDialog: Story;

package/Blocks/CornerDialog/stories/CornerDialog.stories.js

@@ -0,0 +1,50 @@
+import { CornerDialog } from '../CornerDialog';
+var meta = {
+    title: 'Blocks/CornerDialog',
+    component: CornerDialog,
+    tags: ['autodocs'],
+    argTypes: {},
+};
+export default meta;
+var statusToTitle = {
+    info: function () { return 'Info'; },
+    success: function () { return 'Success'; },
+    error: function () { return 'Error'; },
+    warning: function () { return 'Warning'; },
+};
+export var InfoCornerDialog = {
+    args: {
+        title: 'Info Title',
+        children: 'Info corner dialog content',
+        statusToTitle: statusToTitle,
+        intent: 'info',
+        isOpen: true,
+    },
+};
+export var SuccessCornerDialog = {
+    args: {
+        title: 'Success Title',
+        children: 'Success corner dialog content',
+        statusToTitle: statusToTitle,
+        intent: 'success',
+        isOpen: true,
+    },
+};
+export var ErrorCornerDialog = {
+    args: {
+        title: 'Error Title',
+        children: 'Error corner dialog content',
+        statusToTitle: statusToTitle,
+        intent: 'error',
+        isOpen: true,
+    },
+};
+export var WarningCornerDialog = {
+    args: {
+        title: 'Warning Title',
+        children: 'Warning corner dialog content',
+        statusToTitle: statusToTitle,
+        intent: 'warning',
+        isOpen: true,
+    },
+};

package/Blocks/CornerDialog/styles.d.ts

@@ -0,0 +1,12 @@
+export declare const Container: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+    $mounted: boolean;
+}, never>;
+export declare const Header: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const Wrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const Status: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+    background: string;
+}, never>;
+export declare const CloseBtn: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const StatusText: import("styled-components").StyledComponent<"span", import("@xstyled/system").Theme, {
+    fontColor: string;
+}, never>;

package/Blocks/CornerDialog/styles.js

@@ -0,0 +1,21 @@
+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: fixed;\n  z-index: 10;\n  bottom: 3rem;\n  right: 3rem;\n  background: white;\n  border-radius: 12px;\n  box-shadow: cornerDialogShadow;\n  width: 400px;\n  padding: 50px 30px 30px;\n  color: typoPrimary;\n  transition: opacity 225ms linear;\n  opacity: ", ";\n"], ["\n  position: fixed;\n  z-index: 10;\n  bottom: 3rem;\n  right: 3rem;\n  background: white;\n  border-radius: 12px;\n  box-shadow: cornerDialogShadow;\n  width: 400px;\n  padding: 50px 30px 30px;\n  color: typoPrimary;\n  transition: opacity 225ms linear;\n  opacity: ", ";\n"])), function (_a) {
+    var $mounted = _a.$mounted;
+    return ($mounted ? 1 : 0);
+});
+export var Header = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-bottom: 15px;\n  color: typoPrimary;\n  font-size: 18px;\n  font-weight: bold;\n  display: flex;\n  align-items: center;\n"], ["\n  margin-bottom: 15px;\n  color: typoPrimary;\n  font-size: 18px;\n  font-weight: bold;\n  display: flex;\n  align-items: center;\n"])));
+export var Wrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-size: 14px;\n  font-weight: 400;\n"], ["\n  font-size: 14px;\n  font-weight: 400;\n"])));
+export var Status = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n  left: 0;\n  top: 0;\n  padding: 6px 10px;\n  text-transform: uppercase;\n  border-radius: 12px 0 12px 0;\n  background-color: ", ";\n"], ["\n  position: absolute;\n  left: 0;\n  top: 0;\n  padding: 6px 10px;\n  text-transform: uppercase;\n  border-radius: 12px 0 12px 0;\n  background-color: ", ";\n"])), function (_a) {
+    var background = _a.background;
+    return th.color(background);
+});
+export var CloseBtn = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  cursor: pointer;\n  position: absolute;\n  top: 12px;\n  right: 12px;\n"], ["\n  cursor: pointer;\n  position: absolute;\n  top: 12px;\n  right: 12px;\n"])));
+export var StatusText = styled.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: inline-block;\n  margin-left: 6px;\n  font-size: 14px;\n  font-weight: 700;\n  color: ", ";\n"], ["\n  display: inline-block;\n  margin-left: 6px;\n  font-size: 14px;\n  font-weight: 700;\n  color: ", ";\n"])), function (_a) {
+    var fontColor = _a.fontColor;
+    return th.color(fontColor);
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/Blocks/CornerDialog/types.d.ts

@@ -0,0 +1,16 @@
+import { ReactChild } from 'react';
+export type Intent = 'success' | 'error' | 'warning' | 'info';
+export interface CornerDialogProps {
+    title: JSX.Element | string;
+    children: ReactChild;
+    icon?: string;
+    onClose: () => void;
+    isOpen?: boolean;
+    intent?: Intent;
+    statusToTitle: Record<Intent, () => string>;
+}
+export interface ColorProps {
+    fontColor: string;
+    backgroundColor: string;
+    fill: string;
+}

package/Blocks/CornerDialog/types.js

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

package/Blocks/CornerDialog/utils.d.ts

@@ -0,0 +1,3 @@
+import { Intent, ColorProps } from './types';
+export declare const statusToColors: Record<Intent, ColorProps>;
+export declare const statusToIcon: Record<Intent, string>;

package/Blocks/CornerDialog/utils.js

@@ -0,0 +1,12 @@
+export var statusToColors = {
+    info: { fontColor: 'gray1', backgroundColor: 'lightGray7', fill: 'gray1' },
+    success: { fontColor: 'white', backgroundColor: 'green', fill: 'white' },
+    error: { fontColor: 'white', backgroundColor: 'red1', fill: 'white' },
+    warning: { fontColor: 'blue2', backgroundColor: 'yellow1', fill: 'blue2' },
+};
+export var statusToIcon = {
+    info: 'info',
+    success: 'circleCheck',
+    error: 'circleX',
+    warning: 'circleTriangle',
+};

package/Blocks/ImageList/ImageList.d.ts

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

package/Blocks/ImageList/ImageList.js

@@ -0,0 +1,29 @@
+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 LightBox, { useLightBox } from '../LightBox';
+import { AddPhoto } from './components/AddPhoto';
+import { ImageElement } from './components/ImageElement';
+import { x } from '@xstyled/styled-components';
+import { ImageListContainer } from './styles';
+export var ImageList = function (_a) {
+    var onImageUpload = _a.onImageUpload, onImageRemove = _a.onImageRemove, lightBoxAction = _a.lightBoxAction, lightBoxActionTitle = _a.lightBoxActionTitle, images = _a.images;
+    var ref = useRef();
+    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;
+    return (_jsxs(x.div, { display: "flex", alignItems: "flex-end", children: [_jsx(AddPhoto, { onImageUpload: onImageUpload }), 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), onOpenLightBox: onOpenLightBox(index) }, (_b = item.id) !== null && _b !== void 0 ? _b : index));
+                }) }))), _jsx(LightBox, { initialSlide: lightBoxData === null || lightBoxData === void 0 ? void 0 : lightBoxData.initialSlide, isLightBoxOpen: isLightBoxOpen, onCloseLightBox: onCloseLightBox, lightBoxAction: lightBoxAction, lightBoxActionTitle: lightBoxActionTitle, images: images })] }));
+};

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

@@ -0,0 +1,7 @@
+import { type FC } from 'react';
+import { type ImageUploadProps } from '../../types';
+interface AddPhotoProps {
+    onImageUpload?: (props: ImageUploadProps) => Promise<void>;
+}
+export declare const AddPhoto: FC<AddPhotoProps>;
+export {};

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

@@ -0,0 +1,63 @@
+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 { Container, HiddenInput } from './styles';
+export var AddPhoto = function (_a) {
+    var onImageUpload = _a.onImageUpload;
+    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;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0: return [4 /*yield*/, (onImageUpload === null || onImageUpload === void 0 ? void 0 : onImageUpload({ base64: reader.result, file: (_a = event.target.files) === null || _a === void 0 ? void 0 : _a[0] }))];
+                    case 1:
+                        _b.sent();
+                        return [2 /*return*/];
+                }
+            });
+        }); };
+    }, [onImageUpload]);
+    if (!onImageUpload)
+        return null;
+    return (_jsxs(Container, { children: [_jsx(HiddenInput, { onChange: handleImageUpload, type: "file", accept: "image/*" }), _jsxs("svg", { width: "36", height: "36", viewBox: "0 0 37 34", fill: "#DB2B19", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.82792 6.14124C10.7187 5.25044 11.9269 4.75 13.1867 4.75H19C19.8745 4.75 20.5833 5.45889 20.5833 6.33333C20.5833 7.20778 19.8745 7.91667 19 7.91667H13.1867C12.7668 7.91667 12.364 8.08349 12.0671 8.38041L10.7554 9.69209C9.86461 10.5829 8.65643 11.0833 7.39665 11.0833H4.75C3.87556 11.0833 3.16667 11.7922 3.16667 12.6667V28.5C3.16667 29.3745 3.87556 30.0833 4.75 30.0833H26.9167C27.7911 30.0833 28.5 29.3745 28.5 28.5V17.4167C28.5 16.5422 29.2089 15.8333 30.0833 15.8333C30.9578 15.8333 31.6667 16.5422 31.6667 17.4167V28.5C31.6667 31.1234 29.5401 33.25 26.9167 33.25H4.75C2.12665 33.25 0 31.1234 0 28.5V12.6667C0 10.0433 2.12665 7.91667 4.75 7.91667H7.39665C7.81658 7.91667 8.21931 7.74985 8.51624 7.45292L9.82792 6.14124Z" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.9165 20.5834C7.9165 16.2112 11.4609 12.6667 15.8332 12.6667C20.2054 12.6667 23.7498 16.2112 23.7498 20.5834C23.7498 24.9556 20.2054 28.5001 15.8332 28.5001C11.4609 28.5001 7.9165 24.9556 7.9165 20.5834ZM15.8332 15.8334C13.2098 15.8334 11.0832 17.96 11.0832 20.5834C11.0832 23.2068 13.2098 25.3334 15.8332 25.3334C18.4566 25.3334 20.5832 23.2068 20.5832 20.5834C20.5832 17.96 18.4566 15.8334 15.8332 15.8334Z" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M23.75 6.33333C23.75 5.45889 24.4589 4.75 25.3333 4.75H34.8333C35.7078 4.75 36.4167 5.45889 36.4167 6.33333C36.4167 7.20778 35.7078 7.91667 34.8333 7.91667H25.3333C24.4589 7.91667 23.75 7.20778 23.75 6.33333Z" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M30.0833 0C30.9578 0 31.6667 0.70889 31.6667 1.58333V11.0833C31.6667 11.9578 30.9578 12.6667 30.0833 12.6667C29.2089 12.6667 28.5 11.9578 28.5 11.0833V1.58333C28.5 0.70889 29.2089 0 30.0833 0Z" })] })] }));
+};

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

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

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

@@ -0,0 +1,8 @@
+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  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"], ["\n  position: relative;\n  flex-shrink: 0;\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"])), th.radius('lg'), th.border('mediumSlim'), th.color('red1'));
+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/Blocks/ImageList/components/CloseButton/index.d.ts

@@ -0,0 +1,6 @@
+import { type FC } from 'react';
+interface CloseButtonProps {
+    onImageRemove: () => void;
+}
+export declare const CloseButton: FC<CloseButtonProps>;
+export {};

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

@@ -0,0 +1,7 @@
+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;
+    return (_jsx(Container, { onClick: onImageRemove, children: _jsx(Icon, { icon: "close", size: "22px", fill: "red1" }) }));
+};

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

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

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

@@ -0,0 +1,7 @@
+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"], ["\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"])), th.color('red20'));
+var templateObject_1;

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

@@ -0,0 +1,9 @@
+import { type FC } from 'react';
+interface ImageElementProps {
+    label?: string;
+    onImageRemove?: () => void;
+    onOpenLightBox: () => void;
+    imageUrl: string | undefined;
+}
+export declare const ImageElement: FC<ImageElementProps>;
+export {};

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Image } from './styles';
+import { ImageTag } from '../ImageTag';
+import { CloseButton } from '../CloseButton';
+import { x } from '@xstyled/styled-components';
+export var ImageElement = function (_a) {
+    var label = _a.label, onImageRemove = _a.onImageRemove, onOpenLightBox = _a.onOpenLightBox, imageUrl = _a.imageUrl;
+    if (!imageUrl)
+        return null;
+    return (_jsxs(x.div, { position: "relative", pr: "15px", pt: "15px", w: "100px", children: [_jsx(Image, { src: imageUrl, alt: "", width: "85px", height: "85px", onClick: onOpenLightBox }), onImageRemove && _jsx(CloseButton, { onImageRemove: onImageRemove }), _jsx(ImageTag, { label: label })] }));
+};

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

@@ -0,0 +1,2 @@
+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, {}, never>;

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

@@ -0,0 +1,8 @@
+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([""], [""])));
+export var Image = styled.img(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: ", ";\n"], ["\n  border-radius: ", ";\n"])), th.radius('lg'));
+var templateObject_1, templateObject_2;

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

@@ -0,0 +1,6 @@
+import { type FC } from 'react';
+interface ImageTagProps {
+    label?: string;
+}
+export declare const ImageTag: FC<ImageTagProps>;
+export {};

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

@@ -0,0 +1,9 @@
+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 }) }) }));
+};

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

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

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

@@ -0,0 +1,7 @@
+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;

package/Blocks/ImageList/index.d.ts

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

package/Blocks/ImageList/index.js

@@ -0,0 +1,2 @@
+import { ImageList } from './ImageList';
+export default ImageList;

package/Blocks/ImageList/styles.d.ts

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

package/Blocks/ImageList/styles.js

@@ -0,0 +1,7 @@
+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"])));
+var templateObject_1;

package/Blocks/ImageList/types.d.ts

@@ -0,0 +1,12 @@
+import { type ImageData } from '../LightBox';
+export interface ImageUploadProps {
+    base64?: string;
+    file?: File;
+}
+export interface ImageListProps {
+    images: ImageData[] | undefined;
+    onImageUpload?: (props: ImageUploadProps) => Promise<void>;
+    onImageRemove?: (id?: string) => () => void;
+    lightBoxAction?: (id?: string) => () => Promise<void>;
+    lightBoxActionTitle?: string;
+}

package/Blocks/ImageList/types.js

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

package/Blocks/LightBox/LightBox.d.ts

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

package/Blocks/LightBox/LightBox.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../Elements/Button';
+import Modal from '../Modal';
+import 'swiper/css';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Container, Image, ButtonContainer } from './styles';
+export var LightBox = function (_a) {
+    var isLightBoxOpen = _a.isLightBoxOpen, onCloseLightBox = _a.onCloseLightBox, lightBoxAction = _a.lightBoxAction, lightBoxActionTitle = _a.lightBoxActionTitle, images = _a.images, _b = _a.initialSlide, initialSlide = _b === void 0 ? 0 : _b;
+    if (!(images === null || images === void 0 ? void 0 : images.length))
+        return null;
+    return (_jsx(Modal, { isShown: isLightBoxOpen, onClose: onCloseLightBox, mobileFullscreen: true, miniCloseBtn: true, withCloseIcon: true, children: _jsx(Swiper, { initialSlide: initialSlide, slidesPerView: 1, autoHeight: true, children: images.map(function (item) {
+                var _a;
+                return (_jsx(SwiperSlide, { children: _jsxs(Container, { children: [_jsx(Image, { src: (_a = item.originalUrl) !== null && _a !== void 0 ? _a : item.url, loading: "lazy", alt: "" }), !!item.withLightBoxAction && lightBoxAction && lightBoxActionTitle && (_jsx(ButtonContainer, { children: _jsx(Button, { onClick: lightBoxAction(item.id), appearance: "primaryLight", children: lightBoxActionTitle }) }))] }) }, item.id));
+            }) }) }));
+};

package/Blocks/LightBox/hooks/useLightBox.d.ts

@@ -0,0 +1,2 @@
+import { type UseLightBoxHookType } from '../types';
+export declare const useLightBox: UseLightBoxHookType;

package/Blocks/LightBox/hooks/useLightBox.js

@@ -0,0 +1,17 @@
+import { useCallback } from 'react';
+import { useModal } from '../../Modal';
+export var useLightBox = function () {
+    var _a = useModal(), isOpen = _a.isOpen, onOpen = _a.onOpen, onClose = _a.onClose, data = _a.data;
+    var onOpenLightBox = useCallback(function (index) {
+        if (index === void 0) { index = 0; }
+        return function () {
+            onOpen({ initialSlide: index });
+        };
+    }, [onOpen]);
+    return {
+        onOpenLightBox: onOpenLightBox,
+        onCloseLightBox: onClose,
+        isLightBoxOpen: isOpen,
+        lightBoxData: data
+    };
+};

package/Blocks/LightBox/index.d.ts

@@ -0,0 +1,4 @@
+import { LightBox } from './LightBox';
+export { useLightBox } from './hooks/useLightBox';
+export type { ImageData } from './types';
+export default LightBox;

package/Blocks/LightBox/index.js

@@ -0,0 +1,3 @@
+import { LightBox } from './LightBox';
+export { useLightBox } from './hooks/useLightBox';
+export default LightBox;

package/Blocks/LightBox/styles.d.ts

@@ -0,0 +1,3 @@
+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, {}, never>;
+export declare const ButtonContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;

package/Blocks/LightBox/styles.js

@@ -0,0 +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  width: 100%;\n  height: 100%;\n  position: relative;\n"], ["\n  width: 100%;\n  height: 100%;\n  position: relative;\n"])));
+export var Image = styled.img(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n"], ["\n  width: 100%;\n  height: 100%;\n"])));
+export var ButtonContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  position: absolute;\n  bottom: -60px;\n"], ["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  position: absolute;\n  bottom: -60px;\n"])));
+var templateObject_1, templateObject_2, templateObject_3;

package/Blocks/LightBox/types.d.ts

@@ -0,0 +1,24 @@
+export interface LightBoxData {
+    initialSlide: number;
+}
+export type UseLightBoxHookType = () => {
+    onOpenLightBox: (index?: number) => () => void;
+    onCloseLightBox: () => void;
+    isLightBoxOpen: boolean;
+    lightBoxData?: LightBoxData;
+};
+export interface ImageData {
+    id: string;
+    url?: string;
+    smallUrl?: string;
+    originalUrl?: string;
+    withLightBoxAction?: boolean;
+}
+export interface LightBoxProps {
+    images: ImageData[] | undefined;
+    isLightBoxOpen: boolean;
+    onCloseLightBox: () => void;
+    lightBoxAction?: (id?: string) => () => Promise<void>;
+    lightBoxActionTitle?: string;
+    initialSlide?: number;
+}

package/Blocks/LightBox/types.js

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

package/Blocks/Modal/Modal.d.ts

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

package/Blocks/Modal/Modal.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useMemo, useEffect } from 'react';
+import { Icon } from '../../Elements/Icon';
+import { DialogOverlay, DialogWindow, HeaderContainer, ButtonsContainer, ContentContainer, TitleContainer, CloseButton, H4, } from './styles';
+import { x } from '@xstyled/styled-components';
+import { Button } from '../../Elements/Button';
+import { Portal } from '../../Elements/Portal';
+import { useClickOutside } from './hooks/useClickOutside';
+import { topSpaceMap, widthMap } from './utils';
+export var Modal = memo(function (_a) {
+    var children = _a.children, _b = _a.isShown, isShown = _b === void 0 ? true : _b, onCancel = _a.onCancel, title = _a.title, titleIcon = _a.titleIcon, onConfirm = _a.onConfirm, confirmLabel = _a.confirmLabel, cancelLabel = _a.cancelLabel, isLoading = _a.isLoading, isConfirmDisabled = _a.isConfirmDisabled, _c = _a.width, width = _c === void 0 ? 'narrow' : _c, _d = _a.topSpace, topSpace = _d === void 0 ? 'default' : _d, onClose = _a.onClose, _e = _a.hasFooter, hasFooter = _e === void 0 ? true : _e, _f = _a.hasHeader, hasHeader = _f === void 0 ? true : _f, _g = _a.whiteBg, whiteBg = _g === void 0 ? false : _g, _h = _a.miniCloseBtn, miniCloseBtn = _h === void 0 ? false : _h, _j = _a.ignoreClickOutside, ignoreClickOutside = _j === void 0 ? false : _j, _k = _a.closeEverywhere, closeEverywhere = _k === void 0 ? false : _k, _l = _a.withCloseIcon, withCloseIcon = _l === void 0 ? true : _l, _m = _a.mobileFullscreen, mobileFullscreen = _m === void 0 ? false : _m, overlayColor = _a.overlayColor, minWidth = _a.minWidth, minHeight = _a.minHeight, maxWidth = _a.maxWidth, maxHeight = _a.maxHeight;
+    var closeDialog = useCallback(function () {
+        if (onClose) {
+            onClose();
+        }
+        else if (onCancel) {
+            onCancel();
+        }
+    }, [onClose, onCancel]);
+    var dialogStyle = useMemo(function () { return ({ width: widthMap[width] }); }, [width]);
+    var dialogRef = useClickOutside({ onClose: closeDialog, ignoreClickOutside: ignoreClickOutside, closeCurrent: true, allowScrollbarClick: true });
+    var onDialogConfirmClick = useCallback(function () {
+        onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(closeDialog);
+    }, [onConfirm, closeDialog]);
+    useEffect(function () {
+        window.addEventListener('popstate', closeDialog);
+        return function () {
+            window.removeEventListener('popstate', closeDialog);
+        };
+    }, []);
+    if (!isShown) {
+        return null;
+    }
+    return (_jsx(Portal, { children: _jsx(DialogOverlay, { backgroundColor: overlayColor, children: _jsxs(DialogWindow, { ref: dialogRef, style: dialogStyle, "$whiteBg": whiteBg, "data-cy": "dialogWindow", onClick: closeEverywhere ? closeDialog : undefined, "$minWidth": minWidth, "$minHeight": minHeight, "$maxWidth": maxWidth, "$maxHeight": maxHeight, "$mobileFullscreen": mobileFullscreen, children: [title && hasHeader && (_jsx(HeaderContainer, { topSpace: topSpaceMap[topSpace], children: _jsxs(TitleContainer, { children: [titleIcon && (_jsx(x.div, { as: "span", className: "icon", children: typeof titleIcon === 'string' ? _jsx(Icon, { icon: titleIcon, fill: "blue2" }) : titleIcon })), _jsx(H4, { children: title })] }) })), _jsx(ContentContainer, { topSpace: topSpaceMap[topSpace], "$mobileFullscreen": mobileFullscreen, children: children }), hasFooter && (onCancel || onConfirm) && (_jsxs(ButtonsContainer, { children: [onCancel && (_jsx(Button, { type: "button", onClick: onCancel, isLoading: isLoading, "data-cy": "cancelBtn", appearance: "primaryLight", children: cancelLabel ? cancelLabel : 'Cancel' })), onConfirm && (_jsx(Button, { type: "button", onClick: onDialogConfirmClick, isLoading: isLoading, disabled: isConfirmDisabled, "data-cy": "submitBtn", children: confirmLabel ? confirmLabel : 'Submit' }))] })), hasHeader && !closeEverywhere && withCloseIcon && (_jsx(CloseButton, { onClick: closeDialog, "data-cy": "dialogCloseBtn", children: _jsx(Icon, { icon: "close", size: miniCloseBtn ? '20px' : '26px' }) }))] }) }) }));
+});

package/Blocks/Modal/hooks/useClickOutside.d.ts

@@ -0,0 +1,3 @@
+import { RefObject } from 'react';
+import { UseClickOutsideProps } from '../types';
+export declare const useClickOutside: ({ onClose, parentRef, ignoreClickOutside, closeCurrent, allowScrollbarClick, }: UseClickOutsideProps) => RefObject<HTMLDivElement>;