@decisiv/ui-components 2.0.1-alpha.20 → 2.0.1-alpha.201

package/lib/atoms/RequiredIcon.d.ts

@@ -0,0 +1,9 @@
+import { RefForwardingComponent, RefAttributes } from 'react';
+interface Props {
+    marginLeft?: string;
+    marginTop?: string;
+}
+declare type RequiredIconType = RefForwardingComponent<HTMLDivElement, RefAttributes<HTMLDivElement> & Props>;
+declare const RequiredIcon: RequiredIconType;
+export default RequiredIcon;
+//# sourceMappingURL=RequiredIcon.d.ts.map

package/lib/atoms/RequiredIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RequiredIcon.d.ts","sourceRoot":"","sources":["../../src/atoms/RequiredIcon.tsx"],"names":[],"mappings":"AACA,OAAc,EACZ,sBAAsB,EAGtB,aAAa,EACd,MAAM,OAAO,CAAC;AAOf,UAAU,KAAK;IACb,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAQD,aAAK,gBAAgB,GAAG,sBAAsB,CAC5C,cAAc,EACd,aAAa,CAAC,cAAc,CAAC,GAAG,KAAK,CACtC,CAAC;AAEF,QAAA,MAAM,YAAY,EAAE,gBASnB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/atoms/{InputField/RequiredIcon.js → RequiredIcon.js}

@@ -21,10 +21,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 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); }
 
-var RequiredIconContainer = _styledComponents.default.span.withConfig({
+var RequiredIconContainer = _styledComponents.default.div.withConfig({
   displayName: "RequiredIcon__RequiredIconContainer",
-  componentId: "d5jm3s-0"
-})(["margin-left:5px;"]);
+  componentId: "sc-18pnvm5-0"
+})(["display:inline;margin-left:", ";margin-top:", ";"], function (props) {
+  return props.marginLeft || '3px';
+}, function (props) {
+  return props.marginTop || '0px';
+});
 
 var RequiredIcon = (0, _react.forwardRef)(function (props, ref) {
   return _react.default.createElement(RequiredIconContainer, _extends({}, props, {

package/lib/components/Accordion/types.js

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

package/lib/components/Accordion/useAccordion/types.js

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

package/lib/components/Alert/Container.d.ts

@@ -0,0 +1,201 @@
+/// <reference types="react" />
+import intents from './intents';
+import { FlexComponentProps } from '../Flex';
+interface ContainerProps extends FlexComponentProps {
+    intent?: keyof typeof intents;
+}
+declare const Container: import("styled-components").StyledComponent<"div", any, Partial<{
+    readonly alignContent?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly alignItems?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly alignSelf?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly flex?: string | number | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("react").ReactText, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly flexBasis?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly flexDirection?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").FlexDirectionProperty, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly flexGrow?: number | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").GlobalsNumber, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly flexShrink?: number | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").GlobalsNumber, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly flexWrap?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "nowrap" | "wrap" | "wrap-reverse" | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").FlexWrapProperty, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly justifyContent?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly justifyItems?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly justifySelf?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly order?: number | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").GlobalsNumber, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly size?: "XS" | "SM" | "MD" | "LG" | "XL" | undefined;
+}> & Partial<{
+    readonly margin: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly marginBottom: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly marginLeft: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly marginRight: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly marginTop: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly marginX: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly marginY: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly padding: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly paddingBottom: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly paddingLeft: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly paddingRight: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly paddingTop: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly paddingX: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly paddingY: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+}> & ContainerProps, never>;
+export default Container;
+//# sourceMappingURL=Container.d.ts.map

package/lib/components/Alert/Container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/Container.ts"],"names":[],"mappings":";AAIA,OAAO,OAAwB,MAAM,WAAW,CAAC;AAEjD,OAAa,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAEnD,UAAU,cAAe,SAAQ,kBAAkB;IACjD,MAAM,CAAC,EAAE,MAAM,OAAO,OAAO,CAAC;CAC/B;AAGD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAcd,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/components/Alert/Container.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
+
+var _spacing = _interopRequireDefault(require("@decisiv/design-tokens/lib/spacing"));
+
+var _intents = require("./intents");
+
+var _Flex = _interopRequireDefault(require("../Flex"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// @ts-ignore
+var Container = (0, _styledComponents.default)(_Flex.default).withConfig({
+  displayName: "Container",
+  componentId: "egscd9-0"
+})(["border-left-style:solid;border-left-width:", ";border-radius:", ";text-align:left;& > svg{margin-top:", ";height:", ";width:", ";}", ""], (0, _rem.default)(_spacing.default.base * 0.2), (0, _rem.default)(_spacing.default.base * 0.2), (0, _rem.default)(_spacing.default.base * 0.1), (0, _rem.default)(_spacing.default.base * 1.6), (0, _rem.default)(_spacing.default.base * 1.6), _intents.intentStyle);
+var _default = Container;
+exports.default = _default;

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ButtonProps } from '../Button';
+declare const StyledButton: import("styled-components").StyledComponent<import("react").RefForwardingComponent<HTMLButtonElement, ButtonProps>, any, ButtonProps, never>;
+export default StyledButton;
+//# sourceMappingURL=StyledButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StyledButton.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/StyledButton.ts"],"names":[],"mappings":";AAIA,OAAe,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAEhD,QAAA,MAAM,YAAY,8IAUjB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/Alert/StyledButton.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
+
+var _spacing = _interopRequireDefault(require("@decisiv/design-tokens/lib/spacing"));
+
+var _Button = _interopRequireDefault(require("../Button"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var StyledButton = (0, _styledComponents.default)(_Button.default).withConfig({
+  displayName: "StyledButton",
+  componentId: "sc-128m29n-0"
+})(["margin-left:auto;height:", ";width:", ";& svg{height:", ";width:", ";}"], (0, _rem.default)(_spacing.default.base * 1.2), (0, _rem.default)(_spacing.default.base * 1.2), (0, _rem.default)(_spacing.default.base * 1.2), (0, _rem.default)(_spacing.default.base * 1.2));
+var _default = StyledButton;
+exports.default = _default;

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

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import { AlertProps } from './types';
+export { AlertProps };
+declare function Alert({ 'aria-label': ariaLabel, children, description, dismissable, icon, intent, onDismissClick, title, tooltipText, }: AlertProps): JSX.Element;
+declare namespace Alert {
+    var propTypes: {
+        'aria-label': import("prop-types").Requireable<string>;
+        description: import("prop-types").Requireable<string>;
+        dismissable: import("prop-types").Requireable<boolean>;
+        icon: import("prop-types").Requireable<import("prop-types").ReactElementLike>;
+        intent: import("prop-types").Requireable<string>;
+        title: import("prop-types").Validator<string>;
+        onDismissClick: import("prop-types").Requireable<(...args: any[]) => any>;
+        tooltipText: import("prop-types").Requireable<string>;
+    };
+    var defaultProps: {
+        'aria-label': undefined;
+        description: undefined;
+        dismissable: boolean;
+        icon: undefined;
+        intent: string;
+        onDismissClick: undefined;
+        tooltipText: undefined;
+    };
+}
+export default Alert;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/index.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,UAAU,EAA2B,MAAM,SAAS,CAAC;AAE9D,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,iBAAwB,KAAK,CAAC,EAC5B,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,WAAW,EACX,WAAW,EACX,IAAI,EACJ,MAAsB,EACtB,cAAc,EACd,KAAK,EACL,WAAW,GACZ,EAAE,UAAU,GAAG,GAAG,CAAC,OAAO,CAwD1B;kBAlEuB,KAAK;;;;;;;;;;;;;;;;;;;;;eAAL,KAAK"}

package/lib/components/Alert/index.js

@@ -0,0 +1,112 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Alert;
+Object.defineProperty(exports, "AlertProps", {
+  enumerable: true,
+  get: function get() {
+    return _types.AlertProps;
+  }
+});
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
+
+var _Times = _interopRequireDefault(require("@decisiv/iconix/lib/components/Times"));
+
+var _useTranslations = _interopRequireDefault(require("../../utils/useTranslations"));
+
+var _StyledButton = _interopRequireDefault(require("./StyledButton"));
+
+var _Container = _interopRequireDefault(require("./Container"));
+
+var _Flex = _interopRequireDefault(require("../Flex"));
+
+var _Tooltip = _interopRequireDefault(require("../Tooltip"));
+
+var _Typography = require("../Typography");
+
+var _intents = _interopRequireDefault(require("./intents"));
+
+var _types = require("./types");
+
+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; }
+
+function Alert(_ref) {
+  var ariaLabel = _ref['aria-label'],
+      children = _ref.children,
+      description = _ref.description,
+      dismissable = _ref.dismissable,
+      icon = _ref.icon,
+      _ref$intent = _ref.intent,
+      intent = _ref$intent === void 0 ? 'information' : _ref$intent,
+      onDismissClick = _ref.onDismissClick,
+      title = _ref.title,
+      tooltipText = _ref.tooltipText;
+
+  var _useState = (0, _react.useState)(true),
+      _useState2 = _slicedToArray(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  var translate = (0, _useTranslations.default)();
+  var borderColor = (0, _toColorString.default)(_intents.default[intent].borderColor);
+  var Icon = icon || _intents.default[intent].icon;
+
+  var handleClick = function handleClick() {
+    setOpen(false);
+    if (onDismissClick) onDismissClick();
+  };
+
+  if (!open) {
+    return _react.default.createElement(_react.default.Fragment, null);
+  }
+
+  return _react.default.createElement(_Container.default, {
+    flex: 1,
+    paddingLeft: 1.5,
+    paddingRight: 1.6,
+    paddingTop: 1.3,
+    paddingBottom: 1.1,
+    intent: intent
+  }, _react.default.createElement(Icon, {
+    color: borderColor
+  }), _react.default.createElement(_Flex.default, {
+    flexDirection: "column",
+    marginLeft: 1,
+    flex: 1
+  }, _react.default.createElement(_Flex.default, {
+    alignItems: "center",
+    flex: 1
+  }, _react.default.createElement(_Typography.P, {
+    weight: "semibold",
+    marginRight: 1
+  }, title), dismissable && _react.default.createElement(_Tooltip.default, {
+    placement: "auto",
+    target: // eslint-disable-next-line react/jsx-wrap-multilines
+    _react.default.createElement(_StyledButton.default, {
+      variant: "ghost",
+      icon: _Times.default,
+      onClick: handleClick,
+      "aria-label": translate(ariaLabel, 'alert.closeAlert')
+    })
+  }, translate(tooltipText, 'alert.close'))), _react.default.createElement(_Typography.P, {
+    size: "small"
+  }, children || description)));
+}
+
+Alert.propTypes = _types.propTypes;
+Alert.defaultProps = _types.defaultProps;

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

@@ -0,0 +1,79 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _ = _interopRequireDefault(require("."));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+describe('Alert', function () {
+  it('renders Title', function () {
+    var _render = (0, _react2.render)(_react.default.createElement(_.default, {
+      title: "Alert Title"
+    })),
+        getByText = _render.getByText;
+
+    expect(getByText(/alert title/i)).toBeInTheDocument();
+  });
+  describe('when has description', function () {
+    it('renders description', function () {
+      var _render2 = (0, _react2.render)(_react.default.createElement(_.default, {
+        title: "Alert Title",
+        description: "Alert Description"
+      })),
+          getByText = _render2.getByText;
+
+      expect(getByText(/alert description/i)).toBeInTheDocument();
+    });
+    it('renders children as description', function () {
+      var _render3 = (0, _react2.render)(_react.default.createElement(_.default, {
+        title: "Alert Title"
+      }, "Alert Description")),
+          getByText = _render3.getByText;
+
+      expect(getByText(/alert description/i)).toBeInTheDocument();
+    });
+  });
+  describe('when it is dismissable', function () {
+    it('renders close button', function () {
+      var _render4 = (0, _react2.render)(_react.default.createElement(_.default, {
+        title: "Alert Title",
+        dismissable: true,
+        "aria-label": "Close Alert"
+      })),
+          getByLabelText = _render4.getByLabelText;
+
+      expect(getByLabelText(/close alert/i)).toBeInTheDocument();
+    });
+    it('closes alert when clicking on dismiss button', function () {
+      var _render5 = (0, _react2.render)(_react.default.createElement(_.default, {
+        title: "Alert Title",
+        dismissable: true,
+        "aria-label": "Close Alert"
+      })),
+          getByLabelText = _render5.getByLabelText,
+          queryByText = _render5.queryByText;
+
+      _react2.fireEvent.click(getByLabelText(/close alert/i));
+
+      expect(queryByText(/alert title/i)).not.toBeInTheDocument();
+    });
+    it('triggers onDismissClick when clicking on dismiss button', function () {
+      var onDismissClick = jest.fn();
+
+      var _render6 = (0, _react2.render)(_react.default.createElement(_.default, {
+        title: "Alert Title",
+        dismissable: true,
+        "aria-label": "Close Alert",
+        onDismissClick: onDismissClick
+      })),
+          getByLabelText = _render6.getByLabelText;
+
+      _react2.fireEvent.click(getByLabelText(/close alert/i));
+
+      expect(onDismissClick).toHaveBeenCalled();
+    });
+  });
+});

package/lib/components/Alert/intents.d.ts

@@ -0,0 +1,13 @@
+import theme from 'styled-theming';
+import { Color } from '@decisiv/design-tokens/lib/color';
+import InfoCircle from '@decisiv/iconix/lib/components/InfoCircle';
+interface IntentRecord {
+    color: Color;
+    borderColor: Color;
+    icon: typeof InfoCircle;
+}
+declare type IntentType = Record<string, IntentRecord>;
+declare const intents: IntentType;
+export declare const intentStyle: theme.VariantSet;
+export default intents;
+//# sourceMappingURL=intents.d.ts.map

package/lib/components/Alert/intents.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"intents.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/intents.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,gBAAgB,CAAC;AAGnC,OAAc,EAAE,KAAK,EAAE,MAAM,kCAAkC,CAAC;AAKhE,OAAO,UAAU,MAAM,2CAA2C,CAAC;AAKnE,UAAU,YAAY;IACpB,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,EAAE,KAAK,CAAC;IACnB,IAAI,EAAE,OAAO,UAAU,CAAC;CACzB;AAED,aAAK,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;AAE/C,QAAA,MAAM,OAAO,EAAE,UAqBd,CAAC;AAEF,eAAO,MAAM,WAAW,kBAyCtB,CAAC;AAEH,eAAe,OAAO,CAAC"}

package/lib/components/Alert/intents.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.intentStyle = void 0;
+
+var _styledTheming = _interopRequireDefault(require("styled-theming"));
+
+var _styledComponents = require("styled-components");
+
+var _color = _interopRequireDefault(require("@decisiv/design-tokens/lib/color"));
+
+var _CheckCircle = _interopRequireDefault(require("@decisiv/iconix/lib/components/CheckCircle"));
+
+var _ExclamationCircle = _interopRequireDefault(require("@decisiv/iconix/lib/components/ExclamationCircle"));
+
+var _ExclamationTriangle = _interopRequireDefault(require("@decisiv/iconix/lib/components/ExclamationTriangle"));
+
+var _InfoCircle = _interopRequireDefault(require("@decisiv/iconix/lib/components/InfoCircle"));
+
+var _polished = require("polished");
+
+var _ConfigProvider = require("../../providers/ConfigProvider");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var intents = {
+  information: {
+    color: _color.default.status.information.light,
+    borderColor: _color.default.status.information.medium,
+    icon: _InfoCircle.default
+  },
+  success: {
+    color: _color.default.status.success.light,
+    borderColor: _color.default.status.success.medium,
+    icon: _CheckCircle.default
+  },
+  warning: {
+    color: _color.default.status.warning.light,
+    borderColor: _color.default.status.warning.medium,
+    icon: _ExclamationCircle.default
+  },
+  danger: {
+    color: _color.default.status.danger.light,
+    borderColor: _color.default.status.danger.medium,
+    icon: _ExclamationTriangle.default
+  }
+};
+
+var intentStyle = _styledTheming.default.variants(_ConfigProvider.themeKeys.mode, 'intent', {
+  information: {
+    light: (0, _styledComponents.css)(["background-color:", ";border-left-color:", ";"], (0, _polished.toColorString)(intents.information.color), (0, _polished.toColorString)(intents.information.borderColor)),
+    dark: (0, _styledComponents.css)(["background-color:", ";border-left-color:", ";"], (0, _polished.toColorString)(intents.information.color), (0, _polished.toColorString)(intents.information.borderColor))
+  },
+  success: {
+    light: (0, _styledComponents.css)(["background-color:", ";border-left-color:", ";"], (0, _polished.toColorString)(intents.success.color), (0, _polished.toColorString)(intents.success.borderColor)),
+    dark: (0, _styledComponents.css)(["background-color:", ";border-left-color:", ";"], (0, _polished.toColorString)(intents.success.color), (0, _polished.toColorString)(intents.success.borderColor))
+  },
+  warning: {
+    light: (0, _styledComponents.css)(["background-color:", ";border-left-color:", ";"], (0, _polished.toColorString)(intents.warning.color), (0, _polished.toColorString)(intents.warning.borderColor)),
+    dark: (0, _styledComponents.css)(["background-color:", ";border-left-color:", ";"], (0, _polished.toColorString)(intents.warning.color), (0, _polished.toColorString)(intents.warning.borderColor))
+  },
+  danger: {
+    light: (0, _styledComponents.css)(["background-color:", ";border-left-color:", ";"], (0, _polished.toColorString)(intents.danger.color), (0, _polished.toColorString)(intents.danger.borderColor)),
+    dark: (0, _styledComponents.css)(["background-color:", ";border-left-color:", ";"], (0, _polished.toColorString)(intents.danger.color), (0, _polished.toColorString)(intents.danger.borderColor))
+  }
+});
+
+exports.intentStyle = intentStyle;
+var _default = intents;
+exports.default = _default;

package/lib/components/{Tabs/schema.tab.d.ts → Alert/schema.d.ts}

@@ -1,3 +1,3 @@
 declare const schema: any;
 export default schema;
-//# sourceMappingURL=schema.tab.d.ts.map
+//# sourceMappingURL=schema.d.ts.map

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

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