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

package/ui/Blocks/Tabs/Tabs.js

@@ -1,46 +1,20 @@
-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
-			}) })
-		]
-	}) });
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { Icon } from '../../Elements/Icon';
+import { Text } from '../../Elements/Text';
+import { RoundedWrap, StyledImageBox, Tab as StyledTab, StyledTabWrapper, TabPanel } from './styles';
+var Tab = function (_a) {
+    var tabDefinition = _a.tabDefinition, value = _a.value, isActive = _a.isActive, onTabSwitch = _a.onTabSwitch, minWidth = _a.minWidth;
+    var icon = tabDefinition.icon, label = tabDefinition.label, badgeCount = tabDefinition.badgeCount, disabled = tabDefinition.disabled;
+    var handleOnClick = useCallback(function () {
+        onTabSwitch(value);
+    }, [onTabSwitch, value]);
+    return (_jsx(StyledTabWrapper, { children: _jsxs(StyledTab, { onClick: !disabled ? handleOnClick : undefined, active: isActive, disabled: disabled, minWidth: minWidth, "data-testid": "tab-".concat(value), children: [icon && (_jsx(StyledImageBox, { children: _jsx(Icon, { icon: icon }) })), _jsx(Text, { children: label }), badgeCount === 0 ||
+                    (badgeCount && badgeCount > 0 && (_jsx(RoundedWrap, { children: _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);
-		})
-	});
+export var Tabs = function (_a) {
+    var tabsDefinition = _a.tabsDefinition, activeTab = _a.activeTab, onTabSwitch = _a.onTabSwitch, mb = _a.mb, mt = _a.mt, minTabWidth = _a.minTabWidth;
+    return (_jsx(TabPanel, { "$mb": mb, "$mt": mt, children: tabsDefinition.map(function (item, index) {
+            return (_jsx(Tab, { value: index, tabDefinition: item, isActive: index === activeTab, minWidth: minTabWidth, onTabSwitch: onTabSwitch }, index));
+        }) }));
 };
-//#endregion
-export { Tabs };

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

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

package/ui/Blocks/Tabs/hooks/useTabs.js

@@ -1,14 +1,10 @@
-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);
-		}, [])
-	};
+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 };
 };
-//#endregion
-export { useTabs };

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

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

package/ui/Blocks/Tabs/index.js

@@ -1,7 +1,4 @@
-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 };
+import { Tabs } from './Tabs';
+export { TabContent } from './TabContent';
+export { useTabs } from './hooks/useTabs';
+export default Tabs;

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

@@ -1,7 +1,8 @@
 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/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/ui/Blocks/Tabs/styles.d.ts

@@ -1,12 +1,13 @@
-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, {
+/// <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, {
     active: boolean;
-    disabled?: boolean;
-    minWidth?: string | string[];
+    disabled?: boolean | undefined;
+    minWidth?: string | string[] | undefined;
 }, never>;
-export declare const TabPanel: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
-    $mb?: string;
-    $mt?: string;
+export declare const TabPanel: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+    $mb?: string | undefined;
+    $mt?: string | undefined;
 }, never>;

package/ui/Blocks/Tabs/styles.js

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

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

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

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

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

package/ui/Elements/Alert/Alert.js

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

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

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

package/ui/Elements/Alert/index.js

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

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

@@ -1,7 +1,8 @@
-import type { StoryObj } from '@storybook/react-webpack5';
+import { 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/stories/Alert.stories.js

@@ -0,0 +1,73 @@
+import { Alert } from '../';
+var meta = {
+    title: 'Elements/Alert',
+    component: Alert,
+    tags: ['autodocs'],
+    argTypes: {},
+};
+export default meta;
+export var Success = {
+    args: {
+        intent: 'success',
+        title: 'alert',
+        text: 'text',
+    },
+};
+export var Warning = {
+    args: {
+        intent: 'warning',
+        title: 'alert',
+        text: 'warning',
+    },
+};
+export var Info = {
+    args: {
+        intent: 'info',
+        title: 'alert',
+        text: 'info',
+    },
+};
+export var Danger = {
+    args: {
+        intent: 'danger',
+        title: 'alert',
+        text: 'danger',
+    },
+};
+export var DangerInline = {
+    args: {
+        intent: 'danger',
+        title: 'alert',
+        text: 'danger',
+        inline: true,
+    },
+};
+export var DangerWithMessage = {
+    args: {
+        intent: 'danger',
+        title: 'alert',
+        text: 'This is a text content',
+        onClick: console.log,
+        inline: true,
+    },
+};
+export var WithDescription = {
+    args: {
+        intent: 'danger',
+        title: 'alert',
+        text: 'This is a text content',
+        onClick: console.log,
+        inline: true,
+        desc: "This is an extra description."
+    },
+};
+export var WithCloseAnywhere = {
+    args: {
+        intent: 'danger',
+        title: 'alert',
+        text: 'This is a text content',
+        closeAnywhere: true,
+        onClose: function () { return console.log('Close'); },
+        inline: true,
+    },
+};

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

@@ -1,33 +1,34 @@
-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;
+/// <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;
     $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> & {
-    $colorFill?: string;
+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;
 }, "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, "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 | {
-        pathname?: string;
-        search?: string;
-        hash?: string;
-        state?: object;
-    } | Function;
-    target?: string;
-    color?: string;
-    size?: number | "inherit";
-    disabled?: boolean;
-    onClick?: Function;
+    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;
 }>, 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>;