@decisiv/ui-components 2.0.1-alpha.16 → 2.0.1-alpha.161

package/lib/components/Loading/styles.d.ts

@@ -0,0 +1,211 @@
+/// <reference types="react" />
+import { FlexComponentProps } from '../Flex';
+import { Size } from './types';
+interface ContainerProps extends FlexComponentProps {
+    loadingSize: Size;
+}
+export declare const Container: 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";
+    }>;
+}> & ContainerProps, never>;
+export declare const AnimationContainer: import("styled-components").StyledComponent<"div", any, {
+    size: Size;
+}, never>;
+export declare const Bouncer: import("styled-components").StyledComponent<"div", any, {
+    inverted?: boolean | undefined;
+    shadow?: boolean | undefined;
+}, never>;
+export declare const TextContainer: import("styled-components").StyledComponent<"div", any, {
+    size: Size;
+}, never>;
+export {};
+//# sourceMappingURL=styles.d.ts.map

package/lib/components/Loading/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Loading/styles.ts"],"names":[],"mappings":";AAOA,OAAa,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAEnD,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAmB/B,UAAU,cAAe,SAAQ,kBAAkB;IACjD,WAAW,EAAE,IAAI,CAAC;CACnB;AAED,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAGrB,CAAC;AAoBF,eAAO,MAAM,kBAAkB;;SAI9B,CAAC;AAEF,eAAO,MAAM,OAAO;;;SAiCnB,CAAC;AAmBF,eAAO,MAAM,aAAa;;SAIzB,CAAC"}

package/lib/components/Loading/styles.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextContainer = exports.Bouncer = exports.AnimationContainer = exports.Container = void 0;
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
+
+var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
+
+var _designTokens = require("@decisiv/design-tokens");
+
+var _Flex = _interopRequireDefault(require("../Flex"));
+
+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; } }
+
+var CONTAINER_STYLE = {
+  small: (0, _styledComponents.css)(["flex-direction:row;gap:", ";"], (0, _rem.default)(_designTokens.spacing.base * 0.5)),
+  medium: (0, _styledComponents.css)(["flex-direction:column;align-items:center;gap:", ";"], (0, _rem.default)(_designTokens.spacing.base)),
+  large: (0, _styledComponents.css)(["flex-direction:column;align-items:center;gap:", ";"], (0, _rem.default)(_designTokens.spacing.base))
+};
+var Container = (0, _styledComponents.default)(_Flex.default).withConfig({
+  displayName: "styles__Container",
+  componentId: "fjt04b-0"
+})(["display:flex;", ";"], function (_ref) {
+  var loadingSize = _ref.loadingSize;
+  return CONTAINER_STYLE[loadingSize];
+});
+exports.Container = Container;
+var ANIMATION_CONTAINER_STYLE = {
+  small: (0, _styledComponents.css)(["width:", ";min-width:", ";height:", ";"], (0, _rem.default)(_designTokens.spacing.base * 1.6), (0, _rem.default)(_designTokens.spacing.base * 1.6), (0, _rem.default)(_designTokens.spacing.base * 1.6)),
+  medium: (0, _styledComponents.css)(["width:", ";min-width:", ";height:", ";"], (0, _rem.default)(_designTokens.spacing.base * 3.6), (0, _rem.default)(_designTokens.spacing.base * 3.6), (0, _rem.default)(_designTokens.spacing.base * 3.6)),
+  large: (0, _styledComponents.css)(["width:", ";min-width:", ";height:", ";"], (0, _rem.default)(_designTokens.spacing.base * 4.8), (0, _rem.default)(_designTokens.spacing.base * 4.8), (0, _rem.default)(_designTokens.spacing.base * 4.8))
+};
+
+var AnimationContainer = _styledComponents.default.div.withConfig({
+  displayName: "styles__AnimationContainer",
+  componentId: "fjt04b-1"
+})(["position:relative;", ""], function (_ref2) {
+  var size = _ref2.size;
+  return ANIMATION_CONTAINER_STYLE[size];
+});
+
+exports.AnimationContainer = AnimationContainer;
+
+var Bouncer = _styledComponents.default.div.withConfig({
+  displayName: "styles__Bouncer",
+  componentId: "fjt04b-2"
+})(["width:100%;height:100%;border-radius:50%;background-color:", ";opacity:0.6;position:absolute;top:0;left:0;animation:sk-bounce 2s infinite ease-in-out;", " ", " @keyframes sk-bounce{0%,100%{transform:scale(0);}50%{transform:scale(1);}}"], (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean40), function (_ref3) {
+  var inverted = _ref3.inverted;
+  return inverted && (0, _styledComponents.css)(["background-color:", ";"], (0, _toColorString.default)(_designTokens.color.opacity.fullMoon50));
+}, function (_ref4) {
+  var shadow = _ref4.shadow;
+  return shadow && (0, _styledComponents.css)(["animation-delay:-1s;"]);
+});
+
+exports.Bouncer = Bouncer;
+var TEXT_CONTAINER_STYLE = {
+  small: (0, _styledComponents.css)(["text-align:left;align-items:flex-start;"]),
+  medium: (0, _styledComponents.css)(["gap:", ";text-align:center;align-items:center;"], (0, _rem.default)(_designTokens.spacing.base * 0.5)),
+  large: (0, _styledComponents.css)(["gap:", ";text-align:center;align-items:center;"], (0, _rem.default)(_designTokens.spacing.base * 0.5))
+};
+
+var TextContainer = _styledComponents.default.div.withConfig({
+  displayName: "styles__TextContainer",
+  componentId: "fjt04b-3"
+})(["display:flex;flex-direction:column;", ";"], function (_ref5) {
+  var size = _ref5.size;
+  return TEXT_CONTAINER_STYLE[size];
+});
+
+exports.TextContainer = TextContainer;

package/lib/components/Loading/types.d.ts

@@ -0,0 +1,10 @@
+import { FlexComponentProps } from '../Flex';
+export declare type Size = 'small' | 'medium' | 'large';
+export declare type Variant = 'normal' | 'inverted';
+export interface LoadingProps extends Omit<FlexComponentProps, 'size'> {
+    title?: string;
+    description?: string;
+    variant?: Variant;
+    size?: Size;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/components/Loading/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Loading/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE7C,oBAAY,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAChD,oBAAY,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE5C,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,IAAI,CAAC;CACb"}

package/lib/components/Loading/types.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAON,MAAM,OAAO,CAAC;AAMf,OAAO,EAAqB,KAAK,EAAE,MAAM,SAAS,CAAC;AAOnD,cAAc,SAAS,CAAC;AA+GxB,QAAA,MAAM,WAAW,gFAAmB,CAAC;AAsBrC,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAON,MAAM,OAAO,CAAC;AAMf,OAAO,EAAqB,KAAK,EAAE,MAAM,SAAS,CAAC;AAOnD,cAAc,SAAS,CAAC;AAgHxB,QAAA,MAAM,WAAW,gFAAmB,CAAC;AAsBrC,eAAe,WAAW,CAAC"}

package/lib/components/Menu/index.js

@@ -64,7 +64,8 @@ var Menu = function Menu(props, _ref) {
   var _props$items = props.items,
       items = _props$items === void 0 ? [] : _props$items,
       onSelectItem = props.onSelectItem,
-      allowTab = props.allowTab;
+      allowTab = props.allowTab,
+      actions = props.actions;
 
   var _useMemo = (0, _react.useMemo)(function () {
     return items.reduce(function (acc, value) {
@@ -118,6 +119,7 @@ var Menu = function Menu(props, _ref) {
     }
   }, [allowTab]);
   return _react.default.createElement(StyledMenu, {
+    actions: actions,
     items: optionsListItems,
     selectable: false,
     multiple: false,

package/lib/components/Menu/types.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { IconProps } from '@decisiv/iconix';
+import { FooterActions } from '../../atoms/OptionsList/types';
 export declare type MenuRef = HTMLUListElement;
 export declare type MenuItemRef = HTMLDivElement | HTMLAnchorElement;
 export declare type InputMethod = 'mouse' | 'keyboard' | undefined;
@@ -8,6 +9,7 @@ export interface Props {
     items: MenuItem[];
     onSelectItem?: (item: MenuItem) => void;
     allowTab?: boolean;
+    actions?: FooterActions;
 }
 export interface MenuItem {
     id: string;

package/lib/components/Menu/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,oBAAY,OAAO,GAAG,gBAAgB,CAAC;AACvC,oBAAY,WAAW,GAAG,cAAc,GAAG,iBAAiB,CAAC;AAC7D,oBAAY,WAAW,GAAG,OAAO,GAAG,UAAU,GAAG,SAAS,CAAC;AAE3D,oBAAY,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAE9D,MAAM,WAAW,KAAK;IACpB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,oBAAY,aAAa,GAAG,QAAQ,GAAG;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,WAAW,CAAC;IACzB,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CACtB,CAAC;AAEF,oBAAY,iBAAiB,GAAG,aAAa,GAAG;IAC9C,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAE9D,oBAAY,OAAO,GAAG,gBAAgB,CAAC;AACvC,oBAAY,WAAW,GAAG,cAAc,GAAG,iBAAiB,CAAC;AAC7D,oBAAY,WAAW,GAAG,OAAO,GAAG,UAAU,GAAG,SAAS,CAAC;AAE3D,oBAAY,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAE9D,MAAM,WAAW,KAAK;IACpB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB;AAED,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,oBAAY,aAAa,GAAG,QAAQ,GAAG;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,WAAW,CAAC;IACzB,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CACtB,CAAC;AAEF,oBAAY,iBAAiB,GAAG,aAAa,GAAG;IAC9C,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC"}

package/lib/components/Menu/types.js

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

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

@@ -46,7 +46,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 +241,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";

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"}

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

@@ -72,6 +72,8 @@ function Notification(props) {
       _props$intent = props.intent,
       intent = _props$intent === void 0 ? _constants.intentNames.information : _props$intent,
       onClose = props.onClose,
+      onFocus = props.onFocus,
+      onHover = props.onHover,
       title = props.title;
   var translate = (0, _useTranslations.default)();
 
@@ -91,13 +93,15 @@ function Notification(props) {
     id: id,
     borderColor: accentColor,
     margin: 0,
-    padding: 1.5
-  }, _react.default.createElement(_Grid.default.Row, null, _react.default.createElement(_components.IconColumn, {
-    paddingRight: 0
-  }, Icon), _react.default.createElement(_Grid.default.Column, null, _react.default.createElement(_Grid.default.Row, null, _react.default.createElement(_Grid.default.Column, null, _react.default.createElement(_Typography.P, {
+    padding: 1.5,
+    onFocus: onFocus,
+    onMouseOver: onHover
+  }, _react.default.createElement(_Grid.default.Row, null, _react.default.createElement(_components.IconColumn, null, Icon), _react.default.createElement(_Grid.default.Column, null, _react.default.createElement(_Grid.default.Row, null, _react.default.createElement(_Grid.default.Column, null, _react.default.createElement(_Typography.P, {
     shade: 0,
     weight: "semibold"
-  }, title)), _react.default.createElement(_components.IconColumn, null, _react.default.createElement(_Tooltip.default, {
+  }, title)), onClose && _react.default.createElement(_components.IconColumn, {
+    right: true
+  }, _react.default.createElement(_Tooltip.default, {
     target: // eslint-disable-next-line react/jsx-wrap-multilines
     _react.default.createElement(_components.CloseButton, {
       "aria-label": translate(closeHint, 'notification.closeHint'),
@@ -120,21 +124,24 @@ function Notification(props) {
       key: action.text
     }, _react.default.createElement(_Button.default, _extends({}, (0, _omit.default)(action, ['kind', 'size', 'variant']), actionProps[index])));
   }))))));
-} // @ts-ignore
+}
 
-
-Notification.propTypes = _objectSpread({}, _schema.default.propTypes, {
+var propTypes = _objectSpread({}, _schema.default.propTypes, {
   actions: _proptypeValidators.actionsValidator,
-  children: _propTypes.default.elementType,
+  children: _propTypes.default.node,
   icon: _propTypes.default.elementType,
   id: _propTypes.default.string.isRequired,
-  onClose: _propTypes.default.func.isRequired
+  onClose: _propTypes.default.func
 });
-Notification.defaultProps = {
+
+var defaultProps = {
   actions: undefined,
   children: null,
-  icon: undefined
+  icon: undefined,
+  onClose: undefined
 };
+Notification.propTypes = propTypes;
+Notification.defaultProps = defaultProps;
 Notification.displayName = 'Notification';
 var _default = Notification;
 exports.default = _default;