@mailstep/design-system 0.6.55 → 0.6.57-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.6.55",
+  "version": "0.6.57-beta.1",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

package/ui/Blocks/CommonGrid/components/ManageColumnForm/components/ActionRow.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { ColumnConfig, ColumnDefinition } from '../../../types';
 import { DraggableProps, DraggableProvidedDragHandleProps } from 'react-beautiful-dnd';
+import { ColumnConfig, ColumnDefinition } from '../../../types';
 type ActionRowProps = {
     column: ColumnDefinition;
     columnsConfigValues: string[] | undefined;
@@ -12,5 +12,5 @@ type ActionRowProps = {
     draggableProps?: DraggableProps | any;
     dragHandleProps?: DraggableProvidedDragHandleProps | null;
 };
-export declare const ActionRow: ({ column, columnsConfigValues, setColumnsConfigOptions, searchedValue, innerRef, draggableProps, dragHandleProps, }: ActionRowProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ActionRow: ({ column, columnsConfigValues, setColumnsConfigOptions, searchedValue, innerRef, draggableProps, dragHandleProps }: ActionRowProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/ui/Blocks/CommonGrid/components/ManageColumnForm/components/ActionRow.js

@@ -15,13 +15,13 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo, useState } from 'react';
-import { x, th } from '@xstyled/styled-components';
+import { isObject } from 'lodash';
 import styled from 'styled-components';
-import Toggle from '../../../../../Elements/Toggle/Toggle';
 import { Group } from '../../../../../Elements/Icon/icons/Group';
-import { isObject } from 'lodash';
+import Toggle from '../../../../../Elements/Toggle/Toggle';
 import { H6 } from '../../../../../Elements/Typography/Typography';
 import { i18n } from '@lingui/core';
+import { x, th } from '@xstyled/styled-components';
 var RowLayout = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: ", ";\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px;\n  height: 52px;\n  background-color: white;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  margin-bottom: 15px;\n"], ["\n  display: ", ";\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px;\n  height: 52px;\n  background-color: white;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  margin-bottom: 15px;\n"])), function (_a) {
     var $isVisible = _a.$isVisible;
     return ($isVisible ? 'flex' : 'none');
@@ -31,10 +31,11 @@ export var ActionRow = function (_a) {
     var column = _a.column, columnsConfigValues = _a.columnsConfigValues, setColumnsConfigOptions = _a.setColumnsConfigOptions, searchedValue = _a.searchedValue, innerRef = _a.innerRef, draggableProps = _a.draggableProps, dragHandleProps = _a.dragHandleProps;
     var _g = useState((_b = columnsConfigValues === null || columnsConfigValues === void 0 ? void 0 : columnsConfigValues.includes(column.name)) !== null && _b !== void 0 ? _b : false), isSelected = _g[0], setIsSelected = _g[1];
     var style = useMemo(function () { return (__assign({}, draggableProps === null || draggableProps === void 0 ? void 0 : draggableProps.style)); }, [draggableProps]);
-    var translatedValue = isObject(column === null || column === void 0 ? void 0 : column.title) &&
+    var translatedValue = (isObject(column === null || column === void 0 ? void 0 : column.title) &&
         'props' in column.title &&
         ((_c = column.title) === null || _c === void 0 ? void 0 : _c.props) &&
-        i18n._({ id: (_e = (_d = column.title) === null || _d === void 0 ? void 0 : _d.props) === null || _e === void 0 ? void 0 : _e.id, message: (_f = column.title) === null || _f === void 0 ? void 0 : _f.props.message });
+        i18n._({ id: (_e = (_d = column.title) === null || _d === void 0 ? void 0 : _d.props) === null || _e === void 0 ? void 0 : _e.id, message: (_f = column.title) === null || _f === void 0 ? void 0 : _f.props.message })) ||
+        (column === null || column === void 0 ? void 0 : column.title);
     var isVisible = translatedValue && translatedValue.toLocaleLowerCase().includes(searchedValue.toLocaleLowerCase()) && !column.alwaysOn;
     var handleToggleChange = useCallback(function () {
         setColumnsConfigOptions(function (prevOptions) {

package/ui/Blocks/CommonGrid/hooks/useManageColumn.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { DropResult } from 'react-beautiful-dnd';
-import { CommonGridProps, GridActionsType, GridSelectorsType } from '../types';
+import { CommonGridProps, GridActionsType, GridSelectorsType, ColumnDefinition } from '../types';
 type Props = {
     columns: CommonGridProps['columnsDefinitions'];
     gridActions: GridActionsType;
@@ -18,7 +18,7 @@ declare const useManageColumn: ({ columns, gridSelectors, gridActions, onClose }
     resetColumnConfig: () => void;
     handleDragEnd: (isManageModal?: boolean) => (item: DropResult) => void;
     onCloseForm: () => void;
-    displayColumnsDefinitions: import("../types").ColumnDefinition<string>[];
-    manageColumnsFormDefinitions: import("../types").ColumnDefinition<string>[];
+    displayColumnsDefinitions: ColumnDefinition<string>[];
+    manageColumnsFormDefinitions: ColumnDefinition<string>[];
 };
 export default useManageColumn;

package/ui/Blocks/CommonGrid/hooks/useManageColumn.js

@@ -60,11 +60,14 @@ var useManageColumn = function (_a) {
         setColumnsConfigOptions(columnConfig || {});
     }, [columnsOrderValue, onClose]);
     var getSortedColumns = useCallback(function (orderValues, isManageModal) {
-        return (!isManageModal ? columns.filter(function (column) { return isColumnOn(column, columnsConfigOptions); }) : columns).toSorted(function (col1, col2) {
+        var list = !isManageModal ? columns.filter(function (column) { return isColumnOn(column, columnsConfigOptions); }) : columns;
+        var sortFunction = function (col1, col2) {
             var i = (orderValues || []).indexOf(col1.name);
             var j = (orderValues || []).indexOf(col2.name);
             return i > j ? 1 : i < j ? -1 : 0;
-        });
+        };
+        var sortedList = __spreadArray([], list, true).sort(sortFunction);
+        return sortedList;
     }, [columnConfig, columnsConfigOptions, columns]);
     var displayColumnsDefinitions = useMemo(function () { return getSortedColumns(columnsOrderValue, false); }, [columnsOrderValue, columns, columnsConfigOptions, getSortedColumns]);
     var manageColumnsFormDefinitions = useMemo(function () { return getSortedColumns(updatedColumnsOrder, true); }, [updatedColumnsOrder]);

package/ui/Blocks/SideMenu/styles.js

@@ -139,7 +139,7 @@ export var TooltipWrap = styled.div(templateObject_16 || (templateObject_16 = __
     var $lightMode = _a.$lightMode;
     return ($lightMode ? th.color('red20') : th.color('blue2'));
 });
-export var OverflowWithEllipsis = styled.span(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  max-width: 140px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"], ["\n  max-width: 140px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
+export var OverflowWithEllipsis = styled.span(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  max-width: 140px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"], ["\n  max-width: 140px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
 export var TopLevelWrap = styled.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  background-color: ", ";\n  border-right: 1px solid ", ";\n  height: -webkit-fill-available;\n  transition: width 0.5s ease;\n  width: ", ";\n\n  z-index: 5;\n  position: absolute;\n  top: ", ";\n  height: ", ";\n\n  display: flex;\n  flex-direction: column;\n\n  @media (min-width: 1024px) {\n    top: inherit;\n    z-index: 2;\n  }\n"], ["\n  background-color: ", ";\n  border-right: 1px solid ", ";\n  height: -webkit-fill-available;\n  transition: width 0.5s ease;\n  width: ", ";\n\n  z-index: 5;\n  position: absolute;\n  top: ", ";\n  height: ", ";\n\n  display: flex;\n  flex-direction: column;\n\n  @media (min-width: 1024px) {\n    top: inherit;\n    z-index: 2;\n  }\n"])), function (_a) {
     var lightMode = _a.lightMode;
     return (lightMode ? 'white' : th('colors.blue3'));

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

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

package/ui/Blocks/Stepper/Stepper.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { StepItem } from './components/StepItem';
+import { Container, ItemsWrapper } from './styles';
+export var Stepper = function (_a) {
+    var items = _a.items, activeStep = _a.activeStep, handleChangeStep = _a.handleChangeStep;
+    if (!(items === null || items === void 0 ? void 0 : items.length))
+        return null;
+    var Component = useMemo(function () { return items[activeStep].component; }, [items, activeStep]);
+    return (_jsxs(Container, { children: [_jsx(ItemsWrapper, { children: items.map(function (_a, index) {
+                    var title = _a.title, disabled = _a.disabled, completed = _a.completed;
+                    return (_jsx(StepItem, { onClick: handleChangeStep(index), title: title, index: index, activeStep: activeStep, disabled: disabled, completed: completed }, title));
+                }) }), _jsx(Component, { handleGoToNextStep: handleChangeStep(activeStep + 1) })] }));
+};

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

@@ -0,0 +1,11 @@
+import { type FC } from 'react';
+type StepItemProps = {
+    onClick: () => void;
+    title: string;
+    index: number;
+    activeStep: number;
+    disabled?: boolean;
+    completed?: boolean;
+};
+export declare const StepItem: FC<StepItemProps>;
+export {};

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Icon from '../../../../Elements/Icon/Icon';
+import { Paragraph2, H7 } from '../../../../Elements/Typography/Typography';
+import { Trans } from '@lingui/react';
+import { x } from '@xstyled/styled-components';
+import isBoolean from 'lodash/isBoolean';
+import { Line, StepItemContainer, StepNumber, ContentWrapper, CompletedStep } from './styles';
+export var StepItem = function (_a) {
+    var title = _a.title, index = _a.index, disabled = _a.disabled, activeStep = _a.activeStep, completed = _a.completed, onClick = _a.onClick;
+    var isActiveStep = index === activeStep;
+    var isCompletedStep = isBoolean(completed) ? completed : index < activeStep;
+    return (_jsxs(StepItemContainer, { onClick: !disabled && isCompletedStep ? onClick : undefined, isActiveStep: isActiveStep, isDisabled: disabled, children: [_jsx(Line, { isActiveStep: isActiveStep, isCompletedStep: isCompletedStep }), _jsxs(ContentWrapper, { children: [isCompletedStep ? (_jsx(CompletedStep, { children: _jsx(Icon, { icon: "check", size: "12px" }) })) : (_jsx(StepNumber, { isActiveStep: isActiveStep, children: index + 1 })), _jsxs("div", { children: [_jsx(x.span, { textTransform: "uppercase", children: _jsxs(H7, { color: "gray1", variant: "semiBold", mt: 0, mb: "4px", children: [_jsx(Trans, { id: "step", message: "Step" }), ": ", index + 1] }) }), _jsx(Paragraph2, { variant: "medium", children: title })] })] })] }));
+};

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

@@ -0,0 +1,13 @@
+export declare const StepItemContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+    isActiveStep: boolean;
+    isDisabled?: boolean | undefined;
+}, never>;
+export declare const Line: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+    isActiveStep: boolean;
+    isCompletedStep: boolean;
+}, never>;
+export declare const StepNumber: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+    isActiveStep: boolean;
+}, never>;
+export declare const ContentWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const CompletedStep: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;

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

@@ -0,0 +1,33 @@
+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 StepItemContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 10px;\n  width: 240px;\n  padding: 24px;\n  background-color: ", ";\n  cursor: ", ";\n"], ["\n  border-radius: 10px;\n  width: 240px;\n  padding: 24px;\n  background-color: ", ";\n  cursor: ", ";\n"])), function (_a) {
+    var isActiveStep = _a.isActiveStep;
+    return (isActiveStep ? th.color('bgLightGray1') : 'transparent');
+}, function (_a) {
+    var isDisabled = _a.isDisabled;
+    return (isDisabled ? 'not-allowed' : 'pointer');
+});
+export var Line = styled.div(templateObject_2 || (templateObject_2 = __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 StepNumber = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-size: 16px;\n  font-weight: 600;\n  margin-bottom: 16px;\n  color: ", ";\n  border: 2px solid ", ";\n  border-radius: 50%;\n  height: 36px;\n  width: 36px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  ", "\n"], ["\n  font-size: 16px;\n  font-weight: 600;\n  margin-bottom: 16px;\n  color: ", ";\n  border: 2px solid ", ";\n  border-radius: 50%;\n  height: 36px;\n  width: 36px;\n  display: flex;\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 isActiveStep = _a.isActiveStep;
+    return (isActiveStep ? th.color('red1') : th.color('lightGray6'));
+}, function (_a) {
+    var isActiveStep = _a.isActiveStep;
+    return isActiveStep && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      box-shadow: 0 0 0 4px ", ";\n    "], ["\n      box-shadow: 0 0 0 4px ", ";\n    "])), th.color('red20'));
+});
+export var ContentWrapper = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  column-gap: 16px;\n"], ["\n  display: flex;\n  column-gap: 16px;\n"])));
+export var CompletedStep = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  border-radius: 50%;\n  border: 8px solid ", ";\n  color: ", ";\n  height: 36px;\n  width: 36px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"], ["\n  border-radius: 50%;\n  border: 8px solid ", ";\n  color: ", ";\n  height: 36px;\n  width: 36px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])), th.color('red1'), th.color('red1'));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/ui/Blocks/Stepper/hooks/useStepper.d.ts

@@ -0,0 +1,6 @@
+type HookType = () => {
+    activeStep: number;
+    handleChangeStep: (step: number) => () => void;
+};
+export declare const useStepper: HookType;
+export {};

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

@@ -0,0 +1,8 @@
+import { useCallback, useState } from 'react';
+export var useStepper = function () {
+    var _a = useState(0), activeStep = _a[0], setActiveStep = _a[1];
+    var handleChangeStep = useCallback(function (step) { return function () {
+        setActiveStep(step);
+    }; }, []);
+    return { activeStep: activeStep, handleChangeStep: handleChangeStep };
+};

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

@@ -0,0 +1,3 @@
+export { Stepper as default } from './Stepper';
+export { useStepper } from './hooks/useStepper';
+export type { StepperItem, StepperPassedDownProps } from './types';

package/ui/Blocks/Stepper/index.js

@@ -0,0 +1,2 @@
+export { Stepper as default } from './Stepper';
+export { useStepper } from './hooks/useStepper';

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

@@ -0,0 +1,7 @@
+declare const meta: {
+    title: string;
+    tags: string[];
+};
+export default meta;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;
+export declare const AllStepsCompleted: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,60 @@
+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',
+        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 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(), activeStep = _a.activeStep, handleChangeStep = _a.handleChangeStep;
+    return (_jsx(LinguiContainer, { children: _jsx(Stepper, { items: items, activeStep: activeStep, handleChangeStep: handleChangeStep }) }));
+};
+export var AllStepsCompleted = function () {
+    var _a = useStepper(), activeStep = _a.activeStep, handleChangeStep = _a.handleChangeStep;
+    return (_jsx(LinguiContainer, { children: _jsx(Stepper, { items: completedItems, activeStep: activeStep, handleChangeStep: handleChangeStep }) }));
+};

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

@@ -0,0 +1,2 @@
+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, {}, never>;

package/ui/Blocks/Stepper/styles.js

@@ -0,0 +1,8 @@
+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"], ["\n  display: flex;\n  flex-direction: column;\n  height: fit-content;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n"])));
+export var ItemsWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  margin-bottom: 36px;\n"], ["\n  display: flex;\n  margin-bottom: 36px;\n"])));
+var templateObject_1, templateObject_2;

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

@@ -0,0 +1,15 @@
+import { FC } from 'react';
+export type StepperProps = {
+    items: StepperItem[];
+    activeStep: number;
+    handleChangeStep: (step: number) => () => void;
+};
+export type StepperPassedDownProps = {
+    handleGoToNextStep: () => void;
+};
+export type StepperItem = {
+    title: string;
+    completed?: boolean;
+    disabled?: boolean;
+    component: FC<StepperPassedDownProps>;
+};

package/ui/Blocks/Stepper/types.js

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

package/ui/Elements/Typography/Typography.js

@@ -28,7 +28,7 @@ export var Text = function (_a) {
 };
 var BaseHeading = function (_a) {
     var _b = _a.fontFamily, fontFamily = _b === void 0 ? 'heading' : _b, _c = _a.mb, mb = _c === void 0 ? 2 : _c, _d = _a.mt, mt = _d === void 0 ? 2 : _d, props = __rest(_a, ["fontFamily", "mb", "mt"]);
-    return (_jsx(Text, __assign({ fontFamily: fontFamily, mt: mt, mb: mt }, props)));
+    return (_jsx(Text, __assign({ fontFamily: fontFamily, mt: mt, mb: mb }, props)));
 };
 // Paragraphs
 export var Paragraph1 = function (props) { return _jsx(Text, __assign({ fontSize: "18px" }, props)); };
@@ -43,4 +43,4 @@ export var H3 = function (props) { return _jsx(BaseHeading, __assign({ fontSize:
 export var H4 = function (props) { return _jsx(BaseHeading, __assign({ fontSize: "18px", as: "h4" }, props)); };
 export var H5 = function (props) { return _jsx(BaseHeading, __assign({ fontSize: "16px", as: "h5" }, props)); };
 export var H6 = function (props) { return _jsx(BaseHeading, __assign({ fontSize: "14px", as: "h6" }, props)); };
-export var H7 = function (props) { return _jsx(BaseHeading, __assign({ fontSize: "12x", as: "h7" }, props)); };
+export var H7 = function (props) { return _jsx(BaseHeading, __assign({ fontSize: "12px", as: "h6" }, props)); };

package/ui/index.d.ts

@@ -7,6 +7,7 @@ import LoginPage from './Blocks/LoginPage';
 import Modal from './Blocks/Modal';
 import Popover from './Blocks/Popover';
 import SideMenu from './Blocks/SideMenu';
+import Stepper from './Blocks/Stepper';
 import Tabs from './Blocks/Tabs';
 import Alert from './Elements/Alert';
 import Avatar from './Elements/Avatar';
@@ -43,7 +44,7 @@ import RadioButton from './Forms/RadioButton';
 import TextArea from './Forms/TextArea';
 import ThemeProvider from './ThemeProvider';
 import utils from './utils';
-export { DropdownSelect, DatePicker, CommonGrid, Popover, SingleSelect, MultiSelect, Select, Card, CornerDialog, ImageList, LightBox, Modal, Tabs, Alert, Avatar, Badge, BorderedBox, Button, Dropdown, ErrorMessage, Icon, Image, Label, Line, Link, Logo, Pagination, Portal, ProgressBar, SimpleLink, SpaceAround, Spinner, Tag, Toast, Toggle, Typography, Checkbox, Input, RadioButton, ThemeProvider, utils, TextArea, LoginPage, LanguageSwitch, SideMenu };
+export { DropdownSelect, DatePicker, CommonGrid, Popover, SingleSelect, MultiSelect, Select, Card, CornerDialog, ImageList, LightBox, Modal, Tabs, Alert, Avatar, Badge, BorderedBox, Button, Dropdown, ErrorMessage, Icon, Image, Label, Line, Link, Logo, Pagination, Portal, ProgressBar, SimpleLink, SpaceAround, Spinner, Tag, Toast, Toggle, Typography, Checkbox, Input, RadioButton, ThemeProvider, utils, TextArea, LoginPage, LanguageSwitch, SideMenu, Stepper };
 export * from './Blocks/CornerDialog';
 export * from './Blocks/ImageList';
 export * from './Blocks/LightBox';
@@ -89,3 +90,4 @@ export * from './Forms/TextArea';
 export * from './Blocks/LoginPage';
 export * from './Blocks/LanguageSwitch';
 export * from './Blocks/SideMenu';
+export * from './Blocks/Stepper';