@decisiv/ui-components 2.0.1-alpha.19 → 2.0.1-alpha.191

package/lib/components/Modal/components.d.ts

@@ -4,11 +4,206 @@ export declare const Overlay: import("styled-components").StyledComponent<"div",
 }, never>;
 export declare const Body: import("styled-components").StyledComponent<"div", any, {
     size?: "XS" | "SM" | "MD" | "LG" | "XL" | undefined;
+    widthSize: "normal" | "extraLarge" | undefined;
 }, never>;
 export declare const ScrollYBox: import("styled-components").StyledComponent<"div", any, {
     size?: "XS" | "SM" | "MD" | "LG" | "XL" | undefined;
 }, never>;
-export declare const Header: import("styled-components").StyledComponent<"div", any, import("../Flex").FlexComponentProps, never>;
+export declare const Header: import("styled-components").StyledComponent<"div", any, Partial<{
+    readonly alignContent?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly alignItems?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly alignSelf?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly flex?: string | number | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("react").ReactText, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly flexBasis?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly flexDirection?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").FlexDirectionProperty, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly flexGrow?: number | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").GlobalsNumber, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly flexShrink?: number | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").GlobalsNumber, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly flexWrap?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "nowrap" | "wrap" | "wrap-reverse" | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").FlexWrapProperty, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly justifyContent?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly justifyItems?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly justifySelf?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly order?: number | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").GlobalsNumber, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly size?: "XS" | "SM" | "MD" | "LG" | "XL" | undefined;
+}> & Partial<{
+    readonly margin: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly marginBottom: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly marginLeft: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly marginRight: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly marginTop: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly marginX: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly marginY: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly padding: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly paddingBottom: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly paddingLeft: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly paddingRight: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly paddingTop: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly paddingX: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly paddingY: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+}> & {
+    flexDirection: string;
+}, "flexDirection">;
 export declare const CloseButtonContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Content: import("styled-components").StyledComponent<"div", any, Partial<{
     readonly alignContent?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
@@ -46,7 +241,7 @@ export declare const Content: import("styled-components").StyledComponent<"div",
         readonly LG: "LG";
         readonly XL: "XL";
     }> | undefined;
-    readonly flexDirection?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "column" | "column-reverse" | "row" | "row-reverse" | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").FlexDirectionProperty, {
+    readonly flexDirection?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").FlexDirectionProperty, {
         readonly XS: "XS";
         readonly SM: "SM";
         readonly MD: "MD";
@@ -241,7 +436,7 @@ export declare const Footer: import("styled-components").StyledComponent<"div",
         readonly LG: "LG";
         readonly XL: "XL";
     }> | undefined;
-    readonly flexDirection?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "column" | "column-reverse" | "row" | "row-reverse" | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").FlexDirectionProperty, {
+    readonly flexDirection?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").FlexDirectionProperty, {
         readonly XS: "XS";
         readonly SM: "SM";
         readonly MD: "MD";
@@ -400,4 +595,5 @@ export declare const Footer: import("styled-components").StyledComponent<"div",
 }> & {
     hasIcon?: boolean | undefined;
 }, never>;
+export declare const ActionWrapper: import("styled-components").StyledComponent<"div", any, import("../Flex").FlexComponentProps, never>;
 //# sourceMappingURL=components.d.ts.map

package/lib/components/Modal/components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/components.tsx"],"names":[],"mappings":";AAwCA,eAAO,MAAM,OAAO;;SASnB,CAAC;AAEF,eAAO,MAAM,IAAI;;SA6BhB,CAAC;AAEF,eAAO,MAAM,UAAU;;SAetB,CAAC;AAEF,eAAO,MAAM,MAAM,sGAAiB,CAAC;AAErC,eAAO,MAAM,oBAAoB,oEAIhC,CAAC;AAEF,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAOnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAoBlB,CAAC"}
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/components.tsx"],"names":[],"mappings":";AAaA,eAAO,MAAM,OAAO;;SASnB,CAAC;AAEF,eAAO,MAAM,IAAI;;;SAuChB,CAAC;AAEF,eAAO,MAAM,UAAU;;SAgBtB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAAoD,CAAC;AAExE,eAAO,MAAM,oBAAoB,oEAIhC,CAAC;AAEF,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAKnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAoBlB,CAAC;AAEF,eAAO,MAAM,aAAa,sGAkBzB,CAAC"}

package/lib/components/Modal/components.js

@@ -3,10 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Footer = exports.Content = exports.CloseButtonContainer = exports.Header = exports.ScrollYBox = exports.Body = exports.Overlay = void 0;
+exports.ActionWrapper = exports.Footer = exports.Content = exports.CloseButtonContainer = exports.Header = exports.ScrollYBox = exports.Body = exports.Overlay = void 0;
 
 var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
 
+var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
+
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _breakpointObserver = require("@decisiv/breakpoint-observer");
@@ -23,23 +25,6 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function withIcon() {
-  return (0, _styledComponents.css)(["", ";"], (0, _dynamicModifiers.applyDynamicModifiers)('hasIcon', function (_ref) {
-    var hasIcon = _ref.hasIcon,
-        size = _ref.size;
-
-    if (hasIcon) {
-      if (size === _breakpointObserver.sizes.XS) {
-        return (0, _styledComponents.css)(["padding-left:", "px;"], _designTokens.spacing.base * 2 + 42);
-      }
-
-      return (0, _styledComponents.css)(["padding-left:", "px;"], _designTokens.spacing.base * 3 + 42);
-    }
-
-    return '';
-  }));
-}
-
 var Overlay = _styledComponents.default.div.withConfig({
   displayName: "components__Overlay",
   componentId: "zcog99-0"
@@ -50,17 +35,19 @@ exports.Overlay = Overlay;
 var Body = _styledComponents.default.div.withConfig({
   displayName: "components__Body",
   componentId: "zcog99-1"
-})(["background:", ";border-radius:2px;box-shadow:0 1px 4px ", ";margin:40px auto;max-height:calc(100% - 80px);max-width:650px;overflow:hidden;padding-bottom:75px;position:relative;width:100%;", ";"], (0, _toColorString.default)(_designTokens.color.base.snowWhite), (0, _toColorString.default)(_designTokens.color.shadow.light.default), (0, _styleModifiers.when)('size', _breakpointObserver.sizes.XS, (0, _styledComponents.css)(["border-radius:0;bottom:0;left:0;margin:0;max-height:100%;overflow:hidden;position:fixed;right:0;top:0;"])));
+})(["background:", ";border-radius:2px;box-shadow:0 1px 4px ", ";margin:40px auto;max-height:calc(100% - 80px);max-width:650px;overflow:hidden;padding-bottom:75px;position:relative;width:100%;", ";", ""], (0, _toColorString.default)(_designTokens.color.base.snowWhite), (0, _toColorString.default)(_designTokens.color.shadow.light.default), (0, _styleModifiers.when)('size', _breakpointObserver.sizes.XS, (0, _styledComponents.css)(["border-radius:0;bottom:0;left:0;margin:0;max-height:100%;overflow:hidden;position:fixed;right:0;top:0;padding-bottom:0;"])), (0, _styleModifiers.when)('widthSize', 'extraLarge', (0, _styledComponents.css)(["max-width:", ";"], (0, _rem.default)(_designTokens.spacing.base * 90))));
 
 exports.Body = Body;
 
 var ScrollYBox = _styledComponents.default.div.withConfig({
   displayName: "components__ScrollYBox",
   componentId: "zcog99-2"
-})(["overflow-y:auto;position:relative;height:100%;max-height:calc(100vh - 150px);", ";"], (0, _styleModifiers.when)('size', _breakpointObserver.sizes.XS, (0, _styledComponents.css)(["max-height:calc(100vh - 70px);"])));
+})(["width:100%;overflow-y:auto;position:relative;height:100%;max-height:calc(100vh - 150px);", ";"], (0, _styleModifiers.when)('size', _breakpointObserver.sizes.XS, (0, _styledComponents.css)(["max-height:calc(100vh - 70px);"])));
 
 exports.ScrollYBox = ScrollYBox;
-var Header = (0, _styledComponents.default)(_Flex.default).withConfig({
+var Header = (0, _styledComponents.default)(_Flex.default).attrs({
+  flexDirection: 'column'
+}).withConfig({
   displayName: "components__Header",
   componentId: "zcog99-3"
 })([""]);
@@ -75,10 +62,15 @@ exports.CloseButtonContainer = CloseButtonContainer;
 var Content = (0, _styledComponents.default)(_Flex.default).withConfig({
   displayName: "components__Content",
   componentId: "zcog99-5"
-})(["flex:1;flex-direction:row;", ";"], withIcon());
+})(["flex:1;flex-direction:row;"]);
 exports.Content = Content;
 var Footer = (0, _styledComponents.default)(_Flex.default).withConfig({
   displayName: "components__Footer",
   componentId: "zcog99-6"
-})(["background-color:", ";border-radius:0 0 2px 2px;border-top:1px solid ", ";bottom:0;left:0;position:absolute;right:0;", ";", ";"], (0, _toColorString.default)(_designTokens.color.base.fullMoon), (0, _toColorString.default)(_designTokens.color.opacity.charcoal15), withIcon(), (0, _styleModifiers.when)('size', _breakpointObserver.sizes.XS, (0, _styledComponents.css)(["border-radius:0;"])));
-exports.Footer = Footer;
+})(["background-color:", ";border-radius:0 0 2px 2px;border-top:1px solid ", ";bottom:0;left:0;position:absolute;right:0;", ";"], (0, _toColorString.default)(_designTokens.color.base.fullMoon), (0, _toColorString.default)(_designTokens.color.opacity.charcoal15), (0, _styleModifiers.when)('size', _breakpointObserver.sizes.XS, (0, _styledComponents.css)(["border-radius:0;background-color:", ";flex-direction:column;"], (0, _toColorString.default)(_designTokens.color.base.fullMoon))));
+exports.Footer = Footer;
+var ActionWrapper = (0, _styledComponents.default)(_Flex.default).withConfig({
+  displayName: "components__ActionWrapper",
+  componentId: "zcog99-7"
+})(["", ";"], (0, _styleModifiers.when)('size', _breakpointObserver.sizes.XS, (0, _styledComponents.css)(["width:100%;&:not(:first-child){margin-top:", ";}button{font-size:", ";width:100%;height:", ";}"], (0, _rem.default)(_designTokens.spacing.base * 0.5), (0, _rem.default)(_designTokens.typography.size.alias.extraLarge), (0, _rem.default)(_designTokens.spacing.base * 5))));
+exports.ActionWrapper = ActionWrapper;

package/lib/components/Modal/index.d.ts

@@ -1,9 +1,13 @@
-import React from 'react';
+/// <reference types="react" />
 import { ModalProps } from './types';
-declare function Manager({ onClose, visible, children, ...rest }: ModalProps): React.ReactPortal | null;
-declare namespace Manager {
+declare function ModalWrapper({ onClose, visible, children, ...rest }: ModalProps): JSX.Element;
+declare namespace ModalWrapper {
     var propTypes: any;
+    var defaultProps: {
+        actions: undefined;
+        icon: undefined;
+    };
     var displayName: string;
 }
-export default Manager;
+export default ModalWrapper;
 //# sourceMappingURL=index.d.ts.map

package/lib/components/Modal/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA0C,MAAM,OAAO,CAAC;AA8B/D,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAyJrC,iBAAS,OAAO,CAAC,EACf,OAAO,EACP,OAAO,EACP,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,UAAU,GAAG,KAAK,CAAC,WAAW,GAAG,IAAI,CAmCvC;kBAxCQ,OAAO;;;;AAmDhB,eAAe,OAAO,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/index.tsx"],"names":[],"mappings":";AA+BA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AA2HrC,iBAAS,YAAY,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,UAAU,eAQxE;kBARQ,YAAY;;;;;;;;AAwBrB,eAAe,YAAY,CAAC"}

package/lib/components/Modal/index.js

@@ -5,25 +5,21 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _get = _interopRequireDefault(require("lodash/get"));
-
-var _omit = _interopRequireDefault(require("lodash/omit"));
-
-var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _react = _interopRequireWildcard(require("react"));
-
 var _breakpointObserver = require("@decisiv/breakpoint-observer");
 
 var _designTokens = require("@decisiv/design-tokens");
 
 var _Times = _interopRequireDefault(require("@decisiv/iconix/lib/components/Times"));
 
-var _ConfigProvider = require("../../providers/ConfigProvider");
+var _get = _interopRequireDefault(require("lodash/get"));
 
-var _canUseDOM = _interopRequireDefault(require("../../utils/canUseDOM"));
+var _omit = _interopRequireDefault(require("lodash/omit"));
+
+var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
 
 var _commonUIColors = require("../../utils/commonUIColors");
 
@@ -43,16 +39,18 @@ var _components = require("./components");
 
 var _constants = require("./constants");
 
+var _Manager = _interopRequireDefault(require("./Manager"));
+
 var _proptypeValidators = require("./proptypeValidators");
 
+var _ResponsiveModalWrapper = _interopRequireDefault(require("./ResponsiveModalWrapper"));
+
 var _schema = _interopRequireDefault(require("./schema"));
 
-var _utils = require("./utils");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { keys.push.apply(keys, Object.getOwnPropertySymbols(object)); } if (enumerableOnly) keys = keys.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -78,7 +76,7 @@ var actionProps = [{}, {
 }];
 
 function Modal(_ref) {
-  var _ref2, _ref3, _ref4, _ref5, _ref6;
+  var _ref2, _ref3, _ref4, _ref5, _ref6, _ref7;
 
   var actions = _ref.actions,
       children = _ref.children,
@@ -113,43 +111,16 @@ function Modal(_ref) {
 
     return null;
   }, [colorProp, icon, intent]);
-
-  var _useElement = (0, _utils.useElement)(),
-      _useElement2 = _slicedToArray(_useElement, 2),
-      container = _useElement2[0],
-      containerRef = _useElement2[1];
-
-  (0, _utils.useKeepFocusWithin)(container);
   var uuid = (0, _useUniqueId.default)(id, 'modal-');
   var modalHeaderId = "modal-header-".concat(uuid);
   var modalContentId = "modal-content-".concat(uuid);
-  var modalFooterId = "modal-footer-".concat(uuid); // Any click within the overlay should stay within the overlay. This click event should close
-  // the modal, but not bubble up to any parent elements.
-
-  var handleOverlayClick = (0, _react.useCallback)(function (event) {
-    event.preventDefault();
-    event.stopPropagation();
-    onClose && onClose(event);
-  }, [onClose]); // Any click within the body should stay within the body. This prevents the click event from
-  // bubbling up and firing the onClose handler via the Overlay's onClick.
-
-  var handleBodyClick = (0, _react.useCallback)(function (event) {
-    event.preventDefault();
-    event.stopPropagation();
-  }, []);
-  return _react.default.createElement(_components.Overlay, {
-    onClick: handleOverlayClick,
-    ref: observedElementRef,
-    zIndex: zIndex
-  }, _react.default.createElement(_components.Body, {
-    "aria-describedby": modalContentId,
-    "aria-labelledby": modalHeaderId,
-    "aria-modal": "true",
-    size: breakpoint,
-    id: uuid,
-    onClick: handleBodyClick,
-    ref: containerRef,
-    role: "dialog"
+  var modalFooterId = "modal-footer-".concat(uuid);
+  return _react.default.createElement(_ResponsiveModalWrapper.default, {
+    id: id,
+    zIndex: zIndex,
+    onClose: onClose,
+    breakpoint: breakpoint,
+    observedElementRef: observedElementRef
   }, _react.default.createElement(_components.ScrollYBox, {
     size: breakpoint
   }, _react.default.createElement(_components.Header, {
@@ -168,7 +139,7 @@ function Modal(_ref) {
     }),
     zIndex: zIndex + 10
   }, translate(closeHint, 'modal.closeHint'))), IconComponent && _react.default.createElement(_Flex.default, {
-    marginRight: 1
+    marginBottom: 0.5
   }, IconComponent), _react.default.createElement(_Typography.H2, null, title)), _react.default.createElement(_components.Content, {
     hasIcon: !!IconComponent,
     id: modalContentId,
@@ -179,59 +150,41 @@ function Modal(_ref) {
     hasIcon: !!IconComponent,
     id: modalFooterId,
     paddingX: (_ref6 = {}, _defineProperty(_ref6, _breakpointObserver.sizes.LG, 3), _defineProperty(_ref6, _breakpointObserver.sizes.XS, 2), _ref6),
-    paddingY: 2,
+    paddingY: (_ref7 = {}, _defineProperty(_ref7, _breakpointObserver.sizes.LG, 2), _defineProperty(_ref7, _breakpointObserver.sizes.XS, 1.5), _ref7),
     size: breakpoint
   }, actions.map(function (action, index) {
-    return _react.default.createElement(_Flex.default, {
+    return _react.default.createElement(_components.ActionWrapper, {
       key: action.text,
-      marginRight: 0.5
+      marginRight: 0.5,
+      size: breakpoint
     }, _react.default.createElement(_Button.default, _extends({}, (0, _omit.default)(action, ['kind', 'size', 'variant']), actionProps[index])));
-  }))));
+  })));
 }
 
-function Manager(_ref7) {
-  var onClose = _ref7.onClose,
-      visible = _ref7.visible,
-      children = _ref7.children,
-      rest = _objectWithoutProperties(_ref7, ["onClose", "visible", "children"]);
-
-  (0, _utils.useReturnFocus)(!visible);
-
-  var _useConfig = (0, _ConfigProvider.useConfig)(),
-      createPortal = _useConfig.createPortal;
-
-  var onKeyDown = (0, _react.useCallback)(function (event) {
-    if (event.key === 'Escape') {
-      onClose && onClose(event);
-    }
-  }, [onClose]); // Allow closing the modal by pressing the Escape key
-
-  (0, _react.useEffect)(function () {
-    if (visible && _canUseDOM.default) {
-      document.addEventListener('keydown', onKeyDown);
-      return function () {
-        document.removeEventListener('keydown', onKeyDown);
-      };
-    } // eslint has issues with no return statement here...
-
-
-    return undefined;
-  }, [visible, onKeyDown]);
-
-  if (visible) {
-    return createPortal(_react.default.createElement(Modal, _extends({
-      onClose: onClose
-    }, rest), children));
-  }
-
-  return null;
+function ModalWrapper(_ref8) {
+  var onClose = _ref8.onClose,
+      visible = _ref8.visible,
+      children = _ref8.children,
+      rest = _objectWithoutProperties(_ref8, ["onClose", "visible", "children"]);
+
+  return _react.default.createElement(_Manager.default, {
+    onClose: onClose,
+    visible: visible
+  }, _react.default.createElement(Modal, _extends({
+    onClose: onClose,
+    visible: visible
+  }, rest), children));
 } // @ts-ignore
 
 
-Manager.propTypes = _objectSpread({}, _schema.default.propTypes, {
+ModalWrapper.propTypes = _objectSpread({}, _schema.default.propTypes, {
   actions: _proptypeValidators.actionsValidator,
   icon: _propTypes.default.elementType
 });
-Manager.displayName = 'Modal';
-var _default = Manager;
+ModalWrapper.defaultProps = {
+  actions: undefined,
+  icon: undefined
+};
+ModalWrapper.displayName = 'Modal';
+var _default = ModalWrapper;
 exports.default = _default;

package/lib/components/Modal/types.js

@@ -1 +1,5 @@
-"use strict";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/components/Notifications/Notification/components.d.ts

@@ -102,9 +102,9 @@ export declare const NotificationCard: import("styled-components").StyledCompone
 }> & {
     borderColor: string;
 }, never>;
-export declare const IconColumn: import("styled-components").StyledComponent<"div", any, import("../../Grid/Column/types").default & {
-    span: string;
-}, "span">;
+export declare const IconColumn: import("styled-components").StyledComponent<"div", any, {
+    right?: boolean | undefined;
+}, never>;
 export declare const CloseButton: import("styled-components").StyledComponent<import("react").RefForwardingComponent<HTMLButtonElement, ButtonProps>, any, ButtonProps, never>;
 export declare const ActionButtonContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 //# sourceMappingURL=components.d.ts.map

package/lib/components/Notifications/Notification/components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../../src/components/Notifications/Notification/components.ts"],"names":[],"mappings":";AAWA,OAAe,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEnD,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAa5B,CAAC;AAEF,eAAO,MAAM,UAAU;;UAGtB,CAAC;AAEF,eAAO,MAAM,WAAW,8IAEvB,CAAC;AAEF,eAAO,MAAM,qBAAqB,oEAGjC,CAAC"}
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../../src/components/Notifications/Notification/components.ts"],"names":[],"mappings":";AAWA,OAAe,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAInD,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAa5B,CAAC;AAEF,eAAO,MAAM,UAAU;;SAOtB,CAAC;AAEF,eAAO,MAAM,WAAW,8IAEvB,CAAC;AAEF,eAAO,MAAM,qBAAqB,oEAGjC,CAAC"}

package/lib/components/Notifications/Notification/components.js

@@ -15,7 +15,7 @@ var _color = _interopRequireDefault(require("@decisiv/design-tokens/lib/color"))
 
 var _spacing = _interopRequireDefault(require("@decisiv/design-tokens/lib/spacing"));
 
-var _dynamicModifiers = require("../../../utils/dynamicModifiers");
+var _utils = require("../../../utils");
 
 var _skyPlane = _interopRequireDefault(require("../../../utils/skyPlane"));
 
@@ -23,6 +23,8 @@ var _Grid = _interopRequireDefault(require("../../Grid"));
 
 var _Button = _interopRequireDefault(require("../../Button"));
 
+var _constants = require("../constants");
+
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -30,17 +32,21 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var NotificationCard = (0, _styledComponents.default)(_Grid.default.Container).withConfig({
   displayName: "components__NotificationCard",
   componentId: "ds1zkc-0"
-})(["background-color:", ";box-shadow:", ";border-radius:2px;width:", ";", ";"], (0, _toColorString.default)(_color.default.base.snowWhite), (0, _skyPlane.default)(2), (0, _rem.default)(_spacing.default.base * 34), (0, _dynamicModifiers.applyDynamicModifiers)('borderColor', function (_ref) {
+})(["background-color:", ";box-shadow:", ";border-radius:2px;width:", ";", ";"], (0, _toColorString.default)(_color.default.base.snowWhite), (0, _skyPlane.default)(2), _constants.NOTIFICATION_CARD_WIDTH, (0, _utils.applyDynamicModifiers)('borderColor', function (_ref) {
   var borderColor = _ref.borderColor;
   return (0, _styledComponents.css)(["border-left:2px solid ", ";"], borderColor);
 }));
 exports.NotificationCard = NotificationCard;
-var IconColumn = (0, _styledComponents.default)(_Grid.default.Column).attrs({
-  span: '0'
-}).withConfig({
+
+var IconColumn = _styledComponents.default.div.withConfig({
   displayName: "components__IconColumn",
   componentId: "ds1zkc-1"
-})(["top:1px;width:", ";"], (0, _rem.default)(_spacing.default.base * 4));
+})(["padding-left:", ";", ""], (0, _rem.default)(_spacing.default.base), function (_ref2) {
+  var _ref2$right = _ref2.right,
+      right = _ref2$right === void 0 ? false : _ref2$right;
+  return right && (0, _styledComponents.css)(["padding-right:", ";"], (0, _rem.default)(_spacing.default.base));
+});
+
 exports.IconColumn = IconColumn;
 var CloseButton = (0, _styledComponents.default)(_Button.default).withConfig({
   displayName: "components__CloseButton",

package/lib/components/Notifications/Notification/index.d.ts

@@ -1,13 +1,10 @@
 /// <reference types="react" />
+import PropTypes from 'prop-types';
 import { TNotificationProps } from '../../../providers/NotificationsProvider/types';
 declare function Notification(props: TNotificationProps): JSX.Element;
 declare namespace Notification {
-    var propTypes: any;
-    var defaultProps: {
-        actions: undefined;
-        children: null;
-        icon: undefined;
-    };
+    var propTypes: PropTypes.ValidationMap<TNotificationProps>;
+    var defaultProps: Partial<TNotificationProps>;
     var displayName: string;
 }
 export default Notification;

package/lib/components/Notifications/Notification/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Notifications/Notification/index.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,kBAAkB,EAAE,MAAM,gDAAgD,CAAC;AAwBpF,iBAAS,YAAY,CAAC,KAAK,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CAiG5D;kBAjGQ,YAAY;;;;;;;;;AAqHrB,eAAe,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Notifications/Notification/index.tsx"],"names":[],"mappings":";AAGA,OAAO,SAA4B,MAAM,YAAY,CAAC;AAMtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gDAAgD,CAAC;AAwBpF,iBAAS,YAAY,CAAC,KAAK,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CAuG5D;kBAvGQ,YAAY;;;;;AA8HrB,eAAe,YAAY,CAAC"}