@decisiv/ui-components 2.0.1-alpha.175 → 2.0.1-alpha.177

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAmB,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAQvE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAA2B,MAAM,SAAS,CAAC;AAExE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC;AAsDhC,QAAA,MAAM,YAAY,EAAE,sBAAsB,CAAC,QAAQ,EAAE,UAAU,CAE9D,CAAC;AAQF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAmB,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAA2B,MAAM,SAAS,CAAC;AAIxE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC;AAWhC,QAAA,MAAM,YAAY,EAAE,sBAAsB,CAAC,QAAQ,EAAE,UAAU,CAE9D,CAAC;AAQF,eAAe,YAAY,CAAC"}

package/lib/components/Badge/index.js

@@ -19,21 +19,9 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _styledComponentsModifiers = require("styled-components-modifiers");
-
-var _color = _interopRequireDefault(require("../../modifiers/color"));
-
-var _constants = require("./constants");
-
-var _commonUIColors = require("../../utils/commonUIColors");
-
-var _utils = require("../../utils");
-
 var _types = require("./types");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _styles = require("./styles");
 
 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; } }
 
@@ -43,57 +31,13 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-var colorModifiers = (0, _utils.applyDynamicModifiers)('color', function (_ref) {
-  var color = _ref.color;
-  return (0, _styledComponents.css)(["", ""], color && color in _commonUIColors.commonUIColors && (0, _color.default)(_commonUIColors.commonUIColors[color]));
-});
-
-var getSizeStyles = function getSizeStyles(key) {
-  return (0, _styledComponents.css)(_constants.sizeStyles[key] || '');
-};
-
-var sizeModifiers = (0, _styledComponentsModifiers.applyStyleModifiers)({
-  small: function small(_ref2) {
-    var v = _ref2.variant;
-    return getSizeStyles("small.".concat(v));
-  },
-  medium: function medium(_ref3) {
-    var v = _ref3.variant;
-    return getSizeStyles("medium.".concat(v));
-  },
-  large: function large(_ref4) {
-    var v = _ref4.variant;
-    return getSizeStyles("large.".concat(v));
-  }
-}, 'size');
-var variantModifiers = (0, _styledComponentsModifiers.applyStyleModifiers)({
-  round: function round() {
-    return (0, _styledComponents.css)({
-      borderRadius: '50%'
-    });
-  },
-  square: function square() {
-    return (0, _styledComponents.css)({
-      borderRadius: '2px'
-    });
-  }
-}, 'variant'); // The default coloring is explicitly set instead of relying on the
-// `visualInterest.licoriceMousse.medium` colors. The "default" badge is
-// intended to be used in “empty” and/or “no results” messages, the snowWhite
-// fg color and lower contrast help convey “emptiness”.
-
-var BadgeContainer = _styledComponents.default.div.withConfig({
-  displayName: "Badge__BadgeContainer",
-  componentId: "sc-1y6oxgp-0"
-})(["align-items:center;display:inline-flex;justify-content:center;", ";", ";", ";", ";"], (0, _color.default)(_commonUIColors.commonUIColors.information), colorModifiers, sizeModifiers, variantModifiers);
-
 function Badge(props, containerRef) {
   var ariaLabel = props['aria-label'],
       Icon = props.icon,
       size = props.size,
       rest = _objectWithoutProperties(props, ["aria-label", "icon", "size"]);
 
-  return _react.default.createElement(BadgeContainer, _extends({
+  return _react.default.createElement(_styles.BadgeContainer, _extends({
     ref: containerRef,
     size: size
   }, rest), _react.default.createElement(Icon, {

package/lib/components/Badge/index.test.js

@@ -55,12 +55,23 @@ describe('Badge', function () {
       expect(container).toMatchSnapshot();
     });
   });
+  ['bright', 'pastel'].forEach(function (palette) {
+    it("renders correctly with palette=\"".concat(palette, "\""), function () {
+      var _renderBadge3 = renderBadge({
+        palette: palette,
+        color: 'carrotCake'
+      }),
+          container = _renderBadge3.container;
+
+      expect(container).toMatchSnapshot();
+    });
+  });
   it("renders correctly with size=\"small\" and variant=\"square\"", function () {
-    var _renderBadge3 = renderBadge({
+    var _renderBadge4 = renderBadge({
       size: 'small',
       variant: 'square'
     }),
-        container = _renderBadge3.container;
+        container = _renderBadge4.container;
 
     expect(container).toMatchSnapshot();
   });
@@ -70,10 +81,10 @@ describe('Badge', function () {
           key = _ref2[0],
           value = _ref2[1];
 
-      var _renderBadge4 = renderBadge({
+      var _renderBadge5 = renderBadge({
         color: key
       }),
-          container = _renderBadge4.container;
+          container = _renderBadge5.container;
 
       expect(container.firstChild).toHaveStyleRule('background-color', (0, _toColorString.default)(value));
     });

package/lib/components/Badge/schema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAAqC,CAAC;AAwBlD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAAqC,CAAC;AA4BlD,eAAe,MAAM,CAAC"}

package/lib/components/Badge/schema.js

@@ -15,6 +15,7 @@ schema.propTypes = {
   'aria-label': _reactDesc.PropTypes.string.description('Descriptive text for accessibility purposes').isRequired,
   color: _reactDesc.PropTypes.string.description('(See note) Sets the color for the background and the icon').defaultValue('information'),
   icon: _reactDesc.PropTypes.element.description('Must be an icon component from `@decisiv/iconix`').isRequired,
+  palette: _reactDesc.PropTypes.oneOf(['bright', 'pastel']).description('What color variant to render').defaultValue('bright'),
   size: _reactDesc.PropTypes.oneOf(['small', 'medium', 'large']).description('(See note) Sets the size of the badge').defaultValue('medium'),
   variant: _reactDesc.PropTypes.oneOf(['round', 'square']).description('(See note) Controls primary style variations of the badge').defaultValue('round')
 };

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

@@ -0,0 +1,3 @@
+import { BadgeProps } from './types';
+export declare const BadgeContainer: import("styled-components").StyledComponent<"div", any, Pick<BadgeProps, "variant" | "size" | "color" | "palette">, never>;
+//# sourceMappingURL=styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/styles.ts"],"names":[],"mappings":"AAYA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AA+DrC,eAAO,MAAM,cAAc,4HAQ1B,CAAC"}

package/lib/components/Badge/styles.js

@@ -0,0 +1,96 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BadgeContainer = void 0;
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _styledComponentsModifiers = require("styled-components-modifiers");
+
+var _designTokens = require("@decisiv/design-tokens");
+
+var _color = _interopRequireDefault(require("../../modifiers/color"));
+
+var _constants = require("./constants");
+
+var _commonUIColors = require("../../utils/commonUIColors");
+
+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 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; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var FG_COLOR = {
+  pastel: 'dark'
+};
+var PALETTE_MAPPER = {
+  pastel: 'light',
+  bright: 'medium'
+};
+
+var colorModifiers = function colorModifiers(props) {
+  var _props$palette = props.palette,
+      palette = _props$palette === void 0 ? 'bright' : _props$palette,
+      color = props.color;
+
+  if (color && color in _commonUIColors.commonUIColors) {
+    var baseColor = _commonUIColors.commonUIThreeShadeColors[color];
+    var fgColor = palette === 'bright' ? _designTokens.color.base.snowWhite : baseColor[FG_COLOR[palette]];
+    var bgColor = baseColor[PALETTE_MAPPER[palette]];
+    var colorPalette = palette === 'bright' ? bgColor : _objectSpread({}, bgColor, {
+      fg: fgColor
+    });
+    return (0, _styledComponents.css)(["", ""], (0, _color.default)(colorPalette));
+  }
+
+  return null;
+};
+
+var getSizeStyles = function getSizeStyles(key) {
+  return (0, _styledComponents.css)(_constants.sizeStyles[key] || '');
+};
+
+var sizeModifiers = (0, _styledComponentsModifiers.applyStyleModifiers)({
+  small: function small(_ref) {
+    var v = _ref.variant;
+    return getSizeStyles("small.".concat(v));
+  },
+  medium: function medium(_ref2) {
+    var v = _ref2.variant;
+    return getSizeStyles("medium.".concat(v));
+  },
+  large: function large(_ref3) {
+    var v = _ref3.variant;
+    return getSizeStyles("large.".concat(v));
+  }
+}, 'size');
+var variantModifiers = (0, _styledComponentsModifiers.applyStyleModifiers)({
+  round: function round() {
+    return (0, _styledComponents.css)({
+      borderRadius: '50%'
+    });
+  },
+  square: function square() {
+    return (0, _styledComponents.css)({
+      borderRadius: '2px'
+    });
+  }
+}, 'variant'); // The default coloring is explicitly set instead of relying on the
+// `visualInterest.licoriceMousse.medium` colors. The "default" badge is
+// intended to be used in “empty” and/or “no results” messages, the snowWhite
+// fg color and lower contrast help convey “emptiness”.
+// eslint-disable-next-line import/prefer-default-export
+
+var BadgeContainer = _styledComponents.default.div.withConfig({
+  displayName: "styles__BadgeContainer",
+  componentId: "sc-1lruwqa-0"
+})(["align-items:center;display:inline-flex;justify-content:center;", ";", ";", ";"], colorModifiers, sizeModifiers, variantModifiers);
+
+exports.BadgeContainer = BadgeContainer;

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

@@ -8,6 +8,7 @@ export interface BadgeProps {
     'aria-label': string;
     color?: CommonUIColorKeys;
     icon: IconComponent;
+    palette?: 'pastel' | 'bright';
     size?: 'small' | 'medium' | 'large';
     variant?: 'round' | 'square';
 }

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/types.ts"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EACL,iBAAiB,EAElB,MAAM,4BAA4B,CAAC;AAIpC,aAAK,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAEvD,oBAAY,QAAQ,GAAG,cAAc,CAAC;AAItC,MAAM,WAAW,UAAU;IACzB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,IAAI,EAAE,aAAa,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC9B;AAED,iBAAS,gBAAgB,CACvB,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,SAAS,EACnB,aAAa,EAAE,OAAO,GACrB,KAAK,GAAG,IAAI,CAqBd;AAED,eAAO,MAAM,SAAS;;;;;CAKrB,CAAC;AAEF,eAAO,MAAM,YAAY;;;CAGxB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/types.ts"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EACL,iBAAiB,EAElB,MAAM,4BAA4B,CAAC;AAIpC,aAAK,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAEvD,oBAAY,QAAQ,GAAG,cAAc,CAAC;AAItC,MAAM,WAAW,UAAU;IACzB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,IAAI,EAAE,aAAa,CAAC;IACpB,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC9B,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC9B;AAED,iBAAS,gBAAgB,CACvB,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,SAAS,EACnB,aAAa,EAAE,OAAO,GACrB,KAAK,GAAG,IAAI,CAqBd;AAED,eAAO,MAAM,SAAS;;;;;CAKrB,CAAC;AAEF,eAAO,MAAM,YAAY;;;CAGxB,CAAC"}

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

@@ -8,7 +8,201 @@ export declare const Body: import("styled-components").StyledComponent<"div", an
 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, {
@@ -400,4 +594,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":";AAYA,eAAO,MAAM,OAAO;;SASnB,CAAC;AAEF,eAAO,MAAM,IAAI;;SA6BhB,CAAC;AAEF,eAAO,MAAM,UAAU;;SAetB,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"
@@ -60,7 +45,9 @@ var ScrollYBox = _styledComponents.default.div.withConfig({
 })(["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.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":"AAIA,OAAO,KAA0C,MAAM,OAAO,CAAC;AA+B/D,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AA6JrC,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"}

package/lib/components/Modal/index.js

@@ -78,7 +78,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,
@@ -168,7 +168,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,21 +179,22 @@ 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"]);
+function Manager(_ref8) {
+  var onClose = _ref8.onClose,
+      visible = _ref8.visible,
+      children = _ref8.children,
+      rest = _objectWithoutProperties(_ref8, ["onClose", "visible", "children"]);
 
   (0, _utils.useReturnFocus)(!visible);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decisiv/ui-components",
-  "version": "2.0.1-alpha.175+c6cd8fa",
+  "version": "2.0.1-alpha.177+205e39a",
   "description": "Decisiv's design system React components",
   "author": "Decisiv UI Development Team",
   "license": "MIT",
@@ -71,5 +71,5 @@
     "access": "public"
   },
   "private": false,
-  "gitHead": "c6cd8fa5f14a9de6e85b240f0acbfb5e12401215"
+  "gitHead": "205e39a7485f904df27a6656ff9f1f15eeeef354"
 }