@decisiv/ui-components 2.0.1-alpha.186 → 2.0.1-alpha.188

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

@@ -14,7 +14,7 @@ export interface BadgeProps {
 }
 declare function variantValidator(props: BadgeProps, propName: 'variant', componentName: 'Badge'): Error | null;
 export declare const propTypes: {
-    color: PropTypes.Requireable<"information" | "success" | "warning" | "danger" | "berryCrisp" | "koolaidCake" | "cookieMonster" | "cottonCandy" | "fizzyLime" | "mamboMango" | "carrotCake" | "roseGummy" | "licoriceMousse">;
+    color: PropTypes.Requireable<CommonUIColorKeys>;
     icon: PropTypes.Validator<PropTypes.ReactComponentLike>;
     size: PropTypes.Requireable<string>;
     variant: typeof variantValidator;

package/lib/components/Button/StyledButton.d.ts

@@ -1,12 +1,7 @@
 import React from 'react';
-import { Size, Kind, Intent, Variant } from './types';
-export interface StyledButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    intent?: Intent;
-    kind?: Kind;
-    minWidth?: string;
-    size: Size;
-    variant?: Variant;
-    loading?: boolean;
+import { ButtonProps } from './types';
+export interface StyledButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, ButtonProps {
+    $loading?: ButtonProps['loading'];
 }
 declare const StyledButton: import("styled-components").StyledComponent<"button", any, StyledButtonProps, never>;
 export default StyledButton;

package/lib/components/Button/StyledButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StyledButton.d.ts","sourceRoot":"","sources":["../../../src/components/Button/StyledButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAuB1B,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAe,MAAM,SAAS,CAAC;AA6LnE,MAAM,WAAW,iBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,QAAA,MAAM,YAAY,sFAkBjB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"StyledButton.d.ts","sourceRoot":"","sources":["../../../src/components/Button/StyledButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAuB1B,OAAO,EAAQ,WAAW,EAAE,MAAM,SAAS,CAAC;AAE5C,MAAM,WAAW,iBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,WAAW;IACb,QAAQ,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CACnC;AA6LD,QAAA,MAAM,YAAY,sFAkBjB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/Button/StyledButton.js

@@ -85,9 +85,9 @@ var buttonSizeModifier = function buttonSizeModifier(_ref) {
 
 var disabledStyles = function disabledStyles(_ref2) {
   var variant = _ref2.variant,
-      loading = _ref2.loading;
+      $loading = _ref2.$loading;
 
-  if (loading) {
+  if ($loading) {
     if (variant === 'ghost') {
       return (0, _styledComponents.css)(["&:disabled:disabled{border-color:transparent;color:", ";cursor:not-allowed;}"], _colors.interactionSecondaryLight);
     }

package/lib/components/Button/index.js

@@ -144,7 +144,7 @@ var Button = function Button(props, ref) {
     size: size,
     type: "button",
     variant: variant,
-    loading: loading
+    $loading: loading
   }, rest), ButtonContent);
 };
 

package/lib/components/Filter/SimplePrimary/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { SimpleFilterProps } from '../types';
-declare const FilterSimplePrimary: ({ "aria-label": ariaLabel, active, disabled, kind, text, badgeIcon: Icon, badgeColor, count, }: SimpleFilterProps) => JSX.Element;
+declare const FilterSimplePrimary: ({ "aria-label": ariaLabel, active, disabled, text, badgeIcon: Icon, badgeColor, count, }: SimpleFilterProps) => JSX.Element;
 export default FilterSimplePrimary;
 //# sourceMappingURL=index.d.ts.map

package/lib/components/Filter/SimplePrimary/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Filter/SimplePrimary/index.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE7C,QAAA,MAAM,mBAAmB,oIA4BxB,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Filter/SimplePrimary/index.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE7C,QAAA,MAAM,mBAAmB,8HAgCxB,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/lib/components/Filter/SimplePrimary/index.js

@@ -21,7 +21,6 @@ var FilterSimplePrimary = function FilterSimplePrimary(_ref) {
       active = _ref$active === void 0 ? false : _ref$active,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      kind = _ref.kind,
       text = _ref.text,
       Icon = _ref.badgeIcon,
       _ref$badgeColor = _ref.badgeColor,
@@ -37,7 +36,7 @@ var FilterSimplePrimary = function FilterSimplePrimary(_ref) {
     "aria-label": ariaLabel
   })), _react.default.createElement(_StyledLabel.default, {
     active: active,
-    kind: kind,
+    kind: "primary",
     hasBadge: !!Icon,
     marginLeft: 1
   }, buttonText));

package/lib/components/Filter/StyledFilter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StyledFilter.d.ts","sourceRoot":"","sources":["../../../src/components/Filter/StyledFilter.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AA4D1C,QAAA,MAAM,YAAY,oFAiDjB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"StyledFilter.d.ts","sourceRoot":"","sources":["../../../src/components/Filter/StyledFilter.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAoE1C,QAAA,MAAM,YAAY,oFAiDjB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/Filter/StyledFilter.js

@@ -35,18 +35,27 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 var activeStyles = (0, _styledComponents.css)(["color:", ";background-color:", ";border:", " solid ", ";svg{color:", ";}"], (0, _toColorString.default)(_color.default.base.snowWhite), (0, _toColorString.default)(_color.default.status.information.medium), (0, _rem.default)(1), (0, _toColorString.default)(_color.default.status.information.medium), (0, _toColorString.default)(_color.default.base.snowWhite));
 var focusStyles = (0, _styledComponents.css)(["border:", " solid ", ";", ";"], (0, _rem.default)(1), (0, _toColorString.default)(_color.default.interaction.pacificOcean), (0, _focusRingWithColor.default)(_colors.focusRingColors.light.normal.secondary.shadow));
-var actionVariantStyles = (0, _styledComponents.css)(["border:", " solid transparent;background:transparent;svg{color:", ";}&:hover{border:", " solid transparent;color:", ";background:transparent;svg{color:inherit;}}&:disabled:disabled{border:none;background:transparent;}"], (0, _rem.default)(1), (0, _toColorString.default)(_color.default.interaction.pacificOcean), (0, _rem.default)(1), (0, _toColorString.default)(_color.default.interaction.indianOcean));
-
-var variant = _styledTheming.default.variants(_ConfigProvider.themeKeys.mode, 'variant', {
-  simple: {
-    light: '',
-    dark: ''
-  },
-  action: {
-    light: actionVariantStyles,
-    dark: actionVariantStyles
-  }
-});
+var altActionVariantStyles = (0, _styledComponents.css)(["border:", " solid transparent;background:transparent;svg{color:", ";}&:hover{border:", " solid transparent;color:", ";background:transparent;svg{color:inherit;}}&:disabled:disabled{border:none;background:transparent;}"], (0, _rem.default)(1), (0, _toColorString.default)(_color.default.interaction.pacificOcean), (0, _rem.default)(1), (0, _toColorString.default)(_color.default.interaction.indianOcean));
+var variantKindMapper = {
+  primary: '',
+  primaryAlt: altActionVariantStyles,
+  secondary: altActionVariantStyles
+};
+
+var variant = function variant(_ref) {
+  var _ref$kind = _ref.kind,
+      kindProp = _ref$kind === void 0 ? 'primary' : _ref$kind;
+  return _styledTheming.default.variants(_ConfigProvider.themeKeys.mode, 'variant', {
+    simple: {
+      light: '',
+      dark: ''
+    },
+    action: {
+      light: variantKindMapper[kindProp],
+      dark: variantKindMapper[kindProp]
+    }
+  });
+};
 
 var StyledFilter = _styledComponents.default.button.withConfig({
   displayName: "StyledFilter",

package/lib/components/Filter/StyledLabel/index.js

@@ -21,7 +21,7 @@ var StyledLabel = _styledComponents.default.span.withConfig({
 })(["font-size:", ";margin-right:", ";margin-left:", ";"], function (_ref) {
   var _ref$kind = _ref.kind,
       kind = _ref$kind === void 0 ? 'primary' : _ref$kind;
-  return kind === 'primary' ? (0, _rem.default)(_designTokens.typography.size.alias.default) : (0, _rem.default)(_designTokens.typography.size.alias.paragraph2);
+  return kind === 'secondary' ? (0, _rem.default)(_designTokens.typography.size.alias.paragraph2) : (0, _rem.default)(_designTokens.typography.size.alias.default);
 }, function (_ref2) {
   var _ref2$hasBadge = _ref2.hasBadge,
       hasBadge = _ref2$hasBadge === void 0 ? false : _ref2$hasBadge,

package/lib/components/Filter/index.js

@@ -72,7 +72,7 @@ var Filter = (0, _react.forwardRef)(function (props, ref) {
   }, [onClick, toggleStatus]);
   return _react.default.createElement(_StyledFilter.default, _extends({
     ref: ref,
-    kind: kind,
+    kind: variant === 'simple' ? 'primary' : kind,
     variant: variant,
     tabIndex: 0,
     active: filterActive || active,

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

@@ -53,4 +53,18 @@ describe('Filter', function () {
       expect(onClick).not.toHaveBeenCalled();
     });
   });
+  describe('kind', function () {
+    ['primary', 'primaryAlt', 'secondary'].forEach(function (kind) {
+      it("Renders ".concat(kind, " kind as expected"), function () {
+        var _render4 = (0, _react2.render)(_react.default.createElement(_.default, {
+          variant: "action",
+          text: "text sample",
+          kind: kind
+        })),
+            container = _render4.container;
+
+        expect(container).toMatchSnapshot();
+      });
+    });
+  });
 });

package/lib/components/Filter/kind.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"kind.d.ts","sourceRoot":"","sources":["../../../src/components/Filter/kind.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,gBAAgB,CAAC;AAInC,eAAO,MAAM,WAAW,wDAQvB,CAAC;AAEF,eAAO,MAAM,YAAY,wDAWxB,CAAC;AAEF,eAAO,MAAM,cAAc,wDAI1B,CAAC;AAEF,QAAA,MAAM,UAAU,kBAUd,CAAC;AAEH,eAAe,UAAU,CAAC"}
+{"version":3,"file":"kind.d.ts","sourceRoot":"","sources":["../../../src/components/Filter/kind.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,gBAAgB,CAAC;AAInC,eAAO,MAAM,WAAW,wDAQvB,CAAC;AAEF,eAAO,MAAM,YAAY,wDAWxB,CAAC;AAEF,eAAO,MAAM,cAAc,wDAE1B,CAAC;AAEF,QAAA,MAAM,UAAU,kBAUd,CAAC;AAEH,eAAe,UAAU,CAAC"}

package/lib/components/Filter/kind.js

@@ -25,7 +25,7 @@ var hoverStyles = (0, _styledComponents.css)(["color:", ";background-color:", ";
 exports.hoverStyles = hoverStyles;
 var primaryStyle = (0, _styledComponents.css)(["border:", " solid ", ";&:hover{", ";}&:disabled:disabled{background-color:transparent;color:", ";}"], (0, _rem.default)(1), (0, _toColorString.default)(_color.default.base.quarterMoon), hoverStyles, (0, _toColorString.default)(_color.default.opacity.charcoal40));
 exports.primaryStyle = primaryStyle;
-var secondaryStyle = (0, _styledComponents.css)(["height:", ";font-size:", ";"], (0, _rem.default)(_designTokens.spacing.base * 2.4), (0, _rem.default)(_designTokens.typography.size.alias.paragraph2));
+var secondaryStyle = (0, _styledComponents.css)(["height:", ";"], (0, _rem.default)(_designTokens.spacing.base * 2.4));
 exports.secondaryStyle = secondaryStyle;
 
 var kindStyles = _styledTheming.default.variants(_ConfigProvider.themeKeys.mode, 'kind', {

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

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Filter/schema.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAEvC,eAAO,MAAM,yBAAyB;;;;CA0CpC,CAAC;AAEH,QAAA,MAAM,MAAM,KAAsC,CAAC;AAInD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Filter/schema.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAEvC,eAAO,MAAM,yBAAyB;;;;CA4CpC,CAAC;AAEH,QAAA,MAAM,MAAM,KAAsC,CAAC;AAInD,eAAe,MAAM,CAAC"}

package/lib/components/Filter/schema.js

@@ -21,7 +21,7 @@ var makeFilterSchemaPropTypes = function makeFilterSchemaPropTypes(extensions) {
     badgeColor: _reactDesc.PropTypes.string.description('Which color to use as background for the icon. It always displays when an icon is provided. Only usable with the "simple" variant').defaultValue('information'),
     count: _reactDesc.PropTypes.number.description("The Filter's count, displayed to the left of the text. When not provided, no count is rendered."),
     disabled: _reactDesc.PropTypes.bool.description("The Filter's displayed status of disabled or enabled.").defaultValue('false'),
-    kind: _reactDesc.PropTypes.oneOf(['primary', 'secondary']).defaultValue('primary'),
+    kind: _reactDesc.PropTypes.oneOf(['primary', 'primaryAlt', 'secondary']).defaultValue('primary'),
     variant: _reactDesc.PropTypes.oneOf(['simple', 'action']).description('Use the variant to define the type of filter that you want to use').defaultValue('simple'),
     startIcon: _reactDesc.PropTypes.element.description('Which `iconix` icon to render before the filter text, only usable with the "action" variant'),
     endIcon: _reactDesc.PropTypes.element.description('Which `iconix` icon to render after the filter text, only usable with the "action" variant')

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

@@ -3,7 +3,7 @@ import { IconProps } from '@decisiv/iconix';
 import { CommonUIColorKeys } from '../../utils/commonUIColors';
 import { TranslatedText } from '../../utils/useTranslations';
 export declare type Variant = 'simple' | 'action';
-export declare type Kind = 'primary' | 'secondary';
+export declare type Kind = 'primary' | 'primaryAlt' | 'secondary';
 export declare type IconComponent = (props: IconProps) => JSX.Element;
 export interface BaseFilterProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     kind?: Kind;

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Filter/types.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAE7D,oBAAY,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAC1C,oBAAY,IAAI,GAAG,SAAS,GAAG,WAAW,CAAC;AAC3C,oBAAY,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAE9D,MAAM,WAAW,eACf,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC/C,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,cAAc,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,OAAO,EAAE,QAAQ,CAAC;IAClB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,OAAO,EAAE,QAAQ,CAAC;IAClB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,UAAU,CAAC,EAAE,KAAK,CAAC;CACpB;AAED,oBAAY,WAAW,GAAG,iBAAiB,GAAG,iBAAiB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Filter/types.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAE7D,oBAAY,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAC1C,oBAAY,IAAI,GAAG,SAAS,GAAG,YAAY,GAAG,WAAW,CAAC;AAC1D,oBAAY,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAE9D,MAAM,WAAW,eACf,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC/C,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,cAAc,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,OAAO,EAAE,QAAQ,CAAC;IAClB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,OAAO,EAAE,QAAQ,CAAC;IAClB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,UAAU,CAAC,EAAE,KAAK,CAAC;CACpB;AAED,oBAAY,WAAW,GAAG,iBAAiB,GAAG,iBAAiB,CAAC"}

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

@@ -8,7 +8,7 @@ export declare const fontSize: (p: {
     size?: import("../../atoms/OptionsList/types").Size;
 }) => SimpleInterpolation;
 export declare const IconContainer: import("styled-components").StyledComponent<"span", any, {
-    position: "left" | "right";
+    position: import("../Button").IconPosition;
     withText: boolean;
 }, never>;
 export declare const sharedLinkStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<{

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

@@ -0,0 +1,6 @@
+import React, { PropsWithChildren } from 'react';
+import { ModalProps } from './types';
+declare type ManagerProps = Pick<ModalProps, 'onClose' | 'visible'>;
+declare function Manager({ onClose, visible, children, }: PropsWithChildren<ManagerProps>): React.ReactPortal | null;
+export default Manager;
+//# sourceMappingURL=Manager.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Manager.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Manager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA0B,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAIzE,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAGrC,aAAK,YAAY,GAAG,IAAI,CAAC,UAAU,EAAE,SAAS,GAAG,SAAS,CAAC,CAAC;AAE5D,iBAAS,OAAO,CAAC,EACf,OAAO,EACP,OAAO,EACP,QAAQ,GACT,EAAE,iBAAiB,CAAC,YAAY,CAAC,GAAG,KAAK,CAAC,WAAW,GAAG,IAAI,CA+B5D;AAED,eAAe,OAAO,CAAC"}

package/lib/components/Modal/Manager.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _ConfigProvider = require("../../providers/ConfigProvider");
+
+var _canUseDOM = _interopRequireDefault(require("../../utils/canUseDOM"));
+
+var _utils = require("./utils");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function Manager(_ref) {
+  var onClose = _ref.onClose,
+      visible = _ref.visible,
+      children = _ref.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(children);
+  }
+
+  return null;
+}
+
+var _default = Manager;
+exports.default = _default;

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

@@ -0,0 +1,12 @@
+import React, { RefObject } from 'react';
+import { sizes } from '@decisiv/breakpoint-observer';
+import { ModalProps } from './types';
+import { WizardProps } from '../Wizard';
+declare type Props = Pick<ModalProps, 'id' | 'onClose' | 'zIndex'> & {
+    size?: WizardProps['size'];
+    breakpoint: keyof typeof sizes | undefined;
+    observedElementRef: RefObject<HTMLDivElement>;
+};
+declare const ResponsiveModalWrapper: ({ children, breakpoint, id, size, onClose, zIndex, observedElementRef, }: React.PropsWithChildren<Props>) => JSX.Element;
+export default ResponsiveModalWrapper;
+//# sourceMappingURL=ResponsiveModalWrapper.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ResponsiveModalWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/ResponsiveModalWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAkC,SAAS,EAAE,MAAM,OAAO,CAAC;AACzE,OAAO,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC;AAGrD,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAGrC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAExC,aAAK,KAAK,GAAG,IAAI,CAAC,UAAU,EAAE,IAAI,GAAG,SAAS,GAAG,QAAQ,CAAC,GAAG;IAC3D,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,UAAU,EAAE,MAAM,OAAO,KAAK,GAAG,SAAS,CAAC;IAC3C,kBAAkB,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;CAC/C,CAAC;AAEF,QAAA,MAAM,sBAAsB,2HA0D3B,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/lib/components/Modal/ResponsiveModalWrapper.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _components = require("./components");
+
+var _useUniqueId = _interopRequireDefault(require("../../utils/useUniqueId"));
+
+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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
+
+function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var ResponsiveModalWrapper = function ResponsiveModalWrapper(_ref) {
+  var children = _ref.children,
+      breakpoint = _ref.breakpoint,
+      id = _ref.id,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'normal' : _ref$size,
+      onClose = _ref.onClose,
+      _ref$zIndex = _ref.zIndex,
+      zIndex = _ref$zIndex === void 0 ? 100 : _ref$zIndex,
+      observedElementRef = _ref.observedElementRef;
+  // 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();
+  }, []);
+
+  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);
+  return _react.default.createElement(_components.Overlay, {
+    onClick: handleOverlayClick,
+    ref: observedElementRef,
+    zIndex: zIndex
+  }, _react.default.createElement(_components.Body, {
+    widthSize: size,
+    "aria-describedby": modalContentId,
+    "aria-labelledby": modalHeaderId,
+    "aria-modal": "true",
+    size: breakpoint,
+    id: uuid,
+    onClick: handleBodyClick,
+    ref: containerRef,
+    role: "dialog"
+  }, children));
+};
+
+var _default = ResponsiveModalWrapper;
+exports.default = _default;

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

@@ -4,6 +4,7 @@ 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;

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":";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"}
+{"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

@@ -35,14 +35,14 @@ 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).attrs({

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;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"}
+{"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"}