@mailstep/design-system 0.6.32 → 0.6.33

package/package.json

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

package/ui/Elements/Alert/styles.js

@@ -6,7 +6,7 @@ import { Link } from '../Link';
 import { x } from '@xstyled/styled-components';
 import { th } from '@xstyled/styled-components';
 import styled from 'styled-components';
-export var StyledAlert = styled(x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  min-height: 48px;\n  align-items: center;\n  justify-content: space-between;\n  border: ", ";\n  border-radius: 8px;\n  background-color: ", ";\n  color: ", ";\n  font-family: ", ";\n  padding: 6px 5px 6px 5px;\n  margin-bottom: 5px;\n  position: relative;\n"], ["\n  width: 100%;\n  display: flex;\n  min-height: 48px;\n  align-items: center;\n  justify-content: space-between;\n  border: ", ";\n  border-radius: 8px;\n  background-color: ", ";\n  color: ", ";\n  font-family: ", ";\n  padding: 6px 5px 6px 5px;\n  margin-bottom: 5px;\n  position: relative;\n"])), function (_a) {
+export var StyledAlert = styled(x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: calc(100vw - 20px);\n  display: flex;\n  min-height: 48px;\n  align-items: center;\n  justify-content: space-between;\n  border: ", ";\n  border-radius: 8px;\n  background-color: ", ";\n  color: ", ";\n  font-family: ", ";\n  padding: 6px 5px 6px 5px;\n  margin-bottom: 5px;\n  position: sticky;\n  left: 10px;\n  @media (min-width: 1024px) {\n    position: relative;\n    left: 0;\n    width: 100%;\n  }\n"], ["\n  width: calc(100vw - 20px);\n  display: flex;\n  min-height: 48px;\n  align-items: center;\n  justify-content: space-between;\n  border: ", ";\n  border-radius: 8px;\n  background-color: ", ";\n  color: ", ";\n  font-family: ", ";\n  padding: 6px 5px 6px 5px;\n  margin-bottom: 5px;\n  position: sticky;\n  left: 10px;\n  @media (min-width: 1024px) {\n    position: relative;\n    left: 0;\n    width: 100%;\n  }\n"])), function (_a) {
     var $inline = _a.$inline, $colorFill = _a.$colorFill;
     return ($inline ? "solid 1px ".concat($colorFill) : 'none');
 }, function (_a) {

package/ui/index.es.js

@@ -16721,7 +16721,7 @@ KA.defaultProps = {
   replace: !1
 };
 const jle = Ti(ft.div)`
-  width: 100%;
+  width: calc(100vw - 20px);
   display: flex;
   min-height: 48px;
   align-items: center;
@@ -16738,7 +16738,13 @@ const jle = Ti(ft.div)`
   font-family: ${te("fonts.primary")};
   padding: 6px 5px 6px 5px;
   margin-bottom: 5px;
-  position: relative;
+  position: sticky;
+  left: 10px;
+  @media (min-width: 1024px) {
+    position: relative;
+    left: 0;
+    width: 100%;
+  }
 `, Wle = Ti(ft.div)`
   width: 4px;
   height: 36px;

package/ui/index.umd.js

@@ -1567,7 +1567,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
           opacity: 0.5;
         `:null}
 `,s2=e=>{const t=vt(),r=e.color?re.color(e.color)({theme:t}):void 0,n=re.fontSize(e.size)({theme:t});return b.jsx(Iue,{...e,color:r,size:n,children:e.children})};s2.defaultProps={to:"",color:"linkColor",disabled:!1,size:1,padding:"0",replace:!1};const kue=wr(ot.div)`
-  width: 100%;
+  width: calc(100vw - 20px);
   display: flex;
   min-height: 48px;
   align-items: center;
@@ -1579,7 +1579,13 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
   font-family: ${re("fonts.primary")};
   padding: 6px 5px 6px 5px;
   margin-bottom: 5px;
-  position: relative;
+  position: sticky;
+  left: 10px;
+  @media (min-width: 1024px) {
+    position: relative;
+    left: 0;
+    width: 100%;
+  }
 `,Oue=wr(ot.div)`
   width: 4px;
   height: 36px;