@mailstep/design-system 0.6.22 → 0.6.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.6.22",
+  "version": "0.6.23",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

package/ui/Elements/Dropdown/Dropdown.js

@@ -12,17 +12,17 @@ var Arrow = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObj
     return (verticalShift ? 'calc(50% + 70px)' : 'calc(50%)');
 }, ArrowInnerA, ArrowInnerB, th.color('white'));
 var StyledDropdownWrap = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n\n  ", "\n\n  width: fit-content;\n  height: fit-content;\n  display: block;\n  z-index: 1;\n\n  ", " {\n    display: ", ";\n  }\n"], ["\n  position: absolute;\n\n  ", "\n\n  width: fit-content;\n  height: fit-content;\n  display: block;\n  z-index: 1;\n\n  ", " {\n    display: ", ";\n  }\n"])), function (_a) {
-    var customDropdownPosition = _a.customDropdownPosition, verticalShift = _a.verticalShift;
+    var customDropdownPosition = _a.customDropdownPosition;
     return customDropdownPosition
         ? customDropdownPosition
-        : "\n      top: 100%;\n      left: ".concat(verticalShift ? 'calc(50% - 72px)' : 'calc(50%)', ";\n      transform: translate(-50%, 0);\n    ");
+        : "\n      top: 100%;\n      right: 0;\n    ";
 }, Arrow, function (_a) {
     var showArrow = _a.showArrow;
     return (showArrow ? 'block' : 'none');
 });
 var Dropdown = function (_a) {
     var show = _a.show, className = _a.className, wrapRef = _a.wrapRef, children = _a.children, showArrow = _a.showArrow, verticalShift = _a.verticalShift, customDropdownPosition = _a.customDropdownPosition;
-    return (_jsx(_Fragment, { children: show && (_jsxs(StyledDropdownWrap, { ref: wrapRef, className: className, showArrow: showArrow, verticalShift: verticalShift, customDropdownPosition: customDropdownPosition, children: [_jsx(Arrow, { verticalShift: verticalShift, children: _jsx(ArrowInnerA, { children: _jsx(ArrowInnerB, {}) }) }), children] })) }));
+    return (_jsx(_Fragment, { children: show && (_jsxs(StyledDropdownWrap, { ref: wrapRef, className: className, showArrow: showArrow, customDropdownPosition: customDropdownPosition, children: [_jsx(Arrow, { verticalShift: verticalShift, children: _jsx(ArrowInnerA, { children: _jsx(ArrowInnerB, {}) }) }), children] })) }));
 };
 export default Dropdown;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/ui/Elements/DropdownMenu/components/DefaultItem.js

@@ -4,7 +4,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled, { css } from '@xstyled/styled-components';
-var StyledListItem = styled.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 10px;\n  font-size: 12px;\n  color: typoPrimary;\n  font-weight: normal;\n\n  :hover {\n    background-color: bgLightGray1;\n    cursor: pointer;\n  }\n\n  ", ";\n"], ["\n  padding: 10px;\n  font-size: 12px;\n  color: typoPrimary;\n  font-weight: normal;\n\n  :hover {\n    background-color: bgLightGray1;\n    cursor: pointer;\n  }\n\n  ", ";\n"])), function (props) {
+var StyledListItem = styled.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 8px 10px;\n  font-size: 14px;\n  color: typoPrimary;\n  font-weight: normal;\n\n  :hover {\n    background-color: bgLightGray1;\n    cursor: pointer;\n  }\n\n  ", ";\n"], ["\n  padding: 8px 10px;\n  font-size: 14px;\n  color: typoPrimary;\n  font-weight: normal;\n\n  :hover {\n    background-color: bgLightGray1;\n    cursor: pointer;\n  }\n\n  ", ";\n"])), function (props) {
     return props.hasSeparator && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      border-top: slim;\n      border-color: lightGray2;\n    "], ["\n      border-top: slim;\n      border-color: lightGray2;\n    "])));
 });
 var IconWrap = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-right: 10px;\n"], ["\n  margin-right: 10px;\n"])));

package/ui/index.es.js

@@ -17068,12 +17068,10 @@ const jle = Ti(ht.div)`
   position: absolute;
 
   ${({
-  customDropdownPosition: e,
-  verticalShift: t
+  customDropdownPosition: e
 }) => e || `
       top: 100%;
-      left: ${t ? "calc(50% - 72px)" : "calc(50%)"};
-      transform: translate(-50%, 0);
+      right: 0;
     `}
 
   width: fit-content;
@@ -17094,7 +17092,7 @@ const jle = Ti(ht.div)`
   showArrow: i,
   verticalShift: o,
   customDropdownPosition: l
-}) => /* @__PURE__ */ b.jsx(b.Fragment, { children: e && /* @__PURE__ */ b.jsxs(due, { ref: r, className: t, showArrow: i, verticalShift: o, customDropdownPosition: l, children: [
+}) => /* @__PURE__ */ b.jsx(b.Fragment, { children: e && /* @__PURE__ */ b.jsxs(due, { ref: r, className: t, showArrow: i, customDropdownPosition: l, children: [
   /* @__PURE__ */ b.jsx(K_, { verticalShift: o, children: /* @__PURE__ */ b.jsx(Q_, { children: /* @__PURE__ */ b.jsx(q_, {}) }) }),
   n
 ] }) }), fue = Ot`
@@ -45200,8 +45198,8 @@ const USe = (e = {}, t) => cwe(e, (r) => {
   ItemComponent: t,
   onClose: r
 }) => /* @__PURE__ */ b.jsx("ul", { children: e && e.map((n, i) => !n.hidden && /* @__PURE__ */ b.jsx(Swe, { item: n, ItemComponent: t, onClose: r }, i)) }), Owe = ae.li`
-  padding: 10px;
-  font-size: 12px;
+  padding: 8px 10px;
+  font-size: 14px;
   color: typoPrimary;
   font-weight: normal;
 

package/ui/index.umd.js

@@ -1781,10 +1781,9 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
 `,$ue=ae.div`
   position: absolute;
 
-  ${({customDropdownPosition:e,verticalShift:t})=>e||`
+  ${({customDropdownPosition:e})=>e||`
       top: 100%;
-      left: ${t?"calc(50% - 72px)":"calc(50%)"};
-      transform: translate(-50%, 0);
+      right: 0;
     `}
 
   width: fit-content;
@@ -1795,7 +1794,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
   ${XD} {
     display: ${({showArrow:e})=>e?"block":"none"};
   }
-`,ece=({show:e,className:t,wrapRef:r,children:n,showArrow:i,verticalShift:o,customDropdownPosition:l})=>b.jsx(b.Fragment,{children:e&&b.jsxs($ue,{ref:r,className:t,showArrow:i,verticalShift:o,customDropdownPosition:l,children:[b.jsx(XD,{verticalShift:o,children:b.jsx(JD,{children:b.jsx(UD,{})})}),n]})}),tce=wt`
+`,ece=({show:e,className:t,wrapRef:r,children:n,showArrow:i,verticalShift:o,customDropdownPosition:l})=>b.jsx(b.Fragment,{children:e&&b.jsxs($ue,{ref:r,className:t,showArrow:i,customDropdownPosition:l,children:[b.jsx(XD,{verticalShift:o,children:b.jsx(JD,{children:b.jsx(UD,{})})}),n]})}),tce=wt`
   span {
     display: none;
     position: absolute;
@@ -3307,8 +3306,8 @@ Avoid returning a new reference inside your input selector, e.g.
   }
 `}
 `,AAe=({item:e,ItemComponent:t,onClose:r})=>{const{onClick:n,link:i,hasSeparator:o,name:l,autoClose:u}=e,c=vue(),f=i===c.pathname,h=I.useCallback(p=>{n&&(p.preventDefault(),n()),u&&r&&setTimeout(()=>{r()},200)},[u,n,r]);return b.jsx(wAe,{to:i,$isActive:f,onClick:h,$hasSeparator:!!o,"data-cy":l,size:"inherit",children:b.jsx(t,{...e})})},CAe=({items:e,ItemComponent:t,onClose:r})=>b.jsx("ul",{children:e&&e.map((n,i)=>!n.hidden&&b.jsx(AAe,{item:n,ItemComponent:t,onClose:r},i))}),xAe=ae.li`
-  padding: 10px;
-  font-size: 12px;
+  padding: 8px 10px;
+  font-size: 14px;
   color: typoPrimary;
   font-weight: normal;