@decisiv/ui-components 2.0.1-alpha.99 → 2.0.2-alpha.2

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"}

package/lib/components/Alert/schema.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _reactDesc = require("react-desc");
+
+// @ts-ignore no module typings
+var schema = (0, _reactDesc.describe)({
+  displayName: 'Alert'
+});
+schema.propTypes = {
+  'aria-label': _reactDesc.PropTypes.string.description('Descriptive text for accessibility purposes'),
+  description: _reactDesc.PropTypes.string.description('Text to show as description'),
+  dismissable: _reactDesc.PropTypes.bool.description('Sets if the alert is dismissable').defaultValue('false'),
+  icon: _reactDesc.PropTypes.element.description('Must be an icon component from `@decisiv/iconix`'),
+  intent: _reactDesc.PropTypes.oneOf(['information', 'success', 'warning', 'danger']).description('Shortcuts to the most common combinations of icon and color.').defaultValue('information'),
+  title: _reactDesc.PropTypes.string.description('Text to show as title').isRequired,
+  onDismissClick: _reactDesc.PropTypes.func.description('A callback when dismissing the alert').defaultValue('undefined'),
+  tooltipText: _reactDesc.PropTypes.string.description('The text for dismiss tooltip').defaultValue('Close')
+};
+var _default = schema;
+exports.default = _default;

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

@@ -0,0 +1,36 @@
+/// <reference types="react" />
+import PropTypes from 'prop-types';
+import { IconProps } from '@decisiv/iconix';
+import intents from './intents';
+export declare type IconComponent = (props: IconProps) => JSX.Element;
+export interface AlertProps {
+    'aria-label'?: string;
+    children?: React.ReactNode;
+    description?: string;
+    dismissable?: boolean;
+    icon?: IconComponent;
+    intent?: keyof typeof intents;
+    onDismissClick?: () => void;
+    title: string;
+    tooltipText?: string;
+}
+export declare const propTypes: {
+    'aria-label': PropTypes.Requireable<string>;
+    description: PropTypes.Requireable<string>;
+    dismissable: PropTypes.Requireable<boolean>;
+    icon: PropTypes.Requireable<PropTypes.ReactElementLike>;
+    intent: PropTypes.Requireable<string>;
+    title: PropTypes.Validator<string>;
+    onDismissClick: PropTypes.Requireable<(...args: any[]) => any>;
+    tooltipText: PropTypes.Requireable<string>;
+};
+export declare const defaultProps: {
+    'aria-label': undefined;
+    description: undefined;
+    dismissable: boolean;
+    icon: undefined;
+    intent: string;
+    onDismissClick: undefined;
+    tooltipText: undefined;
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/types.ts"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,OAAO,MAAM,WAAW,CAAC;AAEhC,oBAAY,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAE9D,MAAM,WAAW,UAAU;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,OAAO,OAAO,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,SAAS;;;;;;;;;CASrB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;;;;CAQxB,CAAC"}

package/lib/components/Alert/types.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProps = exports.propTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var propTypes = {
+  'aria-label': _propTypes.default.string,
+  description: _propTypes.default.string,
+  dismissable: _propTypes.default.bool,
+  icon: _propTypes.default.element,
+  intent: _propTypes.default.oneOf(['information', 'success', 'warning', 'danger']),
+  title: _propTypes.default.string.isRequired,
+  onDismissClick: _propTypes.default.func,
+  tooltipText: _propTypes.default.string
+};
+exports.propTypes = propTypes;
+var defaultProps = {
+  'aria-label': undefined,
+  description: undefined,
+  dismissable: false,
+  icon: undefined,
+  intent: 'information',
+  onDismissClick: undefined,
+  tooltipText: undefined
+};
+exports.defaultProps = defaultProps;

package/lib/components/Avatar/AvatarContainer.d.ts

@@ -1,16 +1,4 @@
-import { SimpleInterpolation as CSS } from 'styled-components';
-declare const kindModifiers: {
-    readonly primary: () => CSS;
-    readonly secondary: () => CSS;
-};
-declare const sizeModifiers: {
-    readonly medium: () => CSS;
-    readonly large: () => CSS;
-};
-interface AvatarContainerProps {
-    kind?: keyof typeof kindModifiers;
-    size?: keyof typeof sizeModifiers;
-}
+import { AvatarContainerProps } from './types';
 declare const AvatarContainer: import("styled-components").StyledComponent<"div", any, AvatarContainerProps, never>;
 export default AvatarContainer;
 //# sourceMappingURL=AvatarContainer.d.ts.map

package/lib/components/Avatar/AvatarContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarContainer.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/AvatarContainer.ts"],"names":[],"mappings":"AAEA,OAAe,EAAO,mBAAmB,IAAI,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAQ5E,QAAA,MAAM,aAAa;;;CAOT,CAAC;AAgBX,QAAA,MAAM,aAAa;;;CAGT,CAAC;AAEX,UAAU,oBAAoB;IAC5B,IAAI,CAAC,EAAE,MAAM,OAAO,aAAa,CAAC;IAClC,IAAI,CAAC,EAAE,MAAM,OAAO,aAAa,CAAC;CACnC;AAED,QAAA,MAAM,eAAe,sFAgBpB,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"AvatarContainer.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/AvatarContainer.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAoC/C,QAAA,MAAM,eAAe,sFAkBpB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/Avatar/AvatarContainer.js

@@ -17,25 +17,18 @@ var _color = _interopRequireDefault(require("@decisiv/design-tokens/lib/color"))
 
 var _typography = _interopRequireDefault(require("@decisiv/design-tokens/lib/typography"));
 
+var _palette = require("../../modifiers/palette");
+
 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 }; }
 
-var status = _color.default.status,
-    visualInterest = _color.default.visualInterest;
-var kindModifiers = {
-  primary: function primary() {
-    return (0, _styledComponents.css)(["background-color:", ";"], (0, _toColorString.default)(status.information.medium));
-  },
-  secondary: function secondary() {
-    return (0, _styledComponents.css)(["background-color:", ";"], (0, _toColorString.default)(visualInterest.licoriceMousse.medium));
-  }
-};
+var status = _color.default.status;
 
 var makeSizeModifiers = function makeSizeModifiers(_ref) {
   var size = _ref.size,
       typeScale = _ref.typeScale;
-  return (0, _styledComponents.css)(["font-size:", ";height:", ";min-height:", ";width:", ";min-width:", ";"], (0, _rem.default)(_typography.default.size.scale[typeScale]), (0, _rem.default)(size), (0, _rem.default)(size), (0, _rem.default)(size), (0, _rem.default)(size));
+  return (0, _styledComponents.css)(["font-weight:", ";font-size:", ";height:", ";min-height:", ";width:", ";min-width:", ";"], _typography.default.weight.alias.regular, (0, _rem.default)(_typography.default.size.scale[typeScale]), (0, _rem.default)(size), (0, _rem.default)(size), (0, _rem.default)(size), (0, _rem.default)(size));
 };
 
 var sizeModifiers = {
@@ -48,15 +41,21 @@ var sizeModifiers = {
   large: function large() {
     return makeSizeModifiers({
       size: 60,
-      typeScale: 4
+      typeScale: 3
     });
   }
 };
 
+var withGravatarModifiers = function withGravatarModifiers(props) {
+  var shouldUseGravatar = props.shouldUseGravatar;
+  if (!shouldUseGravatar) return null;
+  return (0, _styledComponents.css)(["color:transparent;background-color:transparent;border:none;"]);
+};
+
 var AvatarContainer = _styledComponents.default.div.withConfig({
   displayName: "AvatarContainer",
   componentId: "sc-16avffw-0"
-})(["position:relative;align-items:center;background-color:", ";border-radius:50%;display:inline-flex;height:", ";justify-content:center;width:", ";> span[role='img']{line-height:0;}", ";", ";"], (0, _toColorString.default)(status.information.medium), (0, _rem.default)(36), (0, _rem.default)(36), (0, _styledComponentsModifiers.applyStyleModifiers)(kindModifiers, 'kind'), (0, _styledComponentsModifiers.applyStyleModifiers)(sizeModifiers, 'size'));
+})(["position:relative;align-items:center;background-color:", ";border-radius:50%;display:inline-flex;height:", ";justify-content:center;width:", ";> span[role='img']{line-height:0;}", ";", ";", ""], (0, _toColorString.default)(status.information.medium), (0, _rem.default)(36), (0, _rem.default)(36), (0, _styledComponentsModifiers.applyStyleModifiers)(sizeModifiers, 'size'), _palette.withBorderedPalette, withGravatarModifiers);
 
 var _default = AvatarContainer;
 exports.default = _default;

package/lib/components/Avatar/AvatarContent.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { AvatarProps } from './types';
-declare function AvatarContent(props: AvatarProps): JSX.Element;
+import { AvatarContentProps } from './types';
+declare function AvatarContent(props: AvatarContentProps): JSX.Element;
 export default AvatarContent;
 //# sourceMappingURL=AvatarContent.d.ts.map

package/lib/components/Avatar/AvatarContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarContent.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/AvatarContent.tsx"],"names":[],"mappings":";AAWA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAiBtC,iBAAS,aAAa,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAatD;AAED,eAAe,aAAa,CAAC"}
+{"version":3,"file":"AvatarContent.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/AvatarContent.tsx"],"names":[],"mappings":";AAYA,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AA8B7C,iBAAS,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CAkB7D;AAED,eAAe,aAAa,CAAC"}

package/lib/components/Avatar/AvatarContent.js

@@ -5,61 +5,65 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
-
 var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _designTokens = require("@decisiv/design-tokens");
+var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
+
+var _color = _interopRequireDefault(require("@decisiv/design-tokens/lib/color"));
 
 var _Typography = require("../Typography");
 
 var _useAvatarIcon = _interopRequireDefault(require("./hooks/useAvatarIcon"));
 
-var _useGravatar3 = _interopRequireDefault(require("./hooks/useGravatar"));
-
 var _useInitials = _interopRequireDefault(require("./hooks/useInitials"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _palette = require("../../modifiers/palette");
 
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
+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 _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 _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 _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+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 GravatarImg = _styledComponents.default.img.withConfig({
   displayName: "AvatarContent__GravatarImg",
   componentId: "sc-1jejgqy-0"
 })(["border-radius:50%;width:100%;"]);
 
+var borderColor = _objectSpread({}, _color.default.base.charcoal, {
+  alpha: _palette.BORDER_OPACITY.pastel
+});
+
+var GravatarShadow = _styledComponents.default.div.withConfig({
+  displayName: "AvatarContent__GravatarShadow",
+  componentId: "sc-1jejgqy-1"
+})(["position:absolute;width:100%;height:100%;box-shadow:inset 0 0 0 1px ", ";border-radius:50%;top:0;left:0;"], (0, _toColorString.default)(borderColor));
+
 var Initials = (0, _styledComponents.default)(_Typography.P).attrs({
   as: 'span'
 }).withConfig({
   displayName: "AvatarContent__Initials",
-  componentId: "sc-1jejgqy-1"
-})(["color:", ";font-size:inherit;text-transform:uppercase;"], (0, _toColorString.default)(_designTokens.color.base.snowWhite));
+  componentId: "sc-1jejgqy-2"
+})(["font-size:inherit;text-transform:uppercase;font-weight:inherit;"]);
 
 var AvatarIcon = _styledComponents.default.div.withConfig({
   displayName: "AvatarContent__AvatarIcon",
-  componentId: "sc-1jejgqy-2"
-})(["color:", ";"], (0, _toColorString.default)(_designTokens.color.base.snowWhite));
+  componentId: "sc-1jejgqy-3"
+})([""]);
 
 function AvatarContent(props) {
-  var _useGravatar = (0, _useGravatar3.default)(props),
-      _useGravatar2 = _slicedToArray(_useGravatar, 2),
-      gravatarProps = _useGravatar2[0],
-      shouldUseGravatar = _useGravatar2[1];
-
+  var gravatarProps = props.gravatarProps,
+      shouldUseGravatar = props.shouldUseGravatar;
   var initials = (0, _useInitials.default)(props);
   var avatarIconProps = (0, _useAvatarIcon.default)(props);
 
   switch (true) {
     case shouldUseGravatar:
-      return _react.default.createElement(GravatarImg, gravatarProps);
+      return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(GravatarImg, gravatarProps), _react.default.createElement(GravatarShadow, null));
 
     case !!initials.length:
       return _react.default.createElement(Initials, null, initials);

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAO,sBAAsB,EAAc,MAAM,OAAO,CAAC;AASvE,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAGjD,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC;AAkClC,QAAA,MAAM,aAAa,EAAE,sBAAsB,CACzC,SAAS,EACT,WAAW,CACS,CAAC;AAavB,eAAe,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAEZ,sBAAsB,EAGvB,MAAM,OAAO,CAAC;AAUf,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAKjD,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC;AAgElC,QAAA,MAAM,aAAa,EAAE,sBAAsB,CACzC,SAAS,EACT,WAAW,CACS,CAAC;AAcvB,eAAe,aAAa,CAAC"}