@stenajs-webui/modal 17.6.0 → 17.9.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v17.7.0 (Fri Jul 01 2022)
+
+#### 🚀 Enhancement
+
+- Build packages with vite [#475](https://github.com/StenaIT/stenajs-webui/pull/475) ([@lindskogen](https://github.com/lindskogen))
+
+#### Authors: 1
+
+- Johan Lindskogen ([@lindskogen](https://github.com/lindskogen))
+
+---
+
 # v17.6.0 (Fri Jul 01 2022)
 
 #### 🚀 Enhancement

package/dist/components/center-modal/CenterModal.d.ts

@@ -1,6 +1,6 @@
-import * as React from "react";
-import ReactModal from "react-modal";
-export interface CenterModalProps extends ReactModal.Props {
-    onRequestClose?: () => void;
-}
-export declare const CenterModal: React.FC<CenterModalProps>;
+import * as React from "react";
+import ReactModal from "react-modal";
+export interface CenterModalProps extends ReactModal.Props {
+    onRequestClose?: () => void;
+}
+export declare const CenterModal: React.FC<CenterModalProps>;

package/dist/components/drawer/Drawer.d.ts

@@ -1,35 +1,35 @@
-import * as React from "react";
-import ReactModal from "react-modal";
-export declare type SlideFrom = SlideFromLeftRight | SlideFromTopBottom;
-export declare type SlideFromLeftRight = "left" | "right";
-export declare type SlideFromTopBottom = "top" | "bottom";
-export declare type DrawerProps = DrawerBaseLeftRight | DrawerBaseTopBottom;
-interface DrawerBaseLeftRight extends DrawerBaseProps {
-    width?: string;
-    /**
-     * Which direction the drawer will appear from.
-     * @default left
-     * @param {String('left'|'right')}
-     */
-    slideFrom?: SlideFromLeftRight;
-}
-interface DrawerBaseTopBottom extends DrawerBaseProps {
-    height?: string;
-    /**
-     * Which direction the drawer will appear from.
-     * @default left
-     * @param {String('top'|'bottom')}
-     */
-    slideFrom?: SlideFromTopBottom;
-}
-interface DrawerBaseProps extends Omit<ReactModal.Props, "closeTimeoutMS" | "portalClassName" | "overlayClassName" | "className" | "style" | "parentSelector"> {
-    background?: string;
-    zIndex?: number;
-    onRequestClose?: () => void;
-    /**
-     * Portal target, HTML element. If not set, portal is not used.
-     */
-    portalTarget?: HTMLElement | null;
-}
-export declare const Drawer: React.FC<DrawerProps>;
-export {};
+import * as React from "react";
+import ReactModal from "react-modal";
+export declare type SlideFrom = SlideFromLeftRight | SlideFromTopBottom;
+export declare type SlideFromLeftRight = "left" | "right";
+export declare type SlideFromTopBottom = "top" | "bottom";
+export declare type DrawerProps = DrawerBaseLeftRight | DrawerBaseTopBottom;
+interface DrawerBaseLeftRight extends DrawerBaseProps {
+    width?: string;
+    /**
+     * Which direction the drawer will appear from.
+     * @default left
+     * @param {String('left'|'right')}
+     */
+    slideFrom?: SlideFromLeftRight;
+}
+interface DrawerBaseTopBottom extends DrawerBaseProps {
+    height?: string;
+    /**
+     * Which direction the drawer will appear from.
+     * @default left
+     * @param {String('top'|'bottom')}
+     */
+    slideFrom?: SlideFromTopBottom;
+}
+interface DrawerBaseProps extends Omit<ReactModal.Props, "closeTimeoutMS" | "portalClassName" | "overlayClassName" | "className" | "style" | "parentSelector"> {
+    background?: string;
+    zIndex?: number;
+    onRequestClose?: () => void;
+    /**
+     * Portal target, HTML element. If not set, portal is not used.
+     */
+    portalTarget?: HTMLElement | null;
+}
+export declare const Drawer: React.FC<DrawerProps>;
+export {};

package/dist/components/loading-modal/LoadingModal.d.ts

@@ -1,8 +1,8 @@
-import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
-import * as React from "react";
-import ReactModal from "react-modal";
-export interface LoadingModalProps extends Omit<ReactModal.Props, "isOpen"> {
-    headerText?: string;
-    headerIconLeft?: IconDefinition;
-}
-export declare const LoadingModal: React.FC<LoadingModalProps>;
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+import * as React from "react";
+import ReactModal from "react-modal";
+export interface LoadingModalProps extends Omit<ReactModal.Props, "isOpen"> {
+    headerText?: string;
+    headerIconLeft?: IconDefinition;
+}
+export declare const LoadingModal: React.FC<LoadingModalProps>;

package/dist/components/modal/BaseModal.d.ts

@@ -1,10 +1,10 @@
-import * as React from "react";
-import ReactModal from "react-modal";
-export interface BaseModalProps extends ReactModal.Props {
-    width?: string;
-    onRequestClose?: () => void;
-    draggable?: boolean;
-}
-export declare const DRAGGABLE_HANDLE_CLASSNAME = "draggable-modal-handle";
-export declare const DRAGGABLE_CANCEL_CLASSNAME = "draggable-modal-cancel";
-export declare const BaseModal: React.FC<BaseModalProps>;
+import * as React from "react";
+import ReactModal from "react-modal";
+export interface BaseModalProps extends ReactModal.Props {
+    width?: string;
+    onRequestClose?: () => void;
+    draggable?: boolean;
+}
+export declare const DRAGGABLE_HANDLE_CLASSNAME = "draggable-modal-handle";
+export declare const DRAGGABLE_CANCEL_CLASSNAME = "draggable-modal-cancel";
+export declare const BaseModal: React.FC<BaseModalProps>;

package/dist/components/modal/Modal.d.ts

@@ -1,11 +1,11 @@
-import * as React from "react";
-import { BaseModalProps } from "./BaseModal";
-import { ModalHeaderProps } from "./ModalHeader";
-export interface ModalProps extends BaseModalProps, ModalHeaderProps {
-    spacing?: number;
-    indent?: number;
-    draggable?: boolean;
-    footer?: React.ReactNode;
-    disableStickyFooter?: boolean;
-}
-export declare const Modal: React.FC<ModalProps>;
+import * as React from "react";
+import { BaseModalProps } from "./BaseModal";
+import { ModalHeaderProps } from "./ModalHeader";
+export interface ModalProps extends BaseModalProps, ModalHeaderProps {
+    spacing?: number;
+    indent?: number;
+    draggable?: boolean;
+    footer?: React.ReactNode;
+    disableStickyFooter?: boolean;
+}
+export declare const Modal: React.FC<ModalProps>;

package/dist/components/modal/ModalFooter.d.ts

@@ -1,6 +1,6 @@
-import * as React from "react";
-import { ReactNode } from "react";
-export interface ModalFooterProps {
-    children?: ReactNode;
-}
-export declare const ModalFooter: React.FC<ModalFooterProps>;
+import * as React from "react";
+import { ReactNode } from "react";
+export interface ModalFooterProps {
+    children?: ReactNode;
+}
+export declare const ModalFooter: React.FC<ModalFooterProps>;

package/dist/components/modal/ModalHeader.d.ts

@@ -1,9 +1,9 @@
-import * as React from "react";
-import { ReactNode } from "react";
-export interface ModalHeaderProps {
-    onRequestClose?: () => void;
-    header?: ReactNode;
-    headerText?: string;
-    closeButtonClassName?: string;
-}
-export declare const ModalHeader: React.FC<ModalHeaderProps>;
+import * as React from "react";
+import { ReactNode } from "react";
+export interface ModalHeaderProps {
+    onRequestClose?: () => void;
+    header?: ReactNode;
+    headerText?: string;
+    closeButtonClassName?: string;
+}
+export declare const ModalHeader: React.FC<ModalHeaderProps>;

package/dist/index.d.ts

@@ -1,7 +1,7 @@
-export * from "./components/modal/BaseModal";
-export * from "./components/drawer/Drawer";
-export * from "./components/center-modal/CenterModal";
-export * from "./components/loading-modal/LoadingModal";
-export * from "./components/modal/Modal";
-export * from "./components/modal/ModalHeader";
-export * from "./components/modal/ModalFooter";
+export * from "./components/modal/BaseModal";
+export * from "./components/drawer/Drawer";
+export * from "./components/center-modal/CenterModal";
+export * from "./components/loading-modal/LoadingModal";
+export * from "./components/modal/Modal";
+export * from "./components/modal/ModalHeader";
+export * from "./components/modal/ModalFooter";

package/dist/index.es.js

@@ -1,177 +1,275 @@
-import * as React from 'react';
-import ReactModal from 'react-modal';
-import Draggable from 'react-draggable';
-import cx from 'classnames';
-import { exhaustSwitchCase, Column, Box, Spacing, Row, Indent, Heading, Txt } from '@stenajs-webui/core';
-import { Spinner, Icon, FlatButton, stenaTimes } from '@stenajs-webui/elements';
-
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-var __assign = function() {
-    __assign = Object.assign || function __assign(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);
-};
-
-function __rest(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;
-}
-
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
+(function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode("._overlay_11kta_1{--swui-modal-animation-time: var(--swui-animation-time-fast);--swui-modal-overlay-bg-color: var(--swui-overlay-bg-color);--swui-modal-padding: var(--swui-metrics-space);--swui-modal-content-bg-color: var(--swui-white);--swui-modal-width: 960px;--swui-modal-header-border-color: var(--lhds-color-ui-300);--swui-modal-shadow: var(--swui-shadow-modal);--swui-modal-footer-shadow: var(--swui-shadow-modal);position:fixed;z-index:10;top:0;left:0;right:0;bottom:0;background-color:var(--swui-modal-overlay-bg-color);overflow:auto;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;padding:var(--swui-modal-padding);-webkit-animation:_fadeIn_11kta_1 var(--swui-modal-animation-time) cubic-bezier(.645,.045,.355,1) both;animation:_fadeIn_11kta_1 var(--swui-modal-animation-time) cubic-bezier(.645,.045,.355,1) both}@media print{._overlay_11kta_1{background-color:#fff}}._overlay_11kta_1 ._modal_11kta_32{max-width:100%;outline:none;pointer-events:none}._overlay_11kta_1 ._content_11kta_38{position:relative;display:block;background:var(--swui-modal-content-bg-color);box-shadow:var(--swui-modal-shadow);pointer-events:all;width:var(--swui-modal-width);max-width:100%;-webkit-animation:_appear_11kta_1 var(--swui-animation-time-fast) cubic-bezier(.645,.045,.355,1) both;animation:_appear_11kta_1 var(--swui-animation-time-fast) cubic-bezier(.645,.045,.355,1) both}@media print{._overlay_11kta_1 ._content_11kta_38{box-shadow:none;top:0}}._overlay_11kta_1 ._content_11kta_38 :focus{outline:0}._overlay_11kta_1 ._content_11kta_38._isDraggable_11kta_60 .draggable-modal-handle{cursor:move}._overlay_11kta_1 ._content_11kta_38._isDraggable_11kta_60 .draggable-modal-handle .draggable-modal-cancel,._overlay_11kta_1 ._content_11kta_38._isDraggable_11kta_60 .draggable-modal-handle [role=tooltip]{cursor:initial}@-webkit-keyframes _fadeIn_11kta_1{0%{background-color:var(--swui-hidden)}to{background-color:var(--swui-modal-overlay-bg-color)}}@keyframes _fadeIn_11kta_1{0%{background-color:var(--swui-hidden)}to{background-color:var(--swui-modal-overlay-bg-color)}}@-webkit-keyframes _appear_11kta_1{0%{top:calc(0 - var(--swui-metrics-space));opacity:0}to{top:var(--swui-metrics-space);opacity:1}}@keyframes _appear_11kta_1{0%{top:calc(0 - var(--swui-metrics-space));opacity:0}to{top:var(--swui-metrics-space);opacity:1}}._footer_11kta_93{background-color:var(--swui-modal-content-bg-color)}._stickyFooter_11kta_97{position:-webkit-sticky;position:sticky;bottom:calc(-1 * var(--swui-modal-padding));box-shadow:var(--swui-modal-footer-shadow)}@media print{._stickyFooter_11kta_97{position:static;box-shadow:none}}._portal_17quq_1 ._overlay_17quq_2{position:fixed;inset:0}._portal_17quq_1 ._content_17quq_7{box-shadow:var(--swui-shadow-modal);background:white;position:absolute;transition:-webkit-transform var(--swui-animation-time-medium) ease-in-out;transition:transform var(--swui-animation-time-medium) ease-in-out;transition:transform var(--swui-animation-time-medium) ease-in-out,-webkit-transform var(--swui-animation-time-medium) ease-in-out}._portal_17quq_1 ._content_17quq_7._slideFromLeft_17quq_13,._portal_17quq_1 ._content_17quq_7._slideFromRight_17quq_14{-webkit-transform:translateX(var(--translate-x-outside-screen, 0));transform:translate(var(--translate-x-outside-screen, 0));overflow-y:auto;top:0;bottom:0}._portal_17quq_1 ._content_17quq_7._slideFromLeft_17quq_13._afterOpen_17quq_20,._portal_17quq_1 ._content_17quq_7._slideFromRight_17quq_14._afterOpen_17quq_20{-webkit-transform:translateX(0);transform:translate(0)}._portal_17quq_1 ._content_17quq_7._slideFromLeft_17quq_13._beforeClose_17quq_24,._portal_17quq_1 ._content_17quq_7._slideFromRight_17quq_14._beforeClose_17quq_24{-webkit-transform:translateX(var(--translate-x-outside-screen));transform:translate(var(--translate-x-outside-screen))}._portal_17quq_1 ._content_17quq_7._slideFromTop_17quq_29,._portal_17quq_1 ._content_17quq_7._slideFromBottom_17quq_30{-webkit-transform:translateY(var(--translate-y-outside-screen, 0));transform:translateY(var(--translate-y-outside-screen, 0));overflow-x:auto;left:0;right:0}._portal_17quq_1 ._content_17quq_7._slideFromTop_17quq_29._afterOpen_17quq_20,._portal_17quq_1 ._content_17quq_7._slideFromBottom_17quq_30._afterOpen_17quq_20{-webkit-transform:translateY(0);transform:translateY(0)}._portal_17quq_1 ._content_17quq_7._slideFromTop_17quq_29._beforeClose_17quq_24,._portal_17quq_1 ._content_17quq_7._slideFromBottom_17quq_30._beforeClose_17quq_24{-webkit-transform:translateY(var(--translate-y-outside-screen));transform:translateY(var(--translate-y-outside-screen))}._portal_17quq_1 ._content_17quq_7._slideFromLeft_17quq_13{--translate-x-outside-screen: -100%;width:370px;left:0}._portal_17quq_1 ._content_17quq_7._slideFromRight_17quq_14{--translate-x-outside-screen: 100%;width:370px;right:0}._portal_17quq_1 ._content_17quq_7._slideFromTop_17quq_29{--translate-y-outside-screen: -100%;height:370px;top:0}._portal_17quq_1 ._content_17quq_7._slideFromBottom_17quq_30{--translate-y-outside-screen: 100%;height:370px;bottom:0}._modal_4fwgb_1{display:flex;justify-content:center;align-items:center;position:fixed;top:0;left:0;right:0;bottom:0;background-color:transparent}._overlay_4fwgb_13{position:fixed;top:0;left:0;right:0;bottom:0;background-color:var(--swui-overlay-bg-color)}")); document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();import ReactModal from "react-modal";
+import Draggable from "react-draggable";
+import cx from "classnames";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { exhaustSwitchCase, Column, Box, Spacing, Row, Indent, Heading, Txt } from "@stenajs-webui/core";
+import { Spinner, Icon, FlatButton, stenaTimes } from "@stenajs-webui/elements";
+const overlay$2 = "_overlay_11kta_1";
+const fadeIn = "_fadeIn_11kta_1";
+const modal$1 = "_modal_11kta_32";
+const content$1 = "_content_11kta_38";
+const appear = "_appear_11kta_1";
+const isDraggable = "_isDraggable_11kta_60";
+const footer = "_footer_11kta_93";
+const stickyFooter = "_stickyFooter_11kta_97";
+var styles$2 = {
+  overlay: overlay$2,
+  fadeIn,
+  modal: modal$1,
+  content: content$1,
+  appear,
+  isDraggable,
+  footer,
+  stickyFooter
+};
+const DRAGGABLE_HANDLE_CLASSNAME = "draggable-modal-handle";
+const DRAGGABLE_CANCEL_CLASSNAME = "draggable-modal-cancel";
+const BaseModal = ({
+  width,
+  draggable = false,
+  children,
+  ...reactModalProps
+}) => {
+  return /* @__PURE__ */ jsx(ReactModal, {
+    overlayClassName: styles$2.overlay,
+    className: styles$2.modal,
+    ...reactModalProps,
+    children: /* @__PURE__ */ jsx(Draggable, {
+      handle: `.${DRAGGABLE_HANDLE_CLASSNAME}`,
+      cancel: `.${DRAGGABLE_CANCEL_CLASSNAME}, button, [role="tooltip"]`,
+      bounds: ".ReactModal__Overlay",
+      disabled: !draggable,
+      children: /* @__PURE__ */ jsx("div", {
+        style: {
+          ["--swui-modal-width"]: width
+        },
+        className: cx(styles$2.content, {
+          [styles$2.isDraggable]: draggable
+        }),
+        children
+      })
+    })
+  });
+};
+const portal = "_portal_17quq_1";
+const overlay$1 = "_overlay_17quq_2";
+const content = "_content_17quq_7";
+const slideFromLeft = "_slideFromLeft_17quq_13";
+const slideFromRight = "_slideFromRight_17quq_14";
+const afterOpen = "_afterOpen_17quq_20";
+const beforeClose = "_beforeClose_17quq_24";
+const slideFromTop = "_slideFromTop_17quq_29";
+const slideFromBottom = "_slideFromBottom_17quq_30";
+var styles$1 = {
+  portal,
+  overlay: overlay$1,
+  content,
+  slideFromLeft,
+  slideFromRight,
+  afterOpen,
+  beforeClose,
+  slideFromTop,
+  slideFromBottom
+};
+const Drawer = ({
+  background,
+  zIndex,
+  children,
+  slideFrom = "left",
+  portalTarget,
+  ...reactModalProps
+}) => {
+  const {
+    height,
+    width
+  } = reactModalProps;
+  return /* @__PURE__ */ jsx(ReactModal, {
+    closeTimeoutMS: 250,
+    portalClassName: styles$1.portal,
+    overlayClassName: {
+      base: styles$1.overlay,
+      afterOpen: styles$1.afterOpen,
+      beforeClose: styles$1.beforeClose
+    },
+    className: {
+      base: cx(styles$1.content, getClassNameForSlide(slideFrom)),
+      afterOpen: styles$1.afterOpen,
+      beforeClose: styles$1.beforeClose
+    },
+    style: {
+      content: {
+        width,
+        height,
+        background
+      },
+      overlay: {
+        zIndex
+      }
+    },
+    parentSelector: portalTarget ? () => portalTarget : void 0,
+    ...reactModalProps,
+    children
+  });
+};
+const getClassNameForSlide = (slideFrom) => {
+  switch (slideFrom) {
+    case "left":
+      return styles$1.slideFromLeft;
+    case "right":
+      return styles$1.slideFromRight;
+    case "top":
+      return styles$1.slideFromTop;
+    case "bottom":
+      return styles$1.slideFromBottom;
+    default:
+      return exhaustSwitchCase(slideFrom, styles$1.slideFromLeft);
   }
-}
-
-var css_248z$2 = ".Modal-module_overlay__1c4LV {\n  --swui-modal-animation-time: var(--swui-animation-time-fast);\n  --swui-modal-overlay-bg-color: var(--swui-overlay-bg-color);\n  --swui-modal-padding: var(--swui-metrics-space);\n  --swui-modal-content-bg-color: var(--swui-white);\n  --swui-modal-width: 960px;\n  --swui-modal-header-border-color: var(--lhds-color-ui-300);\n  --swui-modal-shadow: var(--swui-shadow-modal);\n  --swui-modal-footer-shadow: var(--swui-shadow-modal);\n\n  position: fixed;\n  z-index: 10;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: var(--swui-modal-overlay-bg-color);\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: center;\n  padding: var(--swui-modal-padding);\n\n  -webkit-animation: Modal-module_fadeIn__2XO70 var(--swui-modal-animation-time)\n    cubic-bezier(0.645, 0.045, 0.355, 1) both;\n\n          animation: Modal-module_fadeIn__2XO70 var(--swui-modal-animation-time)\n    cubic-bezier(0.645, 0.045, 0.355, 1) both;\n}\n\n  @media print {.Modal-module_overlay__1c4LV {\n    background-color: rgba(255, 255, 255, 1)\n}\n  }\n\n  .Modal-module_overlay__1c4LV .Modal-module_modal__1XMQr {\n    max-width: 100%;\n    outline: none;\n    pointer-events: none;\n  }\n\n  .Modal-module_overlay__1c4LV .Modal-module_content__10pSm {\n    position: relative;\n    display: block;\n    background: var(--swui-modal-content-bg-color);\n    box-shadow: var(--swui-modal-shadow);\n    pointer-events: all;\n\n    width: var(--swui-modal-width);\n    max-width: 100%;\n\n    -webkit-animation: Modal-module_appear__36n8p var(--swui-animation-time-fast)\n      cubic-bezier(0.645, 0.045, 0.355, 1) both;\n\n            animation: Modal-module_appear__36n8p var(--swui-animation-time-fast)\n      cubic-bezier(0.645, 0.045, 0.355, 1) both;\n  }\n\n  @media print {\n\n  .Modal-module_overlay__1c4LV .Modal-module_content__10pSm {\n      box-shadow: none;\n      top: 0\n  }\n    }\n\n  .Modal-module_overlay__1c4LV .Modal-module_content__10pSm :focus {\n      outline: 0;\n    }\n\n  .Modal-module_overlay__1c4LV .Modal-module_content__10pSm.Modal-module_isDraggable__3l3pM .draggable-modal-handle {\n        cursor: move;\n      }\n\n  .Modal-module_overlay__1c4LV .Modal-module_content__10pSm.Modal-module_isDraggable__3l3pM .draggable-modal-handle .draggable-modal-cancel,\n        .Modal-module_overlay__1c4LV .Modal-module_content__10pSm.Modal-module_isDraggable__3l3pM .draggable-modal-handle [role=\"tooltip\"] {\n          cursor: initial;\n        }\n\n@-webkit-keyframes Modal-module_fadeIn__2XO70 {\n  0% {\n    background-color: var(--swui-hidden);\n  }\n  100% {\n    background-color: var(--swui-modal-overlay-bg-color);\n  }\n}\n\n@keyframes Modal-module_fadeIn__2XO70 {\n  0% {\n    background-color: var(--swui-hidden);\n  }\n  100% {\n    background-color: var(--swui-modal-overlay-bg-color);\n  }\n}\n\n@-webkit-keyframes Modal-module_appear__36n8p {\n  0% {\n    top: calc(0 - var(--swui-metrics-space));\n    opacity: 0;\n  }\n  100% {\n    top: var(--swui-metrics-space);\n    opacity: 1;\n  }\n}\n\n@keyframes Modal-module_appear__36n8p {\n  0% {\n    top: calc(0 - var(--swui-metrics-space));\n    opacity: 0;\n  }\n  100% {\n    top: var(--swui-metrics-space);\n    opacity: 1;\n  }\n}\n\n.Modal-module_footer__2FN1E {\n  background-color: var(--swui-modal-content-bg-color);\n}\n\n.Modal-module_stickyFooter__9tQSR {\n  position: -webkit-sticky;\n  position: sticky;\n  bottom: calc(-1 * var(--swui-modal-padding));\n  box-shadow: var(--swui-modal-footer-shadow);\n}\n\n@media print {\n\n.Modal-module_stickyFooter__9tQSR {\n    position: static;\n    box-shadow: none\n}\n  }\n";
-var styles$2 = {"overlay":"Modal-module_overlay__1c4LV","fadeIn":"Modal-module_fadeIn__2XO70","modal":"Modal-module_modal__1XMQr","content":"Modal-module_content__10pSm","appear":"Modal-module_appear__36n8p","isDraggable":"Modal-module_isDraggable__3l3pM","footer":"Modal-module_footer__2FN1E","stickyFooter":"Modal-module_stickyFooter__9tQSR"};
-styleInject(css_248z$2);
-
-var DRAGGABLE_HANDLE_CLASSNAME = "draggable-modal-handle";
-var DRAGGABLE_CANCEL_CLASSNAME = "draggable-modal-cancel";
-var BaseModal = function (_a) {
-    var _b, _c;
-    var width = _a.width, _d = _a.draggable, draggable = _d === void 0 ? false : _d, children = _a.children, reactModalProps = __rest(_a, ["width", "draggable", "children"]);
-    return (React.createElement(ReactModal, __assign({ overlayClassName: styles$2.overlay, className: styles$2.modal }, reactModalProps),
-        React.createElement(Draggable, { handle: ".".concat(DRAGGABLE_HANDLE_CLASSNAME), cancel: ".".concat(DRAGGABLE_CANCEL_CLASSNAME, ", button, [role=\"tooltip\"]"), bounds: ".ReactModal__Overlay", disabled: !draggable },
-            React.createElement("div", { style: (_b = {}, _b["--swui-modal-width"] = width, _b), className: cx(styles$2.content, (_c = {},
-                    _c[styles$2.isDraggable] = draggable,
-                    _c)) }, children))));
 };
-
-var css_248z$1 = ".Drawer-module_portal__3qRVU .Drawer-module_overlay__1eTzQ {\n    position: fixed;\n    inset: 0;\n  }\n  .Drawer-module_portal__3qRVU .Drawer-module_content__2humM {\n    box-shadow: var(--swui-shadow-modal);\n    background: white;\n    position: absolute;\n    transition: -webkit-transform var(--swui-animation-time-medium) ease-in-out;\n    transition: transform var(--swui-animation-time-medium) ease-in-out;\n    transition: transform var(--swui-animation-time-medium) ease-in-out, -webkit-transform var(--swui-animation-time-medium) ease-in-out;\n  }\n  .Drawer-module_portal__3qRVU .Drawer-module_content__2humM.Drawer-module_slideFromLeft__3w1LJ,\n    .Drawer-module_portal__3qRVU .Drawer-module_content__2humM.Drawer-module_slideFromRight__V_rl4 {\n      -webkit-transform: translateX(var(--translate-x-outside-screen, 0));\n              transform: translateX(var(--translate-x-outside-screen, 0));\n      overflow-y: auto;\n      top: 0;\n      bottom: 0;\n    }\n  .Drawer-module_portal__3qRVU .Drawer-module_content__2humM.Drawer-module_slideFromLeft__3w1LJ.Drawer-module_afterOpen__2zpe_, .Drawer-module_portal__3qRVU .Drawer-module_content__2humM.Drawer-module_slideFromRight__V_rl4.Drawer-module_afterOpen__2zpe_ {\n        -webkit-transform: translateX(0);\n                transform: translateX(0);\n      }\n  .Drawer-module_portal__3qRVU .Drawer-module_content__2humM.Drawer-module_slideFromLeft__3w1LJ.Drawer-module_beforeClose__1ub2d, .Drawer-module_portal__3qRVU .Drawer-module_content__2humM.Drawer-module_slideFromRight__V_rl4.Drawer-module_beforeClose__1ub2d {\n        -webkit-transform: translateX(var(--translate-x-outside-screen));\n                transform: translateX(var(--translate-x-outside-screen));\n      }\n  .Drawer-module_portal__3qRVU .Drawer-module_content__2humM.Drawer-module_slideFromTop__2mdnr,\n    .Drawer-module_portal__3qRVU .Drawer-module_content__2humM.Drawer-module_slideFromBottom__1ryrr {\n      -webkit-transform: translateY(var(--translate-y-outside-screen, 0));\n              transform: translateY(var(--translate-y-outside-screen, 0));\n      overflow-x: auto;\n      left: 0;\n      right: 0;\n    }\n  .Drawer-module_portal__3qRVU .Drawer-module_content__2humM.Drawer-module_slideFromTop__2mdnr.Drawer-module_afterOpen__2zpe_, .Drawer-module_portal__3qRVU .Drawer-module_content__2humM.Drawer-module_slideFromBottom__1ryrr.Drawer-module_afterOpen__2zpe_ {\n        -webkit-transform: translateY(0);\n                transform: translateY(0);\n      }\n  .Drawer-module_portal__3qRVU .Drawer-module_content__2humM.Drawer-module_slideFromTop__2mdnr.Drawer-module_beforeClose__1ub2d, .Drawer-module_portal__3qRVU .Drawer-module_content__2humM.Drawer-module_slideFromBottom__1ryrr.Drawer-module_beforeClose__1ub2d {\n        -webkit-transform: translateY(var(--translate-y-outside-screen));\n                transform: translateY(var(--translate-y-outside-screen));\n      }\n  .Drawer-module_portal__3qRVU .Drawer-module_content__2humM.Drawer-module_slideFromLeft__3w1LJ {\n      --translate-x-outside-screen: -100%;\n      width: 370px;\n      left: 0;\n    }\n  .Drawer-module_portal__3qRVU .Drawer-module_content__2humM.Drawer-module_slideFromRight__V_rl4 {\n      --translate-x-outside-screen: 100%;\n      width: 370px;\n      right: 0;\n    }\n  .Drawer-module_portal__3qRVU .Drawer-module_content__2humM.Drawer-module_slideFromTop__2mdnr {\n      --translate-y-outside-screen: -100%;\n      height: 370px;\n      top: 0;\n    }\n  .Drawer-module_portal__3qRVU .Drawer-module_content__2humM.Drawer-module_slideFromBottom__1ryrr {\n      --translate-y-outside-screen: 100%;\n      height: 370px;\n      bottom: 0;\n    }\n";
-var styles$1 = {"portal":"Drawer-module_portal__3qRVU","overlay":"Drawer-module_overlay__1eTzQ","content":"Drawer-module_content__2humM","slideFromLeft":"Drawer-module_slideFromLeft__3w1LJ","slideFromRight":"Drawer-module_slideFromRight__V_rl4","afterOpen":"Drawer-module_afterOpen__2zpe_","beforeClose":"Drawer-module_beforeClose__1ub2d","slideFromTop":"Drawer-module_slideFromTop__2mdnr","slideFromBottom":"Drawer-module_slideFromBottom__1ryrr"};
-styleInject(css_248z$1);
-
-var Drawer = function (_a) {
-    var background = _a.background, zIndex = _a.zIndex, children = _a.children, _b = _a.slideFrom, slideFrom = _b === void 0 ? "left" : _b, portalTarget = _a.portalTarget, reactModalProps = __rest(_a, ["background", "zIndex", "children", "slideFrom", "portalTarget"]);
-    var _c = reactModalProps, height = _c.height, width = _c.width;
-    return (React.createElement(ReactModal, __assign({ closeTimeoutMS: 250, portalClassName: styles$1.portal, overlayClassName: {
-            base: styles$1.overlay,
-            afterOpen: styles$1.afterOpen,
-            beforeClose: styles$1.beforeClose,
-        }, className: {
-            base: cx(styles$1.content, getClassNameForSlide(slideFrom)),
-            afterOpen: styles$1.afterOpen,
-            beforeClose: styles$1.beforeClose,
-        }, style: { content: { width: width, height: height, background: background }, overlay: { zIndex: zIndex } }, parentSelector: portalTarget ? function () { return portalTarget; } : undefined }, reactModalProps), children));
-};
-var getClassNameForSlide = function (slideFrom) {
-    switch (slideFrom) {
-        case "left":
-            return styles$1.slideFromLeft;
-        case "right":
-            return styles$1.slideFromRight;
-        case "top":
-            return styles$1.slideFromTop;
-        case "bottom":
-            return styles$1.slideFromBottom;
-        default:
-            return exhaustSwitchCase(slideFrom, styles$1.slideFromLeft);
-    }
+const style = {
+  overlay: {
+    justifyContent: "center"
+  }
 };
-
-var style = { overlay: { justifyContent: "center" } };
-var CenterModal = function (_a) {
-    var _b;
-    var children = _a.children, reactModalProps = __rest(_a, ["children"]);
-    return (React.createElement(ReactModal, __assign({ overlayClassName: styles$2.overlay, className: styles$2.modal, style: style }, reactModalProps),
-        React.createElement("div", { className: styles$2.content, style: (_b = {}, _b["--swui-modal-width"] = "fit-content", _b) }, children)));
+const CenterModal = ({
+  children,
+  ...reactModalProps
+}) => {
+  return /* @__PURE__ */ jsx(ReactModal, {
+    overlayClassName: styles$2.overlay,
+    className: styles$2.modal,
+    style,
+    ...reactModalProps,
+    children: /* @__PURE__ */ jsx("div", {
+      className: styles$2.content,
+      style: {
+        ["--swui-modal-width"]: "fit-content"
+      },
+      children
+    })
+  });
 };
-
-var css_248z = ".LoadingModal-module_modal__1gDTX {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: transparent;\n}\n\n.LoadingModal-module_overlay__2YRgt {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: var(--swui-overlay-bg-color);\n}\n";
-var styles = {"modal":"LoadingModal-module_modal__1gDTX","overlay":"LoadingModal-module_overlay__2YRgt"};
-styleInject(css_248z);
-
-var LoadingModal = function (_a) {
-    var headerIconLeft = _a.headerIconLeft, headerText = _a.headerText, modalProps = __rest(_a, ["headerIconLeft", "headerText"]);
-    return (React.createElement(ReactModal, __assign({}, modalProps, { isOpen: true, className: styles.modal, overlayClassName: styles.overlay }),
-        React.createElement(Column, { spacing: 2, alignItems: "center" },
-            React.createElement(Box, { alignItems: "center", justifyContent: "center", width: "64px", height: "64px", borderRadius: "50%", background: "white", shadow: "modal" },
-                React.createElement(Spinner, { size: "small" })),
-            (headerIconLeft || headerText) && (React.createElement(React.Fragment, null,
-                React.createElement(Spacing, null),
-                React.createElement(Row, { indent: 2 },
-                    headerIconLeft && (React.createElement(React.Fragment, null,
-                        React.createElement(Icon, { size: 14, icon: headerIconLeft, color: "white" }),
-                        React.createElement(Indent, null))),
-                    headerText && (React.createElement(Heading, { variant: "h4", color: "white" }, headerText))))))));
+const modal = "_modal_4fwgb_1";
+const overlay = "_overlay_4fwgb_13";
+var styles = {
+  modal,
+  overlay
 };
-
-var ModalHeader = function (_a) {
-    var onRequestClose = _a.onRequestClose, header = _a.header, headerText = _a.headerText, closeButtonClassName = _a.closeButtonClassName;
-    return (React.createElement(Row, { spacing: 2, indent: 2, borderBottom: "1px solid var(--swui-modal-header-border-color)", className: DRAGGABLE_HANDLE_CLASSNAME },
-        React.createElement(Row, { flex: 1, indent: true, alignItems: "center" },
-            headerText && (React.createElement(Txt, { className: DRAGGABLE_CANCEL_CLASSNAME, size: "large" }, headerText)),
-            header),
-        React.createElement(Box, { alignSelf: "flex-start" },
-            React.createElement(FlatButton, { className: closeButtonClassName, onClick: onRequestClose, "aria-label": "Close", leftIcon: stenaTimes }))));
+const LoadingModal = ({
+  headerIconLeft,
+  headerText,
+  ...modalProps
+}) => {
+  return /* @__PURE__ */ jsx(ReactModal, {
+    ...modalProps,
+    isOpen: true,
+    className: styles.modal,
+    overlayClassName: styles.overlay,
+    children: /* @__PURE__ */ jsxs(Column, {
+      spacing: 2,
+      alignItems: "center",
+      children: [/* @__PURE__ */ jsx(Box, {
+        alignItems: "center",
+        justifyContent: "center",
+        width: "64px",
+        height: "64px",
+        borderRadius: "50%",
+        background: "white",
+        shadow: "modal",
+        children: /* @__PURE__ */ jsx(Spinner, {
+          size: "small"
+        })
+      }), (headerIconLeft || headerText) && /* @__PURE__ */ jsxs(Fragment, {
+        children: [/* @__PURE__ */ jsx(Spacing, {}), /* @__PURE__ */ jsxs(Row, {
+          indent: 2,
+          children: [headerIconLeft && /* @__PURE__ */ jsxs(Fragment, {
+            children: [/* @__PURE__ */ jsx(Icon, {
+              size: 14,
+              icon: headerIconLeft,
+              color: "white"
+            }), /* @__PURE__ */ jsx(Indent, {})]
+          }), headerText && /* @__PURE__ */ jsx(Heading, {
+            variant: "h4",
+            color: "white",
+            children: headerText
+          })]
+        })]
+      })]
+    })
+  });
 };
-
-var Modal = function (_a) {
-    var _b;
-    var header = _a.header, headerText = _a.headerText, children = _a.children, spacing = _a.spacing, indent = _a.indent, _c = _a.draggable, draggable = _c === void 0 ? false : _c, onRequestClose = _a.onRequestClose, closeButtonClassName = _a.closeButtonClassName, footer = _a.footer, _d = _a.disableStickyFooter, disableStickyFooter = _d === void 0 ? false : _d, props = __rest(_a, ["header", "headerText", "children", "spacing", "indent", "draggable", "onRequestClose", "closeButtonClassName", "footer", "disableStickyFooter"]);
-    var activeSpacing = typeof spacing === "number" ? spacing : 1;
-    var activeIndent = typeof indent === "number" ? indent : 1;
-    return (React.createElement(BaseModal, __assign({}, props, { onRequestClose: onRequestClose, draggable: draggable }),
-        React.createElement(ModalHeader, { onRequestClose: onRequestClose, header: header, headerText: headerText, closeButtonClassName: closeButtonClassName }),
-        React.createElement(Box, { spacing: activeSpacing, indent: activeIndent }, children),
-        footer && (React.createElement(Box, { className: cx(styles$2.footer, (_b = {},
-                _b[styles$2.stickyFooter] = !disableStickyFooter,
-                _b)) }, footer))));
+const ModalHeader = ({
+  onRequestClose,
+  header,
+  headerText,
+  closeButtonClassName
+}) => {
+  return /* @__PURE__ */ jsxs(Row, {
+    spacing: 2,
+    indent: 2,
+    borderBottom: "1px solid var(--swui-modal-header-border-color)",
+    className: DRAGGABLE_HANDLE_CLASSNAME,
+    children: [/* @__PURE__ */ jsxs(Row, {
+      flex: 1,
+      indent: true,
+      alignItems: "center",
+      children: [headerText && /* @__PURE__ */ jsx(Txt, {
+        className: DRAGGABLE_CANCEL_CLASSNAME,
+        size: "large",
+        children: headerText
+      }), header]
+    }), /* @__PURE__ */ jsx(Box, {
+      alignSelf: "flex-start",
+      children: /* @__PURE__ */ jsx(FlatButton, {
+        className: closeButtonClassName,
+        onClick: onRequestClose,
+        "aria-label": "Close",
+        leftIcon: stenaTimes
+      })
+    })]
+  });
 };
-
-var ModalFooter = function (_a) {
-    var children = _a.children;
-    return (React.createElement(Column, { indent: 2, spacing: 2 }, children));
+const Modal = ({
+  header,
+  headerText,
+  children,
+  spacing,
+  indent,
+  draggable = false,
+  onRequestClose,
+  closeButtonClassName,
+  footer: footer2,
+  disableStickyFooter = false,
+  ...props
+}) => {
+  const activeSpacing = typeof spacing === "number" ? spacing : 1;
+  const activeIndent = typeof indent === "number" ? indent : 1;
+  return /* @__PURE__ */ jsxs(BaseModal, {
+    ...props,
+    onRequestClose,
+    draggable,
+    children: [/* @__PURE__ */ jsx(ModalHeader, {
+      onRequestClose,
+      header,
+      headerText,
+      closeButtonClassName
+    }), /* @__PURE__ */ jsx(Box, {
+      spacing: activeSpacing,
+      indent: activeIndent,
+      children
+    }), footer2 && /* @__PURE__ */ jsx(Box, {
+      className: cx(styles$2.footer, {
+        [styles$2.stickyFooter]: !disableStickyFooter
+      }),
+      children: footer2
+    })]
+  });
 };
-
+const ModalFooter = ({
+  children
+}) => /* @__PURE__ */ jsx(Column, {
+  indent: 2,
+  spacing: 2,
+  children
+});
 export { BaseModal, CenterModal, DRAGGABLE_CANCEL_CLASSNAME, DRAGGABLE_HANDLE_CLASSNAME, Drawer, LoadingModal, Modal, ModalFooter, ModalHeader };
 //# sourceMappingURL=index.es.js.map

package/dist/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../../../node_modules/style-inject/dist/style-inject.es.js","../src/components/modal/BaseModal.tsx","../src/components/drawer/Drawer.tsx","../src/components/center-modal/CenterModal.tsx","../src/components/loading-modal/LoadingModal.tsx","../src/components/modal/ModalHeader.tsx","../src/components/modal/Modal.tsx","../src/components/modal/ModalFooter.tsx"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n","import * as React from \"react\";\nimport ReactModal from \"react-modal\";\nimport Draggable from \"react-draggable\";\nimport cx from \"classnames\";\nimport styles from \"./Modal.module.css\";\n\nexport interface BaseModalProps extends ReactModal.Props {\n  width?: string;\n  onRequestClose?: () => void;\n  draggable?: boolean;\n}\n\nexport const DRAGGABLE_HANDLE_CLASSNAME = \"draggable-modal-handle\";\nexport const DRAGGABLE_CANCEL_CLASSNAME = \"draggable-modal-cancel\";\n\nexport const BaseModal: React.FC<BaseModalProps> = ({\n  width,\n  draggable = false,\n  children,\n  ...reactModalProps\n}) => {\n  return (\n    <ReactModal\n      overlayClassName={styles.overlay}\n      className={styles.modal}\n      {...reactModalProps}\n    >\n      <Draggable\n        handle={`.${DRAGGABLE_HANDLE_CLASSNAME}`}\n        cancel={`.${DRAGGABLE_CANCEL_CLASSNAME}, button, [role=\"tooltip\"]`}\n        bounds=\".ReactModal__Overlay\"\n        disabled={!draggable}\n      >\n        <div\n          style={{ [\"--swui-modal-width\" as string]: width }}\n          className={cx(styles.content, {\n            [styles.isDraggable]: draggable,\n          })}\n        >\n          {children}\n        </div>\n      </Draggable>\n    </ReactModal>\n  );\n};\n","import * as React from \"react\";\nimport ReactModal from \"react-modal\";\nimport cx from \"classnames\";\nimport styles from \"./Drawer.module.css\";\nimport { exhaustSwitchCase, FlattenUnion } from \"@stenajs-webui/core\";\n\nexport type SlideFrom = SlideFromLeftRight | SlideFromTopBottom;\nexport type SlideFromLeftRight = \"left\" | \"right\";\nexport type SlideFromTopBottom = \"top\" | \"bottom\";\n\nexport type DrawerProps = DrawerBaseLeftRight | DrawerBaseTopBottom;\n\ninterface DrawerBaseLeftRight extends DrawerBaseProps {\n  width?: string;\n  /**\n   * Which direction the drawer will appear from.\n   * @default left\n   * @param {String('left'|'right')}\n   */\n  slideFrom?: SlideFromLeftRight;\n}\n\ninterface DrawerBaseTopBottom extends DrawerBaseProps {\n  height?: string;\n  /**\n   * Which direction the drawer will appear from.\n   * @default left\n   * @param {String('top'|'bottom')}\n   */\n  slideFrom?: SlideFromTopBottom;\n}\n\ninterface DrawerBaseProps\n  extends Omit<\n    ReactModal.Props,\n    | \"closeTimeoutMS\"\n    | \"portalClassName\"\n    | \"overlayClassName\"\n    | \"className\"\n    | \"style\"\n    | \"parentSelector\"\n  > {\n  background?: string;\n  zIndex?: number;\n  onRequestClose?: () => void;\n  /**\n   * Portal target, HTML element. If not set, portal is not used.\n   */\n  portalTarget?: HTMLElement | null;\n}\n\nexport const Drawer: React.FC<DrawerProps> = ({\n  background,\n  zIndex,\n  children,\n  slideFrom = \"left\",\n  portalTarget,\n  ...reactModalProps\n}) => {\n  const { height, width } = reactModalProps as FlattenUnion<DrawerProps>;\n\n  return (\n    <ReactModal\n      closeTimeoutMS={250}\n      portalClassName={styles.portal}\n      overlayClassName={{\n        base: styles.overlay,\n        afterOpen: styles.afterOpen,\n        beforeClose: styles.beforeClose,\n      }}\n      className={{\n        base: cx(styles.content, getClassNameForSlide(slideFrom)),\n        afterOpen: styles.afterOpen,\n        beforeClose: styles.beforeClose,\n      }}\n      style={{ content: { width, height, background }, overlay: { zIndex } }}\n      parentSelector={portalTarget ? () => portalTarget : undefined}\n      {...reactModalProps}\n    >\n      {children}\n    </ReactModal>\n  );\n};\n\nconst getClassNameForSlide = (slideFrom: SlideFrom): string => {\n  switch (slideFrom) {\n    case \"left\":\n      return styles.slideFromLeft;\n    case \"right\":\n      return styles.slideFromRight;\n    case \"top\":\n      return styles.slideFromTop;\n    case \"bottom\":\n      return styles.slideFromBottom;\n    default:\n      return exhaustSwitchCase(slideFrom, styles.slideFromLeft);\n  }\n};\n","import * as React from \"react\";\nimport ReactModal from \"react-modal\";\n\nimport styles from \"../modal/Modal.module.css\";\n\nexport interface CenterModalProps extends ReactModal.Props {\n  onRequestClose?: () => void;\n}\n\nconst style = { overlay: { justifyContent: \"center\" } };\n\nexport const CenterModal: React.FC<CenterModalProps> = ({\n  children,\n  ...reactModalProps\n}) => {\n  return (\n    <ReactModal\n      overlayClassName={styles.overlay}\n      className={styles.modal}\n      style={style}\n      {...reactModalProps}\n    >\n      <div\n        className={styles.content}\n        style={{ [\"--swui-modal-width\" as string]: \"fit-content\" }}\n      >\n        {children}\n      </div>\n    </ReactModal>\n  );\n};\n","import { IconDefinition } from \"@fortawesome/fontawesome-svg-core\";\nimport {\n  Box,\n  Column,\n  Heading,\n  Indent,\n  Row,\n  Spacing,\n} from \"@stenajs-webui/core\";\nimport { Icon, Spinner } from \"@stenajs-webui/elements\";\nimport * as React from \"react\";\nimport ReactModal from \"react-modal\";\nimport styles from \"./LoadingModal.module.css\";\n\nexport interface LoadingModalProps extends Omit<ReactModal.Props, \"isOpen\"> {\n  headerText?: string;\n  headerIconLeft?: IconDefinition;\n}\n\nexport const LoadingModal: React.FC<LoadingModalProps> = ({\n  headerIconLeft,\n  headerText,\n  ...modalProps\n}) => {\n  return (\n    <ReactModal\n      {...modalProps}\n      isOpen\n      className={styles.modal}\n      overlayClassName={styles.overlay}\n    >\n      <Column spacing={2} alignItems={\"center\"}>\n        <Box\n          alignItems={\"center\"}\n          justifyContent={\"center\"}\n          width={\"64px\"}\n          height={\"64px\"}\n          borderRadius={\"50%\"}\n          background={\"white\"}\n          shadow={\"modal\"}\n        >\n          <Spinner size={\"small\"} />\n        </Box>\n        {(headerIconLeft || headerText) && (\n          <>\n            <Spacing />\n            <Row indent={2}>\n              {headerIconLeft && (\n                <>\n                  <Icon size={14} icon={headerIconLeft} color={\"white\"} />\n                  <Indent />\n                </>\n              )}\n              {headerText && (\n                <Heading variant={\"h4\"} color={\"white\"}>\n                  {headerText}\n                </Heading>\n              )}\n            </Row>\n          </>\n        )}\n      </Column>\n    </ReactModal>\n  );\n};\n","import { FlatButton, stenaTimes } from \"@stenajs-webui/elements\";\nimport * as React from \"react\";\nimport { ReactNode } from \"react\";\nimport {\n  DRAGGABLE_CANCEL_CLASSNAME,\n  DRAGGABLE_HANDLE_CLASSNAME,\n} from \"./BaseModal\";\nimport { Box, Row, Txt } from \"@stenajs-webui/core\";\n\nexport interface ModalHeaderProps {\n  onRequestClose?: () => void;\n  header?: ReactNode;\n  headerText?: string;\n  closeButtonClassName?: string;\n}\n\nexport const ModalHeader: React.FC<ModalHeaderProps> = ({\n  onRequestClose,\n  header,\n  headerText,\n  closeButtonClassName,\n}) => {\n  return (\n    <Row\n      spacing={2}\n      indent={2}\n      borderBottom={\"1px solid var(--swui-modal-header-border-color)\"}\n      className={DRAGGABLE_HANDLE_CLASSNAME}\n    >\n      <Row flex={1} indent alignItems={\"center\"}>\n        {headerText && (\n          <Txt className={DRAGGABLE_CANCEL_CLASSNAME} size={\"large\"}>\n            {headerText}\n          </Txt>\n        )}\n        {header}\n      </Row>\n      <Box alignSelf={\"flex-start\"}>\n        <FlatButton\n          className={closeButtonClassName}\n          onClick={onRequestClose}\n          aria-label={\"Close\"}\n          leftIcon={stenaTimes}\n        />\n      </Box>\n    </Row>\n  );\n};\n","import { Box } from \"@stenajs-webui/core\";\nimport * as React from \"react\";\nimport { BaseModal, BaseModalProps } from \"./BaseModal\";\nimport { ModalHeader, ModalHeaderProps } from \"./ModalHeader\";\nimport cx from \"classnames\";\nimport styles from \"./Modal.module.css\";\n\nexport interface ModalProps extends BaseModalProps, ModalHeaderProps {\n  spacing?: number;\n  indent?: number;\n  draggable?: boolean;\n  footer?: React.ReactNode;\n  disableStickyFooter?: boolean;\n}\n\nexport const Modal: React.FC<ModalProps> = ({\n  header,\n  headerText,\n  children,\n  spacing,\n  indent,\n  draggable = false,\n  onRequestClose,\n  closeButtonClassName,\n  footer,\n  disableStickyFooter = false,\n  ...props\n}) => {\n  const activeSpacing = typeof spacing === \"number\" ? spacing : 1;\n  const activeIndent = typeof indent === \"number\" ? indent : 1;\n\n  return (\n    <BaseModal {...props} onRequestClose={onRequestClose} draggable={draggable}>\n      <ModalHeader\n        onRequestClose={onRequestClose}\n        header={header}\n        headerText={headerText}\n        closeButtonClassName={closeButtonClassName}\n      />\n      <Box spacing={activeSpacing} indent={activeIndent}>\n        {children}\n      </Box>\n      {footer && (\n        <Box\n          className={cx(styles.footer, {\n            [styles.stickyFooter]: !disableStickyFooter,\n          })}\n        >\n          {footer}\n        </Box>\n      )}\n    </BaseModal>\n  );\n};\n","import { Column } from \"@stenajs-webui/core\";\nimport * as React from \"react\";\nimport { ReactNode } from \"react\";\n\nexport interface ModalFooterProps {\n  children?: ReactNode;\n}\n\nexport const ModalFooter: React.FC<ModalFooterProps> = ({ children }) => (\n  <Column indent={2} spacing={2}>\n    {children}\n  </Column>\n);\n"],"names":["styles"],"mappings":"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"}
+{"version":3,"file":"index.es.js","sources":["../src/components/modal/BaseModal.tsx","../src/components/drawer/Drawer.tsx","../src/components/center-modal/CenterModal.tsx","../src/components/loading-modal/LoadingModal.tsx","../src/components/modal/ModalHeader.tsx","../src/components/modal/Modal.tsx","../src/components/modal/ModalFooter.tsx"],"sourcesContent":["import * as React from \"react\";\nimport ReactModal from \"react-modal\";\nimport Draggable from \"react-draggable\";\nimport cx from \"classnames\";\nimport styles from \"./Modal.module.css\";\n\nexport interface BaseModalProps extends ReactModal.Props {\n  width?: string;\n  onRequestClose?: () => void;\n  draggable?: boolean;\n}\n\nexport const DRAGGABLE_HANDLE_CLASSNAME = \"draggable-modal-handle\";\nexport const DRAGGABLE_CANCEL_CLASSNAME = \"draggable-modal-cancel\";\n\nexport const BaseModal: React.FC<BaseModalProps> = ({\n  width,\n  draggable = false,\n  children,\n  ...reactModalProps\n}) => {\n  return (\n    <ReactModal\n      overlayClassName={styles.overlay}\n      className={styles.modal}\n      {...reactModalProps}\n    >\n      <Draggable\n        handle={`.${DRAGGABLE_HANDLE_CLASSNAME}`}\n        cancel={`.${DRAGGABLE_CANCEL_CLASSNAME}, button, [role=\"tooltip\"]`}\n        bounds=\".ReactModal__Overlay\"\n        disabled={!draggable}\n      >\n        <div\n          style={{ [\"--swui-modal-width\" as string]: width }}\n          className={cx(styles.content, {\n            [styles.isDraggable]: draggable,\n          })}\n        >\n          {children}\n        </div>\n      </Draggable>\n    </ReactModal>\n  );\n};\n","import * as React from \"react\";\nimport ReactModal from \"react-modal\";\nimport cx from \"classnames\";\nimport styles from \"./Drawer.module.css\";\nimport { exhaustSwitchCase, FlattenUnion } from \"@stenajs-webui/core\";\n\nexport type SlideFrom = SlideFromLeftRight | SlideFromTopBottom;\nexport type SlideFromLeftRight = \"left\" | \"right\";\nexport type SlideFromTopBottom = \"top\" | \"bottom\";\n\nexport type DrawerProps = DrawerBaseLeftRight | DrawerBaseTopBottom;\n\ninterface DrawerBaseLeftRight extends DrawerBaseProps {\n  width?: string;\n  /**\n   * Which direction the drawer will appear from.\n   * @default left\n   * @param {String('left'|'right')}\n   */\n  slideFrom?: SlideFromLeftRight;\n}\n\ninterface DrawerBaseTopBottom extends DrawerBaseProps {\n  height?: string;\n  /**\n   * Which direction the drawer will appear from.\n   * @default left\n   * @param {String('top'|'bottom')}\n   */\n  slideFrom?: SlideFromTopBottom;\n}\n\ninterface DrawerBaseProps\n  extends Omit<\n    ReactModal.Props,\n    | \"closeTimeoutMS\"\n    | \"portalClassName\"\n    | \"overlayClassName\"\n    | \"className\"\n    | \"style\"\n    | \"parentSelector\"\n  > {\n  background?: string;\n  zIndex?: number;\n  onRequestClose?: () => void;\n  /**\n   * Portal target, HTML element. If not set, portal is not used.\n   */\n  portalTarget?: HTMLElement | null;\n}\n\nexport const Drawer: React.FC<DrawerProps> = ({\n  background,\n  zIndex,\n  children,\n  slideFrom = \"left\",\n  portalTarget,\n  ...reactModalProps\n}) => {\n  const { height, width } = reactModalProps as FlattenUnion<DrawerProps>;\n\n  return (\n    <ReactModal\n      closeTimeoutMS={250}\n      portalClassName={styles.portal}\n      overlayClassName={{\n        base: styles.overlay,\n        afterOpen: styles.afterOpen,\n        beforeClose: styles.beforeClose,\n      }}\n      className={{\n        base: cx(styles.content, getClassNameForSlide(slideFrom)),\n        afterOpen: styles.afterOpen,\n        beforeClose: styles.beforeClose,\n      }}\n      style={{ content: { width, height, background }, overlay: { zIndex } }}\n      parentSelector={portalTarget ? () => portalTarget : undefined}\n      {...reactModalProps}\n    >\n      {children}\n    </ReactModal>\n  );\n};\n\nconst getClassNameForSlide = (slideFrom: SlideFrom): string => {\n  switch (slideFrom) {\n    case \"left\":\n      return styles.slideFromLeft;\n    case \"right\":\n      return styles.slideFromRight;\n    case \"top\":\n      return styles.slideFromTop;\n    case \"bottom\":\n      return styles.slideFromBottom;\n    default:\n      return exhaustSwitchCase(slideFrom, styles.slideFromLeft);\n  }\n};\n","import * as React from \"react\";\nimport ReactModal from \"react-modal\";\n\nimport styles from \"../modal/Modal.module.css\";\n\nexport interface CenterModalProps extends ReactModal.Props {\n  onRequestClose?: () => void;\n}\n\nconst style = { overlay: { justifyContent: \"center\" } };\n\nexport const CenterModal: React.FC<CenterModalProps> = ({\n  children,\n  ...reactModalProps\n}) => {\n  return (\n    <ReactModal\n      overlayClassName={styles.overlay}\n      className={styles.modal}\n      style={style}\n      {...reactModalProps}\n    >\n      <div\n        className={styles.content}\n        style={{ [\"--swui-modal-width\" as string]: \"fit-content\" }}\n      >\n        {children}\n      </div>\n    </ReactModal>\n  );\n};\n","import { IconDefinition } from \"@fortawesome/fontawesome-svg-core\";\nimport {\n  Box,\n  Column,\n  Heading,\n  Indent,\n  Row,\n  Spacing,\n} from \"@stenajs-webui/core\";\nimport { Icon, Spinner } from \"@stenajs-webui/elements\";\nimport * as React from \"react\";\nimport ReactModal from \"react-modal\";\nimport styles from \"./LoadingModal.module.css\";\n\nexport interface LoadingModalProps extends Omit<ReactModal.Props, \"isOpen\"> {\n  headerText?: string;\n  headerIconLeft?: IconDefinition;\n}\n\nexport const LoadingModal: React.FC<LoadingModalProps> = ({\n  headerIconLeft,\n  headerText,\n  ...modalProps\n}) => {\n  return (\n    <ReactModal\n      {...modalProps}\n      isOpen\n      className={styles.modal}\n      overlayClassName={styles.overlay}\n    >\n      <Column spacing={2} alignItems={\"center\"}>\n        <Box\n          alignItems={\"center\"}\n          justifyContent={\"center\"}\n          width={\"64px\"}\n          height={\"64px\"}\n          borderRadius={\"50%\"}\n          background={\"white\"}\n          shadow={\"modal\"}\n        >\n          <Spinner size={\"small\"} />\n        </Box>\n        {(headerIconLeft || headerText) && (\n          <>\n            <Spacing />\n            <Row indent={2}>\n              {headerIconLeft && (\n                <>\n                  <Icon size={14} icon={headerIconLeft} color={\"white\"} />\n                  <Indent />\n                </>\n              )}\n              {headerText && (\n                <Heading variant={\"h4\"} color={\"white\"}>\n                  {headerText}\n                </Heading>\n              )}\n            </Row>\n          </>\n        )}\n      </Column>\n    </ReactModal>\n  );\n};\n","import { FlatButton, stenaTimes } from \"@stenajs-webui/elements\";\nimport * as React from \"react\";\nimport { ReactNode } from \"react\";\nimport {\n  DRAGGABLE_CANCEL_CLASSNAME,\n  DRAGGABLE_HANDLE_CLASSNAME,\n} from \"./BaseModal\";\nimport { Box, Row, Txt } from \"@stenajs-webui/core\";\n\nexport interface ModalHeaderProps {\n  onRequestClose?: () => void;\n  header?: ReactNode;\n  headerText?: string;\n  closeButtonClassName?: string;\n}\n\nexport const ModalHeader: React.FC<ModalHeaderProps> = ({\n  onRequestClose,\n  header,\n  headerText,\n  closeButtonClassName,\n}) => {\n  return (\n    <Row\n      spacing={2}\n      indent={2}\n      borderBottom={\"1px solid var(--swui-modal-header-border-color)\"}\n      className={DRAGGABLE_HANDLE_CLASSNAME}\n    >\n      <Row flex={1} indent alignItems={\"center\"}>\n        {headerText && (\n          <Txt className={DRAGGABLE_CANCEL_CLASSNAME} size={\"large\"}>\n            {headerText}\n          </Txt>\n        )}\n        {header}\n      </Row>\n      <Box alignSelf={\"flex-start\"}>\n        <FlatButton\n          className={closeButtonClassName}\n          onClick={onRequestClose}\n          aria-label={\"Close\"}\n          leftIcon={stenaTimes}\n        />\n      </Box>\n    </Row>\n  );\n};\n","import { Box } from \"@stenajs-webui/core\";\nimport * as React from \"react\";\nimport { BaseModal, BaseModalProps } from \"./BaseModal\";\nimport { ModalHeader, ModalHeaderProps } from \"./ModalHeader\";\nimport cx from \"classnames\";\nimport styles from \"./Modal.module.css\";\n\nexport interface ModalProps extends BaseModalProps, ModalHeaderProps {\n  spacing?: number;\n  indent?: number;\n  draggable?: boolean;\n  footer?: React.ReactNode;\n  disableStickyFooter?: boolean;\n}\n\nexport const Modal: React.FC<ModalProps> = ({\n  header,\n  headerText,\n  children,\n  spacing,\n  indent,\n  draggable = false,\n  onRequestClose,\n  closeButtonClassName,\n  footer,\n  disableStickyFooter = false,\n  ...props\n}) => {\n  const activeSpacing = typeof spacing === \"number\" ? spacing : 1;\n  const activeIndent = typeof indent === \"number\" ? indent : 1;\n\n  return (\n    <BaseModal {...props} onRequestClose={onRequestClose} draggable={draggable}>\n      <ModalHeader\n        onRequestClose={onRequestClose}\n        header={header}\n        headerText={headerText}\n        closeButtonClassName={closeButtonClassName}\n      />\n      <Box spacing={activeSpacing} indent={activeIndent}>\n        {children}\n      </Box>\n      {footer && (\n        <Box\n          className={cx(styles.footer, {\n            [styles.stickyFooter]: !disableStickyFooter,\n          })}\n        >\n          {footer}\n        </Box>\n      )}\n    </BaseModal>\n  );\n};\n","import { Column } from \"@stenajs-webui/core\";\nimport * as React from \"react\";\nimport { ReactNode } from \"react\";\n\nexport interface ModalFooterProps {\n  children?: ReactNode;\n}\n\nexport const ModalFooter: React.FC<ModalFooterProps> = ({ children }) => (\n  <Column indent={2} spacing={2}>\n    {children}\n  </Column>\n);\n"],"names":["DRAGGABLE_HANDLE_CLASSNAME","DRAGGABLE_CANCEL_CLASSNAME","BaseModal","width","draggable","children","reactModalProps","styles","overlay","modal","cx","content","isDraggable","Drawer","background","zIndex","slideFrom","portalTarget","height","portal","base","afterOpen","beforeClose","getClassNameForSlide","undefined","slideFromLeft","slideFromRight","slideFromTop","slideFromBottom","exhaustSwitchCase","style","justifyContent","CenterModal","LoadingModal","headerIconLeft","headerText","modalProps","_jsx","_Fragment","_jsxs","ModalHeader","onRequestClose","header","closeButtonClassName","stenaTimes","Modal","spacing","indent","footer","disableStickyFooter","props","activeSpacing","activeIndent","stickyFooter","ModalFooter"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAYO,MAAMA,6BAA6B;AACnC,MAAMC,6BAA6B;AAEnC,MAAMC,YAAsC,CAAC;AAAA,EAClDC;AAAAA,EACAC,YAAY;AAAA,EACZC;AAAAA,KACGC;AAAAA,MACC;AACJ,6BACG,YAAD;AAAA,IACE,kBAAkBC,SAAOC;AAAAA,IACzB,WAAWD,SAAOE;AAAAA,IAFpB,GAGMH;AAAAA,IAHN,8BAKG,WAAD;AAAA,MACE,QAAS,IAAGN;AAAAA,MACZ,QAAS,IAAGC;AAAAA,MACZ,QAAO;AAAA,MACP,UAAU,CAACG;AAAAA,MAJb,8BAME,OAAA;AAAA,QACE,OAAO;AAAA,UAAE,CAAC,uBAAiCD;AAAAA,QAApC;AAAA,QACP,WAAWO,GAAGH,SAAOI,SAAS;AAAA,UAC5B,CAACJ,SAAOK,cAAcR;AAAAA,QAAAA,CADX;AAAA,QAFf;AAAA,MAAA,CAAA;AAAA,IAAA,CANF;AAAA,EAAA,CANJ;AAuBD;;;;;;;;;;;;;;;;;;;;;ACOM,MAAMS,SAAgC,CAAC;AAAA,EAC5CC;AAAAA,EACAC;AAAAA,EACAV;AAAAA,EACAW,YAAY;AAAA,EACZC;AAAAA,KACGX;AAAAA,MACC;AACE,QAAA;AAAA,IAAEY;AAAAA,IAAQf;AAAAA,MAAUG;AAE1B,6BACG,YAAD;AAAA,IACE,gBAAgB;AAAA,IAChB,iBAAiBC,SAAOY;AAAAA,IACxB,kBAAkB;AAAA,MAChBC,MAAMb,SAAOC;AAAAA,MACba,WAAWd,SAAOc;AAAAA,MAClBC,aAAaf,SAAOe;AAAAA,IAHJ;AAAA,IAKlB,WAAW;AAAA,MACTF,MAAMV,GAAGH,SAAOI,SAASY,qBAAqBP,SAAD,CAArC;AAAA,MACRK,WAAWd,SAAOc;AAAAA,MAClBC,aAAaf,SAAOe;AAAAA,IAHX;AAAA,IAKX,OAAO;AAAA,MAAEX,SAAS;AAAA,QAAER;AAAAA,QAAOe;AAAAA,QAAQJ;AAAAA,MAAjB;AAAA,MAA+BN,SAAS;AAAA,QAAEO;AAAAA,MAAF;AAAA,IAAnD;AAAA,IACP,gBAAgBE,eAAe,MAAMA,eAAeO;AAAAA,IAdtD,GAeMlB;AAAAA,IAfN;AAAA,EAAA,CADF;AAqBD;AAED,MAAMiB,uBAAuB,CAACP,cAAiC;AACrDA,UAAAA;AAAAA,SACD;AACH,aAAOT,SAAOkB;AAAAA,SACX;AACH,aAAOlB,SAAOmB;AAAAA,SACX;AACH,aAAOnB,SAAOoB;AAAAA,SACX;AACH,aAAOpB,SAAOqB;AAAAA;AAEPC,aAAAA,kBAAkBb,WAAWT,SAAOkB,aAAnB;AAAA;AAE7B;ACxFD,MAAMK,QAAQ;AAAA,EAAEtB,SAAS;AAAA,IAAEuB,gBAAgB;AAAA,EAAlB;AAAX;AAEP,MAAMC,cAA0C,CAAC;AAAA,EACtD3B;AAAAA,KACGC;AAAAA,MACC;AACJ,6BACG,YAAD;AAAA,IACE,kBAAkBC,SAAOC;AAAAA,IACzB,WAAWD,SAAOE;AAAAA,IAClB;AAAA,IAHF,GAIMH;AAAAA,IAJN,8BAME,OAAA;AAAA,MACE,WAAWC,SAAOI;AAAAA,MAClB,OAAO;AAAA,QAAE,CAAC,uBAAiC;AAAA,MAApC;AAAA,MAFT;AAAA,IAAA,CAAA;AAAA,EAAA,CAPJ;AAeD;;;;;;;ACXM,MAAMsB,eAA4C,CAAC;AAAA,EACxDC;AAAAA,EACAC;AAAAA,KACGC;AAAAA,MACC;AACJ,6BACG,YAAD;AAAA,IAAA,GACMA;AAAAA,IACJ,QAFF;AAAA,IAGE,WAAW7B,OAAOE;AAAAA,IAClB,kBAAkBF,OAAOC;AAAAA,IAJ3B,+BAMG,QAAD;AAAA,MAAQ,SAAS;AAAA,MAAG,YAAY;AAAA,MAAhC,UAAA,CACE6B,oBAAC,KAAD;AAAA,QACE,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,cAAc;AAAA,QACd,YAAY;AAAA,QACZ,QAAQ;AAAA,QAPV,8BASG,SAAD;AAAA,UAAS,MAAM;AAAA,QAAA,CAAf;AAAA,MATF,CAAA,GAWoBF,mBAAAA,oCAClBG,UAAA;AAAA,QAAA,UAAA,CACGD,oBAAA,SADH,CAAA,CAAA,wBAEG,KAAD;AAAA,UAAK,QAAQ;AAAA,UAAb,UAAA,CACGH,kBACCK,qBAAAD,UAAA;AAAA,YAAA,UAAA,CACED,oBAAC,MAAD;AAAA,cAAM,MAAM;AAAA,cAAI,MAAMH;AAAAA,cAAgB,OAAO;AAAA,YAD/C,CAAA,GAEEG,oBAAC,QAFH,CAAA,CAAA,CAAA;AAAA,UAAA,CAAA,GAKDF,cACCE,oBAAC,SAAD;AAAA,YAAS,SAAS;AAAA,YAAM,OAAO;AAAA,YAA/B,UACGF;AAAAA,UAAAA,CATP,CAAA;AAAA,QAAA,CAFF,CAAA;AAAA,MAAA,CAbJ,CAAA;AAAA,IAAA,CAAA;AAAA,EAAA,CAPJ;AAwCD;AChDM,MAAMK,cAA0C,CAAC;AAAA,EACtDC;AAAAA,EACAC;AAAAA,EACAP;AAAAA,EACAQ;AAAAA,MACI;AACJ,8BACG,KAAD;AAAA,IACE,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,WAAW3C;AAAAA,IAJb,UAAA,CAMEuC,qBAAC,KAAD;AAAA,MAAK,MAAM;AAAA,MAAG,QAAd;AAAA,MAAqB,YAAY;AAAA,MAAjC,UACGJ,CAAAA,cACCE,oBAAC,KAAD;AAAA,QAAK,WAAWpC;AAAAA,QAA4B,MAAM;AAAA,QAAlD,UACGkC;AAAAA,MADH,CAAA,GAIDO,MANH;AAAA,IAAA,CANF,GAcEL,oBAAC,KAAD;AAAA,MAAK,WAAW;AAAA,MAAhB,8BACG,YAAD;AAAA,QACE,WAAWM;AAAAA,QACX,SAASF;AAAAA,QACT,cAAY;AAAA,QACZ,UAAUG;AAAAA,MAAAA,CAJZ;AAAA,IAAA,CAfJ,CAAA;AAAA,EAAA,CADF;AAyBD;AChCM,MAAMC,QAA8B,CAAC;AAAA,EAC1CH;AAAAA,EACAP;AAAAA,EACA9B;AAAAA,EACAyC;AAAAA,EACAC;AAAAA,EACA3C,YAAY;AAAA,EACZqC;AAAAA,EACAE;AAAAA,EACAK;AAAAA,EACAC,sBAAsB;AAAA,KACnBC;AAAAA,MACC;AACJ,QAAMC,gBAAgB,OAAOL,YAAY,WAAWA,UAAU;AAC9D,QAAMM,eAAe,OAAOL,WAAW,WAAWA,SAAS;AAE3D,8BACG,WAAD;AAAA,IAAA,GAAeG;AAAAA,IAAO;AAAA,IAAgC;AAAA,IAAtD,UAAA,CACEb,oBAAC,aAAD;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,CALJ,GAOEA,oBAAC,KAAD;AAAA,MAAK,SAASc;AAAAA,MAAe,QAAQC;AAAAA,MAArC;AAAA,IAAA,CAAA,GAGCJ,WACCX,oBAAC,KAAD;AAAA,MACE,WAAW3B,GAAGH,SAAOyC,QAAQ;AAAA,QAC3B,CAACzC,SAAO8C,eAAe,CAACJ;AAAAA,MAAAA,CADb;AAAA,MADf,UAKGD;AAAAA,IAAAA,CAhBP,CAAA;AAAA,EAAA,CADF;AAsBD;AC7CM,MAAMM,cAA0C,CAAC;AAAA,EAAEjD;AAAAA,0BACvD,QAAD;AAAA,EAAQ,QAAQ;AAAA,EAAG,SAAS;AAAA,EAA5B;AAAA,CADK;;"}

package/dist/index.js

@@ -1,214 +1,2 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-var ReactModal = require('react-modal');
-var Draggable = require('react-draggable');
-var cx = require('classnames');
-var core = require('@stenajs-webui/core');
-var elements = require('@stenajs-webui/elements');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-function _interopNamespace(e) {
-    if (e && e.__esModule) return e;
-    var n = Object.create(null);
-    if (e) {
-        Object.keys(e).forEach(function (k) {
-            if (k !== 'default') {
-                var d = Object.getOwnPropertyDescriptor(e, k);
-                Object.defineProperty(n, k, d.get ? d : {
-                    enumerable: true,
-                    get: function () { return e[k]; }
-                });
-            }
-        });
-    }
-    n["default"] = e;
-    return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var ReactModal__default = /*#__PURE__*/_interopDefaultLegacy(ReactModal);
-var Draggable__default = /*#__PURE__*/_interopDefaultLegacy(Draggable);
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-var __assign = function() {
-    __assign = Object.assign || function __assign(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);
-};
-
-function __rest(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;
-}
-
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-var css_248z$2 = ".Modal-module_overlay__1c4LV {\n  --swui-modal-animation-time: var(--swui-animation-time-fast);\n  --swui-modal-overlay-bg-color: var(--swui-overlay-bg-color);\n  --swui-modal-padding: var(--swui-metrics-space);\n  --swui-modal-content-bg-color: var(--swui-white);\n  --swui-modal-width: 960px;\n  --swui-modal-header-border-color: var(--lhds-color-ui-300);\n  --swui-modal-shadow: var(--swui-shadow-modal);\n  --swui-modal-footer-shadow: var(--swui-shadow-modal);\n\n  position: fixed;\n  z-index: 10;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: var(--swui-modal-overlay-bg-color);\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: center;\n  padding: var(--swui-modal-padding);\n\n  -webkit-animation: Modal-module_fadeIn__2XO70 var(--swui-modal-animation-time)\n    cubic-bezier(0.645, 0.045, 0.355, 1) both;\n\n          animation: Modal-module_fadeIn__2XO70 var(--swui-modal-animation-time)\n    cubic-bezier(0.645, 0.045, 0.355, 1) both;\n}\n\n  @media print {.Modal-module_overlay__1c4LV {\n    background-color: rgba(255, 255, 255, 1)\n}\n  }\n\n  .Modal-module_overlay__1c4LV .Modal-module_modal__1XMQr {\n    max-width: 100%;\n    outline: none;\n    pointer-events: none;\n  }\n\n  .Modal-module_overlay__1c4LV .Modal-module_content__10pSm {\n    position: relative;\n    display: block;\n    background: var(--swui-modal-content-bg-color);\n    box-shadow: var(--swui-modal-shadow);\n    pointer-events: all;\n\n    width: var(--swui-modal-width);\n    max-width: 100%;\n\n    -webkit-animation: Modal-module_appear__36n8p var(--swui-animation-time-fast)\n      cubic-bezier(0.645, 0.045, 0.355, 1) both;\n\n            animation: Modal-module_appear__36n8p var(--swui-animation-time-fast)\n      cubic-bezier(0.645, 0.045, 0.355, 1) both;\n  }\n\n  @media print {\n\n  .Modal-module_overlay__1c4LV .Modal-module_content__10pSm {\n      box-shadow: none;\n      top: 0\n  }\n    }\n\n  .Modal-module_overlay__1c4LV .Modal-module_content__10pSm :focus {\n      outline: 0;\n    }\n\n  .Modal-module_overlay__1c4LV .Modal-module_content__10pSm.Modal-module_isDraggable__3l3pM .draggable-modal-handle {\n        cursor: move;\n      }\n\n  .Modal-module_overlay__1c4LV .Modal-module_content__10pSm.Modal-module_isDraggable__3l3pM .draggable-modal-handle .draggable-modal-cancel,\n        .Modal-module_overlay__1c4LV .Modal-module_content__10pSm.Modal-module_isDraggable__3l3pM .draggable-modal-handle [role=\"tooltip\"] {\n          cursor: initial;\n        }\n\n@-webkit-keyframes Modal-module_fadeIn__2XO70 {\n  0% {\n    background-color: var(--swui-hidden);\n  }\n  100% {\n    background-color: var(--swui-modal-overlay-bg-color);\n  }\n}\n\n@keyframes Modal-module_fadeIn__2XO70 {\n  0% {\n    background-color: var(--swui-hidden);\n  }\n  100% {\n    background-color: var(--swui-modal-overlay-bg-color);\n  }\n}\n\n@-webkit-keyframes Modal-module_appear__36n8p {\n  0% {\n    top: calc(0 - var(--swui-metrics-space));\n    opacity: 0;\n  }\n  100% {\n    top: var(--swui-metrics-space);\n    opacity: 1;\n  }\n}\n\n@keyframes Modal-module_appear__36n8p {\n  0% {\n    top: calc(0 - var(--swui-metrics-space));\n    opacity: 0;\n  }\n  100% {\n    top: var(--swui-metrics-space);\n    opacity: 1;\n  }\n}\n\n.Modal-module_footer__2FN1E {\n  background-color: var(--swui-modal-content-bg-color);\n}\n\n.Modal-module_stickyFooter__9tQSR {\n  position: -webkit-sticky;\n  position: sticky;\n  bottom: calc(-1 * var(--swui-modal-padding));\n  box-shadow: var(--swui-modal-footer-shadow);\n}\n\n@media print {\n\n.Modal-module_stickyFooter__9tQSR {\n    position: static;\n    box-shadow: none\n}\n  }\n";
-var styles$2 = {"overlay":"Modal-module_overlay__1c4LV","fadeIn":"Modal-module_fadeIn__2XO70","modal":"Modal-module_modal__1XMQr","content":"Modal-module_content__10pSm","appear":"Modal-module_appear__36n8p","isDraggable":"Modal-module_isDraggable__3l3pM","footer":"Modal-module_footer__2FN1E","stickyFooter":"Modal-module_stickyFooter__9tQSR"};
-styleInject(css_248z$2);
-
-var DRAGGABLE_HANDLE_CLASSNAME = "draggable-modal-handle";
-var DRAGGABLE_CANCEL_CLASSNAME = "draggable-modal-cancel";
-var BaseModal = function (_a) {
-    var _b, _c;
-    var width = _a.width, _d = _a.draggable, draggable = _d === void 0 ? false : _d, children = _a.children, reactModalProps = __rest(_a, ["width", "draggable", "children"]);
-    return (React__namespace.createElement(ReactModal__default["default"], __assign({ overlayClassName: styles$2.overlay, className: styles$2.modal }, reactModalProps),
-        React__namespace.createElement(Draggable__default["default"], { handle: ".".concat(DRAGGABLE_HANDLE_CLASSNAME), cancel: ".".concat(DRAGGABLE_CANCEL_CLASSNAME, ", button, [role=\"tooltip\"]"), bounds: ".ReactModal__Overlay", disabled: !draggable },
-            React__namespace.createElement("div", { style: (_b = {}, _b["--swui-modal-width"] = width, _b), className: cx__default["default"](styles$2.content, (_c = {},
-                    _c[styles$2.isDraggable] = draggable,
-                    _c)) }, children))));
-};
-
-var css_248z$1 = ".Drawer-module_portal__3qRVU .Drawer-module_overlay__1eTzQ {\n    position: fixed;\n    inset: 0;\n  }\n  .Drawer-module_portal__3qRVU .Drawer-module_content__2humM {\n    box-shadow: var(--swui-shadow-modal);\n    background: white;\n    position: absolute;\n    transition: -webkit-transform var(--swui-animation-time-medium) ease-in-out;\n    transition: transform var(--swui-animation-time-medium) ease-in-out;\n    transition: transform var(--swui-animation-time-medium) ease-in-out, -webkit-transform var(--swui-animation-time-medium) ease-in-out;\n  }\n  .Drawer-module_portal__3qRVU .Drawer-module_content__2humM.Drawer-module_slideFromLeft__3w1LJ,\n    .Drawer-module_portal__3qRVU .Drawer-module_content__2humM.Drawer-module_slideFromRight__V_rl4 {\n      -webkit-transform: translateX(var(--translate-x-outside-screen, 0));\n              transform: translateX(var(--translate-x-outside-screen, 0));\n      overflow-y: auto;\n      top: 0;\n      bottom: 0;\n    }\n  .Drawer-module_portal__3qRVU .Drawer-module_content__2humM.Drawer-module_slideFromLeft__3w1LJ.Drawer-module_afterOpen__2zpe_, .Drawer-module_portal__3qRVU .Drawer-module_content__2humM.Drawer-module_slideFromRight__V_rl4.Drawer-module_afterOpen__2zpe_ {\n        -webkit-transform: translateX(0);\n                transform: translateX(0);\n      }\n  .Drawer-module_portal__3qRVU .Drawer-module_content__2humM.Drawer-module_slideFromLeft__3w1LJ.Drawer-module_beforeClose__1ub2d, .Drawer-module_portal__3qRVU .Drawer-module_content__2humM.Drawer-module_slideFromRight__V_rl4.Drawer-module_beforeClose__1ub2d {\n        -webkit-transform: translateX(var(--translate-x-outside-screen));\n                transform: translateX(var(--translate-x-outside-screen));\n      }\n  .Drawer-module_portal__3qRVU .Drawer-module_content__2humM.Drawer-module_slideFromTop__2mdnr,\n    .Drawer-module_portal__3qRVU .Drawer-module_content__2humM.Drawer-module_slideFromBottom__1ryrr {\n      -webkit-transform: translateY(var(--translate-y-outside-screen, 0));\n              transform: translateY(var(--translate-y-outside-screen, 0));\n      overflow-x: auto;\n      left: 0;\n      right: 0;\n    }\n  .Drawer-module_portal__3qRVU .Drawer-module_content__2humM.Drawer-module_slideFromTop__2mdnr.Drawer-module_afterOpen__2zpe_, .Drawer-module_portal__3qRVU .Drawer-module_content__2humM.Drawer-module_slideFromBottom__1ryrr.Drawer-module_afterOpen__2zpe_ {\n        -webkit-transform: translateY(0);\n                transform: translateY(0);\n      }\n  .Drawer-module_portal__3qRVU .Drawer-module_content__2humM.Drawer-module_slideFromTop__2mdnr.Drawer-module_beforeClose__1ub2d, .Drawer-module_portal__3qRVU .Drawer-module_content__2humM.Drawer-module_slideFromBottom__1ryrr.Drawer-module_beforeClose__1ub2d {\n        -webkit-transform: translateY(var(--translate-y-outside-screen));\n                transform: translateY(var(--translate-y-outside-screen));\n      }\n  .Drawer-module_portal__3qRVU .Drawer-module_content__2humM.Drawer-module_slideFromLeft__3w1LJ {\n      --translate-x-outside-screen: -100%;\n      width: 370px;\n      left: 0;\n    }\n  .Drawer-module_portal__3qRVU .Drawer-module_content__2humM.Drawer-module_slideFromRight__V_rl4 {\n      --translate-x-outside-screen: 100%;\n      width: 370px;\n      right: 0;\n    }\n  .Drawer-module_portal__3qRVU .Drawer-module_content__2humM.Drawer-module_slideFromTop__2mdnr {\n      --translate-y-outside-screen: -100%;\n      height: 370px;\n      top: 0;\n    }\n  .Drawer-module_portal__3qRVU .Drawer-module_content__2humM.Drawer-module_slideFromBottom__1ryrr {\n      --translate-y-outside-screen: 100%;\n      height: 370px;\n      bottom: 0;\n    }\n";
-var styles$1 = {"portal":"Drawer-module_portal__3qRVU","overlay":"Drawer-module_overlay__1eTzQ","content":"Drawer-module_content__2humM","slideFromLeft":"Drawer-module_slideFromLeft__3w1LJ","slideFromRight":"Drawer-module_slideFromRight__V_rl4","afterOpen":"Drawer-module_afterOpen__2zpe_","beforeClose":"Drawer-module_beforeClose__1ub2d","slideFromTop":"Drawer-module_slideFromTop__2mdnr","slideFromBottom":"Drawer-module_slideFromBottom__1ryrr"};
-styleInject(css_248z$1);
-
-var Drawer = function (_a) {
-    var background = _a.background, zIndex = _a.zIndex, children = _a.children, _b = _a.slideFrom, slideFrom = _b === void 0 ? "left" : _b, portalTarget = _a.portalTarget, reactModalProps = __rest(_a, ["background", "zIndex", "children", "slideFrom", "portalTarget"]);
-    var _c = reactModalProps, height = _c.height, width = _c.width;
-    return (React__namespace.createElement(ReactModal__default["default"], __assign({ closeTimeoutMS: 250, portalClassName: styles$1.portal, overlayClassName: {
-            base: styles$1.overlay,
-            afterOpen: styles$1.afterOpen,
-            beforeClose: styles$1.beforeClose,
-        }, className: {
-            base: cx__default["default"](styles$1.content, getClassNameForSlide(slideFrom)),
-            afterOpen: styles$1.afterOpen,
-            beforeClose: styles$1.beforeClose,
-        }, style: { content: { width: width, height: height, background: background }, overlay: { zIndex: zIndex } }, parentSelector: portalTarget ? function () { return portalTarget; } : undefined }, reactModalProps), children));
-};
-var getClassNameForSlide = function (slideFrom) {
-    switch (slideFrom) {
-        case "left":
-            return styles$1.slideFromLeft;
-        case "right":
-            return styles$1.slideFromRight;
-        case "top":
-            return styles$1.slideFromTop;
-        case "bottom":
-            return styles$1.slideFromBottom;
-        default:
-            return core.exhaustSwitchCase(slideFrom, styles$1.slideFromLeft);
-    }
-};
-
-var style = { overlay: { justifyContent: "center" } };
-var CenterModal = function (_a) {
-    var _b;
-    var children = _a.children, reactModalProps = __rest(_a, ["children"]);
-    return (React__namespace.createElement(ReactModal__default["default"], __assign({ overlayClassName: styles$2.overlay, className: styles$2.modal, style: style }, reactModalProps),
-        React__namespace.createElement("div", { className: styles$2.content, style: (_b = {}, _b["--swui-modal-width"] = "fit-content", _b) }, children)));
-};
-
-var css_248z = ".LoadingModal-module_modal__1gDTX {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: transparent;\n}\n\n.LoadingModal-module_overlay__2YRgt {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: var(--swui-overlay-bg-color);\n}\n";
-var styles = {"modal":"LoadingModal-module_modal__1gDTX","overlay":"LoadingModal-module_overlay__2YRgt"};
-styleInject(css_248z);
-
-var LoadingModal = function (_a) {
-    var headerIconLeft = _a.headerIconLeft, headerText = _a.headerText, modalProps = __rest(_a, ["headerIconLeft", "headerText"]);
-    return (React__namespace.createElement(ReactModal__default["default"], __assign({}, modalProps, { isOpen: true, className: styles.modal, overlayClassName: styles.overlay }),
-        React__namespace.createElement(core.Column, { spacing: 2, alignItems: "center" },
-            React__namespace.createElement(core.Box, { alignItems: "center", justifyContent: "center", width: "64px", height: "64px", borderRadius: "50%", background: "white", shadow: "modal" },
-                React__namespace.createElement(elements.Spinner, { size: "small" })),
-            (headerIconLeft || headerText) && (React__namespace.createElement(React__namespace.Fragment, null,
-                React__namespace.createElement(core.Spacing, null),
-                React__namespace.createElement(core.Row, { indent: 2 },
-                    headerIconLeft && (React__namespace.createElement(React__namespace.Fragment, null,
-                        React__namespace.createElement(elements.Icon, { size: 14, icon: headerIconLeft, color: "white" }),
-                        React__namespace.createElement(core.Indent, null))),
-                    headerText && (React__namespace.createElement(core.Heading, { variant: "h4", color: "white" }, headerText))))))));
-};
-
-var ModalHeader = function (_a) {
-    var onRequestClose = _a.onRequestClose, header = _a.header, headerText = _a.headerText, closeButtonClassName = _a.closeButtonClassName;
-    return (React__namespace.createElement(core.Row, { spacing: 2, indent: 2, borderBottom: "1px solid var(--swui-modal-header-border-color)", className: DRAGGABLE_HANDLE_CLASSNAME },
-        React__namespace.createElement(core.Row, { flex: 1, indent: true, alignItems: "center" },
-            headerText && (React__namespace.createElement(core.Txt, { className: DRAGGABLE_CANCEL_CLASSNAME, size: "large" }, headerText)),
-            header),
-        React__namespace.createElement(core.Box, { alignSelf: "flex-start" },
-            React__namespace.createElement(elements.FlatButton, { className: closeButtonClassName, onClick: onRequestClose, "aria-label": "Close", leftIcon: elements.stenaTimes }))));
-};
-
-var Modal = function (_a) {
-    var _b;
-    var header = _a.header, headerText = _a.headerText, children = _a.children, spacing = _a.spacing, indent = _a.indent, _c = _a.draggable, draggable = _c === void 0 ? false : _c, onRequestClose = _a.onRequestClose, closeButtonClassName = _a.closeButtonClassName, footer = _a.footer, _d = _a.disableStickyFooter, disableStickyFooter = _d === void 0 ? false : _d, props = __rest(_a, ["header", "headerText", "children", "spacing", "indent", "draggable", "onRequestClose", "closeButtonClassName", "footer", "disableStickyFooter"]);
-    var activeSpacing = typeof spacing === "number" ? spacing : 1;
-    var activeIndent = typeof indent === "number" ? indent : 1;
-    return (React__namespace.createElement(BaseModal, __assign({}, props, { onRequestClose: onRequestClose, draggable: draggable }),
-        React__namespace.createElement(ModalHeader, { onRequestClose: onRequestClose, header: header, headerText: headerText, closeButtonClassName: closeButtonClassName }),
-        React__namespace.createElement(core.Box, { spacing: activeSpacing, indent: activeIndent }, children),
-        footer && (React__namespace.createElement(core.Box, { className: cx__default["default"](styles$2.footer, (_b = {},
-                _b[styles$2.stickyFooter] = !disableStickyFooter,
-                _b)) }, footer))));
-};
-
-var ModalFooter = function (_a) {
-    var children = _a.children;
-    return (React__namespace.createElement(core.Column, { indent: 2, spacing: 2 }, children));
-};
-
-exports.BaseModal = BaseModal;
-exports.CenterModal = CenterModal;
-exports.DRAGGABLE_CANCEL_CLASSNAME = DRAGGABLE_CANCEL_CLASSNAME;
-exports.DRAGGABLE_HANDLE_CLASSNAME = DRAGGABLE_HANDLE_CLASSNAME;
-exports.Drawer = Drawer;
-exports.LoadingModal = LoadingModal;
-exports.Modal = Modal;
-exports.ModalFooter = ModalFooter;
-exports.ModalHeader = ModalHeader;
+(function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode("._overlay_11kta_1{--swui-modal-animation-time: var(--swui-animation-time-fast);--swui-modal-overlay-bg-color: var(--swui-overlay-bg-color);--swui-modal-padding: var(--swui-metrics-space);--swui-modal-content-bg-color: var(--swui-white);--swui-modal-width: 960px;--swui-modal-header-border-color: var(--lhds-color-ui-300);--swui-modal-shadow: var(--swui-shadow-modal);--swui-modal-footer-shadow: var(--swui-shadow-modal);position:fixed;z-index:10;top:0;left:0;right:0;bottom:0;background-color:var(--swui-modal-overlay-bg-color);overflow:auto;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;padding:var(--swui-modal-padding);-webkit-animation:_fadeIn_11kta_1 var(--swui-modal-animation-time) cubic-bezier(.645,.045,.355,1) both;animation:_fadeIn_11kta_1 var(--swui-modal-animation-time) cubic-bezier(.645,.045,.355,1) both}@media print{._overlay_11kta_1{background-color:#fff}}._overlay_11kta_1 ._modal_11kta_32{max-width:100%;outline:none;pointer-events:none}._overlay_11kta_1 ._content_11kta_38{position:relative;display:block;background:var(--swui-modal-content-bg-color);box-shadow:var(--swui-modal-shadow);pointer-events:all;width:var(--swui-modal-width);max-width:100%;-webkit-animation:_appear_11kta_1 var(--swui-animation-time-fast) cubic-bezier(.645,.045,.355,1) both;animation:_appear_11kta_1 var(--swui-animation-time-fast) cubic-bezier(.645,.045,.355,1) both}@media print{._overlay_11kta_1 ._content_11kta_38{box-shadow:none;top:0}}._overlay_11kta_1 ._content_11kta_38 :focus{outline:0}._overlay_11kta_1 ._content_11kta_38._isDraggable_11kta_60 .draggable-modal-handle{cursor:move}._overlay_11kta_1 ._content_11kta_38._isDraggable_11kta_60 .draggable-modal-handle .draggable-modal-cancel,._overlay_11kta_1 ._content_11kta_38._isDraggable_11kta_60 .draggable-modal-handle [role=tooltip]{cursor:initial}@-webkit-keyframes _fadeIn_11kta_1{0%{background-color:var(--swui-hidden)}to{background-color:var(--swui-modal-overlay-bg-color)}}@keyframes _fadeIn_11kta_1{0%{background-color:var(--swui-hidden)}to{background-color:var(--swui-modal-overlay-bg-color)}}@-webkit-keyframes _appear_11kta_1{0%{top:calc(0 - var(--swui-metrics-space));opacity:0}to{top:var(--swui-metrics-space);opacity:1}}@keyframes _appear_11kta_1{0%{top:calc(0 - var(--swui-metrics-space));opacity:0}to{top:var(--swui-metrics-space);opacity:1}}._footer_11kta_93{background-color:var(--swui-modal-content-bg-color)}._stickyFooter_11kta_97{position:-webkit-sticky;position:sticky;bottom:calc(-1 * var(--swui-modal-padding));box-shadow:var(--swui-modal-footer-shadow)}@media print{._stickyFooter_11kta_97{position:static;box-shadow:none}}._portal_17quq_1 ._overlay_17quq_2{position:fixed;inset:0}._portal_17quq_1 ._content_17quq_7{box-shadow:var(--swui-shadow-modal);background:white;position:absolute;transition:-webkit-transform var(--swui-animation-time-medium) ease-in-out;transition:transform var(--swui-animation-time-medium) ease-in-out;transition:transform var(--swui-animation-time-medium) ease-in-out,-webkit-transform var(--swui-animation-time-medium) ease-in-out}._portal_17quq_1 ._content_17quq_7._slideFromLeft_17quq_13,._portal_17quq_1 ._content_17quq_7._slideFromRight_17quq_14{-webkit-transform:translateX(var(--translate-x-outside-screen, 0));transform:translate(var(--translate-x-outside-screen, 0));overflow-y:auto;top:0;bottom:0}._portal_17quq_1 ._content_17quq_7._slideFromLeft_17quq_13._afterOpen_17quq_20,._portal_17quq_1 ._content_17quq_7._slideFromRight_17quq_14._afterOpen_17quq_20{-webkit-transform:translateX(0);transform:translate(0)}._portal_17quq_1 ._content_17quq_7._slideFromLeft_17quq_13._beforeClose_17quq_24,._portal_17quq_1 ._content_17quq_7._slideFromRight_17quq_14._beforeClose_17quq_24{-webkit-transform:translateX(var(--translate-x-outside-screen));transform:translate(var(--translate-x-outside-screen))}._portal_17quq_1 ._content_17quq_7._slideFromTop_17quq_29,._portal_17quq_1 ._content_17quq_7._slideFromBottom_17quq_30{-webkit-transform:translateY(var(--translate-y-outside-screen, 0));transform:translateY(var(--translate-y-outside-screen, 0));overflow-x:auto;left:0;right:0}._portal_17quq_1 ._content_17quq_7._slideFromTop_17quq_29._afterOpen_17quq_20,._portal_17quq_1 ._content_17quq_7._slideFromBottom_17quq_30._afterOpen_17quq_20{-webkit-transform:translateY(0);transform:translateY(0)}._portal_17quq_1 ._content_17quq_7._slideFromTop_17quq_29._beforeClose_17quq_24,._portal_17quq_1 ._content_17quq_7._slideFromBottom_17quq_30._beforeClose_17quq_24{-webkit-transform:translateY(var(--translate-y-outside-screen));transform:translateY(var(--translate-y-outside-screen))}._portal_17quq_1 ._content_17quq_7._slideFromLeft_17quq_13{--translate-x-outside-screen: -100%;width:370px;left:0}._portal_17quq_1 ._content_17quq_7._slideFromRight_17quq_14{--translate-x-outside-screen: 100%;width:370px;right:0}._portal_17quq_1 ._content_17quq_7._slideFromTop_17quq_29{--translate-y-outside-screen: -100%;height:370px;top:0}._portal_17quq_1 ._content_17quq_7._slideFromBottom_17quq_30{--translate-y-outside-screen: 100%;height:370px;bottom:0}._modal_4fwgb_1{display:flex;justify-content:center;align-items:center;position:fixed;top:0;left:0;right:0;bottom:0;background-color:transparent}._overlay_4fwgb_13{position:fixed;top:0;left:0;right:0;bottom:0;background-color:var(--swui-overlay-bg-color)}")); document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var q=require("react-modal"),w=require("react-draggable"),M=require("classnames"),e=require("react/jsx-runtime"),o=require("@stenajs-webui/core"),_=require("@stenajs-webui/elements");function f(t){return t&&typeof t=="object"&&"default"in t?t:{default:t}}var m=f(q),A=f(w),g=f(M);const L="_overlay_11kta_1",S="_fadeIn_11kta_1",B="_modal_11kta_32",D="_content_11kta_38",R="_appear_11kta_1",k="_isDraggable_11kta_60",E="_footer_11kta_93",O="_stickyFooter_11kta_97";var r={overlay:L,fadeIn:S,modal:B,content:D,appear:R,isDraggable:k,footer:E,stickyFooter:O};const v="draggable-modal-handle",x="draggable-modal-cancel",b=({width:t,draggable:a=!1,children:l,...n})=>e.jsx(m.default,{overlayClassName:r.overlay,className:r.modal,...n,children:e.jsx(A.default,{handle:`.${v}`,cancel:`.${x}, button, [role="tooltip"]`,bounds:".ReactModal__Overlay",disabled:!a,children:e.jsx("div",{style:{["--swui-modal-width"]:t},className:g.default(r.content,{[r.isDraggable]:a}),children:l})})}),G="_portal_17quq_1",I="_overlay_17quq_2",$="_content_17quq_7",H="_slideFromLeft_17quq_13",T="_slideFromRight_17quq_14",z="_afterOpen_17quq_20",J="_beforeClose_17quq_24",K="_slideFromTop_17quq_29",P="_slideFromBottom_17quq_30";var s={portal:G,overlay:I,content:$,slideFromLeft:H,slideFromRight:T,afterOpen:z,beforeClose:J,slideFromTop:K,slideFromBottom:P};const Q=({background:t,zIndex:a,children:l,slideFrom:n="left",portalTarget:c,...i})=>{const{height:d,width:u}=i;return e.jsx(m.default,{closeTimeoutMS:250,portalClassName:s.portal,overlayClassName:{base:s.overlay,afterOpen:s.afterOpen,beforeClose:s.beforeClose},className:{base:g.default(s.content,U(n)),afterOpen:s.afterOpen,beforeClose:s.beforeClose},style:{content:{width:u,height:d,background:t},overlay:{zIndex:a}},parentSelector:c?()=>c:void 0,...i,children:l})},U=t=>{switch(t){case"left":return s.slideFromLeft;case"right":return s.slideFromRight;case"top":return s.slideFromTop;case"bottom":return s.slideFromBottom;default:return o.exhaustSwitchCase(t,s.slideFromLeft)}},V={overlay:{justifyContent:"center"}},W=({children:t,...a})=>e.jsx(m.default,{overlayClassName:r.overlay,className:r.modal,style:V,...a,children:e.jsx("div",{className:r.content,style:{["--swui-modal-width"]:"fit-content"},children:t})}),X="_modal_4fwgb_1",Y="_overlay_4fwgb_13";var y={modal:X,overlay:Y};const Z=({headerIconLeft:t,headerText:a,...l})=>e.jsx(m.default,{...l,isOpen:!0,className:y.modal,overlayClassName:y.overlay,children:e.jsxs(o.Column,{spacing:2,alignItems:"center",children:[e.jsx(o.Box,{alignItems:"center",justifyContent:"center",width:"64px",height:"64px",borderRadius:"50%",background:"white",shadow:"modal",children:e.jsx(_.Spinner,{size:"small"})}),(t||a)&&e.jsxs(e.Fragment,{children:[e.jsx(o.Spacing,{}),e.jsxs(o.Row,{indent:2,children:[t&&e.jsxs(e.Fragment,{children:[e.jsx(_.Icon,{size:14,icon:t,color:"white"}),e.jsx(o.Indent,{})]}),a&&e.jsx(o.Heading,{variant:"h4",color:"white",children:a})]})]})]})}),h=({onRequestClose:t,header:a,headerText:l,closeButtonClassName:n})=>e.jsxs(o.Row,{spacing:2,indent:2,borderBottom:"1px solid var(--swui-modal-header-border-color)",className:v,children:[e.jsxs(o.Row,{flex:1,indent:!0,alignItems:"center",children:[l&&e.jsx(o.Txt,{className:x,size:"large",children:l}),a]}),e.jsx(o.Box,{alignSelf:"flex-start",children:e.jsx(_.FlatButton,{className:n,onClick:t,"aria-label":"Close",leftIcon:_.stenaTimes})})]}),ee=({header:t,headerText:a,children:l,spacing:n,indent:c,draggable:i=!1,onRequestClose:d,closeButtonClassName:u,footer:p,disableStickyFooter:j=!1,...C})=>{const F=typeof n=="number"?n:1,N=typeof c=="number"?c:1;return e.jsxs(b,{...C,onRequestClose:d,draggable:i,children:[e.jsx(h,{onRequestClose:d,header:t,headerText:a,closeButtonClassName:u}),e.jsx(o.Box,{spacing:F,indent:N,children:l}),p&&e.jsx(o.Box,{className:g.default(r.footer,{[r.stickyFooter]:!j}),children:p})]})},te=({children:t})=>e.jsx(o.Column,{indent:2,spacing:2,children:t});exports.BaseModal=b;exports.CenterModal=W;exports.DRAGGABLE_CANCEL_CLASSNAME=x;exports.DRAGGABLE_HANDLE_CLASSNAME=v;exports.Drawer=Q;exports.LoadingModal=Z;exports.Modal=ee;exports.ModalFooter=te;exports.ModalHeader=h;
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../node_modules/style-inject/dist/style-inject.es.js","../src/components/modal/BaseModal.tsx","../src/components/drawer/Drawer.tsx","../src/components/center-modal/CenterModal.tsx","../src/components/loading-modal/LoadingModal.tsx","../src/components/modal/ModalHeader.tsx","../src/components/modal/Modal.tsx","../src/components/modal/ModalFooter.tsx"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n","import * as React from \"react\";\nimport ReactModal from \"react-modal\";\nimport Draggable from \"react-draggable\";\nimport cx from \"classnames\";\nimport styles from \"./Modal.module.css\";\n\nexport interface BaseModalProps extends ReactModal.Props {\n  width?: string;\n  onRequestClose?: () => void;\n  draggable?: boolean;\n}\n\nexport const DRAGGABLE_HANDLE_CLASSNAME = \"draggable-modal-handle\";\nexport const DRAGGABLE_CANCEL_CLASSNAME = \"draggable-modal-cancel\";\n\nexport const BaseModal: React.FC<BaseModalProps> = ({\n  width,\n  draggable = false,\n  children,\n  ...reactModalProps\n}) => {\n  return (\n    <ReactModal\n      overlayClassName={styles.overlay}\n      className={styles.modal}\n      {...reactModalProps}\n    >\n      <Draggable\n        handle={`.${DRAGGABLE_HANDLE_CLASSNAME}`}\n        cancel={`.${DRAGGABLE_CANCEL_CLASSNAME}, button, [role=\"tooltip\"]`}\n        bounds=\".ReactModal__Overlay\"\n        disabled={!draggable}\n      >\n        <div\n          style={{ [\"--swui-modal-width\" as string]: width }}\n          className={cx(styles.content, {\n            [styles.isDraggable]: draggable,\n          })}\n        >\n          {children}\n        </div>\n      </Draggable>\n    </ReactModal>\n  );\n};\n","import * as React from \"react\";\nimport ReactModal from \"react-modal\";\nimport cx from \"classnames\";\nimport styles from \"./Drawer.module.css\";\nimport { exhaustSwitchCase, FlattenUnion } from \"@stenajs-webui/core\";\n\nexport type SlideFrom = SlideFromLeftRight | SlideFromTopBottom;\nexport type SlideFromLeftRight = \"left\" | \"right\";\nexport type SlideFromTopBottom = \"top\" | \"bottom\";\n\nexport type DrawerProps = DrawerBaseLeftRight | DrawerBaseTopBottom;\n\ninterface DrawerBaseLeftRight extends DrawerBaseProps {\n  width?: string;\n  /**\n   * Which direction the drawer will appear from.\n   * @default left\n   * @param {String('left'|'right')}\n   */\n  slideFrom?: SlideFromLeftRight;\n}\n\ninterface DrawerBaseTopBottom extends DrawerBaseProps {\n  height?: string;\n  /**\n   * Which direction the drawer will appear from.\n   * @default left\n   * @param {String('top'|'bottom')}\n   */\n  slideFrom?: SlideFromTopBottom;\n}\n\ninterface DrawerBaseProps\n  extends Omit<\n    ReactModal.Props,\n    | \"closeTimeoutMS\"\n    | \"portalClassName\"\n    | \"overlayClassName\"\n    | \"className\"\n    | \"style\"\n    | \"parentSelector\"\n  > {\n  background?: string;\n  zIndex?: number;\n  onRequestClose?: () => void;\n  /**\n   * Portal target, HTML element. If not set, portal is not used.\n   */\n  portalTarget?: HTMLElement | null;\n}\n\nexport const Drawer: React.FC<DrawerProps> = ({\n  background,\n  zIndex,\n  children,\n  slideFrom = \"left\",\n  portalTarget,\n  ...reactModalProps\n}) => {\n  const { height, width } = reactModalProps as FlattenUnion<DrawerProps>;\n\n  return (\n    <ReactModal\n      closeTimeoutMS={250}\n      portalClassName={styles.portal}\n      overlayClassName={{\n        base: styles.overlay,\n        afterOpen: styles.afterOpen,\n        beforeClose: styles.beforeClose,\n      }}\n      className={{\n        base: cx(styles.content, getClassNameForSlide(slideFrom)),\n        afterOpen: styles.afterOpen,\n        beforeClose: styles.beforeClose,\n      }}\n      style={{ content: { width, height, background }, overlay: { zIndex } }}\n      parentSelector={portalTarget ? () => portalTarget : undefined}\n      {...reactModalProps}\n    >\n      {children}\n    </ReactModal>\n  );\n};\n\nconst getClassNameForSlide = (slideFrom: SlideFrom): string => {\n  switch (slideFrom) {\n    case \"left\":\n      return styles.slideFromLeft;\n    case \"right\":\n      return styles.slideFromRight;\n    case \"top\":\n      return styles.slideFromTop;\n    case \"bottom\":\n      return styles.slideFromBottom;\n    default:\n      return exhaustSwitchCase(slideFrom, styles.slideFromLeft);\n  }\n};\n","import * as React from \"react\";\nimport ReactModal from \"react-modal\";\n\nimport styles from \"../modal/Modal.module.css\";\n\nexport interface CenterModalProps extends ReactModal.Props {\n  onRequestClose?: () => void;\n}\n\nconst style = { overlay: { justifyContent: \"center\" } };\n\nexport const CenterModal: React.FC<CenterModalProps> = ({\n  children,\n  ...reactModalProps\n}) => {\n  return (\n    <ReactModal\n      overlayClassName={styles.overlay}\n      className={styles.modal}\n      style={style}\n      {...reactModalProps}\n    >\n      <div\n        className={styles.content}\n        style={{ [\"--swui-modal-width\" as string]: \"fit-content\" }}\n      >\n        {children}\n      </div>\n    </ReactModal>\n  );\n};\n","import { IconDefinition } from \"@fortawesome/fontawesome-svg-core\";\nimport {\n  Box,\n  Column,\n  Heading,\n  Indent,\n  Row,\n  Spacing,\n} from \"@stenajs-webui/core\";\nimport { Icon, Spinner } from \"@stenajs-webui/elements\";\nimport * as React from \"react\";\nimport ReactModal from \"react-modal\";\nimport styles from \"./LoadingModal.module.css\";\n\nexport interface LoadingModalProps extends Omit<ReactModal.Props, \"isOpen\"> {\n  headerText?: string;\n  headerIconLeft?: IconDefinition;\n}\n\nexport const LoadingModal: React.FC<LoadingModalProps> = ({\n  headerIconLeft,\n  headerText,\n  ...modalProps\n}) => {\n  return (\n    <ReactModal\n      {...modalProps}\n      isOpen\n      className={styles.modal}\n      overlayClassName={styles.overlay}\n    >\n      <Column spacing={2} alignItems={\"center\"}>\n        <Box\n          alignItems={\"center\"}\n          justifyContent={\"center\"}\n          width={\"64px\"}\n          height={\"64px\"}\n          borderRadius={\"50%\"}\n          background={\"white\"}\n          shadow={\"modal\"}\n        >\n          <Spinner size={\"small\"} />\n        </Box>\n        {(headerIconLeft || headerText) && (\n          <>\n            <Spacing />\n            <Row indent={2}>\n              {headerIconLeft && (\n                <>\n                  <Icon size={14} icon={headerIconLeft} color={\"white\"} />\n                  <Indent />\n                </>\n              )}\n              {headerText && (\n                <Heading variant={\"h4\"} color={\"white\"}>\n                  {headerText}\n                </Heading>\n              )}\n            </Row>\n          </>\n        )}\n      </Column>\n    </ReactModal>\n  );\n};\n","import { FlatButton, stenaTimes } from \"@stenajs-webui/elements\";\nimport * as React from \"react\";\nimport { ReactNode } from \"react\";\nimport {\n  DRAGGABLE_CANCEL_CLASSNAME,\n  DRAGGABLE_HANDLE_CLASSNAME,\n} from \"./BaseModal\";\nimport { Box, Row, Txt } from \"@stenajs-webui/core\";\n\nexport interface ModalHeaderProps {\n  onRequestClose?: () => void;\n  header?: ReactNode;\n  headerText?: string;\n  closeButtonClassName?: string;\n}\n\nexport const ModalHeader: React.FC<ModalHeaderProps> = ({\n  onRequestClose,\n  header,\n  headerText,\n  closeButtonClassName,\n}) => {\n  return (\n    <Row\n      spacing={2}\n      indent={2}\n      borderBottom={\"1px solid var(--swui-modal-header-border-color)\"}\n      className={DRAGGABLE_HANDLE_CLASSNAME}\n    >\n      <Row flex={1} indent alignItems={\"center\"}>\n        {headerText && (\n          <Txt className={DRAGGABLE_CANCEL_CLASSNAME} size={\"large\"}>\n            {headerText}\n          </Txt>\n        )}\n        {header}\n      </Row>\n      <Box alignSelf={\"flex-start\"}>\n        <FlatButton\n          className={closeButtonClassName}\n          onClick={onRequestClose}\n          aria-label={\"Close\"}\n          leftIcon={stenaTimes}\n        />\n      </Box>\n    </Row>\n  );\n};\n","import { Box } from \"@stenajs-webui/core\";\nimport * as React from \"react\";\nimport { BaseModal, BaseModalProps } from \"./BaseModal\";\nimport { ModalHeader, ModalHeaderProps } from \"./ModalHeader\";\nimport cx from \"classnames\";\nimport styles from \"./Modal.module.css\";\n\nexport interface ModalProps extends BaseModalProps, ModalHeaderProps {\n  spacing?: number;\n  indent?: number;\n  draggable?: boolean;\n  footer?: React.ReactNode;\n  disableStickyFooter?: boolean;\n}\n\nexport const Modal: React.FC<ModalProps> = ({\n  header,\n  headerText,\n  children,\n  spacing,\n  indent,\n  draggable = false,\n  onRequestClose,\n  closeButtonClassName,\n  footer,\n  disableStickyFooter = false,\n  ...props\n}) => {\n  const activeSpacing = typeof spacing === \"number\" ? spacing : 1;\n  const activeIndent = typeof indent === \"number\" ? indent : 1;\n\n  return (\n    <BaseModal {...props} onRequestClose={onRequestClose} draggable={draggable}>\n      <ModalHeader\n        onRequestClose={onRequestClose}\n        header={header}\n        headerText={headerText}\n        closeButtonClassName={closeButtonClassName}\n      />\n      <Box spacing={activeSpacing} indent={activeIndent}>\n        {children}\n      </Box>\n      {footer && (\n        <Box\n          className={cx(styles.footer, {\n            [styles.stickyFooter]: !disableStickyFooter,\n          })}\n        >\n          {footer}\n        </Box>\n      )}\n    </BaseModal>\n  );\n};\n","import { Column } from \"@stenajs-webui/core\";\nimport * as React from \"react\";\nimport { ReactNode } from \"react\";\n\nexport interface ModalFooterProps {\n  children?: ReactNode;\n}\n\nexport const ModalFooter: React.FC<ModalFooterProps> = ({ children }) => (\n  <Column indent={2} spacing={2}>\n    {children}\n  </Column>\n);\n"],"names":["React","ReactModal","styles","Draggable","cx","exhaustSwitchCase","Column","Box","Spinner","Spacing","Row","Icon","Indent","Heading","Txt","FlatButton","stenaTimes"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../src/components/modal/BaseModal.tsx","../src/components/drawer/Drawer.tsx","../src/components/center-modal/CenterModal.tsx","../src/components/loading-modal/LoadingModal.tsx","../src/components/modal/ModalHeader.tsx","../src/components/modal/Modal.tsx","../src/components/modal/ModalFooter.tsx"],"sourcesContent":["import * as React from \"react\";\nimport ReactModal from \"react-modal\";\nimport Draggable from \"react-draggable\";\nimport cx from \"classnames\";\nimport styles from \"./Modal.module.css\";\n\nexport interface BaseModalProps extends ReactModal.Props {\n  width?: string;\n  onRequestClose?: () => void;\n  draggable?: boolean;\n}\n\nexport const DRAGGABLE_HANDLE_CLASSNAME = \"draggable-modal-handle\";\nexport const DRAGGABLE_CANCEL_CLASSNAME = \"draggable-modal-cancel\";\n\nexport const BaseModal: React.FC<BaseModalProps> = ({\n  width,\n  draggable = false,\n  children,\n  ...reactModalProps\n}) => {\n  return (\n    <ReactModal\n      overlayClassName={styles.overlay}\n      className={styles.modal}\n      {...reactModalProps}\n    >\n      <Draggable\n        handle={`.${DRAGGABLE_HANDLE_CLASSNAME}`}\n        cancel={`.${DRAGGABLE_CANCEL_CLASSNAME}, button, [role=\"tooltip\"]`}\n        bounds=\".ReactModal__Overlay\"\n        disabled={!draggable}\n      >\n        <div\n          style={{ [\"--swui-modal-width\" as string]: width }}\n          className={cx(styles.content, {\n            [styles.isDraggable]: draggable,\n          })}\n        >\n          {children}\n        </div>\n      </Draggable>\n    </ReactModal>\n  );\n};\n","import * as React from \"react\";\nimport ReactModal from \"react-modal\";\nimport cx from \"classnames\";\nimport styles from \"./Drawer.module.css\";\nimport { exhaustSwitchCase, FlattenUnion } from \"@stenajs-webui/core\";\n\nexport type SlideFrom = SlideFromLeftRight | SlideFromTopBottom;\nexport type SlideFromLeftRight = \"left\" | \"right\";\nexport type SlideFromTopBottom = \"top\" | \"bottom\";\n\nexport type DrawerProps = DrawerBaseLeftRight | DrawerBaseTopBottom;\n\ninterface DrawerBaseLeftRight extends DrawerBaseProps {\n  width?: string;\n  /**\n   * Which direction the drawer will appear from.\n   * @default left\n   * @param {String('left'|'right')}\n   */\n  slideFrom?: SlideFromLeftRight;\n}\n\ninterface DrawerBaseTopBottom extends DrawerBaseProps {\n  height?: string;\n  /**\n   * Which direction the drawer will appear from.\n   * @default left\n   * @param {String('top'|'bottom')}\n   */\n  slideFrom?: SlideFromTopBottom;\n}\n\ninterface DrawerBaseProps\n  extends Omit<\n    ReactModal.Props,\n    | \"closeTimeoutMS\"\n    | \"portalClassName\"\n    | \"overlayClassName\"\n    | \"className\"\n    | \"style\"\n    | \"parentSelector\"\n  > {\n  background?: string;\n  zIndex?: number;\n  onRequestClose?: () => void;\n  /**\n   * Portal target, HTML element. If not set, portal is not used.\n   */\n  portalTarget?: HTMLElement | null;\n}\n\nexport const Drawer: React.FC<DrawerProps> = ({\n  background,\n  zIndex,\n  children,\n  slideFrom = \"left\",\n  portalTarget,\n  ...reactModalProps\n}) => {\n  const { height, width } = reactModalProps as FlattenUnion<DrawerProps>;\n\n  return (\n    <ReactModal\n      closeTimeoutMS={250}\n      portalClassName={styles.portal}\n      overlayClassName={{\n        base: styles.overlay,\n        afterOpen: styles.afterOpen,\n        beforeClose: styles.beforeClose,\n      }}\n      className={{\n        base: cx(styles.content, getClassNameForSlide(slideFrom)),\n        afterOpen: styles.afterOpen,\n        beforeClose: styles.beforeClose,\n      }}\n      style={{ content: { width, height, background }, overlay: { zIndex } }}\n      parentSelector={portalTarget ? () => portalTarget : undefined}\n      {...reactModalProps}\n    >\n      {children}\n    </ReactModal>\n  );\n};\n\nconst getClassNameForSlide = (slideFrom: SlideFrom): string => {\n  switch (slideFrom) {\n    case \"left\":\n      return styles.slideFromLeft;\n    case \"right\":\n      return styles.slideFromRight;\n    case \"top\":\n      return styles.slideFromTop;\n    case \"bottom\":\n      return styles.slideFromBottom;\n    default:\n      return exhaustSwitchCase(slideFrom, styles.slideFromLeft);\n  }\n};\n","import * as React from \"react\";\nimport ReactModal from \"react-modal\";\n\nimport styles from \"../modal/Modal.module.css\";\n\nexport interface CenterModalProps extends ReactModal.Props {\n  onRequestClose?: () => void;\n}\n\nconst style = { overlay: { justifyContent: \"center\" } };\n\nexport const CenterModal: React.FC<CenterModalProps> = ({\n  children,\n  ...reactModalProps\n}) => {\n  return (\n    <ReactModal\n      overlayClassName={styles.overlay}\n      className={styles.modal}\n      style={style}\n      {...reactModalProps}\n    >\n      <div\n        className={styles.content}\n        style={{ [\"--swui-modal-width\" as string]: \"fit-content\" }}\n      >\n        {children}\n      </div>\n    </ReactModal>\n  );\n};\n","import { IconDefinition } from \"@fortawesome/fontawesome-svg-core\";\nimport {\n  Box,\n  Column,\n  Heading,\n  Indent,\n  Row,\n  Spacing,\n} from \"@stenajs-webui/core\";\nimport { Icon, Spinner } from \"@stenajs-webui/elements\";\nimport * as React from \"react\";\nimport ReactModal from \"react-modal\";\nimport styles from \"./LoadingModal.module.css\";\n\nexport interface LoadingModalProps extends Omit<ReactModal.Props, \"isOpen\"> {\n  headerText?: string;\n  headerIconLeft?: IconDefinition;\n}\n\nexport const LoadingModal: React.FC<LoadingModalProps> = ({\n  headerIconLeft,\n  headerText,\n  ...modalProps\n}) => {\n  return (\n    <ReactModal\n      {...modalProps}\n      isOpen\n      className={styles.modal}\n      overlayClassName={styles.overlay}\n    >\n      <Column spacing={2} alignItems={\"center\"}>\n        <Box\n          alignItems={\"center\"}\n          justifyContent={\"center\"}\n          width={\"64px\"}\n          height={\"64px\"}\n          borderRadius={\"50%\"}\n          background={\"white\"}\n          shadow={\"modal\"}\n        >\n          <Spinner size={\"small\"} />\n        </Box>\n        {(headerIconLeft || headerText) && (\n          <>\n            <Spacing />\n            <Row indent={2}>\n              {headerIconLeft && (\n                <>\n                  <Icon size={14} icon={headerIconLeft} color={\"white\"} />\n                  <Indent />\n                </>\n              )}\n              {headerText && (\n                <Heading variant={\"h4\"} color={\"white\"}>\n                  {headerText}\n                </Heading>\n              )}\n            </Row>\n          </>\n        )}\n      </Column>\n    </ReactModal>\n  );\n};\n","import { FlatButton, stenaTimes } from \"@stenajs-webui/elements\";\nimport * as React from \"react\";\nimport { ReactNode } from \"react\";\nimport {\n  DRAGGABLE_CANCEL_CLASSNAME,\n  DRAGGABLE_HANDLE_CLASSNAME,\n} from \"./BaseModal\";\nimport { Box, Row, Txt } from \"@stenajs-webui/core\";\n\nexport interface ModalHeaderProps {\n  onRequestClose?: () => void;\n  header?: ReactNode;\n  headerText?: string;\n  closeButtonClassName?: string;\n}\n\nexport const ModalHeader: React.FC<ModalHeaderProps> = ({\n  onRequestClose,\n  header,\n  headerText,\n  closeButtonClassName,\n}) => {\n  return (\n    <Row\n      spacing={2}\n      indent={2}\n      borderBottom={\"1px solid var(--swui-modal-header-border-color)\"}\n      className={DRAGGABLE_HANDLE_CLASSNAME}\n    >\n      <Row flex={1} indent alignItems={\"center\"}>\n        {headerText && (\n          <Txt className={DRAGGABLE_CANCEL_CLASSNAME} size={\"large\"}>\n            {headerText}\n          </Txt>\n        )}\n        {header}\n      </Row>\n      <Box alignSelf={\"flex-start\"}>\n        <FlatButton\n          className={closeButtonClassName}\n          onClick={onRequestClose}\n          aria-label={\"Close\"}\n          leftIcon={stenaTimes}\n        />\n      </Box>\n    </Row>\n  );\n};\n","import { Box } from \"@stenajs-webui/core\";\nimport * as React from \"react\";\nimport { BaseModal, BaseModalProps } from \"./BaseModal\";\nimport { ModalHeader, ModalHeaderProps } from \"./ModalHeader\";\nimport cx from \"classnames\";\nimport styles from \"./Modal.module.css\";\n\nexport interface ModalProps extends BaseModalProps, ModalHeaderProps {\n  spacing?: number;\n  indent?: number;\n  draggable?: boolean;\n  footer?: React.ReactNode;\n  disableStickyFooter?: boolean;\n}\n\nexport const Modal: React.FC<ModalProps> = ({\n  header,\n  headerText,\n  children,\n  spacing,\n  indent,\n  draggable = false,\n  onRequestClose,\n  closeButtonClassName,\n  footer,\n  disableStickyFooter = false,\n  ...props\n}) => {\n  const activeSpacing = typeof spacing === \"number\" ? spacing : 1;\n  const activeIndent = typeof indent === \"number\" ? indent : 1;\n\n  return (\n    <BaseModal {...props} onRequestClose={onRequestClose} draggable={draggable}>\n      <ModalHeader\n        onRequestClose={onRequestClose}\n        header={header}\n        headerText={headerText}\n        closeButtonClassName={closeButtonClassName}\n      />\n      <Box spacing={activeSpacing} indent={activeIndent}>\n        {children}\n      </Box>\n      {footer && (\n        <Box\n          className={cx(styles.footer, {\n            [styles.stickyFooter]: !disableStickyFooter,\n          })}\n        >\n          {footer}\n        </Box>\n      )}\n    </BaseModal>\n  );\n};\n","import { Column } from \"@stenajs-webui/core\";\nimport * as React from \"react\";\nimport { ReactNode } from \"react\";\n\nexport interface ModalFooterProps {\n  children?: ReactNode;\n}\n\nexport const ModalFooter: React.FC<ModalFooterProps> = ({ children }) => (\n  <Column indent={2} spacing={2}>\n    {children}\n  </Column>\n);\n"],"names":["DRAGGABLE_HANDLE_CLASSNAME","DRAGGABLE_CANCEL_CLASSNAME","BaseModal","width","draggable","children","reactModalProps","ReactModal","styles","overlay","modal","Draggable","cx","content","isDraggable","Drawer","background","zIndex","slideFrom","portalTarget","height","portal","base","afterOpen","beforeClose","getClassNameForSlide","undefined","slideFromLeft","slideFromRight","slideFromTop","slideFromBottom","exhaustSwitchCase","style","justifyContent","CenterModal","LoadingModal","headerIconLeft","headerText","modalProps","Column","_jsx","Box","Spinner","_Fragment","Spacing","Row","_jsxs","Icon","Indent","Heading","ModalHeader","onRequestClose","header","closeButtonClassName","Txt","FlatButton","stenaTimes","Modal","spacing","indent","footer","disableStickyFooter","props","activeSpacing","activeIndent","stickyFooter","ModalFooter"],"mappings":"upBAYO,KAAMA,GAA6B,yBAC7BC,EAA6B,yBAE7BC,EAAsC,CAAC,CAClDC,QACAC,YAAY,GACZC,cACGC,WAGAC,EAAAA,QAAD,CACE,iBAAkBC,EAAOC,QACzB,UAAWD,EAAOE,MAFpB,GAGMJ,EAHN,eAKGK,UAAD,CACE,OAAS,IAAGX,IACZ,OAAS,IAAGC,8BACZ,OAAO,uBACP,SAAU,CAACG,EAJb,eAME,MAAA,CACE,MAAO,CAAE,CAAC,sBAAiCD,CAApC,EACP,UAAWS,EAAAA,QAAGJ,EAAOK,QAAS,CAC5B,CAACL,EAAOM,aAAcV,CAAAA,CADX,EAFf,UAAA,CAAA,CAAA,CANF,CAAA,CANJ,qWC8BK,KAAMW,GAAgC,CAAC,CAC5CC,aACAC,SACAZ,WACAa,YAAY,OACZC,kBACGb,KACC,CACE,KAAA,CAAEc,SAAQjB,SAAUG,EAE1B,aACGC,EAAAA,QAAD,CACE,eAAgB,IAChB,gBAAiBC,EAAOa,OACxB,iBAAkB,CAChBC,KAAMd,EAAOC,QACbc,UAAWf,EAAOe,UAClBC,YAAahB,EAAOgB,WAHJ,EAKlB,UAAW,CACTF,KAAMV,EAAGJ,QAAAA,EAAOK,QAASY,EAAqBP,CAAD,CAArC,EACRK,UAAWf,EAAOe,UAClBC,YAAahB,EAAOgB,WAHX,EAKX,MAAO,CAAEX,QAAS,CAAEV,QAAOiB,SAAQJ,YAAjB,EAA+BP,QAAS,CAAEQ,QAAF,CAAnD,EACP,eAAgBE,EAAe,IAAMA,EAAeO,OAdtD,GAeMpB,EAfN,UAAA,CADF,CAqBD,EAEKmB,EAAuB,AAACP,GAAiC,CACrDA,OAAAA,OACD,OACH,MAAOV,GAAOmB,kBACX,QACH,MAAOnB,GAAOoB,mBACX,MACH,MAAOpB,GAAOqB,iBACX,SACH,MAAOrB,GAAOsB,wBAEPC,MAAAA,qBAAkBb,EAAWV,EAAOmB,aAAnB,EAE7B,ECxFKK,EAAQ,CAAEvB,QAAS,CAAEwB,eAAgB,QAAlB,CAAX,EAEDC,EAA0C,CAAC,CACtD7B,cACGC,WAGAC,EAAAA,QAAD,CACE,iBAAkBC,EAAOC,QACzB,UAAWD,EAAOE,MAClB,QAHF,GAIMJ,EAJN,eAME,MAAA,CACE,UAAWE,EAAOK,QAClB,MAAO,CAAE,CAAC,sBAAiC,aAApC,EAFT,UAAA,CAAA,CAAA,CAPJ,qECIK,KAAMsB,GAA4C,CAAC,CACxDC,iBACAC,gBACGC,WAGA/B,EAAAA,QAAD,CAAA,GACM+B,EACJ,OAFF,GAGE,UAAW9B,EAAOE,MAClB,iBAAkBF,EAAOC,QAJ3B,gBAMG8B,SAAD,CAAQ,QAAS,EAAG,WAAY,SAAhC,SAAA,CACEC,EAAA,IAACC,MAAD,CACE,WAAY,SACZ,eAAgB,SAChB,MAAO,OACP,OAAQ,OACR,aAAc,MACd,WAAY,QACZ,OAAQ,QAPV,eASGC,UAAD,CAAS,KAAM,OAAA,CAAf,CATF,CAAA,EAWoBL,IAAAA,WAClBM,EAAAA,SAAA,CAAA,SAAA,CACGH,EAAAA,IAAAI,EAAAA,QADH,CAAA,CAAA,SAEGC,MAAD,CAAK,OAAQ,EAAb,SAAA,CACGT,GACCU,EAAA,KAAAH,WAAA,CAAA,SAAA,CACEH,EAAA,IAACO,OAAD,CAAM,KAAM,GAAI,KAAMX,EAAgB,MAAO,OAD/C,CAAA,EAEEI,EAAA,IAACQ,SAFH,CAAA,CAAA,CAAA,CAAA,CAAA,EAKDX,GACCG,EAAA,IAACS,UAAD,CAAS,QAAS,KAAM,MAAO,QAA/B,SACGZ,CAAAA,CATP,CAAA,CAAA,CAFF,CAAA,CAAA,CAbJ,CAAA,CAAA,CAAA,CAAA,CAPJ,ECRWa,EAA0C,CAAC,CACtDC,iBACAC,SACAf,aACAgB,iCAGGR,EAAAA,IAAD,CACE,QAAS,EACT,OAAQ,EACR,aAAc,kDACd,UAAW7C,EAJb,SAAA,CAME8C,EAAA,KAACD,MAAD,CAAK,KAAM,EAAG,OAAd,GAAqB,WAAY,SAAjC,SACGR,CAAAA,GACCG,EAAA,IAACc,MAAD,CAAK,UAAWrD,EAA4B,KAAM,QAAlD,SACGoC,CADH,CAAA,EAIDe,CANH,CAAA,CANF,EAcEZ,EAAA,IAACC,MAAD,CAAK,UAAW,aAAhB,eACGc,aAAD,CACE,UAAWF,EACX,QAASF,EACT,aAAY,QACZ,SAAUK,EAAAA,UAAAA,CAJZ,CAAA,CAfJ,CAAA,CAAA,CADF,ECPWC,GAA8B,CAAC,CAC1CL,SACAf,aACAhC,WACAqD,UACAC,SACAvD,YAAY,GACZ+C,iBACAE,uBACAO,SACAC,sBAAsB,MACnBC,KACC,CACJ,KAAMC,GAAgB,MAAOL,IAAY,SAAWA,EAAU,EACxDM,EAAe,MAAOL,IAAW,SAAWA,EAAS,EAE3D,cACG,EAAD,CAAA,GAAeG,EAAO,iBAAgC,YAAtD,SAAA,CACEtB,EAAA,IAAC,EAAD,CACE,iBACA,SACA,aACA,sBAAA,CALJ,EAOEA,EAAA,IAACC,MAAD,CAAK,QAASsB,EAAe,OAAQC,EAArC,UAAA,CAAA,EAGCJ,GACCpB,EAAA,IAACC,MAAD,CACE,UAAW7B,EAAAA,QAAGJ,EAAOoD,OAAQ,CAC3B,CAACpD,EAAOyD,cAAe,CAACJ,CAAAA,CADb,EADf,SAKGD,CAAAA,CAhBP,CAAA,CAAA,CADF,CAsBD,EC7CYM,GAA0C,CAAC,CAAE7D,oBACvDkC,EAAAA,OAAD,CAAQ,OAAQ,EAAG,QAAS,EAA5B,UAAA,CADK"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stenajs-webui/modal",
-  "version": "17.6.0",
+  "version": "17.9.0",
   "description": "",
   "author": "mattias800",
   "license": "MIT",
@@ -18,18 +18,17 @@
     "npm": ">=5"
   },
   "scripts": {
-    "test": "cross-env CI=1 react-scripts-ts test --env=jsdom",
-    "build": "rollup -c",
-    "start": "rollup -c -w",
-    "clean": "rm -rf dist",
+    "build": "yarn tsc -p tsconfig.build.json && yarn vite build",
+    "start": "yarn tsc -p tsconfig.build.json && yarn vite build --watch",
+    "clean": "rimraf dist",
     "prepare": "yarn clean && yarn run build",
     "predeploy": "cd example && yarn install && yarn run build",
     "deploy": "gh-pages -d example/build"
   },
   "dependencies": {
-    "@stenajs-webui/core": "17.6.0",
-    "@stenajs-webui/elements": "17.6.0",
-    "@stenajs-webui/theme": "17.6.0",
+    "@stenajs-webui/core": "17.9.0",
+    "@stenajs-webui/elements": "17.9.0",
+    "@stenajs-webui/theme": "17.9.0",
     "@types/react-modal": "^3.13.1",
     "classnames": "^2.3.1",
     "react-draggable": "^4.4.5",
@@ -59,5 +58,5 @@
   "files": [
     "dist"
   ],
-  "gitHead": "2312d798dfd8af052a6340d9ee78c5bc30acbec1"
+  "gitHead": "75a374c3203e76acb301a0b4d3a9d119a9bfb8da"
 }

package/dist/components/center-modal/CenterModal.stories.d.ts

@@ -1,8 +0,0 @@
-import * as React from "react";
-declare const _default: {
-    title: string;
-    component: React.FC<import("./CenterModal").CenterModalProps>;
-};
-export default _default;
-export declare const Standard: () => JSX.Element;
-export declare const WithHeaderAndIcon: () => JSX.Element;

package/dist/components/drawer/Drawer.stories.d.ts

@@ -1,14 +0,0 @@
-import * as React from "react";
-declare const _default: {
-    title: string;
-    component: React.FC<import("./Drawer").DrawerProps>;
-};
-export default _default;
-export declare const Standard: () => JSX.Element;
-export declare const CustomWidth: () => JSX.Element;
-export declare const CustomBackground: () => JSX.Element;
-export declare const FromRight: () => JSX.Element;
-export declare const FromTop: () => JSX.Element;
-export declare const FromBottom: () => JSX.Element;
-export declare const CustomHeight: () => JSX.Element;
-export declare const WithScroll: () => JSX.Element;

package/dist/components/loading-modal/LoadingModal.stories.d.ts

@@ -1,8 +0,0 @@
-import * as React from "react";
-declare const _default: {
-    title: string;
-    component: React.FC<import("./LoadingModal").LoadingModalProps>;
-};
-export default _default;
-export declare const Standard: () => JSX.Element;
-export declare const WithHeaderAndIcon: () => JSX.Element;

package/dist/components/modal/Modal.stories.d.ts

@@ -1,14 +0,0 @@
-import * as React from "react";
-declare const _default: {
-    title: string;
-    component: React.FC<import("./Modal").ModalProps>;
-};
-export default _default;
-export declare const ModalWithHeader: () => JSX.Element;
-export declare const ModalWithCustomHeaderComponent: () => JSX.Element;
-export declare const ModalWithFixedWidth: () => JSX.Element;
-export declare const ModalWithScroll: () => JSX.Element;
-export declare const _BaseModal: () => JSX.Element;
-export declare const DraggableModal: () => JSX.Element;
-export declare const CustomDraggableModal: () => JSX.Element;
-export declare const ModalWithStickyContentBottom: () => JSX.Element;