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

package/ui/Elements/Spinner/styles.js

@@ -1,19 +1,36 @@
-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, keyframes } from '@xstyled/styled-components';
-var KeyframesCircularDash = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0% {\n    stroke-dasharray: 1px, 200px;\n    stroke-dashoffset: 0px;\n  }\n\n  50% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -15px;\n  }\n\n  100% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -125px;\n  }\n"], ["\n  0% {\n    stroke-dasharray: 1px, 200px;\n    stroke-dashoffset: 0px;\n  }\n\n  50% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -15px;\n  }\n\n  100% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -125px;\n  }\n"])));
-var KeyframesCircularRotate = keyframes(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  100% {\n    transform: rotate(360deg);\n  }\n"], ["\n  100% {\n    transform: rotate(360deg);\n  }\n"])));
-export var Svg = styled.svg(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: ", "px;\n  height: ", "px;\n  animation: ", " 1.4s linear infinite;\n"], ["\n  width: ", "px;\n  height: ", "px;\n  animation: ", " 1.4s linear infinite;\n"])), function (_a) {
-    var $variant = _a.$variant;
-    return ($variant === 'sm' ? '16' : '40');
-}, function (_a) {
-    var $variant = _a.$variant;
-    return ($variant === 'sm' ? '16' : '40');
-}, KeyframesCircularRotate);
-export var Circle = styled.circle(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  animation: ", " 1.4s ease-in-out infinite;\n  stroke-dasharray: 80px, 200px;\n  stroke-dashoffset: 0px;\n  stroke: ", ";\n"], ["\n  animation: ", " 1.4s ease-in-out infinite;\n  stroke-dasharray: 80px, 200px;\n  stroke-dashoffset: 0px;\n  stroke: ", ";\n"])), KeyframesCircularDash, function (_a) {
-    var color = _a.color;
-    return (color ? th.color(color) : th.color('blue2'));
-});
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+import styled$1, { keyframes, th } from "@xstyled/styled-components";
+//#region packages/ui/Elements/Spinner/styles.ts
+const KeyframesCircularDash = keyframes`
+  0% {
+    stroke-dasharray: 1px, 200px;
+    stroke-dashoffset: 0px;
+  }
+
+  50% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -15px;
+  }
+
+  100% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -125px;
+  }
+`;
+const KeyframesCircularRotate = keyframes`
+  100% {
+    transform: rotate(360deg);
+  }
+`;
+const Svg = styled$1.svg`
+  width: ${({ $variant }) => $variant === "sm" ? "16" : "40"}px;
+  height: ${({ $variant }) => $variant === "sm" ? "16" : "40"}px;
+  animation: ${KeyframesCircularRotate} 1.4s linear infinite;
+`;
+const Circle = styled$1.circle`
+  animation: ${KeyframesCircularDash} 1.4s ease-in-out infinite;
+  stroke-dasharray: 80px, 200px;
+  stroke-dashoffset: 0px;
+  stroke: ${({ color }) => color ? th.color(color) : th.color("blue2")};
+`;
+//#endregion
+export { Circle, Svg };

package/ui/Elements/Table/Table.d.ts

@@ -1,6 +1,6 @@
-export declare const Table: import('styled-components').StyledComponent<"table", import('@xstyled/system').Theme, import('@xstyled/util').Props<import('@xstyled/system').Theme> & import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, never>;
-export declare const Tr: import('styled-components').StyledComponent<"tr", import('@xstyled/system').Theme, import('@xstyled/util').Props<import('@xstyled/system').Theme> & import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, never>;
-export declare const Td: import('styled-components').StyledComponent<"td", import('@xstyled/system').Theme, import('@xstyled/util').Props<import('@xstyled/system').Theme> & import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, never>;
-export declare const Th: import('styled-components').StyledComponent<"th", import('@xstyled/system').Theme, import('@xstyled/util').Props<import('@xstyled/system').Theme> & import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, never>;
-export declare const Tbody: import('styled-components').StyledComponent<"tbody", import('@xstyled/system').Theme, import('@xstyled/util').Props<import('@xstyled/system').Theme> & import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, never>;
-export declare const Thead: import('styled-components').StyledComponent<"thead", import('@xstyled/system').Theme, import('@xstyled/util').Props<import('@xstyled/system').Theme> & import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, never>;
+export declare const Table: import("styled-components").StyledComponent<"table", import("@xstyled/styled-components").Theme, import("@xstyled/util").Props<import("@xstyled/styled-components").Theme> & import("@xstyled/styled-components").SystemProps<import("@xstyled/styled-components").Theme>, never>;
+export declare const Tr: import("styled-components").StyledComponent<"tr", import("@xstyled/styled-components").Theme, import("@xstyled/util").Props<import("@xstyled/styled-components").Theme> & import("@xstyled/styled-components").SystemProps<import("@xstyled/styled-components").Theme>, never>;
+export declare const Td: import("styled-components").StyledComponent<"td", import("@xstyled/styled-components").Theme, import("@xstyled/util").Props<import("@xstyled/styled-components").Theme> & import("@xstyled/styled-components").SystemProps<import("@xstyled/styled-components").Theme>, never>;
+export declare const Th: import("styled-components").StyledComponent<"th", import("@xstyled/styled-components").Theme, import("@xstyled/util").Props<import("@xstyled/styled-components").Theme> & import("@xstyled/styled-components").SystemProps<import("@xstyled/styled-components").Theme>, never>;
+export declare const Tbody: import("styled-components").StyledComponent<"tbody", import("@xstyled/styled-components").Theme, import("@xstyled/util").Props<import("@xstyled/styled-components").Theme> & import("@xstyled/styled-components").SystemProps<import("@xstyled/styled-components").Theme>, never>;
+export declare const Thead: import("styled-components").StyledComponent<"thead", import("@xstyled/styled-components").Theme, import("@xstyled/util").Props<import("@xstyled/styled-components").Theme> & import("@xstyled/styled-components").SystemProps<import("@xstyled/styled-components").Theme>, never>;

package/ui/Elements/Table/Table.js

@@ -1,12 +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, { system } from '@xstyled/styled-components';
-export var Table = styled.table(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  width: 100%;\n  border-collapse: collapse;\n  color: blue2;\n"], ["\n  ", ";\n  width: 100%;\n  border-collapse: collapse;\n  color: blue2;\n"])), system);
-export var Tr = styled.tr(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", ";\n  &:nth-child(even) {\n    background-color: bgLightGray;\n  }\n"], ["\n  ", ";\n  &:nth-child(even) {\n    background-color: bgLightGray;\n  }\n"])), system);
-export var Td = styled.td(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), system);
-export var Th = styled.th(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n  font-weight: semiBold;\n  text-align: left;\n  border-top: 1px solid;\n  border-top-color: lightGray6;\n\n  &:not(:last-child) {\n    border-right: 1px dashed;\n    border-right-color: lightGray6;\n  }\n"], ["\n  ", ";\n  font-weight: semiBold;\n  text-align: left;\n  border-top: 1px solid;\n  border-top-color: lightGray6;\n\n  &:not(:last-child) {\n    border-right: 1px dashed;\n    border-right-color: lightGray6;\n  }\n"])), system);
-export var Tbody = styled.tbody(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", ";\n  td {\n    padding: 9px 4px;\n  }\n"], ["\n  ", ";\n  td {\n    padding: 9px 4px;\n  }\n"])), system);
-export var Thead = styled.thead(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", ";\n  background-color: bgLightGray1;\n\n  th {\n    padding: 10px 8px;\n  }\n"], ["\n  ", ";\n  background-color: bgLightGray1;\n\n  th {\n    padding: 10px 8px;\n  }\n"])), system);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+import styled$1, { system } from "@xstyled/styled-components";
+//#region packages/ui/Elements/Table/Table.tsx
+const Table = styled$1.table`
+  ${system};
+  width: 100%;
+  border-collapse: collapse;
+  color: blue2;
+`;
+const Tr = styled$1.tr`
+  ${system};
+  &:nth-child(even) {
+    background-color: bgLightGray;
+  }
+`;
+const Td = styled$1.td`
+  ${system};
+`;
+const Th = styled$1.th`
+  ${system};
+  font-weight: semiBold;
+  text-align: left;
+  border-top: 1px solid;
+  border-top-color: lightGray6;
+
+  &:not(:last-child) {
+    border-right: 1px dashed;
+    border-right-color: lightGray6;
+  }
+`;
+const Tbody = styled$1.tbody`
+  ${system};
+  td {
+    padding: 9px 4px;
+  }
+`;
+const Thead = styled$1.thead`
+  ${system};
+  background-color: bgLightGray1;
+
+  th {
+    padding: 10px 8px;
+  }
+`;
+//#endregion
+export { Table, Tbody, Td, Th, Thead, Tr };

package/ui/Elements/Table/index.js

@@ -1 +1,2 @@
-export { Table, Thead, Tr, Th, Td, Tbody } from './Table';
+import { Table, Tbody, Td, Th, Thead, Tr } from "./Table.js";
+export { Table, Tbody, Td, Th, Thead, Tr };

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

@@ -1,6 +1,6 @@
 declare const meta: {
     title: string;
-    component: import('styled-components').StyledComponent<"table", import('@xstyled/system').Theme, import('@xstyled/util').Props<import('@xstyled/system').Theme> & import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, never>;
+    component: import("styled-components").StyledComponent<"table", import("@xstyled/styled-components").Theme, import("@xstyled/util").Props<import("@xstyled/styled-components").Theme> & import("@xstyled/styled-components").SystemProps<import("@xstyled/styled-components").Theme>, never>;
     tags: string[];
     argTypes: {};
 };

package/ui/Elements/Tag/Tag.d.ts

@@ -1,4 +1,3 @@
-import { Props } from './types';
-
-declare const Tag: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, Props, never>;
+import type { Props } from './types';
+declare const Tag: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, Props, never>;
 export default Tag;

package/ui/Elements/Tag/Tag.js

@@ -1,62 +1,52 @@
-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$1, { th } from "@xstyled/styled-components";
+//#region packages/ui/Elements/Tag/Tag.tsx
+const fontSizeMap = {
+	small: "14px",
+	medium: "16px",
+	big: "20px"
 };
-import styled, { th } from '@xstyled/styled-components';
-var fontSizeMap = {
-    small: '14px',
-    medium: '16px',
-    big: '20px'
+const paddingMap = {
+	small: "2px 8px",
+	medium: "7px 10px",
+	big: "12px 12px"
 };
-var paddingMap = {
-    small: '2px 8px',
-    medium: '7px 10px',
-    big: '12px 12px'
+const borderRadiusMap = {
+	small: "6px",
+	medium: "20px",
+	big: "20px"
 };
-var borderRadiusMap = {
-    small: '6px',
-    medium: '20px',
-    big: '20px'
+const getTextColor = (isNotSelected, textColor) => {
+	if (textColor) return th.color(textColor);
+	return isNotSelected ? th.color("blue2") : "white";
 };
-var getTextColor = function (isNotSelected, textColor) {
-    if (textColor) {
-        return th.color(textColor);
-    }
-    return isNotSelected ? th.color('blue2') : 'white';
-};
-var getBgColor = function (color) {
-    return color ? th.color(color) : 'rgba(157, 163, 169, 0.2)';
+const getBgColor = (color) => {
+	return color ? th.color(color) : "rgba(157, 163, 169, 0.2)";
 };
-var Tag = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  margin-right: ", ";\n  color: ", ";\n  width: fit-content;\n  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n  text-align: center;\n  white-space: nowrap;\n  display: flex;\n  align-items: center;\n  font-size: 14px;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  & span {\n    &:first-letter {\n      text-transform: uppercase;\n    }\n  }\n}\n"], ["\n  background-color: ", ";\n  margin-right: ", ";\n  color: ", ";\n  width: fit-content;\n  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n  text-align: center;\n  white-space: nowrap;\n  display: flex;\n  align-items: center;\n  font-size: 14px;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  & span {\n    &:first-letter {\n      text-transform: uppercase;\n    }\n  }\n}\n"])), function (_a) {
-    var color = _a.color;
-    return getBgColor(color);
-}, function (_a) {
-    var marginRight = _a.marginRight;
-    return marginRight || '10px';
-}, function (_a) {
-    var isNotSelected = _a.isNotSelected, textColor = _a.textColor;
-    return getTextColor(isNotSelected, textColor);
-}, function (_a) {
-    var size = _a.size;
-    return "border-radius: ".concat(borderRadiusMap[size || 'medium']);
-}, function (_a) {
-    var size = _a.size;
-    return "font-size: ".concat(fontSizeMap[size || 'medium']);
-}, function (_a) {
-    var size = _a.size;
-    return "padding: ".concat(paddingMap[size || 'medium']);
-}, function (_a) {
-    var border = _a.border;
-    return border && 'border: 1px solid rgba(0, 0, 0, 0.65);';
-}, function (_a) {
-    var opacity = _a.opacity;
-    return opacity && 'opacity: 0.7';
-}, function (_a) {
-    var pointer = _a.pointer;
-    return pointer && 'cursor: pointer;';
-}, function (_a) {
-    var hover = _a.hover;
-    return hover && '&: hover { opacity: 0.7}';
-});
-export default Tag;
-var templateObject_1;
+const Tag = styled$1.div`
+  background-color: ${({ color }) => getBgColor(color)};
+  margin-right: ${({ marginRight }) => marginRight || "10px"};
+  color: ${({ isNotSelected, textColor }) => getTextColor(isNotSelected, textColor)};
+  width: fit-content;
+  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  text-align: center;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  ${({ size }) => `border-radius: ${borderRadiusMap[size || "medium"]}`};
+  ${({ size }) => `font-size: ${fontSizeMap[size || "medium"]}`};
+  ${({ size }) => `padding: ${paddingMap[size || "medium"]}`};
+  ${({ border }) => border && "border: 1px solid rgba(0, 0, 0, 0.65);"};
+  ${({ opacity }) => opacity && "opacity: 0.7"};
+  ${({ pointer }) => pointer && "cursor: pointer;"};
+  ${({ hover }) => hover && "&: hover { opacity: 0.7}"};
+
+  & span {
+    &:first-letter {
+      text-transform: uppercase;
+    }
+  }
+}
+`;
+//#endregion
+export { Tag as default };

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

@@ -1,5 +1,4 @@
-import { default as Tag } from './Tag';
-
+import Tag from './Tag';
 export { palettes } from './palettes';
 export { type Palette } from './types';
 export default Tag;

package/ui/Elements/Tag/index.js

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

package/ui/Elements/Tag/palettes.d.ts

@@ -1,5 +1,4 @@
-import { Palette, PaletteNames } from './types';
-
+import type { Palette, PaletteNames } from './types';
 /**
  * [string, string]: [background, text]
  */

package/ui/Elements/Tag/palettes.js

@@ -1,16 +1,52 @@
+//#region packages/ui/Elements/Tag/palettes.ts
 /**
- * [string, string]: [background, text]
- */
-export var palettes = {
-    greenWhite: { color: 'green60', textColor: 'white' },
-    greenGreen: { color: 'green30', textColor: 'green80' },
-    blueBlue: { color: 'blue20', textColor: 'blue80' },
-    magentaWhite: { color: 'magenta60', textColor: 'white' },
-    magentaMagenta: { color: 'magenta20', textColor: 'magenta80' },
-    tealTeal: { color: 'teal20', textColor: 'teal90' },
-    orangeOrange: { color: 'orange20', textColor: 'orange80' },
-    grayGray: { color: 'neutral20', textColor: 'typoPrimary' },
-    redWhite: { color: 'red1', textColor: 'white' },
-    redRed: { color: 'red30', textColor: 'red1' },
-    purplePurple: { color: 'purple20', textColor: 'purple80' }
+* [string, string]: [background, text]
+*/
+const palettes = {
+	greenWhite: {
+		color: "green60",
+		textColor: "white"
+	},
+	greenGreen: {
+		color: "green30",
+		textColor: "green80"
+	},
+	blueBlue: {
+		color: "blue20",
+		textColor: "blue80"
+	},
+	magentaWhite: {
+		color: "magenta60",
+		textColor: "white"
+	},
+	magentaMagenta: {
+		color: "magenta20",
+		textColor: "magenta80"
+	},
+	tealTeal: {
+		color: "teal20",
+		textColor: "teal90"
+	},
+	orangeOrange: {
+		color: "orange20",
+		textColor: "orange80"
+	},
+	grayGray: {
+		color: "neutral20",
+		textColor: "typoPrimary"
+	},
+	redWhite: {
+		color: "red1",
+		textColor: "white"
+	},
+	redRed: {
+		color: "red30",
+		textColor: "red1"
+	},
+	purplePurple: {
+		color: "purple20",
+		textColor: "purple80"
+	}
 };
+//#endregion
+export { palettes };

package/ui/Elements/Tag/stories/Tag.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('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, import('../types').Props, never>;
+    component: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, import("../types").Props, never>;
     tags: string[];
     argTypes: {};
 };

package/ui/Elements/Tag/stories/components/predefinedTags.js

@@ -1,8 +1,19 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import Tag from '../../Tag';
-import { palettes } from '../../palettes';
-import { x } from '@xstyled/styled-components';
-var PredefinedTags = function () {
-    return (_jsx(x.div, { display: "flex", flexWrap: "wrap", fontFamily: "monospace", children: Object.keys(palettes).map(function (paletteName) { return (_jsx(Tag, { color: palettes[paletteName].color, textColor: palettes[paletteName].textColor, children: paletteName }, paletteName)); }) }));
+import Tag from "../../Tag.js";
+import { palettes } from "../../palettes.js";
+import { x } from "@xstyled/styled-components";
+import { jsx } from "react/jsx-runtime";
+//#region packages/ui/Elements/Tag/stories/components/predefinedTags.tsx
+const PredefinedTags = () => {
+	return /* @__PURE__ */ jsx(x.div, {
+		display: "flex",
+		flexWrap: "wrap",
+		fontFamily: "monospace",
+		children: Object.keys(palettes).map((paletteName) => /* @__PURE__ */ jsx(Tag, {
+			color: palettes[paletteName].color,
+			textColor: palettes[paletteName].textColor,
+			children: paletteName
+		}, paletteName))
+	});
 };
-export default PredefinedTags;
+//#endregion
+export { PredefinedTags as default };

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type Props = {
     color?: string;
     textColor?: string;

package/ui/Elements/Text/Text.d.ts

@@ -1,5 +1,4 @@
-import { FC } from 'react';
-import { TextProps } from './types';
-
+import { type FC } from 'react';
+import type { TextProps } from './types';
 declare const Text: FC<TextProps>;
 export default Text;

package/ui/Elements/Text/Text.js

@@ -1,29 +1,10 @@
-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 } from "react/jsx-runtime";
-import { x } from '@xstyled/styled-components';
-var Text = function (_a) {
-    var _b = _a.as, as = _b === void 0 ? 'span' : _b, props = __rest(_a, ["as"]);
-    return _jsx(x.div, __assign({ as: as }, props));
-};
-export default Text;
+import "react";
+import { x } from "@xstyled/styled-components";
+import { jsx } from "react/jsx-runtime";
+//#region packages/ui/Elements/Text/Text.tsx
+const Text = ({ as = "span", ...props }) => /* @__PURE__ */ jsx(x.div, {
+	as,
+	...props
+});
+//#endregion
+export { Text as default };

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

@@ -1,4 +1,3 @@
-import { default as Text } from './Text';
-
+import Text from './Text';
 export type { TextProps } from './types';
 export { Text };

package/ui/Elements/Text/index.js

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

package/ui/Elements/Text/stories/Text.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('react').FC<import('..').TextProps>;
+    component: import("react").FC<import("..").TextProps>;
     tags: string[];
     argTypes: {};
 };

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

@@ -1,6 +1,5 @@
 import { ComponentType, ReactNode } from 'react';
 import { SystemProps } from '@xstyled/system';
-
 export type TextVariant = 'normal' | 'medium' | 'semiBold' | 'bold';
 export type TextProps = SystemProps & {
     children?: ReactNode | ReactNode[];

package/ui/Elements/Toast/Toast.d.ts

@@ -1,5 +1,4 @@
-import { default as React } from 'react';
-
+import React from 'react';
 export type ToastType = 'info' | 'success' | 'error' | 'warning';
 export type CustomToastProps = {
     closeToast?: () => void;

package/ui/Elements/Toast/Toast.js

@@ -1,21 +1,36 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect } from 'react';
-import { Icon } from '../Icon';
-import { x } from '@xstyled/styled-components';
-import { toastTitleMap, toastIconMap, toastIconFill } from './constants';
-import { Title, Text, ContentWrapper, CloseWrapper, Container } from './styles';
-var Toast = function (_a) {
-    var closeToast = _a.closeToast, title = _a.title, text = _a.text, type = _a.type, autoClose = _a.autoClose;
-    var icon = toastIconMap[type];
-    var fill = toastIconFill[type];
-    useEffect(function () {
-        if (!autoClose)
-            return;
-        var timer = setTimeout(function () { return closeToast === null || closeToast === void 0 ? void 0 : closeToast(); }, autoClose);
-        return function () {
-            clearTimeout(timer);
-        };
-    }, []);
-    return (_jsxs(Container, { autoClose: autoClose, fill: fill, children: [_jsx(x.div, { mx: "12px", children: _jsx(Icon, { icon: icon, fill: fill, size: "20px" }) }), _jsxs(ContentWrapper, { children: [_jsxs("div", { children: [_jsx(Title, { children: title || toastTitleMap[type] }), text && _jsx(Text, { children: text })] }), _jsx(CloseWrapper, { children: _jsx("div", { onClick: closeToast, children: _jsx(Icon, { icon: "close" }) }) })] })] }));
+import Icon from "../Icon/Icon.js";
+import "../Icon/index.js";
+import { toastIconFill, toastIconMap, toastTitleMap } from "./constants.js";
+import { CloseWrapper, Container, ContentWrapper, Text, Title } from "./styles.js";
+import { useEffect } from "react";
+import { x } from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Elements/Toast/Toast.tsx
+const Toast = ({ closeToast, title, text, type, autoClose }) => {
+	const icon = toastIconMap[type];
+	const fill = toastIconFill[type];
+	useEffect(() => {
+		if (!autoClose) return;
+		const timer = setTimeout(() => closeToast?.(), autoClose);
+		return () => {
+			clearTimeout(timer);
+		};
+	}, []);
+	return /* @__PURE__ */ jsxs(Container, {
+		autoClose,
+		fill,
+		children: [/* @__PURE__ */ jsx(x.div, {
+			mx: "12px",
+			children: /* @__PURE__ */ jsx(Icon, {
+				icon,
+				fill,
+				size: "20px"
+			})
+		}), /* @__PURE__ */ jsxs(ContentWrapper, { children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Title, { children: title || toastTitleMap[type] }), text && /* @__PURE__ */ jsx(Text, { children: text })] }), /* @__PURE__ */ jsx(CloseWrapper, { children: /* @__PURE__ */ jsx("div", {
+			onClick: closeToast,
+			children: /* @__PURE__ */ jsx(Icon, { icon: "close" })
+		}) })] })]
+	});
 };
-export default Toast;
+//#endregion
+export { Toast as default };

package/ui/Elements/Toast/constants.d.ts

@@ -1,6 +1,5 @@
-import { default as React } from 'react';
+import React from 'react';
 import { ToastType } from './Toast';
-
 export declare const toastIconMap: Record<ToastType, string>;
 export declare const toastIconFill: Record<ToastType, string>;
 export declare const toastTitleMap: Record<ToastType, React.ReactElement | string>;

package/ui/Elements/Toast/constants.js

@@ -1,18 +1,21 @@
-export var toastIconMap = {
-    info: 'info',
-    success: 'circleCheck',
-    error: 'circleX',
-    warning: 'circleTriangle',
+//#region packages/ui/Elements/Toast/constants.ts
+const toastIconMap = {
+	info: "info",
+	success: "circleCheck",
+	error: "circleX",
+	warning: "circleTriangle"
 };
-export var toastIconFill = {
-    info: 'blue2',
-    success: 'darkGreen',
-    error: 'red1',
-    warning: 'yellow1',
+const toastIconFill = {
+	info: "blue2",
+	success: "darkGreen",
+	error: "red1",
+	warning: "yellow1"
 };
-export var toastTitleMap = {
-    info: 'Info',
-    success: 'Success',
-    error: 'Error',
-    warning: 'Warning',
+const toastTitleMap = {
+	info: "Info",
+	success: "Success",
+	error: "Error",
+	warning: "Warning"
 };
+//#endregion
+export { toastIconFill, toastIconMap, toastTitleMap };

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

@@ -1,5 +1,4 @@
-import { default as Toast } from './Toast';
-
+import Toast from './Toast';
 export type { ToastType } from './Toast';
 export { Toast };
 export default Toast;