@mailstep/design-system 0.7.24-beta.3 → 0.7.24-beta.4

package/package.json

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

package/ui/Blocks/Tabs/Tabs.d.ts

@@ -1,2 +1,2 @@
 import { TabsProps } from './types';
-export declare const Tabs: ({ tabsDefinition, activeTab, onTabSwitch, mb }: TabsProps) => JSX.Element;
+export declare const Tabs: ({ tabsDefinition, activeTab, onTabSwitch, mb, mt }: TabsProps) => JSX.Element;

package/ui/Blocks/Tabs/Tabs.js

@@ -12,8 +12,8 @@ var Tab = function (_a) {
     return (_jsx(StyledTabWrapper, { children: _jsxs(StyledTab, { onClick: !disabled ? handleOnClick : undefined, active: isActive, disabled: disabled, children: [icon && (_jsx(StyledImageBox, { children: _jsx(Icon, { icon: icon }) })), _jsx(Text, { children: label }), badgeCount === 0 || (badgeCount && badgeCount > 0) && (_jsx(RoundedWrap, { children: _jsx(Text, { variant: "medium", children: badgeCount }) }))] }) }));
 };
 export var Tabs = function (_a) {
-    var tabsDefinition = _a.tabsDefinition, activeTab = _a.activeTab, onTabSwitch = _a.onTabSwitch, mb = _a.mb;
-    return (_jsx(TabPanel, { "$mb": mb, children: tabsDefinition.map(function (item, index) {
+    var tabsDefinition = _a.tabsDefinition, activeTab = _a.activeTab, onTabSwitch = _a.onTabSwitch, mb = _a.mb, mt = _a.mt;
+    return (_jsx(TabPanel, { "$mb": mb, "$mt": mt, children: tabsDefinition.map(function (item, index) {
             return _jsx(Tab, { value: index, tabDefinition: item, isActive: index === activeTab, onTabSwitch: onTabSwitch }, index);
         }) }));
 };

package/ui/Blocks/Tabs/stories/Tabs.stories.d.ts

@@ -2,7 +2,7 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ tabsDefinition, activeTab, onTabSwitch, mb }: import("../types").TabsProps) => JSX.Element;
+    component: ({ tabsDefinition, activeTab, onTabSwitch, mb, mt }: import("../types").TabsProps) => JSX.Element;
     tags: string[];
     argTypes: {};
 };

package/ui/Blocks/Tabs/styles.d.ts

@@ -8,4 +8,5 @@ export declare const Tab: import("styled-components").StyledComponent<"div", imp
 }, never>;
 export declare const TabPanel: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     $mb?: string | undefined;
+    $mt?: string | undefined;
 }, never>;

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: center;\n  position: relative;\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  position: relative;\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\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\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: ", ";\n  padding: 0 8px 12px;\n  transition: 200ms;\n  color: ", ";\n  font-weight: bold;\n  font-size: 14px;\n  letter-spacing: 0.03em;\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: ", ";\n  padding: 0 8px 12px;\n  transition: 200ms;\n  color: ", ";\n  font-weight: bold;\n  font-size: 14px;\n  letter-spacing: 0.03em;\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"])), 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: ", ";\n  padding: 0 8px 8px;\n  transition: 200ms;\n  color: ", ";\n  font-weight: bold;\n  font-size: 14px;\n  letter-spacing: 0.03em;\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: ", ";\n  padding: 0 8px 8px;\n  transition: 200ms;\n  color: ", ";\n  font-weight: bold;\n  font-size: 14px;\n  letter-spacing: 0.03em;\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"])), function (_a) {
     var disabled = _a.disabled;
     return (disabled ? 'auto' : 'pointer');
 }, th.color('gray'), function (_a) {
@@ -20,8 +20,11 @@ export var Tab = styled.div(templateObject_5 || (templateObject_5 = __makeTempla
     var active = _a.active;
     return (active ? activeTab : '');
 });
-export var TabPanel = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  overflow: auto;\n  width: fit-content;\n  position: relative;\n  margin-bottom: ", ";\n  align-items: stretch;\n\n  &:after {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    background-color: ", ";\n    height: 2px;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  overflow: auto;\n  width: fit-content;\n  position: relative;\n  margin-bottom: ", ";\n  align-items: stretch;\n\n  &:after {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    background-color: ", ";\n    height: 2px;\n  }\n"])), function (_a) {
+export var TabPanel = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  overflow: auto;\n  width: fit-content;\n  position: relative;\n  margin-bottom: ", ";\n  margin-top: ", ";\n  align-items: stretch;\n\n  &:after {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    background-color: ", ";\n    height: 2px;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  overflow: auto;\n  width: fit-content;\n  position: relative;\n  margin-bottom: ", ";\n  margin-top: ", ";\n  align-items: stretch;\n\n  &:after {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    background-color: ", ";\n    height: 2px;\n  }\n"])), function (_a) {
     var _b = _a.$mb, $mb = _b === void 0 ? 0 : _b;
     return $mb;
+}, function (_a) {
+    var _b = _a.$mt, $mt = _b === void 0 ? 0 : _b;
+    return $mt;
 }, th.color('bgLightGray1'));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/ui/Blocks/Tabs/types.d.ts

@@ -11,6 +11,7 @@ export type TabsProps = {
     activeTab: number;
     onTabSwitch: (tab: number) => void;
     mb?: string;
+    mt?: string;
 };
 export type TabElementProps = {
     tabDefinition: TabDefinition;

package/ui/index.es.js

@@ -48689,7 +48689,7 @@ const AOe = /* @__PURE__ */ Hr(fOe), pOe = Qe`
   cursor: ${({
   disabled: e
 }) => e ? "auto" : "pointer"};
-  padding: 0 8px 12px;
+  padding: 0 8px 8px;
   transition: 200ms;
   color: ${V.color("gray")};
   font-weight: bold;
@@ -48731,6 +48731,9 @@ const AOe = /* @__PURE__ */ Hr(fOe), pOe = Qe`
   position: relative;
   margin-bottom: ${({
   $mb: e = 0
+}) => e};
+  margin-top: ${({
+  $mt: e = 0
 }) => e};
   align-items: stretch;
 
@@ -48766,8 +48769,9 @@ const AOe = /* @__PURE__ */ Hr(fOe), pOe = Qe`
   tabsDefinition: e,
   activeTab: t,
   onTabSwitch: r,
-  mb: n
-}) => /* @__PURE__ */ p.jsx(EOe, { $mb: n, children: e.map((i, a) => /* @__PURE__ */ p.jsx(IOe, { value: a, tabDefinition: i, isActive: a === t, onTabSwitch: r }, a)) }), cMe = ({
+  mb: n,
+  mt: i
+}) => /* @__PURE__ */ p.jsx(EOe, { $mb: n, $mt: i, children: e.map((a, o) => /* @__PURE__ */ p.jsx(IOe, { value: o, tabDefinition: a, isActive: o === t, onTabSwitch: r }, o)) }), cMe = ({
   activeTab: e,
   value: t,
   children: r

package/ui/index.umd.js

@@ -4013,7 +4013,7 @@ ${Z.current.stack}
   align-items: center;
   justify-content: center;
   cursor: ${({disabled:e})=>e?"auto":"pointer"};
-  padding: 0 8px 12px;
+  padding: 0 8px 8px;
   transition: 200ms;
   color: ${j.color("gray")};
   font-weight: bold;
@@ -4048,6 +4048,7 @@ ${Z.current.stack}
   width: fit-content;
   position: relative;
   margin-bottom: ${({$mb:e=0})=>e};
+  margin-top: ${({$mt:e=0})=>e};
   align-items: stretch;
 
   &:after {
@@ -4059,7 +4060,7 @@ ${Z.current.stack}
     background-color: ${j.color("bgLightGray1")};
     height: 2px;
   }
-`,Awe=({tabDefinition:e,value:t,isActive:r,onTabSwitch:n})=>{const{icon:i,label:a,badgeCount:o,disabled:s}=e,c=x.useCallback(()=>{n(t)},[n,t]);return p.jsx(cwe,{children:p.jsxs(dwe,{onClick:s?void 0:c,active:r,disabled:s,children:[i&&p.jsx(lwe,{children:p.jsx(rt,{icon:i})}),p.jsx(jp,{children:a}),o===0||o&&o>0&&p.jsx(uwe,{children:p.jsx(jp,{variant:"medium",children:o})})]})})},pwe=({tabsDefinition:e,activeTab:t,onTabSwitch:r,mb:n})=>p.jsx(fwe,{$mb:n,children:e.map((i,a)=>p.jsx(Awe,{value:a,tabDefinition:i,isActive:a===t,onTabSwitch:r},a))}),hwe=({activeTab:e,value:t,children:r})=>e===t?r:null,gwe=e=>{const t=e.map(o=>o.default).indexOf(!0),r=t===-1?0:t,[n,i]=x.useState(r),a=x.useCallback(o=>{i(o)},[]);return{activeTab:n,onTabSwitch:a}},vwe=Bt(Be.div)`
+`,Awe=({tabDefinition:e,value:t,isActive:r,onTabSwitch:n})=>{const{icon:i,label:a,badgeCount:o,disabled:s}=e,c=x.useCallback(()=>{n(t)},[n,t]);return p.jsx(cwe,{children:p.jsxs(dwe,{onClick:s?void 0:c,active:r,disabled:s,children:[i&&p.jsx(lwe,{children:p.jsx(rt,{icon:i})}),p.jsx(jp,{children:a}),o===0||o&&o>0&&p.jsx(uwe,{children:p.jsx(jp,{variant:"medium",children:o})})]})})},pwe=({tabsDefinition:e,activeTab:t,onTabSwitch:r,mb:n,mt:i})=>p.jsx(fwe,{$mb:n,$mt:i,children:e.map((a,o)=>p.jsx(Awe,{value:o,tabDefinition:a,isActive:o===t,onTabSwitch:r},o))}),hwe=({activeTab:e,value:t,children:r})=>e===t?r:null,gwe=e=>{const t=e.map(o=>o.default).indexOf(!0),r=t===-1?0:t,[n,i]=x.useState(r),a=x.useCallback(o=>{i(o)},[]);return{activeTab:n,onTabSwitch:a}},vwe=Bt(Be.div)`
   width: calc(100vw - 20px);
   display: flex;
   min-height: 48px;