@mailstep/design-system 0.8.26-beta.1 → 0.8.26-beta.2

package/ui/packages/ui/Blocks/LoginPage/LoginPage.js

@@ -0,0 +1,61 @@
+import { x as e } from "../../../../node_modules/@xstyled/styled-components/dist/index.js";
+import { require_jsx_runtime as t } from "../../../../node_modules/react/jsx-runtime.js";
+import { Admin as n } from "../../Elements/Icon/icons/Admin.js";
+import { Trans as r } from "../../../../node_modules/@lingui/react/dist/index.js";
+import { H6 as i } from "../../Elements/Typography/Typography.js";
+import a from "../LanguageSwitch/index.js";
+import { LoginForm as o } from "./components/LoginForm.js";
+import "./utils/links.js";
+import { SocialLinks as s } from "./components/SocialLinks.js";
+import { CardBodyWithLanguage as c, LanguageBox as l, LogoWrapper as u, MailTo as d, MainLogo as f, Version as p, Wrapper as m } from "./styles.js";
+//#region packages/ui/Blocks/LoginPage/LoginPage.tsx
+var h = t(), g = ({ onSubmit: t, activeLanguage: g, onLanguageChange: _, children: v, brand: y, brandVariant: b, isSubmitting: x, isSubmitDisabled: S, withDistributionCenterSelect: C, distributionCenterOptions: w, selectedDistributionCenter: T, onChangeDistributionCenter: E, languageItems: D, version: O, backgroundImage: k, admin: A, hasSupport: j = !0, hasSocialLinks: M = !0, withPassword: N = !0, withLogin: P = !0, loginLabel: F, passwordLabel: I }) => /* @__PURE__ */ (0, h.jsxs)(m, {
+	backgroundImage: k,
+	children: [
+		/* @__PURE__ */ (0, h.jsxs)(c, { children: [
+			/* @__PURE__ */ (0, h.jsxs)(u, { children: [/* @__PURE__ */ (0, h.jsx)(f, {
+				brand: y,
+				variant: b
+			}), A && /* @__PURE__ */ (0, h.jsx)(n, {})] }),
+			/* @__PURE__ */ (0, h.jsxs)(l, { children: [j && /* @__PURE__ */ (0, h.jsxs)(e.div, {
+				mr: 4,
+				children: [/* @__PURE__ */ (0, h.jsx)(i, {
+					color: "gray1",
+					variant: "bold",
+					mt: "8px",
+					mb: "8px",
+					as: "h6",
+					children: /* @__PURE__ */ (0, h.jsx)(r, {
+						id: "form.heading.support",
+						message: "Support:"
+					})
+				}), /* @__PURE__ */ (0, h.jsx)(d, {
+					href: "mailto:mailstep@mailstep.cz",
+					children: "mailstep@mailstep.cz"
+				})]
+			}), /* @__PURE__ */ (0, h.jsx)(a, {
+				activeLanguage: g,
+				onLanguageChange: _,
+				languageItems: D
+			})] }),
+			/* @__PURE__ */ (0, h.jsx)(o, {
+				onSubmit: t,
+				isSubmitDisabled: S,
+				isSubmitting: x,
+				onChangeDistributionCenter: E,
+				withDistributionCenterSelect: C,
+				distributionCenterOptions: w,
+				selectedDistributionCenter: T,
+				withPassword: N,
+				withLogin: P,
+				loginLabel: F,
+				passwordLabel: I
+			})
+		] }),
+		v,
+		O && /* @__PURE__ */ (0, h.jsx)(p, { children: O }),
+		M && /* @__PURE__ */ (0, h.jsx)(s, {})
+	]
+});
+//#endregion
+export { g as default };

package/ui/packages/ui/Blocks/LoginPage/components/LoginForm.js

@@ -0,0 +1,155 @@
+import { styled as e, x as t } from "../../../../../node_modules/@xstyled/styled-components/dist/index.js";
+import { require_jsx_runtime as n } from "../../../../../node_modules/react/jsx-runtime.js";
+import r from "../../../Elements/Button/Button.js";
+import { i18n as i } from "../../../../../node_modules/@lingui/core/dist/index.js";
+import { Trans as a } from "../../../../../node_modules/@lingui/react/dist/index.js";
+import o from "../../../Elements/SingleSelect/SingleSelect.js";
+import { Input as s } from "../../../Forms/Input/Input.js";
+import { useCallback as c, useState as l } from "react";
+//#region packages/ui/Blocks/LoginPage/components/LoginForm.tsx
+var u = n(), d = e.div`
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  margin-bottom: 10px;
+  & > div > H4 {
+    display: none;
+  }
+  @media (min-width: 1024px) {
+    height: 300px;
+    min-width: 300px;
+    margin-bottom: 50px;
+    & > div > H4 {
+      display: block;
+    }
+  }
+`, f = e.div`
+  display: flex;
+  margin-top: 15px;
+  width: 100%;
+  @media (min-width: 1024px) {
+    display: inline-block;
+    margin-top: 40px;
+  }
+`, p = ({ onSubmit: e, isSubmitting: n, isSubmitDisabled: p, distributionCenterOptions: m, withDistributionCenterSelect: h, onChangeDistributionCenter: g, selectedDistributionCenter: _, withPassword: v, withLogin: y, loginLabel: b, passwordLabel: x }) => {
+	let [S, C] = l(""), [w, T] = l(""), [E, D] = l(""), [O, k] = l(""), [A, j] = l(""), [M, N] = l(""), P = c((e) => {
+		C(e.target.value);
+	}, []), F = c((e) => {
+		T(e.target.value);
+	}, []), I = c(() => {
+		if (k(""), j(""), N(""), D(""), y && !S) {
+			k(i._({
+				id: "requiredField",
+				message: "Required field"
+			}));
+			return;
+		}
+		if (v && !w) {
+			j(i._({
+				id: "requiredField",
+				message: "Required field"
+			}));
+			return;
+		}
+		if (h && !_) {
+			N(i._({
+				id: "requiredField",
+				message: "Required field"
+			}));
+			return;
+		}
+		e({
+			login: S,
+			password: w
+		}).catch((e) => {
+			e && D(String(e));
+		}).finally(() => {
+			T("");
+		});
+	}, [
+		S,
+		w,
+		_,
+		h,
+		v,
+		e
+	]), L = c((e) => {
+		g?.(e.target.value);
+	}, [g]);
+	return /* @__PURE__ */ (0, u.jsxs)(d, { children: [
+		y && /* @__PURE__ */ (0, u.jsx)(t.div, {
+			mt: "24px",
+			children: /* @__PURE__ */ (0, u.jsx)(s, {
+				label: b || i._({
+					id: "form.login.label",
+					message: "Login"
+				}),
+				placeholder: i._({
+					id: "form.login.label",
+					message: "Login"
+				}),
+				type: "text",
+				name: "login",
+				autoFocus: !0,
+				error: O,
+				value: S,
+				onChange: P,
+				onEnter: I
+			})
+		}),
+		v && /* @__PURE__ */ (0, u.jsx)(t.div, {
+			mt: "12px",
+			children: /* @__PURE__ */ (0, u.jsx)(s, {
+				label: x || i._({
+					id: "form.password.label",
+					message: "Password"
+				}),
+				placeholder: i._({
+					id: "form.password.label",
+					message: "Password"
+				}),
+				name: "password",
+				type: "password",
+				value: w,
+				onChange: F,
+				error: A,
+				onEnter: I
+			})
+		}),
+		h && /* @__PURE__ */ (0, u.jsx)(t.div, {
+			mt: "12px",
+			children: /* @__PURE__ */ (0, u.jsx)(o, {
+				onChange: L,
+				options: m,
+				value: _,
+				placeholder: i._({
+					id: "form.distributionCenter.label",
+					message: "Distribution center"
+				}),
+				label: i._({
+					id: "form.distributionCenter.label",
+					message: "Distribution center"
+				}),
+				error: M
+			})
+		}),
+		E && /* @__PURE__ */ (0, u.jsx)(t.div, {
+			mt: "12px",
+			color: "red1",
+			children: E
+		}),
+		/* @__PURE__ */ (0, u.jsx)(f, { children: /* @__PURE__ */ (0, u.jsx)(r, {
+			onClick: I,
+			iconLeft: "login",
+			isLoading: n,
+			disabled: p,
+			fullWidth: !0,
+			children: /* @__PURE__ */ (0, u.jsx)(a, {
+				id: "form.buttonSignIn",
+				message: "Sign in"
+			})
+		}) })
+	] });
+};
+//#endregion
+export { p as LoginForm };

package/ui/packages/ui/Blocks/LoginPage/components/SocialLinks.js

@@ -0,0 +1,77 @@
+import { th as e } from "../../../../../node_modules/@xstyled/system/dist/index.js";
+import { styled as t } from "../../../../../node_modules/@xstyled/styled-components/dist/index.js";
+import { require_jsx_runtime as n } from "../../../../../node_modules/react/jsx-runtime.js";
+import r from "../../../Elements/Icon/Icon.js";
+import { Trans as i } from "../../../../../node_modules/@lingui/react/dist/index.js";
+import { FACEBOOK_LINK as a, INSTAGRAM_LINK as o, LINKEDIN_LINK as s, TWITTER_LINK as c } from "../utils/links.js";
+//#region packages/ui/Blocks/LoginPage/components/SocialLinks.tsx
+var l = n(), u = t.div`
+  height: 600px;
+  margin: auto;
+  display: none;
+
+  @media (min-height: 520px) {
+    display: block;
+  }
+  @media (min-width: 1024px) {
+    position: relative;
+    width: 500px;
+  }
+`, d = t.div`
+  display: flex;
+  position: absolute;
+  bottom: 30px;
+  right: 0;
+  padding: 0 10px;
+  justify-content: center;
+
+  @media (min-width: 1024px) {
+    width: initial;
+  }
+`, f = t.a`
+  color: ${e.color("typoPrimary")};
+  margin: 0 15px;
+
+  @media (min-width: 1024px) {
+    margin-left: 20px;
+    margin-right: 0;
+  }
+`, p = t.div`
+  display: none;
+
+  @media (min-width: 1024px) {
+    font-size: 14px;
+    display: block;
+    position: absolute;
+    color: ${e.color("typoPrimary")};
+    font-weight: 600;
+    bottom: 0;
+    right: 0;
+  }
+`, m = () => /* @__PURE__ */ (0, l.jsxs)(u, { children: [/* @__PURE__ */ (0, l.jsxs)(d, { children: [
+	/* @__PURE__ */ (0, l.jsx)(f, {
+		target: "_blank",
+		href: a,
+		children: /* @__PURE__ */ (0, l.jsx)(r, { icon: "facebook" })
+	}),
+	/* @__PURE__ */ (0, l.jsx)(f, {
+		target: "_blank",
+		href: o,
+		children: /* @__PURE__ */ (0, l.jsx)(r, { icon: "instagram" })
+	}),
+	/* @__PURE__ */ (0, l.jsx)(f, {
+		target: "_blank",
+		href: s,
+		children: /* @__PURE__ */ (0, l.jsx)(r, { icon: "linkedin" })
+	}),
+	/* @__PURE__ */ (0, l.jsx)(f, {
+		target: "_blank",
+		href: c,
+		children: /* @__PURE__ */ (0, l.jsx)(r, { icon: "twitter" })
+	})
+] }), /* @__PURE__ */ (0, l.jsx)(p, { children: /* @__PURE__ */ (0, l.jsx)(i, {
+	id: "card.entrustLogisticsEshopProfessionals",
+	message: "Entrust the logistics of your e-shop to professionals."
+}) })] });
+//#endregion
+export { m as SocialLinks };

package/ui/packages/ui/Blocks/LoginPage/index.js

@@ -0,0 +1,5 @@
+import e from "./LoginPage.js";
+//#region packages/ui/Blocks/LoginPage/index.ts
+var t = e;
+//#endregion
+export { t as default };

package/ui/packages/ui/Blocks/LoginPage/styles.js

@@ -0,0 +1,69 @@
+import { th as e } from "../../../../node_modules/@xstyled/system/dist/index.js";
+import { styled as t } from "../../../../node_modules/@xstyled/styled-components/dist/index.js";
+import n from "../../Elements/Logo/Logo.js";
+import r from "./assets/mailship.js";
+//#region packages/ui/Blocks/LoginPage/styles.ts
+var i = { mailship: r }, a = t.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  font-family: ${e("fonts.primary")};
+  flex-grow: 1;
+  background: ${e("colors.bgLightGray")};
+  opacity: 1;
+  z-index: 1;
+  display: flex;
+  justify-content: space-between;
+  @media (min-width: 1024px) {
+    background: ${({ backgroundImage: e }) => `transparent ${e ? `url(${i[e]})` : ""} 50% 0% no-repeat padding-box;`}
+    background-size: cover;
+  }
+`, o = t.div`
+  display: flex;
+  margin: 15px 0;
+  align-items: flex-end;
+  justify-content: space-between;
+  @media (min-width: 1024px) {
+    justify-content: flex-end;
+    margin: 40px 0;
+  }
+`, s = t.div`
+  display: flex;
+  justify-content: start;
+  flex-direction: column;
+  padding: 0 32px 10px 32px;
+  flex-grow: 1;
+  margin: auto;
+  width: 500px;
+  @media (min-width: 1024px) {
+    display: block;
+    flex-grow: 0;
+  }
+`, c = t.a`
+  color: ${e.color("typoPrimary")};
+  &:hover {
+    color: ${e.color("red1")};
+  }
+`, l = t.div`
+  display: flex;
+  justify-content: center;
+  margin-top: 30px;
+  @media (min-width: 1024px) {
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 0;
+  }
+`, u = t(n)`
+  width: 50%;
+  height: auto;
+`, d = t.div`
+  color: gray;
+  position: fixed;
+  bottom: 10px;
+  right: 10px;
+  font-size: 12px;
+`;
+//#endregion
+export { s as CardBodyWithLanguage, o as LanguageBox, l as LogoWrapper, c as MailTo, u as MainLogo, d as Version, a as Wrapper };

package/ui/packages/ui/Blocks/Modal/Modal.js

@@ -0,0 +1,116 @@
+import { x as e } from "../../../../node_modules/@xstyled/styled-components/dist/index.js";
+import { require_jsx_runtime as t } from "../../../../node_modules/react/jsx-runtime.js";
+import { Cancel as n } from "../../Elements/Icon/icons/Cancel.js";
+import r from "../../Elements/Icon/Icon.js";
+import "../../Elements/Icon/index.js";
+import i from "../../Elements/Button/index.js";
+import { useClickOutside as a } from "./hooks/useClickOutside.js";
+import { H2 as o, H5 as s } from "../../Elements/Typography/Typography.js";
+import "../../Elements/Typography/index.js";
+import c from "../../Elements/Portal/index.js";
+import { ButtonsContainer as l, ButtonsWrapper as u, CloseButton as d, ContentContainer as f, DialogOverlay as p, DialogWindow as m, HeaderContainer as h, TitleContainer as g } from "./styles.js";
+import { widthMap as _ } from "./utils.js";
+import { memo as v, useCallback as y, useEffect as b, useMemo as x } from "react";
+//#region packages/ui/Blocks/Modal/Modal.tsx
+var S = t(), C = v(({ children: t, isShown: v = !0, onExtraAction: C, onCancel: w, title: T, titleIcon: E, onConfirm: D, confirmLabel: O, cancelLabel: k, extraActionLabel: A, isLoading: j, isConfirmDisabled: M, width: N = "narrow", onClose: P, hasFooter: F = !0, hasHeader: I = !0, background: L, ignoreClickOutside: R = !1, closeEverywhere: z = !1, withCloseIcon: B = !0, overlayColor: V, minWidth: H, minHeight: U, maxWidth: W, maxHeight: G, variant: K = "compact", top: q, name: J }) => {
+	let Y = y(() => {
+		P ? P() : w && w();
+	}, [P, w]), X = x(() => ({ width: _[N] }), [N]), Z = a({
+		onClose: Y,
+		ignoreClickOutside: R,
+		closeCurrent: !0,
+		allowScrollbarClick: !0
+	}), Q = y(() => {
+		D?.(Y);
+	}, [D, Y]);
+	return b(() => (window.addEventListener("popstate", Y), () => {
+		window.removeEventListener("popstate", Y);
+	}), []), v ? /* @__PURE__ */ (0, S.jsx)(c, { children: /* @__PURE__ */ (0, S.jsx)(p, {
+		backgroundColor: V,
+		children: /* @__PURE__ */ (0, S.jsxs)(m, {
+			ref: Z,
+			style: X,
+			$backgroundColor: L,
+			top: q,
+			"data-cy": "dialogWindow",
+			onClick: z ? Y : void 0,
+			$minWidth: H,
+			$minHeight: U,
+			$maxWidth: W,
+			$maxHeight: G,
+			variant: K,
+			children: [
+				T && I && /* @__PURE__ */ (0, S.jsx)(h, {
+					variant: K,
+					children: /* @__PURE__ */ (0, S.jsxs)(g, { children: [E && /* @__PURE__ */ (0, S.jsx)(e.div, {
+						as: "span",
+						className: "icon",
+						children: typeof E == "string" ? /* @__PURE__ */ (0, S.jsx)(r, {
+							icon: E,
+							fill: "blue2"
+						}) : E
+					}), K == "default" ? /* @__PURE__ */ (0, S.jsx)(o, {
+						mt: 0,
+						mb: 0,
+						variant: "bold",
+						children: T
+					}) : /* @__PURE__ */ (0, S.jsx)(s, {
+						mt: 0,
+						mb: 0,
+						variant: "bold",
+						children: T
+					})] })
+				}),
+				B && /* @__PURE__ */ (0, S.jsx)(d, {
+					onClick: Y,
+					"data-cy": "dialogCloseBtn",
+					children: /* @__PURE__ */ (0, S.jsx)(n, {
+						width: "11px",
+						height: "11px"
+					})
+				}),
+				/* @__PURE__ */ (0, S.jsx)(f, {
+					variant: K,
+					children: t
+				}),
+				F && (C || w || D) && /* @__PURE__ */ (0, S.jsxs)(l, {
+					hasSpaceBetween: !!C,
+					children: [C && /* @__PURE__ */ (0, S.jsx)(i, {
+						type: "button",
+						onClick: C,
+						isLoading: j,
+						"data-cy": "extraActionBtn",
+						appearance: "secondary",
+						variant: "ghost",
+						children: A
+					}), /* @__PURE__ */ (0, S.jsxs)(u, {
+						hasExtraAction: !!C,
+						hasBothButtons: !!w && !!D,
+						children: [w && /* @__PURE__ */ (0, S.jsx)(i, {
+							type: "button",
+							onClick: w,
+							isLoading: j,
+							"data-cy": "cancelBtn",
+							appearance: "secondary",
+							variant: "default",
+							"data-testid": J ? `button-${J}-cancel` : void 0,
+							children: k || "Cancel"
+						}), D && /* @__PURE__ */ (0, S.jsx)(i, {
+							type: "button",
+							onClick: Q,
+							isLoading: j,
+							disabled: M,
+							"data-cy": "submitBtn",
+							appearance: "primary",
+							variant: "default",
+							"data-testid": J ? `button-${J}-confirm` : void 0,
+							children: O || "Submit"
+						})]
+					})]
+				})
+			]
+		})
+	}) }) : null;
+});
+//#endregion
+export { C as Modal };

package/ui/packages/ui/Blocks/Modal/index.js

@@ -0,0 +1,7 @@
+import "./hooks/useModal.js";
+import "./hooks/useClickOutside.js";
+import { Modal as e } from "./Modal.js";
+//#region packages/ui/Blocks/Modal/index.ts
+var t = e;
+//#endregion
+export { t as default };

package/ui/packages/ui/Blocks/Modal/styles.js

@@ -0,0 +1,178 @@
+import { th as e } from "../../../../node_modules/@xstyled/system/dist/index.js";
+import { css as t, styled as n } from "../../../../node_modules/@xstyled/styled-components/dist/index.js";
+import r from "../../utils/CreateRgba/createRgba.js";
+import "../../utils/index.js";
+//#region packages/ui/Blocks/Modal/styles.ts
+var i = /* @__PURE__ */ function(e) {
+	return e.Header = "header", e.DialogWindow = "dialogWindow", e.ContentContainer = "contentContainer", e.Title = "title", e;
+}(i || {}), a = (n, r = "default") => ({
+	header: {
+		default: t`
+        padding: 20px;
+        border-bottom: 1px solid ${e.color("lightGray6")};
+        @media (min-width: 576px) {
+          padding: 30px;
+          border-bottom: 0;
+        }
+      `,
+		compact: t`
+        padding: 20px 20px;
+        border-bottom: 1px solid ${e.color("lightGray6")};
+      `,
+		mobileFullscreen: t`
+        padding: 20px;
+      `
+	},
+	dialogWindow: {
+		default: t`
+        border-radius: 10px;
+        max-width: calc(100% - 32px);
+      `,
+		compact: t`
+        border-radius: 10px;
+        max-width: calc(100% - 32px);
+      `,
+		mobileFullscreen: t`
+        border-radius: 0;
+        max-width: 100% !important;
+      `
+	},
+	contentContainer: {
+		default: t`
+        padding: 20px 20px 15px;
+        @media (min-width: 576px) {
+          padding: 30px;
+        }
+      `,
+		compact: t`
+        padding: 20px 20px 15px;
+      `,
+		mobileFullscreen: t`
+        padding: 0;
+      `
+	},
+	title: {}
+})[n][r], o = n.div`
+  position: fixed;
+  z-index: 9;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: ${({ backgroundColor: e = "blue2" }) => r(e, .6)};
+  text-align: center;
+
+  @media print {
+    position: absolute !important;
+    left: 0 !important;
+    top: 0 !important;
+    height: auto !important;
+    visibility: hidden;
+  }
+
+  @media (max-width: 576px) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 16px 0;
+  }
+`, s = n.div`
+  background-color: ${({ $backgroundColor: e }) => e || "#fefefe"};
+  margin: auto;
+  box-shadow: dialogShadow;
+  min-width: ${({ $minWidth: e }) => e || "10%"};
+  min-height: ${({ $minHeight: e }) => e || "auto"};
+  max-height: ${({ $maxHeight: e }) => e || "none"};
+  display: inline-block;
+  position: relative;
+  text-align: left;
+
+  ${({ variant: e }) => a(i.DialogWindow, e)}
+  ${({ $maxWidth: e }) => e && `max-width: ${e}`};
+
+  @media print {
+    background-color: #fff;
+    margin: 0;
+    visibility: visible;
+    overflow: visible;
+    box-shadow: none;
+    max-width: 100%;
+  }
+
+  @media (min-width: 576px) {
+    margin: ${({ top: e = "100px" }) => e} auto 0 auto;
+  }
+`, c = n.div`
+  display: flex;
+  justify-content: space-between;
+  ${({ variant: e }) => a(i.Header, e)}
+`, l = n.div`
+  min-height: 50px;
+  ${({ variant: e }) => a(i.ContentContainer, e)}
+`, u = n.div`
+  display: flex;
+  flex-flow: row;
+  align-items: center;
+  color: typoPrimary;
+  padding-right: 34px;
+
+  > div:first-of-type {
+    margin-right: 0.5em;
+    display: block;
+  }
+
+  .icon {
+    font-size: 24px;
+    margin-right: 15px;
+    display: flex;
+
+    @media (max-width: 576px) {
+      font-size: 18px;
+      margin-right: 12px;
+    }
+  }
+`, d = n.div`
+  display: flex;
+  align-items: center;
+  padding: 1.5rem;
+  border-top: 1px solid ${e.color("lightGray6")};
+  text-align: right;
+  justify-content: ${({ hasSpaceBetween: e }) => e ? "space-between" : "flex-end"};
+
+  @media (max-width: 576px) {
+    display: flex;
+    justify-content: space-around;
+    padding: 32px 18px 18px;
+
+    > * {
+      margin: 0;
+    }
+  }
+`, f = n.div`
+  width: ${({ hasExtraAction: e }) => e ? "auto" : "100%"};
+  display: flex;
+  justify-content: inherit;
+  column-gap: 8px;
+
+  @media (max-width: 576px) {
+    & > button {
+      width: ${({ hasBothButtons: e }) => e ? "50%" : "auto"};
+    }
+  }
+`, p = n.div`
+  position: absolute;
+  z-index: 2;
+  background-color: bgLightGray1;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  top: 11px;
+  right: 20px;
+  width: 34px;
+  height: 34px;
+`;
+//#endregion
+export { d as ButtonsContainer, f as ButtonsWrapper, p as CloseButton, l as ContentContainer, o as DialogOverlay, s as DialogWindow, c as HeaderContainer, u as TitleContainer };