@stenajs-webui/modal 17.13.0 → 17.13.3

package/dist/index.es.js

@@ -1,275 +1,242 @@
-(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
-      })
+(function(){"use strict";try{var t=document.createElement("style");t.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(t)}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
+import _ from "react-modal";
+import q from "react-draggable";
+import u from "classnames";
+import { jsx as e, jsxs as s, Fragment as h } from "react/jsx-runtime";
+import { exhaustSwitchCase as w, Column as v, Box as m, Spacing as k, Row as p, Indent as S, Heading as A, Txt as B } from "@stenajs-webui/core";
+import { Spinner as L, Icon as M, FlatButton as x, stenaTimes as D } from "@stenajs-webui/elements";
+const I = "_overlay_11kta_1", O = "_fadeIn_11kta_1", R = "_modal_11kta_32", $ = "_content_11kta_38", E = "_appear_11kta_1", j = "_isDraggable_11kta_60", G = "_footer_11kta_93", z = "_stickyFooter_11kta_97", n = {
+  overlay: I,
+  fadeIn: O,
+  modal: R,
+  content: $,
+  appear: E,
+  isDraggable: j,
+  footer: G,
+  stickyFooter: z
+}, b = "draggable-modal-handle", F = "draggable-modal-cancel", H = ({
+  width: o,
+  draggable: t = !1,
+  children: l,
+  ...r
+}) => /* @__PURE__ */ e(_, {
+  overlayClassName: n.overlay,
+  className: n.modal,
+  ...r,
+  children: /* @__PURE__ */ e(q, {
+    handle: `.${b}`,
+    cancel: `.${F}, button, [role="tooltip"]`,
+    bounds: ".ReactModal__Overlay",
+    disabled: !t,
+    children: /* @__PURE__ */ e("div", {
+      style: {
+        ["--swui-modal-width"]: o
+      },
+      className: u(n.content, {
+        [n.isDraggable]: t
+      }),
+      children: l
     })
-  });
-};
-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
+  })
+}), T = "_portal_17quq_1", J = "_overlay_17quq_2", K = "_content_17quq_7", Q = "_slideFromLeft_17quq_13", U = "_slideFromRight_17quq_14", V = "_afterOpen_17quq_20", W = "_beforeClose_17quq_24", X = "_slideFromTop_17quq_29", Y = "_slideFromBottom_17quq_30", a = {
+  portal: T,
+  overlay: J,
+  content: K,
+  slideFromLeft: Q,
+  slideFromRight: U,
+  afterOpen: V,
+  beforeClose: W,
+  slideFromTop: X,
+  slideFromBottom: Y
+}, me = ({
+  background: o,
+  zIndex: t,
+  children: l,
+  slideFrom: r = "left",
+  portalTarget: c,
+  ...i
 }) => {
   const {
-    height,
-    width
-  } = reactModalProps;
-  return /* @__PURE__ */ jsx(ReactModal, {
+    height: d,
+    width: f
+  } = i;
+  return /* @__PURE__ */ e(_, {
     closeTimeoutMS: 250,
-    portalClassName: styles$1.portal,
+    portalClassName: a.portal,
     overlayClassName: {
-      base: styles$1.overlay,
-      afterOpen: styles$1.afterOpen,
-      beforeClose: styles$1.beforeClose
+      base: a.overlay,
+      afterOpen: a.afterOpen,
+      beforeClose: a.beforeClose
     },
     className: {
-      base: cx(styles$1.content, getClassNameForSlide(slideFrom)),
-      afterOpen: styles$1.afterOpen,
-      beforeClose: styles$1.beforeClose
+      base: u(a.content, Z(r)),
+      afterOpen: a.afterOpen,
+      beforeClose: a.beforeClose
     },
     style: {
       content: {
-        width,
-        height,
-        background
+        width: f,
+        height: d,
+        background: o
       },
       overlay: {
-        zIndex
+        zIndex: t
       }
     },
-    parentSelector: portalTarget ? () => portalTarget : void 0,
-    ...reactModalProps,
-    children
+    parentSelector: c ? () => c : void 0,
+    ...i,
+    children: l
   });
-};
-const getClassNameForSlide = (slideFrom) => {
-  switch (slideFrom) {
+}, Z = (o) => {
+  switch (o) {
     case "left":
-      return styles$1.slideFromLeft;
+      return a.slideFromLeft;
     case "right":
-      return styles$1.slideFromRight;
+      return a.slideFromRight;
     case "top":
-      return styles$1.slideFromTop;
+      return a.slideFromTop;
     case "bottom":
-      return styles$1.slideFromBottom;
+      return a.slideFromBottom;
     default:
-      return exhaustSwitchCase(slideFrom, styles$1.slideFromLeft);
+      return w(o, a.slideFromLeft);
   }
-};
-const style = {
+}, P = {
   overlay: {
     justifyContent: "center"
   }
-};
-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
-    })
-  });
-};
-const modal = "_modal_4fwgb_1";
-const overlay = "_overlay_4fwgb_13";
-var styles = {
-  modal,
-  overlay
-};
-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
-          })]
-        })]
-      })]
-    })
-  });
-};
-const ModalHeader = ({
-  onRequestClose,
-  header,
-  headerText,
-  closeButtonClassName
-}) => {
-  return /* @__PURE__ */ jsxs(Row, {
+}, _e = ({
+  children: o,
+  ...t
+}) => /* @__PURE__ */ e(_, {
+  overlayClassName: n.overlay,
+  className: n.modal,
+  style: P,
+  ...t,
+  children: /* @__PURE__ */ e("div", {
+    className: n.content,
+    style: {
+      ["--swui-modal-width"]: "fit-content"
+    },
+    children: o
+  })
+}), ee = "_modal_4fwgb_1", oe = "_overlay_4fwgb_13", y = {
+  modal: ee,
+  overlay: oe
+}, fe = ({
+  headerIconLeft: o,
+  headerText: t,
+  ...l
+}) => /* @__PURE__ */ e(_, {
+  ...l,
+  isOpen: !0,
+  className: y.modal,
+  overlayClassName: y.overlay,
+  children: /* @__PURE__ */ s(v, {
     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: [/* @__PURE__ */ e(m, {
       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
+      justifyContent: "center",
+      width: "64px",
+      height: "64px",
+      borderRadius: "50%",
+      background: "white",
+      shadow: "modal",
+      children: /* @__PURE__ */ e(L, {
+        size: "small"
       })
+    }), (o || t) && /* @__PURE__ */ s(h, {
+      children: [/* @__PURE__ */ e(k, {}), /* @__PURE__ */ s(p, {
+        indent: 2,
+        children: [o && /* @__PURE__ */ s(h, {
+          children: [/* @__PURE__ */ e(M, {
+            size: 14,
+            icon: o,
+            color: "white"
+          }), /* @__PURE__ */ e(S, {})]
+        }), t && /* @__PURE__ */ e(A, {
+          variant: "h4",
+          color: "white",
+          children: t
+        })]
+      })]
     })]
-  });
-};
-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, {
+  })
+}), te = ({
+  onRequestClose: o,
+  header: t,
+  headerText: l,
+  closeButtonClassName: r
+}) => /* @__PURE__ */ s(p, {
+  spacing: 2,
+  indent: 2,
+  borderBottom: "1px solid var(--swui-modal-header-border-color)",
+  className: b,
+  children: [/* @__PURE__ */ s(p, {
+    flex: 1,
+    indent: !0,
+    alignItems: "center",
+    children: [l && /* @__PURE__ */ e(B, {
+      className: F,
+      size: "large",
+      children: l
+    }), t]
+  }), /* @__PURE__ */ e(m, {
+    alignSelf: "flex-start",
+    children: /* @__PURE__ */ e(x, {
+      className: r,
+      onClick: o,
+      "aria-label": "Close",
+      leftIcon: D
+    })
+  })]
+}), pe = ({
+  header: o,
+  headerText: t,
+  children: l,
+  spacing: r,
+  indent: c,
+  draggable: i = !1,
+  onRequestClose: d,
+  closeButtonClassName: f,
+  footer: g,
+  disableStickyFooter: C = !1,
+  ...N
+}) => /* @__PURE__ */ s(H, {
+  ...N,
+  onRequestClose: d,
+  draggable: i,
+  children: [/* @__PURE__ */ e(te, {
+    onRequestClose: d,
+    header: o,
+    headerText: t,
+    closeButtonClassName: f
+  }), /* @__PURE__ */ e(m, {
+    spacing: typeof r == "number" ? r : 1,
+    indent: typeof c == "number" ? c : 1,
+    children: l
+  }), g && /* @__PURE__ */ e(m, {
+    className: u(n.footer, {
+      [n.stickyFooter]: !C
+    }),
+    children: g
+  })]
+}), ue = ({
+  children: o
+}) => /* @__PURE__ */ e(v, {
   indent: 2,
   spacing: 2,
-  children
+  children: o
 });
-export { BaseModal, CenterModal, DRAGGABLE_CANCEL_CLASSNAME, DRAGGABLE_HANDLE_CLASSNAME, Drawer, LoadingModal, Modal, ModalFooter, ModalHeader };
+export {
+  H as BaseModal,
+  _e as CenterModal,
+  F as DRAGGABLE_CANCEL_CLASSNAME,
+  b as DRAGGABLE_HANDLE_CLASSNAME,
+  me as Drawer,
+  fe as LoadingModal,
+  pe as Modal,
+  ue as ModalFooter,
+  te as ModalHeader
+};
 //# sourceMappingURL=index.es.js.map

package/dist/index.es.js.map

@@ -1 +1 @@
-{"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;;"}
+{"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","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","stickyFooter","ModalFooter"],"mappings":"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"}

package/dist/index.js

@@ -1,2 +1,3 @@
-(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;
+(function(){"use strict";try{var t=document.createElement("style");t.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(t)}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const q=require("react-modal"),w=require("react-draggable"),M=require("classnames"),e=require("react/jsx-runtime"),s=require("@stenajs-webui/core"),_=require("@stenajs-webui/elements"),f=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},m=f(q),A=f(w),g=f(M),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",n={overlay:L,fadeIn:S,modal:B,content:D,appear:R,isDraggable:k,footer:E,stickyFooter:O},x="draggable-modal-handle",p="draggable-modal-cancel",h=({width:t,draggable:o=!1,children:l,...r})=>e.jsx(m.default,{overlayClassName:n.overlay,className:n.modal,...r,children:e.jsx(A.default,{handle:`.${x}`,cancel:`.${p}, button, [role="tooltip"]`,bounds:".ReactModal__Overlay",disabled:!o,children:e.jsx("div",{style:{["--swui-modal-width"]:t},className:g.default(n.content,{[n.isDraggable]:o}),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",a={portal:G,overlay:I,content:$,slideFromLeft:H,slideFromRight:T,afterOpen:z,beforeClose:J,slideFromTop:K,slideFromBottom:P},Q=({background:t,zIndex:o,children:l,slideFrom:r="left",portalTarget:c,...i})=>{const{height:d,width:u}=i;return e.jsx(m.default,{closeTimeoutMS:250,portalClassName:a.portal,overlayClassName:{base:a.overlay,afterOpen:a.afterOpen,beforeClose:a.beforeClose},className:{base:g.default(a.content,U(r)),afterOpen:a.afterOpen,beforeClose:a.beforeClose},style:{content:{width:u,height:d,background:t},overlay:{zIndex:o}},parentSelector:c?()=>c:void 0,...i,children:l})},U=t=>{switch(t){case"left":return a.slideFromLeft;case"right":return a.slideFromRight;case"top":return a.slideFromTop;case"bottom":return a.slideFromBottom;default:return s.exhaustSwitchCase(t,a.slideFromLeft)}},V={overlay:{justifyContent:"center"}},W=({children:t,...o})=>e.jsx(m.default,{overlayClassName:n.overlay,className:n.modal,style:V,...o,children:e.jsx("div",{className:n.content,style:{["--swui-modal-width"]:"fit-content"},children:t})}),X="_modal_4fwgb_1",Y="_overlay_4fwgb_13",b={modal:X,overlay:Y},Z=({headerIconLeft:t,headerText:o,...l})=>e.jsx(m.default,{...l,isOpen:!0,className:b.modal,overlayClassName:b.overlay,children:e.jsxs(s.Column,{spacing:2,alignItems:"center",children:[e.jsx(s.Box,{alignItems:"center",justifyContent:"center",width:"64px",height:"64px",borderRadius:"50%",background:"white",shadow:"modal",children:e.jsx(_.Spinner,{size:"small"})}),(t||o)&&e.jsxs(e.Fragment,{children:[e.jsx(s.Spacing,{}),e.jsxs(s.Row,{indent:2,children:[t&&e.jsxs(e.Fragment,{children:[e.jsx(_.Icon,{size:14,icon:t,color:"white"}),e.jsx(s.Indent,{})]}),o&&e.jsx(s.Heading,{variant:"h4",color:"white",children:o})]})]})]})}),j=({onRequestClose:t,header:o,headerText:l,closeButtonClassName:r})=>e.jsxs(s.Row,{spacing:2,indent:2,borderBottom:"1px solid var(--swui-modal-header-border-color)",className:x,children:[e.jsxs(s.Row,{flex:1,indent:!0,alignItems:"center",children:[l&&e.jsx(s.Txt,{className:p,size:"large",children:l}),o]}),e.jsx(s.Box,{alignSelf:"flex-start",children:e.jsx(_.FlatButton,{className:r,onClick:t,"aria-label":"Close",leftIcon:_.stenaTimes})})]}),ee=({header:t,headerText:o,children:l,spacing:r,indent:c,draggable:i=!1,onRequestClose:d,closeButtonClassName:u,footer:y,disableStickyFooter:v=!1,...C})=>{const F=typeof r=="number"?r:1,N=typeof c=="number"?c:1;return e.jsxs(h,{...C,onRequestClose:d,draggable:i,children:[e.jsx(j,{onRequestClose:d,header:t,headerText:o,closeButtonClassName:u}),e.jsx(s.Box,{spacing:F,indent:N,children:l}),y&&e.jsx(s.Box,{className:g.default(n.footer,{[n.stickyFooter]:!v}),children:y})]})},te=({children:t})=>e.jsx(s.Column,{indent:2,spacing:2,children:t});exports.BaseModal=h;exports.CenterModal=W;exports.DRAGGABLE_CANCEL_CLASSNAME=p;exports.DRAGGABLE_HANDLE_CLASSNAME=x;exports.Drawer=Q;exports.LoadingModal=Z;exports.Modal=ee;exports.ModalFooter=te;exports.ModalHeader=j;
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"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"}
+{"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":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stenajs-webui/modal",
-  "version": "17.13.0",
+  "version": "17.13.3",
   "description": "",
   "author": "mattias800",
   "license": "MIT",
@@ -26,9 +26,9 @@
     "deploy": "gh-pages -d example/build"
   },
   "dependencies": {
-    "@stenajs-webui/core": "17.13.0",
-    "@stenajs-webui/elements": "17.13.0",
-    "@stenajs-webui/theme": "17.13.0",
+    "@stenajs-webui/core": "17.13.3",
+    "@stenajs-webui/elements": "17.13.3",
+    "@stenajs-webui/theme": "17.13.3",
     "@types/react-modal": "^3.13.1",
     "classnames": "^2.3.1",
     "react-draggable": "^4.4.5",
@@ -58,5 +58,5 @@
   "files": [
     "dist"
   ],
-  "gitHead": "edade8e51a0c9abb4c5ab8b62af6b4e5db19ceaf"
+  "gitHead": "7192ec09f63ac6813294b4b2825a778fd53120c9"
 }