@longline/aqua-ui 1.0.295 → 1.0.299

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@longline/aqua-ui",
-  "version": "1.0.295",
+  "version": "1.0.299",
   "description": "AquaUI",
   "author": "Alexander van Oostenrijk / Longline Environment",
   "license": "Commercial",

package/services/Dialog/Dialog.d.ts

@@ -13,9 +13,10 @@ interface IDialogProps {
     open?: boolean;
     /**
      * Override standard dialog width of 600 pixels.
+     * Can be a number (pixels) or a CSS string (e.g., "90vw").
      * @default 600
      */
-    width?: number;
+    width?: number | string;
     /**
      * If set to false, then the Dialog cannot be closed by clicking
      * outside of it. This is helpful when a Dialog is executing an

package/services/Dialog/DialogWindow.d.ts

@@ -5,7 +5,7 @@ interface IProps {
     /** @ignore */
     children?: React.ReactNode;
     windowRef?: any;
-    width?: number;
+    width?: number | string;
     /**
      * Are Dialog colors inverted?
      */

package/services/Dialog/DialogWindow.js

@@ -11,6 +11,16 @@ var DialogWindowBase = React.forwardRef(function (props, ref) {
     };
     return (React.createElement("div", { className: "".concat(props.className, " ").concat(props.status), ref: ref, onKeyDown: handleKeyDown }, props.children));
 });
-var DialogWindow = styled(DialogWindowBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: fixed;\n  z-index: 3000;\n  left: 50%;\n  top: 50%;\n  transform-origin: center center;\n  border-radius: ", "px;\n  background-color: ", ";\n  box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.5);\n\n  ", "\n\n  // Font:\n  font: ", ";\n  color: ", ";  \n\n  /* Dialog window width:\n   * Narrower on small screen. */\n  width: ", "px;\n  @media (max-width: ", "px) {\n    width: ", "px;\n  }\n\n  /* useTransitionState classes */\n  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(.17,.89,.35,1.67);\n  opacity: 0;\n  &.preEnter, &.exiting {\n    opacity: 0;\n    transform: translateX(-50%) translateY(-50%) scale(0.8);\n  }\n  &.entering {\n    opacity: 1;\n    transform: translateX(-50%) translateY(-50%);\n  }\n  &.entered {\n    opacity: 1;\n    transform: translateX(-50%) translateY(-50%);\n  }\n\n"], ["\n  position: fixed;\n  z-index: 3000;\n  left: 50%;\n  top: 50%;\n  transform-origin: center center;\n  border-radius: ", "px;\n  background-color: ", ";\n  box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.5);\n\n  ", "\n\n  // Font:\n  font: ", ";\n  color: ", ";  \n\n  /* Dialog window width:\n   * Narrower on small screen. */\n  width: ", "px;\n  @media (max-width: ", "px) {\n    width: ", "px;\n  }\n\n  /* useTransitionState classes */\n  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(.17,.89,.35,1.67);\n  opacity: 0;\n  &.preEnter, &.exiting {\n    opacity: 0;\n    transform: translateX(-50%) translateY(-50%) scale(0.8);\n  }\n  &.entering {\n    opacity: 1;\n    transform: translateX(-50%) translateY(-50%);\n  }\n  &.entered {\n    opacity: 1;\n    transform: translateX(-50%) translateY(-50%);\n  }\n\n"])), function (p) { return p.theme.radius.normal; }, function (p) { return p.inverted ? p.theme.colors.primary[3] : p.theme.colors.neutral[100]; }, function (p) { return p.inverted && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    .footer {\n      background: ", ";\n    }  \n  "], ["\n    .footer {\n      background: ", ";\n    }  \n  "])), function (p) { return p.theme.colors.primary[5]; }); }, function (p) { return p.theme.font.bodyMedium; }, function (p) { return p.inverted ? p.theme.colors.neutral[100] : p.theme.colors.neutral[10]; }, function (p) { return p.width ? p.width : 600; }, function (p) { return p.theme.screen.small; }, function (p) { return p.width ? (p.width > 400 ? 400 : p.width) : 400; });
+var DialogWindow = styled(DialogWindowBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: fixed;\n  z-index: 3000;\n  left: 50%;\n  top: 50%;\n  transform-origin: center center;\n  border-radius: ", "px;\n  background-color: ", ";\n  box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.5);\n\n  ", "\n\n  // Font:\n  font: ", ";\n  color: ", ";  \n\n  /* Dialog window width:\n   * Narrower on small screen. */\n  width: ", ";\n  @media (max-width: ", "px) {\n    width: ", ";\n  }\n\n  /* useTransitionState classes */\n  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(.17,.89,.35,1.67);\n  opacity: 0;\n  &.preEnter, &.exiting {\n    opacity: 0;\n    transform: translateX(-50%) translateY(-50%) scale(0.8);\n  }\n  &.entering {\n    opacity: 1;\n    transform: translateX(-50%) translateY(-50%);\n  }\n  &.entered {\n    opacity: 1;\n    transform: translateX(-50%) translateY(-50%);\n  }\n\n"], ["\n  position: fixed;\n  z-index: 3000;\n  left: 50%;\n  top: 50%;\n  transform-origin: center center;\n  border-radius: ", "px;\n  background-color: ", ";\n  box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.5);\n\n  ", "\n\n  // Font:\n  font: ", ";\n  color: ", ";  \n\n  /* Dialog window width:\n   * Narrower on small screen. */\n  width: ", ";\n  @media (max-width: ", "px) {\n    width: ", ";\n  }\n\n  /* useTransitionState classes */\n  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(.17,.89,.35,1.67);\n  opacity: 0;\n  &.preEnter, &.exiting {\n    opacity: 0;\n    transform: translateX(-50%) translateY(-50%) scale(0.8);\n  }\n  &.entering {\n    opacity: 1;\n    transform: translateX(-50%) translateY(-50%);\n  }\n  &.entered {\n    opacity: 1;\n    transform: translateX(-50%) translateY(-50%);\n  }\n\n"])), function (p) { return p.theme.radius.normal; }, function (p) { return p.inverted ? p.theme.colors.primary[3] : p.theme.colors.neutral[100]; }, function (p) { return p.inverted && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    .footer {\n      background: ", ";\n    }  \n  "], ["\n    .footer {\n      background: ", ";\n    }  \n  "])), function (p) { return p.theme.colors.primary[5]; }); }, function (p) { return p.theme.font.bodyMedium; }, function (p) { return p.inverted ? p.theme.colors.neutral[100] : p.theme.colors.neutral[10]; }, function (p) {
+    if (!p.width)
+        return '600px';
+    return typeof p.width === 'string' ? p.width : "".concat(p.width, "px");
+}, function (p) { return p.theme.screen.small; }, function (p) {
+    if (!p.width)
+        return '400px';
+    if (typeof p.width === 'string')
+        return p.width;
+    return p.width > 400 ? '400px' : "".concat(p.width, "px");
+});
 export { DialogWindow };
 var templateObject_1, templateObject_2;