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

package/ui/Blocks/CommonGrid/utils/index.js

@@ -1,17 +1,24 @@
-import NumberRange from '../components/NumberRange';
-import TextRange from '../components/TextRange';
-import DatePickerRange from '../components/DatePickerRange';
-import BooleanSelect from '../components/BooleanSelect';
-import GridSelect from '../components/GridSelect';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFilters = exports.rowHeight = exports.GRID_MIN_ROWS = exports.getStickyCollClassNames = exports.getGroupClassNames = exports.getGroups = exports.createFilterType = exports.calculatePaginator = exports.isColumnOn = exports.getFilterName = exports.getSortName = exports.getCellSizeProps = exports.getActionCellSizeProps = void 0;
+var NumberRange_1 = __importDefault(require("../components/NumberRange"));
+var TextRange_1 = __importDefault(require("../components/TextRange"));
+var DatePickerRange_1 = __importDefault(require("../components/DatePickerRange"));
+var BooleanSelect_1 = __importDefault(require("../components/BooleanSelect"));
+var GridSelect_1 = __importDefault(require("../components/GridSelect"));
 var isDefined = function (val) { return typeof val !== 'undefined'; };
-export var getActionCellSizeProps = function (column) {
+var getActionCellSizeProps = function (column) {
     return {
         flexBasis: column.flexBasis,
         flexGrow: 0,
         flexShrink: 0,
     };
 };
-export var getCellSizeProps = function (column, columnWidth) {
+exports.getActionCellSizeProps = getActionCellSizeProps;
+var getCellSizeProps = function (column, columnWidth) {
     if (!column)
         return {};
     var fixedSize = column.fixedSize, flexGrow = column.flexGrow, flexShrink = column.flexShrink, sticky = column.sticky;
@@ -22,13 +29,16 @@ export var getCellSizeProps = function (column, columnWidth) {
         maxWidth: sticky ? columnWidth : 'auto',
     };
 };
-export var getSortName = function (column) {
+exports.getCellSizeProps = getCellSizeProps;
+var getSortName = function (column) {
     return column.systemName || column.name;
 };
-export var getFilterName = function (column) {
+exports.getSortName = getSortName;
+var getFilterName = function (column) {
     return column.systemFilter || column.systemName || column.name;
 };
-export var isColumnOn = function (column, columnConfig) {
+exports.getFilterName = getFilterName;
+var isColumnOn = function (column, columnConfig) {
     var _a;
     if (column.alwaysOn)
         return true;
@@ -37,17 +47,20 @@ export var isColumnOn = function (column, columnConfig) {
         return !isHidden; // isHidden is defined/stored => use user value
     return !column.defaultHidden; // isHidden is undefined => use default value
 };
-export var calculatePaginator = function (page, rowsPerPage) { return ({
+exports.isColumnOn = isColumnOn;
+var calculatePaginator = function (page, rowsPerPage) { return ({
     offset: rowsPerPage ? rowsPerPage * (page - 1) : rowsPerPage,
     limit: rowsPerPage,
 }); };
-export var createFilterType = function (columnDefinition) {
+exports.calculatePaginator = calculatePaginator;
+var createFilterType = function (columnDefinition) {
     if (columnDefinition.filterOptions)
         return 'options';
     else
         return columnDefinition.filteringType || 'text';
 };
-export var getGroups = function (columns) {
+exports.createFilterType = createFilterType;
+var getGroups = function (columns) {
     return columns.map(function (column, key) {
         var previousGroup = key > 0 && columns[key - 1].group;
         return {
@@ -57,23 +70,27 @@ export var getGroups = function (columns) {
         };
     });
 };
-export var getGroupClassNames = function (group) {
+exports.getGroups = getGroups;
+var getGroupClassNames = function (group) {
     return "".concat((group === null || group === void 0 ? void 0 : group.start) ? 'group-start' : '', " ").concat((group === null || group === void 0 ? void 0 : group.end) ? 'group-end' : '');
 };
-export var getStickyCollClassNames = function (sticky, stickTo) {
+exports.getGroupClassNames = getGroupClassNames;
+var getStickyCollClassNames = function (sticky, stickTo) {
     return !sticky ? '' : "".concat(stickTo ? " sticky sticky-".concat(stickTo) : ' sticky sticky-left');
 };
-export var GRID_MIN_ROWS = 6;
-export var rowHeight = 40;
-export var getFilters = function (optimizeFilters) {
+exports.getStickyCollClassNames = getStickyCollClassNames;
+exports.GRID_MIN_ROWS = 6;
+exports.rowHeight = 40;
+var getFilters = function (optimizeFilters) {
     var filters = {
-        number: { CellComponent: NumberRange },
-        text: { CellComponent: TextRange },
-        date: { CellComponent: DatePickerRange },
-        flag: { CellComponent: BooleanSelect },
-        options: { CellComponent: GridSelect },
+        number: { CellComponent: NumberRange_1.default },
+        text: { CellComponent: TextRange_1.default },
+        date: { CellComponent: DatePickerRange_1.default },
+        flag: { CellComponent: BooleanSelect_1.default },
+        options: { CellComponent: GridSelect_1.default },
     };
     if (optimizeFilters)
         filters.text.defaultExtraProps = { defaultComparator: 'eq' };
     return filters;
 };
+exports.getFilters = getFilters;

package/ui/Blocks/CornerDialog/CornerDialog.js

@@ -1,18 +1,22 @@
-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) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CornerDialog = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var utils_1 = require("./utils");
+var Portal_1 = require("../../Elements/Portal");
+var Icon_1 = require("../../Elements/Icon");
+var styles_1 = require("./styles");
+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 () {
+    var _c = (0, react_1.useState)(false), isMounted = _c[0], setIsMounted = _c[1];
+    (0, react_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;
+    var _d = utils_1.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 })] }) }));
+    return ((0, jsx_runtime_1.jsx)(Portal_1.Portal, { children: (0, jsx_runtime_1.jsxs)(styles_1.Container, { "$mounted": isMounted, children: [(0, jsx_runtime_1.jsxs)(styles_1.Status, { background: backgroundColor, children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: utils_1.statusToIcon[intent], fill: fill }), (0, jsx_runtime_1.jsx)(styles_1.StatusText, { fontColor: fontColor, children: statusToTitle[intent]() })] }), (0, jsx_runtime_1.jsx)(styles_1.Header, { children: title }), (0, jsx_runtime_1.jsx)(styles_1.CloseBtn, { onClick: onClose, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: "close", size: "25px" }) }), (0, jsx_runtime_1.jsx)(styles_1.Wrapper, { children: children })] }) }));
 };
+exports.CornerDialog = CornerDialog;

package/ui/Blocks/CornerDialog/index.js

@@ -1,2 +1,4 @@
-import { CornerDialog } from './CornerDialog';
-export default CornerDialog;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var CornerDialog_1 = require("./CornerDialog");
+exports.default = CornerDialog_1.CornerDialog;

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

@@ -1,18 +1,21 @@
-import { CornerDialog } from '../CornerDialog';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WarningCornerDialog = exports.ErrorCornerDialog = exports.SuccessCornerDialog = exports.InfoCornerDialog = void 0;
+var CornerDialog_1 = require("../CornerDialog");
 var meta = {
     title: 'Blocks/CornerDialog',
-    component: CornerDialog,
+    component: CornerDialog_1.CornerDialog,
     tags: ['autodocs'],
     argTypes: {},
 };
-export default meta;
+exports.default = meta;
 var statusToTitle = {
     info: function () { return 'Info'; },
     success: function () { return 'Success'; },
     error: function () { return 'Error'; },
     warning: function () { return 'Warning'; },
 };
-export var InfoCornerDialog = {
+exports.InfoCornerDialog = {
     args: {
         title: 'Info Title',
         children: 'Info corner dialog content',
@@ -21,7 +24,7 @@ export var InfoCornerDialog = {
         isOpen: true,
     },
 };
-export var SuccessCornerDialog = {
+exports.SuccessCornerDialog = {
     args: {
         title: 'Success Title',
         children: 'Success corner dialog content',
@@ -30,7 +33,7 @@ export var SuccessCornerDialog = {
         isOpen: true,
     },
 };
-export var ErrorCornerDialog = {
+exports.ErrorCornerDialog = {
     args: {
         title: 'Error Title',
         children: 'Error corner dialog content',
@@ -39,7 +42,7 @@ export var ErrorCornerDialog = {
         isOpen: true,
     },
 };
-export var WarningCornerDialog = {
+exports.WarningCornerDialog = {
     args: {
         title: 'Warning Title',
         children: 'Warning corner dialog content',

package/ui/Blocks/CornerDialog/styles.js

@@ -1,21 +1,47 @@
+"use strict";
 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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatusText = exports.CloseBtn = exports.Status = exports.Wrapper = exports.Header = exports.Container = void 0;
+var styled_components_1 = __importStar(require("@xstyled/styled-components"));
+exports.Container = styled_components_1.default.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) {
+exports.Header = styled_components_1.default.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"])));
+exports.Wrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-size: 14px;\n  font-weight: 400;\n"], ["\n  font-size: 14px;\n  font-weight: 400;\n"])));
+exports.Status = styled_components_1.default.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);
+    return styled_components_1.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) {
+exports.CloseBtn = styled_components_1.default.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"])));
+exports.StatusText = styled_components_1.default.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);
+    return styled_components_1.th.color(fontColor);
 });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/ui/Blocks/CornerDialog/types.js

@@ -1 +1,2 @@
-export {};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/ui/Blocks/CornerDialog/utils.js

@@ -1,10 +1,13 @@
-export var statusToColors = {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.statusToIcon = exports.statusToColors = void 0;
+exports.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 = {
+exports.statusToIcon = {
     info: 'info',
     success: 'circleCheck',
     error: 'circleX',

package/ui/Blocks/HidePrint/HidePrint.js

@@ -1,13 +1,18 @@
+"use strict";
 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: content;\n  @media print {\n    display: none;\n  }\n"], ["\n  display: content;\n  @media print {\n    display: none;\n  }\n"])));
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = __importDefault(require("styled-components"));
+var HideWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: content;\n  @media print {\n    display: none;\n  }\n"], ["\n  display: content;\n  @media print {\n    display: none;\n  }\n"])));
 var HidePrint = function (_a) {
     var children = _a.children;
-    return _jsx(HideWrapper, { children: children });
+    return (0, jsx_runtime_1.jsx)(HideWrapper, { children: children });
 };
-export default HidePrint;
+exports.default = HidePrint;
 var templateObject_1;

package/ui/Blocks/ImageList/ImageList.js

@@ -1,3 +1,4 @@
+"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -9,21 +10,47 @@ var __assign = (this && this.__assign) || function () {
     };
     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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageList = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_use_draggable_scroll_1 = require("react-use-draggable-scroll");
+var LightBox_1 = __importStar(require("../LightBox"));
+var AddPhoto_1 = require("./components/AddPhoto");
+var ImageElement_1 = require("./components/ImageElement");
+var styled_components_1 = require("@xstyled/styled-components");
+var styles_1 = require("./styles");
+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 ref = (0, react_1.useRef)();
+    var events = (0, react_use_draggable_scroll_1.useDraggable)(ref, { isMounted: !!(images === null || images === void 0 ? void 0 : images.length) }).events;
+    var _b = (0, LightBox_1.useLightBox)(), isLightBoxOpen = _b.isLightBoxOpen, onCloseLightBox = _b.onCloseLightBox, onOpenLightBox = _b.onOpenLightBox, lightBoxData = _b.lightBoxData;
+    return ((0, jsx_runtime_1.jsxs)(styled_components_1.x.div, { display: "flex", alignItems: "flex-end", children: [(0, jsx_runtime_1.jsx)(AddPhoto_1.AddPhoto, { onImageUpload: onImageUpload, isDisabled: isDisabled }), images && ((0, jsx_runtime_1.jsx)(styles_1.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, label: item === null || item === void 0 ? void 0 : item.label }, (_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 })] }));
+                    return ((0, jsx_runtime_1.jsx)(ImageElement_1.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, label: item === null || item === void 0 ? void 0 : item.label }, (_b = item.id) !== null && _b !== void 0 ? _b : index));
+                }) }))), (0, jsx_runtime_1.jsx)(LightBox_1.default, { initialSlide: lightBoxData === null || lightBoxData === void 0 ? void 0 : lightBoxData.initialSlide, isLightBoxOpen: isLightBoxOpen, onCloseLightBox: onCloseLightBox, lightBoxAction: lightBoxAction, lightBoxActionTitle: lightBoxActionTitle, images: images })] }));
 };
+exports.ImageList = ImageList;

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

@@ -1,3 +1,4 @@
+"use strict";
 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) {
@@ -34,13 +35,15 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         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) {
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AddPhoto = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var styles_1 = require("./styles");
+var AddPhoto_1 = require("../../../../Elements/Icon/icons/AddPhoto");
+var AddPhoto = function (_a) {
     var onImageUpload = _a.onImageUpload, isDisabled = _a.isDisabled;
-    var handleImageUpload = useCallback(function (event) {
+    var handleImageUpload = (0, react_1.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;
@@ -64,5 +67,6 @@ export var AddPhoto = function (_a) {
     }, [onImageUpload]);
     if (!onImageUpload)
         return null;
-    return (_jsxs(Container, { isDisabled: isDisabled, children: [_jsx(HiddenInput, { disabled: isDisabled, onChange: handleImageUpload, type: "file", accept: "image/*;capture=camera", capture: "environment" }), _jsx(AddPhotoIcon, { width: "36", height: "36" })] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Container, { isDisabled: isDisabled, children: [(0, jsx_runtime_1.jsx)(styles_1.HiddenInput, { disabled: isDisabled, onChange: handleImageUpload, type: "file", accept: "image/*;capture=camera", capture: "environment" }), (0, jsx_runtime_1.jsx)(AddPhoto_1.AddPhoto, { width: "36", height: "36" })] }));
 };
+exports.AddPhoto = AddPhoto;

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

@@ -1,11 +1,37 @@
+"use strict";
 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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HiddenInput = exports.Container = void 0;
+var styled_components_1 = __importStar(require("@xstyled/styled-components"));
+exports.Container = styled_components_1.default.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"])), styled_components_1.th.radius('lg'), styled_components_1.th.border('mediumSlim'), styled_components_1.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"])));
+exports.HiddenInput = styled_components_1.default.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.js

@@ -1,7 +1,11 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Icon } from '../../../../Elements/Icon';
-import { Container } from './styles';
-export var CloseButton = function (_a) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CloseButton = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Icon_1 = require("../../../../Elements/Icon");
+var styles_1 = require("./styles");
+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' }) }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.Container, { onClick: !isDisabled ? onImageRemove : undefined, isDisabled: isDisabled, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: "close", size: "22px", fill: isDisabled ? 'magenta60' : 'red1' }) }));
 };
+exports.CloseButton = CloseButton;

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

@@ -1,10 +1,36 @@
+"use strict";
 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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Container = void 0;
+var styled_components_1 = __importStar(require("@xstyled/styled-components"));
+exports.Container = styled_components_1.default.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');
+    return styled_components_1.th.color(isDisabled ? 'bgLightGray1' : 'red20');
 });
 var templateObject_1;

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

@@ -1,11 +1,15 @@
-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) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageElement = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styles_1 = require("./styles");
+var ImageTag_1 = require("../ImageTag");
+var CloseButton_1 = require("../CloseButton");
+var styled_components_1 = require("@xstyled/styled-components");
+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", h: "100px", children: [_jsx(Image, { src: imageUrl, alt: "", width: "85px", height: "85px", onClick: onOpenLightBox }), onImageRemove && _jsx(CloseButton, { onImageRemove: onImageRemove, isDisabled: isDisabled }), _jsx(ImageTag, { label: label })] }));
+    return ((0, jsx_runtime_1.jsxs)(styled_components_1.x.div, { position: "relative", pr: "15px", pt: "15px", w: "100px", h: "100px", children: [(0, jsx_runtime_1.jsx)(styles_1.Image, { src: imageUrl, alt: "", width: "85px", height: "85px", onClick: onOpenLightBox }), onImageRemove && (0, jsx_runtime_1.jsx)(CloseButton_1.CloseButton, { onImageRemove: onImageRemove, isDisabled: isDisabled }), (0, jsx_runtime_1.jsx)(ImageTag_1.ImageTag, { label: label })] }));
 };
+exports.ImageElement = ImageElement;

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

@@ -1,8 +1,34 @@
+"use strict";
 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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Image = exports.Container = void 0;
+var styled_components_1 = __importStar(require("@xstyled/styled-components"));
+exports.Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
+exports.Image = styled_components_1.default.img(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: ", ";\n"], ["\n  border-radius: ", ";\n"])), styled_components_1.th.radius('lg'));
 var templateObject_1, templateObject_2;