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

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,65 @@ 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)) {
+      // eslint-disable-next-line no-console
+      console.warn('[decisiv] Avatar: the `kind` prop is deprecated. Migrate to `color` and `palette`.');
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, []); // TODO: Remove the `kind` prop and this fallback in a future major version
+  // when all consumers have migrated to the new `color` and `palette` props
+  // 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 +106,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/Badge/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAmB,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAQvE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAA2B,MAAM,SAAS,CAAC;AAExE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC;AAsDhC,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

@@ -19,21 +19,9 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _styledComponentsModifiers = require("styled-components-modifiers");
-
-var _color = _interopRequireDefault(require("../../modifiers/color"));
-
-var _constants = require("./constants");
-
-var _commonUIColors = require("../../utils/commonUIColors");
-
-var _utils = require("../../utils");
-
 var _types = require("./types");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _styles = require("./styles");
 
 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; } }
 
@@ -43,57 +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 getSizeStyles = function getSizeStyles(key) {
-  return (0, _styledComponents.css)(_constants.sizeStyles[key] || '');
-};
-
-var sizeModifiers = (0, _styledComponentsModifiers.applyStyleModifiers)({
-  small: function small(_ref2) {
-    var v = _ref2.variant;
-    return getSizeStyles("small.".concat(v));
-  },
-  medium: function medium(_ref3) {
-    var v = _ref3.variant;
-    return getSizeStyles("medium.".concat(v));
-  },
-  large: function large(_ref4) {
-    var v = _ref4.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, {

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

@@ -55,12 +55,23 @@ describe('Badge', function () {
       expect(container).toMatchSnapshot();
     });
   });
+  ['bright', 'pastel'].forEach(function (palette) {
+    it("renders correctly with palette=\"".concat(palette, "\""), function () {
+      var _renderBadge3 = renderBadge({
+        palette: palette,
+        color: 'carrotCake'
+      }),
+          container = _renderBadge3.container;
+
+      expect(container).toMatchSnapshot();
+    });
+  });
   it("renders correctly with size=\"small\" and variant=\"square\"", function () {
-    var _renderBadge3 = renderBadge({
+    var _renderBadge4 = renderBadge({
       size: 'small',
       variant: 'square'
     }),
-        container = _renderBadge3.container;
+        container = _renderBadge4.container;
 
     expect(container).toMatchSnapshot();
   });
@@ -70,10 +81,10 @@ describe('Badge', function () {
           key = _ref2[0],
           value = _ref2[1];
 
-      var _renderBadge4 = renderBadge({
+      var _renderBadge5 = renderBadge({
         color: key
       }),
-          container = _renderBadge4.container;
+          container = _renderBadge5.container;
 
       expect(container.firstChild).toHaveStyleRule('background-color', (0, _toColorString.default)(value));
     });

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

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

package/lib/components/Badge/schema.js

@@ -15,6 +15,7 @@ schema.propTypes = {
   'aria-label': _reactDesc.PropTypes.string.description('Descriptive text for accessibility purposes').isRequired,
   color: _reactDesc.PropTypes.string.description('(See note) Sets the color for the background and the icon').defaultValue('information'),
   icon: _reactDesc.PropTypes.element.description('Must be an icon component from `@decisiv/iconix`').isRequired,
+  palette: _reactDesc.PropTypes.oneOf(['bright', 'pastel']).description('What color variant to render').defaultValue('bright'),
   size: _reactDesc.PropTypes.oneOf(['small', 'medium', 'large']).description('(See note) Sets the size of the badge').defaultValue('medium'),
   variant: _reactDesc.PropTypes.oneOf(['round', 'square']).description('(See note) Controls primary style variations of the badge').defaultValue('round')
 };

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

@@ -0,0 +1,3 @@
+import { BadgeProps } from './types';
+export declare const BadgeContainer: import("styled-components").StyledComponent<"div", any, Pick<BadgeProps, "variant" | "size" | "color" | "palette">, never>;
+//# sourceMappingURL=styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/styles.ts"],"names":[],"mappings":"AAYA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AA+DrC,eAAO,MAAM,cAAc,4HAQ1B,CAAC"}

package/lib/components/Badge/styles.js

@@ -0,0 +1,97 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BadgeContainer = void 0;
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _styledComponentsModifiers = require("styled-components-modifiers");
+
+var _designTokens = require("@decisiv/design-tokens");
+
+var _color = _interopRequireDefault(require("../../modifiers/color"));
+
+var _constants = require("./constants");
+
+var _commonUIColors = require("../../utils/commonUIColors");
+
+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 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 FG_COLOR = {
+  pastel: 'dark'
+};
+var PALETTE_MAPPER = {
+  pastel: 'light',
+  bright: 'medium'
+};
+
+var colorModifiers = function colorModifiers(props) {
+  var _props$palette = props.palette,
+      palette = _props$palette === void 0 ? 'bright' : _props$palette,
+      _props$color = props.color,
+      color = _props$color === void 0 ? 'information' : _props$color;
+
+  if (color && color in _commonUIColors.commonUIColors) {
+    var baseColor = _commonUIColors.commonUIThreeShadeColors[color];
+    var fgColor = palette === 'bright' ? _designTokens.color.base.snowWhite : baseColor[FG_COLOR[palette]];
+    var bgColor = baseColor[PALETTE_MAPPER[palette]];
+    var colorPalette = palette === 'bright' ? bgColor : _objectSpread({}, bgColor, {
+      fg: fgColor
+    });
+    return (0, _styledComponents.css)(["", ""], (0, _color.default)(colorPalette));
+  }
+
+  return null;
+};
+
+var getSizeStyles = function getSizeStyles(key) {
+  return (0, _styledComponents.css)(_constants.sizeStyles[key] || '');
+};
+
+var sizeModifiers = (0, _styledComponentsModifiers.applyStyleModifiers)({
+  small: function small(_ref) {
+    var v = _ref.variant;
+    return getSizeStyles("small.".concat(v));
+  },
+  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”.
+// eslint-disable-next-line import/prefer-default-export
+
+var BadgeContainer = _styledComponents.default.div.withConfig({
+  displayName: "styles__BadgeContainer",
+  componentId: "sc-1lruwqa-0"
+})(["align-items:center;display:inline-flex;justify-content:center;", ";", ";", ";"], colorModifiers, sizeModifiers, variantModifiers);
+
+exports.BadgeContainer = BadgeContainer;

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

@@ -8,12 +8,13 @@ export interface BadgeProps {
     'aria-label': string;
     color?: CommonUIColorKeys;
     icon: IconComponent;
+    palette?: 'pastel' | 'bright';
     size?: 'small' | 'medium' | 'large';
     variant?: 'round' | 'square';
 }
 declare function variantValidator(props: BadgeProps, propName: 'variant', componentName: 'Badge'): Error | null;
 export declare const propTypes: {
-    color: PropTypes.Requireable<CommonUIColorKeys>;
+    color: PropTypes.Requireable<"danger" | "success" | "information" | "warning" | "berryCrisp" | "koolaidCake" | "cookieMonster" | "cottonCandy" | "fizzyLime" | "mamboMango" | "carrotCake" | "roseGummy" | "licoriceMousse">;
     icon: PropTypes.Validator<PropTypes.ReactComponentLike>;
     size: PropTypes.Requireable<string>;
     variant: typeof variantValidator;
@@ -21,6 +22,7 @@ export declare const propTypes: {
 export declare const defaultProps: {
     size: string;
     variant: string;
+    color: string;
 };
 export {};
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/types.ts"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EACL,iBAAiB,EAElB,MAAM,4BAA4B,CAAC;AAIpC,aAAK,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAEvD,oBAAY,QAAQ,GAAG,cAAc,CAAC;AAItC,MAAM,WAAW,UAAU;IACzB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,IAAI,EAAE,aAAa,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC9B;AAED,iBAAS,gBAAgB,CACvB,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,SAAS,EACnB,aAAa,EAAE,OAAO,GACrB,KAAK,GAAG,IAAI,CAqBd;AAED,eAAO,MAAM,SAAS;;;;;CAKrB,CAAC;AAEF,eAAO,MAAM,YAAY;;;CAGxB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/types.ts"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EACL,iBAAiB,EAElB,MAAM,4BAA4B,CAAC;AAIpC,aAAK,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAEvD,oBAAY,QAAQ,GAAG,cAAc,CAAC;AAItC,MAAM,WAAW,UAAU;IACzB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,IAAI,EAAE,aAAa,CAAC;IACpB,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC9B,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC9B;AAED,iBAAS,gBAAgB,CACvB,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,SAAS,EACnB,aAAa,EAAE,OAAO,GACrB,KAAK,GAAG,IAAI,CAqBd;AAED,eAAO,MAAM,SAAS;;;;;CAKrB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;CAIxB,CAAC"}

package/lib/components/Badge/types.js

@@ -43,6 +43,7 @@ var propTypes = {
 exports.propTypes = propTypes;
 var defaultProps = {
   size: 'medium',
-  variant: 'round'
+  variant: 'round',
+  color: 'information'
 };
 exports.defaultProps = defaultProps;

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

@@ -1,10 +1,7 @@
 import React from 'react';
-import { Size, Kind, Intent, Variant } from './types';
-export interface StyledButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    kind?: Kind;
-    intent?: Intent;
-    variant?: Variant;
-    size: Size;
+import { ButtonProps } from './types';
+export interface StyledButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, ButtonProps {
+    $loading?: ButtonProps['loading'];
 }
 declare const StyledButton: import("styled-components").StyledComponent<"button", any, StyledButtonProps, never>;
 export default StyledButton;

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

@@ -1 +1 @@
-{"version":3,"file":"StyledButton.d.ts","sourceRoot":"","sources":["../../../src/components/Button/StyledButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAsB1B,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAe,MAAM,SAAS,CAAC;AA0JnE,MAAM,WAAW,iBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,IAAI,CAAC;CACZ;AAED,QAAA,MAAM,YAAY,sFAkBjB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"StyledButton.d.ts","sourceRoot":"","sources":["../../../src/components/Button/StyledButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAuB1B,OAAO,EAAQ,WAAW,EAAE,MAAM,SAAS,CAAC;AAE5C,MAAM,WAAW,iBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,WAAW;IACb,QAAQ,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CACnC;AA6LD,QAAA,MAAM,YAAY,sFAkBjB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/Button/StyledButton.js

@@ -17,6 +17,8 @@ var _designTokens = _interopRequireWildcard(require("@decisiv/design-tokens"));
 
 var _ConfigProvider = require("../../providers/ConfigProvider");
 
+var _dynamicModifiers = require("../../utils/dynamicModifiers");
+
 var _focusRingWithColor = _interopRequireDefault(require("../../utils/focusRingWithColor"));
 
 var _BaseButton = _interopRequireDefault(require("../../atoms/BaseButton"));
@@ -45,31 +47,57 @@ var color = _styledTheming.default.variants(_ConfigProvider.themeKeys.mode, 'var
     dark: (0, _styledComponents.css)(["background-color:", ";color:", ";&:focus:not(:active){border-color:", ";", "}&:hover:not(:active){background-color:", ";color:", ";}"], _colors.interactionPrimaryLightFg, _colors.interactionPrimaryLight, _colors.focusRingColors.dark.inverted.primary.border, (0, _focusRingWithColor.default)(_colors.focusRingColors.dark.inverted.primary.shadow), _colors.snowWhiteAlpha, _colors.interactionPrimaryLightFg)
   },
   ghost: {
-    light: (0, _styledComponents.css)(["background-color:transparent;color:", ";padding:0;&:focus:not(:active){border-color:", ";", "}&:hover:not(:active){color:", ";}&:disabled:disabled{background-color:transparent;color:", ";}"], _colors.interactionPrimaryLight, _colors.focusRingColors.light.ghost.border, (0, _focusRingWithColor.default)(_colors.focusRingColors.light.ghost.shadow), _colors.interactionSecondaryLight, (0, _toColorString.default)(opacityColors.charcoal40)),
-    dark: (0, _styledComponents.css)(["background-color:transparent;color:", ";padding:0;&:focus:not(:active){border-color:", ";", "}&:hover:not(:active){color:", ";}&:disabled:disabled{background-color:transparent;color:", ";}"], _colors.interactionPrimaryDark, _colors.focusRingColors.dark.ghost.border, (0, _focusRingWithColor.default)(_colors.focusRingColors.dark.ghost.shadow), _colors.interactionSecondaryLight, (0, _toColorString.default)(opacityColors.charcoal40))
+    light: (0, _styledComponents.css)(["background-color:transparent;color:", ";padding:0;&:focus:not(:active){border-color:", ";", "}&:hover:not(:active){color:", ";}"], _colors.interactionPrimaryLight, _colors.focusRingColors.light.ghost.border, (0, _focusRingWithColor.default)(_colors.focusRingColors.light.ghost.shadow), _colors.interactionSecondaryLight),
+    dark: (0, _styledComponents.css)(["background-color:transparent;color:", ";padding:0;&:focus:not(:active){border-color:", ";", "}&:hover:not(:active){color:", ";}"], _colors.interactionPrimaryDark, _colors.focusRingColors.dark.ghost.border, (0, _focusRingWithColor.default)(_colors.focusRingColors.dark.ghost.shadow), _colors.interactionSecondaryLight)
   }
 });
-/** map the Button size values to the matching font size values */
+/** map the Button size values to the matching font size scalar values */
 
 
-var sizeToFontSize = {
-  medium: 'default',
-  small: 'paragraph2'
+var sizeToScalarSize = {
+  medium: fontSizes.default,
+  small: fontSizes.paragraph2,
+  large: fontSizes.header4,
+  extraLarge: 18
 };
 /** map the Button size values to the matching heights, in rem */
 
 var sizeToHeight = {
   medium: (0, _rem.default)(32),
-  small: (0, _rem.default)(24)
+  small: (0, _rem.default)(24),
+  large: (0, _rem.default)(44),
+  extraLarge: (0, _rem.default)(50)
+};
+/** map the Button size values to the matching X padding, in rem */
+
+var sizeToPaddingX = {
+  medium: (0, _rem.default)(base),
+  small: (0, _rem.default)(base),
+  large: (0, _rem.default)(base * 1.5),
+  extraLarge: (0, _rem.default)(base * 1.5)
 };
 
 var buttonSizeModifier = function buttonSizeModifier(_ref) {
-  var size = _ref.size;
-  return (0, _styledComponents.css)(["font-size:", ";height:", ";"], (0, _rem.default)(fontSizes[sizeToFontSize[size]]), sizeToHeight[size]);
+  var size = _ref.size,
+      variant = _ref.variant;
+  return (0, _styledComponents.css)(["font-size:", ";height:", ";padding:0 ", ";"], (0, _rem.default)(sizeToScalarSize[size]), sizeToHeight[size], variant !== 'ghost' && sizeToPaddingX[size]);
 };
 
 var disabledStyles = function disabledStyles(_ref2) {
-  var variant = _ref2.variant;
+  var variant = _ref2.variant,
+      $loading = _ref2.$loading;
+
+  if ($loading) {
+    if (variant === 'ghost') {
+      return (0, _styledComponents.css)(["&:disabled:disabled{border-color:transparent;color:", ";cursor:not-allowed;}"], _colors.interactionSecondaryLight);
+    }
+
+    if (variant === 'inverted') {
+      return (0, _styledComponents.css)(["&:disabled:disabled{background-color:", ";border-color:transparent;color:", ";cursor:not-allowed;}"], _colors.snowWhiteAlpha, _colors.interactionPrimaryLightFg);
+    }
+
+    return (0, _styledComponents.css)(["&:disabled:disabled{background-color:", ";border-color:transparent;color:", ";cursor:not-allowed;}"], _colors.interactionSecondaryLight, _colors.interactionPrimaryLightFg);
+  }
 
   if (variant === 'ghost') {
     return (0, _styledComponents.css)(["&:disabled:disabled{background-color:transparent;color:", ";cursor:not-allowed;}"], (0, _toColorString.default)(opacityColors.charcoal40));
@@ -81,6 +109,6 @@ var disabledStyles = function disabledStyles(_ref2) {
 var StyledButton = (0, _styledComponents.default)(_BaseButton.default).withConfig({
   displayName: "StyledButton",
   componentId: "sc-1khcx6y-0"
-})(["align-items:center;border-radius:", ";border:1px solid transparent;display:flex;font-weight:", ";justify-content:center;line-height:1;outline:none;padding:0 ", ";text-transform:uppercase;white-space:nowrap;", ";", ";", ";", ";", ";"], (0, _rem.default)(2), _designTokens.typography.weight.alias.default, (0, _rem.default)(base), color, _kind.default, _intent.default, buttonSizeModifier, disabledStyles);
+})(["align-items:center;border-radius:", ";border:1px solid transparent;display:flex;font-weight:", ";justify-content:center;line-height:1;outline:none;text-transform:uppercase;white-space:nowrap;", ";", ";", ";", ";", ";", ";"], (0, _rem.default)(2), _designTokens.typography.weight.alias.default, color, _kind.default, _intent.default, buttonSizeModifier, (0, _dynamicModifiers.applyDynamicModifiers)('minWidth', 'min-width'), disabledStyles);
 var _default = StyledButton;
 exports.default = _default;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAIA,OAAc,EAA4B,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAMhF,OAAO,EACL,WAAW,EACX,SAAS,EAOV,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAE,yBAAyB,EAAE,MAAM,UAAU,CAAC;AAuFrD,QAAA,MAAM,aAAa,EAAE,sBAAsB,CACzC,SAAS,EACT,WAAW,CACS,CAAC;AASvB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,eAAe,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAIA,OAAc,EAA4B,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAchF,OAAO,EACL,WAAW,EACX,SAAS,EAOV,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAE,yBAAyB,EAAE,MAAM,UAAU,CAAC;AAoJrD,QAAA,MAAM,aAAa,EAAE,sBAAsB,CACzC,SAAS,EACT,WAAW,CACS,CAAC;AASvB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,eAAe,aAAa,CAAC"}