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

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;AA6DlC,QAAA,MAAM,aAAa,EAAE,sBAAsB,CACzC,SAAS,EACT,WAAW,CACS,CAAC;AAcvB,eAAe,aAAa,CAAC"}

package/lib/components/Avatar/index.js

@@ -19,6 +19,8 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+
 var _useTranslations = _interopRequireDefault(require("../../utils/useTranslations"));
 
 var _AvatarContainer = _interopRequireDefault(require("./AvatarContainer"));
@@ -35,29 +37,60 @@ var _types = require("./types");
 
 var _schema = _interopRequireDefault(require("./schema"));
 
+var _useGravatar3 = _interopRequireDefault(require("./hooks/useGravatar"));
+
 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 _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 Avatar(props, ref) {
   var ariaLabel = props['aria-label'],
       email = props.email,
       entityType = props.entityType,
+      color = props.color,
       kind = props.kind,
       name = props.name,
+      palette = props.palette,
       size = props.size,
       indicatorColor = props.indicatorColor;
   var translate = (0, _useTranslations.default)();
+
+  var _useGravatar = (0, _useGravatar3.default)(props),
+      _useGravatar2 = _slicedToArray(_useGravatar, 2),
+      gravatarProps = _useGravatar2[0],
+      shouldUseGravatar = _useGravatar2[1];
+
+  (0, _react.useEffect)(function () {
+    if (!(0, _isEmpty.default)(kind)) window.console && // eslint-disable-next-line no-console
+    console.warn('[KeyDesignSystems] The `kind` prop for the `Avatar` component has been deprecated. Use `color` + `palette` instead.'); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); // This is done to not break the now deprecated `secondary` kind variant. Should be removed in the future.
+
+  var componentColor = kind === 'secondary' ? 'licoriceMousse' : color;
   return _react.default.createElement(_AvatarContainer.default, {
     ref: ref,
-    kind: kind,
-    size: size
+    size: size,
+    palette: palette,
+    color: componentColor,
+    shouldUseGravatar: shouldUseGravatar
   }, _react.default.createElement("span", {
     "aria-label": translate(ariaLabel, 'avatar.aria.label', {
       descriptor: name || email || entityType
     }),
     role: "img"
-  }, _react.default.createElement(_AvatarContent.default, props)), indicatorColor && indicatorColor in _commonUIColors.commonUIColors && _react.default.createElement(_AvatarIndicator.default, {
+  }, _react.default.createElement(_AvatarContent.default, _extends({
+    gravatarProps: gravatarProps,
+    shouldUseGravatar: shouldUseGravatar
+  }, props))), indicatorColor && indicatorColor in _commonUIColors.commonUIColors && _react.default.createElement(_AvatarIndicator.default, {
     size: size,
     color: indicatorColor
   }));
@@ -68,10 +101,11 @@ AvatarWithRef.propTypes = _schema.default.propTypes;
 AvatarWithRef.defaultProps = {
   email: undefined,
   entityType: _constants.entityTypes.person,
-  kind: _constants.kinds.primary,
   name: undefined,
   size: _constants.sizes.medium,
-  indicatorColor: undefined
+  indicatorColor: undefined,
+  color: 'information',
+  palette: 'bright'
 };
 var _default = AvatarWithRef;
 exports.default = _default;

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

@@ -10,6 +10,8 @@ var _constants = require("./constants");
 
 var _commonUIColors = require("../../utils/commonUIColors");
 
+var _palette = require("../../modifiers/palette");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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; }
@@ -25,6 +27,8 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var modifierMap = {
   kind: Object.values(_constants.kinds),
   size: Object.values(_constants.sizes),
+  palette: Object.keys(_palette.PALETTE_MAPPER),
+  color: Object.keys(_commonUIColors.commonUIColors),
   indicatorColor: Object.keys(_commonUIColors.commonUIColors)
 };
 describe('Avatar', function () {

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

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/schema.ts"],"names":[],"mappings":"AAKA,QAAA,MAAM,MAAM,KAAsC,CAAC;AA4BnD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/schema.ts"],"names":[],"mappings":"AAKA,QAAA,MAAM,MAAM,KAAsC,CAAC;AAwCnD,eAAe,MAAM,CAAC"}

package/lib/components/Avatar/schema.js

@@ -15,8 +15,10 @@ var schema = (0, _reactDesc.describe)({
 });
 schema.propTypes = {
   email: _reactDesc.PropTypes.string.description("The entity's email address. Used in Gravatar image lookup."),
+  color: _reactDesc.PropTypes.string.description('(See note) Sets the color for the background and the icon').defaultValue('information'),
   entityType: _reactDesc.PropTypes.oneOf(Object.values(_constants.entityTypes)).description('Selects the entity type represented.').defaultValue('person'),
-  kind: _reactDesc.PropTypes.oneOfType([_reactDesc.PropTypes.oneOf(Object.values(_constants.kinds))]).description('Selects the kind of Avatar.').defaultValue('primary'),
+  palette: _reactDesc.PropTypes.oneOf(['bright', 'pastel', 'dark']).description('What color variant to render').defaultValue('bright'),
+  kind: _reactDesc.PropTypes.oneOfType([_reactDesc.PropTypes.oneOf(Object.values(_constants.kinds))]).description('***DEPRECATED*** Use color + palette instead. Selects the kind of Avatar.').defaultValue('primary').format('***DEPRECATED*** string').deprecated('Use color + palette instead'),
   name: _reactDesc.PropTypes.string.description("The entity's name. First letter of first and last words used to generate initials."),
   size: _reactDesc.PropTypes.oneOfType([_reactDesc.PropTypes.oneOf(Object.values(_constants.sizes))]).description('Selects the size desired.'),
   indicatorColor: _reactDesc.PropTypes.string.description('(See note) Sets the indicator color')

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

@@ -1,14 +1,27 @@
-import { Ref } from 'react';
+import { HTMLAttributes, Ref } from 'react';
 import { entityTypes, kinds, sizes } from './constants';
 import { CommonUIColorKeys } from '../../utils/commonUIColors';
+import { GravatarProps, ShouldUseGravatar } from './hooks/useGravatar';
 export declare type AvatarRef = HTMLDivElement;
-export interface AvatarProps extends React.HTMLAttributes<HTMLElement> {
+export interface AvatarProps extends HTMLAttributes<HTMLElement> {
+    color?: CommonUIColorKeys;
     email?: string;
     entityType?: keyof typeof entityTypes;
     indicatorColor?: CommonUIColorKeys;
     kind?: keyof typeof kinds;
     name?: string;
+    palette?: 'pastel' | 'bright' | 'dark';
     ref?: Ref<AvatarRef>;
     size?: keyof typeof sizes;
 }
+export interface AvatarContentProps extends AvatarProps {
+    gravatarProps: GravatarProps;
+    shouldUseGravatar: ShouldUseGravatar;
+}
+export interface AvatarContainerProps {
+    color?: CommonUIColorKeys;
+    palette?: 'pastel' | 'bright' | 'dark';
+    size?: keyof typeof sizes;
+    shouldUseGravatar: ShouldUseGravatar;
+}
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE/D,oBAAY,SAAS,GAAG,cAAc,CAAC;AAEvC,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;IACtC,cAAc,CAAC,EAAE,iBAAiB,CAAC;IACnC,IAAI,CAAC,EAAE,MAAM,OAAO,KAAK,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,GAAG,CAAC,SAAS,CAAC,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,OAAO,KAAK,CAAC;CAC3B"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAEvE,oBAAY,SAAS,GAAG,cAAc,CAAC;AAEvC,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC9D,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;IACtC,cAAc,CAAC,EAAE,iBAAiB,CAAC;IACnC,IAAI,CAAC,EAAE,MAAM,OAAO,KAAK,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;IACvC,GAAG,CAAC,EAAE,GAAG,CAAC,SAAS,CAAC,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,OAAO,KAAK,CAAC;CAC3B;AAED,MAAM,WAAW,kBAAmB,SAAQ,WAAW;IACrD,aAAa,EAAE,aAAa,CAAC;IAC7B,iBAAiB,EAAE,iBAAiB,CAAC;CACtC;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;IACvC,IAAI,CAAC,EAAE,MAAM,OAAO,KAAK,CAAC;IAC1B,iBAAiB,EAAE,iBAAiB,CAAC;CACtC"}

package/lib/components/Avatar/types.js

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

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

@@ -0,0 +1,2 @@
+export declare const sizeStyles: Record<string, {}>;
+//# sourceMappingURL=constants.d.ts.map

package/lib/components/Badge/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/constants.ts"],"names":[],"mappings":"AAeA,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,EAAE,CAKzC,CAAC"}

package/lib/components/Badge/constants.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sizeStyles = void 0;
+
+var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable import/prefer-default-export */
+var makeSizeStyles = function makeSizeStyles(size) {
+  var value = (0, _rem.default)(size);
+  return {
+    width: value,
+    minWidth: value,
+    height: value,
+    minHeight: value
+  };
+};
+
+var sizeStyles = {
+  'small.square': makeSizeStyles(20),
+  'medium.round': makeSizeStyles(36),
+  'medium.square': makeSizeStyles(30),
+  'large.round': makeSizeStyles(60)
+};
+exports.sizeStyles = sizeStyles;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/index.tsx"],"names":[],"mappings":"AACA,OAAc,EAAmB,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAOvE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAA2B,MAAM,SAAS,CAAC;AAExE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC;AAkEhC,QAAA,MAAM,YAAY,EAAE,sBAAsB,CAAC,QAAQ,EAAE,UAAU,CAE9D,CAAC;AAQF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAmB,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAA2B,MAAM,SAAS,CAAC;AAIxE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC;AAWhC,QAAA,MAAM,YAAY,EAAE,sBAAsB,CAAC,QAAQ,EAAE,UAAU,CAE9D,CAAC;AAQF,eAAe,YAAY,CAAC"}

package/lib/components/Badge/index.js

@@ -17,25 +17,13 @@ Object.defineProperty(exports, "BadgeProps", {
 });
 exports.default = void 0;
 
-var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
-
 var _react = _interopRequireWildcard(require("react"));
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _styledComponentsModifiers = require("styled-components-modifiers");
-
-var _color = _interopRequireDefault(require("../../modifiers/color"));
-
-var _commonUIColors = require("../../utils/commonUIColors");
-
-var _utils = require("../../utils");
-
 var _types = require("./types");
 
-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 _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); }
 
@@ -43,68 +31,13 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 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; }
 
-var colorModifiers = (0, _utils.applyDynamicModifiers)('color', function (_ref) {
-  var color = _ref.color;
-  return (0, _styledComponents.css)(["", ""], color && color in _commonUIColors.commonUIColors && (0, _color.default)(_commonUIColors.commonUIColors[color]));
-});
-
-var makeSizeStyles = function makeSizeStyles(size) {
-  return {
-    width: (0, _rem.default)(size),
-    minWidth: (0, _rem.default)(size),
-    height: (0, _rem.default)(size),
-    minHeight: (0, _rem.default)(size)
-  };
-};
-
-var sizeStyles = {
-  'medium.round': makeSizeStyles(36),
-  'medium.square': makeSizeStyles(30),
-  'large.round': makeSizeStyles(60)
-};
-
-var getSizeStyles = function getSizeStyles(key) {
-  return (0, _styledComponents.css)(sizeStyles[key] || '');
-};
-
-var sizeModifiers = (0, _styledComponentsModifiers.applyStyleModifiers)({
-  medium: function medium(_ref2) {
-    var v = _ref2.variant;
-    return getSizeStyles("medium.".concat(v));
-  },
-  large: function large(_ref3) {
-    var v = _ref3.variant;
-    return getSizeStyles("large.".concat(v));
-  }
-}, 'size');
-var variantModifiers = (0, _styledComponentsModifiers.applyStyleModifiers)({
-  round: function round() {
-    return (0, _styledComponents.css)({
-      borderRadius: '50%'
-    });
-  },
-  square: function square() {
-    return (0, _styledComponents.css)({
-      borderRadius: '2px'
-    });
-  }
-}, 'variant'); // The default coloring is explicitly set instead of relying on the
-// `visualInterest.licoriceMousse.medium` colors. The "default" badge is
-// intended to be used in “empty” and/or “no results” messages, the snowWhite
-// fg color and lower contrast help convey “emptiness”.
-
-var BadgeContainer = _styledComponents.default.div.withConfig({
-  displayName: "Badge__BadgeContainer",
-  componentId: "sc-1y6oxgp-0"
-})(["align-items:center;display:inline-flex;justify-content:center;", ";", ";", ";", ";"], (0, _color.default)(_commonUIColors.commonUIColors.information), colorModifiers, sizeModifiers, variantModifiers);
-
 function Badge(props, containerRef) {
   var ariaLabel = props['aria-label'],
       Icon = props.icon,
       size = props.size,
       rest = _objectWithoutProperties(props, ["aria-label", "icon", "size"]);
 
-  return _react.default.createElement(BadgeContainer, _extends({
+  return _react.default.createElement(_styles.BadgeContainer, _extends({
     ref: containerRef,
     size: size
   }, rest), _react.default.createElement(Icon, {