@mailstep/design-system 0.6.83 → 0.6.84

package/package.json

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

package/ui/Blocks/Tabs/styles.js

@@ -7,7 +7,7 @@ export var StyledImageBox = styled(x.div)(templateObject_1 || (templateObject_1
 export var StyledTabWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: baseline;\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: baseline;\n"])));
 export var RoundedWrap = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex !important;\n  justify-content: center;\n  align-items: center;\n  height: 23px;\n  background-color: ", ";\n  border-radius: 29px;\n  padding: 3px 10px;\n  margin-left: 8px;\n"], ["\n  display: flex !important;\n  justify-content: center;\n  align-items: center;\n  height: 23px;\n  background-color: ", ";\n  border-radius: 29px;\n  padding: 3px 10px;\n  margin-left: 8px;\n"])), th.color('lightGray7'));
 var activeTab = css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: ", ";\n  position: relative;\n  &:after {\n    content: '';\n    position: absolute;\n    bottom: 2;\n    left: 0;\n    right: 0;\n    background-color: ", ";\n    height: 4px;\n    border-radius: 6px 6px 0px 0px;\n  }\n  & > div {\n    display: inline;\n    color: ", ";\n  }\n"], ["\n  color: ", ";\n  position: relative;\n  &:after {\n    content: '';\n    position: absolute;\n    bottom: 2;\n    left: 0;\n    right: 0;\n    background-color: ", ";\n    height: 4px;\n    border-radius: 6px 6px 0px 0px;\n  }\n  & > div {\n    display: inline;\n    color: ", ";\n  }\n"])), th.color('red1'), th.color('red1'), th.color('typoPrimary'));
-export var Tab = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  padding: 0.6rem;\n  transition: 200ms;\n  color: ", ";\n  font-weight: bold;\n  font-size: 14px;\n  height: 46px;\n  letter-spacing: 0.03em;\n  margin-top: 10px;\n  min-width: 120px;\n  & > div {\n    display: none;\n  }\n  &:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n\n  :hover {\n    color: ", ";\n  }\n\n  :active {\n    ", "\n  }\n\n  ", "\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  padding: 0.6rem;\n  transition: 200ms;\n  color: ", ";\n  font-weight: bold;\n  font-size: 14px;\n  height: 46px;\n  letter-spacing: 0.03em;\n  margin-top: 10px;\n  min-width: 120px;\n  & > div {\n    display: none;\n  }\n  &:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n\n  :hover {\n    color: ", ";\n  }\n\n  :active {\n    ", "\n  }\n\n  ", "\n"])), th.color('gray'), th.color('typoPrimary'), function (_a) {
+export var Tab = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  padding: 0.6rem;\n  transition: 200ms;\n  color: ", ";\n  font-weight: bold;\n  font-size: 14px;\n  height: 46px;\n  letter-spacing: 0.03em;\n  margin-top: 10px;\n  min-width: 100px;\n\n  & > div {\n    display: none;\n  }\n  &:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n\n  :hover {\n    color: ", ";\n  }\n\n  :active {\n    ", ";\n  }\n\n  ", ";\n\n  @media (min-width: 400px) {\n    min-width: 120px;\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  padding: 0.6rem;\n  transition: 200ms;\n  color: ", ";\n  font-weight: bold;\n  font-size: 14px;\n  height: 46px;\n  letter-spacing: 0.03em;\n  margin-top: 10px;\n  min-width: 100px;\n\n  & > div {\n    display: none;\n  }\n  &:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n\n  :hover {\n    color: ", ";\n  }\n\n  :active {\n    ", ";\n  }\n\n  ", ";\n\n  @media (min-width: 400px) {\n    min-width: 120px;\n  }\n"])), th.color('gray'), th.color('typoPrimary'), function (_a) {
     var disabled = _a.disabled;
     return !disabled && activeTab;
 }, function (_a) {

package/ui/index.es.js

@@ -52408,7 +52408,8 @@ const _Se = /* @__PURE__ */ Ra(GSe), USe = ct`
   height: 46px;
   letter-spacing: 0.03em;
   margin-top: 10px;
-  min-width: 120px;
+  min-width: 100px;
+
   & > div {
     display: none;
   }
@@ -52423,12 +52424,16 @@ const _Se = /* @__PURE__ */ Ra(GSe), USe = ct`
   :active {
     ${({
   disabled: e
-}) => !e && PM}
+}) => !e && PM};
   }
 
   ${({
   active: e
-}) => e ? PM : ""}
+}) => e ? PM : ""};
+
+  @media (min-width: 400px) {
+    min-width: 120px;
+  }
 `, rEe = q.div`
   min-height: 3rem;
   display: flex;

package/ui/index.umd.js

@@ -4024,7 +4024,8 @@ ${q.current.stack}
   height: 46px;
   letter-spacing: 0.03em;
   margin-top: 10px;
-  min-width: 120px;
+  min-width: 100px;
+
   & > div {
     display: none;
   }
@@ -4037,10 +4038,14 @@ ${q.current.stack}
   }
 
   :active {
-    ${({disabled:e})=>!e&&wH}
+    ${({disabled:e})=>!e&&wH};
   }
 
-  ${({active:e})=>e?wH:""}
+  ${({active:e})=>e?wH:""};
+
+  @media (min-width: 400px) {
+    min-width: 120px;
+  }
 `,iIe=$.div`
   min-height: 3rem;
   display: flex;