@mailstep/design-system 0.7.18 → 0.7.20-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/package.json +1 -1
  2. package/ui/Blocks/CommonGrid/components/Table.js +1 -1
  3. package/ui/Blocks/CommonGrid/styles.js +1 -1
  4. package/ui/Blocks/Tabs/Tabs.js +1 -1
  5. package/ui/index.es.js +3 -2
  6. package/ui/index.umd.js +3 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mailstep/design-system",
3
- "version": "0.7.18",
3
+ "version": "0.7.20-beta.0",
4
4
  "license": "ISC",
5
5
  "type": "module",
6
6
  "main": "./ui/index.js",
package/ui/Blocks/CommonGrid/components/Table.js CHANGED
@@ -3,7 +3,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
3
3
  return cooked;
4
4
  };
5
5
  import styled, { system, th } from '@xstyled/styled-components';
6
- export var Row = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", ";\n display: flex;\n min-height: 32px;\n border-bottom: 1px solid rgb(228, 231, 235);\n cursor: ", ";\n"], ["\n ", ";\n display: flex;\n min-height: 32px;\n border-bottom: 1px solid rgb(228, 231, 235);\n cursor: ", ";\n"])), system, function (props) { return (props.hasRowClick ? 'pointer' : 'cursor'); });
6
+ export var Row = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", ";\n display: flex;\n min-height: 32px;\n border-bottom: 1px solid rgb(228, 231, 235);\n cursor: ", ";\n"], ["\n ", ";\n display: flex;\n min-height: 32px;\n border-bottom: 1px solid rgb(228, 231, 235);\n cursor: ", ";\n"])), system, function (props) { return (props.hasRowClick ? 'pointer' : 'auto'); });
7
7
  export var Cell = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", ";\n display: flex;\n overflow: hidden;\n align-items: center;\n justify-content: ", ";\n"], ["\n ", ";\n display: flex;\n overflow: hidden;\n align-items: center;\n justify-content: ", ";\n"])), system, function (props) { return props.align; });
8
8
  export var StyledDataRow = styled(Row)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (props) { return (props.isEven ? th('colors.bgLightGray') : 'white'); });
9
9
  export var TextCell = styled(Cell)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n text-overflow: ellipsis;\n white-space: nowrap;\n"], ["\n text-overflow: ellipsis;\n white-space: nowrap;\n"])));
package/ui/Blocks/CommonGrid/styles.js CHANGED
@@ -10,7 +10,7 @@ export var BottomWrapper = styled(x.div)(templateObject_1 || (templateObject_1 =
10
10
  export var ContentContainer = styled(x.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n background-color: white;\n box-shadow: gridShadow;\n border-radius: 8px;\n flex-grow: 1;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n background-color: white;\n box-shadow: gridShadow;\n border-radius: 8px;\n flex-grow: 1;\n height: 100%;\n"])));
11
11
  export var CommonGridWrap = styled(x.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: calc(100% - ", "px);\n\n @media (min-width: 1024px) {\n height: calc(100% - ", "px);\n }\n"], ["\n height: calc(100% - ", "px);\n\n @media (min-width: 1024px) {\n height: calc(100% - ", "px);\n }\n"])), gridFooterHeight, gridFooterHeight);
12
12
  export var StyledButtonStrip = styled(x.div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: relative;\n padding: 18px 20px;\n display: flex;\n justify-content: space-between;\n width: 100%;\n min-height: ", "px;\n flex-wrap: wrap;\n z-index: 3;\n"], ["\n position: relative;\n padding: 18px 20px;\n display: flex;\n justify-content: space-between;\n width: 100%;\n min-height: ", "px;\n flex-wrap: wrap;\n z-index: 3;\n"])), gridButtonStripHeight);
13
- export var CommonGridWithStyles = styled(CommonGrid)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n height: calc(100% - ", "px);\n\n & .cell {\n padding: 0 4px;\n }\n & .dataRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: normal;\n border-bottom: 1px solid;\n border-color: lightGray3;\n height: ", "px;\n }\n & .gridHead {\n height: ", "px;\n background-color: neutral20;\n padding-bottom: 8px;\n position: sticky;\n top: -1px;\n z-index: 2;\n padding-left: 12px;\n border-top: 1px solid ", ";\n @media (min-width: 1024px) {\n padding-left: 20px;\n }\n }\n & .headRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: bold;\n border-bottom: none; // TODO fix in common-grid\n\n & .cell {\n overflow: hidden;\n position: relative;\n }\n\n & .sticky {\n background-color: bgLightGray1;\n }\n }\n\n & .filterRow {\n & .cell {\n overflow: visible;\n }\n\n & .cell > div {\n width: 100%; // TODO fix in common-grid\n }\n\n & .sticky {\n background-color: bgLightGray1;\n }\n border-bottom: none; // TODO fix in common-grid\n }\n\n & .body {\n margin: 0 1px 1px 1px; // matching margin with .gridHead\n padding-left: 12px;\n flex-grow: 1;\n @media (min-width: 1024px) {\n padding-left: 20px;\n }\n }\n\n & .gridWrapper {\n background-color: ", ";\n width: fit-content;\n padding-bottom: 35px;\n\n @media (min-width: 1024px) {\n height: 100%;\n overflow-y: auto;\n width: auto;\n padding-bottom: 0;\n }\n @media print {\n margin: 0;\n width: 100%;\n height: auto;\n overflow-x: hidden;\n }\n }\n\n & .fullWidthGrid > .gridWrapper > div {\n width: 100% !important;\n }\n\n & .paginatorWrapper,\n & .buttonsStrip {\n @media print {\n display: none;\n }\n }\n & .cell {\n padding-left: 2px;\n padding-right: 2px;\n @media print {\n white-space: unset;\n }\n }\n\n .dataRow {\n &.grayedOut {\n background: lightGray1;\n }\n\n .sticky-right, .sticky-left {\n background: white;\n z-index: 1;\n }\n\n .sticky-right {\n border-left: 1px solid #dfe1e6;\n \n }\n\n .sticky-left {\n border-right: 1px solid #dfe1e6;\n }\n }\n\n .dataRow:nth-child(even) {\n .sticky-left, .sticky-right {\n background-color: bgLightGray;\n }\n }\n\n @media print {\n .filterRow .sticky {\n display: none;\n }\n\n .headRow .sticky {\n display: none;\n }\n\n .dataRow .sticky {\n display: none;\n }\n }\n\n .resizer {\n z-index: unset;\n }\n\n // hotfix table head\n .cell .sortable {\n display: flex;\n align-items: center;\n padding-right: 2px;\n }\n\n .sticky {\n position: sticky !important;\n max-width: 88px;\n }\n\n .sticky-left {\n left: 0;\n }\n\n .sticky-right {\n right: 0;\n }\n"], ["\n height: calc(100% - ", "px);\n\n & .cell {\n padding: 0 4px;\n }\n & .dataRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: normal;\n border-bottom: 1px solid;\n border-color: lightGray3;\n height: ", "px;\n }\n & .gridHead {\n height: ", "px;\n background-color: neutral20;\n padding-bottom: 8px;\n position: sticky;\n top: -1px;\n z-index: 2;\n padding-left: 12px;\n border-top: 1px solid ", ";\n @media (min-width: 1024px) {\n padding-left: 20px;\n }\n }\n & .headRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: bold;\n border-bottom: none; // TODO fix in common-grid\n\n & .cell {\n overflow: hidden;\n position: relative;\n }\n\n & .sticky {\n background-color: bgLightGray1;\n }\n }\n\n & .filterRow {\n & .cell {\n overflow: visible;\n }\n\n & .cell > div {\n width: 100%; // TODO fix in common-grid\n }\n\n & .sticky {\n background-color: bgLightGray1;\n }\n border-bottom: none; // TODO fix in common-grid\n }\n\n & .body {\n margin: 0 1px 1px 1px; // matching margin with .gridHead\n padding-left: 12px;\n flex-grow: 1;\n @media (min-width: 1024px) {\n padding-left: 20px;\n }\n }\n\n & .gridWrapper {\n background-color: ", ";\n width: fit-content;\n padding-bottom: 35px;\n\n @media (min-width: 1024px) {\n height: 100%;\n overflow-y: auto;\n width: auto;\n padding-bottom: 0;\n }\n @media print {\n margin: 0;\n width: 100%;\n height: auto;\n overflow-x: hidden;\n }\n }\n\n & .fullWidthGrid > .gridWrapper > div {\n width: 100% !important;\n }\n\n & .paginatorWrapper,\n & .buttonsStrip {\n @media print {\n display: none;\n }\n }\n & .cell {\n padding-left: 2px;\n padding-right: 2px;\n @media print {\n white-space: unset;\n }\n }\n\n .dataRow {\n &.grayedOut {\n background: lightGray1;\n }\n\n .sticky-right, .sticky-left {\n background: white;\n z-index: 1;\n }\n\n .sticky-right {\n border-left: 1px solid #dfe1e6;\n \n }\n\n .sticky-left {\n border-right: 1px solid #dfe1e6;\n }\n }\n\n .dataRow:nth-child(even) {\n .sticky-left, .sticky-right {\n background-color: bgLightGray;\n }\n }\n\n @media print {\n .filterRow .sticky {\n display: none;\n }\n\n .headRow .sticky {\n display: none;\n }\n\n .dataRow .sticky {\n display: none;\n }\n }\n\n .resizer {\n z-index: unset;\n }\n\n // hotfix table head\n .cell .sortable {\n display: flex;\n align-items: center;\n padding-right: 2px;\n }\n\n .sticky {\n position: sticky !important;\n max-width: 88px;\n }\n\n .sticky-left {\n left: 0;\n }\n\n .sticky-right {\n right: 0;\n }\n"])), gridButtonStripHeight, th('fonts.primary'), gridRowHeight, gridHeadHeight, th('colors.lightGray6'), th('fonts.primary'), function (_a) {
13
+ export var CommonGridWithStyles = styled(CommonGrid)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n height: calc(100% - ", "px);\n\n & .cell {\n padding: 0 4px;\n }\n & .dataRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: normal;\n border-bottom: 1px solid;\n border-color: lightGray3;\n height: ", "px;\n }\n & .gridHead {\n height: ", "px;\n background-color: neutral20;\n padding-bottom: 8px;\n position: sticky;\n top: -1px;\n z-index: 2;\n padding-left: 12px;\n border-top: 1px solid ", ";\n @media (min-width: 1024px) {\n padding-left: 20px;\n }\n }\n & .headRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: bold;\n border-bottom: none; // TODO fix in common-grid\n\n & .cell {\n overflow: hidden;\n max-height: 32px;\n position: relative;\n }\n\n & .sticky {\n background-color: bgLightGray1;\n }\n }\n\n & .filterRow {\n & .cell {\n overflow: visible;\n }\n\n & .cell > div {\n width: 100%; // TODO fix in common-grid\n }\n\n & .sticky {\n background-color: bgLightGray1;\n }\n border-bottom: none; // TODO fix in common-grid\n }\n\n & .body {\n margin: 0 1px 1px 1px; // matching margin with .gridHead\n padding-left: 12px;\n flex-grow: 1;\n @media (min-width: 1024px) {\n padding-left: 20px;\n }\n }\n\n & .gridWrapper {\n background-color: ", ";\n width: fit-content;\n padding-bottom: 35px;\n\n @media (min-width: 1024px) {\n height: 100%;\n overflow-y: auto;\n width: auto;\n padding-bottom: 0;\n }\n @media print {\n margin: 0;\n width: 100%;\n height: auto;\n overflow-x: hidden;\n }\n }\n\n & .fullWidthGrid > .gridWrapper > div {\n width: 100% !important;\n }\n\n & .paginatorWrapper,\n & .buttonsStrip {\n @media print {\n display: none;\n }\n }\n & .cell {\n padding-left: 2px;\n padding-right: 2px;\n @media print {\n white-space: unset;\n }\n }\n\n .dataRow {\n &.grayedOut {\n background: lightGray1;\n }\n\n .sticky-right, .sticky-left {\n background: white;\n z-index: 1;\n }\n\n .sticky-right {\n border-left: 1px solid #dfe1e6;\n \n }\n\n .sticky-left {\n border-right: 1px solid #dfe1e6;\n }\n }\n\n .dataRow:nth-child(even) {\n .sticky-left, .sticky-right {\n background-color: bgLightGray;\n }\n }\n\n @media print {\n .filterRow .sticky {\n display: none;\n }\n\n .headRow .sticky {\n display: none;\n }\n\n .dataRow .sticky {\n display: none;\n }\n }\n\n .resizer {\n z-index: unset;\n }\n\n // hotfix table head\n .cell .sortable {\n display: flex;\n align-items: center;\n padding-right: 2px;\n }\n\n .sticky {\n position: sticky !important;\n max-width: 88px;\n }\n\n .sticky-left {\n left: 0;\n }\n\n .sticky-right {\n right: 0;\n }\n"], ["\n height: calc(100% - ", "px);\n\n & .cell {\n padding: 0 4px;\n }\n & .dataRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: normal;\n border-bottom: 1px solid;\n border-color: lightGray3;\n height: ", "px;\n }\n & .gridHead {\n height: ", "px;\n background-color: neutral20;\n padding-bottom: 8px;\n position: sticky;\n top: -1px;\n z-index: 2;\n padding-left: 12px;\n border-top: 1px solid ", ";\n @media (min-width: 1024px) {\n padding-left: 20px;\n }\n }\n & .headRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: bold;\n border-bottom: none; // TODO fix in common-grid\n\n & .cell {\n overflow: hidden;\n max-height: 32px;\n position: relative;\n }\n\n & .sticky {\n background-color: bgLightGray1;\n }\n }\n\n & .filterRow {\n & .cell {\n overflow: visible;\n }\n\n & .cell > div {\n width: 100%; // TODO fix in common-grid\n }\n\n & .sticky {\n background-color: bgLightGray1;\n }\n border-bottom: none; // TODO fix in common-grid\n }\n\n & .body {\n margin: 0 1px 1px 1px; // matching margin with .gridHead\n padding-left: 12px;\n flex-grow: 1;\n @media (min-width: 1024px) {\n padding-left: 20px;\n }\n }\n\n & .gridWrapper {\n background-color: ", ";\n width: fit-content;\n padding-bottom: 35px;\n\n @media (min-width: 1024px) {\n height: 100%;\n overflow-y: auto;\n width: auto;\n padding-bottom: 0;\n }\n @media print {\n margin: 0;\n width: 100%;\n height: auto;\n overflow-x: hidden;\n }\n }\n\n & .fullWidthGrid > .gridWrapper > div {\n width: 100% !important;\n }\n\n & .paginatorWrapper,\n & .buttonsStrip {\n @media print {\n display: none;\n }\n }\n & .cell {\n padding-left: 2px;\n padding-right: 2px;\n @media print {\n white-space: unset;\n }\n }\n\n .dataRow {\n &.grayedOut {\n background: lightGray1;\n }\n\n .sticky-right, .sticky-left {\n background: white;\n z-index: 1;\n }\n\n .sticky-right {\n border-left: 1px solid #dfe1e6;\n \n }\n\n .sticky-left {\n border-right: 1px solid #dfe1e6;\n }\n }\n\n .dataRow:nth-child(even) {\n .sticky-left, .sticky-right {\n background-color: bgLightGray;\n }\n }\n\n @media print {\n .filterRow .sticky {\n display: none;\n }\n\n .headRow .sticky {\n display: none;\n }\n\n .dataRow .sticky {\n display: none;\n }\n }\n\n .resizer {\n z-index: unset;\n }\n\n // hotfix table head\n .cell .sortable {\n display: flex;\n align-items: center;\n padding-right: 2px;\n }\n\n .sticky {\n position: sticky !important;\n max-width: 88px;\n }\n\n .sticky-left {\n left: 0;\n }\n\n .sticky-right {\n right: 0;\n }\n"])), gridButtonStripHeight, th('fonts.primary'), gridRowHeight, gridHeadHeight, th('colors.lightGray6'), th('fonts.primary'), function (_a) {
14
14
  var theme = _a.theme;
15
15
  return theme.colors.white;
16
16
  });
package/ui/Blocks/Tabs/Tabs.js CHANGED
@@ -9,7 +9,7 @@ var Tab = function (_a) {
9
9
  var handleOnClick = useCallback(function () {
10
10
  onTabSwitch(value);
11
11
  }, [onTabSwitch, value]);
12
- 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 }), isActive && badgeCount && badgeCount > 0 && (_jsx(RoundedWrap, { children: _jsx(Text, { variant: "medium", children: badgeCount }) }))] }) }));
12
+ 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 }) }))] }) }));
13
13
  };
14
14
  export var Tabs = function (_a) {
15
15
  var tabsDefinition = _a.tabsDefinition, activeTab = _a.activeTab, onTabSwitch = _a.onTabSwitch, mb = _a.mb;
package/ui/index.es.js CHANGED
@@ -41749,7 +41749,7 @@ const WCe = (e, t) => Object.entries(e).map(([r, n]) => `${n} ${r}`).join(", "),
41749
41749
  display: flex;
41750
41750
  min-height: 32px;
41751
41751
  border-bottom: 1px solid rgb(228, 231, 235);
41752
- cursor: ${(e) => e.hasRowClick ? "pointer" : "cursor"};
41752
+ cursor: ${(e) => e.hasRowClick ? "pointer" : "auto"};
41753
41753
  `, Xr = G.div`
41754
41754
  ${xa};
41755
41755
  display: flex;
@@ -43194,6 +43194,7 @@ const QTe = (e = {}, t) => Cxe(e, (r) => {
43194
43194
 
43195
43195
  & .cell {
43196
43196
  overflow: hidden;
43197
+ max-height: 32px;
43197
43198
  position: relative;
43198
43199
  }
43199
43200
 
@@ -48741,7 +48742,7 @@ const AOe = /* @__PURE__ */ Hr(fOe), pOe = Qe`
48741
48742
  return /* @__PURE__ */ p.jsx(wOe, { children: /* @__PURE__ */ p.jsxs(SOe, { onClick: s ? void 0 : c, active: r, disabled: s, children: [
48742
48743
  i && /* @__PURE__ */ p.jsx(COe, { children: /* @__PURE__ */ p.jsx(ct, { icon: i }) }),
48743
48744
  /* @__PURE__ */ p.jsx(Bh, { children: a }),
48744
- r && o && o > 0 && /* @__PURE__ */ p.jsx(xOe, { children: /* @__PURE__ */ p.jsx(Bh, { variant: "medium", children: o }) })
48745
+ o === 0 || o && o > 0 && /* @__PURE__ */ p.jsx(xOe, { children: /* @__PURE__ */ p.jsx(Bh, { variant: "medium", children: o }) })
48745
48746
  ] }) });
48746
48747
  }, sMe = ({
48747
48748
  tabsDefinition: e,
package/ui/index.umd.js CHANGED
@@ -2869,7 +2869,7 @@ function print() { __p += __j.call(arguments, '') }
2869
2869
  display: flex;
2870
2870
  min-height: 32px;
2871
2871
  border-bottom: 1px solid rgb(228, 231, 235);
2872
- cursor: ${e=>e.hasRowClick?"pointer":"cursor"};
2872
+ cursor: ${e=>e.hasRowClick?"pointer":"auto"};
2873
2873
  `,Ur=G.div`
2874
2874
  ${Ji};
2875
2875
  display: flex;
@@ -3056,6 +3056,7 @@ Avoid returning a new reference inside your input selector, e.g.
3056
3056
 
3057
3057
  & .cell {
3058
3058
  overflow: hidden;
3059
+ max-height: 32px;
3059
3060
  position: relative;
3060
3061
  }
3061
3062
 
@@ -4059,7 +4060,7 @@ ${Z.current.stack}
4059
4060
  background-color: ${R.color("bgLightGray1")};
4060
4061
  height: 2px;
4061
4062
  }
4062
- `,fwe=({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(lwe,{children:p.jsxs(uwe,{onClick:s?void 0:c,active:r,disabled:s,children:[i&&p.jsx(swe,{children:p.jsx(rt,{icon:i})}),p.jsx(Rp,{children:a}),r&&o&&o>0&&p.jsx(cwe,{children:p.jsx(Rp,{variant:"medium",children:o})})]})})},Awe=({tabsDefinition:e,activeTab:t,onTabSwitch:r,mb:n})=>p.jsx(dwe,{$mb:n,children:e.map((i,a)=>p.jsx(fwe,{value:a,tabDefinition:i,isActive:a===t,onTabSwitch:r},a))}),pwe=({activeTab:e,value:t,children:r})=>e===t?r:null,hwe=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}},gwe=Bt(Be.div)`
4063
+ `,fwe=({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(lwe,{children:p.jsxs(uwe,{onClick:s?void 0:c,active:r,disabled:s,children:[i&&p.jsx(swe,{children:p.jsx(rt,{icon:i})}),p.jsx(Rp,{children:a}),o===0||o&&o>0&&p.jsx(cwe,{children:p.jsx(Rp,{variant:"medium",children:o})})]})})},Awe=({tabsDefinition:e,activeTab:t,onTabSwitch:r,mb:n})=>p.jsx(dwe,{$mb:n,children:e.map((i,a)=>p.jsx(fwe,{value:a,tabDefinition:i,isActive:a===t,onTabSwitch:r},a))}),pwe=({activeTab:e,value:t,children:r})=>e===t?r:null,hwe=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}},gwe=Bt(Be.div)`
4063
4064
  width: calc(100vw - 20px);
4064
4065
  display: flex;
4065
4066
  min-height: 48px;