@mailstep/design-system 0.8.26 → 0.8.27-beta.0

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

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,4 @@
+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/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

@@ -0,0 +1,25 @@
+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/Stepper/types.js

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

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

@@ -0,0 +1,13 @@
+import { Table as Table$1, Tbody, Td, Th, Thead, Tr } from "../../Elements/Table/Table.js";
+import "../../Elements/Table/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#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

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

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

@@ -1,9 +1,9 @@
 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;
+        onRowClick?: (dataRow: import("../types").DataRow) => void;
     }>;
     tags: string[];
     argTypes: {};

package/ui/Blocks/Table/types.js

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

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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,46 @@
+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
+			}) })
+		]
+	}) });
+};
+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

@@ -0,0 +1,14 @@
+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.js

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

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

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

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

@@ -1,12 +1,12 @@
-export declare const StyledImageBox: import('styled-components').StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import('react').ReactElement<any, string>, 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, {
+export declare const StyledImageBox: import("styled-components").StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import("react").ReactElement<any, string>, 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;
     disabled?: boolean;
     minWidth?: string | string[];
 }, never>;
-export declare const TabPanel: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+export declare const TabPanel: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     $mb?: string;
     $mt?: string;
 }, never>;

package/ui/Blocks/Tabs/styles.js

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

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

@@ -1,5 +1,4 @@
-import { ReactNode } from 'react';
-
+import { type ReactNode } from 'react';
 export type TabDefinition = {
     label: string;
     icon?: string;

package/ui/Blocks/Tabs/types.js

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

package/ui/Elements/Alert/Alert.d.ts

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

package/ui/Elements/Alert/Alert.js

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

package/ui/Elements/Alert/index.d.js

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

package/ui/Elements/Alert/index.d.ts

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

package/ui/Elements/Alert/index.js

@@ -0,0 +1,5 @@
+import Alert from "./Alert.js";
+//#region packages/ui/Elements/Alert/index.ts
+var Alert_default = Alert;
+//#endregion
+export { Alert, Alert_default as default };

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

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

package/ui/Elements/Alert/styles.d.ts

@@ -1,15 +1,15 @@
-export declare const StyledAlert: import('styled-components').StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import('react').ReactElement<any, string>, any, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme> & {
+export declare const StyledAlert: import("styled-components").StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import("react").ReactElement<any, string>, any, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme> & {
     $inline?: boolean;
     $colorFill: string;
     $bgColor: string;
 }, "color">;
-export declare const VerticalSeparator: import('styled-components').StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import('react').ReactElement<any, string>, any, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme> & {
+export declare const VerticalSeparator: import("styled-components").StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import("react").ReactElement<any, string>, any, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme> & {
     $colorFill?: string;
 }, "color">;
-export declare const IconWrap: import('styled-components').StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import('react').ReactElement<any, string>, any, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, "color">;
-export declare const Title: import('styled-components').StyledComponent<"span", any, {}, never>;
-export declare const Text: import('styled-components').StyledComponent<"span", any, {}, never>;
-export declare const LinkWrapper: import('styled-components').StyledComponent<import('react').FC<{
+export declare const IconWrap: import("styled-components").StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import("react").ReactElement<any, string>, any, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, "color">;
+export declare const Title: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const Text: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const LinkWrapper: import("styled-components").StyledComponent<import("react").FC<{
     as?: any;
     children?: React.ReactNode;
     to?: string | {
@@ -26,8 +26,8 @@ export declare const LinkWrapper: import('styled-components').StyledComponent<im
 }>, any, {
     $colorFill: string;
 }, never>;
-export declare const ActionButton: import('styled-components').StyledComponent<"button", any, {
+export declare const ActionButton: import("styled-components").StyledComponent<"button", any, {
     $colorFill: string;
 }, never>;
-export declare const CloseBtn: import('styled-components').StyledComponent<"button", any, {}, never>;
-export declare const Description: import('styled-components').StyledComponent<"div", any, import('@xstyled/util').Props<import('@xstyled/system').Theme>, never>;
+export declare const CloseBtn: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const Description: import("styled-components").StyledComponent<"div", any, import("@xstyled/util").Props<import("@xstyled/system").Theme>, never>;

package/ui/Elements/Alert/styles.js

@@ -0,0 +1,82 @@
+import Link from "../Link/Link.js";
+import "../Link/index.js";
+import { th, x } from "@xstyled/styled-components";
+import styled$2 from "styled-components";
+//#region packages/ui/Elements/Alert/styles.ts
+const StyledAlert = styled$2(x.div)`
+  width: calc(100vw - 20px);
+  display: flex;
+  min-height: 48px;
+  align-items: center;
+  justify-content: space-between;
+  border: ${({ $inline, $colorFill }) => $inline ? `solid 1px ${$colorFill}` : "none"};
+  border-radius: 8px;
+  background-color: ${({ $bgColor }) => $bgColor};
+  color: ${th("colors.textPrimary")};
+  font-family: ${th("fonts.primary")};
+  padding: 6px 5px 6px 5px;
+  margin-bottom: 5px;
+  position: sticky;
+  left: 10px;
+  @media (min-width: 1024px) {
+    position: relative;
+    left: 0;
+    width: 100%;
+  }
+`;
+const VerticalSeparator = styled$2(x.div)`
+  width: 4px;
+  height: 36px;
+  border-radius: 94px;
+  background-color: ${({ $colorFill }) => $colorFill};
+`;
+const IconWrap = styled$2(x.div)`
+  margin: 0 13px 0 9px;
+`;
+const Title = styled$2.span`
+  font-size: 14px;
+  line-height: 18px;
+  font-weight: 600;
+`;
+const Text = styled$2.span`
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 400;
+`;
+const LinkWrapper = styled$2(Link)`
+  font-size: 14px;
+  font-weight: 600;
+  color: ${({ $colorFill }) => $colorFill};
+  margin-right: 10px;
+`;
+const ActionButton = styled$2.button`
+  margin-right: 10px;
+  font-size: 14px;
+  font-weight: 600;
+  color: ${({ $colorFill }) => $colorFill};
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+`;
+const CloseBtn = styled$2.button`
+  height: 30px;
+  width: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  margin-right: 5px;
+  background-color: transparent;
+  & :hover {
+    cursor: pointer;
+  }
+`;
+const Description = styled$2.div`
+  position: absolute;
+  top: 3px;
+  right: 8px;
+  color: ${th("colors.gray")};
+  font-size: 10px;
+`;
+//#endregion
+export { ActionButton, CloseBtn, Description, IconWrap, LinkWrapper, StyledAlert, Text, Title, VerticalSeparator };

package/ui/Elements/Alert/types.d.ts

@@ -1,5 +1,4 @@
-import { FC, ReactNode } from 'react';
-
+import type { FC, ReactNode } from 'react';
 export type AlertProps = {
     intent?: 'success' | 'info' | 'warning' | 'danger';
     inline?: boolean;

package/ui/Elements/Alert/types.js

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

package/ui/Elements/AsyncSelect/AsyncSelect.d.ts

@@ -1,8 +1,7 @@
-import { FC } from 'react';
-import { Option } from '../Select/types';
-import { SpaceAround } from '../SpaceAround';
-import { AsyncProps } from 'react-select/async';
-
+import { type FC } from 'react';
+import { type Option } from '../Select/types';
+import { type SpaceAround } from '../SpaceAround';
+import { type AsyncProps } from 'react-select/async';
 export type AsyncSelectProps = {
     name?: string;
     error?: string;