@mailstep/design-system 0.8.27 → 0.8.28

package/ui/Blocks/Stepper/styles.js

@@ -1,40 +1,25 @@
-function _tagged_template_literal(strings, raw) {
-    if (!raw) {
-        raw = strings.slice(0);
-    }
-    return Object.freeze(Object.defineProperties(strings, {
-        raw: {
-            value: Object.freeze(raw)
-        }
-    }));
-}
-function _templateObject() {
-    var data = _tagged_template_literal([
-        "\n  display: flex;\n  flex-direction: column;\n  height: fit-content;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  flex-direction: column;\n"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n  display: flex;\n  margin-bottom: ",
-        ";\n  flex-direction: column;\n  width: 100%;\n\n  @media (min-width: ",
-        "px) {\n    flex-direction: row;\n    width: auto;\n    max-width: 100%;\n  }\n"
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-import styled from "@xstyled/styled-components";
-var Container = styled.div(_templateObject());
-var ItemsWrapper = styled.div(_templateObject1(), function(param) {
-    var hasComponent = param.hasComponent;
-    return hasComponent ? "36px" : "0";
-}, function(param) {
-    var total = param.total;
-    return total * 150;
-});
+import styled$1 from "@xstyled/styled-components";
+//#region packages/ui/Blocks/Stepper/styles.ts
+const Container = styled$1.div`
+  display: flex;
+  flex-direction: column;
+  height: fit-content;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  flex-direction: column;
+`;
+const ItemsWrapper = styled$1.div`
+  display: flex;
+  margin-bottom: ${({ hasComponent }) => hasComponent ? "36px" : "0"};
+  flex-direction: column;
+  width: 100%;
+
+  @media (min-width: ${({ total }) => total * 150}px) {
+    flex-direction: row;
+    width: auto;
+    max-width: 100%;
+  }
+`;
+//#endregion
 export { Container, ItemsWrapper };

package/ui/Blocks/Stepper/types.js

@@ -0,0 +1 @@
+export {};

package/ui/Blocks/Table/Table.js

@@ -1,34 +1,13 @@
+import { Table as Table$1, Tbody, Td, Th, Thead, Tr } from "../../Elements/Table/Table.js";
+import "../../Elements/Table/index.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Table as TableComponent, Thead, Tr, Td, Th, Tbody } from "../../Elements/Table";
-var Table = function Table(param) {
-    var columnDefinitions = param.columnDefinitions, data = param.data, onRowClick = param.onRowClick;
-    return /* @__PURE__ */ jsxs(TableComponent, {
-        children: [
-            /* @__PURE__ */ jsx(Thead, {
-                children: /* @__PURE__ */ jsx(Tr, {
-                    children: columnDefinitions.map(function(column) {
-                        return /* @__PURE__ */ jsx(Th, {
-                            children: column.title
-                        });
-                    })
-                })
-            }),
-            /* @__PURE__ */ jsx(Tbody, {
-                children: data === null || data === void 0 ? void 0 : data.map(function(item) {
-                    return /* @__PURE__ */ jsx(Tr, {
-                        onClick: function onClick() {
-                            return onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(item);
-                        },
-                        cursor: onRowClick ? "pointer" : "auto",
-                        children: columnDefinitions.map(function(column) {
-                            return /* @__PURE__ */ jsx(Td, {
-                                children: item[column.name]
-                            }, column.name);
-                        })
-                    }, item.id);
-                })
-            })
-        ]
-    });
+//#region packages/ui/Blocks/Table/Table.tsx
+const Table = ({ columnDefinitions, data, onRowClick }) => {
+	return /* @__PURE__ */ jsxs(Table$1, { children: [/* @__PURE__ */ jsx(Thead, { children: /* @__PURE__ */ jsx(Tr, { children: columnDefinitions.map((column) => /* @__PURE__ */ jsx(Th, { children: column.title })) }) }), /* @__PURE__ */ jsx(Tbody, { children: data?.map((item) => /* @__PURE__ */ jsx(Tr, {
+		onClick: () => onRowClick?.(item),
+		cursor: onRowClick ? "pointer" : "auto",
+		children: columnDefinitions.map((column) => /* @__PURE__ */ jsx(Td, { children: item[column.name] }, column.name))
+	}, item.id)) })] });
 };
+//#endregion
 export { Table };

package/ui/Blocks/Table/index.js

@@ -1,2 +1,2 @@
-import { Table } from "./Table";
+import { Table } from "./Table.js";
 export { Table };

package/ui/Blocks/Table/types.js

@@ -0,0 +1 @@
+export {};

package/ui/Blocks/Tabs/TabContent.js

@@ -1,10 +1,9 @@
-import { jsx } from "react/jsx-runtime";
 import { Activity } from "react";
-var TabContent = function TabContent(param) {
-    var activeTab = param.activeTab, value = param.value, children = param.children;
-    return /* @__PURE__ */ jsx(Activity, {
-        mode: activeTab === value ? "visible" : "hidden",
-        children: children
-    });
-};
+import { jsx } from "react/jsx-runtime";
+//#region packages/ui/Blocks/Tabs/TabContent.tsx
+const TabContent = ({ activeTab, value, children }) => /* @__PURE__ */ jsx(Activity, {
+	mode: activeTab === value ? "visible" : "hidden",
+	children
+});
+//#endregion
 export { TabContent };

package/ui/Blocks/Tabs/Tabs.js

@@ -1,57 +1,46 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import Icon from "../../Elements/Icon/Icon.js";
+import "../../Elements/Icon/index.js";
+import Text from "../../Elements/Text/Text.js";
+import "../../Elements/Text/index.js";
+import { RoundedWrap, StyledImageBox, StyledTabWrapper, Tab as Tab$1, TabPanel } from "./styles.js";
 import { useCallback } from "react";
-import { Icon } from "../../Elements/Icon";
-import { Text } from "../../Elements/Text";
-import { RoundedWrap, StyledImageBox, Tab as StyledTab, StyledTabWrapper, TabPanel } from "./styles";
-var Tab = function Tab(param) {
-    var tabDefinition = param.tabDefinition, value = param.value, isActive = param.isActive, onTabSwitch = param.onTabSwitch, minWidth = param.minWidth;
-    var icon = tabDefinition.icon, label = tabDefinition.label, badgeCount = tabDefinition.badgeCount, disabled = tabDefinition.disabled;
-    var handleOnClick = useCallback(function() {
-        onTabSwitch(value);
-    }, [
-        onTabSwitch,
-        value
-    ]);
-    return /* @__PURE__ */ jsx(StyledTabWrapper, {
-        children: /* @__PURE__ */ jsxs(StyledTab, {
-            onClick: !disabled ? handleOnClick : void 0,
-            active: isActive,
-            disabled: disabled,
-            minWidth: minWidth,
-            "data-testid": "tab-".concat(value),
-            children: [
-                icon && /* @__PURE__ */ jsx(StyledImageBox, {
-                    children: /* @__PURE__ */ jsx(Icon, {
-                        icon: icon
-                    })
-                }),
-                /* @__PURE__ */ jsx(Text, {
-                    children: label
-                }),
-                badgeCount === 0 || badgeCount && badgeCount > 0 && /* @__PURE__ */ jsx(RoundedWrap, {
-                    children: /* @__PURE__ */ jsx(Text, {
-                        variant: "medium",
-                        children: badgeCount
-                    })
-                })
-            ]
-        })
-    });
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Blocks/Tabs/Tabs.tsx
+const Tab = ({ tabDefinition, value, isActive, onTabSwitch, minWidth }) => {
+	const { icon, label, badgeCount, disabled } = tabDefinition;
+	const handleOnClick = useCallback(() => {
+		onTabSwitch(value);
+	}, [onTabSwitch, value]);
+	return /* @__PURE__ */ jsx(StyledTabWrapper, { children: /* @__PURE__ */ jsxs(Tab$1, {
+		onClick: !disabled ? handleOnClick : void 0,
+		active: isActive,
+		disabled,
+		minWidth,
+		"data-testid": `tab-${value}`,
+		children: [
+			icon && /* @__PURE__ */ jsx(StyledImageBox, { children: /* @__PURE__ */ jsx(Icon, { icon }) }),
+			/* @__PURE__ */ jsx(Text, { children: label }),
+			badgeCount === 0 || badgeCount && badgeCount > 0 && /* @__PURE__ */ jsx(RoundedWrap, { children: /* @__PURE__ */ jsx(Text, {
+				variant: "medium",
+				children: badgeCount
+			}) })
+		]
+	}) });
 };
-var Tabs = function Tabs(param) {
-    var tabsDefinition = param.tabsDefinition, activeTab = param.activeTab, onTabSwitch = param.onTabSwitch, mb = param.mb, mt = param.mt, minTabWidth = param.minTabWidth;
-    return /* @__PURE__ */ jsx(TabPanel, {
-        $mb: mb,
-        $mt: mt,
-        children: tabsDefinition.map(function(item, index) {
-            return /* @__PURE__ */ jsx(Tab, {
-                value: index,
-                tabDefinition: item,
-                isActive: index === activeTab,
-                minWidth: minTabWidth,
-                onTabSwitch: onTabSwitch
-            }, index);
-        })
-    });
+const Tabs = ({ tabsDefinition, activeTab, onTabSwitch, mb, mt, minTabWidth }) => {
+	return /* @__PURE__ */ jsx(TabPanel, {
+		$mb: mb,
+		$mt: mt,
+		children: tabsDefinition.map((item, index) => {
+			return /* @__PURE__ */ jsx(Tab, {
+				value: index,
+				tabDefinition: item,
+				isActive: index === activeTab,
+				minWidth: minTabWidth,
+				onTabSwitch
+			}, index);
+		})
+	});
 };
+//#endregion
 export { Tabs };

package/ui/Blocks/Tabs/hooks/useTabs.js

@@ -1,62 +1,14 @@
-function _array_like_to_array(arr, len) {
-    if (len == null || len > arr.length) len = arr.length;
-    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
-    return arr2;
-}
-function _array_with_holes(arr) {
-    if (Array.isArray(arr)) return arr;
-}
-function _iterable_to_array_limit(arr, i) {
-    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-    if (_i == null) return;
-    var _arr = [];
-    var _n = true;
-    var _d = false;
-    var _s, _e;
-    try {
-        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
-            _arr.push(_s.value);
-            if (i && _arr.length === i) break;
-        }
-    } catch (err) {
-        _d = true;
-        _e = err;
-    } finally{
-        try {
-            if (!_n && _i["return"] != null) _i["return"]();
-        } finally{
-            if (_d) throw _e;
-        }
-    }
-    return _arr;
-}
-function _non_iterable_rest() {
-    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-function _sliced_to_array(arr, i) {
-    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
-}
-function _unsupported_iterable_to_array(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return _array_like_to_array(o, minLen);
-    var n = Object.prototype.toString.call(o).slice(8, -1);
-    if (n === "Object" && o.constructor) n = o.constructor.name;
-    if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
-}
 import { useCallback, useState } from "react";
-var useTabs = function useTabs(tabDefinitions) {
-    var index = tabDefinitions.map(function(item) {
-        return item.default;
-    }).indexOf(true);
-    var initialValue = index === -1 ? 0 : index;
-    var _useState = _sliced_to_array(useState(initialValue), 2), activeTab = _useState[0], setActiveTab = _useState[1];
-    var onTabSwitch = useCallback(function(value) {
-        setActiveTab(value);
-    }, []);
-    return {
-        activeTab: activeTab,
-        onTabSwitch: onTabSwitch
-    };
+//#region packages/ui/Blocks/Tabs/hooks/useTabs.ts
+const useTabs = (tabDefinitions) => {
+	const index = tabDefinitions.map((item) => item.default).indexOf(true);
+	const [activeTab, setActiveTab] = useState(index === -1 ? 0 : index);
+	return {
+		activeTab,
+		onTabSwitch: useCallback((value) => {
+			setActiveTab(value);
+		}, [])
+	};
 };
+//#endregion
 export { useTabs };

package/ui/Blocks/Tabs/index.js

@@ -1,5 +1,7 @@
-import { Tabs } from "./Tabs";
-import { TabContent } from "./TabContent";
-import { useTabs } from "./hooks/useTabs";
+import { Tabs } from "./Tabs.js";
+import { TabContent } from "./TabContent.js";
+import { useTabs } from "./hooks/useTabs.js";
+//#region packages/ui/Blocks/Tabs/index.ts
 var Tabs_default = Tabs;
+//#endregion
 export { TabContent, Tabs_default as default, useTabs };

package/ui/Blocks/Tabs/styles.js

@@ -1,110 +1,95 @@
-function _tagged_template_literal(strings, raw) {
-    if (!raw) {
-        raw = strings.slice(0);
-    }
-    return Object.freeze(Object.defineProperties(strings, {
-        raw: {
-            value: Object.freeze(raw)
-        }
-    }));
-}
-function _templateObject() {
-    var data = _tagged_template_literal([
-        "\n  margin-right: 1em;\n"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  position: relative;\n"
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject2() {
-    var data = _tagged_template_literal([
-        "\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"
-    ]);
-    _templateObject2 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject3() {
-    var data = _tagged_template_literal([
-        "\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"
-    ]);
-    _templateObject3 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject4() {
-    var data = _tagged_template_literal([
-        "\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: ",
-        ";\n  padding: 0 12px 12px;\n  transition: 200ms;\n  color: ",
-        ";\n  font-weight: bold;\n  font-size: 14px;\n  letter-spacing: 0.03em;\n  min-width: ",
-        ";\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: ",
-        ";\n  }\n"
-    ]);
-    _templateObject4 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject5() {
-    var data = _tagged_template_literal([
-        "\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"
-    ]);
-    _templateObject5 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-import styled, { css, th, x } from "@xstyled/styled-components";
-var StyledImageBox = styled(x.div)(_templateObject());
-var StyledTabWrapper = styled.div(_templateObject1());
-var RoundedWrap = styled.div(_templateObject2(), th.color("lightGray7"));
-var activeTab = css(_templateObject3(), th.color("red1"), th.color("red1"), th.color("typoPrimary"));
-var Tab = styled.div(_templateObject4(), function(param) {
-    var disabled = param.disabled;
-    return disabled ? "auto" : "pointer";
-}, th.color("gray"), function(param) {
-    var minWidth = param.minWidth;
-    return minWidth ? Array.isArray(minWidth) ? minWidth[0] : minWidth : "100px";
-}, function(param) {
-    var disabled = param.disabled;
-    return th.color(disabled ? "gray" : "typoPrimary");
-}, function(param) {
-    var disabled = param.disabled;
-    return !disabled && activeTab;
-}, function(param) {
-    var active = param.active;
-    return active ? activeTab : "";
-}, function(param) {
-    var minWidth = param.minWidth;
-    return minWidth ? Array.isArray(minWidth) ? minWidth[1] : minWidth : "120px";
-});
-var TabPanel = styled.div(_templateObject5(), function(param) {
-    var _param_$mb = param.$mb, $mb = _param_$mb === void 0 ? 0 : _param_$mb;
-    return $mb;
-}, function(param) {
-    var _param_$mt = param.$mt, $mt = _param_$mt === void 0 ? 0 : _param_$mt;
-    return $mt;
-}, th.color("bgLightGray1"));
+import styled$1, { css, th, x } from "@xstyled/styled-components";
+//#region packages/ui/Blocks/Tabs/styles.ts
+const StyledImageBox = styled$1(x.div)`
+  margin-right: 1em;
+`;
+const StyledTabWrapper = styled$1.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  position: relative;
+`;
+const RoundedWrap = styled$1.div`
+  display: flex !important;
+  justify-content: center;
+  align-items: center;
+  height: 23px;
+  background-color: ${th.color("lightGray7")};
+  border-radius: 29px;
+  padding: 3px 10px;
+  margin-left: 8px;
+`;
+const activeTab = css`
+  color: ${th.color("red1")};
+
+  &:after {
+    content: '';
+    position: absolute;
+    bottom: 2;
+    left: 0;
+    right: 0;
+    background-color: ${th.color("red1")};
+    height: 4px;
+    border-radius: 6px 6px 0px 0px;
+  }
+  & > div {
+    display: inline;
+    color: ${th.color("typoPrimary")};
+  }
+`;
+const Tab = styled$1.div`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: ${({ disabled }) => disabled ? "auto" : "pointer"};
+  padding: 0 12px 12px;
+  transition: 200ms;
+  color: ${th.color("gray")};
+  font-weight: bold;
+  font-size: 14px;
+  letter-spacing: 0.03em;
+  min-width: ${({ minWidth }) => minWidth ? Array.isArray(minWidth) ? minWidth[0] : minWidth : "100px"};
+
+  & > div {
+    display: none;
+  }
+  &:not(:last-child) {
+    margin-right: 0.5rem;
+  }
+
+  :hover {
+    color: ${({ disabled }) => th.color(disabled ? "gray" : "typoPrimary")};
+  }
+
+  :active {
+    ${({ disabled }) => !disabled && activeTab};
+  }
+
+  ${({ active }) => active ? activeTab : ""};
+
+  @media (min-width: 400px) {
+    min-width: ${({ minWidth }) => minWidth ? Array.isArray(minWidth) ? minWidth[1] : minWidth : "120px"};
+  }
+`;
+const TabPanel = styled$1.div`
+  display: flex;
+  align-items: center;
+  overflow: auto;
+  width: fit-content;
+  position: relative;
+  margin-bottom: ${({ $mb = 0 }) => $mb};
+  margin-top: ${({ $mt = 0 }) => $mt};
+  align-items: stretch;
+
+  &:after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: ${th.color("bgLightGray1")};
+    height: 2px;
+  }
+`;
+//#endregion
 export { RoundedWrap, StyledImageBox, StyledTabWrapper, Tab, TabPanel };

package/ui/Blocks/Tabs/types.js

@@ -0,0 +1 @@
+export {};