@mailstep/design-system 0.8.31-beta.4 → 0.8.31

package/ui/Blocks/Stepper/components/StepCircle/styles.js

@@ -1,19 +1,23 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import styled, { css, th } from '@xstyled/styled-components';
-export var StepCircleContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-size: 16px;\n  font-weight: 600;\n  border-radius: 50%;\n  color: ", ";\n  border: ", ";\n  border-color: ", ";\n  background: white;\n  height: 36px;\n  width: 36px;\n  display: flex;\n  flex: 0 0 36px;\n  justify-content: center;\n  align-items: center;\n\n  ", "\n"], ["\n  font-size: 16px;\n  font-weight: 600;\n  border-radius: 50%;\n  color: ", ";\n  border: ", ";\n  border-color: ", ";\n  background: white;\n  height: 36px;\n  width: 36px;\n  display: flex;\n  flex: 0 0 36px;\n  justify-content: center;\n  align-items: center;\n\n  ", "\n"])), function (_a) {
-    var isActiveStep = _a.isActiveStep;
-    return (isActiveStep ? th.color('red1') : th.color('lightGray6'));
-}, function (_a) {
-    var isCompleted = _a.isCompleted;
-    return "".concat(isCompleted ? 8 : 2, "px solid");
-}, function (_a) {
-    var isCompleted = _a.isCompleted, isActiveStep = _a.isActiveStep;
-    return th.color(isActiveStep || isCompleted ? 'red1' : 'lightGray6');
-}, function (_a) {
-    var isActiveStep = _a.isActiveStep;
-    return isActiveStep && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      box-shadow: 0 0 0 4px ", ";\n    "], ["\n      box-shadow: 0 0 0 4px ", ";\n    "])), th.color('red20'));
-});
-var templateObject_1, templateObject_2;
+import styled$1, { css, th } from "@xstyled/styled-components";
+//#region packages/ui/Blocks/Stepper/components/StepCircle/styles.ts
+const StepCircleContainer = styled$1.div`
+  font-size: 16px;
+  font-weight: 600;
+  border-radius: 50%;
+  color: ${({ isActiveStep }) => isActiveStep ? th.color("red1") : th.color("lightGray6")};
+  border: ${({ isCompleted }) => `${isCompleted ? 8 : 2}px solid`};
+  border-color: ${({ isCompleted, isActiveStep }) => th.color(isActiveStep || isCompleted ? "red1" : "lightGray6")};
+  background: white;
+  height: 36px;
+  width: 36px;
+  display: flex;
+  flex: 0 0 36px;
+  justify-content: center;
+  align-items: center;
+
+  ${({ isActiveStep }) => isActiveStep && css`
+      box-shadow: 0 0 0 4px ${th.color("red20")};
+    `}
+`;
+//#endregion
+export { StepCircleContainer };

package/ui/Blocks/Stepper/components/StepItem/index.d.ts

@@ -1,5 +1,4 @@
-import { FC } from 'react';
-
+import { type FC } from 'react';
 type StepItemProps = {
     onClick?: () => void;
     title: string;

package/ui/Blocks/Stepper/components/StepItem/index.js

@@ -1,13 +1,52 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Paragraph2, H7 } from '../../../../Elements/Typography/Typography';
-import { StepCircle } from '../StepCircle';
-import { Trans } from '@lingui/react';
-import { x } from '@xstyled/styled-components';
-import isBoolean from 'lodash/isBoolean';
-import { Line, StepItemContainer, ContentWrapper } from './styles';
-export var StepItem = function (_a) {
-    var title = _a.title, index = _a.index, disabled = _a.disabled, isPrevStepCompleted = _a.isPrevStepCompleted, activeStep = _a.activeStep, completed = _a.completed, icon = _a.icon, _b = _a.hasStepNumbering, hasStepNumbering = _b === void 0 ? true : _b, _c = _a.visible, visible = _c === void 0 ? true : _c, total = _a.total, onClick = _a.onClick;
-    var isActiveStep = index === activeStep;
-    var isCompletedStep = isBoolean(completed) ? completed : index < activeStep;
-    return (_jsxs(StepItemContainer, { onClick: !disabled && (isCompletedStep || isPrevStepCompleted) ? onClick : undefined, isActiveStep: isActiveStep, isDisabled: disabled, isVisible: visible, total: total, children: [_jsx(Line, { isActiveStep: isActiveStep, isCompletedStep: isCompletedStep }), _jsxs(ContentWrapper, { children: [_jsx(StepCircle, { icon: isCompletedStep ? 'check' : icon, isCompleted: isCompletedStep, isActiveStep: isActiveStep, children: index + 1 }), _jsxs(x.div, { alignSelf: "center", children: [hasStepNumbering && (_jsx(x.span, { textTransform: "uppercase", children: _jsxs(H7, { color: isCompletedStep ? 'red1' : 'gray1', variant: "semiBold", mt: 0, mb: "4px", children: [_jsx(Trans, { id: "step", message: "Step" }), ": ", index + 1] }) })), _jsx(Paragraph2, { variant: "medium", children: title })] })] })] }));
+import { H7, Paragraph2 } from "../../../../Elements/Typography/Typography.js";
+import { StepCircle } from "../StepCircle/index.js";
+import { ContentWrapper, Line, StepItemContainer } from "./styles.js";
+import { x } from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Trans } from "@lingui/react";
+import isBoolean from "lodash/isBoolean";
+//#region packages/ui/Blocks/Stepper/components/StepItem/index.tsx
+const StepItem = ({ title, index, disabled, isPrevStepCompleted, activeStep, completed, icon, hasStepNumbering = true, visible = true, total, onClick }) => {
+	const isActiveStep = index === activeStep;
+	const isCompletedStep = isBoolean(completed) ? completed : index < activeStep;
+	return /* @__PURE__ */ jsxs(StepItemContainer, {
+		onClick: !disabled && (isCompletedStep || isPrevStepCompleted) ? onClick : void 0,
+		isActiveStep,
+		isDisabled: disabled,
+		isVisible: visible,
+		total,
+		children: [/* @__PURE__ */ jsx(Line, {
+			isActiveStep,
+			isCompletedStep
+		}), /* @__PURE__ */ jsxs(ContentWrapper, { children: [/* @__PURE__ */ jsx(StepCircle, {
+			icon: isCompletedStep ? "check" : icon,
+			isCompleted: isCompletedStep,
+			isActiveStep,
+			children: index + 1
+		}), /* @__PURE__ */ jsxs(x.div, {
+			alignSelf: "center",
+			children: [hasStepNumbering && /* @__PURE__ */ jsx(x.span, {
+				textTransform: "uppercase",
+				children: /* @__PURE__ */ jsxs(H7, {
+					color: isCompletedStep ? "red1" : "gray1",
+					variant: "semiBold",
+					mt: 0,
+					mb: "4px",
+					children: [
+						/* @__PURE__ */ jsx(Trans, {
+							id: "step",
+							message: "Step"
+						}),
+						": ",
+						index + 1
+					]
+				})
+			}), /* @__PURE__ */ jsx(Paragraph2, {
+				variant: "medium",
+				children: title
+			})]
+		})] })]
+	});
 };
+//#endregion
+export { StepItem };

package/ui/Blocks/Stepper/components/StepItem/styles.d.ts

@@ -1,12 +1,12 @@
-export declare const StepItemContainer: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+export declare const StepItemContainer: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     isActiveStep: boolean;
-    isDisabled?: boolean | undefined;
-    isVisible?: boolean | undefined;
+    isDisabled?: boolean;
+    isVisible?: boolean;
     total: number;
-    onClick?: (() => void) | undefined;
+    onClick?: () => void;
 }, never>;
-export declare const Line: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+export declare const Line: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     isActiveStep: boolean;
     isCompletedStep: boolean;
 }, never>;
-export declare const ContentWrapper: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const ContentWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;

package/ui/Blocks/Stepper/components/StepItem/styles.js

@@ -1,36 +1,79 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import { StepCircleContainer } from '../StepCircle/styles';
-import styled, { css, th } from '@xstyled/styled-components';
-var responsiveCss = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  padding: 8px;\n\n  h6 {\n    font-size: 10px;\n  }\n\n  p {\n    font-size: 12px;\n  }\n\n  ", " {\n    display: flex;\n  }\n\n  @media (min-width: ", "px) {\n    width: 150px;\n    padding: 16px;\n\n    ", " {\n      display: none;\n    }\n  }\n\n  @media (min-width: ", "px) {\n    width: 200px;\n    padding: 24px;\n\n    ", " {\n      display: flex;\n    }\n  }\n\n  @media (min-width: ", "px) {\n    width: 240px;\n\n    p {\n      font-size: 16px;\n    }\n    h6 {\n      font-size: 12px;\n    }\n\n    ", " {\n      display: flex;\n    }\n  }\n"], ["\n  width: 100%;\n  padding: 8px;\n\n  h6 {\n    font-size: 10px;\n  }\n\n  p {\n    font-size: 12px;\n  }\n\n  ", " {\n    display: flex;\n  }\n\n  @media (min-width: ", "px) {\n    width: 150px;\n    padding: 16px;\n\n    ", " {\n      display: none;\n    }\n  }\n\n  @media (min-width: ", "px) {\n    width: 200px;\n    padding: 24px;\n\n    ", " {\n      display: flex;\n    }\n  }\n\n  @media (min-width: ", "px) {\n    width: 240px;\n\n    p {\n      font-size: 16px;\n    }\n    h6 {\n      font-size: 12px;\n    }\n\n    ", " {\n      display: flex;\n    }\n  }\n"])), StepCircleContainer, function (_a) {
-    var total = _a.total;
-    return total * 150;
-}, StepCircleContainer, function (_a) {
-    var total = _a.total;
-    return total * 200;
-}, StepCircleContainer, function (_a) {
-    var total = _a.total;
-    return total * 240;
-}, StepCircleContainer);
-export var StepItemContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 10px;\n  width: 240px;\n  padding: 24px;\n  background-color: ", ";\n  cursor: ", ";\n  display: ", ";\n  ", "\n"], ["\n  border-radius: 10px;\n  width: 240px;\n  padding: 24px;\n  background-color: ", ";\n  cursor: ", ";\n  display: ", ";\n  ", "\n"])), function (_a) {
-    var isActiveStep = _a.isActiveStep;
-    return (isActiveStep ? th.color('bgLightGray1') : 'transparent');
-}, function (_a) {
-    var isDisabled = _a.isDisabled, onClick = _a.onClick;
-    return (isDisabled ? 'not-allowed' : onClick ? 'pointer' : 'auto');
-}, function (_a) {
-    var isVisible = _a.isVisible;
-    return (isVisible ? 'block' : 'none');
-}, responsiveCss);
-export var Line = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 4px;\n  border-radius: 8px;\n  width: 100%;\n  background-color: ", ";\n  margin-bottom: 16px;\n"], ["\n  height: 4px;\n  border-radius: 8px;\n  width: 100%;\n  background-color: ", ";\n  margin-bottom: 16px;\n"])), function (_a) {
-    var isActiveStep = _a.isActiveStep, isCompletedStep = _a.isCompletedStep;
-    if (isActiveStep)
-        return th.color('red1');
-    if (isCompletedStep)
-        return th.color('red20');
-    return th.color('lightGray7');
-});
-export var ContentWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  column-gap: 16px;\n  align-items: flex-start;\n"], ["\n  display: flex;\n  column-gap: 16px;\n  align-items: flex-start;\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+import { StepCircleContainer } from "../StepCircle/styles.js";
+import styled$1, { css, th } from "@xstyled/styled-components";
+//#region packages/ui/Blocks/Stepper/components/StepItem/styles.ts
+const responsiveCss = css`
+  width: 100%;
+  padding: 8px;
+
+  h6 {
+    font-size: 10px;
+  }
+
+  p {
+    font-size: 12px;
+  }
+
+  ${StepCircleContainer} {
+    display: flex;
+  }
+
+  @media (min-width: ${({ total }) => total * 150}px) {
+    width: 150px;
+    padding: 16px;
+
+    ${StepCircleContainer} {
+      display: none;
+    }
+  }
+
+  @media (min-width: ${({ total }) => total * 200}px) {
+    width: 200px;
+    padding: 24px;
+
+    ${StepCircleContainer} {
+      display: flex;
+    }
+  }
+
+  @media (min-width: ${({ total }) => total * 240}px) {
+    width: 240px;
+
+    p {
+      font-size: 16px;
+    }
+    h6 {
+      font-size: 12px;
+    }
+
+    ${StepCircleContainer} {
+      display: flex;
+    }
+  }
+`;
+const StepItemContainer = styled$1.div`
+  border-radius: 10px;
+  width: 240px;
+  padding: 24px;
+  background-color: ${({ isActiveStep }) => isActiveStep ? th.color("bgLightGray1") : "transparent"};
+  cursor: ${({ isDisabled, onClick }) => isDisabled ? "not-allowed" : onClick ? "pointer" : "auto"};
+  display: ${({ isVisible }) => isVisible ? "block" : "none"};
+  ${responsiveCss}
+`;
+const Line = styled$1.div`
+  height: 4px;
+  border-radius: 8px;
+  width: 100%;
+  background-color: ${({ isActiveStep, isCompletedStep }) => {
+	if (isActiveStep) return th.color("red1");
+	if (isCompletedStep) return th.color("red20");
+	return th.color("lightGray7");
+}};
+  margin-bottom: 16px;
+`;
+const ContentWrapper = styled$1.div`
+  display: flex;
+  column-gap: 16px;
+  align-items: flex-start;
+`;
+//#endregion
+export { ContentWrapper, Line, StepItemContainer };

package/ui/Blocks/Stepper/hooks/useStepper.js

@@ -1,22 +1,33 @@
-import { useCallback, useState } from 'react';
-export var useStepper = function (_a) {
-    var totalSteps = _a.totalSteps;
-    var _b = useState(0), activeStep = _b[0], setActiveStep = _b[1];
-    var _c = useState(false), isSuccess = _c[0], setSuccess = _c[1];
-    var handleReset = useCallback(function () {
-        setActiveStep(0);
-        setSuccess(false);
-    }, []);
-    var handleGoToNextStep = useCallback(function () {
-        if (activeStep + 1 === totalSteps) {
-            handleReset();
-            setSuccess(true);
-            return;
-        }
-        setActiveStep(activeStep + 1);
-    }, [activeStep, totalSteps, handleReset]);
-    var handleChangeStep = useCallback(function (step) { return function () {
-        setActiveStep(step);
-    }; }, []);
-    return { activeStep: activeStep, handleChangeStep: handleChangeStep, handleGoToNextStep: handleGoToNextStep, isSuccess: isSuccess, handleReset: handleReset };
+import { useCallback, useState } from "react";
+//#region packages/ui/Blocks/Stepper/hooks/useStepper.ts
+const useStepper = ({ totalSteps }) => {
+	const [activeStep, setActiveStep] = useState(0);
+	const [isSuccess, setSuccess] = useState(false);
+	const handleReset = useCallback(() => {
+		setActiveStep(0);
+		setSuccess(false);
+	}, []);
+	const handleGoToNextStep = useCallback(() => {
+		if (activeStep + 1 === totalSteps) {
+			handleReset();
+			setSuccess(true);
+			return;
+		}
+		setActiveStep(activeStep + 1);
+	}, [
+		activeStep,
+		totalSteps,
+		handleReset
+	]);
+	return {
+		activeStep,
+		handleChangeStep: useCallback((step) => () => {
+			setActiveStep(step);
+		}, []),
+		handleGoToNextStep,
+		isSuccess,
+		handleReset
+	};
 };
+//#endregion
+export { useStepper };

package/ui/Blocks/Stepper/index.js

@@ -1,3 +1,4 @@
-export { Stepper as default } from './Stepper';
-export { useStepper } from './hooks/useStepper';
-export { StepCircle } from './components/StepCircle';
+import { StepCircle } from "./components/StepCircle/index.js";
+import { Stepper } from "./Stepper.js";
+import { useStepper } from "./hooks/useStepper.js";
+export { StepCircle, Stepper as default, useStepper };

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

@@ -1,5 +1,4 @@
-import { FC } from 'react';
-
+import { type FC } from 'react';
 declare const meta: {
     title: string;
     tags: string[];

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

@@ -1,5 +1,5 @@
-export declare const Container: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
-export declare const ItemsWrapper: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+export declare const Container: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const ItemsWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     total: number;
     hasComponent: boolean;
 }, never>;

package/ui/Blocks/Stepper/styles.js

@@ -1,14 +1,25 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import styled from '@xstyled/styled-components';
-export var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\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"], ["\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"])));
-export var ItemsWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\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"], ["\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"])), function (_a) {
-    var hasComponent = _a.hasComponent;
-    return (hasComponent ? '36px' : '0');
-}, function (_a) {
-    var total = _a.total;
-    return total * 150;
-});
-var templateObject_1, templateObject_2;
+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.d.ts

@@ -1,5 +1,4 @@
-import { FC } from 'react';
-
+import type { FC } from 'react';
 export type StepperProps = {
     items: StepperItem[];
     activeStep: number;

package/ui/Blocks/Table/Table.d.ts

@@ -1,6 +1,5 @@
 import { FC } from 'react';
 import { ColumnDefinitions, DataRow } from './types';
-
 type Props = {
     columnDefinitions: ColumnDefinitions;
     data?: DataRow[] | null;

package/ui/Blocks/Table/Table.js

@@ -1,6 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Table as TableComponent, Thead, Tr, Td, Th, Tbody } from '../../Elements/Table';
-export var Table = function (_a) {
-    var columnDefinitions = _a.columnDefinitions, data = _a.data, onRowClick = _a.onRowClick;
-    return (_jsxs(TableComponent, { children: [_jsx(Thead, { children: _jsx(Tr, { children: columnDefinitions.map(function (column) { return (_jsx(Th, { children: column.title })); }) }) }), _jsx(Tbody, { children: data === null || data === void 0 ? void 0 : data.map(function (item) { return (_jsx(Tr, { onClick: function () { return onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(item); }, cursor: onRowClick ? 'pointer' : 'auto', children: columnDefinitions.map(function (column) { return (_jsx(Td, { children: item[column.name] }, column.name)); }) }, item.id)); }) })] }));
+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";
+//#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 +1,2 @@
-export { Table } from './Table';
+import { Table } from "./Table.js";
+export { Table };

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

@@ -1,10 +1,9 @@
-/// <reference types="react" />
 declare const meta: {
     title: string;
-    component: import('react').FC<{
-        columnDefinitions: import('../types').ColumnDefinitions;
-        data?: import('../types').DataRow[] | null | undefined;
-        onRowClick?: ((dataRow: import('../types').DataRow) => void) | undefined;
+    component: import("react").FC<{
+        columnDefinitions: import("../types").ColumnDefinitions;
+        data?: import("../types").DataRow[] | null;
+        onRowClick?: (dataRow: import("../types").DataRow) => void;
     }>;
     tags: string[];
     argTypes: {};

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

@@ -1,4 +1,3 @@
-import { FC } from 'react';
-import { TabContentProps } from './types';
-
+import { type FC } from 'react';
+import type { TabContentProps } from './types';
 export declare const TabContent: FC<TabContentProps>;

package/ui/Blocks/Tabs/TabContent.js

@@ -1,6 +1,9 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Activity } from 'react';
-export var TabContent = function (_a) {
-    var activeTab = _a.activeTab, value = _a.value, children = _a.children;
-    return (_jsx(Activity, { mode: activeTab === value ? 'visible' : 'hidden', children: children }));
-};
+import { Activity } from "react";
+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.d.ts

@@ -1,4 +1,3 @@
-import { default as React } from 'react';
-import { TabsProps } from './types';
-
+import React from 'react';
+import type { TabsProps } from './types';
 export declare const Tabs: React.FC<TabsProps>;

package/ui/Blocks/Tabs/Tabs.js

@@ -1,20 +1,46 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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 (_a) {
-    var tabDefinition = _a.tabDefinition, value = _a.value, isActive = _a.isActive, onTabSwitch = _a.onTabSwitch, minWidth = _a.minWidth;
-    var icon = tabDefinition.icon, label = tabDefinition.label, badgeCount = tabDefinition.badgeCount, disabled = tabDefinition.disabled;
-    var handleOnClick = useCallback(function () {
-        onTabSwitch(value);
-    }, [onTabSwitch, value]);
-    return (_jsx(StyledTabWrapper, { children: _jsxs(StyledTab, { onClick: !disabled ? handleOnClick : undefined, active: isActive, disabled: disabled, minWidth: minWidth, "data-testid": "tab-".concat(value), 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 }) })))] }) }));
+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 { 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
+			}) })
+		]
+	}) });
 };
-export var Tabs = function (_a) {
-    var tabsDefinition = _a.tabsDefinition, activeTab = _a.activeTab, onTabSwitch = _a.onTabSwitch, mb = _a.mb, mt = _a.mt, minTabWidth = _a.minTabWidth;
-    return (_jsx(TabPanel, { "$mb": mb, "$mt": mt, children: tabsDefinition.map(function (item, index) {
-            return (_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.d.ts

@@ -1,3 +1,2 @@
 import { UseTabsHook } from '../types';
-
 export declare const useTabs: UseTabsHook;

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

@@ -1,10 +1,14 @@
-import { useCallback, useState } from 'react';
-export var useTabs = function (tabDefinitions) {
-    var index = tabDefinitions.map(function (item) { return item.default; }).indexOf(true);
-    var initialValue = index === -1 ? 0 : index;
-    var _a = useState(initialValue), activeTab = _a[0], setActiveTab = _a[1];
-    var onTabSwitch = useCallback(function (value) {
-        setActiveTab(value);
-    }, []);
-    return { activeTab: activeTab, onTabSwitch: onTabSwitch };
+import { useCallback, useState } from "react";
+//#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.d.ts

@@ -1,5 +1,4 @@
 import { Tabs } from './Tabs';
-
 export { TabContent } from './TabContent';
 export { useTabs } from './hooks/useTabs';
 export type { TabDefinition } from './types';

package/ui/Blocks/Tabs/index.js

@@ -1,4 +1,7 @@
-import { Tabs } from './Tabs';
-export { TabContent } from './TabContent';
-export { useTabs } from './hooks/useTabs';
-export default Tabs;
+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/stories/Tabs.stories.d.ts

@@ -1,8 +1,7 @@
 import { StoryObj } from '@storybook/react-webpack5';
-
 declare const meta: {
     title: string;
-    component: import('react').FC<import('../types').TabsProps>;
+    component: import("react").FC<import("../types").TabsProps>;
     tags: string[];
     argTypes: {};
 };