@stenajs-webui/modal 19.0.0-next.53 → 19.0.0-next.55

package/dist/index.es.js

@@ -1,21 +1,21 @@
 (function(){"use strict";try{var o=document.createElement("style");o.appendChild(document.createTextNode("._overlay_5x3op_1{--swui-modal-animation-time: var(--swui-animation-time-fast);--swui-modal-overlay-bg-color: var(--swui-overlay-bg-color);--swui-modal-content-bg-color: var(--swui-white);--swui-modal-width: 960px;--swui-modal-max-width: 100%;--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;-webkit-animation:_fadeIn_5x3op_1 var(--swui-modal-animation-time) cubic-bezier(.645,.045,.355,1) both;animation:_fadeIn_5x3op_1 var(--swui-modal-animation-time) cubic-bezier(.645,.045,.355,1) both}@media print{._overlay_5x3op_1{background-color:#fff}}._overlay_5x3op_1 ._modal_5x3op_31{max-width:100%;outline:none;pointer-events:none}@media (max-width: 768px){._overlay_5x3op_1 ._modal_5x3op_31{width:100%}}._overlay_5x3op_1 ._content_5x3op_41{position:relative;display:block;background:var(--swui-modal-content-bg-color);box-shadow:var(--swui-modal-shadow);pointer-events:all;top:calc(var(--swui-metrics-space) * 2);width:var(--swui-modal-width);max-width:var(--swui-modal-max-width)}@media (max-width: 768px){._overlay_5x3op_1 ._content_5x3op_41{top:0;width:100%;max-width:100%}}._overlay_5x3op_1 ._content_5x3op_41{-webkit-animation:_appear_5x3op_1 var(--swui-animation-time-fast) cubic-bezier(.645,.045,.355,1) both;animation:_appear_5x3op_1 var(--swui-animation-time-fast) cubic-bezier(.645,.045,.355,1) both}@media print{._overlay_5x3op_1 ._content_5x3op_41{box-shadow:none;top:0}}._overlay_5x3op_1 ._content_5x3op_41 :focus{outline:0}._overlay_5x3op_1 ._content_5x3op_41._isDraggable_5x3op_70 .draggable-modal-handle{cursor:move}._overlay_5x3op_1 ._content_5x3op_41._isDraggable_5x3op_70 .draggable-modal-handle .draggable-modal-cancel,._overlay_5x3op_1 ._content_5x3op_41._isDraggable_5x3op_70 .draggable-modal-handle [role=tooltip]{cursor:initial}@-webkit-keyframes _fadeIn_5x3op_1{0%{background-color:var(--swui-hidden)}to{background-color:var(--swui-modal-overlay-bg-color)}}@keyframes _fadeIn_5x3op_1{0%{background-color:var(--swui-hidden)}to{background-color:var(--swui-modal-overlay-bg-color)}}@-webkit-keyframes _appear_5x3op_1{0%{opacity:0}to{opacity:1}}@keyframes _appear_5x3op_1{0%{opacity:0}to{opacity:1}}._footer_5x3op_101{background-color:var(--swui-modal-content-bg-color)}._stickyFooter_5x3op_105{position:-webkit-sticky;position:sticky;bottom:0;box-shadow:var(--swui-modal-footer-shadow)}@media print{._stickyFooter_5x3op_105{position:static;box-shadow:none}}._portal_17ze5_1{--drawer-width: 370px}._portal_17ze5_1 ._overlay_17ze5_4{position:fixed;inset:0}._portal_17ze5_1 ._content_17ze5_9{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_17ze5_1 ._content_17ze5_9._floating_17ze5_15{margin:var(--swui-metrics-space);border-radius:var(--swui-border-radius)}@media (max-width: 768px){._portal_17ze5_1 ._content_17ze5_9._floating_17ze5_15{margin:0;border-radius:0}}._portal_17ze5_1 ._content_17ze5_9:focus-visible{outline:unset}._portal_17ze5_1 ._content_17ze5_9._slideFromLeft_17ze5_29,._portal_17ze5_1 ._content_17ze5_9._slideFromRight_17ze5_30{-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_17ze5_1 ._content_17ze5_9._slideFromLeft_17ze5_29._afterOpen_17ze5_36,._portal_17ze5_1 ._content_17ze5_9._slideFromRight_17ze5_30._afterOpen_17ze5_36{-webkit-transform:translateX(0);transform:translate(0)}._portal_17ze5_1 ._content_17ze5_9._slideFromLeft_17ze5_29._beforeClose_17ze5_40,._portal_17ze5_1 ._content_17ze5_9._slideFromRight_17ze5_30._beforeClose_17ze5_40{-webkit-transform:translateX(var(--translate-x-outside-screen));transform:translate(var(--translate-x-outside-screen))}._portal_17ze5_1 ._content_17ze5_9._slideFromTop_17ze5_45,._portal_17ze5_1 ._content_17ze5_9._slideFromBottom_17ze5_46{-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_17ze5_1 ._content_17ze5_9._slideFromTop_17ze5_45._afterOpen_17ze5_36,._portal_17ze5_1 ._content_17ze5_9._slideFromBottom_17ze5_46._afterOpen_17ze5_36{-webkit-transform:translateY(0);transform:translateY(0)}._portal_17ze5_1 ._content_17ze5_9._slideFromTop_17ze5_45._beforeClose_17ze5_40,._portal_17ze5_1 ._content_17ze5_9._slideFromBottom_17ze5_46._beforeClose_17ze5_40{-webkit-transform:translateY(var(--translate-y-outside-screen));transform:translateY(var(--translate-y-outside-screen))}._portal_17ze5_1 ._content_17ze5_9._slideFromLeft_17ze5_29{--translate-x-outside-screen: -100%;width:var(--drawer-width);left:0}._portal_17ze5_1 ._content_17ze5_9._slideFromRight_17ze5_30{--translate-x-outside-screen: 100%;width:var(--drawer-width);right:0}._portal_17ze5_1 ._content_17ze5_9._slideFromTop_17ze5_45{--translate-y-outside-screen: -100%;height:var(--drawer-width);top:0}._portal_17ze5_1 ._content_17ze5_9._slideFromBottom_17ze5_46{--translate-y-outside-screen: 100%;height:var(--drawer-width);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(o)}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
 import { jsx as e, jsxs as l, Fragment as y } from "react/jsx-runtime";
 import p from "react-modal";
-import B from "react-draggable";
+import I from "react-draggable";
 import h from "classnames";
-import { exhaustSwitchCase as D, Spacing as b, Row as c, Space as u, Heading as C, Column as F, Box as _, Indent as L, Txt as M } from "@stenajs-webui/core";
-import { Icon as w, FlatButton as x, stenaTimes as N, Spinner as k } from "@stenajs-webui/elements";
-import { cssColor as O } from "@stenajs-webui/theme";
-const R = "_overlay_5x3op_1", $ = "_fadeIn_5x3op_1", E = "_modal_5x3op_31", j = "_content_5x3op_41", G = "_appear_5x3op_1", H = "_isDraggable_5x3op_70", T = "_footer_5x3op_101", J = "_stickyFooter_5x3op_105", s = {
-  overlay: R,
-  fadeIn: $,
-  modal: E,
-  content: j,
-  appear: G,
-  isDraggable: H,
-  footer: T,
-  stickyFooter: J
-}, z = "draggable-modal-handle", S = "draggable-modal-cancel", K = ({
+import { exhaustSwitchCase as B, Spacing as b, Row as c, Space as u, Heading as C, Column as F, Box as _, Indent as A, Txt as D } from "@stenajs-webui/core";
+import { Icon as w, FlatButton as L, stenaTimes as M, Spinner as k, CloseButton as O } from "@stenajs-webui/elements";
+import { cssColor as R } from "@stenajs-webui/theme";
+const $ = "_overlay_5x3op_1", E = "_fadeIn_5x3op_1", j = "_modal_5x3op_31", G = "_content_5x3op_41", H = "_appear_5x3op_1", T = "_isDraggable_5x3op_70", J = "_footer_5x3op_101", K = "_stickyFooter_5x3op_105", s = {
+  overlay: $,
+  fadeIn: E,
+  modal: j,
+  content: G,
+  appear: H,
+  isDraggable: T,
+  footer: J,
+  stickyFooter: K
+}, x = "draggable-modal-handle", N = "draggable-modal-cancel", Q = ({
   width: o,
   maxWidth: t,
   draggable: n = !1,
@@ -28,10 +28,10 @@ const R = "_overlay_5x3op_1", $ = "_fadeIn_5x3op_1", E = "_modal_5x3op_31", j =
     className: s.modal,
     ...i,
     children: /* @__PURE__ */ e(
-      B,
+      I,
       {
-        handle: `.${z}`,
-        cancel: `.${S}, button, [role="tooltip"]`,
+        handle: `.${x}`,
+        cancel: `.${N}, button, [role="tooltip"]`,
         bounds: ".ReactModal__Overlay",
         disabled: !n,
         children: /* @__PURE__ */ e(
@@ -50,18 +50,18 @@ const R = "_overlay_5x3op_1", $ = "_fadeIn_5x3op_1", E = "_modal_5x3op_31", j =
       }
     )
   }
-), Q = "_portal_17ze5_1", U = "_overlay_17ze5_4", V = "_content_17ze5_9", W = "_floating_17ze5_15", X = "_slideFromLeft_17ze5_29", Y = "_slideFromRight_17ze5_30", Z = "_afterOpen_17ze5_36", q = "_beforeClose_17ze5_40", P = "_slideFromTop_17ze5_45", ee = "_slideFromBottom_17ze5_46", a = {
-  portal: Q,
-  overlay: U,
-  content: V,
-  floating: W,
-  slideFromLeft: X,
-  slideFromRight: Y,
-  afterOpen: Z,
-  beforeClose: q,
-  slideFromTop: P,
-  slideFromBottom: ee
-}, ge = ({
+), U = "_portal_17ze5_1", V = "_overlay_17ze5_4", W = "_content_17ze5_9", X = "_floating_17ze5_15", Y = "_slideFromLeft_17ze5_29", Z = "_slideFromRight_17ze5_30", q = "_afterOpen_17ze5_36", P = "_beforeClose_17ze5_40", ee = "_slideFromTop_17ze5_45", oe = "_slideFromBottom_17ze5_46", a = {
+  portal: U,
+  overlay: V,
+  content: W,
+  floating: X,
+  slideFromLeft: Y,
+  slideFromRight: Z,
+  afterOpen: q,
+  beforeClose: P,
+  slideFromTop: ee,
+  slideFromBottom: oe
+}, he = ({
   background: o,
   zIndex: t,
   children: n,
@@ -84,7 +84,7 @@ const R = "_overlay_5x3op_1", $ = "_fadeIn_5x3op_1", E = "_modal_5x3op_31", j =
       className: {
         base: h(
           a.content,
-          oe(r),
+          te(r),
           f && a.floating
         ),
         afterOpen: a.afterOpen,
@@ -96,7 +96,7 @@ const R = "_overlay_5x3op_1", $ = "_fadeIn_5x3op_1", E = "_modal_5x3op_31", j =
       children: n
     }
   );
-}, oe = (o) => {
+}, te = (o) => {
   switch (o) {
     case "left":
       return a.slideFromLeft;
@@ -107,9 +107,9 @@ const R = "_overlay_5x3op_1", $ = "_fadeIn_5x3op_1", E = "_modal_5x3op_31", j =
     case "bottom":
       return a.slideFromBottom;
     default:
-      return D(o, a.slideFromLeft);
+      return B(o, a.slideFromLeft);
   }
-}, he = ({
+}, ye = ({
   header: o,
   contentRight: t,
   onRequestClose: n,
@@ -120,7 +120,7 @@ const R = "_overlay_5x3op_1", $ = "_fadeIn_5x3op_1", E = "_modal_5x3op_31", j =
     position: "sticky",
     top: 0,
     zIndex: 100,
-    background: O("--lhds-color-ui-50"),
+    background: R("--lhds-color-ui-50"),
     children: /* @__PURE__ */ l(
       c,
       {
@@ -136,9 +136,9 @@ const R = "_overlay_5x3op_1", $ = "_fadeIn_5x3op_1", E = "_modal_5x3op_31", j =
           /* @__PURE__ */ l(c, { gap: 1, children: [
             t,
             /* @__PURE__ */ e(
-              x,
+              L,
               {
-                leftIcon: N,
+                leftIcon: M,
                 onClick: n,
                 variant: "danger"
               }
@@ -149,7 +149,7 @@ const R = "_overlay_5x3op_1", $ = "_fadeIn_5x3op_1", E = "_modal_5x3op_31", j =
       }
     )
   }
-), te = { overlay: { justifyContent: "center" } }, ye = ({
+), ne = { overlay: { justifyContent: "center" } }, ue = ({
   children: o,
   ...t
 }) => /* @__PURE__ */ e(
@@ -157,7 +157,7 @@ const R = "_overlay_5x3op_1", $ = "_fadeIn_5x3op_1", E = "_modal_5x3op_31", j =
   {
     overlayClassName: s.overlay,
     className: s.modal,
-    style: te,
+    style: ne,
     ...t,
     children: /* @__PURE__ */ e(
       "div",
@@ -168,10 +168,10 @@ const R = "_overlay_5x3op_1", $ = "_fadeIn_5x3op_1", E = "_modal_5x3op_31", j =
       }
     )
   }
-), ne = "_modal_4fwgb_1", ae = "_overlay_4fwgb_13", v = {
-  modal: ne,
-  overlay: ae
-}, ue = ({
+), ae = "_modal_4fwgb_1", re = "_overlay_4fwgb_13", v = {
+  modal: ae,
+  overlay: re
+}, ve = ({
   headerIconLeft: o,
   headerText: t,
   ...n
@@ -201,14 +201,14 @@ const R = "_overlay_5x3op_1", $ = "_fadeIn_5x3op_1", E = "_modal_5x3op_31", j =
         /* @__PURE__ */ l(c, { indent: 2, children: [
           o && /* @__PURE__ */ l(y, { children: [
             /* @__PURE__ */ e(w, { size: 14, icon: o, color: "white" }),
-            /* @__PURE__ */ e(L, {})
+            /* @__PURE__ */ e(A, {})
           ] }),
           t && /* @__PURE__ */ e(C, { variant: "h4", color: "white", children: t })
         ] })
       ] })
     ] })
   }
-), re = ({
+), le = ({
   onRequestClose: o,
   header: t,
   headerText: n,
@@ -219,24 +219,22 @@ const R = "_overlay_5x3op_1", $ = "_fadeIn_5x3op_1", E = "_modal_5x3op_31", j =
     spacing: 2,
     indent: 2,
     borderBottom: "1px solid var(--swui-modal-header-border-color)",
-    className: z,
+    className: x,
     children: [
       /* @__PURE__ */ l(c, { flex: 1, indent: !0, alignItems: "center", children: [
-        n && /* @__PURE__ */ e(M, { className: S, size: "large", children: n }),
+        n && /* @__PURE__ */ e(D, { className: N, size: "large", children: n }),
         t
       ] }),
       /* @__PURE__ */ e(_, { alignSelf: "flex-start", children: /* @__PURE__ */ e(
-        x,
+        O,
         {
           className: r,
-          onClick: o,
-          "aria-label": "Close",
-          leftIcon: N
+          onClick: o
         }
       ) })
     ]
   }
-), ve = ({
+), be = ({
   header: o,
   headerText: t,
   children: n,
@@ -246,11 +244,11 @@ const R = "_overlay_5x3op_1", $ = "_fadeIn_5x3op_1", E = "_modal_5x3op_31", j =
   onRequestClose: d,
   closeButtonClassName: g,
   footer: m,
-  disableStickyFooter: I = !1,
-  ...A
-}) => /* @__PURE__ */ l(K, { ...A, onRequestClose: d, draggable: f, children: [
+  disableStickyFooter: z = !1,
+  ...S
+}) => /* @__PURE__ */ l(Q, { ...S, onRequestClose: d, draggable: f, children: [
   /* @__PURE__ */ e(
-    re,
+    le,
     {
       onRequestClose: d,
       header: o,
@@ -263,22 +261,22 @@ const R = "_overlay_5x3op_1", $ = "_fadeIn_5x3op_1", E = "_modal_5x3op_31", j =
     _,
     {
       className: h(s.footer, {
-        [s.stickyFooter]: !I
+        [s.stickyFooter]: !z
       }),
       children: m
     }
   )
-] }), be = ({ children: o }) => /* @__PURE__ */ e(F, { indent: 2, spacing: 2, children: o });
+] }), Ce = ({ children: o }) => /* @__PURE__ */ e(F, { indent: 2, spacing: 2, children: o });
 export {
-  K as BaseModal,
-  ye as CenterModal,
-  S as DRAGGABLE_CANCEL_CLASSNAME,
-  z as DRAGGABLE_HANDLE_CLASSNAME,
-  ge as Drawer,
-  he as DrawerHeader,
-  ue as LoadingModal,
-  ve as Modal,
-  be as ModalFooter,
-  re as ModalHeader
+  Q as BaseModal,
+  ue as CenterModal,
+  N as DRAGGABLE_CANCEL_CLASSNAME,
+  x as DRAGGABLE_HANDLE_CLASSNAME,
+  he as Drawer,
+  ye as DrawerHeader,
+  ve as LoadingModal,
+  be as Modal,
+  Ce as ModalFooter,
+  le 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/drawer/DrawerHeader.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  maxWidth?: 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  maxWidth,\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={{\n            [\"--swui-modal-width\" as string]: width,\n            [\"--swui-modal-max-width\" as string]: maxWidth,\n          }}\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\n  /**\n   * When true, there will be a gap between the drawer and the viewport.\n   */\n  floating?: boolean;\n\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  floating,\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(\n          styles.content,\n          getClassNameForSlide(slideFrom),\n          floating && styles.floating\n        ),\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 { ReactNode } from \"react\";\nimport { Heading, Row, Space, Spacing } from \"@stenajs-webui/core\";\nimport { FlatButton, Icon, stenaTimes } from \"@stenajs-webui/elements\";\nimport { IconDefinition } from \"@fortawesome/fontawesome-svg-core\";\nimport { cssColor } from \"@stenajs-webui/theme\";\n\nexport interface DrawerHeaderProps {\n  onRequestClose: () => void;\n  header?: string;\n  contentRight?: ReactNode;\n  icon?: IconDefinition;\n}\n\nexport const DrawerHeader: React.FC<DrawerHeaderProps> = ({\n  header,\n  contentRight,\n  onRequestClose,\n  icon,\n}) => {\n  return (\n    <Spacing\n      position={\"sticky\"}\n      top={0}\n      zIndex={100}\n      background={cssColor(\"--lhds-color-ui-50\")}\n    >\n      <Row\n        justifyContent={\"space-between\"}\n        alignItems={\"center\"}\n        height={\"48px\"}\n      >\n        <Row alignItems={\"center\"} gap={2}>\n          <Space num={1} />\n          {icon && <Icon icon={icon} size={24} />}\n          <Heading variant={\"h4\"}>{header}</Heading>\n        </Row>\n        <Row gap={1}>\n          {contentRight}\n          <FlatButton\n            leftIcon={stenaTimes}\n            onClick={onRequestClose}\n            variant={\"danger\"}\n          />\n          <Space num={0.5} />\n        </Row>\n      </Row>\n    </Spacing>\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","maxWidth","draggable","children","reactModalProps","jsx","ReactModal","styles","Draggable","cx","Drawer","background","zIndex","slideFrom","portalTarget","floating","height","getClassNameForSlide","exhaustSwitchCase","DrawerHeader","header","contentRight","onRequestClose","icon","Spacing","cssColor","jsxs","Row","Space","Icon","Heading","FlatButton","stenaTimes","style","CenterModal","LoadingModal","headerIconLeft","headerText","modalProps","Column","Box","Spinner","Fragment","Indent","ModalHeader","closeButtonClassName","Txt","Modal","spacing","indent","footer","disableStickyFooter","props","ModalFooter"],"mappings":"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"}
+{"version":3,"file":"index.es.js","sources":["../src/components/modal/BaseModal.tsx","../src/components/drawer/Drawer.tsx","../src/components/drawer/DrawerHeader.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  maxWidth?: 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  maxWidth,\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={{\n            [\"--swui-modal-width\" as string]: width,\n            [\"--swui-modal-max-width\" as string]: maxWidth,\n          }}\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\n  /**\n   * When true, there will be a gap between the drawer and the viewport.\n   */\n  floating?: boolean;\n\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  floating,\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(\n          styles.content,\n          getClassNameForSlide(slideFrom),\n          floating && styles.floating\n        ),\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 { ReactNode } from \"react\";\nimport { Heading, Row, Space, Spacing } from \"@stenajs-webui/core\";\nimport { FlatButton, Icon, stenaTimes } from \"@stenajs-webui/elements\";\nimport { IconDefinition } from \"@fortawesome/fontawesome-svg-core\";\nimport { cssColor } from \"@stenajs-webui/theme\";\n\nexport interface DrawerHeaderProps {\n  onRequestClose: () => void;\n  header?: string;\n  contentRight?: ReactNode;\n  icon?: IconDefinition;\n}\n\nexport const DrawerHeader: React.FC<DrawerHeaderProps> = ({\n  header,\n  contentRight,\n  onRequestClose,\n  icon,\n}) => {\n  return (\n    <Spacing\n      position={\"sticky\"}\n      top={0}\n      zIndex={100}\n      background={cssColor(\"--lhds-color-ui-50\")}\n    >\n      <Row\n        justifyContent={\"space-between\"}\n        alignItems={\"center\"}\n        height={\"48px\"}\n      >\n        <Row alignItems={\"center\"} gap={2}>\n          <Space num={1} />\n          {icon && <Icon icon={icon} size={24} />}\n          <Heading variant={\"h4\"}>{header}</Heading>\n        </Row>\n        <Row gap={1}>\n          {contentRight}\n          <FlatButton\n            leftIcon={stenaTimes}\n            onClick={onRequestClose}\n            variant={\"danger\"}\n          />\n          <Space num={0.5} />\n        </Row>\n      </Row>\n    </Spacing>\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 { CloseButton } 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        <CloseButton\n          className={closeButtonClassName}\n          onClick={onRequestClose}\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","maxWidth","draggable","children","reactModalProps","jsx","ReactModal","styles","Draggable","cx","Drawer","background","zIndex","slideFrom","portalTarget","floating","height","getClassNameForSlide","exhaustSwitchCase","DrawerHeader","header","contentRight","onRequestClose","icon","Spacing","cssColor","jsxs","Row","Space","Icon","Heading","FlatButton","stenaTimes","style","CenterModal","LoadingModal","headerIconLeft","headerText","modalProps","Column","Box","Spinner","Fragment","Indent","ModalHeader","closeButtonClassName","Txt","CloseButton","Modal","spacing","indent","footer","disableStickyFooter","props","ModalFooter"],"mappings":"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"}

package/dist/index.js

@@ -1,3 +1,3 @@
 (function(){"use strict";try{var o=document.createElement("style");o.appendChild(document.createTextNode("._overlay_5x3op_1{--swui-modal-animation-time: var(--swui-animation-time-fast);--swui-modal-overlay-bg-color: var(--swui-overlay-bg-color);--swui-modal-content-bg-color: var(--swui-white);--swui-modal-width: 960px;--swui-modal-max-width: 100%;--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;-webkit-animation:_fadeIn_5x3op_1 var(--swui-modal-animation-time) cubic-bezier(.645,.045,.355,1) both;animation:_fadeIn_5x3op_1 var(--swui-modal-animation-time) cubic-bezier(.645,.045,.355,1) both}@media print{._overlay_5x3op_1{background-color:#fff}}._overlay_5x3op_1 ._modal_5x3op_31{max-width:100%;outline:none;pointer-events:none}@media (max-width: 768px){._overlay_5x3op_1 ._modal_5x3op_31{width:100%}}._overlay_5x3op_1 ._content_5x3op_41{position:relative;display:block;background:var(--swui-modal-content-bg-color);box-shadow:var(--swui-modal-shadow);pointer-events:all;top:calc(var(--swui-metrics-space) * 2);width:var(--swui-modal-width);max-width:var(--swui-modal-max-width)}@media (max-width: 768px){._overlay_5x3op_1 ._content_5x3op_41{top:0;width:100%;max-width:100%}}._overlay_5x3op_1 ._content_5x3op_41{-webkit-animation:_appear_5x3op_1 var(--swui-animation-time-fast) cubic-bezier(.645,.045,.355,1) both;animation:_appear_5x3op_1 var(--swui-animation-time-fast) cubic-bezier(.645,.045,.355,1) both}@media print{._overlay_5x3op_1 ._content_5x3op_41{box-shadow:none;top:0}}._overlay_5x3op_1 ._content_5x3op_41 :focus{outline:0}._overlay_5x3op_1 ._content_5x3op_41._isDraggable_5x3op_70 .draggable-modal-handle{cursor:move}._overlay_5x3op_1 ._content_5x3op_41._isDraggable_5x3op_70 .draggable-modal-handle .draggable-modal-cancel,._overlay_5x3op_1 ._content_5x3op_41._isDraggable_5x3op_70 .draggable-modal-handle [role=tooltip]{cursor:initial}@-webkit-keyframes _fadeIn_5x3op_1{0%{background-color:var(--swui-hidden)}to{background-color:var(--swui-modal-overlay-bg-color)}}@keyframes _fadeIn_5x3op_1{0%{background-color:var(--swui-hidden)}to{background-color:var(--swui-modal-overlay-bg-color)}}@-webkit-keyframes _appear_5x3op_1{0%{opacity:0}to{opacity:1}}@keyframes _appear_5x3op_1{0%{opacity:0}to{opacity:1}}._footer_5x3op_101{background-color:var(--swui-modal-content-bg-color)}._stickyFooter_5x3op_105{position:-webkit-sticky;position:sticky;bottom:0;box-shadow:var(--swui-modal-footer-shadow)}@media print{._stickyFooter_5x3op_105{position:static;box-shadow:none}}._portal_17ze5_1{--drawer-width: 370px}._portal_17ze5_1 ._overlay_17ze5_4{position:fixed;inset:0}._portal_17ze5_1 ._content_17ze5_9{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_17ze5_1 ._content_17ze5_9._floating_17ze5_15{margin:var(--swui-metrics-space);border-radius:var(--swui-border-radius)}@media (max-width: 768px){._portal_17ze5_1 ._content_17ze5_9._floating_17ze5_15{margin:0;border-radius:0}}._portal_17ze5_1 ._content_17ze5_9:focus-visible{outline:unset}._portal_17ze5_1 ._content_17ze5_9._slideFromLeft_17ze5_29,._portal_17ze5_1 ._content_17ze5_9._slideFromRight_17ze5_30{-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_17ze5_1 ._content_17ze5_9._slideFromLeft_17ze5_29._afterOpen_17ze5_36,._portal_17ze5_1 ._content_17ze5_9._slideFromRight_17ze5_30._afterOpen_17ze5_36{-webkit-transform:translateX(0);transform:translate(0)}._portal_17ze5_1 ._content_17ze5_9._slideFromLeft_17ze5_29._beforeClose_17ze5_40,._portal_17ze5_1 ._content_17ze5_9._slideFromRight_17ze5_30._beforeClose_17ze5_40{-webkit-transform:translateX(var(--translate-x-outside-screen));transform:translate(var(--translate-x-outside-screen))}._portal_17ze5_1 ._content_17ze5_9._slideFromTop_17ze5_45,._portal_17ze5_1 ._content_17ze5_9._slideFromBottom_17ze5_46{-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_17ze5_1 ._content_17ze5_9._slideFromTop_17ze5_45._afterOpen_17ze5_36,._portal_17ze5_1 ._content_17ze5_9._slideFromBottom_17ze5_46._afterOpen_17ze5_36{-webkit-transform:translateY(0);transform:translateY(0)}._portal_17ze5_1 ._content_17ze5_9._slideFromTop_17ze5_45._beforeClose_17ze5_40,._portal_17ze5_1 ._content_17ze5_9._slideFromBottom_17ze5_46._beforeClose_17ze5_40{-webkit-transform:translateY(var(--translate-y-outside-screen));transform:translateY(var(--translate-y-outside-screen))}._portal_17ze5_1 ._content_17ze5_9._slideFromLeft_17ze5_29{--translate-x-outside-screen: -100%;width:var(--drawer-width);left:0}._portal_17ze5_1 ._content_17ze5_9._slideFromRight_17ze5_30{--translate-x-outside-screen: 100%;width:var(--drawer-width);right:0}._portal_17ze5_1 ._content_17ze5_9._slideFromTop_17ze5_45{--translate-y-outside-screen: -100%;height:var(--drawer-width);top:0}._portal_17ze5_1 ._content_17ze5_9._slideFromBottom_17ze5_46{--translate-y-outside-screen: 100%;height:var(--drawer-width);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(o)}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),N=require("react-modal"),M=require("react-draggable"),S=require("classnames"),o=require("@stenajs-webui/core"),i=require("@stenajs-webui/elements"),A=require("@stenajs-webui/theme"),x=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},_=x(N),L=x(M),g=x(S),R="_overlay_5x3op_1",B="_fadeIn_5x3op_1",D="_modal_5x3op_31",z="_content_5x3op_41",I="_appear_5x3op_1",E="_isDraggable_5x3op_70",O="_footer_5x3op_101",k="_stickyFooter_5x3op_105",r={overlay:R,fadeIn:B,modal:D,content:z,appear:I,isDraggable:E,footer:O,stickyFooter:k},p="draggable-modal-handle",h="draggable-modal-cancel",y=({width:t,maxWidth:s,draggable:a=!1,children:l,...c})=>e.jsx(_.default,{overlayClassName:r.overlay,className:r.modal,...c,children:e.jsx(L.default,{handle:`.${p}`,cancel:`.${h}, button, [role="tooltip"]`,bounds:".ReactModal__Overlay",disabled:!a,children:e.jsx("div",{style:{["--swui-modal-width"]:t,["--swui-modal-max-width"]:s},className:g.default(r.content,{[r.isDraggable]:a}),children:l})})}),G="_portal_17ze5_1",H="_overlay_17ze5_4",$="_content_17ze5_9",q="_floating_17ze5_15",T="_slideFromLeft_17ze5_29",J="_slideFromRight_17ze5_30",K="_afterOpen_17ze5_36",P="_beforeClose_17ze5_40",Q="_slideFromTop_17ze5_45",U="_slideFromBottom_17ze5_46",n={portal:G,overlay:H,content:$,floating:q,slideFromLeft:T,slideFromRight:J,afterOpen:K,beforeClose:P,slideFromTop:Q,slideFromBottom:U},V=({background:t,zIndex:s,children:a,slideFrom:l="left",portalTarget:c,floating:u,...d})=>{const{height:f,width:m}=d;return e.jsx(_.default,{closeTimeoutMS:250,portalClassName:n.portal,overlayClassName:{base:n.overlay,afterOpen:n.afterOpen,beforeClose:n.beforeClose},className:{base:g.default(n.content,W(l),u&&n.floating),afterOpen:n.afterOpen,beforeClose:n.beforeClose},style:{content:{width:m,height:f,background:t},overlay:{zIndex:s}},parentSelector:c?()=>c:void 0,...d,children:a})},W=t=>{switch(t){case"left":return n.slideFromLeft;case"right":return n.slideFromRight;case"top":return n.slideFromTop;case"bottom":return n.slideFromBottom;default:return o.exhaustSwitchCase(t,n.slideFromLeft)}},X=({header:t,contentRight:s,onRequestClose:a,icon:l})=>e.jsx(o.Spacing,{position:"sticky",top:0,zIndex:100,background:A.cssColor("--lhds-color-ui-50"),children:e.jsxs(o.Row,{justifyContent:"space-between",alignItems:"center",height:"48px",children:[e.jsxs(o.Row,{alignItems:"center",gap:2,children:[e.jsx(o.Space,{num:1}),l&&e.jsx(i.Icon,{icon:l,size:24}),e.jsx(o.Heading,{variant:"h4",children:t})]}),e.jsxs(o.Row,{gap:1,children:[s,e.jsx(i.FlatButton,{leftIcon:i.stenaTimes,onClick:a,variant:"danger"}),e.jsx(o.Space,{num:.5})]})]})}),Y={overlay:{justifyContent:"center"}},Z=({children:t,...s})=>e.jsx(_.default,{overlayClassName:r.overlay,className:r.modal,style:Y,...s,children:e.jsx("div",{className:r.content,style:{["--swui-modal-width"]:"fit-content"},children:t})}),ee="_modal_4fwgb_1",te="_overlay_4fwgb_13",j={modal:ee,overlay:te},oe=({headerIconLeft:t,headerText:s,...a})=>e.jsx(_.default,{...a,isOpen:!0,className:j.modal,overlayClassName:j.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(i.Spinner,{size:"small"})}),(t||s)&&e.jsxs(e.Fragment,{children:[e.jsx(o.Spacing,{}),e.jsxs(o.Row,{indent:2,children:[t&&e.jsxs(e.Fragment,{children:[e.jsx(i.Icon,{size:14,icon:t,color:"white"}),e.jsx(o.Indent,{})]}),s&&e.jsx(o.Heading,{variant:"h4",color:"white",children:s})]})]})]})}),b=({onRequestClose:t,header:s,headerText:a,closeButtonClassName:l})=>e.jsxs(o.Row,{spacing:2,indent:2,borderBottom:"1px solid var(--swui-modal-header-border-color)",className:p,children:[e.jsxs(o.Row,{flex:1,indent:!0,alignItems:"center",children:[a&&e.jsx(o.Txt,{className:h,size:"large",children:a}),s]}),e.jsx(o.Box,{alignSelf:"flex-start",children:e.jsx(i.FlatButton,{className:l,onClick:t,"aria-label":"Close",leftIcon:i.stenaTimes})})]}),se=({header:t,headerText:s,children:a,spacing:l,indent:c,draggable:u=!1,onRequestClose:d,closeButtonClassName:f,footer:m,disableStickyFooter:C=!1,...v})=>{const w=typeof l=="number"?l:1,F=typeof c=="number"?c:1;return e.jsxs(y,{...v,onRequestClose:d,draggable:u,children:[e.jsx(b,{onRequestClose:d,header:t,headerText:s,closeButtonClassName:f}),e.jsx(o.Box,{spacing:w,indent:F,children:a}),m&&e.jsx(o.Box,{className:g.default(r.footer,{[r.stickyFooter]:!C}),children:m})]})},ae=({children:t})=>e.jsx(o.Column,{indent:2,spacing:2,children:t});exports.BaseModal=y;exports.CenterModal=Z;exports.DRAGGABLE_CANCEL_CLASSNAME=h;exports.DRAGGABLE_HANDLE_CLASSNAME=p;exports.Drawer=V;exports.DrawerHeader=X;exports.LoadingModal=oe;exports.Modal=se;exports.ModalFooter=ae;exports.ModalHeader=b;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),N=require("react-modal"),M=require("react-draggable"),S=require("classnames"),t=require("@stenajs-webui/core"),i=require("@stenajs-webui/elements"),A=require("@stenajs-webui/theme"),x=o=>o&&typeof o=="object"&&"default"in o?o:{default:o},_=x(N),L=x(M),g=x(S),R="_overlay_5x3op_1",B="_fadeIn_5x3op_1",D="_modal_5x3op_31",z="_content_5x3op_41",E="_appear_5x3op_1",I="_isDraggable_5x3op_70",O="_footer_5x3op_101",k="_stickyFooter_5x3op_105",r={overlay:R,fadeIn:B,modal:D,content:z,appear:E,isDraggable:I,footer:O,stickyFooter:k},p="draggable-modal-handle",h="draggable-modal-cancel",y=({width:o,maxWidth:s,draggable:a=!1,children:l,...c})=>e.jsx(_.default,{overlayClassName:r.overlay,className:r.modal,...c,children:e.jsx(L.default,{handle:`.${p}`,cancel:`.${h}, button, [role="tooltip"]`,bounds:".ReactModal__Overlay",disabled:!a,children:e.jsx("div",{style:{["--swui-modal-width"]:o,["--swui-modal-max-width"]:s},className:g.default(r.content,{[r.isDraggable]:a}),children:l})})}),G="_portal_17ze5_1",H="_overlay_17ze5_4",$="_content_17ze5_9",q="_floating_17ze5_15",T="_slideFromLeft_17ze5_29",J="_slideFromRight_17ze5_30",K="_afterOpen_17ze5_36",P="_beforeClose_17ze5_40",Q="_slideFromTop_17ze5_45",U="_slideFromBottom_17ze5_46",n={portal:G,overlay:H,content:$,floating:q,slideFromLeft:T,slideFromRight:J,afterOpen:K,beforeClose:P,slideFromTop:Q,slideFromBottom:U},V=({background:o,zIndex:s,children:a,slideFrom:l="left",portalTarget:c,floating:u,...d})=>{const{height:f,width:m}=d;return e.jsx(_.default,{closeTimeoutMS:250,portalClassName:n.portal,overlayClassName:{base:n.overlay,afterOpen:n.afterOpen,beforeClose:n.beforeClose},className:{base:g.default(n.content,W(l),u&&n.floating),afterOpen:n.afterOpen,beforeClose:n.beforeClose},style:{content:{width:m,height:f,background:o},overlay:{zIndex:s}},parentSelector:c?()=>c:void 0,...d,children:a})},W=o=>{switch(o){case"left":return n.slideFromLeft;case"right":return n.slideFromRight;case"top":return n.slideFromTop;case"bottom":return n.slideFromBottom;default:return t.exhaustSwitchCase(o,n.slideFromLeft)}},X=({header:o,contentRight:s,onRequestClose:a,icon:l})=>e.jsx(t.Spacing,{position:"sticky",top:0,zIndex:100,background:A.cssColor("--lhds-color-ui-50"),children:e.jsxs(t.Row,{justifyContent:"space-between",alignItems:"center",height:"48px",children:[e.jsxs(t.Row,{alignItems:"center",gap:2,children:[e.jsx(t.Space,{num:1}),l&&e.jsx(i.Icon,{icon:l,size:24}),e.jsx(t.Heading,{variant:"h4",children:o})]}),e.jsxs(t.Row,{gap:1,children:[s,e.jsx(i.FlatButton,{leftIcon:i.stenaTimes,onClick:a,variant:"danger"}),e.jsx(t.Space,{num:.5})]})]})}),Y={overlay:{justifyContent:"center"}},Z=({children:o,...s})=>e.jsx(_.default,{overlayClassName:r.overlay,className:r.modal,style:Y,...s,children:e.jsx("div",{className:r.content,style:{["--swui-modal-width"]:"fit-content"},children:o})}),ee="_modal_4fwgb_1",oe="_overlay_4fwgb_13",j={modal:ee,overlay:oe},te=({headerIconLeft:o,headerText:s,...a})=>e.jsx(_.default,{...a,isOpen:!0,className:j.modal,overlayClassName:j.overlay,children:e.jsxs(t.Column,{spacing:2,alignItems:"center",children:[e.jsx(t.Box,{alignItems:"center",justifyContent:"center",width:"64px",height:"64px",borderRadius:"50%",background:"white",shadow:"modal",children:e.jsx(i.Spinner,{size:"small"})}),(o||s)&&e.jsxs(e.Fragment,{children:[e.jsx(t.Spacing,{}),e.jsxs(t.Row,{indent:2,children:[o&&e.jsxs(e.Fragment,{children:[e.jsx(i.Icon,{size:14,icon:o,color:"white"}),e.jsx(t.Indent,{})]}),s&&e.jsx(t.Heading,{variant:"h4",color:"white",children:s})]})]})]})}),b=({onRequestClose:o,header:s,headerText:a,closeButtonClassName:l})=>e.jsxs(t.Row,{spacing:2,indent:2,borderBottom:"1px solid var(--swui-modal-header-border-color)",className:p,children:[e.jsxs(t.Row,{flex:1,indent:!0,alignItems:"center",children:[a&&e.jsx(t.Txt,{className:h,size:"large",children:a}),s]}),e.jsx(t.Box,{alignSelf:"flex-start",children:e.jsx(i.CloseButton,{className:l,onClick:o})})]}),se=({header:o,headerText:s,children:a,spacing:l,indent:c,draggable:u=!1,onRequestClose:d,closeButtonClassName:f,footer:m,disableStickyFooter:C=!1,...v})=>{const w=typeof l=="number"?l:1,F=typeof c=="number"?c:1;return e.jsxs(y,{...v,onRequestClose:d,draggable:u,children:[e.jsx(b,{onRequestClose:d,header:o,headerText:s,closeButtonClassName:f}),e.jsx(t.Box,{spacing:w,indent:F,children:a}),m&&e.jsx(t.Box,{className:g.default(r.footer,{[r.stickyFooter]:!C}),children:m})]})},ae=({children:o})=>e.jsx(t.Column,{indent:2,spacing:2,children:o});exports.BaseModal=y;exports.CenterModal=Z;exports.DRAGGABLE_CANCEL_CLASSNAME=h;exports.DRAGGABLE_HANDLE_CLASSNAME=p;exports.Drawer=V;exports.DrawerHeader=X;exports.LoadingModal=te;exports.Modal=se;exports.ModalFooter=ae;exports.ModalHeader=b;
 //# 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/drawer/DrawerHeader.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  maxWidth?: 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  maxWidth,\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={{\n            [\"--swui-modal-width\" as string]: width,\n            [\"--swui-modal-max-width\" as string]: maxWidth,\n          }}\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\n  /**\n   * When true, there will be a gap between the drawer and the viewport.\n   */\n  floating?: boolean;\n\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  floating,\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(\n          styles.content,\n          getClassNameForSlide(slideFrom),\n          floating && styles.floating\n        ),\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 { ReactNode } from \"react\";\nimport { Heading, Row, Space, Spacing } from \"@stenajs-webui/core\";\nimport { FlatButton, Icon, stenaTimes } from \"@stenajs-webui/elements\";\nimport { IconDefinition } from \"@fortawesome/fontawesome-svg-core\";\nimport { cssColor } from \"@stenajs-webui/theme\";\n\nexport interface DrawerHeaderProps {\n  onRequestClose: () => void;\n  header?: string;\n  contentRight?: ReactNode;\n  icon?: IconDefinition;\n}\n\nexport const DrawerHeader: React.FC<DrawerHeaderProps> = ({\n  header,\n  contentRight,\n  onRequestClose,\n  icon,\n}) => {\n  return (\n    <Spacing\n      position={\"sticky\"}\n      top={0}\n      zIndex={100}\n      background={cssColor(\"--lhds-color-ui-50\")}\n    >\n      <Row\n        justifyContent={\"space-between\"}\n        alignItems={\"center\"}\n        height={\"48px\"}\n      >\n        <Row alignItems={\"center\"} gap={2}>\n          <Space num={1} />\n          {icon && <Icon icon={icon} size={24} />}\n          <Heading variant={\"h4\"}>{header}</Heading>\n        </Row>\n        <Row gap={1}>\n          {contentRight}\n          <FlatButton\n            leftIcon={stenaTimes}\n            onClick={onRequestClose}\n            variant={\"danger\"}\n          />\n          <Space num={0.5} />\n        </Row>\n      </Row>\n    </Spacing>\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","maxWidth","draggable","children","reactModalProps","jsx","ReactModal","styles","Draggable","cx","Drawer","background","zIndex","slideFrom","portalTarget","floating","height","getClassNameForSlide","exhaustSwitchCase","DrawerHeader","header","contentRight","onRequestClose","icon","Spacing","cssColor","jsxs","Row","Space","Icon","Heading","FlatButton","stenaTimes","style","CenterModal","LoadingModal","headerIconLeft","headerText","modalProps","Column","Box","Spinner","Fragment","Indent","ModalHeader","closeButtonClassName","Txt","Modal","spacing","indent","footer","disableStickyFooter","props","activeSpacing","activeIndent","ModalFooter"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../src/components/modal/BaseModal.tsx","../src/components/drawer/Drawer.tsx","../src/components/drawer/DrawerHeader.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  maxWidth?: 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  maxWidth,\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={{\n            [\"--swui-modal-width\" as string]: width,\n            [\"--swui-modal-max-width\" as string]: maxWidth,\n          }}\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\n  /**\n   * When true, there will be a gap between the drawer and the viewport.\n   */\n  floating?: boolean;\n\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  floating,\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(\n          styles.content,\n          getClassNameForSlide(slideFrom),\n          floating && styles.floating\n        ),\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 { ReactNode } from \"react\";\nimport { Heading, Row, Space, Spacing } from \"@stenajs-webui/core\";\nimport { FlatButton, Icon, stenaTimes } from \"@stenajs-webui/elements\";\nimport { IconDefinition } from \"@fortawesome/fontawesome-svg-core\";\nimport { cssColor } from \"@stenajs-webui/theme\";\n\nexport interface DrawerHeaderProps {\n  onRequestClose: () => void;\n  header?: string;\n  contentRight?: ReactNode;\n  icon?: IconDefinition;\n}\n\nexport const DrawerHeader: React.FC<DrawerHeaderProps> = ({\n  header,\n  contentRight,\n  onRequestClose,\n  icon,\n}) => {\n  return (\n    <Spacing\n      position={\"sticky\"}\n      top={0}\n      zIndex={100}\n      background={cssColor(\"--lhds-color-ui-50\")}\n    >\n      <Row\n        justifyContent={\"space-between\"}\n        alignItems={\"center\"}\n        height={\"48px\"}\n      >\n        <Row alignItems={\"center\"} gap={2}>\n          <Space num={1} />\n          {icon && <Icon icon={icon} size={24} />}\n          <Heading variant={\"h4\"}>{header}</Heading>\n        </Row>\n        <Row gap={1}>\n          {contentRight}\n          <FlatButton\n            leftIcon={stenaTimes}\n            onClick={onRequestClose}\n            variant={\"danger\"}\n          />\n          <Space num={0.5} />\n        </Row>\n      </Row>\n    </Spacing>\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 { CloseButton } 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        <CloseButton\n          className={closeButtonClassName}\n          onClick={onRequestClose}\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","maxWidth","draggable","children","reactModalProps","jsx","ReactModal","styles","Draggable","cx","Drawer","background","zIndex","slideFrom","portalTarget","floating","height","getClassNameForSlide","exhaustSwitchCase","DrawerHeader","header","contentRight","onRequestClose","icon","Spacing","cssColor","jsxs","Row","Space","Icon","Heading","FlatButton","stenaTimes","style","CenterModal","LoadingModal","headerIconLeft","headerText","modalProps","Column","Box","Spinner","Fragment","Indent","ModalHeader","closeButtonClassName","Txt","CloseButton","Modal","spacing","indent","footer","disableStickyFooter","props","activeSpacing","activeIndent","ModalFooter"],"mappings":"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"}

package/package.json

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