@mailstep/design-system 0.1.13 → 0.1.14-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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mailstep/design-system",
3
- "version": "0.1.13",
3
+ "version": "0.1.14-beta.0",
4
4
  "license": "ISC",
5
5
  "type": "module",
6
6
  "main": "./ui/index.js",
@@ -0,0 +1,9 @@
1
+ 'use strict';
2
+
3
+ var TabContent = function (_a) {
4
+ var activeTab = _a.activeTab, value = _a.value, children = _a.children;
5
+ return activeTab === value ? children : null;
6
+ };
7
+
8
+ exports.TabContent = TabContent;
9
+ //# sourceMappingURL=TabContent.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TabContent.js","sources":["../../../../packages/ui/Blocks/Tabs/TabContent.tsx"],"sourcesContent":["export var TabContent = function (_a) {\n var activeTab = _a.activeTab, value = _a.value, children = _a.children;\n return activeTab === value ? children : null;\n};\n//# sourceMappingURL=TabContent.js.map"],"names":[],"mappings":";;AAAU,IAAC,UAAU,GAAG,UAAU,EAAE,EAAE;AACtC,IAAI,IAAI,SAAS,GAAG,EAAE,CAAC,SAAS,EAAE,KAAK,GAAG,EAAE,CAAC,KAAK,EAAE,QAAQ,GAAG,EAAE,CAAC,QAAQ,CAAC;AAC3E,IAAI,OAAO,SAAS,KAAK,KAAK,GAAG,QAAQ,GAAG,IAAI,CAAC;AACjD;;;;"}
@@ -16,8 +16,8 @@ var Tab = function (_a) {
16
16
  return (jsxRuntime.jsx(styles.StyledTabWrapper, { children: jsxRuntime.jsxs(styles.Tab, { onClick: handleOnClick, active: isActive, children: [icon && (jsxRuntime.jsx(styles.StyledImageBox, { children: jsxRuntime.jsx(Icon.default, { icon: icon }) })), jsxRuntime.jsx(Text.default, { children: label }), isActive && badgeCount && badgeCount > 0 && (jsxRuntime.jsx(styles.RoundedWrap, { children: jsxRuntime.jsx(Text.default, { variant: "medium", children: badgeCount }) }))] }) }));
17
17
  };
18
18
  var Tabs = function (_a) {
19
- var tabsDefinition = _a.tabsDefinition, activeTab = _a.activeTab, onTabSwitch = _a.onTabSwitch;
20
- return (jsxRuntime.jsx(styles.TabPanel, { children: tabsDefinition.map(function (item, index) {
19
+ var tabsDefinition = _a.tabsDefinition, activeTab = _a.activeTab, onTabSwitch = _a.onTabSwitch, mb = _a.mb;
20
+ return (jsxRuntime.jsx(styles.TabPanel, { "$mb": mb, children: tabsDefinition.map(function (item, index) {
21
21
  return jsxRuntime.jsx(Tab, { value: index, tabDefinition: item, isActive: index === activeTab, onTabSwitch: onTabSwitch }, index);
22
22
  }) }));
23
23
  };
@@ -1 +1 @@
1
- {"version":3,"file":"Tabs.js","sources":["../../../../packages/ui/Blocks/Tabs/Tabs.tsx"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { useCallback } from 'react';\nimport { RoundedWrap, StyledImageBox, Tab as StyledTab, StyledTabWrapper, TabPanel } from './styles';\nimport { Text } from '../../Elements/Text';\nimport { Icon } from '../../Elements/Icon';\nvar Tab = function (_a) {\n var tabDefinition = _a.tabDefinition, value = _a.value, isActive = _a.isActive, onTabSwitch = _a.onTabSwitch;\n var icon = tabDefinition.icon, label = tabDefinition.label, badgeCount = tabDefinition.badgeCount;\n var handleOnClick = useCallback(function () {\n onTabSwitch(value);\n }, [onTabSwitch, value]);\n return (_jsx(StyledTabWrapper, { children: _jsxs(StyledTab, { onClick: handleOnClick, active: isActive, 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 }) }))] }) }));\n};\nexport var Tabs = function (_a) {\n var tabsDefinition = _a.tabsDefinition, activeTab = _a.activeTab, onTabSwitch = _a.onTabSwitch;\n return (_jsx(TabPanel, { children: tabsDefinition.map(function (item, index) {\n return _jsx(Tab, { value: index, tabDefinition: item, isActive: index === activeTab, onTabSwitch: onTabSwitch }, index);\n }) }));\n};\n//# sourceMappingURL=Tabs.js.map"],"names":["useCallback","_jsx","StyledTabWrapper","_jsxs","StyledTab","StyledImageBox","Icon","Text","RoundedWrap","TabPanel"],"mappings":";;;;;;;;;AAKA,IAAI,GAAG,GAAG,UAAU,EAAE,EAAE;AACxB,IAAI,IAAI,aAAa,GAAG,EAAE,CAAC,aAAa,EAAE,KAAK,GAAG,EAAE,CAAC,KAAK,EAAE,QAAQ,GAAG,EAAE,CAAC,QAAQ,EAAE,WAAW,GAAG,EAAE,CAAC,WAAW,CAAC;AACjH,IAAI,IAAI,IAAI,GAAG,aAAa,CAAC,IAAI,EAAE,KAAK,GAAG,aAAa,CAAC,KAAK,EAAE,UAAU,GAAG,aAAa,CAAC,UAAU,CAAC;AACtG,IAAI,IAAI,aAAa,GAAGA,iBAAW,CAAC,YAAY;AAChD,QAAQ,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3B,KAAK,EAAE,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC;AAC7B,IAAI,QAAQC,cAAI,CAACC,uBAAgB,EAAE,EAAE,QAAQ,EAAEC,eAAK,CAACC,UAAS,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,IAAI,KAAKH,cAAI,CAACI,qBAAc,EAAE,EAAE,QAAQ,EAAEJ,cAAI,CAACK,YAAI,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,EAAEL,cAAI,CAACM,YAAI,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,EAAE,QAAQ,IAAI,UAAU,IAAI,UAAU,GAAG,CAAC,KAAKN,cAAI,CAACO,kBAAW,EAAE,EAAE,QAAQ,EAAEP,cAAI,CAACM,YAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACjX,CAAC,CAAC;AACQ,IAAC,IAAI,GAAG,UAAU,EAAE,EAAE;AAChC,IAAI,IAAI,cAAc,GAAG,EAAE,CAAC,cAAc,EAAE,SAAS,GAAG,EAAE,CAAC,SAAS,EAAE,WAAW,GAAG,EAAE,CAAC,WAAW,CAAC;AACnG,IAAI,QAAQN,cAAI,CAACQ,eAAQ,EAAE,EAAE,QAAQ,EAAE,cAAc,CAAC,GAAG,CAAC,UAAU,IAAI,EAAE,KAAK,EAAE;AACjF,YAAY,OAAOR,cAAI,CAAC,GAAG,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,KAAK,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,EAAE,KAAK,CAAC,CAAC;AACpI,SAAS,CAAC,EAAE,CAAC,EAAE;AACf;;;;"}
1
+ {"version":3,"file":"Tabs.js","sources":["../../../../packages/ui/Blocks/Tabs/Tabs.tsx"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { useCallback } from 'react';\nimport { RoundedWrap, StyledImageBox, Tab as StyledTab, StyledTabWrapper, TabPanel } from './styles';\nimport { Text } from '../../Elements/Text';\nimport { Icon } from '../../Elements/Icon';\nvar Tab = function (_a) {\n var tabDefinition = _a.tabDefinition, value = _a.value, isActive = _a.isActive, onTabSwitch = _a.onTabSwitch;\n var icon = tabDefinition.icon, label = tabDefinition.label, badgeCount = tabDefinition.badgeCount;\n var handleOnClick = useCallback(function () {\n onTabSwitch(value);\n }, [onTabSwitch, value]);\n return (_jsx(StyledTabWrapper, { children: _jsxs(StyledTab, { onClick: handleOnClick, active: isActive, 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 }) }))] }) }));\n};\nexport var Tabs = function (_a) {\n var tabsDefinition = _a.tabsDefinition, activeTab = _a.activeTab, onTabSwitch = _a.onTabSwitch, mb = _a.mb;\n return (_jsx(TabPanel, { \"$mb\": mb, children: tabsDefinition.map(function (item, index) {\n return _jsx(Tab, { value: index, tabDefinition: item, isActive: index === activeTab, onTabSwitch: onTabSwitch }, index);\n }) }));\n};\n//# sourceMappingURL=Tabs.js.map"],"names":["useCallback","_jsx","StyledTabWrapper","_jsxs","StyledTab","StyledImageBox","Icon","Text","RoundedWrap","TabPanel"],"mappings":";;;;;;;;;AAKA,IAAI,GAAG,GAAG,UAAU,EAAE,EAAE;AACxB,IAAI,IAAI,aAAa,GAAG,EAAE,CAAC,aAAa,EAAE,KAAK,GAAG,EAAE,CAAC,KAAK,EAAE,QAAQ,GAAG,EAAE,CAAC,QAAQ,EAAE,WAAW,GAAG,EAAE,CAAC,WAAW,CAAC;AACjH,IAAI,IAAI,IAAI,GAAG,aAAa,CAAC,IAAI,EAAE,KAAK,GAAG,aAAa,CAAC,KAAK,EAAE,UAAU,GAAG,aAAa,CAAC,UAAU,CAAC;AACtG,IAAI,IAAI,aAAa,GAAGA,iBAAW,CAAC,YAAY;AAChD,QAAQ,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3B,KAAK,EAAE,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC;AAC7B,IAAI,QAAQC,cAAI,CAACC,uBAAgB,EAAE,EAAE,QAAQ,EAAEC,eAAK,CAACC,UAAS,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,IAAI,KAAKH,cAAI,CAACI,qBAAc,EAAE,EAAE,QAAQ,EAAEJ,cAAI,CAACK,YAAI,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,EAAEL,cAAI,CAACM,YAAI,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,EAAE,QAAQ,IAAI,UAAU,IAAI,UAAU,GAAG,CAAC,KAAKN,cAAI,CAACO,kBAAW,EAAE,EAAE,QAAQ,EAAEP,cAAI,CAACM,YAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACjX,CAAC,CAAC;AACQ,IAAC,IAAI,GAAG,UAAU,EAAE,EAAE;AAChC,IAAI,IAAI,cAAc,GAAG,EAAE,CAAC,cAAc,EAAE,SAAS,GAAG,EAAE,CAAC,SAAS,EAAE,WAAW,GAAG,EAAE,CAAC,WAAW,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC;AAC/G,IAAI,QAAQN,cAAI,CAACQ,eAAQ,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,cAAc,CAAC,GAAG,CAAC,UAAU,IAAI,EAAE,KAAK,EAAE;AAC5F,YAAY,OAAOR,cAAI,CAAC,GAAG,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,KAAK,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,EAAE,KAAK,CAAC,CAAC;AACpI,SAAS,CAAC,EAAE,CAAC,EAAE;AACf;;;;"}
@@ -11,11 +11,14 @@ var StyledImageBox = styled__default.default(styled.x.div)(templateObject_1 || (
11
11
  var StyledTabWrapper = styled__default.default.div(templateObject_2 || (templateObject_2 = tslib.__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"])));
12
12
  var RoundedWrap = styled__default.default.div(templateObject_3 || (templateObject_3 = tslib.__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"])), styled.th.color('lightGray7'));
13
13
  var activeTab = styled.css(templateObject_4 || (templateObject_4 = tslib.__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"])), styled.th.color('red1'), styled.th.color('red1'), styled.th.color('typoPrimary'));
14
- var Tab = styled__default.default.div(templateObject_5 || (templateObject_5 = tslib.__makeTemplateObject(["\n display: inline-flex;\n align-items: 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 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"])), styled.th.color('gray'), styled.th.color('typoPrimary'), activeTab, function (_a) {
14
+ var Tab = styled__default.default.div(templateObject_5 || (templateObject_5 = tslib.__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"])), styled.th.color('gray'), styled.th.color('typoPrimary'), activeTab, function (_a) {
15
15
  var active = _a.active;
16
16
  return (active ? activeTab : '');
17
17
  });
18
- var TabPanel = styled__default.default.div(templateObject_6 || (templateObject_6 = tslib.__makeTemplateObject(["\n min-height: 3rem;\n display: flex;\n align-items: flex-end;\n overflow: auto;\n width: fit-content;\n position: relative;\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 min-height: 3rem;\n display: flex;\n align-items: flex-end;\n overflow: auto;\n width: fit-content;\n position: relative;\n &:after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n background-color: ", ";\n height: 2px;\n }\n"])), styled.th.color('bgLightGray1'));
18
+ var TabPanel = styled__default.default.div(templateObject_6 || (templateObject_6 = tslib.__makeTemplateObject(["\n min-height: 3rem;\n display: flex;\n align-items: flex-end;\n overflow: auto;\n width: fit-content;\n position: relative;\n margin-bottom: ", ";\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 min-height: 3rem;\n display: flex;\n align-items: flex-end;\n overflow: auto;\n width: fit-content;\n position: relative;\n margin-bottom: ", ";\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) {
19
+ var _b = _a.$mb, $mb = _b === void 0 ? 0 : _b;
20
+ return $mb;
21
+ }, styled.th.color('bgLightGray1'));
19
22
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
20
23
 
21
24
  exports.RoundedWrap = RoundedWrap;
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sources":["../../../../packages/ui/Blocks/Tabs/styles.ts"],"sourcesContent":["import { __makeTemplateObject } from \"tslib\";\nimport styled, { css, th, x } from '@xstyled/styled-components';\nexport var StyledImageBox = styled(x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject([\"\\n margin-right: 1em;\\n\"], [\"\\n margin-right: 1em;\\n\"])));\nexport 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\"])));\nexport 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'));\nvar 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'));\nexport var Tab = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject([\"\\n display: inline-flex;\\n align-items: 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 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'), activeTab, function (_a) {\n var active = _a.active;\n return (active ? activeTab : '');\n});\nexport var TabPanel = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject([\"\\n min-height: 3rem;\\n display: flex;\\n align-items: flex-end;\\n overflow: auto;\\n width: fit-content;\\n position: relative;\\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 min-height: 3rem;\\n display: flex;\\n align-items: flex-end;\\n overflow: auto;\\n width: fit-content;\\n position: relative;\\n &:after {\\n content: '';\\n position: absolute;\\n bottom: 0;\\n left: 0;\\n right: 0;\\n background-color: \", \";\\n height: 2px;\\n }\\n\"])), th.color('bgLightGray1'));\nvar templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;\n//# sourceMappingURL=styles.js.map"],"names":["styled","x","__makeTemplateObject","th","css"],"mappings":";;;;;;;;;AAEU,IAAC,cAAc,GAAGA,uBAAM,CAACC,QAAC,CAAC,GAAG,CAAC,CAAC,gBAAgB,KAAK,gBAAgB,GAAGC,0BAAoB,CAAC,CAAC,0BAA0B,CAAC,EAAE,CAAC,0BAA0B,CAAC,CAAC,CAAC,EAAE;AAC3J,IAAC,gBAAgB,GAAGF,uBAAM,CAAC,GAAG,CAAC,gBAAgB,KAAK,gBAAgB,GAAGE,0BAAoB,CAAC,CAAC,wEAAwE,CAAC,EAAE,CAAC,wEAAwE,CAAC,CAAC,CAAC,EAAE;AACtP,IAAC,WAAW,GAAGF,uBAAM,CAAC,GAAG,CAAC,gBAAgB,KAAK,gBAAgB,GAAGE,0BAAoB,CAAC,CAAC,0HAA0H,EAAE,wEAAwE,CAAC,EAAE,CAAC,0HAA0H,EAAE,wEAAwE,CAAC,CAAC,CAAC,EAAEC,SAAE,CAAC,KAAK,CAAC,YAAY,CAAC,EAAE;AAC3gB,IAAI,SAAS,GAAGC,UAAG,CAAC,gBAAgB,KAAK,gBAAgB,GAAGF,0BAAoB,CAAC,CAAC,aAAa,EAAE,uJAAuJ,EAAE,+GAA+G,EAAE,UAAU,CAAC,EAAE,CAAC,aAAa,EAAE,uJAAuJ,EAAE,+GAA+G,EAAE,UAAU,CAAC,CAAC,CAAC,EAAEC,SAAE,CAAC,KAAK,CAAC,MAAM,CAAC,EAAEA,SAAE,CAAC,KAAK,CAAC,MAAM,CAAC,EAAEA,SAAE,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC;AACptB,IAAC,GAAG,GAAGH,uBAAM,CAAC,GAAG,CAAC,gBAAgB,KAAK,gBAAgB,GAAGE,0BAAoB,CAAC,CAAC,4HAA4H,EAAE,4PAA4P,EAAE,6BAA6B,EAAE,aAAa,EAAE,IAAI,CAAC,EAAE,CAAC,4HAA4H,EAAE,4PAA4P,EAAE,6BAA6B,EAAE,aAAa,EAAE,IAAI,CAAC,CAAC,CAAC,EAAEC,SAAE,CAAC,KAAK,CAAC,MAAM,CAAC,EAAEA,SAAE,CAAC,KAAK,CAAC,aAAa,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE;AACngC,IAAI,IAAI,MAAM,GAAG,EAAE,CAAC,MAAM,CAAC;AAC3B,IAAI,QAAQ,MAAM,GAAG,SAAS,GAAG,EAAE,EAAE;AACrC,CAAC,EAAE;AACO,IAAC,QAAQ,GAAGH,uBAAM,CAAC,GAAG,CAAC,gBAAgB,KAAK,gBAAgB,GAAGE,0BAAoB,CAAC,CAAC,iQAAiQ,EAAE,4BAA4B,CAAC,EAAE,CAAC,iQAAiQ,EAAE,4BAA4B,CAAC,CAAC,CAAC,EAAEC,SAAE,CAAC,KAAK,CAAC,cAAc,CAAC,EAAE;AAChsB,IAAI,gBAAgB,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,gBAAgB;;;;;;;;"}
1
+ {"version":3,"file":"styles.js","sources":["../../../../packages/ui/Blocks/Tabs/styles.ts"],"sourcesContent":["import { __makeTemplateObject } from \"tslib\";\nimport styled, { css, th, x } from '@xstyled/styled-components';\nexport var StyledImageBox = styled(x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject([\"\\n margin-right: 1em;\\n\"], [\"\\n margin-right: 1em;\\n\"])));\nexport 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\"])));\nexport 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'));\nvar 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'));\nexport 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'), activeTab, function (_a) {\n var active = _a.active;\n return (active ? activeTab : '');\n});\nexport var TabPanel = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject([\"\\n min-height: 3rem;\\n display: flex;\\n align-items: flex-end;\\n overflow: auto;\\n width: fit-content;\\n position: relative;\\n margin-bottom: \", \";\\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 min-height: 3rem;\\n display: flex;\\n align-items: flex-end;\\n overflow: auto;\\n width: fit-content;\\n position: relative;\\n margin-bottom: \", \";\\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) {\n var _b = _a.$mb, $mb = _b === void 0 ? 0 : _b;\n return $mb;\n}, th.color('bgLightGray1'));\nvar templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;\n//# sourceMappingURL=styles.js.map"],"names":["styled","x","__makeTemplateObject","th","css"],"mappings":";;;;;;;;;AAEU,IAAC,cAAc,GAAGA,uBAAM,CAACC,QAAC,CAAC,GAAG,CAAC,CAAC,gBAAgB,KAAK,gBAAgB,GAAGC,0BAAoB,CAAC,CAAC,0BAA0B,CAAC,EAAE,CAAC,0BAA0B,CAAC,CAAC,CAAC,EAAE;AAC3J,IAAC,gBAAgB,GAAGF,uBAAM,CAAC,GAAG,CAAC,gBAAgB,KAAK,gBAAgB,GAAGE,0BAAoB,CAAC,CAAC,wEAAwE,CAAC,EAAE,CAAC,wEAAwE,CAAC,CAAC,CAAC,EAAE;AACtP,IAAC,WAAW,GAAGF,uBAAM,CAAC,GAAG,CAAC,gBAAgB,KAAK,gBAAgB,GAAGE,0BAAoB,CAAC,CAAC,0HAA0H,EAAE,wEAAwE,CAAC,EAAE,CAAC,0HAA0H,EAAE,wEAAwE,CAAC,CAAC,CAAC,EAAEC,SAAE,CAAC,KAAK,CAAC,YAAY,CAAC,EAAE;AAC3gB,IAAI,SAAS,GAAGC,UAAG,CAAC,gBAAgB,KAAK,gBAAgB,GAAGF,0BAAoB,CAAC,CAAC,aAAa,EAAE,uJAAuJ,EAAE,+GAA+G,EAAE,UAAU,CAAC,EAAE,CAAC,aAAa,EAAE,uJAAuJ,EAAE,+GAA+G,EAAE,UAAU,CAAC,CAAC,CAAC,EAAEC,SAAE,CAAC,KAAK,CAAC,MAAM,CAAC,EAAEA,SAAE,CAAC,KAAK,CAAC,MAAM,CAAC,EAAEA,SAAE,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC;AACptB,IAAC,GAAG,GAAGH,uBAAM,CAAC,GAAG,CAAC,gBAAgB,KAAK,gBAAgB,GAAGE,0BAAoB,CAAC,CAAC,wJAAwJ,EAAE,4PAA4P,EAAE,6BAA6B,EAAE,aAAa,EAAE,IAAI,CAAC,EAAE,CAAC,wJAAwJ,EAAE,4PAA4P,EAAE,6BAA6B,EAAE,aAAa,EAAE,IAAI,CAAC,CAAC,CAAC,EAAEC,SAAE,CAAC,KAAK,CAAC,MAAM,CAAC,EAAEA,SAAE,CAAC,KAAK,CAAC,aAAa,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE;AAC3jC,IAAI,IAAI,MAAM,GAAG,EAAE,CAAC,MAAM,CAAC;AAC3B,IAAI,QAAQ,MAAM,GAAG,SAAS,GAAG,EAAE,EAAE;AACrC,CAAC,EAAE;AACO,IAAC,QAAQ,GAAGH,uBAAM,CAAC,GAAG,CAAC,gBAAgB,KAAK,gBAAgB,GAAGE,0BAAoB,CAAC,CAAC,uJAAuJ,EAAE,gIAAgI,EAAE,4BAA4B,CAAC,EAAE,CAAC,uJAAuJ,EAAE,gIAAgI,EAAE,4BAA4B,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,EAAE;AACpuB,IAAI,IAAI,EAAE,GAAG,EAAE,CAAC,GAAG,EAAE,GAAG,GAAG,EAAE,KAAK,KAAK,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC;AAClD,IAAI,OAAO,GAAG,CAAC;AACf,CAAC,EAAEC,SAAE,CAAC,KAAK,CAAC,cAAc,CAAC,EAAE;AAC7B,IAAI,gBAAgB,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,gBAAgB;;;;;;;;"}
@@ -8,6 +8,7 @@ type TabsProps = {
8
8
  tabsDefinition: TabDefinition[];
9
9
  activeTab: number;
10
10
  onTabSwitch: (tab: number) => void;
11
+ mb?: string;
11
12
  };
12
13
  type UseTabsHook = (tabDefinitions: TabDefinition[]) => {
13
14
  activeTab: number;
@@ -16,7 +17,7 @@ type UseTabsHook = (tabDefinitions: TabDefinition[]) => {
16
17
  type TabContentProps = {
17
18
  activeTab: number;
18
19
  value: number;
19
- children: React.ReactNode | React.ReactNode[];
20
+ children: Element | null;
20
21
  };
21
22
 
22
23
  export { TabContentProps, TabDefinition, TabsProps, UseTabsHook };
@@ -1,2 +1,2 @@
1
1
  import { TabContentProps } from './types';
2
- export declare const TabContent: ({ activeTab, value, children }: TabContentProps) => React.ReactNode | React.ReactNode[];
2
+ export declare const TabContent: ({ activeTab, value, children }: TabContentProps) => Element | null;
@@ -1,3 +1,3 @@
1
1
  /// <reference types="react" />
2
2
  import { TabsProps } from './types';
3
- export declare const Tabs: ({ tabsDefinition, activeTab, onTabSwitch }: TabsProps) => JSX.Element;
3
+ export declare const Tabs: ({ tabsDefinition, activeTab, onTabSwitch, mb }: TabsProps) => JSX.Element;
@@ -1,5 +1,4 @@
1
- import { Tabs } from './Tabs';
2
1
  export { Tabs } from './Tabs';
2
+ export { TabContent } from './TabContent';
3
3
  export { useTabs } from './hooks/useTabs';
4
4
  export type { TabDefinition } from './types';
5
- export default Tabs;
@@ -2,7 +2,7 @@
2
2
  import { StoryObj } from '@storybook/react';
3
3
  declare const meta: {
4
4
  title: string;
5
- component: ({ tabsDefinition, activeTab, onTabSwitch }: import("../types").TabsProps) => JSX.Element;
5
+ component: ({ tabsDefinition, activeTab, onTabSwitch, mb }: import("../types").TabsProps) => JSX.Element;
6
6
  tags: string[];
7
7
  argTypes: {};
8
8
  };
@@ -5,4 +5,6 @@ export declare const RoundedWrap: import("styled-components").StyledComponent<"d
5
5
  export declare const Tab: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
6
6
  active: boolean;
7
7
  }, never>;
8
- export declare const TabPanel: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
8
+ export declare const TabPanel: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
9
+ $mb?: string | undefined;
10
+ }, never>;
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  export type TabDefinition = {
3
2
  label: string;
4
3
  icon?: string;
@@ -9,6 +8,7 @@ export type TabsProps = {
9
8
  tabsDefinition: TabDefinition[];
10
9
  activeTab: number;
11
10
  onTabSwitch: (tab: number) => void;
11
+ mb?: string;
12
12
  };
13
13
  export type TabElementProps = {
14
14
  tabDefinition: TabDefinition;
@@ -23,5 +23,5 @@ export type UseTabsHook = (tabDefinitions: TabDefinition[]) => {
23
23
  export type TabContentProps = {
24
24
  activeTab: number;
25
25
  value: number;
26
- children: React.ReactNode | React.ReactNode[];
26
+ children: Element | null;
27
27
  };
package/ui/dts/index.d.ts CHANGED
@@ -2,7 +2,6 @@ import CornerDialog from './Blocks/CornerDialog';
2
2
  import ImageList from './Blocks/ImageList';
3
3
  import LightBox from './Blocks/LightBox';
4
4
  import Modal from './Blocks/Modal';
5
- import Tabs from './Blocks/Tabs';
6
5
  import Alert from './Elements/Alert';
7
6
  import Avatar from './Elements/Avatar';
8
7
  import Badge from './Elements/Badge';
@@ -33,7 +32,7 @@ import Input from './Forms/Input';
33
32
  import RadioButton from './Forms/RadioButton';
34
33
  import ThemeProvider from './ThemeProvider';
35
34
  import utils from './utils';
36
- export { Card, CornerDialog, ImageList, LightBox, Modal, Tabs, Alert, Avatar, Badge, BorderedBox, Button, Dropdown, ErrorMessage, Icon, Image, Label, Line, Link, Logo, Pagination, Paragraph, Portal, ProgressBar, SimpleLink, SpaceAround, Spinner, Tag, Toast, Toggle, Typography, Checkbox, Input, RadioButton, ThemeProvider, utils };
35
+ export { Card, CornerDialog, ImageList, LightBox, Modal, Alert, Avatar, Badge, BorderedBox, Button, Dropdown, ErrorMessage, Icon, Image, Label, Line, Link, Logo, Pagination, Paragraph, Portal, ProgressBar, SimpleLink, SpaceAround, Spinner, Tag, Toast, Toggle, Typography, Checkbox, Input, RadioButton, ThemeProvider, utils };
37
36
  export * from './Blocks/CornerDialog';
38
37
  export * from './Blocks/ImageList';
39
38
  export * from './Blocks/LightBox';
package/ui/index.d.ts CHANGED
@@ -2,7 +2,6 @@ export { CornerDialog } from './Blocks/CornerDialog/index.js';
2
2
  export { ImageList } from './Blocks/ImageList/index.js';
3
3
  export { LightBox, useLightBox } from './Blocks/LightBox/index.js';
4
4
  export { default as Modal, useClickOutside, useModal } from './Blocks/Modal/index.js';
5
- export { TabContent, Tabs, useTabs } from './Blocks/Tabs/index.js';
6
5
  export { default as Alert } from './Elements/Alert/index.js';
7
6
  export { default as Avatar } from './Elements/Avatar/index.js';
8
7
  export { default as Badge } from './Elements/Badge/index.js';
@@ -33,6 +32,7 @@ export { default as Input } from './Forms/Input/index.js';
33
32
  export { default as RadioButton } from './Forms/RadioButton/index.js';
34
33
  export { default as ThemeProvider, themes } from './ThemeProvider/index.js';
35
34
  export { createRgba, default as utils } from './utils/index.js';
35
+ export { TabContent, Tabs, useTabs } from './Blocks/Tabs/index.js';
36
36
  export { CornerDialogProps, Intent } from './Blocks/CornerDialog/types.js';
37
37
  export { ImageData } from './Blocks/LightBox/types.js';
38
38
  export { ImageUploadProps } from './Blocks/ImageList/types.js';
package/ui/index.js CHANGED
@@ -7,8 +7,6 @@ var useLightBox = require('./Blocks/LightBox/hooks/useLightBox.js');
7
7
  var Modal = require('./Blocks/Modal/Modal.js');
8
8
  var useModal = require('./Blocks/Modal/hooks/useModal.js');
9
9
  var useClickOutside = require('./Blocks/Modal/hooks/useClickOutside.js');
10
- var Tabs = require('./Blocks/Tabs/Tabs.js');
11
- var useTabs = require('./Blocks/Tabs/hooks/useTabs.js');
12
10
  var Alert = require('./Elements/Alert/Alert.js');
13
11
  var Avatar = require('./Elements/Avatar/Avatar.js');
14
12
  var Badge = require('./Elements/Badge/Badge.js');
@@ -58,6 +56,9 @@ var RadioButton = require('./Forms/RadioButton/RadioButton.js');
58
56
  var ThemeProvider = require('./ThemeProvider/ThemeProvider.js');
59
57
  var index$2 = require('./ThemeProvider/themes/index.js');
60
58
  var index$1 = require('./utils/index.js');
59
+ var Tabs = require('./Blocks/Tabs/Tabs.js');
60
+ var TabContent = require('./Blocks/Tabs/TabContent.js');
61
+ var useTabs = require('./Blocks/Tabs/hooks/useTabs.js');
61
62
  var createRgba = require('./utils/CreateRgba/createRgba.js');
62
63
  var KeyPress = require('./utils/KeyPress/KeyPress.js');
63
64
 
@@ -70,8 +71,6 @@ exports.useLightBox = useLightBox.useLightBox;
70
71
  exports.Modal = Modal.Modal;
71
72
  exports.useModal = useModal.useModal;
72
73
  exports.useClickOutside = useClickOutside.useClickOutside;
73
- exports.Tabs = Tabs.Tabs;
74
- exports.useTabs = useTabs.useTabs;
75
74
  exports.Alert = Alert.default;
76
75
  exports.Avatar = Avatar.Avatar;
77
76
  exports.Badge = Badge.default;
@@ -139,6 +138,9 @@ exports.RadioButton = RadioButton.default;
139
138
  exports.ThemeProvider = ThemeProvider.default;
140
139
  exports.themes = index$2.default;
141
140
  exports.utils = index$1.default;
141
+ exports.Tabs = Tabs.Tabs;
142
+ exports.TabContent = TabContent.TabContent;
143
+ exports.useTabs = useTabs.useTabs;
142
144
  exports.createRgba = createRgba.createRgba;
143
145
  exports.KeyPress = KeyPress.default;
144
146
  //# sourceMappingURL=index.js.map
package/ui/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1,12 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var Tabs = require('./Tabs.js');
6
- require('react');
7
-
8
-
9
-
10
- exports.Tabs = Tabs.Tabs;
11
- exports.default = Tabs.Tabs;
12
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}