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

package/ui/Elements/Toast/index.js

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

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

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

@@ -1,8 +1,8 @@
-export declare const Title: import('styled-components').StyledComponent<"span", import('@xstyled/system').Theme, {}, never>;
-export declare const Text: import('styled-components').StyledComponent<"span", import('@xstyled/system').Theme, {}, never>;
-export declare const ContentWrapper: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
-export declare const CloseWrapper: import('styled-components').StyledComponent<"span", import('@xstyled/system').Theme, {}, never>;
-export declare const Container: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
-    autoClose?: number | undefined;
+export declare const Title: import("styled-components").StyledComponent<"span", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const Text: import("styled-components").StyledComponent<"span", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const ContentWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const CloseWrapper: import("styled-components").StyledComponent<"span", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const Container: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
+    autoClose?: number;
     fill: string;
 }, never>;

package/ui/Elements/Toast/styles.js

@@ -1,22 +1,76 @@
-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, keyframes, th } from '@xstyled/styled-components';
-export var Title = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: block;\n  margin-bottom: 5px;\n  line-height: 18px;\n  font-weight: 700;\n  color: ", ";\n"], ["\n  display: block;\n  margin-bottom: 5px;\n  line-height: 18px;\n  font-weight: 700;\n  color: ", ";\n"])), th('colors.blue2'));
-export var Text = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  font-size: 12px;\n  line-height: 18px;\n  font-weight: 500;\n  color: ", ";\n"], ["\n  display: block;\n  font-size: 12px;\n  line-height: 18px;\n  font-weight: 500;\n  color: ", ";\n"])), th('colors.gray1'));
-export var ContentWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n"], ["\n  display: flex;\n  justify-content: space-between;\n"])));
-export var CloseWrapper = styled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  align-items: flex-start;\n  margin-left: 15px;\n\n  svg {\n    cursor: pointer;\n  }\n"], ["\n  display: flex;\n  align-items: flex-start;\n  margin-left: 15px;\n\n  svg {\n    cursor: pointer;\n  }\n"])));
-var timerAnimation = keyframes(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    to {\n       transform: scaleX(0)\n    }\n"], ["\n    to {\n       transform: scaleX(0)\n    }\n"])));
-var after = function (autoClose) { return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  &:after {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    content: '';\n    height: 4px;\n    width: 100%;\n    transform-origin: left center;\n    animation: ", " ", "ms linear;\n    border-radius: ", ";\n    background-color: ", ";\n  }\n"], ["\n  &:after {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    content: '';\n    height: 4px;\n    width: 100%;\n    transform-origin: left center;\n    animation: ", " ", "ms linear;\n    border-radius: ", ";\n    background-color: ", ";\n  }\n"])), timerAnimation, autoClose, th.radius('lg'), th.color('lightGray5')); };
-export var Container = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  position: relative;\n  background-color: white;\n  border-radius: ", ";\n  box-shadow: ", ";\n  padding: 10px;\n\n  @media ", " {\n    font-size: 14px;\n  }\n\n  &:before {\n    position: absolute;\n    top: 5px;\n    bottom: 5px;\n    left: 5px;\n    content: '';\n    width: 4px;\n    ", ";\n    border-radius: ", ";\n    background-color: ", ";\n  }\n\n  ", ";\n"], ["\n  display: flex;\n  position: relative;\n  background-color: white;\n  border-radius: ", ";\n  box-shadow: ", ";\n  padding: 10px;\n\n  @media ", " {\n    font-size: 14px;\n  }\n\n  &:before {\n    position: absolute;\n    top: 5px;\n    bottom: 5px;\n    left: 5px;\n    content: '';\n    width: 4px;\n    ", ";\n    border-radius: ", ";\n    background-color: ", ";\n  }\n\n  ", ";\n"])), th.radius('lg'), th.shadow('cornerDialogShadow'), '(max-width: 576px)', function (_a) {
-    var autoClose = _a.autoClose;
-    return autoClose && 'bottom: 8px';
-}, th.radius('lg'), function (_a) {
-    var fill = _a.fill;
-    return th.color(fill);
-}, function (_a) {
-    var autoClose = _a.autoClose;
-    return autoClose && after(autoClose);
-});
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+import styled$1, { css, keyframes, th } from "@xstyled/styled-components";
+//#region packages/ui/Elements/Toast/styles.ts
+const Title = styled$1.span`
+  display: block;
+  margin-bottom: 5px;
+  line-height: 18px;
+  font-weight: 700;
+  color: ${th("colors.blue2")};
+`;
+const Text = styled$1.span`
+  display: block;
+  font-size: 12px;
+  line-height: 18px;
+  font-weight: 500;
+  color: ${th("colors.gray1")};
+`;
+const ContentWrapper = styled$1.div`
+  display: flex;
+  justify-content: space-between;
+`;
+const CloseWrapper = styled$1.span`
+  display: flex;
+  align-items: flex-start;
+  margin-left: 15px;
+
+  svg {
+    cursor: pointer;
+  }
+`;
+const timerAnimation = keyframes`
+    to {
+       transform: scaleX(0)
+    }
+`;
+const after = (autoClose) => css`
+  &:after {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    content: '';
+    height: 4px;
+    width: 100%;
+    transform-origin: left center;
+    animation: ${timerAnimation} ${autoClose}ms linear;
+    border-radius: ${th.radius("lg")};
+    background-color: ${th.color("lightGray5")};
+  }
+`;
+const Container = styled$1.div`
+  display: flex;
+  position: relative;
+  background-color: white;
+  border-radius: ${th.radius("lg")};
+  box-shadow: ${th.shadow("cornerDialogShadow")};
+  padding: 10px;
+
+  @media ${"(max-width: 576px)"} {
+    font-size: 14px;
+  }
+
+  &:before {
+    position: absolute;
+    top: 5px;
+    bottom: 5px;
+    left: 5px;
+    content: '';
+    width: 4px;
+    ${({ autoClose }) => autoClose && "bottom: 8px"};
+    border-radius: ${th.radius("lg")};
+    background-color: ${({ fill }) => th.color(fill)};
+  }
+
+  ${({ autoClose }) => autoClose && after(autoClose)};
+`;
+//#endregion
+export { CloseWrapper, Container, ContentWrapper, Text, Title };

package/ui/Elements/Toggle/Toggle.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 Toggle: FC<Props>;
 export default Toggle;

package/ui/Elements/Toggle/Toggle.js

@@ -1,62 +1,124 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
+import { FieldLabel } from "../Label/Label.js";
+import "../Label/index.js";
+import SpaceAroundWrap from "../SpaceAround/SpaceAround.js";
+import "../SpaceAround/index.js";
+import "react";
+import styled$1, { css } from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Elements/Toggle/Toggle.tsx
+const isHorizontal = (position) => position && ["left", "right"].includes(position);
+const StyledSpaceAroundWrap = styled$1(SpaceAroundWrap)`
+  display: flex;
+  flex-direction: ${({ labelPosition }) => labelPosition === "left" ? "row" : labelPosition === "right" ? "row-reverse" : "column"};
+  justify-content: ${({ labelPosition, labelJustify }) => labelPosition === "right" ? "flex-end" : labelJustify === "between" ? "space-between" : "flex-start"};
+  ${({ labelPosition }) => isHorizontal(labelPosition) ? "margin-top: 1rem" : ""}
+`;
+const StyledFieldLabel = styled$1(FieldLabel)`
+  cursor: pointer;
+  ${({ labelPosition }) => isHorizontal(labelPosition) ? "margin-bottom: 0;" : ""}
+  ${({ labelPosition }) => labelPosition === "left" ? "margin-right: 1rem;" : labelPosition === "right" ? "margin-left: 1rem;" : ""}
+`;
+const disabledStyles = css`
+  opacity: 0.4;
+`;
+const StyledToggle = styled$1.div`
+  aspect-ratio: 1 / 1;
+  width: 100%;
+  height: 100%;
+  border-radius: 7px;
+  background-color: lightGray5;
+  border: 3px solid;
+  border-color: lightGray5;
+  position: relative;
+  transition: all 100ms ease-out;
+
+  ${(props) => props.disabled ? disabledStyles : ""}
+
+  input:checked + & {
+    background-color: red1;
+    border-color: red1;
+
+    & > span {
+      transform: translate(75%, -50%);
+      background-color: white;
+    }
+  }
+`;
+const StyledDot = styled$1.span`
+  aspect-ratio: 1 / 1;
+  background-color: white;
+  border-radius: 50%;
+  position: absolute;
+  top: 50%;
+  left: 10%;
+  transform: translate(-20%, -50%);
+  transition: all 100ms ease-out;
+`;
+const HiddenInput = styled$1.input`
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  border-radius: 7px;
+  z-index: 1;
+  margin: 0;
+
+  ${({ $enabled }) => $enabled ? "cursor: pointer;" : ""}
+`;
+const Wrapper = styled$1.div`
+  position: relative;
+  border-radius: 8px;
+  overflow: hidden;
+  flex-shrink: 0;
+  &[data-appearance='primary'] {
+    width: 24px;
+    height: 14px;
+    ${StyledDot} {
+      height: 10px;
+    }
+  }
+  &[data-appearance='grid'] {
+    width: 28px;
+    height: 16px;
+    ${StyledDot} {
+      height: 12px;
+    }
+  }
+`;
+const Toggle = ({ onChange, label, name, checked, defaultChecked, spaceAround = false, disabled = false, labelPosition = "default", labelJustify, variant = "primary", spaceBetween = false, readOnly, ...rest }) => {
+	return /* @__PURE__ */ jsxs(StyledSpaceAroundWrap, {
+		spaceBetween,
+		spaceAround,
+		labelPosition,
+		labelJustify,
+		children: [label && /* @__PURE__ */ jsx(StyledFieldLabel, {
+			htmlFor: name,
+			labelPosition,
+			children: label
+		}), /* @__PURE__ */ jsxs(Wrapper, {
+			"data-appearance": variant,
+			children: [/* @__PURE__ */ jsx(HiddenInput, {
+				id: name,
+				name,
+				type: "checkbox",
+				checked,
+				$enabled: !disabled,
+				defaultChecked,
+				onChange: !disabled ? onChange : void 0,
+				disabled,
+				"data-cy": name ? `${name}Switch` : void 0,
+				"data-testid": name ? `toggle-${name}` : void 0,
+				readOnly
+			}), /* @__PURE__ */ jsx(StyledToggle, {
+				active: !!checked,
+				disabled,
+				...rest,
+				children: /* @__PURE__ */ jsx(StyledDot, {})
+			})]
+		})]
+	});
 };
-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 { FieldLabel } from '../Label';
-import { SpaceAroundWrap } from '../SpaceAround';
-import styled, { css } from '@xstyled/styled-components';
-var isHorizontal = function (position) { return position && ['left', 'right'].includes(position); };
-var StyledSpaceAroundWrap = styled(SpaceAroundWrap)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: ", ";\n  justify-content: ", ";\n  ", "\n"], ["\n  display: flex;\n  flex-direction: ", ";\n  justify-content: ", ";\n  ", "\n"])), function (_a) {
-    var labelPosition = _a.labelPosition;
-    return labelPosition === 'left' ? 'row' : labelPosition === 'right' ? 'row-reverse' : 'column';
-}, function (_a) {
-    var labelPosition = _a.labelPosition, labelJustify = _a.labelJustify;
-    return labelPosition === 'right' ? 'flex-end' : labelJustify === 'between' ? 'space-between' : 'flex-start';
-}, function (_a) {
-    var labelPosition = _a.labelPosition;
-    return (isHorizontal(labelPosition) ? 'margin-top: 1rem' : '');
-});
-var StyledFieldLabel = styled(FieldLabel)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  cursor: pointer;\n  ", "\n  ", "\n"], ["\n  cursor: pointer;\n  ", "\n  ", "\n"])), function (_a) {
-    var labelPosition = _a.labelPosition;
-    return (isHorizontal(labelPosition) ? 'margin-bottom: 0;' : '');
-}, function (_a) {
-    var labelPosition = _a.labelPosition;
-    return labelPosition === 'left' ? 'margin-right: 1rem;' : labelPosition === 'right' ? 'margin-left: 1rem;' : '';
-});
-var disabledStyles = css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  opacity: 0.4;\n"], ["\n  opacity: 0.4;\n"])));
-var StyledToggle = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  aspect-ratio: 1 / 1;\n  width: 100%;\n  height: 100%;\n  border-radius: 7px;\n  background-color: lightGray5;\n  border: 3px solid;\n  border-color: lightGray5;\n  position: relative;\n  transition: all 100ms ease-out;\n\n  ", "\n\n  input:checked + & {\n    background-color: red1;\n    border-color: red1;\n\n    & > span {\n      transform: translate(75%, -50%);\n      background-color: white;\n    }\n  }\n"], ["\n  aspect-ratio: 1 / 1;\n  width: 100%;\n  height: 100%;\n  border-radius: 7px;\n  background-color: lightGray5;\n  border: 3px solid;\n  border-color: lightGray5;\n  position: relative;\n  transition: all 100ms ease-out;\n\n  ", "\n\n  input:checked + & {\n    background-color: red1;\n    border-color: red1;\n\n    & > span {\n      transform: translate(75%, -50%);\n      background-color: white;\n    }\n  }\n"])), function (props) { return (props.disabled ? disabledStyles : ''); });
-var StyledDot = styled.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  aspect-ratio: 1 / 1;\n  background-color: white;\n  border-radius: 50%;\n  position: absolute;\n  top: 50%;\n  left: 10%;\n  transform: translate(-20%, -50%);\n  transition: all 100ms ease-out;\n"], ["\n  aspect-ratio: 1 / 1;\n  background-color: white;\n  border-radius: 50%;\n  position: absolute;\n  top: 50%;\n  left: 10%;\n  transform: translate(-20%, -50%);\n  transition: all 100ms ease-out;\n"])));
-var HiddenInput = styled.input(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  opacity: 0;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  left: 0;\n  top: 0;\n  border-radius: 7px;\n  z-index: 1;\n  margin: 0;\n\n  ", "\n"], ["\n  opacity: 0;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  left: 0;\n  top: 0;\n  border-radius: 7px;\n  z-index: 1;\n  margin: 0;\n\n  ", "\n"])), function (_a) {
-    var $enabled = _a.$enabled;
-    return ($enabled ? 'cursor: pointer;' : '');
-});
-var Wrapper = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: relative;\n  border-radius: 8px;\n  overflow: hidden;\n  flex-shrink: 0;\n  &[data-appearance='primary'] {\n    width: 24px;\n    height: 14px;\n    ", " {\n      height: 10px;\n    }\n  }\n  &[data-appearance='grid'] {\n    width: 28px;\n    height: 16px;\n    ", " {\n      height: 12px;\n    }\n  }\n"], ["\n  position: relative;\n  border-radius: 8px;\n  overflow: hidden;\n  flex-shrink: 0;\n  &[data-appearance='primary'] {\n    width: 24px;\n    height: 14px;\n    ", " {\n      height: 10px;\n    }\n  }\n  &[data-appearance='grid'] {\n    width: 28px;\n    height: 16px;\n    ", " {\n      height: 12px;\n    }\n  }\n"])), StyledDot, StyledDot);
-var Toggle = function (_a) {
-    var onChange = _a.onChange, label = _a.label, name = _a.name, checked = _a.checked, defaultChecked = _a.defaultChecked, _b = _a.spaceAround, spaceAround = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.labelPosition, labelPosition = _d === void 0 ? 'default' : _d, labelJustify = _a.labelJustify, _e = _a.variant, variant = _e === void 0 ? 'primary' : _e, _f = _a.spaceBetween, spaceBetween = _f === void 0 ? false : _f, readOnly = _a.readOnly, rest = __rest(_a, ["onChange", "label", "name", "checked", "defaultChecked", "spaceAround", "disabled", "labelPosition", "labelJustify", "variant", "spaceBetween", "readOnly"]);
-    return (_jsxs(StyledSpaceAroundWrap, { spaceBetween: spaceBetween, spaceAround: spaceAround, labelPosition: labelPosition, labelJustify: labelJustify, children: [label && (_jsx(StyledFieldLabel, { htmlFor: name, labelPosition: labelPosition, children: label })), _jsxs(Wrapper, { "data-appearance": variant, children: [_jsx(HiddenInput, { id: name, name: name, type: "checkbox", checked: checked, "$enabled": !disabled, defaultChecked: defaultChecked, onChange: !disabled ? onChange : undefined, disabled: disabled, "data-cy": name ? "".concat(name, "Switch") : undefined, "data-testid": name ? "toggle-".concat(name) : undefined, readOnly: readOnly }), _jsx(StyledToggle, __assign({ active: !!checked, disabled: disabled }, rest, { children: _jsx(StyledDot, {}) }))] })] }));
-};
-export default Toggle;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+//#endregion
+export { Toggle as default };

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

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

package/ui/Elements/Toggle/index.js

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

package/ui/Elements/Toggle/stories/Toggle.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/Toggle/types.d.ts

@@ -1,5 +1,4 @@
 import { ChangeEvent } from 'react';
-
 type SpaceAroundProps = {
     marginTop?: number;
     marginRight?: number;

package/ui/Elements/Tooltip/Tooltip.d.ts

@@ -1,6 +1,5 @@
-import { default as React, ReactNode, FC } from 'react';
-import { Placement } from '@popperjs/core';
-
+import React, { type ReactNode, type FC } from 'react';
+import { type Placement } from '@popperjs/core';
 export type Props = {
     children?: React.ReactNode;
     placement?: Placement;

package/ui/Elements/Tooltip/Tooltip.js

@@ -1,25 +1,51 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
+import { Paragraph4 } from "../Typography/Typography.js";
+import "../Typography/index.js";
+import Popover from "../../Blocks/Popover/index.js";
+import { useRef, useState } from "react";
+import styled$1 from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Elements/Tooltip/Tooltip.tsx
+const Container = styled$1.div`
+  width: fit-content;
+`;
+const TooltipWrapper = styled$1.div`
+  display: flex;
+  flex-direction: column;
+  background-color: white;
+  padding: 8px 10px;
+  margin-top: 4px;
+  border-radius: 8px;
+  box-shadow: tooltipShadow;
+  gap: 2px;
+`;
+const Tooltip = ({ children, placement, title, subtitle }) => {
+	const [visible, setVisible] = useState(false);
+	const ref = useRef(null);
+	const handleMouseEnter = () => {
+		setVisible(true);
+	};
+	const handleMouseLeave = () => {
+		setVisible(false);
+	};
+	return /* @__PURE__ */ jsxs(Container, {
+		ref,
+		onMouseEnter: handleMouseEnter,
+		onMouseLeave: handleMouseLeave,
+		children: [children, visible && /* @__PURE__ */ jsx(Popover, {
+			parentRef: ref,
+			placement: placement ?? "bottom",
+			children: /* @__PURE__ */ jsxs(TooltipWrapper, { children: [title && /* @__PURE__ */ jsx(Paragraph4, {
+				mt: 1,
+				mb: 1,
+				variant: "bold",
+				children: title
+			}), subtitle && /* @__PURE__ */ jsx(Paragraph4, {
+				mt: 1,
+				mb: 1,
+				children: subtitle
+			})] })
+		})]
+	});
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useState } from 'react';
-import Popover from '../../Blocks/Popover';
-import { Paragraph4 } from '../Typography';
-import styled from '@xstyled/styled-components';
-var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: fit-content;\n"], ["\n  width: fit-content;\n"])));
-var TooltipWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  background-color: white;\n  padding: 8px 10px;\n  margin-top: 4px;\n  border-radius: 8px;\n  box-shadow: tooltipShadow;\n  gap: 2px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  background-color: white;\n  padding: 8px 10px;\n  margin-top: 4px;\n  border-radius: 8px;\n  box-shadow: tooltipShadow;\n  gap: 2px;\n"])));
-var Tooltip = function (_a) {
-    var children = _a.children, placement = _a.placement, title = _a.title, subtitle = _a.subtitle;
-    var _b = useState(false), visible = _b[0], setVisible = _b[1];
-    var ref = useRef(null);
-    var handleMouseEnter = function () {
-        setVisible(true);
-    };
-    var handleMouseLeave = function () {
-        setVisible(false);
-    };
-    return (_jsxs(Container, { ref: ref, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [children, visible && (_jsx(Popover, { parentRef: ref, placement: placement !== null && placement !== void 0 ? placement : 'bottom', children: _jsxs(TooltipWrapper, { children: [title && (_jsx(Paragraph4, { mt: 1, mb: 1, variant: "bold", children: title })), subtitle && (_jsx(Paragraph4, { mt: 1, mb: 1, children: subtitle }))] }) }))] }));
-};
-export default Tooltip;
-var templateObject_1, templateObject_2;
+//#endregion
+export { Tooltip as default };

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

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

package/ui/Elements/Tooltip/index.js

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

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

package/ui/Elements/Typography/Typography.d.ts

@@ -1,6 +1,5 @@
-import { FC } from 'react';
-import { TextProps as BaseTextProps } from '../Text';
-
+import { type FC } from 'react';
+import { type TextProps as BaseTextProps } from '../Text';
 export declare const Text: FC<BaseTextProps>;
 export declare const Paragraph1: FC<BaseTextProps>;
 export declare const Paragraph2: FC<BaseTextProps>;

package/ui/Elements/Typography/Typography.js

@@ -1,46 +1,75 @@
-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 { Text as BaseText } from '../Text';
-export var Text = function (_a) {
-    var _b = _a.as, as = _b === void 0 ? 'p' : _b, _c = _a.fontFamily, fontFamily = _c === void 0 ? 'primary' : _c, _d = _a.fontSize, fontSize = _d === void 0 ? '10px' : _d, variant = _a.variant, props = __rest(_a, ["as", "fontFamily", "fontSize", "variant"]);
-    return (_jsx(BaseText, __assign({ as: as, fontFamily: fontFamily, fontSize: fontSize, fontWeight: variant }, props)));
-};
-var BaseHeading = function (_a) {
-    var _b = _a.fontFamily, fontFamily = _b === void 0 ? 'heading' : _b, _c = _a.mb, mb = _c === void 0 ? 2 : _c, _d = _a.mt, mt = _d === void 0 ? 2 : _d, props = __rest(_a, ["fontFamily", "mb", "mt"]);
-    return (_jsx(Text, __assign({ fontFamily: fontFamily, mt: mt, mb: mb }, props)));
-};
-// Paragraphs
-export var Paragraph1 = function (props) { return _jsx(Text, __assign({ fontSize: "18px" }, props)); };
-export var Paragraph2 = function (props) { return _jsx(Text, __assign({ fontSize: "16px" }, props)); };
-export var Paragraph3 = function (props) { return _jsx(Text, __assign({ fontSize: "14px" }, props)); };
-export var Paragraph4 = function (props) { return _jsx(Text, __assign({ fontSize: "12px" }, props)); };
-export var Paragraph5 = function (props) { return _jsx(Text, __assign({ fontSize: "10px" }, props)); };
-// Headings
-export var H1 = function (props) { return _jsx(BaseHeading, __assign({ fontSize: "32px", as: "h1" }, props)); };
-export var H2 = function (props) { return _jsx(BaseHeading, __assign({ fontSize: "24px", as: "h2" }, props)); };
-export var H3 = function (props) { return _jsx(BaseHeading, __assign({ fontSize: "21px", as: "h3" }, props)); };
-export var H4 = function (props) { return _jsx(BaseHeading, __assign({ fontSize: "18px", as: "h4" }, props)); };
-export var H5 = function (props) { return _jsx(BaseHeading, __assign({ fontSize: "16px", as: "h5" }, props)); };
-export var H6 = function (props) { return _jsx(BaseHeading, __assign({ fontSize: "14px", as: "h6" }, props)); };
-export var H7 = function (props) { return _jsx(BaseHeading, __assign({ fontSize: "12px", as: "h6" }, props)); };
+import Text$1 from "../Text/Text.js";
+import "../Text/index.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region packages/ui/Elements/Typography/Typography.tsx
+const Text = ({ as = "p", fontFamily = "primary", fontSize = "10px", variant, ...props }) => /* @__PURE__ */ jsx(Text$1, {
+	as,
+	fontFamily,
+	fontSize,
+	fontWeight: variant,
+	...props
+});
+const BaseHeading = ({ fontFamily = "heading", mb = 2, mt = 2, ...props }) => /* @__PURE__ */ jsx(Text, {
+	fontFamily,
+	mt,
+	mb,
+	...props
+});
+const Paragraph1 = (props) => /* @__PURE__ */ jsx(Text, {
+	fontSize: "18px",
+	...props
+});
+const Paragraph2 = (props) => /* @__PURE__ */ jsx(Text, {
+	fontSize: "16px",
+	...props
+});
+const Paragraph3 = (props) => /* @__PURE__ */ jsx(Text, {
+	fontSize: "14px",
+	...props
+});
+const Paragraph4 = (props) => /* @__PURE__ */ jsx(Text, {
+	fontSize: "12px",
+	...props
+});
+const Paragraph5 = (props) => /* @__PURE__ */ jsx(Text, {
+	fontSize: "10px",
+	...props
+});
+const H1 = (props) => /* @__PURE__ */ jsx(BaseHeading, {
+	fontSize: "32px",
+	as: "h1",
+	...props
+});
+const H2 = (props) => /* @__PURE__ */ jsx(BaseHeading, {
+	fontSize: "24px",
+	as: "h2",
+	...props
+});
+const H3 = (props) => /* @__PURE__ */ jsx(BaseHeading, {
+	fontSize: "21px",
+	as: "h3",
+	...props
+});
+const H4 = (props) => /* @__PURE__ */ jsx(BaseHeading, {
+	fontSize: "18px",
+	as: "h4",
+	...props
+});
+const H5 = (props) => /* @__PURE__ */ jsx(BaseHeading, {
+	fontSize: "16px",
+	as: "h5",
+	...props
+});
+const H6 = (props) => /* @__PURE__ */ jsx(BaseHeading, {
+	fontSize: "14px",
+	as: "h6",
+	...props
+});
+const H7 = (props) => /* @__PURE__ */ jsx(BaseHeading, {
+	fontSize: "12px",
+	as: "h6",
+	...props
+});
+//#endregion
+export { H1, H2, H3, H4, H5, H6, H7, Paragraph1, Paragraph2, Paragraph3, Paragraph4, Paragraph5, Text };

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

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