@longline/aqua-ui 1.0.25 → 1.0.27

package/containers/Form/elements/BoxWrapper.js

@@ -31,6 +31,6 @@ var BoxWrapperBase = function (props) {
         React.createElement(HintBackground, null, props.hint)));
 };
 var HintBackground = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  height: 22px;\n  border-bottom-left-radius: ", "px;\n  border-bottom-right-radius: ", "px;\n"], ["\n  position: absolute;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  height: 22px;\n  border-bottom-left-radius: ", "px;\n  border-bottom-right-radius: ", "px;\n"])), function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.radius.normal; });
-var BoxWrapper = styled(BoxWrapperBase)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  // Size:\n  position: relative;\n  box-sizing: border-box;\n  margin-bottom: 8px;\n  height: 80px;\n  \n  // Appearance:\n  border-radius: ", "px;\n  background-color: ", ";\n  border: none;\n\n  // Content:\n  display: flex;\n  align-items: center;\n  justify-content: start;\n\n  // Hint/error background:\n  ", " {\n    ", "\n  }\n\n  // Hover:\n  &:hover {\n    outline: solid 2px ", ";\n  }\n\n  &:focus-within {\n    outline: solid 2px ", ";\n  }    \n\n  ", " {\n    position: absolute;\n    left: 12px;\n    right: 12px;\n    top: 10px;\n    color: ", ";\n  }\n\n  ", " {\n    position: absolute;\n    left: 12px;\n    right: 12px;\n    bottom: 2px;\n    color: ", ";\n  }\n\n  // Error state:\n  ", "\n\n  // Disabled state:\n  ", "\n\n  // Ghost state:\n  ", "\n\n  // Fields may provide their weight in relative units to other fields.\n  ", "\n"], ["\n  // Size:\n  position: relative;\n  box-sizing: border-box;\n  margin-bottom: 8px;\n  height: 80px;\n  \n  // Appearance:\n  border-radius: ", "px;\n  background-color: ", ";\n  border: none;\n\n  // Content:\n  display: flex;\n  align-items: center;\n  justify-content: start;\n\n  // Hint/error background:\n  ", " {\n    ", "\n  }\n\n  // Hover:\n  &:hover {\n    outline: solid 2px ", ";\n  }\n\n  &:focus-within {\n    outline: solid 2px ", ";\n  }    \n\n  ", " {\n    position: absolute;\n    left: 12px;\n    right: 12px;\n    top: 10px;\n    color: ", ";\n  }\n\n  ", " {\n    position: absolute;\n    left: 12px;\n    right: 12px;\n    bottom: 2px;\n    color: ", ";\n  }\n\n  // Error state:\n  ", "\n\n  // Disabled state:\n  ", "\n\n  // Ghost state:\n  ", "\n\n  // Fields may provide their weight in relative units to other fields.\n  ", "\n"])), function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.colors.neutral[100]; }, HintBackground, function (p) { return !p.ghost && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      background: ", ";\n    "], ["\n      background: ", ";\n    "])), p.error ? p.theme.colors.negative : p.theme.colors.neutral[95]); }, function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.primary[1]; }, Label, function (p) { return p.theme.colors.primary[2]; }, Hint, function (p) { return p.error ? p.theme.colors.neutral[100] : p.theme.colors.primary[3]; }, function (p) { return p.error && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    outline: solid 2px ", ";\n    &:hover, &:focus-within {\n      outline: solid 2px ", ";\n    }\n  "], ["\n    outline: solid 2px ", ";\n    &:hover, &:focus-within {\n      outline: solid 2px ", ";\n    }\n  "])), p.theme.colors.negative, p.theme.colors.negative); }, function (p) { return p.disabled && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    user-select: none;\n    outline: solid 2px ", ";\n    background-color: ", ";\n    pointer-events: none;\n    ", " {\n      color: ", ";\n    }\n    ", " {\n      color: ", ";\n    }\n  "], ["\n    user-select: none;\n    outline: solid 2px ", ";\n    background-color: ", ";\n    pointer-events: none;\n    ", " {\n      color: ", ";\n    }\n    ", " {\n      color: ", ";\n    }\n  "])), p.theme.colors.primary[4], p.theme.colors.primary[4], Label, p.theme.colors.neutral[50], Hint, p.theme.colors.neutral[50]); }, function (p) { return p.ghost && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    outline: dashed 1px ", ";\n    background-color: transparent;\n    pointer-events: none;\n\n    ", " {\n      color: transparent;\n      text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n    }  \n    ", " {\n      color: transparent;\n      text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n    }    \n  "], ["\n    outline: dashed 1px ", ";\n    background-color: transparent;\n    pointer-events: none;\n\n    ", " {\n      color: transparent;\n      text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n    }  \n    ", " {\n      color: transparent;\n      text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n    }    \n  "])), p.theme.colors.primary[2], Label, function (p) { return p.theme.colors.primary[1]; }, Hint, function (p) { return p.theme.colors.primary[1]; }); }, function (p) { return p.weight && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["flex: ", ""], ["flex: ", ""])), p.weight); });
+var BoxWrapper = styled(BoxWrapperBase)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  // Size:\n  position: relative;\n  box-sizing: border-box;\n  margin-bottom: 8px;\n  height: 80px;\n  \n  // Appearance:\n  border-radius: ", "px;\n  background-color: ", ";\n  border: none;\n\n  // Content:\n  display: flex;\n  align-items: center;\n  justify-content: start;\n\n  // Hint/error background:\n  ", " {\n    ", "\n  }\n\n  // Hover:\n  &:hover {\n    outline: solid 2px ", ";\n  }\n\n  &:focus-within {\n    outline: solid 2px ", ";\n  }    \n\n  ", " {\n    position: absolute;\n    left: 12px;\n    right: 12px;\n    top: 10px;\n    color: ", ";\n  }\n\n  ", " {\n    position: absolute;\n    left: 12px;\n    right: 12px;\n    bottom: 2px;\n    color: ", ";\n  }\n\n  // Error state:\n  ", "\n\n  // Disabled state:\n  ", "\n\n  // Ghost state:\n  ", "\n\n  // Fields may provide their weight in relative units to other fields.\n  ", "\n"], ["\n  // Size:\n  position: relative;\n  box-sizing: border-box;\n  margin-bottom: 8px;\n  height: 80px;\n  \n  // Appearance:\n  border-radius: ", "px;\n  background-color: ", ";\n  border: none;\n\n  // Content:\n  display: flex;\n  align-items: center;\n  justify-content: start;\n\n  // Hint/error background:\n  ", " {\n    ", "\n  }\n\n  // Hover:\n  &:hover {\n    outline: solid 2px ", ";\n  }\n\n  &:focus-within {\n    outline: solid 2px ", ";\n  }    \n\n  ", " {\n    position: absolute;\n    left: 12px;\n    right: 12px;\n    top: 10px;\n    color: ", ";\n  }\n\n  ", " {\n    position: absolute;\n    left: 12px;\n    right: 12px;\n    bottom: 2px;\n    color: ", ";\n  }\n\n  // Error state:\n  ", "\n\n  // Disabled state:\n  ", "\n\n  // Ghost state:\n  ", "\n\n  // Fields may provide their weight in relative units to other fields.\n  ", "\n"])), function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.colors.neutral[100]; }, HintBackground, function (p) { return !p.ghost && !p.disabled && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      background: ", ";\n    "], ["\n      background: ", ";\n    "])), p.error ? p.theme.colors.negative : p.theme.colors.neutral[95]); }, function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.primary[1]; }, Label, function (p) { return p.theme.colors.primary[2]; }, Hint, function (p) { return p.error ? p.theme.colors.neutral[100] : p.theme.colors.primary[3]; }, function (p) { return p.error && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    outline: solid 2px ", ";\n    &:hover, &:focus-within {\n      outline: solid 2px ", ";\n    }\n  "], ["\n    outline: solid 2px ", ";\n    &:hover, &:focus-within {\n      outline: solid 2px ", ";\n    }\n  "])), p.theme.colors.negative, p.theme.colors.negative); }, function (p) { return p.disabled && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    user-select: none;\n    outline: solid 2px ", ";\n    background-color: ", ";\n    pointer-events: none;\n    ", " {\n      color: ", ";\n    }\n    ", " {\n      color: ", ";\n    }\n  "], ["\n    user-select: none;\n    outline: solid 2px ", ";\n    background-color: ", ";\n    pointer-events: none;\n    ", " {\n      color: ", ";\n    }\n    ", " {\n      color: ", ";\n    }\n  "])), p.theme.colors.primary[4], p.theme.colors.primary[4], Label, p.theme.colors.neutral[50], Hint, p.theme.colors.neutral[50]); }, function (p) { return p.ghost && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    outline: dashed 1px ", ";\n    background-color: transparent;\n    pointer-events: none;\n\n    ", " {\n      color: transparent;\n      text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n    }  \n    ", " {\n      color: transparent;\n      text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n    }    \n  "], ["\n    outline: dashed 1px ", ";\n    background-color: transparent;\n    pointer-events: none;\n\n    ", " {\n      color: transparent;\n      text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n    }  \n    ", " {\n      color: transparent;\n      text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n    }    \n  "])), p.theme.colors.primary[2], Label, function (p) { return p.theme.colors.primary[1]; }, Hint, function (p) { return p.theme.colors.primary[1]; }); }, function (p) { return p.weight && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["flex: ", ""], ["flex: ", ""])), p.weight); });
 export { BoxWrapper };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/package.json

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

package/services/Dialog/Dialog.d.ts

@@ -49,7 +49,7 @@ declare const Dialog: {
      * Dialog.Content contains main dialog body content.
      */
     Content: {
-        (props: import("./DialogContent").IProps): React.JSX.Element;
+        ({ nopadding, maxHeight, ...props }: import("./DialogContent").IProps): React.JSX.Element;
         displayName: string;
     };
     /**

package/services/Dialog/DialogContent.d.ts

@@ -12,6 +12,11 @@ interface IProps {
      * @default 70
      */
     maxHeight?: number;
+    /**
+     * If set, no padding will be added around the content.
+     * @default false
+     */
+    nopadding?: boolean;
 }
 /**
  * `Dialog.Content` is a content block for a `Dialog` component. The content
@@ -19,7 +24,7 @@ interface IProps {
  * can be adjusted with the `maxHeight` prop.
  */
 declare const DialogContent: {
-    (props: IProps): React.JSX.Element;
+    ({ nopadding, maxHeight, ...props }: IProps): React.JSX.Element;
     displayName: string;
 };
 export { DialogContent, IProps };

package/services/Dialog/DialogContent.js

@@ -13,26 +13,38 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import * as React from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 var DialogContentBase = function (props) {
     return React.createElement("div", { className: props.className }, props.children);
 };
-var DialogContentStyled = styled(DialogContentBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position:   relative;\n  padding:    0 20px 24px 20px;\n  max-height: ", "vh;\n  overflow-y: auto;  \n"], ["\n  position:   relative;\n  padding:    0 20px 24px 20px;\n  max-height: ", "vh;\n  overflow-y: auto;  \n"
+var DialogContentStyled = styled(DialogContentBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position:   relative;\n  ", "\n  max-height: ", "vh;\n  overflow-y: auto;  \n"], ["\n  position:   relative;\n  ", "\n  max-height: ", "vh;\n  overflow-y: auto;  \n"
     /**
      * `Dialog.Content` is a content block for a `Dialog` component. The content
      * will auto-scroll when it is taller than 70% of the viewport. This percentage
      * can be adjusted with the `maxHeight` prop.
      */
-])), function (p) { var _a; return (_a = p.maxHeight) !== null && _a !== void 0 ? _a : 70; });
+])), function (p) { return !p.nopadding && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["padding: 0 20px 24px 20px;"], ["padding: 0 20px 24px 20px;"]))); }, function (p) { return p.maxHeight; });
 /**
  * `Dialog.Content` is a content block for a `Dialog` component. The content
  * will auto-scroll when it is taller than 70% of the viewport. This percentage
  * can be adjusted with the `maxHeight` prop.
  */
-var DialogContent = function (props) {
-    return React.createElement(DialogContentStyled, __assign({}, props));
+var DialogContent = function (_a) {
+    var _b = _a.nopadding, nopadding = _b === void 0 ? false : _b, _c = _a.maxHeight, maxHeight = _c === void 0 ? 70 : _c, props = __rest(_a, ["nopadding", "maxHeight"]);
+    return React.createElement(DialogContentStyled, __assign({ nopadding: nopadding, maxHeight: maxHeight }, props));
 };
 DialogContent.displayName = "Dialog.Content";
 export { DialogContent };
-var templateObject_1;
+var templateObject_1, templateObject_2;