@mailstep/design-system 0.2.0-beta.0 → 0.2.0-beta.2

package/Blocks/Modal/hooks/useClickOutside.js

@@ -0,0 +1,30 @@
+import { useCallback, useEffect, useRef } from 'react';
+export var useClickOutside = function (_a) {
+    var onClose = _a.onClose, parentRef = _a.parentRef, _b = _a.ignoreClickOutside, ignoreClickOutside = _b === void 0 ? false : _b, _c = _a.closeCurrent, closeCurrent = _c === void 0 ? false : _c, _d = _a.allowScrollbarClick, allowScrollbarClick = _d === void 0 ? false : _d;
+    var elementRef = useRef(null);
+    var onCloseModal = !ignoreClickOutside ? onClose : undefined;
+    var handleClickOutside = useCallback(function (e) {
+        var _a;
+        var ignoreEvent = allowScrollbarClick && e.offsetX > e.target.clientWidth;
+        if (!ignoreEvent &&
+            elementRef.current &&
+            !elementRef.current.contains(e.target) &&
+            !((_a = parentRef === null || parentRef === void 0 ? void 0 : parentRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+            closeCurrent ? e.target.contains(elementRef.current) && (onCloseModal === null || onCloseModal === void 0 ? void 0 : onCloseModal()) : onCloseModal === null || onCloseModal === void 0 ? void 0 : onCloseModal();
+        }
+    }, [allowScrollbarClick, parentRef, closeCurrent, onCloseModal]);
+    var keyPress = useCallback(function (e) {
+        if (e.key === 'Escape') {
+            onCloseModal === null || onCloseModal === void 0 ? void 0 : onCloseModal();
+        }
+    }, [onCloseModal]);
+    useEffect(function () {
+        document.addEventListener('mousedown', handleClickOutside);
+        document.addEventListener('keydown', keyPress);
+        return function () {
+            document.removeEventListener('mousedown', handleClickOutside);
+            document.removeEventListener('keydown', keyPress);
+        };
+    }, [handleClickOutside, keyPress]);
+    return elementRef;
+};

package/Blocks/Modal/hooks/useModal.d.ts

@@ -0,0 +1,2 @@
+import { ControlProps, ModalData } from '../types';
+export declare const useModal: <TData = ModalData>(initialState?: boolean) => ControlProps<TData>;

package/Blocks/Modal/hooks/useModal.js

@@ -0,0 +1,15 @@
+import { useCallback, useState } from 'react';
+export var useModal = function (initialState) {
+    if (initialState === void 0) { initialState = false; }
+    var _a = useState(initialState), isOpen = _a[0], setIsOpen = _a[1];
+    var _b = useState(), data = _b[0], setData = _b[1];
+    var onClose = useCallback(function () {
+        setIsOpen(false);
+        setData(undefined);
+    }, []);
+    var onOpen = useCallback(function (data) {
+        data && setData(data);
+        setIsOpen(true);
+    }, []);
+    return { isOpen: isOpen, onClose: onClose, onOpen: onOpen, data: data };
+};

package/Blocks/Modal/index.d.ts

@@ -0,0 +1,5 @@
+import { Modal } from './Modal';
+export { useModal } from './hooks/useModal';
+export { useClickOutside } from './hooks/useClickOutside';
+export type { ControlProps, ModalProps, ModalData } from './types';
+export default Modal;

package/Blocks/Modal/index.js

@@ -0,0 +1,4 @@
+import { Modal } from './Modal';
+export { useModal } from './hooks/useModal';
+export { useClickOutside } from './hooks/useClickOutside';
+export default Modal;

package/Blocks/Modal/stories/Modal.stories.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("react").FC<import("..").ModalProps>;
+    tags: string[];
+    argTypes: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const ModalWithCloseAndConfirmBtns: Story;
+export declare const MobileNotificationModal: Story;
+export declare const ModalWithIcon: Story;
+export declare const ModalLoading: Story;
+export declare const ModalWithWhiteBg: Story;
+export declare const ModalWithoutCloseIcon: Story;
+export declare const ModalWithoutHeader: Story;
+export declare const ModalWithoutFooter: Story;
+export declare const ModalWithoutHeaderAndFooter: Story;
+export declare const ModalWithCustomLabels: Story;
+export declare const ModalWideWidth: Story;
+export declare const ModalMediumLargeWidth: Story;
+export declare const ModalMediumWidth: Story;
+export declare const ModalAutoWidth: Story;
+export declare const ModalWithDisabledConfirm: Story;
+export declare const ModalWithCustomOverlayColor: Story;

package/Blocks/Modal/stories/Modal.stories.js

@@ -0,0 +1,146 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { Modal } from '../Modal';
+var meta = {
+    title: 'Blocks/Modal',
+    component: Modal,
+    tags: ['autodocs'],
+    argTypes: {},
+};
+export default meta;
+export var ModalWithCloseAndConfirmBtns = {
+    args: {
+        children: _jsx(_Fragment, { children: "Modal Content with Cancel and Submit buttons" }),
+        title: 'Modal title',
+        width: 'narrow',
+        onClose: function () { return console.log('Close'); },
+        onConfirm: function () { return console.log('Submit'); },
+    },
+};
+export var MobileNotificationModal = {
+    args: {
+        children: (_jsx(_Fragment, { children: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur explicabo harum, inventore natus qui repellendus suscipit vitae. Alias aliquam earum et ipsa labore, laboriosam maxime numquam odio recusandae, repellat, voluptas." })),
+        title: 'Poznamka',
+        width: 'narrow',
+        withCloseIcon: false,
+        onClose: function () { return console.log('Close'); },
+        onConfirm: undefined,
+    },
+};
+export var ModalWithIcon = {
+    args: {
+        children: _jsx(_Fragment, { children: "Modal with icon" }),
+        title: 'Modal title',
+        width: 'narrow',
+        titleIcon: 'info',
+    },
+};
+export var ModalLoading = {
+    args: {
+        children: _jsx(_Fragment, { children: "Modal with loading" }),
+        title: 'Modal title',
+        width: 'narrow',
+        isLoading: true,
+    },
+};
+export var ModalWithWhiteBg = {
+    args: {
+        children: _jsx(_Fragment, { children: "Modal with white background" }),
+        title: 'Modal title',
+        width: 'narrow',
+        whiteBg: true,
+    },
+};
+export var ModalWithoutCloseIcon = {
+    args: {
+        children: _jsx(_Fragment, { children: "Modal without close icon" }),
+        title: 'Modal title',
+        width: 'narrow',
+        withCloseIcon: false,
+    },
+};
+export var ModalWithoutHeader = {
+    args: {
+        children: _jsx(_Fragment, { children: "Modal without header" }),
+        title: 'Modal title',
+        width: 'narrow',
+        hasHeader: false,
+    },
+};
+export var ModalWithoutFooter = {
+    args: {
+        children: _jsx(_Fragment, { children: "Modal without footer" }),
+        title: 'Modal title',
+        width: 'narrow',
+        hasFooter: false,
+        onClose: function () { return console.log('Close'); },
+    },
+};
+export var ModalWithoutHeaderAndFooter = {
+    args: {
+        children: _jsx(_Fragment, { children: "Modal without header and footer" }),
+        title: 'Modal title',
+        width: 'narrow',
+        hasHeader: false,
+        hasFooter: false,
+        onClose: function () { return console.log('Close'); },
+    },
+};
+export var ModalWithCustomLabels = {
+    args: {
+        children: _jsx(_Fragment, { children: "Modal with custom labels" }),
+        title: 'Modal title',
+        width: 'narrow',
+        onClose: function () { return console.log('Close'); },
+        onConfirm: function () { return console.log('Submit'); },
+        confirmLabel: 'Custom confirm',
+        cancelLabel: 'Custom cancel',
+    },
+};
+export var ModalWideWidth = {
+    args: {
+        children: _jsx(_Fragment, { children: "Modal with wide width" }),
+        title: 'Modal title',
+        width: 'wide',
+    },
+};
+export var ModalMediumLargeWidth = {
+    args: {
+        children: _jsx(_Fragment, { children: "Modal with mediumLarge width" }),
+        title: 'Modal title',
+        width: 'mediumLarge',
+    },
+};
+export var ModalMediumWidth = {
+    args: {
+        children: _jsx(_Fragment, { children: "Modal with medium width" }),
+        title: 'Modal title',
+        width: 'medium',
+    },
+};
+export var ModalAutoWidth = {
+    args: {
+        children: _jsx(_Fragment, { children: "Modal with auto width" }),
+        title: 'Modal title',
+        width: 'auto',
+    },
+};
+export var ModalWithDisabledConfirm = {
+    args: {
+        children: _jsx(_Fragment, { children: "Modal with disabled confirm" }),
+        title: 'Modal title',
+        width: 'narrow',
+        onClose: function () { return console.log('Close'); },
+        onConfirm: function () { return console.log('Submit'); },
+        isConfirmDisabled: true,
+    },
+};
+export var ModalWithCustomOverlayColor = {
+    args: {
+        children: _jsx(_Fragment, { children: "Modal with custom overlay color" }),
+        title: 'Modal title',
+        width: 'narrow',
+        onClose: function () { return console.log('Close Modal with custom overlay color'); },
+        onConfirm: function () { return console.log('Submit'); },
+        overlayColor: 'red1',
+    },
+};

package/Blocks/Modal/styles.d.ts

@@ -0,0 +1,22 @@
+export declare const DialogOverlay: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+    backgroundColor?: string | undefined;
+}, never>;
+export declare const DialogWindow: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+    $whiteBg?: boolean | undefined;
+    $minWidth?: string | undefined;
+    $minHeight?: string | undefined;
+    $maxWidth?: string | undefined;
+    $maxHeight?: string | undefined;
+    $mobileFullscreen: boolean;
+}, never>;
+export declare const HeaderContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+    topSpace: string;
+}, never>;
+export declare const ContentContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+    topSpace: string;
+    $mobileFullscreen: boolean;
+}, never>;
+export declare const TitleContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const H4: import("styled-components").StyledComponent<"h4", import("@xstyled/system").Theme, {}, never>;
+export declare const ButtonsContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const CloseButton: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;

package/Blocks/Modal/styles.js

@@ -0,0 +1,45 @@
+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, { th } from '@xstyled/styled-components';
+import { createRgba } from '../../utils';
+export var DialogOverlay = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: fixed; /* Stay in place */\n  z-index: 5;\n  left: 0;\n  top: 0;\n  width: 100%; /* Full width */\n  height: 100%; /* Full height */\n  overflow: auto; /* Enable scroll if needed */\n  background-color: ", ";\n  text-align: center;\n  @media print {\n    position: absolute !important;\n    left: 0 !important;\n    top: 0 !important;\n    height: auto !important;\n    visibility: hidden;\n  }\n"], ["\n  position: fixed; /* Stay in place */\n  z-index: 5;\n  left: 0;\n  top: 0;\n  width: 100%; /* Full width */\n  height: 100%; /* Full height */\n  overflow: auto; /* Enable scroll if needed */\n  background-color: ", ";\n  text-align: center;\n  @media print {\n    position: absolute !important;\n    left: 0 !important;\n    top: 0 !important;\n    height: auto !important;\n    visibility: hidden;\n  }\n"])), function (_a) {
+    var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? 'blue2' : _b;
+    return createRgba(backgroundColor, 0.6);
+});
+export var DialogWindow = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  margin: 100px auto 0 auto; /* Location of the box */\n  padding: 0;\n  border: 0;\n  border-radius: 1rem;\n  box-shadow: dialogShadow;\n  min-width: ", ";\n  max-width: ", ";\n  min-height: ", ";\n  max-height: ", ";\n  display: inline-block;\n  position: relative;\n  text-align: left;\n  @media print {\n    background-color: #fff;\n    margin: 0;\n    visibility: visible;\n    overflow: visible;\n    box-shadow: none;\n    max-width: 100%;\n  }\n\n  @media (max-width: 576px) {\n    margin: 20% auto 50px auto;\n    ", "\n  }\n"], ["\n  background-color: ", ";\n  margin: 100px auto 0 auto; /* Location of the box */\n  padding: 0;\n  border: 0;\n  border-radius: 1rem;\n  box-shadow: dialogShadow;\n  min-width: ", ";\n  max-width: ", ";\n  min-height: ", ";\n  max-height: ", ";\n  display: inline-block;\n  position: relative;\n  text-align: left;\n  @media print {\n    background-color: #fff;\n    margin: 0;\n    visibility: visible;\n    overflow: visible;\n    box-shadow: none;\n    max-width: 100%;\n  }\n\n  @media (max-width: 576px) {\n    margin: 20% auto 50px auto;\n    ", "\n  }\n"])), function (_a) {
+    var $whiteBg = _a.$whiteBg;
+    return ($whiteBg ? th.color('white') : '#fefefe');
+}, function (_a) {
+    var $minWidth = _a.$minWidth;
+    return $minWidth || '10%';
+}, function (_a) {
+    var $maxWidth = _a.$maxWidth;
+    return $maxWidth || 'calc(100% - 32px)';
+}, function (_a) {
+    var $minHeight = _a.$minHeight;
+    return $minHeight || 'auto';
+}, function (_a) {
+    var $maxHeight = _a.$maxHeight;
+    return $maxHeight || 'auto';
+}, function (_a) {
+    var $mobileFullscreen = _a.$mobileFullscreen;
+    return $mobileFullscreen && "border-radius: 0; max-width: 100% !important;";
+});
+export var HeaderContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  padding: 30px;\n  padding-bottom: ", ";\n\n  @media (max-width: 576px) {\n    padding: 18px;\n    border-bottom: 1px solid ", ";\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n  padding: 30px;\n  padding-bottom: ", ";\n\n  @media (max-width: 576px) {\n    padding: 18px;\n    border-bottom: 1px solid ", ";\n  }\n"])), function (_a) {
+    var topSpace = _a.topSpace;
+    return topSpace;
+}, th.color('lightGray6'));
+export var ContentContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding: 30px;\n  padding-top: ", ";\n\n  @media (max-width: 576px) {\n    padding: ", ";\n    font-size: 16px;\n    line-height: 1.4;\n  }\n  \n  \n"], ["\n  padding: 30px;\n  padding-top: ", ";\n\n  @media (max-width: 576px) {\n    padding: ", ";\n    font-size: 16px;\n    line-height: 1.4;\n  }\n  \n  \n"])), function (_a) {
+    var topSpace = _a.topSpace;
+    return topSpace;
+}, function (_a) {
+    var $mobileFullscreen = _a.$mobileFullscreen;
+    return $mobileFullscreen ? '0' : '18px';
+});
+export var TitleContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: row;\n  align-items: center;\n  > div:first-of-type {\n    margin-right: 0.5em;\n    display: block;\n  }\n\n  .icon {\n    font-size: 24px;\n    margin-right: 15px;\n    display: flex;\n\n    @media (max-width: 576px) {\n      font-size: 18px;\n      margin-right: 12px;\n    }\n  }\n"], ["\n  display: flex;\n  flex-flow: row;\n  align-items: center;\n  > div:first-of-type {\n    margin-right: 0.5em;\n    display: block;\n  }\n\n  .icon {\n    font-size: 24px;\n    margin-right: 15px;\n    display: flex;\n\n    @media (max-width: 576px) {\n      font-size: 18px;\n      margin-right: 12px;\n    }\n  }\n"])));
+export var H4 = styled.h4(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  color: typoPrimary;\n  margin: 0;\n  font-size: 24px;\n  line-height: 28px;\n  font-weight: 700;\n\n  @media (max-width: 576px) {\n    font-size: 18px;\n    line-height: 18px;\n  }\n"], ["\n  color: typoPrimary;\n  margin: 0;\n  font-size: 24px;\n  line-height: 28px;\n  font-weight: 700;\n\n  @media (max-width: 576px) {\n    font-size: 18px;\n    line-height: 18px;\n  }\n"])));
+export var ButtonsContainer = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  padding: 1.5rem;\n  text-align: right;\n  > * {\n    margin: 0 0.5em;\n  }\n\n  @media (max-width: 576px) {\n    display: flex;\n    justify-content: space-around;\n    padding: 32px 18px 18px;\n\n    > * {\n      margin: 0;\n    }\n  }\n"], ["\n  padding: 1.5rem;\n  text-align: right;\n  > * {\n    margin: 0 0.5em;\n  }\n\n  @media (max-width: 576px) {\n    display: flex;\n    justify-content: space-around;\n    padding: 32px 18px 18px;\n\n    > * {\n      margin: 0;\n    }\n  }\n"])));
+export var CloseButton = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  z-index: 1;\n  top: 32px;\n  right: 24px;\n\n  @media (max-width: 576px) {\n    padding: 0;\n    width: 32px;\n    height: 32px;\n    background-color: bgLightGray1;\n    border-radius: 50%;\n    top: 12px;\n    right: 12px;\n  }\n"], ["\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  z-index: 1;\n  top: 32px;\n  right: 24px;\n\n  @media (max-width: 576px) {\n    padding: 0;\n    width: 32px;\n    height: 32px;\n    background-color: bgLightGray1;\n    border-radius: 50%;\n    top: 12px;\n    right: 12px;\n  }\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/Blocks/Modal/types.d.ts

@@ -0,0 +1,45 @@
+import { MutableRefObject } from 'react';
+export type TopSpace = 'default' | 'medium';
+export type Width = 'wide' | 'mediumLarge' | 'medium' | 'narrow' | 'auto';
+export interface ModalProps {
+    isShown?: boolean;
+    children: JSX.Element | JSX.Element[];
+    title?: JSX.Element | string;
+    titleIcon?: JSX.Element | string;
+    onConfirm?: (close: () => void) => void;
+    onCancel?: () => void;
+    onClose?: () => void;
+    confirmLabel?: JSX.Element | string;
+    cancelLabel?: JSX.Element | string;
+    isLoading?: boolean;
+    isConfirmDisabled?: boolean;
+    hasFooter?: boolean;
+    hasHeader?: boolean;
+    width?: Width;
+    whiteBg?: boolean;
+    miniCloseBtn?: boolean;
+    ignoreClickOutside?: boolean;
+    closeEverywhere?: boolean;
+    withCloseIcon?: boolean;
+    overlayColor?: string;
+    minWidth?: string;
+    minHeight?: string;
+    maxWidth?: string;
+    maxHeight?: string;
+    topSpace?: TopSpace;
+    mobileFullscreen?: boolean;
+}
+export type ModalData = Record<string, any>;
+export type ControlProps<T = ModalData> = {
+    isOpen: boolean;
+    onClose: () => void;
+    onOpen: (data?: T) => void;
+    data?: T;
+};
+export interface UseClickOutsideProps {
+    onClose?: () => void;
+    ignoreClickOutside?: boolean;
+    parentRef?: MutableRefObject<HTMLDivElement | null | undefined>;
+    closeCurrent?: boolean;
+    allowScrollbarClick?: boolean;
+}

package/Blocks/Modal/types.js

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

package/Blocks/Modal/utils.d.ts

@@ -0,0 +1,3 @@
+import { TopSpace, Width } from './types';
+export declare const widthMap: Record<Width, string>;
+export declare const topSpaceMap: Record<TopSpace, string>;

package/Blocks/Modal/utils.js

@@ -0,0 +1,11 @@
+export var widthMap = {
+    wide: '1450px',
+    mediumLarge: '1200px',
+    medium: '900px',
+    narrow: '600px',
+    auto: 'auto',
+};
+export var topSpaceMap = {
+    default: '30px',
+    medium: '15px',
+};

package/Blocks/Tabs/TabContent.d.ts

@@ -0,0 +1,2 @@
+import { TabContentProps } from './types';
+export declare const TabContent: ({ activeTab, value, children }: TabContentProps) => React.ReactNode | React.ReactNode[];

package/Blocks/Tabs/TabContent.js

@@ -0,0 +1,4 @@
+export var TabContent = function (_a) {
+    var activeTab = _a.activeTab, value = _a.value, children = _a.children;
+    return activeTab === value ? children : null;
+};

package/Blocks/Tabs/Tabs.d.ts

@@ -0,0 +1,2 @@
+import { TabsProps } from './types';
+export declare const Tabs: ({ tabsDefinition, activeTab, onTabSwitch }: TabsProps) => JSX.Element;

package/Blocks/Tabs/Tabs.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { RoundedWrap, StyledImageBox, Tab as StyledTab, StyledTabWrapper, TabPanel } from './styles';
+import { Text } from '../../Elements/Text';
+import { Icon } from '../../Elements/Icon';
+var Tab = function (_a) {
+    var tabDefinition = _a.tabDefinition, value = _a.value, isActive = _a.isActive, onTabSwitch = _a.onTabSwitch;
+    var icon = tabDefinition.icon, label = tabDefinition.label, badgeCount = tabDefinition.badgeCount;
+    var handleOnClick = useCallback(function () {
+        onTabSwitch(value);
+    }, [onTabSwitch, value]);
+    return (_jsx(StyledTabWrapper, { children: _jsxs(StyledTab, { onClick: handleOnClick, active: isActive, children: [icon && (_jsx(StyledImageBox, { children: _jsx(Icon, { icon: icon }) })), _jsx(Text, { children: label }), isActive && badgeCount && badgeCount > 0 && (_jsx(RoundedWrap, { children: _jsx(Text, { variant: "medium", children: badgeCount }) }))] }) }));
+};
+export var Tabs = function (_a) {
+    var tabsDefinition = _a.tabsDefinition, activeTab = _a.activeTab, onTabSwitch = _a.onTabSwitch;
+    return (_jsx(TabPanel, { children: tabsDefinition.map(function (item, index) {
+            return _jsx(Tab, { value: index, tabDefinition: item, isActive: index === activeTab, onTabSwitch: onTabSwitch }, index);
+        }) }));
+};

package/Blocks/Tabs/hooks/useTabs.d.ts

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

package/Blocks/Tabs/hooks/useTabs.js

@@ -0,0 +1,10 @@
+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 };
+};

package/Blocks/Tabs/index.d.ts

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

package/Blocks/Tabs/index.js

@@ -0,0 +1,4 @@
+import { Tabs } from './Tabs';
+export { Tabs } from './Tabs';
+export { useTabs } from './hooks/useTabs';
+export default Tabs;

package/Blocks/Tabs/stories/Tabs.stories.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ tabsDefinition, activeTab, onTabSwitch }: import("../types").TabsProps) => JSX.Element;
+    tags: string[];
+    argTypes: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const ActiveTabWithBadgeAndIcon: Story;
+export declare const ActiveTabWithBadge: Story;
+export declare const ActiveTabWithIcon: Story;

package/Blocks/Tabs/stories/Tabs.stories.js

@@ -0,0 +1,44 @@
+import { Tabs } from '../Tabs';
+var meta = {
+    title: 'Blocks/Tabs',
+    component: Tabs,
+    tags: ['autodocs'],
+    argTypes: {},
+};
+export default meta;
+var tabs = [
+    {
+        label: 'Main Tab',
+        icon: 'product',
+        badgeCount: 55,
+    },
+    {
+        label: 'Main Tab',
+        badgeCount: 55,
+    },
+    {
+        label: 'Side Tab',
+        icon: 'box',
+    },
+];
+export var ActiveTabWithBadgeAndIcon = {
+    args: {
+        tabsDefinition: tabs,
+        onTabSwitch: console.log,
+        activeTab: 0,
+    },
+};
+export var ActiveTabWithBadge = {
+    args: {
+        tabsDefinition: tabs,
+        onTabSwitch: console.log,
+        activeTab: 1,
+    },
+};
+export var ActiveTabWithIcon = {
+    args: {
+        tabsDefinition: tabs,
+        onTabSwitch: console.log,
+        activeTab: 2,
+    },
+};

package/Blocks/Tabs/styles.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const StyledImageBox: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color">) => import("react").ReactElement<any, "div">, import("@xstyled/system").Theme, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, "color">;
+export declare const StyledTabWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const RoundedWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const Tab: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+    active: boolean;
+}, never>;
+export declare const TabPanel: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;

package/Blocks/Tabs/styles.js

@@ -0,0 +1,15 @@
+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, x } from '@xstyled/styled-components';
+export var StyledImageBox = styled(x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-right: 1em;\n"], ["\n  margin-right: 1em;\n"])));
+export var StyledTabWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: baseline;\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: baseline;\n"])));
+export var RoundedWrap = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex !important;\n  justify-content: center;\n  align-items: center;\n  height: 23px;\n  background-color: ", ";\n  border-radius: 29px;\n  padding: 3px 10px;\n  margin-left: 8px;\n"], ["\n  display: flex !important;\n  justify-content: center;\n  align-items: center;\n  height: 23px;\n  background-color: ", ";\n  border-radius: 29px;\n  padding: 3px 10px;\n  margin-left: 8px;\n"])), th.color('lightGray7'));
+var activeTab = css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: ", ";\n  position: relative;\n  &:after {\n    content: '';\n    position: absolute;\n    bottom: 2;\n    left: 0;\n    right: 0;\n    background-color: ", ";\n    height: 4px;\n    border-radius: 6px 6px 0px 0px;\n  }\n  & > div {\n    display: inline;\n    color: ", ";\n  }\n"], ["\n  color: ", ";\n  position: relative;\n  &:after {\n    content: '';\n    position: absolute;\n    bottom: 2;\n    left: 0;\n    right: 0;\n    background-color: ", ";\n    height: 4px;\n    border-radius: 6px 6px 0px 0px;\n  }\n  & > div {\n    display: inline;\n    color: ", ";\n  }\n"])), th.color('red1'), th.color('red1'), th.color('typoPrimary'));
+export var Tab = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n  padding: 0.6rem;\n  transition: 200ms;\n  color: ", ";\n  font-weight: bold;\n  font-size: 14px;\n  height: 46px;\n  letter-spacing: 0.03em;\n  margin-top: 10px;\n  min-width: 120px;\n  & > div {\n    display: none;\n  }\n  &:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n\n  :hover {\n    color: ", ";\n  }\n\n  :active {\n    ", "\n  }\n\n  ", "\n"], ["\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n  padding: 0.6rem;\n  transition: 200ms;\n  color: ", ";\n  font-weight: bold;\n  font-size: 14px;\n  height: 46px;\n  letter-spacing: 0.03em;\n  margin-top: 10px;\n  min-width: 120px;\n  & > div {\n    display: none;\n  }\n  &:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n\n  :hover {\n    color: ", ";\n  }\n\n  :active {\n    ", "\n  }\n\n  ", "\n"])), th.color('gray'), th.color('typoPrimary'), activeTab, function (_a) {
+    var active = _a.active;
+    return (active ? activeTab : '');
+});
+export var TabPanel = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  min-height: 3rem;\n  display: flex;\n  align-items: flex-end;\n  overflow: auto;\n  width: fit-content;\n  position: relative;\n  &:after {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    background-color: ", ";\n    height: 2px;\n  }\n"], ["\n  min-height: 3rem;\n  display: flex;\n  align-items: flex-end;\n  overflow: auto;\n  width: fit-content;\n  position: relative;\n  &:after {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    background-color: ", ";\n    height: 2px;\n  }\n"])), th.color('bgLightGray1'));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/Blocks/Tabs/types.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+export type TabDefinition = {
+    label: string;
+    icon?: string;
+    badgeCount?: number;
+    default?: true;
+};
+export type TabsProps = {
+    tabsDefinition: TabDefinition[];
+    activeTab: number;
+    onTabSwitch: (tab: number) => void;
+};
+export type TabElementProps = {
+    tabDefinition: TabDefinition;
+    value: number;
+    isActive: boolean;
+    onTabSwitch: (tab: number) => void;
+};
+export type UseTabsHook = (tabDefinitions: TabDefinition[]) => {
+    activeTab: number;
+    onTabSwitch: (tab: number) => void;
+};
+export type TabContentProps = {
+    activeTab: number;
+    value: number;
+    children: React.ReactNode | React.ReactNode[];
+};

package/Blocks/Tabs/types.js

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

package/Elements/Alert/Alert.d.ts

@@ -0,0 +1,3 @@
+import { IAlert } from './types';
+declare const Alert: IAlert;
+export default Alert;

package/Elements/Alert/Alert.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { x, useTheme } from '@xstyled/styled-components';
+import { th } from '@xstyled/styled-components';
+import { Icon } from '../Icon';
+import { IconWrap, LinkWrapper, StyledAlert, VerticalSeparator, Text, Title, CloseBtn, ActionButton, Description } from './styles';
+var alertBackgroundColor = {
+    success: 'green10',
+    info: 'blue10',
+    warning: 'yellow10',
+    danger: 'red10',
+};
+var alertColorFill = {
+    success: 'successColor',
+    info: 'blue60',
+    warning: 'yellow70',
+    danger: 'dangerColor',
+};
+var alertIconMap = {
+    success: 'circleCheck',
+    info: 'info',
+    warning: 'circleTriangle',
+    danger: 'circleTriangle',
+};
+var Alert = function (props) {
+    var intent = props.intent, inline = props.inline, onClick = props.onClick, onClose = props.onClose, title = props.title, text = props.text, href = props.href, actionLabel = props.actionLabel, actionType = props.actionType, desc = props.desc, _a = props.closeAnywhere, closeAnywhere = _a === void 0 ? false : _a;
+    var theme = useTheme();
+    var bgColor = th.color(intent ? alertBackgroundColor[intent] : 'transparent')({ theme: theme });
+    var colorFill = th.color(intent ? alertColorFill[intent] : 'transparent')({ theme: theme });
+    var icon = intent && alertIconMap[intent];
+    return (_jsxs(StyledAlert, { "$bgColor": bgColor, "$colorFill": colorFill, "$inline": inline, onClick: closeAnywhere ? onClose : undefined, children: [_jsxs(x.div, { display: "flex", alignItems: "center", children: [inline && _jsx(VerticalSeparator, { "$colorFill": colorFill }), icon && (_jsx(IconWrap, { children: _jsx(Icon, { icon: icon, size: "20px", fill: colorFill }) })), _jsxs("div", { children: [_jsx(Title, { children: title }), _jsxs(Text, { children: [" ", text] })] })] }), _jsxs(x.div, { display: "flex", alignItems: "center", children: [href && actionType === 'link' && (_jsx(LinkWrapper, { "$colorFill": colorFill, to: href, children: actionLabel !== null && actionLabel !== void 0 ? actionLabel : 'Link' })), onClick && actionType === 'button' && (_jsx(ActionButton, { "$colorFill": colorFill, onClick: onClick, children: actionLabel !== null && actionLabel !== void 0 ? actionLabel : 'Submit' })), onClose && !closeAnywhere && (_jsx(CloseBtn, { onClick: onClose, children: _jsx(Icon, { icon: "close", size: "15px", fill: "gray" }) })), desc && _jsx(Description, { children: desc })] })] }));
+};
+export default Alert;

package/Elements/Alert/index.d.ts

@@ -0,0 +1,3 @@
+import Alert from './Alert';
+export { Alert };
+export default Alert;

package/Elements/Alert/index.js

@@ -0,0 +1,3 @@
+import Alert from './Alert';
+export { Alert };
+export default Alert;

package/Elements/Alert/stories/Alert.stories.d.ts

@@ -0,0 +1,17 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("../types").IAlert;
+    tags: string[];
+    argTypes: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Success: Story;
+export declare const Warning: Story;
+export declare const Info: Story;
+export declare const Danger: Story;
+export declare const DangerInline: Story;
+export declare const DangerWithMessage: Story;
+export declare const WithDescription: Story;
+export declare const WithCloseAnywhere: Story;