intergalactic 15.129.0 → 15.130.0

package/modal/lib/esm/Modal.mjs

@@ -1,196 +1,229 @@
-import f from "@babel/runtime/helpers/esm/objectSpread2";
-import S from "@babel/runtime/helpers/esm/classCallCheck";
-import P from "@babel/runtime/helpers/esm/createClass";
-import g from "@babel/runtime/helpers/esm/assertThisInitialized";
-import k from "@babel/runtime/helpers/esm/inherits";
-import j from "@babel/runtime/helpers/esm/createSuper";
-import d from "@babel/runtime/helpers/esm/defineProperty";
-import { sstyled as T } from 'intergalactic/utils/lib/core/index';
-import E, { assignProps as u, Component as O, sstyled as w } from 'intergalactic/core';
-import l from "react";
-import { Slide as I, FadeInOut as W } from 'intergalactic/animation';
-import z, { PortalProvider as M } from 'intergalactic/portal';
-import C from 'intergalactic/button';
-import D from 'intergalactic/outside-click';
-import R from 'intergalactic/icon/Close/l';
-import h from 'intergalactic/utils/lib/fire';
-import A from 'intergalactic/utils/lib/use/usePreventScroll';
-import { isAdvanceMode as $ } from 'intergalactic/utils/lib/findComponent';
-import H from 'intergalactic/utils/lib/enhances/keyboardFocusEnhance';
-import { localizedMessages as x } from "./translations/__intergalactic-dynamic-locales.mjs";
-import N from 'intergalactic/utils/lib/enhances/i18nEnhance';
-import { Text as F } from 'intergalactic/typography';
-import K from 'intergalactic/utils/lib/uniqueID';
-import { cssVariableEnhance as Z } from 'intergalactic/utils/lib/useCssVariable';
-import { useFocusLock as q } from 'intergalactic/utils/lib/use/useFocusLock';
-import { useContextTheme as B } from 'intergalactic/utils/lib/ThemeProvider';
-import { useColorResolver as L } from 'intergalactic/utils/lib/use/useColorResolver';
-import { ZIndexStackingContextProvider as V, useZIndexStacking as G } from 'intergalactic/utils/lib/zIndexStacking';
-var J = (
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { sstyled } from 'intergalactic/utils/lib/core/index';
+import createComponent, { assignProps, Component, sstyled as sstyled$1 } from 'intergalactic/core';
+import React from "react";
+import { Slide, FadeInOut } from 'intergalactic/animation';
+import Portal, { PortalProvider } from 'intergalactic/portal';
+import Button from 'intergalactic/button';
+import OutsideClick from 'intergalactic/outside-click';
+import CloseIcon from 'intergalactic/icon/Close/l';
+import fire from 'intergalactic/utils/lib/fire';
+import usePreventScroll from 'intergalactic/utils/lib/use/usePreventScroll';
+import { isAdvanceMode } from 'intergalactic/utils/lib/findComponent';
+import keyboardFocusEnhance from 'intergalactic/utils/lib/enhances/keyboardFocusEnhance';
+import { localizedMessages } from "./translations/__intergalactic-dynamic-locales.mjs";
+import i18nEnhance from 'intergalactic/utils/lib/enhances/i18nEnhance';
+import { Text } from 'intergalactic/typography';
+import uniqueIDEnhancement from 'intergalactic/utils/lib/uniqueID';
+import { cssVariableEnhance } from 'intergalactic/utils/lib/useCssVariable';
+import { useFocusLock } from 'intergalactic/utils/lib/use/useFocusLock';
+import { useContextTheme } from 'intergalactic/utils/lib/ThemeProvider';
+import { useColorResolver } from 'intergalactic/utils/lib/use/useColorResolver';
+import { ZIndexStackingContextProvider, useZIndexStacking } from 'intergalactic/utils/lib/zIndexStacking';
+/*!__reshadow-styles__:"./style/modal.shadow.css"*/
+var style = (
   /*__reshadow_css_start__*/
-  (T.insert(
+  (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SWindow_wwtaj_gg_{position:relative;border-radius:var(--intergalactic-modal-rounded, 12px);background:var(--intergalactic-bg-primary-neutral, #ffffff);box-sizing:border-box;margin:auto;padding:var(--intergalactic-spacing-10x, 40px);box-shadow:var(--intergalactic-box-shadow-modal, 0px 3px 8px 0px rgba(25, 27, 35, 0.2));color:var(--intergalactic-text-primary, #191b23)}.___SWindow_wwtaj_gg_:focus{outline:0}.___SWindow_wwtaj_gg_ .___STitle_wwtaj_gg_{color:var(--intergalactic-text-primary, #191b23);font-size:var(--intergalactic-fs-500, 24px);line-height:var(--intergalactic-lh-500, 117%);font-weight:var(--intergalactic-semi-bold, 600);margin-bottom:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-4x, 16px)}.___SWindow_wwtaj_gg_ .___STitle_wwtaj_gg_.__color_wwtaj_gg_{color:var(--color_wwtaj)}.___SWindow_wwtaj_gg_ .___SClose_wwtaj_gg_{display:inline-flex;position:absolute;right:var(--intergalactic-spacing-2x, 8px);top:var(--intergalactic-spacing-2x, 8px)}.___SWindow_wwtaj_gg_ .___SClose_wwtaj_gg_.__ghost_wwtaj_gg_{right:0;top:0}.___SWindow_wwtaj_gg_.__ghost_wwtaj_gg_{background:0 0;padding:0;box-shadow:none}.___SOverlay_wwtaj_gg_{position:fixed;top:0;bottom:0;left:0;right:0;margin:0;display:flex;justify-content:center;align-items:center;padding:var(--intergalactic-spacing-10x, 40px);background:var(--intergalactic-overlay-primary, rgba(25, 27, 35, 0.7));overflow:auto;-webkit-overflow-scrolling:touch}.___SOverlay_wwtaj_gg_ .___SOverlay_wwtaj_gg_{background:var(--intergalactic-overlay-secondary, rgba(25, 27, 35, 0.4))}@media (max-width:767px){.___SWindow_wwtaj_gg_{min-width:60%}.___SOverlay_wwtaj_gg_{padding:var(--intergalactic-spacing-3x, 12px)}}",
-    "wwtaj_gg_"
-  ), {
-    __SWindow: "___SWindow_wwtaj_gg_",
-    _ghost: "__ghost_wwtaj_gg_",
-    __SOverlay: "___SOverlay_wwtaj_gg_",
-    __STitle: "___STitle_wwtaj_gg_",
-    _color: "__color_wwtaj_gg_",
-    "--color": "--color_wwtaj",
-    __SClose: "___SClose_wwtaj_gg_"
+    ".___SWindow_1os05_gg_{position:relative;border-radius:var(--intergalactic-modal-rounded, 12px);background:var(--intergalactic-bg-primary-neutral, #ffffff);box-sizing:border-box;margin:auto;padding:var(--intergalactic-spacing-10x, 40px);box-shadow:var(--intergalactic-box-shadow-modal, 0px 3px 8px 0px rgba(25, 27, 35, 0.2));color:var(--intergalactic-text-primary, #191b23)}.___SWindow_1os05_gg_:focus{outline:0}.___SWindow_1os05_gg_ .___STitle_1os05_gg_{color:var(--intergalactic-text-primary, #191b23);font-size:var(--intergalactic-fs-500, 24px);line-height:var(--intergalactic-lh-500, 117%);font-weight:var(--intergalactic-semi-bold, 600);margin-bottom:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-4x, 16px)}.___SWindow_1os05_gg_ .___STitle_1os05_gg_.__color_1os05_gg_{color:var(--color_1os05)}.___SWindow_1os05_gg_ .___SClose_1os05_gg_{display:inline-flex;position:absolute;right:var(--intergalactic-spacing-2x, 8px);top:var(--intergalactic-spacing-2x, 8px)}.___SWindow_1os05_gg_ .___SClose_1os05_gg_.__ghost_1os05_gg_{right:0;top:0}.___SWindow_1os05_gg_.__ghost_1os05_gg_{background:0 0;padding:0;box-shadow:none}.___SOverlay_1os05_gg_{position:fixed;top:0;bottom:0;left:0;right:0;margin:0;display:flex;justify-content:center;align-items:center;padding:var(--intergalactic-spacing-10x, 40px);background:var(--intergalactic-overlay-primary, rgba(25, 27, 35, 0.7));overflow:auto;-webkit-overflow-scrolling:touch}.___SOverlay_1os05_gg_ .___SOverlay_1os05_gg_{background:var(--intergalactic-overlay-secondary, rgba(25, 27, 35, 0.4))}@media (max-width:767px){.___SWindow_1os05_gg_{min-width:60%}.___SOverlay_1os05_gg_{padding:var(--intergalactic-spacing-3x, 12px)}}",
+    /*__inner_css_end__*/
+    "1os05_gg_"
+  ), /*__reshadow_css_end__*/
+  {
+    "__SWindow": "___SWindow_1os05_gg_",
+    "_ghost": "__ghost_1os05_gg_",
+    "__SOverlay": "___SOverlay_1os05_gg_",
+    "__STitle": "___STitle_1os05_gg_",
+    "_color": "__color_1os05_gg_",
+    "--color": "--color_1os05",
+    "__SClose": "___SClose_1os05_gg_"
   })
-), v = /* @__PURE__ */ function(r) {
-  k(a, r);
-  var c = j(a);
-  function a() {
-    var n;
-    S(this, a);
-    for (var e = arguments.length, i = new Array(e), t = 0; t < e; t++)
-      i[t] = arguments[t];
-    return n = c.call.apply(c, [this].concat(i)), d(g(n), "state", {
-      hasTitle: !1
-    }), d(g(n), "handleKeyDown", function(o) {
-      o.key === "Escape" && (o.stopPropagation(), h(g(n), "onClose", "onEscape", o));
-    }), d(g(n), "handleIconCloseClick", function(o) {
-      h(g(n), "onClose", "onCloseClick", o);
-    }), d(g(n), "handleOutsideClick", function(o) {
-      h(g(n), "onClose", "onOutsideClick", o);
-    }), n;
+);
+var ModalRoot = /* @__PURE__ */ function(_Component) {
+  _inherits(ModalRoot2, _Component);
+  var _super = _createSuper(ModalRoot2);
+  function ModalRoot2() {
+    var _this;
+    _classCallCheck(this, ModalRoot2);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      hasTitle: false
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function(e) {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        fire(_assertThisInitialized(_this), "onClose", "onEscape", e);
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleIconCloseClick", function(e) {
+      fire(_assertThisInitialized(_this), "onClose", "onCloseClick", e);
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleOutsideClick", function(e) {
+      fire(_assertThisInitialized(_this), "onClose", "onOutsideClick", e);
+    });
+    return _this;
   }
-  return P(a, [{
+  _createClass(ModalRoot2, [{
     key: "getOverlayProps",
-    value: function() {
-      var e = this.asProps, i = e.duration, t = e.visible, o = e.animationsDisabled, s = e.disablePreventScroll;
+    value: function getOverlayProps() {
+      var _this$asProps = this.asProps, duration = _this$asProps.duration, visible = _this$asProps.visible, animationsDisabled = _this$asProps.animationsDisabled, disablePreventScroll = _this$asProps.disablePreventScroll;
       return {
-        duration: i,
-        visible: t,
+        duration,
+        visible,
         onOutsideClick: this.handleOutsideClick,
-        animationsDisabled: o,
-        disablePreventScroll: s
+        animationsDisabled,
+        disablePreventScroll
       };
     }
   }, {
     key: "getWindowProps",
-    value: function() {
-      var e = this.asProps, i = e.visible, t = e.closable, o = e.getI18nText, s = e.uid, _ = e.duration, p = e.animationsDisabled, b = this.state.hasTitle;
+    value: function getWindowProps() {
+      var _this$asProps2 = this.asProps, visible = _this$asProps2.visible, closable = _this$asProps2.closable, getI18nText = _this$asProps2.getI18nText, uid = _this$asProps2.uid, duration = _this$asProps2.duration, animationsDisabled = _this$asProps2.animationsDisabled;
+      var hasTitle = this.state.hasTitle;
       return {
-        visible: i,
-        closable: t,
+        visible,
+        closable,
         onKeyDown: this.handleKeyDown,
-        "aria-label": b ? void 0 : o("title"),
-        "aria-labelledby": b ? "igc-".concat(s, "-title") : void 0,
-        duration: _,
-        animationsDisabled: p
+        "aria-label": hasTitle ? void 0 : getI18nText("title"),
+        "aria-labelledby": hasTitle ? "igc-".concat(uid, "-title") : void 0,
+        duration,
+        animationsDisabled
       };
     }
   }, {
     key: "getCloseProps",
-    value: function() {
-      var e = this.asProps, i = e.getI18nText, t = e.ghost;
+    value: function getCloseProps() {
+      var _this$asProps3 = this.asProps, getI18nText = _this$asProps3.getI18nText, ghost = _this$asProps3.ghost;
       return {
         onClick: this.handleIconCloseClick,
-        getI18nText: i,
-        ghost: t
+        getI18nText,
+        ghost
       };
     }
   }, {
     key: "getTitleProps",
-    value: function() {
-      var e = this, i = this.asProps.uid, t = function() {
-        return e.setState({
-          hasTitle: !0
+    value: function getTitleProps() {
+      var _this2 = this;
+      var uid = this.asProps.uid;
+      var setHasTitle = function setHasTitle2() {
+        return _this2.setState({
+          hasTitle: true
         });
       };
       return {
-        id: "igc-".concat(i, "-title"),
-        setHasTitle: t
+        id: "igc-".concat(uid, "-title"),
+        setHasTitle
       };
     }
   }, {
     key: "render",
-    value: function() {
-      var e = this.asProps, i = this.asProps, t = i.Children, o = i.disablePortal, s = i.forcedAdvancedMode, _ = i.ignorePortalsStacking, p = s || $(t, [m.Overlay.displayName, m.Window.displayName]);
-      return /* @__PURE__ */ l.createElement(z, {
-        disablePortal: o,
-        ignorePortalsStacking: _
-      }, p ? /* @__PURE__ */ l.createElement(t, null) : /* @__PURE__ */ l.createElement(m.Overlay, null, /* @__PURE__ */ l.createElement(m.Window, u({}, e))));
+    value: function render() {
+      var _ref = this.asProps;
+      var _this$asProps4 = this.asProps, Children = _this$asProps4.Children, disablePortal = _this$asProps4.disablePortal, forcedAdvancedMode = _this$asProps4.forcedAdvancedMode, ignorePortalsStacking = _this$asProps4.ignorePortalsStacking;
+      var advancedMode = forcedAdvancedMode || isAdvanceMode(Children, [Modal.Overlay.displayName, Modal.Window.displayName]);
+      return /* @__PURE__ */ React.createElement(Portal, {
+        disablePortal,
+        ignorePortalsStacking
+      }, advancedMode ? /* @__PURE__ */ React.createElement(Children, null) : /* @__PURE__ */ React.createElement(Modal.Overlay, null, /* @__PURE__ */ React.createElement(Modal.Window, assignProps({}, _ref))));
     }
-  }]), a;
-}(O);
-d(v, "displayName", "Modal");
-d(v, "style", J);
-d(v, "enhance", [N(x), K(), Z({
+  }]);
+  return ModalRoot2;
+}(Component);
+_defineProperty(ModalRoot, "displayName", "Modal");
+_defineProperty(ModalRoot, "style", style);
+_defineProperty(ModalRoot, "enhance", [i18nEnhance(localizedMessages), uniqueIDEnhancement(), cssVariableEnhance({
   variable: "--intergalactic-duration-modal",
   fallback: "200",
   map: Number.parseInt,
   prop: "duration"
 })]);
-d(v, "defaultProps", {
-  closable: !0,
-  i18n: x,
+_defineProperty(ModalRoot, "defaultProps", {
+  closable: true,
+  i18n: localizedMessages,
   locale: "en",
-  disablePreventScroll: !1
+  disablePreventScroll: false
 });
-function Q(r) {
-  var c = arguments[0], a, n = I, e = r.Children, i = r.styles, t = r.visible, o = r.closable, s = r.duration, _ = l.useRef(null);
-  return q(_, !0, "auto", !t, !0), a = w(i), /* @__PURE__ */ l.createElement(n, a.cn("SWindow", f({}, u({
-    initialAnimation: !0,
-    slideOrigin: "top",
-    visible: t,
-    role: "dialog",
-    "aria-modal": !0,
-    duration: s,
-    ref: _
-  }, c))), /* @__PURE__ */ l.createElement(V, a.cn("ZIndexStackingContextProvider", {
-    designToken: "z-index-modal"
-  }), /* @__PURE__ */ l.createElement(M, a.cn("PortalProvider", {
-    value: _
-  }), o && /* @__PURE__ */ l.createElement(m.Close, null), /* @__PURE__ */ l.createElement(e, a.cn("Children", {})))));
+function Window(props) {
+  var _ref2 = arguments[0], _ref6;
+  var SWindow = Slide;
+  var Children = props.Children, styles = props.styles, visible = props.visible, closable = props.closable, duration = props.duration;
+  var windowRef = React.useRef(null);
+  useFocusLock(windowRef, true, "auto", !visible, true);
+  return _ref6 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SWindow, _ref6.cn("SWindow", _objectSpread({}, assignProps({
+    "initialAnimation": true,
+    "slideOrigin": "top",
+    "visible": visible,
+    "role": "dialog",
+    "aria-modal": true,
+    "duration": duration,
+    "ref": windowRef
+  }, _ref2))), /* @__PURE__ */ React.createElement(ZIndexStackingContextProvider, _ref6.cn("ZIndexStackingContextProvider", {
+    "designToken": "z-index-modal"
+  }), /* @__PURE__ */ React.createElement(PortalProvider, _ref6.cn("PortalProvider", {
+    "value": windowRef
+  }), closable && /* @__PURE__ */ React.createElement(Modal.Close, null), /* @__PURE__ */ React.createElement(Children, _ref6.cn("Children", {})))));
 }
-function U(r) {
-  var c = arguments[0], a, n = W, e = r.Children, i = r.styles, t = r.onOutsideClick, o = r.visible, s = l.useRef(null);
-  A(o, r.disablePreventScroll), B(s, o);
-  var _ = G("z-index-modal");
-  return a = w(i), /* @__PURE__ */ l.createElement(n, a.cn("SOverlay", f({}, u({
-    ref: s,
-    zIndex: _
-  }, c))), /* @__PURE__ */ l.createElement(D, a.cn("OutsideClick", {
-    root: s,
-    onOutsideClick: t
-  }), /* @__PURE__ */ l.createElement(e, a.cn("Children", {}))));
+function Overlay(props) {
+  var _ref3 = arguments[0], _ref7;
+  var SOverlay = FadeInOut;
+  var Children = props.Children, styles = props.styles, onOutsideClick = props.onOutsideClick, visible = props.visible;
+  var overlayRef = React.useRef(null);
+  usePreventScroll(visible, props.disablePreventScroll);
+  useContextTheme(overlayRef, visible);
+  var zIndex = useZIndexStacking("z-index-modal");
+  return _ref7 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SOverlay, _ref7.cn("SOverlay", _objectSpread({}, assignProps({
+    "ref": overlayRef,
+    "zIndex": zIndex
+  }, _ref3))), /* @__PURE__ */ React.createElement(OutsideClick, _ref7.cn("OutsideClick", {
+    "root": overlayRef,
+    "onOutsideClick": onOutsideClick
+  }), /* @__PURE__ */ React.createElement(Children, _ref7.cn("Children", {}))));
 }
-function y(r) {
-  var c = arguments[0], a, n = C, e = r.Children, i = r.children, t = r.getI18nText, o = r.ghost;
-  return a = w(r.styles), /* @__PURE__ */ l.createElement(n, a.cn("SClose", f({}, u({
-    use: "tertiary",
-    size: "l",
-    theme: o ? "invert" : "muted",
-    "aria-label": t("close")
-  }, c))), i ? /* @__PURE__ */ l.createElement(e, a.cn("Children", {})) : /* @__PURE__ */ l.createElement(C.Addon, {
+function Close(props) {
+  var _ref4 = arguments[0], _ref8;
+  var SClose = Button;
+  var Children = props.Children, hasChildren = props.children, getI18nText = props.getI18nText, ghost = props.ghost;
+  return _ref8 = sstyled$1(props.styles), /* @__PURE__ */ React.createElement(SClose, _ref8.cn("SClose", _objectSpread({}, assignProps({
+    "use": "tertiary",
+    "size": "l",
+    "theme": ghost ? "invert" : "muted",
+    "aria-label": getI18nText("close")
+  }, _ref4))), hasChildren ? /* @__PURE__ */ React.createElement(Children, _ref8.cn("Children", {})) : /* @__PURE__ */ React.createElement(Button.Addon, {
     ml: "7px",
     mr: "7px"
-  }, /* @__PURE__ */ l.createElement(R, a.cn("CloseIcon", {
-    title: t("close")
+  }, /* @__PURE__ */ React.createElement(CloseIcon, _ref8.cn("CloseIcon", {
+    "title": getI18nText("close")
   }))));
 }
-y.enhance = [H()];
-function X(r) {
-  var c = arguments[0], a, n = r.setHasTitle, e = r.styles, i = r.color, t = F, o = L();
-  return l.useEffect(function() {
-    return n();
-  }), a = w(e), /* @__PURE__ */ l.createElement(t, a.cn("STitle", f({}, u({
-    tag: "h2",
-    "use:color": o(i)
-  }, c))));
+Close.enhance = [keyboardFocusEnhance()];
+function Title(props) {
+  var _ref5 = arguments[0], _ref9;
+  var setHasTitle = props.setHasTitle, styles = props.styles, color = props.color;
+  var STitle = Text;
+  var resolveColor = useColorResolver();
+  React.useEffect(function() {
+    return setHasTitle();
+  });
+  return _ref9 = sstyled$1(styles), /* @__PURE__ */ React.createElement(STitle, _ref9.cn("STitle", _objectSpread({}, assignProps({
+    "tag": "h2",
+    "use:color": resolveColor(color)
+  }, _ref5))));
 }
-var m = E(v, {
-  Window: Q,
-  Overlay: U,
-  Close: y,
-  Title: X
+var Modal = createComponent(ModalRoot, {
+  Window,
+  Overlay,
+  Close,
+  Title
 });
 export {
-  m as default
+  Modal as default
 };

package/modal/lib/esm/index.mjs

@@ -1,4 +1,4 @@
-import { default as o } from "./Modal.mjs";
+import { default as default2 } from "./Modal.mjs";
 export {
-  o as default
+  default2 as default
 };

package/modal/lib/esm/style/modal.shadow.css

@@ -0,0 +1,74 @@
+SWindow {
+  position: relative;
+  border-radius: var(--intergalactic-modal-rounded, 12px);
+  background: var(--intergalactic-bg-primary-neutral, #ffffff);
+  box-sizing: border-box;
+  margin: auto;
+  padding: var(--intergalactic-spacing-10x, 40px);
+  box-shadow: var(--intergalactic-box-shadow-modal, 0px 3px 8px 0px rgba(25, 27, 35, 0.2));
+  color: var(--intergalactic-text-primary, #191b23);
+
+  &:focus {
+    outline: none;
+  }
+
+  STitle {
+    color: var(--intergalactic-text-primary, #191b23);
+    font-size: var(--intergalactic-fs-500, 24px);
+    line-height: var(--intergalactic-lh-500, 117%);
+    font-weight: var(--intergalactic-semi-bold, 600);
+    margin-bottom: var(--intergalactic-spacing-2x, 8px);
+    margin-right: var(--intergalactic-spacing-4x, 16px);
+  }
+
+  STitle[color] {
+    color: var(--color)
+  }
+
+  SClose {
+    display: inline-flex;
+    position: absolute;
+    right: var(--intergalactic-spacing-2x, 8px);
+    top: var(--intergalactic-spacing-2x, 8px);
+  }
+  SClose[ghost] {
+    right: 0;
+    top: 0;
+  }
+}
+
+SWindow[ghost] {
+  background: transparent;
+  padding: 0;
+  box-shadow: none;
+}
+
+SOverlay {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: var(--intergalactic-spacing-10x, 40px);
+  background: var(--intergalactic-overlay-primary, rgba(25, 27, 35, 0.7));
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+
+  & SOverlay {
+    background: var(--intergalactic-overlay-secondary, rgba(25, 27, 35, 0.4));
+  }
+}
+
+@media (max-width: 767px) {
+  SWindow {
+    min-width: 60%;
+  }
+
+  SOverlay {
+    padding: var(--intergalactic-spacing-3x, 12px);
+  }
+}

package/modal/lib/esm/translations/__intergalactic-dynamic-locales.mjs

@@ -1,33 +1,33 @@
-import r from "./de.json.mjs";
-import o from "./en.json.mjs";
-import m from "./es.json.mjs";
-import t from "./fr.json.mjs";
-import i from "./it.json.mjs";
-import p from "./ja.json.mjs";
-import f from "./ko.json.mjs";
-import e from "./nl.json.mjs";
-import s from "./pt.json.mjs";
-import a from "./tr.json.mjs";
-import l from "./vi.json.mjs";
-import v from "./zh.json.mjs";
-import d from "./pl.json.mjs";
-import n from "./sv.json.mjs";
-var B = {
-  de: r,
-  en: o,
-  es: m,
-  fr: t,
-  it: i,
-  ja: p,
-  ko: f,
-  nl: e,
-  pt: s,
-  tr: a,
-  vi: l,
-  zh: v,
-  pl: d,
-  sv: n
+import de from "./de.json.mjs";
+import en from "./en.json.mjs";
+import es from "./es.json.mjs";
+import fr from "./fr.json.mjs";
+import it from "./it.json.mjs";
+import ja from "./ja.json.mjs";
+import ko from "./ko.json.mjs";
+import nl from "./nl.json.mjs";
+import pt from "./pt.json.mjs";
+import tr from "./tr.json.mjs";
+import vi from "./vi.json.mjs";
+import zh from "./zh.json.mjs";
+import pl from "./pl.json.mjs";
+import sv from "./sv.json.mjs";
+var localizedMessages = {
+  de,
+  en,
+  es,
+  fr,
+  it,
+  ja,
+  ko,
+  nl,
+  pt,
+  tr,
+  vi,
+  zh,
+  pl,
+  sv
 };
 export {
-  B as localizedMessages
+  localizedMessages
 };

package/modal/lib/esm/translations/de.json.mjs

@@ -1,9 +1,11 @@
-const e = "Dialogfenster", t = "Schließen", l = {
-  title: e,
-  close: t
+const title = "Dialogfenster";
+const close = "Schließen";
+const de = {
+  title,
+  close
 };
 export {
-  t as close,
-  l as default,
-  e as title
+  close,
+  de as default,
+  title
 };

package/modal/lib/esm/translations/en.json.mjs

@@ -1,9 +1,11 @@
-const o = "Modal window", t = "Close", e = {
-  title: o,
-  close: t
+const title = "Modal window";
+const close = "Close";
+const en = {
+  title,
+  close
 };
 export {
-  t as close,
-  e as default,
-  o as title
+  close,
+  en as default,
+  title
 };

package/modal/lib/esm/translations/es.json.mjs

@@ -1,9 +1,11 @@
-const t = "Ventana modal", e = "Cerrar", o = {
-  title: t,
-  close: e
+const title = "Ventana modal";
+const close = "Cerrar";
+const es = {
+  title,
+  close
 };
 export {
-  e as close,
-  o as default,
-  t as title
+  close,
+  es as default,
+  title
 };

package/modal/lib/esm/translations/fr.json.mjs

@@ -1,9 +1,11 @@
-const e = "Fenêtre modale", t = "Fermer", o = {
-  title: e,
-  close: t
+const title = "Fenêtre modale";
+const close = "Fermer";
+const fr = {
+  title,
+  close
 };
 export {
-  t as close,
-  o as default,
-  e as title
+  close,
+  fr as default,
+  title
 };

package/modal/lib/esm/translations/it.json.mjs

@@ -1,9 +1,11 @@
-const t = "Finestra modale", e = "Chiudi", o = {
-  title: t,
-  close: e
+const title = "Finestra modale";
+const close = "Chiudi";
+const it = {
+  title,
+  close
 };
 export {
-  e as close,
-  o as default,
-  t as title
+  close,
+  it as default,
+  title
 };

package/modal/lib/esm/translations/ja.json.mjs

@@ -1,9 +1,11 @@
-const t = "モーダルウィンドウ", e = "閉じる", o = {
-  title: t,
-  close: e
+const title = "モーダルウィンドウ";
+const close = "閉じる";
+const ja = {
+  title,
+  close
 };
 export {
-  e as close,
-  o as default,
-  t as title
+  close,
+  ja as default,
+  title
 };