@mailstep/design-system 0.8.30 → 0.8.31-beta.1

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

@@ -1,23 +1,19 @@
-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 };
+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;

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

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

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

@@ -1,52 +1,13 @@
-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
-			})]
-		})] })]
-	});
+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 })] })] })] }));
 };
-//#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/system').Theme, {
     isActiveStep: boolean;
-    isDisabled?: boolean;
-    isVisible?: boolean;
+    isDisabled?: boolean | undefined;
+    isVisible?: boolean | undefined;
     total: number;
-    onClick?: () => void;
+    onClick?: (() => void) | undefined;
 }, 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/system').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/system').Theme, {}, never>;

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

@@ -1,79 +1,36 @@
-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 };
+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;

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

@@ -1,33 +1,22 @@
-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
-	};
+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 };
 };
-//#endregion
-export { useStepper };

package/ui/Blocks/Stepper/index.js

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

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

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

package/ui/Blocks/Stepper/stories/Stepper.stories.js

@@ -0,0 +1,86 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Stepper from '../';
+import Button from '../../../Elements/Button/Button';
+import { LinguiContainer } from '../../../utils/LinguiContainer';
+import { useStepper } from '../hooks/useStepper';
+var items = [
+    {
+        title: 'Scan product or package',
+        component: function (_a) {
+            var handleGoToNextStep = _a.handleGoToNextStep;
+            return (_jsxs("div", { children: ["Scan product ", _jsx(Button, { onClick: handleGoToNextStep, children: "Go next" })] }));
+        }
+    },
+    {
+        title: 'Measurement',
+        component: function (_a) {
+            var handleGoToNextStep = _a.handleGoToNextStep;
+            return (_jsxs("div", { children: ["Measurement page ", _jsx(Button, { onClick: handleGoToNextStep, children: "Go next" })] }));
+        }
+    },
+    {
+        title: 'Logistic info',
+        component: function (_a) {
+            var handleGoToNextStep = _a.handleGoToNextStep;
+            return (_jsxs("div", { children: ["Logistic info ", _jsx(Button, { onClick: handleGoToNextStep, children: "Go next" })] }));
+        }
+    },
+    {
+        title: 'Color',
+        component: function (_a) {
+            var handleGoToNextStep = _a.handleGoToNextStep;
+            return (_jsxs("div", { children: ["Select color ", _jsx(Button, { onClick: handleGoToNextStep, children: "Finish" })] }));
+        }
+    }
+];
+var iconItems = [
+    {
+        title: 'Order created',
+        icon: 'peopleCarry',
+        completed: true
+    },
+    {
+        title: 'Processed in stock',
+        icon: 'boxRamp',
+    },
+    {
+        title: 'Log Processed in stock',
+        icon: 'flatBox'
+    },
+    {
+        title: 'PPL parcelshop',
+        icon: 'truck'
+    },
+    {
+        title: 'Delivered',
+        icon: 'circleCheck'
+    }
+];
+var completedItems = items.map(function (item) { return (__assign(__assign({}, item), { completed: true })); });
+var meta = {
+    title: 'Blocks/Stepper',
+    tags: ['autodocs']
+};
+export default meta;
+export var Default = function () {
+    var _a = useStepper({ totalSteps: items.length }), activeStep = _a.activeStep, handleChangeStep = _a.handleChangeStep, handleGoToNextStep = _a.handleGoToNextStep;
+    return (_jsx(LinguiContainer, { children: _jsx(Stepper, { items: items, activeStep: activeStep, handleChangeStep: handleChangeStep, handleGoToNextStep: handleGoToNextStep }) }));
+};
+export var WithIcons = function () {
+    return (_jsx(LinguiContainer, { children: _jsx(Stepper, { items: iconItems, activeStep: 1, hasStepNumbering: false }) }));
+};
+export var AllStepsCompleted = function () {
+    var _a = useStepper({ totalSteps: completedItems.length }), activeStep = _a.activeStep, handleChangeStep = _a.handleChangeStep, handleGoToNextStep = _a.handleGoToNextStep;
+    return (_jsx(LinguiContainer, { children: _jsx(Stepper, { items: completedItems, activeStep: activeStep, handleChangeStep: handleChangeStep, handleGoToNextStep: handleGoToNextStep }) }));
+};

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

package/ui/Blocks/Stepper/styles.js

@@ -1,25 +1,14 @@
-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 };
+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;

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

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

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

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

package/ui/Blocks/Table/Table.js

@@ -1,13 +1,6 @@
-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)) })] });
+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)); }) })] }));
 };
-//#endregion
-export { Table };

package/ui/Blocks/Table/index.js

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

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

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

package/ui/Blocks/Table/stories/Table.stories.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Table } from '../';
+var meta = {
+    title: 'Blocks/Table',
+    component: Table,
+    tags: ['autodocs'],
+    argTypes: {}
+};
+export default meta;
+var columnDefinitions = [
+    { name: 'name', title: 'Name' },
+    { name: 'surname', title: 'Surname' },
+    { name: 'age', title: 'Age' }
+];
+var data = [
+    { id: 'id1', name: 'Fred', surname: 'Borow', age: 15 },
+    { id: 'id2', name: 'Karl', surname: 'Boxer', age: 25 },
+    { id: 'id3', name: 'Igor', surname: 'Laryngtown', age: 35 },
+];
+export var Default = function () { return (_jsx(Table, { columnDefinitions: columnDefinitions, data: data, onRowClick: function (dataRow) { return console.log(dataRow); } })); };

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

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

package/ui/Blocks/Tabs/TabContent.js

@@ -1,9 +1,6 @@
-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 };
+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 }));
+};

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

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