@decisiv/ui-components 2.0.1-alpha.174 → 2.0.1-alpha.176

package/lib/atoms/InputField/index.d.ts

@@ -42,7 +42,7 @@ export interface BaseInputFieldProps {
     showCharacterCount?: boolean;
     hideLabel?: boolean;
     style?: React.CSSProperties;
-    value: string;
+    value?: string;
     warningMessage?: string;
     isTextArea?: boolean;
     multiple?: boolean;

package/lib/atoms/InputField/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/InputField/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EACZ,aAAa,EAEb,GAAG,EACH,sBAAsB,EAGvB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAoB5C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAE7C,MAAM,WAAW,mBAAmB;IAClC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC;IACpC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,CAAC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;IACzC,gBAAgB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA2KD,QAAA,MAAM,iBAAiB,EAAE,sBAAsB,CAC7C,GAAG,CAAC,GAAG,CAAC,EACR,mBAAmB,CACK,CAAC;AAQ3B,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/InputField/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EACZ,aAAa,EAEb,GAAG,EACH,sBAAsB,EAGvB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAoB5C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAE7C,MAAM,WAAW,mBAAmB;IAClC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC;IACpC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,CAAC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;IACzC,gBAAgB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA2KD,QAAA,MAAM,iBAAiB,EAAE,sBAAsB,CAC7C,GAAG,CAAC,GAAG,CAAC,EACR,mBAAmB,CACK,CAAC;AAQ3B,eAAe,iBAAiB,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/lib/components/TagInput/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { BaseInputFieldProps } from '../../atoms/InputField';
+export interface TagInputProps extends Omit<BaseInputFieldProps, 'onChange' | 'children' | 'value' | 'hideLabel'> {
+    hiddenLabel?: boolean;
+    defaultTags?: string[];
+    tags?: string[];
+    onChange?: (value: string[]) => void;
+}
+export default function TagInput({ defaultTags, tags, onChange, disabled, readOnly, label, hiddenLabel, ...props }: TagInputProps): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TagInput/index.tsx"],"names":[],"mappings":";AAeA,OAAmB,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAMzE,MAAM,WAAW,aACf,SAAQ,IAAI,CACV,mBAAmB,EACnB,UAAU,GAAG,UAAU,GAAG,OAAO,GAAG,WAAW,CAChD;IACD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACtC;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,WAAgB,EAChB,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,WAAW,EACX,GAAG,KAAK,EACT,EAAE,aAAa,eAqMf"}

package/lib/components/TagInput/index.js

@@ -0,0 +1,217 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = TagInput;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
+
+var _spacing = _interopRequireDefault(require("@decisiv/design-tokens/lib/spacing"));
+
+var _Times = _interopRequireDefault(require("@decisiv/iconix/lib/components/Times"));
+
+var _useTranslations = _interopRequireDefault(require("../../utils/useTranslations"));
+
+var _InputField = _interopRequireDefault(require("../../atoms/InputField"));
+
+var _Tag = _interopRequireDefault(require("../Tag"));
+
+var _Button = _interopRequireDefault(require("../Button"));
+
+var _styles = require("./styles");
+
+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 _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
+
+function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
+
+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; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+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; }
+
+function TagInput(_ref) {
+  var _ref$defaultTags = _ref.defaultTags,
+      defaultTags = _ref$defaultTags === void 0 ? [] : _ref$defaultTags,
+      tags = _ref.tags,
+      onChange = _ref.onChange,
+      disabled = _ref.disabled,
+      readOnly = _ref.readOnly,
+      label = _ref.label,
+      hiddenLabel = _ref.hiddenLabel,
+      props = _objectWithoutProperties(_ref, ["defaultTags", "tags", "onChange", "disabled", "readOnly", "label", "hiddenLabel"]);
+
+  var clearButtonRef = (0, _react.useRef)(null);
+  var inputRef = (0, _react.useRef)(null);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      inputVisible = _useState2[0],
+      setInputVisible = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(defaultTags),
+      _useState4 = _slicedToArray(_useState3, 2),
+      innerTags = _useState4[0],
+      setInnerTags = _useState4[1];
+
+  var translate = (0, _useTranslations.default)();
+  var isControlled = (0, _react.useMemo)(function () {
+    return !!tags;
+  }, [tags]);
+  var tagsToRender = (0, _react.useMemo)(function () {
+    return tags || innerTags;
+  }, [tags, innerTags]);
+  var isDisabled = disabled || readOnly;
+  var handleNotifyChange = (0, _react.useCallback)(function (value) {
+    if (!onChange) return;
+    onChange(value);
+  }, [onChange]);
+  var handleAddTag = (0, _react.useCallback)(function (rawString) {
+    var text = rawString.replace(/\s+/g, ' ').trim();
+    if (!text || tagsToRender.includes(text)) return;
+
+    if (isControlled) {
+      handleNotifyChange([].concat(_toConsumableArray(tags), [text]));
+      return;
+    }
+
+    setInnerTags(function (oldState) {
+      var newState = [].concat(_toConsumableArray(oldState), [text]);
+      handleNotifyChange(newState);
+      return newState;
+    });
+  }, [handleNotifyChange, tags, tagsToRender, isControlled]);
+  var handleRemoveOnBackspace = (0, _react.useCallback)(function () {
+    if (isControlled) {
+      handleNotifyChange(_toConsumableArray(tags.slice(0, -1)));
+      return;
+    }
+
+    setInnerTags(function (oldState) {
+      var newState = _toConsumableArray(oldState.slice(0, -1));
+
+      handleNotifyChange(newState);
+      return newState;
+    });
+  }, [isControlled, handleNotifyChange, tags]);
+  var handleRemoveTag = (0, _react.useCallback)(function (text) {
+    if (isControlled) {
+      handleNotifyChange(tags.filter(function (tag) {
+        return tag !== text;
+      }));
+      return;
+    }
+
+    setInnerTags(function (oldState) {
+      var newState = oldState.filter(function (tag) {
+        return tag !== text;
+      });
+      handleNotifyChange(newState);
+      return newState;
+    });
+  }, [isControlled, handleNotifyChange, tags]);
+  var handleOnKeyUp = (0, _react.useCallback)(function (e) {
+    e.stopPropagation();
+    var text = e.target.value;
+
+    if (!text && e.key === 'Backspace') {
+      handleRemoveOnBackspace();
+    }
+
+    if (text && e.key === 'Enter') {
+      e.preventDefault();
+      handleAddTag(text);
+      e.target.value = '';
+    }
+  }, [handleAddTag, handleRemoveOnBackspace]);
+  var handleFocus = (0, _react.useCallback)(function () {
+    setInputVisible(true);
+  }, []);
+  var handleBlur = (0, _react.useCallback)(function (e) {
+    // Suppress event if clicking in the X button
+    if (e.relatedTarget === clearButtonRef.current) {
+      return;
+    }
+
+    var text = e.target.value;
+    handleAddTag(text);
+    e.target.value = '';
+    setInputVisible(false);
+  }, [handleAddTag]);
+  var handleOnClearButtonClick = (0, _react.useCallback)(function () {
+    if (inputRef.current) {
+      inputRef.current.value = '';
+    }
+  }, []);
+  return _react.default.createElement(_styles.Wrapper, null, _react.default.createElement(_InputField.default, _extends({
+    ref: inputRef,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    disabled: disabled,
+    readOnly: readOnly,
+    label: label,
+    hideLabel: hiddenLabel
+  }, props), function (innerProps) {
+    return _react.default.createElement(_styles.Container, null, tagsToRender.map(function (tag) {
+      return _react.default.createElement(_Tag.default, {
+        key: tag,
+        size: "small",
+        text: tag,
+        palette: "pastel",
+        color: isDisabled ? 'licoriceMousse' : 'information',
+        action: isDisabled ? undefined : function () {
+          return handleRemoveTag(tag);
+        },
+        actionIntent: "danger",
+        actionAttributes: {
+          'aria-label': translate(undefined, 'tagInput.tagAriaLabel', {
+            tagName: tag
+          })
+        },
+        actionIcon: isDisabled ? undefined : _Times.default
+      });
+    }), _react.default.createElement(_styles.InputWrapper, null, _react.default.createElement(_styles.Input, _extends({}, innerProps, {
+      isVisible: inputVisible,
+      onKeyUp: handleOnKeyUp,
+      placeholder: " "
+    })), _react.default.createElement(_Button.default, {
+      ref: clearButtonRef,
+      style: {
+        display: 'none',
+        position: 'absolute',
+        right: 0,
+        top: 0,
+        bottom: 0,
+        paddingRight: (0, _rem.default)(_spacing.default.base * 0.8),
+        paddingLeft: (0, _rem.default)(_spacing.default.base * 0.8)
+      },
+      "aria-label": translate(undefined, 'tagInput.clearButton', {
+        inputLabel: label
+      }),
+      intent: "danger",
+      icon: _Times.default,
+      size: "small",
+      variant: "ghost",
+      onClick: handleOnClearButtonClick
+    })));
+  }));
+}