@mailstep/design-system 0.2.0-beta.1 → 0.2.0-beta.3

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, isDisabled = _a.isDisabled;
+    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, isDisabled: isDisabled }), 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), isDisabled: isDisabled }, (_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,8 @@
+import { type FC } from 'react';
+import { type ImageUploadProps } from '../../types';
+interface AddPhotoProps {
+    onImageUpload?: (props: ImageUploadProps) => Promise<void>;
+    isDisabled?: boolean;
+}
+export declare const AddPhoto: FC<AddPhotoProps>;
+export {};

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

@@ -0,0 +1,68 @@
+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';
+import { AddPhoto as AddPhotoIcon } from '../../../../Elements/Icon/icons/AddPhoto';
+export var AddPhoto = function (_a) {
+    var onImageUpload = _a.onImageUpload, isDisabled = _a.isDisabled;
+    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, children: [_jsx(HiddenInput, { disabled: isDisabled, onChange: handleImageUpload, type: "file", accept: "image/*" }), _jsx(AddPhotoIcon, { width: "36", height: "36" })] }));
+};

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

@@ -0,0 +1,4 @@
+export declare const Container: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+    isDisabled?: boolean | undefined;
+}, 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,11 @@
+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"], ["\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"])), th.radius('lg'), th.border('mediumSlim'), th.color('red1'), function (_a) {
+    var isDisabled = _a.isDisabled;
+    return (isDisabled ? 0.6 : 1);
+});
+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,7 @@
+import { type FC } from 'react';
+interface CloseButtonProps {
+    onImageRemove: () => void;
+    isDisabled?: boolean;
+}
+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, isDisabled = _a.isDisabled;
+    return (_jsx(Container, { onClick: !isDisabled ? onImageRemove : undefined, isDisabled: isDisabled, children: _jsx(Icon, { icon: "close", size: "22px", fill: isDisabled ? 'magenta60' : 'red1' }) }));
+};

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

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

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

@@ -0,0 +1,10 @@
+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/Blocks/ImageList/components/ImageElement/index.d.ts

@@ -0,0 +1,10 @@
+import { type FC } from 'react';
+interface ImageElementProps {
+    label?: string;
+    onImageRemove?: () => void;
+    onOpenLightBox: () => void;
+    imageUrl: string | undefined;
+    isDisabled?: boolean;
+}
+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, isDisabled = _a.isDisabled, 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, isDisabled: isDisabled }), _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,14 @@
+import { type ImageData } from '../LightBox';
+export interface ImageUploadProps {
+    base64image?: string;
+    base64WithDataDeclaration?: 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;
+    isDisabled?: boolean;
+}

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,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../Elements/Button';
+import Modal from '../Modal';
+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>;