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

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

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

package/ui/Blocks/Tabs/styles.js

@@ -1,36 +1,95 @@
-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: center;\n  position: relative;\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  position: relative;\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\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\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  justify-content: center;\n  cursor: ", ";\n  padding: 0 12px 12px;\n  transition: 200ms;\n  color: ", ";\n  font-weight: bold;\n  font-size: 14px;\n  letter-spacing: 0.03em;\n  min-width: ", ";\n\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  @media (min-width: 400px) {\n    min-width: ", ";\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: ", ";\n  padding: 0 12px 12px;\n  transition: 200ms;\n  color: ", ";\n  font-weight: bold;\n  font-size: 14px;\n  letter-spacing: 0.03em;\n  min-width: ", ";\n\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  @media (min-width: 400px) {\n    min-width: ", ";\n  }\n"])), function (_a) {
-    var disabled = _a.disabled;
-    return (disabled ? 'auto' : 'pointer');
-}, th.color('gray'), function (_a) {
-    var minWidth = _a.minWidth;
-    return minWidth ? (Array.isArray(minWidth) ? minWidth[0] : minWidth) : '100px';
-}, function (_a) {
-    var disabled = _a.disabled;
-    return th.color(disabled ? 'gray' : 'typoPrimary');
-}, function (_a) {
-    var disabled = _a.disabled;
-    return !disabled && activeTab;
-}, function (_a) {
-    var active = _a.active;
-    return (active ? activeTab : '');
-}, function (_a) {
-    var minWidth = _a.minWidth;
-    return minWidth ? (Array.isArray(minWidth) ? minWidth[1] : minWidth) : '120px';
-});
-export var TabPanel = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  overflow: auto;\n  width: fit-content;\n  position: relative;\n  margin-bottom: ", ";\n  margin-top: ", ";\n  align-items: stretch;\n\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  display: flex;\n  align-items: center;\n  overflow: auto;\n  width: fit-content;\n  position: relative;\n  margin-bottom: ", ";\n  margin-top: ", ";\n  align-items: stretch;\n\n  &:after {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    background-color: ", ";\n    height: 2px;\n  }\n"])), function (_a) {
-    var _b = _a.$mb, $mb = _b === void 0 ? 0 : _b;
-    return $mb;
-}, function (_a) {
-    var _b = _a.$mt, $mt = _b === void 0 ? 0 : _b;
-    return $mt;
-}, th.color('bgLightGray1'));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+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/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

@@ -1,32 +1,76 @@
-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',
+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"
 };
-var alertColorFill = {
-    success: 'successColor',
-    info: 'blue60',
-    warning: 'yellow70',
-    danger: 'dangerColor',
+const alertColorFill = {
+	success: "successColor",
+	info: "blue60",
+	warning: "yellow70",
+	danger: "dangerColor"
 };
-var alertIconMap = {
-    success: 'circleCheck',
-    info: 'info',
-    warning: 'circleTriangle',
-    danger: 'circleTriangle',
+const 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 })] })] }));
+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 })
+			]
+		})]
+	});
 };
-export default Alert;
+//#endregion
+export { Alert as default };

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

@@ -1,3 +1,5 @@
-import Alert from './Alert';
-export { Alert };
-export default Alert;
+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,34 +1,33 @@
-/// <reference types="react" />
-export declare const StyledAlert: import('styled-components').StyledComponent<(props: Omit<JSX.IntrinsicElements, "color">) => import('react').ReactElement<any, string>, any, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme> & {
-    $inline?: boolean | undefined;
+export declare const StyledAlert: import("styled-components").StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import("react").ReactElement<any, string>, any, import("@xstyled/styled-components").SystemProps<import("@xstyled/styled-components").Theme> & {
+    $inline?: boolean;
     $colorFill: string;
     $bgColor: string;
 }, "color">;
-export declare const VerticalSeparator: import('styled-components').StyledComponent<(props: Omit<JSX.IntrinsicElements, "color">) => import('react').ReactElement<any, string>, any, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme> & {
-    $colorFill?: string | undefined;
+export declare const VerticalSeparator: import("styled-components").StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import("react").ReactElement<any, string>, any, import("@xstyled/styled-components").SystemProps<import("@xstyled/styled-components").Theme> & {
+    $colorFill?: string;
 }, "color">;
-export declare const IconWrap: import('styled-components').StyledComponent<(props: Omit<JSX.IntrinsicElements, "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/styled-components").SystemProps<import("@xstyled/styled-components").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?: import('react').ReactNode;
-    to?: string | Function | {
-        pathname?: string | undefined;
-        search?: string | undefined;
-        hash?: string | undefined;
-        state?: object | undefined;
-    } | undefined;
-    target?: string | undefined;
-    color?: string | undefined;
-    size?: number | "inherit" | undefined;
-    disabled?: boolean | undefined;
-    onClick?: Function | undefined;
+    children?: React.ReactNode;
+    to?: string | {
+        pathname?: string;
+        search?: string;
+        hash?: string;
+        state?: object;
+    } | Function;
+    target?: string;
+    color?: string;
+    size?: number | "inherit";
+    disabled?: boolean;
+    onClick?: Function;
 }>, 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/styled-components").Theme>, never>;

package/ui/Elements/Alert/styles.js

@@ -1,32 +1,82 @@
-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 'styled-components';
-import { Link } from '../Link';
-import { x, th } from '@xstyled/styled-components';
-export var StyledAlert = styled(x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: calc(100vw - 20px);\n  display: flex;\n  min-height: 48px;\n  align-items: center;\n  justify-content: space-between;\n  border: ", ";\n  border-radius: 8px;\n  background-color: ", ";\n  color: ", ";\n  font-family: ", ";\n  padding: 6px 5px 6px 5px;\n  margin-bottom: 5px;\n  position: sticky;\n  left: 10px;\n  @media (min-width: 1024px) {\n    position: relative;\n    left: 0;\n    width: 100%;\n  }\n"], ["\n  width: calc(100vw - 20px);\n  display: flex;\n  min-height: 48px;\n  align-items: center;\n  justify-content: space-between;\n  border: ", ";\n  border-radius: 8px;\n  background-color: ", ";\n  color: ", ";\n  font-family: ", ";\n  padding: 6px 5px 6px 5px;\n  margin-bottom: 5px;\n  position: sticky;\n  left: 10px;\n  @media (min-width: 1024px) {\n    position: relative;\n    left: 0;\n    width: 100%;\n  }\n"])), function (_a) {
-    var $inline = _a.$inline, $colorFill = _a.$colorFill;
-    return ($inline ? "solid 1px ".concat($colorFill) : 'none');
-}, function (_a) {
-    var $bgColor = _a.$bgColor;
-    return $bgColor;
-}, th('colors.textPrimary'), th('fonts.primary'));
-export var VerticalSeparator = styled(x.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 4px;\n  height: 36px;\n  border-radius: 94px;\n  background-color: ", ";\n"], ["\n  width: 4px;\n  height: 36px;\n  border-radius: 94px;\n  background-color: ", ";\n"])), function (_a) {
-    var $colorFill = _a.$colorFill;
-    return $colorFill;
-});
-export var IconWrap = styled(x.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 0 13px 0 9px;\n"], ["\n  margin: 0 13px 0 9px;\n"])));
-export var Title = styled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-size: 14px;\n  line-height: 18px;\n  font-weight: 600;\n"], ["\n  font-size: 14px;\n  line-height: 18px;\n  font-weight: 600;\n"])));
-export var Text = styled.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  font-size: 14px;\n  line-height: 20px;\n  font-weight: 400;\n"], ["\n  font-size: 14px;\n  line-height: 20px;\n  font-weight: 400;\n"])));
-export var LinkWrapper = styled(Link)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  font-size: 14px;\n  font-weight: 600;\n  color: ", ";\n  margin-right: 10px;\n"], ["\n  font-size: 14px;\n  font-weight: 600;\n  color: ", ";\n  margin-right: 10px;\n"])), function (_a) {
-    var $colorFill = _a.$colorFill;
-    return $colorFill;
-});
-export var ActionButton = styled.button(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin-right: 10px;\n  font-size: 14px;\n  font-weight: 600;\n  color: ", ";\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n"], ["\n  margin-right: 10px;\n  font-size: 14px;\n  font-weight: 600;\n  color: ", ";\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n"])), function (_a) {
-    var $colorFill = _a.$colorFill;
-    return $colorFill;
-});
-export var CloseBtn = styled.button(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  height: 30px;\n  width: 30px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border: none;\n  margin-right: 5px;\n  background-color: transparent;\n  & :hover {\n    cursor: pointer;\n  }\n"], ["\n  height: 30px;\n  width: 30px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border: none;\n  margin-right: 5px;\n  background-color: transparent;\n  & :hover {\n    cursor: pointer;\n  }\n"])));
-export var Description = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  position: absolute;\n  top: 3px;\n  right: 8px;\n  color: ", ";\n  font-size: 10px;\n"], ["\n  position: absolute;\n  top: 3px;\n  right: 8px;\n  color: ", ";\n  font-size: 10px;\n"])), th('colors.gray'));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
+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/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;

package/ui/Elements/AsyncSelect/AsyncSelect.js

@@ -1,34 +1,35 @@
-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);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import ErrorMessage from '../ErrorMessage/ErrorMessage';
-import { FieldLabel } from '../Label';
-import { StyledAsyncSelect, Wrapper } from '../Select/styles';
-import { useStylesAndComponents } from '../Select/themes';
-import SpaceAroundWrap from '../SpaceAround';
-import { i18n } from '@lingui/core';
-export var AsyncSelect = function (_a) {
-    var error = _a.error, label = _a.label, className = _a.className, spaceAround = _a.spaceAround, name = _a.name, placeholder = _a.placeholder, _b = _a.style, style = _b === void 0 ? 'form' : _b, _c = _a.optionVariant, optionVariant = _c === void 0 ? 'checkbox' : _c, _d = _a.multiLabelVariant, multiLabelVariant = _d === void 0 ? 'count' : _d, props = __rest(_a, ["error", "label", "className", "spaceAround", "name", "placeholder", "style", "optionVariant", "multiLabelVariant"]);
-    var _e = useStylesAndComponents(style, optionVariant, multiLabelVariant), customComponents = _e[0], customTheme = _e[1], customStyles = _e[2];
-    return (_jsxs(SpaceAroundWrap, { spaceAround: spaceAround, className: className, children: [_jsxs(Wrapper, { children: [label && _jsx(FieldLabel, { htmlFor: name, children: label }), _jsx(StyledAsyncSelect, __assign({ id: name, name: name, theme: customTheme, components: customComponents, styles: customStyles, classNamePrefix: "react-select", placeholder: placeholder || i18n._({ id: 'components.dropdown.placeholder', message: 'Select...' }) }, props))] }), error && _jsx(ErrorMessage, { children: error })] }));
+import ErrorMessage from "../ErrorMessage/ErrorMessage.js";
+import { FieldLabel } from "../Label/Label.js";
+import "../Label/index.js";
+import SpaceAround_default from "../SpaceAround/index.js";
+import { StyledAsyncSelect, Wrapper } from "../Select/styles.js";
+import { useStylesAndComponents } from "../Select/themes/index.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { i18n } from "@lingui/core";
+//#region packages/ui/Elements/AsyncSelect/AsyncSelect.tsx
+const AsyncSelect = ({ error, label, className, spaceAround, name, placeholder, style = "form", optionVariant = "checkbox", multiLabelVariant = "count", ...props }) => {
+	const [customComponents, customTheme, customStyles] = useStylesAndComponents(style, optionVariant, multiLabelVariant);
+	return /* @__PURE__ */ jsxs(SpaceAround_default, {
+		spaceAround,
+		className,
+		children: [/* @__PURE__ */ jsxs(Wrapper, { children: [label && /* @__PURE__ */ jsx(FieldLabel, {
+			htmlFor: name,
+			children: label
+		}), /* @__PURE__ */ jsx(StyledAsyncSelect, {
+			id: name,
+			name,
+			theme: customTheme,
+			components: customComponents,
+			styles: customStyles,
+			classNamePrefix: "react-select",
+			placeholder: placeholder || i18n._({
+				id: "components.dropdown.placeholder",
+				message: "Select..."
+			}),
+			...props
+		})] }), error && /* @__PURE__ */ jsx(ErrorMessage, { children: error })]
+	});
 };
+//#endregion
+export { AsyncSelect };

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

@@ -1,4 +1,3 @@
-import { AsyncSelect, AsyncSelectProps } from './AsyncSelect';
-
+import { AsyncSelect, type AsyncSelectProps } from './AsyncSelect';
 export default AsyncSelect;
 export type { AsyncSelectProps };

package/ui/Elements/AsyncSelect/index.js

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

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

@@ -1,7 +1,6 @@
-/// <reference types="react" />
 declare const meta: {
     title: string;
-    component: import('react').FC<import('../AsyncSelect').AsyncSelectProps>;
+    component: import("react").FC<import("..").AsyncSelectProps>;
     tags: string[];
     argTypes: {};
 };

package/ui/Elements/Avatar/Avatar.d.ts

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