@mailstep/design-system 0.4.1-beta.4 → 0.4.2-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.4.1-beta.4",
+  "version": "0.4.2-beta.0",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

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

@@ -7,5 +7,5 @@ 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 })] }));
+    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 })] }));
 };

package/ui/Blocks/ImageList/stories/ImageList.stories.js

@@ -18,14 +18,14 @@ var meta = {
 };
 export default meta;
 var images = [
-    { id: '1', smallUrl: 'https://picsum.photos/200/300', url: 'https://d3l7rp8qrtssjc.cloudfront.net/cache/receipt_original/001074f6-997d-46e5-80e0-82edaa6f3d3a/06a09ae0-557c-4808-86f7-f75ac43c6238.jpg' },
-    { id: '2', smallUrl: 'https://picsum.photos/200/300', url: 'https://d3l7rp8qrtssjc.cloudfront.net/cache/receipt_original/001074f6-997d-46e5-80e0-82edaa6f3d3a/d0d38623-a7db-40dc-b2d9-2dc851f6a702.jpg' },
-    { id: '3', smallUrl: 'https://picsum.photos/200/300', url: 'https://d3l7rp8qrtssjc.cloudfront.net/cache/receipt_original/001074f6-997d-46e5-80e0-82edaa6f3d3a/639e91d9-49b8-4106-a2b6-152d4d3d8f1e.jpg' },
+    { id: '1', smallUrl: 'https://picsum.photos/200/300', url: 'https://picsum.photos/400/400' },
+    { id: '1', smallUrl: 'https://picsum.photos/200/300', url: 'https://picsum.photos/400/400' },
 ];
 export var ImageListDefault = {
     args: {
         images: images,
         isDisabled: false,
+        onImageRemove: function (id) { return function () { return null; }; }
     },
 };
 export var ImageListDisabled = {

package/ui/Blocks/LightBox/styles.js

@@ -6,5 +6,5 @@ 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  display: flex;\n"], ["\n  width: 100%;\n  height: 100%;\n  position: relative;\n  display: flex;\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"])));
-export var Description = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding: 10px;\n  position: absolute;\n  bottom: 0px;\n  background: rgba(255, 255, 255, 0.5);\n"], ["\n  padding: 10px;\n  position: absolute;\n  bottom: 0px;\n  background: rgba(255, 255, 255, 0.5);\n"])));
+export var Description = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding: 10px;\n  position: absolute;\n  width: 100%;\n  bottom: 0px;\n  background: rgba(255, 255, 255, 0.8);\n"], ["\n  padding: 10px;\n  position: absolute;\n  width: 100%;\n  bottom: 0px;\n  background: rgba(255, 255, 255, 0.8);\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/ui/index.es.js

@@ -14828,8 +14828,9 @@ const qT = V.div`
 `, eL = V.div`
   padding: 10px;
   position: absolute;
+  width: 100%;
   bottom: 0px;
-  background: rgba(255, 255, 255, 0.5);
+  background: rgba(255, 255, 255, 0.8);
 `, tL = ({
   isLightBoxOpen: e,
   onCloseLightBox: t,
@@ -14967,7 +14968,7 @@ const oL = V.img`
   justify-content: center;
   cursor: pointer;
   transition: all 0.2s linear;
-`, vL = ({ onImageRemove: e, isDisabled: t }) => /* @__PURE__ */ f.jsx(pL, { onClick: t ? void 0 : e, isDisabled: t, children: /* @__PURE__ */ f.jsx(Le, { icon: "close", size: "22px", fill: t ? "magenta60" : "red1" }) }), mL = ({ label: e, onImageRemove: t, isDisabled: r, onOpenLightBox: n, imageUrl: i }) => i ? /* @__PURE__ */ f.jsxs(Re.div, { position: "relative", pr: "15px", pt: "15px", w: "100px", children: [
+`, vL = ({ onImageRemove: e, isDisabled: t }) => /* @__PURE__ */ f.jsx(pL, { onClick: t ? void 0 : e, isDisabled: t, children: /* @__PURE__ */ f.jsx(Le, { icon: "close", size: "22px", fill: t ? "magenta60" : "red1" }) }), mL = ({ label: e, onImageRemove: t, isDisabled: r, onOpenLightBox: n, imageUrl: i }) => i ? /* @__PURE__ */ f.jsxs(Re.div, { position: "relative", pr: "15px", pt: "15px", w: "100px", h: "100px", children: [
   /* @__PURE__ */ f.jsx(oL, { src: i, alt: "", width: "85px", height: "85px", onClick: n }),
   t && /* @__PURE__ */ f.jsx(vL, { onImageRemove: t, isDisabled: r }),
   /* @__PURE__ */ f.jsx(gL, { label: e })

package/ui/index.umd.js

@@ -1418,8 +1418,9 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
 `,dL=F.div`
   padding: 10px;
   position: absolute;
+  width: 100%;
   bottom: 0px;
-  background: rgba(255, 255, 255, 0.5);
+  background: rgba(255, 255, 255, 0.8);
 `,cf=({isLightBoxOpen:e,onCloseLightBox:t,lightBoxAction:r,lightBoxActionTitle:n,images:i,initialSlide:a=0})=>i!=null&&i.length?d.jsx(D3,{isShown:e,onClose:t,variant:"mobileFullscreen",top:"10px",children:d.jsx(sf,{initialSlide:a,slidesPerView:1,autoHeight:!0,children:i.map(o=>d.jsx(lf,{children:d.jsxs(lL,{children:[d.jsx(cL,{src:o.originalUrl??o.url,loading:"lazy",alt:""}),(o.date||o.description)&&d.jsxs(dL,{children:[o.date," ",o.description]}),!!o.withLightBoxAction&&r&&n&&d.jsx(fL,{children:d.jsx(vn,{onClick:r(o.id),appearance:"primaryLight",children:n})})]})},o.id))})}):null,ff=()=>{const{isOpen:e,onOpen:t,onClose:r,data:n}=V3();return{onOpenLightBox:M.useCallback((a=0)=>()=>{t({initialSlide:a})},[t]),onCloseLightBox:r,isLightBoxOpen:e,lightBoxData:n}},uL=F.div`
   position: relative;
   flex-shrink: 0;
@@ -1487,7 +1488,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
   justify-content: center;
   cursor: pointer;
   transition: all 0.2s linear;
-`,xL=({onImageRemove:e,isDisabled:t})=>d.jsx(SL,{onClick:t?void 0:e,isDisabled:t,children:d.jsx(Oe,{icon:"close",size:"22px",fill:t?"magenta60":"red1"})}),kL=({label:e,onImageRemove:t,isDisabled:r,onOpenLightBox:n,imageUrl:i})=>i?d.jsxs(Be.div,{position:"relative",pr:"15px",pt:"15px",w:"100px",children:[d.jsx(pL,{src:i,alt:"",width:"85px",height:"85px",onClick:n}),t&&d.jsx(xL,{onImageRemove:t,isDisabled:r}),d.jsx(EL,{label:e})]}):null,PL=F.div`
+`,xL=({onImageRemove:e,isDisabled:t})=>d.jsx(SL,{onClick:t?void 0:e,isDisabled:t,children:d.jsx(Oe,{icon:"close",size:"22px",fill:t?"magenta60":"red1"})}),kL=({label:e,onImageRemove:t,isDisabled:r,onOpenLightBox:n,imageUrl:i})=>i?d.jsxs(Be.div,{position:"relative",pr:"15px",pt:"15px",w:"100px",h:"100px",children:[d.jsx(pL,{src:i,alt:"",width:"85px",height:"85px",onClick:n}),t&&d.jsx(xL,{onImageRemove:t,isDisabled:r}),d.jsx(EL,{label:e})]}):null,PL=F.div`
   display: flex;
   overflow-x: scroll;
   -ms-overflow-style: none;