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

package/ui/Elements/Avatar/Avatar.js

@@ -1,36 +1,38 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
+import { Profile } from "../Icon/icons/Profile.js";
+import "../Icon/index.js";
+import "react";
+import styled$1, { th } from "@xstyled/styled-components";
+import { Fragment, jsx } from "react/jsx-runtime";
+//#region packages/ui/Elements/Avatar/Avatar.tsx
+const defaultDimension = 100;
+const StyledAvatarWrap = styled$1.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  overflow: hidden;
+  color: ${(props) => props.$colorFront ? th.color(props.$colorFront) : "auto"};
+  background-color: ${(props) => props.$colorBack ? th.color(props.$colorBack) : "auto"};
+  width: ${(props) => `${props.size}px`};
+  height: ${(props) => `${props.size}px`};
+  :hover {
+    background-color: ${(props) => props.$hoverColorBack ? th.color(props.$hoverColorBack) : "auto"};
+  }
+`;
+const Avatar = ({ src, size = defaultDimension, colorFront, colorBack, className, hoverColorBack, ...rest }) => {
+	return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(StyledAvatarWrap, {
+		size: size || 34,
+		className,
+		$colorBack: colorBack || "neutral20",
+		$colorFront: colorFront || "blue2",
+		$hoverColorBack: hoverColorBack || "lightGray7",
+		...rest,
+		children: src ? /* @__PURE__ */ jsx("img", {
+			src,
+			width: size,
+			height: size
+		}) : /* @__PURE__ */ jsx(Profile, { stroke: colorFront || "blue2" })
+	}) });
 };
-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, Fragment as _Fragment } from "react/jsx-runtime";
-import { Profile } from '../Icon';
-import styled, { th } from '@xstyled/styled-components';
-var defaultDimension = 100;
-var StyledAvatarWrap = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  overflow: hidden;\n  color: ", ";\n  background-color: ", ";\n  width: ", ";\n  height: ", ";\n  :hover {\n    background-color: ", ";\n  }\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  overflow: hidden;\n  color: ", ";\n  background-color: ", ";\n  width: ", ";\n  height: ", ";\n  :hover {\n    background-color: ", ";\n  }\n"])), function (props) { return (props.$colorFront ? th.color(props.$colorFront) : 'auto'); }, function (props) { return (props.$colorBack ? th.color(props.$colorBack) : 'auto'); }, function (props) { return "".concat(props.size, "px"); }, function (props) { return "".concat(props.size, "px"); }, function (props) { return (props.$hoverColorBack ? th.color(props.$hoverColorBack) : 'auto'); });
-export var Avatar = function (_a) {
-    var src = _a.src, _b = _a.size, size = _b === void 0 ? defaultDimension : _b, colorFront = _a.colorFront, colorBack = _a.colorBack, className = _a.className, hoverColorBack = _a.hoverColorBack, rest = __rest(_a, ["src", "size", "colorFront", "colorBack", "className", "hoverColorBack"]);
-    return (_jsx(_Fragment, { children: _jsx(StyledAvatarWrap, __assign({ size: size || 34, className: className, "$colorBack": colorBack || 'neutral20', "$colorFront": colorFront || 'blue2', "$hoverColorBack": hoverColorBack || 'lightGray7' }, rest, { children: src ? _jsx("img", { src: src, width: size, height: size }) : _jsx(Profile, { stroke: colorFront || 'blue2' }) })) }));
-};
-var templateObject_1;
+//#endregion
+export { Avatar };

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

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

package/ui/Elements/Avatar/index.js

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

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

package/ui/Elements/Badge/Badge.d.ts

@@ -1,5 +1,4 @@
-import { default as React, FC, ReactElement } from 'react';
-
+import React, { type FC, type ReactElement } from 'react';
 export type Props = {
     children?: React.ReactNode;
     label?: string | number | ReactElement;

package/ui/Elements/Badge/Badge.js

@@ -1,45 +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 { useMemo } from "react";
+import styled$1, { css, th, useTheme } from "@xstyled/styled-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Elements/Badge/Badge.tsx
+const Circle = styled$1.div`
+  min-width: 12px;
+  display: flex;
+  align-items: center;
+  height: ${({ size }) => size === "small" ? "16px" : "24px"};
+  padding: ${({ size }) => size === "small" ? "0 5px" : "3px 8px"};
+  color: white;
+  gap: 10px;
+  background-color: ${({ color }) => color};
+  border-radius: 29px;
+  line-height: 15.6px;
+  font-family: ${th("fonts.primary")};
+  font-size: ${({ size }) => size === "small" ? "12px" : "14px"};
+  font-weight: semiBold;
+  position: absolute;
+  top: ${({ topPosition }) => topPosition && "-15%"};
+  left: ${({ horizontalPosition }) => horizontalPosition === "middle" ? "50%" : "100%"};
+  z-index: 1;
+`;
+const RelativeWrap = styled$1.div`
+  position: relative;
+  ${({ width }) => width ? css`
+          width: ${width};
+        ` : ""};
+`;
+const Badge = ({ children, color = "red1", size = "default", label, childWidth, topPosition, horizontalPosition = "middle" }) => {
+	const theme = useTheme();
+	const themeColor = th.color(color)({ theme });
+	const badgeLabel = useMemo(() => {
+		return typeof label === "number" ? label >= 100 ? "99+" : label : label;
+	}, [label]);
+	if (!label || typeof label === "number" && label <= 0) return /* @__PURE__ */ jsx(Fragment, { children });
+	return /* @__PURE__ */ jsxs(RelativeWrap, {
+		width: childWidth,
+		children: [/* @__PURE__ */ jsx(Circle, {
+			color: themeColor,
+			size,
+			topPosition,
+			horizontalPosition,
+			children: /* @__PURE__ */ jsx("div", {
+				className: "label",
+				children: badgeLabel
+			})
+		}), children]
+	});
 };
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import styled, { css, useTheme, th } from '@xstyled/styled-components';
-var Circle = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  min-width: 12px;\n  display: flex;\n  align-items: center;\n  height: ", ";\n  padding: ", ";\n  color: white;\n  gap: 10px;\n  background-color: ", ";\n  border-radius: 29px;\n  line-height: 15.6px;\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: semiBold;\n  position: absolute;\n  top: ", ";\n  left: ", ";\n  z-index: 1;\n"], ["\n  min-width: 12px;\n  display: flex;\n  align-items: center;\n  height: ", ";\n  padding: ", ";\n  color: white;\n  gap: 10px;\n  background-color: ", ";\n  border-radius: 29px;\n  line-height: 15.6px;\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: semiBold;\n  position: absolute;\n  top: ", ";\n  left: ", ";\n  z-index: 1;\n"])), function (_a) {
-    var size = _a.size;
-    return (size === 'small' ? '16px' : '24px');
-}, function (_a) {
-    var size = _a.size;
-    return (size === 'small' ? '0 5px' : '3px 8px');
-}, function (_a) {
-    var color = _a.color;
-    return color;
-}, th('fonts.primary'), function (_a) {
-    var size = _a.size;
-    return (size === 'small' ? '12px' : '14px');
-}, function (_a) {
-    var topPosition = _a.topPosition;
-    return topPosition && '-15%';
-}, function (_a) {
-    var horizontalPosition = _a.horizontalPosition;
-    return (horizontalPosition === 'middle' ? '50%' : '100%');
-});
-var RelativeWrap = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  ", ";\n"], ["\n  position: relative;\n  ", ";\n"])), function (_a) {
-    var width = _a.width;
-    return width
-        ? css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          width: ", ";\n        "], ["\n          width: ", ";\n        "])), width) : '';
-});
-var Badge = function (_a) {
-    var children = _a.children, _b = _a.color, color = _b === void 0 ? 'red1' : _b, _c = _a.size, size = _c === void 0 ? 'default' : _c, label = _a.label, childWidth = _a.childWidth, topPosition = _a.topPosition, _d = _a.horizontalPosition, horizontalPosition = _d === void 0 ? 'middle' : _d;
-    var theme = useTheme();
-    var themeColor = th.color(color)({ theme: theme });
-    var badgeLabel = useMemo(function () {
-        return typeof label === 'number' ? (label >= 100 ? '99+' : label) : label;
-    }, [label]);
-    if (!label || (typeof label === 'number' && label <= 0)) {
-        return _jsx(_Fragment, { children: children });
-    }
-    return (_jsxs(RelativeWrap, { width: childWidth, children: [_jsx(Circle, { color: themeColor, size: size, topPosition: topPosition, horizontalPosition: horizontalPosition, children: _jsx("div", { className: "label", children: badgeLabel }) }), children] }));
-};
-export default Badge;
-var templateObject_1, templateObject_2, templateObject_3;
+//#endregion
+export { Badge as default };

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

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

package/ui/Elements/Badge/index.js

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

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

package/ui/Elements/BarChartSymbol/BarChartSymbol.d.ts

@@ -1,5 +1,4 @@
 import { FC } from 'react';
-
 export type BarChartSymbolProps = {
     selected?: number;
     total?: number;

package/ui/Elements/BarChartSymbol/BarChartSymbol.js

@@ -1,7 +1,22 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { x } from '@xstyled/styled-components';
-import { Bar } from './styles';
-export var BarChartSymbol = function (_a) {
-    var _b = _a.total, total = _b === void 0 ? 3 : _b, _c = _a.height, height = _c === void 0 ? 14 : _c, _d = _a.minHeight, minHeight = _d === void 0 ? 7 : _d, _e = _a.selected, selected = _e === void 0 ? 3 : _e, _f = _a.gap, gap = _f === void 0 ? 2 : _f, _g = _a.width, width = _g === void 0 ? 3 : _g, color = _a.color;
-    return (_jsx(x.div, { display: "flex", alignItems: "flex-end", gap: "".concat(gap, "px"), children: Array.from({ length: total }).map(function (_, index) { return (_jsx(Bar, { total: total, index: index + 1, height: height, minHeight: minHeight, selected: selected, color: color, width: width }, index)); }) }));
+import { Bar } from "./styles.js";
+import { x } from "@xstyled/styled-components";
+import { jsx } from "react/jsx-runtime";
+//#region packages/ui/Elements/BarChartSymbol/BarChartSymbol.tsx
+const BarChartSymbol = ({ total = 3, height = 14, minHeight = 7, selected = 3, gap = 2, width = 3, color }) => {
+	return /* @__PURE__ */ jsx(x.div, {
+		display: "flex",
+		alignItems: "flex-end",
+		gap: `${gap}px`,
+		children: Array.from({ length: total }).map((_, index) => /* @__PURE__ */ jsx(Bar, {
+			total,
+			index: index + 1,
+			height,
+			minHeight,
+			selected,
+			color,
+			width
+		}, index))
+	});
 };
+//#endregion
+export { BarChartSymbol };

package/ui/Elements/BarChartSymbol/index.js

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

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

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

@@ -1,9 +1,9 @@
-export declare const Bar: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+export declare const Bar: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     height: number;
     minHeight: number;
     index: number;
     total: number;
     selected: number;
-    color?: string | undefined;
-    width?: number | undefined;
+    color?: string;
+    width?: number;
 }, never>;

package/ui/Elements/BarChartSymbol/styles.js

@@ -1,16 +1,10 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import { styled, th } from '@xstyled/styled-components';
-export var Bar = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", "px;\n  height: ", "px;\n  background-color: ", ";\n  border-radius: 7px;\n"], ["\n  width: ", "px;\n  height: ", "px;\n  background-color: ", ";\n  border-radius: 7px;\n"])), function (_a) {
-    var width = _a.width;
-    return width;
-}, function (_a) {
-    var index = _a.index, height = _a.height, total = _a.total, minHeight = _a.minHeight;
-    return minHeight + (index - 1) * ((height - minHeight) / (total - 1));
-}, function (_a) {
-    var selected = _a.selected, index = _a.index, color = _a.color;
-    return (selected >= index ? th.color(color || 'red1') : th.color('lightGray6'));
-});
-var templateObject_1;
+import { styled, th } from "@xstyled/styled-components";
+//#region packages/ui/Elements/BarChartSymbol/styles.ts
+const Bar = styled.div`
+  width: ${({ width }) => width}px;
+  height: ${({ index, height, total, minHeight }) => minHeight + (index - 1) * ((height - minHeight) / (total - 1))}px;
+  background-color: ${({ selected, index, color }) => selected >= index ? th.color(color || "red1") : th.color("lightGray6")};
+  border-radius: 7px;
+`;
+//#endregion
+export { Bar };

package/ui/Elements/BorderedBox/BorderedBox.d.ts

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

package/ui/Elements/BorderedBox/BorderedBox.js

@@ -1,35 +1,21 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-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 styled, { x } from '@xstyled/styled-components';
-var StyledBox = styled(x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  box-sizing: border-box;\n  flex-direction: column;\n  padding: 3;\n  border: slim;\n  border-color: lightGray3;\n  border-radius: md;\n"], ["\n  display: flex;\n  box-sizing: border-box;\n  flex-direction: column;\n  padding: 3;\n  border: slim;\n  border-color: lightGray3;\n  border-radius: md;\n"])));
-var BorderedBox = function (_a) {
-    var children = _a.children, className = _a.className, id = _a.id, rest = __rest(_a, ["children", "className", "id"]);
-    return (_jsx(StyledBox, __assign({ id: id, className: className }, rest, { children: children })));
-};
-export default BorderedBox;
-var templateObject_1;
+import "react";
+import styled$1, { x } from "@xstyled/styled-components";
+import { jsx } from "react/jsx-runtime";
+//#region packages/ui/Elements/BorderedBox/BorderedBox.tsx
+const StyledBox = styled$1(x.div)`
+  display: flex;
+  box-sizing: border-box;
+  flex-direction: column;
+  padding: 3;
+  border: slim;
+  border-color: lightGray3;
+  border-radius: md;
+`;
+const BorderedBox = ({ children, className, id, ...rest }) => /* @__PURE__ */ jsx(StyledBox, {
+	id,
+	className,
+	...rest,
+	children
+});
+//#endregion
+export { BorderedBox as default };

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

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

package/ui/Elements/BorderedBox/index.js

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

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

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type BorderedBoxProps = {
     children: React.ReactNode;
     className?: string;

package/ui/Elements/Button/Button.d.ts

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

package/ui/Elements/Button/Button.js

@@ -1,30 +1,44 @@
-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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Spinner } from '../Spinner';
-import { StyledButton, LoadingIconWrapper, StyledIcon, StyledWrapper } from './styles';
-var Button = function (_a) {
-    var isLoading = _a.isLoading, loadingText = _a.loadingText, icon = _a.icon, iconLeft = _a.iconLeft, iconRight = _a.iconRight, iconFillColor = _a.iconFillColor, iconStrokeColor = _a.iconStrokeColor, _b = _a.variant, variant = _b === void 0 ? 'default' : _b, _c = _a.appearance, appearance = _c === void 0 ? 'primary' : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.fullWidth, fullWidth = _e === void 0 ? false : _e, height = _a.height, buttonRef = _a.buttonRef, onClick = _a.onClick, props = __rest(_a, ["isLoading", "loadingText", "icon", "iconLeft", "iconRight", "iconFillColor", "iconStrokeColor", "variant", "appearance", "disabled", "fullWidth", "height", "buttonRef", "onClick"]);
-    return (_jsx(StyledButton, __assign({}, props, { onClick: !disabled && !isLoading ? onClick : undefined, "data-variant": variant, "data-appearance": appearance, disabled: disabled, iconPadding: !!icon && !props.children, ref: buttonRef, fullWidth: fullWidth, height: height, children: _jsxs(StyledWrapper, { children: [iconLeft && (typeof iconLeft === 'string' ? _jsx(StyledIcon, { "$addMarginRight": !!iconLeft, icon: iconLeft, fill: iconFillColor, stroke: iconStrokeColor }) : iconLeft), isLoading && (_jsxs(_Fragment, { children: [_jsx(LoadingIconWrapper, { "$addMarginRight": !!loadingText || !!props.children, children: _jsx(Spinner, { variant: "sm", appearance: "processing" }) }), loadingText] })), props.children || (icon && (typeof icon === 'string' ? _jsx(StyledIcon, { icon: icon, fill: iconFillColor, stroke: iconStrokeColor }) : icon)), iconRight && (typeof iconRight === 'string' ? _jsx(StyledIcon, { "$addMarginLeft": !!iconRight, icon: iconRight, fill: iconFillColor, stroke: iconStrokeColor }) : iconRight)] }) })));
-};
-export default Button;
+import { Spinner } from "../Spinner/Spinner.js";
+import "../Spinner/index.js";
+import { LoadingIconWrapper, StyledButton, StyledIcon, StyledWrapper } from "./styles.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Elements/Button/Button.tsx
+const Button = ({ isLoading, loadingText, icon, iconLeft, iconRight, iconFillColor, iconStrokeColor, variant = "default", appearance = "primary", disabled = false, fullWidth = false, height, buttonRef, onClick, ...props }) => /* @__PURE__ */ jsx(StyledButton, {
+	...props,
+	onClick: !disabled && !isLoading ? onClick : void 0,
+	"data-variant": variant,
+	"data-appearance": appearance,
+	disabled,
+	iconPadding: !!icon && !props.children,
+	ref: buttonRef,
+	fullWidth,
+	height,
+	children: /* @__PURE__ */ jsxs(StyledWrapper, { children: [
+		iconLeft && (typeof iconLeft === "string" ? /* @__PURE__ */ jsx(StyledIcon, {
+			$addMarginRight: !!iconLeft,
+			icon: iconLeft,
+			fill: iconFillColor,
+			stroke: iconStrokeColor
+		}) : iconLeft),
+		isLoading && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(LoadingIconWrapper, {
+			$addMarginRight: !!loadingText || !!props.children,
+			children: /* @__PURE__ */ jsx(Spinner, {
+				variant: "sm",
+				appearance: "processing"
+			})
+		}), loadingText] }),
+		props.children || icon && (typeof icon === "string" ? /* @__PURE__ */ jsx(StyledIcon, {
+			icon,
+			fill: iconFillColor,
+			stroke: iconStrokeColor
+		}) : icon),
+		iconRight && (typeof iconRight === "string" ? /* @__PURE__ */ jsx(StyledIcon, {
+			$addMarginLeft: !!iconRight,
+			icon: iconRight,
+			fill: iconFillColor,
+			stroke: iconStrokeColor
+		}) : iconRight)
+	] })
+});
+//#endregion
+export { Button as default };

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

@@ -1,6 +1,5 @@
-import { default as Button } from './Button';
+import Button from './Button';
 import { AppearanceValue } from './types';
-
 export { Button };
 export type { AppearanceValue };
 export default Button;

package/ui/Elements/Button/index.js

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

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

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

@@ -1,17 +1,16 @@
-/// <reference types="react" />
-export declare const StyledWrapper: import('styled-components').StyledComponent<"span", import('@xstyled/system').Theme, {}, never>;
-export declare const LoadingIconWrapper: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+export declare const StyledWrapper: import("styled-components").StyledComponent<"span", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const LoadingIconWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     $addMarginRight: boolean;
 }, never>;
-export declare const StyledIcon: import('styled-components').StyledComponent<import('react').FC<import('../Icon').IconProps>, import('@xstyled/system').Theme, {
-    $addMarginRight?: boolean | undefined;
-    $addMarginLeft?: boolean | undefined;
+export declare const StyledIcon: import("styled-components").StyledComponent<import("react").FC<import("../Icon").IconProps>, import("@xstyled/styled-components").Theme, {
+    $addMarginRight?: boolean;
+    $addMarginLeft?: boolean;
 }, never>;
-export declare const StyledButton: import('styled-components').StyledComponent<"button", import('@xstyled/system').Theme, {
+export declare const StyledButton: import("styled-components").StyledComponent<"button", import("@xstyled/styled-components").Theme, {
     disabled: boolean;
     children?: any;
     onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
-    iconPadding?: boolean | undefined;
-    fullWidth?: boolean | undefined;
-    height?: string | undefined;
+    iconPadding?: boolean;
+    fullWidth?: boolean;
+    height?: string;
 }, never>;