@decisiv/ui-components 2.0.1-alpha.13 → 2.0.1-alpha.133

package/lib/components/Link/index.js

@@ -3,48 +3,45 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.linkColorStyles = linkColorStyles;
 Object.defineProperty(exports, "makeLinkSchemaPropTypes", {
   enumerable: true,
   get: function get() {
     return _schema.makeLinkSchemaPropTypes;
   }
 });
+Object.defineProperty(exports, "LinkProps", {
+  enumerable: true,
+  get: function get() {
+    return _types.LinkProps;
+  }
+});
+Object.defineProperty(exports, "linkColorStyles", {
+  enumerable: true,
+  get: function get() {
+    return _styles.linkColorStyles;
+  }
+});
 exports.default = void 0;
 
 var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
 
-var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
-
-var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _react = _interopRequireWildcard(require("react"));
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _styledTheming = _interopRequireDefault(require("styled-theming"));
-
-var _designTokens = _interopRequireDefault(require("@decisiv/design-tokens"));
+var _react = require("react");
 
 var _propTypes2 = require("@decisiv/prop-types");
 
-var _ConfigProvider = require("../../providers/ConfigProvider");
-
-var _focusRingWithColor = _interopRequireDefault(require("../../utils/focusRingWithColor"));
-
 var _schema = _interopRequireWildcard(require("./schema"));
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+var _Link = _interopRequireDefault(require("./Link"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _types = require("./types");
 
-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 _styles = require("./styles");
 
-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 _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 _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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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; }
 
@@ -52,142 +49,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 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 _designTokens$color = _designTokens.default.color,
-    base = _designTokens$color.base,
-    interaction = _designTokens$color.interaction,
-    opacity = _designTokens$color.opacity,
-    fontSizes = _designTokens.default.typography.size.alias;
-/*
-  Notes about changing SVG fill color inside visited links:
-
-  1: Changing the color of an node that contains SVG with nodes set to have
-     fill="currentColor" does not work on Safari for :visited links (it does
-     work on Chrome and Firefox). To work around that, we instead change the
-     fill color of those SVG nodes to the be the same color as the visited link.
-*/
-
-function linkColorStyles(normalColor, visitedColor, hoverColor, focusColors) {
-  var focusStyles = focusColors ? (0, _styledComponents.css)(["&:focus{border-color:", ";", "}"], (0, _toColorString.default)(focusColors.border), (0, _focusRingWithColor.default)((0, _toColorString.default)(focusColors.shadow))) : (0, _styledComponents.css)(["&:focus{border-color:transparent;box-shadow:none;}"]);
-  var normalColorString = (0, _toColorString.default)(normalColor);
-  var visitedColorString = (0, _toColorString.default)(visitedColor);
-  var hoverColorString = (0, _toColorString.default)(hoverColor);
-  return (0, _styledComponents.css)(["&:link{color:", ";}", " &:visited,&:visited svg [fill='currentColor']{color:", ";fill:", ";}&:hover,&:hover svg [fill='currentColor']{color:", ";fill:", ";}"], normalColorString, focusStyles, visitedColorString, visitedColorString, hoverColorString, hoverColorString);
-}
-
-var modeStateColors = {
-  light: {
-    normal: interaction.pacificOcean,
-    visited: interaction.redWine,
-    hover: interaction.indianOcean,
-    focus: {
-      border: interaction.pacificOcean,
-      shadow: interaction.pacificOcean40
-    }
-  },
-  dark: {
-    normal: interaction.arcticOcean,
-    visited: interaction.roseWine,
-    hover: interaction.atlanticOcean,
-    focus: {
-      border: interaction.arcticOcean,
-      shadow: interaction.arcticOcean40
-    }
-  }
-};
-
-var modeColorStyles = function modeColorStyles(mode) {
-  var modeColors = modeStateColors[mode];
-  return linkColorStyles(modeColors.normal, modeColors.visited, modeColors.hover, modeColors.focus);
-};
-
-var invertedColorStyles = function invertedColorStyles() {
-  return linkColorStyles(base.snowWhite, _objectSpread({}, base.charcoal, {
-    alpha: 0.6
-  }), _objectSpread({}, base.snowWhite, {
-    alpha: 0.7
-  }), {
-    border: base.blackSheep,
-    shadow: opacity.charcoal40
-  });
-};
-
-var color = _styledTheming.default.variants(_ConfigProvider.themeKeys.mode, 'variant', {
-  normal: {
-    light: modeColorStyles('light'),
-    dark: modeColorStyles('dark')
-  },
-  inverted: {
-    light: invertedColorStyles(),
-    dark: invertedColorStyles()
-  }
-});
-
-var fontSize = function fontSize(p) {
-  var size = (0, _rem.default)(fontSizes[p.size === 'small' ? 'paragraph2' : 'default']);
-  return (0, _styledComponents.css)(["font-size:", ";"], size);
-};
-
-var iconMarginProp = {
-  left: 'margin-right',
-  right: 'margin-left'
-};
-
-var iconMargin = function iconMargin(props) {
-  if (props.withText) {
-    return "".concat(iconMarginProp[props.position], ": ").concat((0, _rem.default)(5));
-  }
-
-  return '';
-};
-
-var IconContainer = _styledComponents.default.span.withConfig({
-  displayName: "Link__IconContainer",
-  componentId: "xqzqjb-0"
-})(["line-height:0;", ";"], iconMargin);
-
-var linkStyles = (0, _styledComponents.css)(["cursor:pointer;background-color:transparent;align-items:baseline;border:1px solid transparent;border-radius:2px;display:inline-flex;text-decoration:underline;transition:none;", ";", ";&:hover{text-decoration:underline;}", "{align-self:center;}"], fontSize, color, IconContainer);
-
-var Link = function Link(props, ref) {
-  var _useConfig = (0, _ConfigProvider.useConfig)(),
-      linkRenderer = _useConfig.linkRenderer;
-  /* istanbul ignore next: iconPosition and size default values */
-
-
-  var text = props.text,
-      icon = props.icon,
-      _props$iconPosition = props.iconPosition,
-      iconPosition = _props$iconPosition === void 0 ? 'left' : _props$iconPosition,
-      _props$size = props.size,
-      size = _props$size === void 0 ? 'medium' : _props$size,
-      rest = _objectWithoutProperties(props, ["text", "icon", "iconPosition", "size"]);
-
-  var StyledLink = (0, _react.useMemo)(function () {
-    return (0, _styledComponents.default)(linkRenderer).withConfig({
-      displayName: "Link",
-      componentId: "xqzqjb-1"
-    })(["", ";"], linkStyles);
-  }, [linkRenderer]);
-  var LinkIcon = (0, _react.useMemo)(function () {
-    if (!icon) {
-      return null;
-    }
-
-    var Icon = icon;
-    return _react.default.createElement(IconContainer, {
-      "aria-hidden": true,
-      position: iconPosition,
-      withText: !!text
-    }, _react.default.createElement(Icon, {
-      size: size
-    }));
-  }, [icon, iconPosition, size, text]);
-  return _react.default.createElement(StyledLink, _extends({}, rest, {
-    ref: ref,
-    size: size
-  }), !!icon && iconPosition === 'left' && LinkIcon, text, !!icon && iconPosition === 'right' && LinkIcon);
-};
-
-var LinkWithRef = (0, _react.forwardRef)(Link); // @ts-ignore
+var LinkWithRef = (0, _react.forwardRef)(_Link.default); // @ts-ignore
 
 LinkWithRef.propTypes = _objectSpread({}, _schema.default.propTypes, {
   'aria-label': (0, _propTypes2.requireIf)(_propTypes.default.string, function (_ref) {
@@ -195,7 +57,7 @@ LinkWithRef.propTypes = _objectSpread({}, _schema.default.propTypes, {
     return (0, _isEmpty.default)(text);
   }),
   icon: _propTypes.default.elementType,
-  text: (0, _propTypes2.requireIf)(_propTypes.default.string, function (_ref2) {
+  text: (0, _propTypes2.requireIf)(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]), function (_ref2) {
     var icon = _ref2.icon;
     return (0, _isEmpty.default)(icon);
   })

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

@@ -13,54 +13,75 @@ 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); }
 
 describe('Link', function () {
-  var renderLink = function renderLink() {
-    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    return (0, _react2.render)(_react.default.createElement(_.default, _extends({
-      to: "/",
-      text: "text"
-    }, props)));
-  };
+  function testLinkVariations(baseLinkProps) {
+    var renderLink = function renderLink() {
+      var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      return (0, _react2.render)(_react.default.createElement(_.default, _extends({}, baseLinkProps, props)));
+    };
 
-  it('renders correctly', function () {
-    var _renderLink = renderLink(),
-        container = _renderLink.container;
+    it('renders correctly', function () {
+      var _renderLink = renderLink(),
+          container = _renderLink.container;
 
-    expect(container).toMatchSnapshot();
-  });
-  it('renders correctly with an Icon', function () {
-    var _renderLink2 = renderLink({
-      icon: _Home.default
-    }),
-        container = _renderLink2.container;
+      expect(container).toMatchSnapshot();
+    });
+    it('renders correctly with an Icon', function () {
+      var _renderLink2 = renderLink({
+        icon: _Home.default
+      }),
+          container = _renderLink2.container;
 
-    expect(container).toMatchSnapshot();
-  });
-  it('correctly renders the Icon on each side', function () {
-    var left = renderLink({
-      icon: _Home.default,
-      iconPosition: 'left'
+      expect(container).toMatchSnapshot();
     });
-    var right = renderLink({
-      icon: _Home.default,
-      iconPosition: 'right'
+    it('correctly renders the Icon on each side', function () {
+      var left = renderLink({
+        icon: _Home.default,
+        iconPosition: 'left'
+      });
+      var right = renderLink({
+        icon: _Home.default,
+        iconPosition: 'right'
+      });
+      expect(left.container).toMatchSnapshot();
+      expect(right.container).toMatchSnapshot();
     });
-    expect(left.container).toMatchSnapshot();
-    expect(right.container).toMatchSnapshot();
-  });
-  it('correctly renders the small size', function () {
-    var _renderLink3 = renderLink({
-      size: 'small'
-    }),
-        container = _renderLink3.container;
+    it('correctly renders the small size', function () {
+      var _renderLink3 = renderLink({
+        size: 'small'
+      }),
+          container = _renderLink3.container;
 
-    expect(container).toMatchSnapshot();
-  });
-  it('correctly renders the inverted variant', function () {
-    var _renderLink4 = renderLink({
-      variant: 'inverted'
-    }),
-        container = _renderLink4.container;
+      expect(container).toMatchSnapshot();
+    });
+    it('correctly renders the inverted variant', function () {
+      var _renderLink4 = renderLink({
+        variant: 'inverted'
+      }),
+          container = _renderLink4.container;
 
-    expect(container).toMatchSnapshot();
+      expect(container).toMatchSnapshot();
+    });
+    it('correctly renders with text as HTML', function () {
+      var _renderLink5 = renderLink({
+        text: _react.default.createElement("span", null, "link with", _react.default.createElement("strong", null, "HTML"))
+      }),
+          container = _renderLink5.container;
+
+      expect(container).toMatchSnapshot();
+    });
+  }
+
+  describe('when enabled', function () {
+    testLinkVariations({
+      to: '/somewhere',
+      text: 'when enabled'
+    });
+  });
+  describe('when disabled', function () {
+    testLinkVariations({
+      to: '/elsewhere',
+      text: 'when disabled',
+      disabled: true
+    });
   });
 });

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

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Link/schema.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,uBAAuB,cAoBlC,CAAC;AAEH,QAAA,MAAM,MAAM,KAAoC,CAAC;AAIjD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Link/schema.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,uBAAuB,cA0BlC,CAAC;AAEH,QAAA,MAAM,MAAM,KAAoC,CAAC;AAIjD,eAAe,MAAM,CAAC"}

package/lib/components/Link/schema.js

@@ -10,8 +10,9 @@ var _reactDesc = require("react-desc");
 // @ts-ignore no module typings
 var makeLinkSchemaPropTypes = function makeLinkSchemaPropTypes() {
   return {
+    disabled: _reactDesc.PropTypes.bool.description('Disables the link if true.').defaultValue('false'),
     to: _reactDesc.PropTypes.string.description('Where to navigate when the link is clicked.').isRequired,
-    text: _reactDesc.PropTypes.string.description("The link's text."),
+    text: _reactDesc.PropTypes.oneOfType([_reactDesc.PropTypes.string, _reactDesc.PropTypes.node]).description("The link's inline text content. Required if no icon is provided."),
     size: _reactDesc.PropTypes.oneOf(['small', 'medium']).description("The size in which to render the link's text and icon").defaultValue('medium'),
     icon: _reactDesc.PropTypes.element.description('Which `iconix` icon to render.'),
     iconPosition: _reactDesc.PropTypes.oneOf(['left', 'right']).description('In which side of the text the icon should be rendered.').defaultValue('left'),

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

@@ -0,0 +1,20 @@
+import { FlattenSimpleInterpolation, SimpleInterpolation } from 'styled-components';
+import { Color, IconPosition } from './types';
+export declare function linkColorStyles(normalColor: Color, visitedColor: Color, hoverColor: Color, focusColors?: {
+    border: Color;
+    shadow: Color;
+}): FlattenSimpleInterpolation;
+export declare const fontSize: (p: {
+    size?: "small" | "medium" | undefined;
+}) => SimpleInterpolation;
+export declare const IconContainer: import("styled-components").StyledComponent<"span", any, {
+    position: IconPosition;
+    withText: boolean;
+}, never>;
+export declare const sharedLinkStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<{
+    size?: "small" | "medium" | undefined;
+}, any>>;
+export declare const linkStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<{
+    size?: "small" | "medium" | undefined;
+}, any>>;
+//# sourceMappingURL=styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Link/styles.ts"],"names":[],"mappings":"AAEA,OAAe,EAEb,0BAA0B,EAC1B,mBAAmB,EACpB,MAAM,mBAAmB,CAAC;AAS3B,OAAO,EAAE,KAAK,EAAE,YAAY,EAAY,MAAM,SAAS,CAAC;AAiBxD,wBAAgB,eAAe,CAC7B,WAAW,EAAE,KAAK,EAClB,YAAY,EAAE,KAAK,EACnB,UAAU,EAAE,KAAK,EACjB,WAAW,CAAC,EAAE;IAAE,MAAM,EAAE,KAAK,CAAC;IAAC,MAAM,EAAE,KAAK,CAAA;CAAE,GAC7C,0BAA0B,CAsC5B;AAuDD,eAAO,MAAM,QAAQ;;yBAMpB,CAAC;AAcF,eAAO,MAAM,aAAa;;;SAGzB,CAAC;AAEF,eAAO,MAAM,gBAAgB;;QAkB5B,CAAC;AAEF,eAAO,MAAM,UAAU;;QAItB,CAAC"}

package/lib/components/Link/styles.js

@@ -0,0 +1,131 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.linkColorStyles = linkColorStyles;
+exports.linkStyles = exports.sharedLinkStyles = exports.IconContainer = exports.fontSize = 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 _styledTheming = _interopRequireDefault(require("styled-theming"));
+
+var _designTokens = _interopRequireDefault(require("@decisiv/design-tokens"));
+
+var _ConfigProvider = require("../../providers/ConfigProvider");
+
+var _focusRingWithColor = _interopRequireDefault(require("../../utils/focusRingWithColor"));
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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 _designTokens$color = _designTokens.default.color,
+    base = _designTokens$color.base,
+    interaction = _designTokens$color.interaction,
+    opacity = _designTokens$color.opacity,
+    fontSizes = _designTokens.default.typography.size.alias;
+/*
+  Notes about changing SVG fill color inside visited links:
+
+  1: Changing the color of a node that contains SVG with nodes set to have
+     fill="currentColor" does not work on Safari for :visited links (it does
+     work on Chrome and Firefox). To work around that, we instead change the
+     fill color of those SVG nodes to be the same color as the visited link.
+*/
+
+function linkColorStyles(normalColor, visitedColor, hoverColor, focusColors) {
+  var focusStyles = focusColors ? (0, _styledComponents.css)(["&:focus{border-color:", ";", "}"], (0, _toColorString.default)(focusColors.border), (0, _focusRingWithColor.default)((0, _toColorString.default)(focusColors.shadow))) : (0, _styledComponents.css)(["&:focus{border-color:transparent;box-shadow:none;}"]);
+  var normalColorString = (0, _toColorString.default)(normalColor);
+  var visitedColorString = (0, _toColorString.default)(visitedColor);
+  var hoverColorString = (0, _toColorString.default)(hoverColor);
+  return (0, _styledComponents.css)(["&:link{color:", ";}", " &:visited,&:visited svg [fill='currentColor']{color:", ";fill:", ";}&:hover,&:hover svg [fill='currentColor']{color:", ";fill:", ";}"], normalColorString, focusStyles, visitedColorString, visitedColorString, hoverColorString, hoverColorString);
+}
+
+var modeStateColors = {
+  light: {
+    normal: interaction.pacificOcean,
+    visited: interaction.redWine,
+    hover: interaction.indianOcean,
+    focus: {
+      border: interaction.pacificOcean,
+      shadow: interaction.pacificOcean40
+    }
+  },
+  dark: {
+    normal: interaction.arcticOcean,
+    visited: interaction.roseWine,
+    hover: interaction.atlanticOcean,
+    focus: {
+      border: interaction.arcticOcean,
+      shadow: interaction.arcticOcean40
+    }
+  }
+};
+
+var modeColorStyles = function modeColorStyles(mode) {
+  var modeColors = modeStateColors[mode];
+  return linkColorStyles(modeColors.normal, modeColors.visited, modeColors.hover, modeColors.focus);
+};
+
+var invertedColorStyles = function invertedColorStyles() {
+  return linkColorStyles(base.snowWhite, _objectSpread({}, base.charcoal, {
+    alpha: 0.6
+  }), _objectSpread({}, base.snowWhite, {
+    alpha: 0.7
+  }), {
+    border: base.blackSheep,
+    shadow: opacity.charcoal40
+  });
+};
+
+var color = _styledTheming.default.variants(_ConfigProvider.themeKeys.mode, 'variant', {
+  normal: {
+    light: modeColorStyles('light'),
+    dark: modeColorStyles('dark')
+  },
+  inverted: {
+    light: invertedColorStyles(),
+    dark: invertedColorStyles()
+  }
+});
+
+var fontSize = function fontSize(p) {
+  var size = (0, _rem.default)(fontSizes[p.size === 'small' ? 'paragraph2' : 'default']);
+  return (0, _styledComponents.css)(["font-size:", ";"], size);
+};
+
+exports.fontSize = fontSize;
+var iconMarginProp = {
+  left: 'margin-right',
+  right: 'margin-left'
+};
+
+var iconMargin = function iconMargin(props) {
+  if (props.withText) {
+    return "".concat(iconMarginProp[props.position], ": ").concat((0, _rem.default)(5));
+  }
+
+  return '';
+};
+
+var IconContainer = _styledComponents.default.span.withConfig({
+  displayName: "styles__IconContainer",
+  componentId: "sc-7854xa-0"
+})(["line-height:0;", ";"], iconMargin);
+
+exports.IconContainer = IconContainer;
+var sharedLinkStyles = (0, _styledComponents.css)(["background-color:transparent;align-items:baseline;border:1px solid transparent;border-radius:2px;display:inline-flex;text-decoration:underline;transition:none;&:hover{text-decoration:underline;}", ";", "{align-self:center;}"], fontSize, IconContainer);
+exports.sharedLinkStyles = sharedLinkStyles;
+var linkStyles = (0, _styledComponents.css)(["cursor:pointer;", ";", ";"], color, sharedLinkStyles);
+exports.linkStyles = linkStyles;

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

@@ -0,0 +1,28 @@
+import { ComponentPropsWithRef, ReactNode, Ref } from 'react';
+import { StyledComponent } from 'styled-components';
+import { RgbaColor, RgbColor } from 'polished/lib/types/color';
+import { IconProps } from '@decisiv/iconix';
+import { LinkRenderer, LinkRendererRef } from '../../providers/ConfigProvider';
+export declare type LinkRef = LinkRendererRef;
+export declare type LinkSize = 'medium' | 'small';
+export declare type IconPosition = 'left' | 'right';
+export declare type LinkVariant = 'normal' | 'inverted';
+export declare type Color = RgbColor | RgbaColor;
+export declare type IconComponent = (props: IconProps) => JSX.Element;
+export interface LinkProps extends ComponentPropsWithRef<'a'> {
+    disabled?: boolean;
+    icon?: IconComponent;
+    iconPosition?: IconPosition;
+    size?: LinkSize;
+    text?: string | ReactNode;
+    to: string;
+    variant?: LinkVariant;
+}
+interface RendererProps {
+    children: ReactNode;
+    ref?: Ref<LinkRef>;
+    size?: LinkSize;
+}
+export declare type StyledLinkRenderer = StyledComponent<LinkRenderer, {}, RendererProps>;
+export {};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Link/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAE/D,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AAE/E,oBAAY,OAAO,GAAG,eAAe,CAAC;AACtC,oBAAY,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAC1C,oBAAY,YAAY,GAAG,MAAM,GAAG,OAAO,CAAC;AAC5C,oBAAY,WAAW,GAAG,QAAQ,GAAG,UAAU,CAAC;AAEhD,oBAAY,KAAK,GAAG,QAAQ,GAAG,SAAS,CAAC;AACzC,oBAAY,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAE9D,MAAM,WAAW,SAAU,SAAQ,qBAAqB,CAAC,GAAG,CAAC;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAED,UAAU,aAAa;IACrB,QAAQ,EAAE,SAAS,CAAC;IACpB,GAAG,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB;AAED,oBAAY,kBAAkB,GAAG,eAAe,CAC9C,YAAY,EACZ,EAAE,EACF,aAAa,CACd,CAAC"}

package/lib/components/Link/types.js

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

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

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

package/lib/components/Menu/index.js

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

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

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

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

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

package/lib/components/Menu/types.js

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

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

@@ -46,7 +46,7 @@ export declare const Content: import("styled-components").StyledComponent<"div",
         readonly LG: "LG";
         readonly XL: "XL";
     }> | undefined;
-    readonly flexDirection?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "column" | "column-reverse" | "row" | "row-reverse" | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").FlexDirectionProperty, {
+    readonly flexDirection?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").FlexDirectionProperty, {
         readonly XS: "XS";
         readonly SM: "SM";
         readonly MD: "MD";
@@ -241,7 +241,7 @@ export declare const Footer: import("styled-components").StyledComponent<"div",
         readonly LG: "LG";
         readonly XL: "XL";
     }> | undefined;
-    readonly flexDirection?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "column" | "column-reverse" | "row" | "row-reverse" | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").FlexDirectionProperty, {
+    readonly flexDirection?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").FlexDirectionProperty, {
         readonly XS: "XS";
         readonly SM: "SM";
         readonly MD: "MD";

package/lib/components/Modal/types.js

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

package/lib/components/Notifications/Notification/components.d.ts

@@ -102,9 +102,9 @@ export declare const NotificationCard: import("styled-components").StyledCompone
 }> & {
     borderColor: string;
 }, never>;
-export declare const IconColumn: import("styled-components").StyledComponent<"div", any, import("../../Grid/Column/types").default & {
-    span: string;
-}, "span">;
+export declare const IconColumn: import("styled-components").StyledComponent<"div", any, {
+    right?: boolean | undefined;
+}, never>;
 export declare const CloseButton: import("styled-components").StyledComponent<import("react").RefForwardingComponent<HTMLButtonElement, ButtonProps>, any, ButtonProps, never>;
 export declare const ActionButtonContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 //# sourceMappingURL=components.d.ts.map