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

package/ui/Blocks/Modal/stories/Modal.stories.js

@@ -0,0 +1,168 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import Modal from '../';
+var meta = {
+    title: 'Blocks/Modal',
+    component: Modal,
+    tags: ['autodocs'],
+    argTypes: {},
+};
+export default meta;
+export var Default = {
+    args: {
+        title: 'Modal default version',
+        children: _jsx(_Fragment, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum id eros ac consequat." }),
+        variant: 'default',
+    },
+};
+export var Compact = {
+    args: {
+        title: 'Modal title',
+        children: _jsx(_Fragment, { children: "Modal compact version" }),
+        variant: 'compact',
+    },
+};
+export var MobileFullscreen = {
+    args: {
+        children: _jsx(_Fragment, { children: "Mobile full screen version without title" }),
+        variant: 'mobileFullscreen',
+    },
+};
+export var ModalTopPosition = {
+    args: {
+        title: 'Modal default version',
+        children: _jsx(_Fragment, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum id eros ac consequat." }),
+        variant: 'default',
+        top: '0',
+    },
+};
+export var ModalWithCloseAndConfirmBtns = {
+    args: {
+        children: _jsx(_Fragment, { children: "Modal with narrow width" }),
+        title: 'Modal title',
+        width: 'narrow',
+        withCloseIcon: true,
+        onCancel: function () { return console.log('Cancel'); },
+        onConfirm: function () { return console.log('Confirm'); },
+        onExtraAction: undefined,
+    },
+};
+export var ModalWithoutCloseButton = {
+    args: {
+        title: 'Note',
+        children: (_jsx(_Fragment, { children: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur explicabo harum, inventore natus qui repellendus suscipit vitae. Alias aliquam earum et ipsa labore, laboriosam maxime numquam odio recusandae, repellat, voluptas." })),
+        width: 'narrow',
+        withCloseIcon: false,
+        onClose: function () { return console.log('Close'); },
+        onConfirm: undefined,
+    },
+};
+export var ModalWithIconInTitle = {
+    args: {
+        children: _jsx(_Fragment, { children: "Modal with icon" }),
+        title: 'Modal title',
+        width: 'narrow',
+        titleIcon: 'info',
+    },
+};
+export var ModalLoading = {
+    args: {
+        children: _jsx(_Fragment, { children: "Modal with loading" }),
+        title: 'Modal title',
+        width: 'narrow',
+        isLoading: true,
+    },
+};
+export var ModalWithCustomBackground = {
+    args: {
+        children: _jsx(_Fragment, { children: "Modal with white background" }),
+        title: 'Modal title',
+        width: 'narrow',
+        background: 'blue',
+    },
+};
+export var ModalWithoutHeader = {
+    args: {
+        children: _jsx(_Fragment, { children: "This is content of the Modal without header" }),
+        title: 'Modal title',
+        width: 'narrow',
+        hasHeader: false,
+    },
+};
+export var ModalWithoutFooter = {
+    args: {
+        children: _jsx(_Fragment, { children: "Modal without footer" }),
+        title: 'Modal title',
+        width: 'narrow',
+        hasFooter: false,
+        onClose: function () { return console.log('Close'); },
+    },
+};
+export var ModalWithoutHeaderAndFooter = {
+    args: {
+        children: _jsx(_Fragment, { children: "Modal without header and footer" }),
+        title: 'Modal title',
+        width: 'narrow',
+        hasHeader: false,
+        hasFooter: false,
+        onClose: function () { return console.log('Close'); },
+    },
+};
+export var ModalWithCustomLabels = {
+    args: {
+        children: _jsx(_Fragment, { children: "Modal with custom labels" }),
+        title: 'Modal title',
+        width: 'narrow',
+        onClose: function () { return console.log('Close'); },
+        onConfirm: function () { return console.log('Submit'); },
+        confirmLabel: 'Custom confirm',
+        cancelLabel: 'Custom cancel',
+    },
+};
+export var ModalWideWidth = {
+    args: {
+        children: _jsx(_Fragment, { children: "Modal with wide width" }),
+        title: 'Modal title',
+        width: 'wide',
+    },
+};
+export var ModalMediumLargeWidth = {
+    args: {
+        children: _jsx(_Fragment, { children: "Modal with mediumLarge width" }),
+        title: 'Modal title',
+        width: 'mediumLarge',
+    },
+};
+export var ModalMediumWidth = {
+    args: {
+        children: _jsx(_Fragment, { children: "Modal with medium width" }),
+        title: 'Modal title',
+        width: 'medium',
+    },
+};
+export var ModalAutoWidth = {
+    args: {
+        children: _jsx(_Fragment, { children: "Modal with auto width" }),
+        title: 'Modal title',
+        width: 'auto',
+    },
+};
+export var ModalWithDisabledConfirm = {
+    args: {
+        children: _jsx(_Fragment, { children: "Modal with disabled confirm" }),
+        title: 'Modal title',
+        width: 'narrow',
+        onClose: function () { return console.log('Close'); },
+        onConfirm: function () { return console.log('Submit'); },
+        isConfirmDisabled: true,
+    },
+};
+export var ModalWithCustomOverlayColor = {
+    args: {
+        children: _jsx(_Fragment, { children: "Modal with custom overlay color" }),
+        title: 'Modal title',
+        width: 'narrow',
+        onClose: function () { return console.log('Close Modal with custom overlay color'); },
+        onConfirm: function () { return console.log('Submit'); },
+        overlayColor: 'red1',
+    },
+};

package/ui/Blocks/Modal/styles.d.ts

@@ -1,28 +1,29 @@
 import { Variant } from './types';
-export declare const DialogOverlay: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
-    backgroundColor?: string;
+
+export declare const DialogOverlay: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+    backgroundColor?: string | undefined;
 }, never>;
-export declare const DialogWindow: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
-    $backgroundColor?: string;
-    $minWidth?: string;
-    $minHeight?: string;
-    $maxWidth?: string;
-    $maxHeight?: string;
+export declare const DialogWindow: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+    $backgroundColor?: string | undefined;
+    $minWidth?: string | undefined;
+    $minHeight?: string | undefined;
+    $maxWidth?: string | undefined;
+    $maxHeight?: string | undefined;
     variant: Variant;
-    top?: string;
+    top?: string | undefined;
 }, never>;
-export declare const HeaderContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const HeaderContainer: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
     variant: Variant;
 }, never>;
-export declare const ContentContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const ContentContainer: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
     variant: Variant;
 }, never>;
-export declare const TitleContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const ButtonsContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const TitleContainer: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const ButtonsContainer: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
     hasSpaceBetween: boolean;
 }, never>;
-export declare const ButtonsWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+export declare const ButtonsWrapper: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
     hasExtraAction: boolean;
     hasBothButtons: boolean;
 }, never>;
-export declare const CloseButton: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const CloseButton: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;

package/ui/Blocks/Modal/styles.js

@@ -1,183 +1,82 @@
-import { createRgba } from "../../utils/CreateRgba/createRgba.js";
-import "../../utils/index.js";
-import styled$1, { css, th } from "@xstyled/styled-components";
-//#region packages/ui/Blocks/Modal/styles.ts
-const variantStyles = (component, variant = "default") => ({
-	header: {
-		default: css`
-        padding: 20px;
-        border-bottom: 1px solid ${th.color("lightGray6")};
-        @media (min-width: 576px) {
-          padding: 30px;
-          border-bottom: 0;
-        }
-      `,
-		compact: css`
-        padding: 20px 20px;
-        border-bottom: 1px solid ${th.color("lightGray6")};
-      `,
-		mobileFullscreen: css`
-        padding: 20px;
-      `
-	},
-	dialogWindow: {
-		default: css`
-        border-radius: 10px;
-        max-width: calc(100% - 32px);
-      `,
-		compact: css`
-        border-radius: 10px;
-        max-width: calc(100% - 32px);
-      `,
-		mobileFullscreen: css`
-        border-radius: 0;
-        max-width: 100% !important;
-      `
-	},
-	contentContainer: {
-		default: css`
-        padding: 20px 20px 15px;
-        @media (min-width: 576px) {
-          padding: 30px;
-        }
-      `,
-		compact: css`
-        padding: 20px 20px 15px;
-      `,
-		mobileFullscreen: css`
-        padding: 0;
-      `
-	},
-	title: {}
-})[component][variant];
-const DialogOverlay = styled$1.div`
-  position: fixed;
-  z-index: 9;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-  background-color: ${({ backgroundColor = "blue2" }) => createRgba(backgroundColor, .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;
-  }
-`;
-const DialogWindow = styled$1.div`
-  background-color: ${({ $backgroundColor }) => $backgroundColor || "#fefefe"};
-  margin: auto;
-  box-shadow: dialogShadow;
-  min-width: ${({ $minWidth }) => $minWidth || "10%"};
-  min-height: ${({ $minHeight }) => $minHeight || "auto"};
-  max-height: ${({ $maxHeight }) => $maxHeight || "none"};
-  display: inline-block;
-  position: relative;
-  text-align: left;
-
-  ${({ variant }) => variantStyles("dialogWindow", variant)}
-  ${({ $maxWidth }) => $maxWidth && `max-width: ${$maxWidth}`};
-
-  @media print {
-    background-color: #fff;
-    margin: 0;
-    visibility: visible;
-    overflow: visible;
-    box-shadow: none;
-    max-width: 100%;
-  }
-
-  @media (min-width: 576px) {
-    margin: ${({ top = "100px" }) => top} auto 0 auto;
-  }
-`;
-const HeaderContainer = styled$1.div`
-  display: flex;
-  justify-content: space-between;
-  ${({ variant }) => variantStyles("header", variant)}
-`;
-const ContentContainer = styled$1.div`
-  min-height: 50px;
-  ${({ variant }) => variantStyles("contentContainer", variant)}
-`;
-const TitleContainer = styled$1.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;
-    }
-  }
-`;
-const ButtonsContainer = styled$1.div`
-  display: flex;
-  align-items: center;
-  padding: 1.5rem;
-  border-top: 1px solid ${th.color("lightGray6")};
-  text-align: right;
-  justify-content: ${({ hasSpaceBetween }) => hasSpaceBetween ? "space-between" : "flex-end"};
-
-  @media (max-width: 576px) {
-    display: flex;
-    justify-content: space-around;
-    padding: 32px 18px 18px;
-
-    > * {
-      margin: 0;
-    }
-  }
-`;
-const ButtonsWrapper = styled$1.div`
-  width: ${({ hasExtraAction }) => hasExtraAction ? "auto" : "100%"};
-  display: flex;
-  justify-content: inherit;
-  column-gap: 8px;
-
-  @media (max-width: 576px) {
-    & > button {
-      width: ${({ hasBothButtons }) => hasBothButtons ? "50%" : "auto"};
-    }
-  }
-`;
-const CloseButton = styled$1.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 { ButtonsContainer, ButtonsWrapper, CloseButton, ContentContainer, DialogOverlay, DialogWindow, HeaderContainer, TitleContainer };
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { createRgba } from '../../utils';
+import styled, { css, th } from '@xstyled/styled-components';
+var Component;
+(function (Component) {
+    Component["Header"] = "header";
+    Component["DialogWindow"] = "dialogWindow";
+    Component["ContentContainer"] = "contentContainer";
+    Component["Title"] = "title";
+})(Component || (Component = {}));
+var variantStyles = function (component, variant) {
+    if (variant === void 0) { variant = 'default'; }
+    return ({
+        header: {
+            default: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        padding: 20px;\n        border-bottom: 1px solid ", ";\n        @media (min-width: 576px) {\n          padding: 30px;\n          border-bottom: 0;\n        }\n      "], ["\n        padding: 20px;\n        border-bottom: 1px solid ", ";\n        @media (min-width: 576px) {\n          padding: 30px;\n          border-bottom: 0;\n        }\n      "])), th.color('lightGray6')),
+            compact: css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        padding: 20px 20px;\n        border-bottom: 1px solid ", ";\n      "], ["\n        padding: 20px 20px;\n        border-bottom: 1px solid ", ";\n      "])), th.color('lightGray6')),
+            mobileFullscreen: css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        padding: 20px;\n      "], ["\n        padding: 20px;\n      "])))
+        },
+        dialogWindow: {
+            default: css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        border-radius: 10px;\n        max-width: calc(100% - 32px);\n      "], ["\n        border-radius: 10px;\n        max-width: calc(100% - 32px);\n      "]))),
+            compact: css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n        border-radius: 10px;\n        max-width: calc(100% - 32px);\n      "], ["\n        border-radius: 10px;\n        max-width: calc(100% - 32px);\n      "]))),
+            mobileFullscreen: css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n        border-radius: 0;\n        max-width: 100% !important;\n      "], ["\n        border-radius: 0;\n        max-width: 100% !important;\n      "])))
+        },
+        contentContainer: {
+            default: css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n        padding: 20px 20px 15px;\n        @media (min-width: 576px) {\n          padding: 30px;\n        }\n      "], ["\n        padding: 20px 20px 15px;\n        @media (min-width: 576px) {\n          padding: 30px;\n        }\n      "]))),
+            compact: css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n        padding: 20px 20px 15px;\n      "], ["\n        padding: 20px 20px 15px;\n      "]))),
+            mobileFullscreen: css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n        padding: 0;\n      "], ["\n        padding: 0;\n      "])))
+        },
+        title: {}
+    }[component][variant]);
+};
+export var DialogOverlay = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  position: fixed;\n  z-index: 9;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  background-color: ", ";\n  text-align: center;\n\n  @media print {\n    position: absolute !important;\n    left: 0 !important;\n    top: 0 !important;\n    height: auto !important;\n    visibility: hidden;\n  }\n\n  @media (max-width: 576px) {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 16px 0;\n  }\n"], ["\n  position: fixed;\n  z-index: 9;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  background-color: ", ";\n  text-align: center;\n\n  @media print {\n    position: absolute !important;\n    left: 0 !important;\n    top: 0 !important;\n    height: auto !important;\n    visibility: hidden;\n  }\n\n  @media (max-width: 576px) {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 16px 0;\n  }\n"])), function (_a) {
+    var backgroundColor = _a.backgroundColor, theme = _a.theme;
+    return createRgba(backgroundColor || theme.colors.blue2, 0.6);
+});
+export var DialogWindow = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  background-color: ", ";\n  margin: auto;\n  box-shadow: dialogShadow;\n  min-width: ", ";\n  min-height: ", ";\n  max-height: ", ";\n  display: inline-block;\n  position: relative;\n  text-align: left;\n\n  ", "\n  ", ";\n\n  @media print {\n    background-color: #fff;\n    margin: 0;\n    visibility: visible;\n    overflow: visible;\n    box-shadow: none;\n    max-width: 100%;\n  }\n\n  @media (min-width: 576px) {\n    margin: ", " auto 0 auto;\n  }\n"], ["\n  background-color: ", ";\n  margin: auto;\n  box-shadow: dialogShadow;\n  min-width: ", ";\n  min-height: ", ";\n  max-height: ", ";\n  display: inline-block;\n  position: relative;\n  text-align: left;\n\n  ", "\n  ", ";\n\n  @media print {\n    background-color: #fff;\n    margin: 0;\n    visibility: visible;\n    overflow: visible;\n    box-shadow: none;\n    max-width: 100%;\n  }\n\n  @media (min-width: 576px) {\n    margin: ", " auto 0 auto;\n  }\n"])), function (_a) {
+    var $backgroundColor = _a.$backgroundColor;
+    return $backgroundColor || th.color('white');
+}, function (_a) {
+    var $minWidth = _a.$minWidth;
+    return $minWidth || '10%';
+}, function (_a) {
+    var $minHeight = _a.$minHeight;
+    return $minHeight || 'auto';
+}, function (_a) {
+    var $maxHeight = _a.$maxHeight;
+    return $maxHeight || 'none';
+}, function (_a) {
+    var variant = _a.variant;
+    return variantStyles(Component.DialogWindow, variant);
+}, function (_a) {
+    var $maxWidth = _a.$maxWidth;
+    return $maxWidth && "max-width: ".concat($maxWidth);
+}, function (_a) {
+    var _b = _a.top, top = _b === void 0 ? '100px' : _b;
+    return top;
+});
+export var HeaderContainer = styled.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  ", "\n"], ["\n  display: flex;\n  justify-content: space-between;\n  ", "\n"])), function (_a) {
+    var variant = _a.variant;
+    return variantStyles(Component.Header, variant);
+});
+export var ContentContainer = styled.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  min-height: 50px;\n  ", "\n"], ["\n  min-height: 50px;\n  ", "\n"])), function (_a) {
+    var variant = _a.variant;
+    return variantStyles(Component.ContentContainer, variant);
+});
+export var TitleContainer = styled.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: row;\n  align-items: center;\n  color: typoPrimary;\n  padding-right: 34px;\n\n  > div:first-of-type {\n    margin-right: 0.5em;\n    display: block;\n  }\n\n  .icon {\n    font-size: 24px;\n    margin-right: 15px;\n    display: flex;\n\n    @media (max-width: 576px) {\n      font-size: 18px;\n      margin-right: 12px;\n    }\n  }\n"], ["\n  display: flex;\n  flex-flow: row;\n  align-items: center;\n  color: typoPrimary;\n  padding-right: 34px;\n\n  > div:first-of-type {\n    margin-right: 0.5em;\n    display: block;\n  }\n\n  .icon {\n    font-size: 24px;\n    margin-right: 15px;\n    display: flex;\n\n    @media (max-width: 576px) {\n      font-size: 18px;\n      margin-right: 12px;\n    }\n  }\n"])));
+export var ButtonsContainer = styled.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding: 1.5rem;\n  border-top: 1px solid ", ";\n  text-align: right;\n  justify-content: ", ";\n\n  @media (max-width: 576px) {\n    display: flex;\n    justify-content: space-around;\n    padding: 32px 18px 18px;\n\n    > * {\n      margin: 0;\n    }\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  padding: 1.5rem;\n  border-top: 1px solid ", ";\n  text-align: right;\n  justify-content: ", ";\n\n  @media (max-width: 576px) {\n    display: flex;\n    justify-content: space-around;\n    padding: 32px 18px 18px;\n\n    > * {\n      margin: 0;\n    }\n  }\n"])), th.color('lightGray6'), function (_a) {
+    var hasSpaceBetween = _a.hasSpaceBetween;
+    return (hasSpaceBetween ? 'space-between' : 'flex-end');
+});
+export var ButtonsWrapper = styled.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  width: ", ";\n  display: flex;\n  justify-content: inherit;\n  column-gap: 8px;\n\n  @media (max-width: 576px) {\n    & > button {\n      width: ", ";\n    }\n  }\n"], ["\n  width: ", ";\n  display: flex;\n  justify-content: inherit;\n  column-gap: 8px;\n\n  @media (max-width: 576px) {\n    & > button {\n      width: ", ";\n    }\n  }\n"])), function (_a) {
+    var hasExtraAction = _a.hasExtraAction;
+    return (hasExtraAction ? 'auto' : '100%');
+}, function (_a) {
+    var hasBothButtons = _a.hasBothButtons;
+    return (hasBothButtons ? '50%' : 'auto');
+});
+export var CloseButton = styled.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  position: absolute;\n  z-index: 2;\n  background-color: bgLightGray2;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  top: 11px;\n  right: 20px;\n  width: 34px;\n  height: 34px;\n"], ["\n  position: absolute;\n  z-index: 2;\n  background-color: bgLightGray2;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  top: 11px;\n  right: 20px;\n  width: 34px;\n  height: 34px;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;

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

@@ -1,4 +1,5 @@
-import { type MutableRefObject, type ReactNode } from 'react';
+import { MutableRefObject, ReactNode } from 'react';
+
 export type Variant = 'default' | 'compact' | 'mobileFullscreen';
 export type Width = 'wide' | 'mediumLarge' | 'medium' | 'narrow' | 'auto';
 export interface ModalProps {

package/ui/Blocks/Modal/utils.d.ts

@@ -1,2 +1,3 @@
 import { Width } from './types';
+
 export declare const widthMap: Record<Width, string>;

package/ui/Blocks/Modal/utils.js

@@ -1,10 +1,7 @@
-//#region packages/ui/Blocks/Modal/utils.ts
-const widthMap = {
-	wide: "1450px",
-	mediumLarge: "1200px",
-	medium: "900px",
-	narrow: "600px",
-	auto: "auto"
+export var widthMap = {
+    wide: '1450px',
+    mediumLarge: '1200px',
+    medium: '900px',
+    narrow: '600px',
+    auto: 'auto',
 };
-//#endregion
-export { widthMap };

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

@@ -1,6 +1,7 @@
-import React, { type FC } from 'react';
-import { type StyledComponent } from 'styled-components';
-import { type Placement } from '@popperjs/core';
+import { default as React, FC } from 'react';
+import { StyledComponent } from 'styled-components';
+import { Placement } from '@popperjs/core';
+
 type DropdownMenuProps = {
     parentRef: React.MutableRefObject<HTMLDivElement | null | undefined>;
     onClose?: () => void;

package/ui/Blocks/Popover/index.js

@@ -1,32 +1,21 @@
-import { useClickOutside } from "../Modal/hooks/useClickOutside.js";
-import { Portal } from "../../Elements/Portal/index.js";
-import "react";
-import styled$1 from "@xstyled/styled-components";
-import { jsx } from "react/jsx-runtime";
-import { Popper } from "react-popper";
-//#region packages/ui/Blocks/Popover/index.tsx
-const PopoverWrapper = styled$1.div`
-  z-index: 5;
-`;
-const Popover = ({ placement, wrapper, children, onClose, parentRef }) => {
-	const popperRef = useClickOutside({
-		onClose,
-		parentRef
-	});
-	const Wrapper = wrapper || PopoverWrapper;
-	return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx("div", {
-		ref: popperRef,
-		children: /* @__PURE__ */ jsx(Popper, {
-			innerRef: popperRef,
-			referenceElement: parentRef.current,
-			placement,
-			children: ({ ref, style }) => /* @__PURE__ */ jsx(Wrapper, {
-				ref,
-				style,
-				children
-			})
-		})
-	}) });
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
 };
-//#endregion
-export { Popover as default };
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Popper } from 'react-popper';
+import Portal from '../../Elements/Portal';
+import { useClickOutside } from '../Modal/hooks/useClickOutside';
+import styled from '@xstyled/styled-components';
+var PopoverWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  z-index: 5;\n"], ["\n  z-index: 5;\n"])));
+var Popover = function (_a) {
+    var placement = _a.placement, wrapper = _a.wrapper, children = _a.children, onClose = _a.onClose, parentRef = _a.parentRef;
+    var popperRef = useClickOutside({ onClose: onClose, parentRef: parentRef });
+    var Wrapper = wrapper || PopoverWrapper;
+    return (_jsx(Portal, { children: _jsx("div", { ref: popperRef, children: _jsx(Popper, { innerRef: popperRef, referenceElement: parentRef.current, placement: placement, children: function (_a) {
+                    var ref = _a.ref, style = _a.style;
+                    return (_jsx(Wrapper, { ref: ref, style: style, children: children }));
+                } }) }) }));
+};
+export default Popover;
+var templateObject_1;

package/ui/Blocks/Scheduler/Scheduler.d.ts

@@ -1,3 +1,4 @@
-import { type FC } from 'react';
-import { type SchedulerProps } from './types';
+import { FC } from 'react';
+import { SchedulerProps } from './types';
+
 export declare const Scheduler: FC<SchedulerProps>;