@decisiv/ui-components 2.0.1-alpha.181 → 2.0.1-alpha.183

package/lib/atoms/OptionsList/index.test.js

@@ -101,132 +101,100 @@ var defaultProps = {
   onChange: jest.fn()
 };
 describe('OptionsList', function () {
-  it('renders items and categories sub items', function () {
-    var _render = render(_react.default.createElement(_.default, defaultProps)),
-        queryByText = _render.queryByText;
-
-    items.forEach(function (item) {
-      var label = item.label;
-      expect(queryByText(label)).toBeInTheDocument();
-
-      if ((0, _utils.isCategory)(item)) {
-        item.items.forEach(function (_ref2) {
-          var subItemLabel = _ref2.label;
-          expect(queryByText(subItemLabel)).toBeInTheDocument();
-        });
-      }
-    });
-  });
-  it('renders custom option label', function () {
-    var renderOptionLabel = function renderOptionLabel(_ref3) {
-      var label = _ref3.label;
-      return _react.default.createElement("span", null, "".concat(label, " foo"));
-    };
-
-    var _render2 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
-      renderOptionLabel: renderOptionLabel
-    }))),
-        queryByText = _render2.queryByText;
-
-    items.forEach(function (item) {
-      var label = item.label;
-
-      if ((0, _utils.isCategory)(item)) {
-        item.items.forEach(function (_ref4) {
-          var subItemLabel = _ref4.label;
-          expect(queryByText("".concat(subItemLabel, " foo"))).toBeInTheDocument();
-        });
-      } else {
-        expect(queryByText("".concat(label, " foo"))).toBeInTheDocument();
-      }
+  ['small', 'medium'].forEach(function (size) {
+    it('renders items and categories sub items', function () {
+      var _render = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        size: size
+      }))),
+          queryByText = _render.queryByText;
+
+      items.forEach(function (item) {
+        var label = item.label;
+        expect(queryByText(label)).toBeInTheDocument();
+
+        if ((0, _utils.isCategory)(item)) {
+          item.items.forEach(function (_ref2) {
+            var subItemLabel = _ref2.label;
+            expect(queryByText(subItemLabel)).toBeInTheDocument();
+          });
+        }
+      });
     });
-  });
-  it('checks that labelDetails when provided ', function () {
-    var _render3 = render(_react.default.createElement(_.default, defaultProps)),
-        getByText = _render3.getByText;
-
-    expect(getByText('test detail label')).toBeInTheDocument();
-  });
-  it('navigates through the options with arrow keys', function () {
-    var _render4 = render(_react.default.createElement(_.default, defaultProps)),
-        getByText = _render4.getByText,
-        container = _render4.container;
-
-    var optionsList = container.querySelector('ul'); // simulate it is focused while tabbing
-
-    _react2.fireEvent.keyDown(container, {
-      key: 'Tab'
+    it('renders custom option label', function () {
+      var renderOptionLabel = function renderOptionLabel(_ref3) {
+        var label = _ref3.label;
+        return _react.default.createElement("span", null, "".concat(label, " foo"));
+      };
+
+      var _render2 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        renderOptionLabel: renderOptionLabel,
+        size: size
+      }))),
+          queryByText = _render2.queryByText;
+
+      items.forEach(function (item) {
+        var label = item.label;
+
+        if ((0, _utils.isCategory)(item)) {
+          item.items.forEach(function (_ref4) {
+            var subItemLabel = _ref4.label;
+            expect(queryByText("".concat(subItemLabel, " foo"))).toBeInTheDocument();
+          });
+        } else {
+          expect(queryByText("".concat(label, " foo"))).toBeInTheDocument();
+        }
+      });
     });
+    it('checks that labelDetails when provided ', function () {
+      var _render3 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        size: size
+      }))),
+          getByText = _render3.getByText;
 
-    _react2.fireEvent.focus(optionsList); // default first element active
-    // check the active item with border style
-
-
-    expect(getByText(defaultProps.items[0].label).closest('.label')).toHaveStyle("\n      border-color: ".concat((0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), ";\n    "));
-
-    _react2.fireEvent.keyDown(optionsList, {
-      key: 'ArrowDown'
+      expect(getByText('test detail label')).toBeInTheDocument();
     });
+    it('navigates through the options with arrow keys', function () {
+      var _render4 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        size: size
+      }))),
+          getByText = _render4.getByText,
+          container = _render4.container;
 
-    expect(getByText(defaultProps.items[1].label).closest('.label')).toHaveStyle("\n      border-color: ".concat((0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), ";\n    "));
+      var optionsList = container.querySelector('ul'); // simulate it is focused while tabbing
 
-    _react2.fireEvent.keyDown(optionsList, {
-      key: 'ArrowUp'
-    });
+      _react2.fireEvent.keyDown(container, {
+        key: 'Tab'
+      });
 
-    expect(getByText(defaultProps.items[0].label).closest('.label')).toHaveStyle("\n      border-color: ".concat((0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), ";\n    "));
-  });
-  it('selects an item with Enter or Space key', function () {
-    var onChange = jest.fn();
+      _react2.fireEvent.focus(optionsList); // default first element active
+      // check the active item with border style
 
-    var _render5 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
-      onChange: onChange
-    }))),
-        getByLabelText = _render5.getByLabelText,
-        container = _render5.container;
 
-    var selectedItem = defaultProps.items[1];
-    var optionsList = container.querySelector('ul'); // simulate it is focused while tabbing
+      expect(getByText(defaultProps.items[0].label).closest('.label')).toHaveStyle("\n      border-color: ".concat((0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), ";\n        "));
 
-    _react2.fireEvent.keyDown(container, {
-      key: 'Tab'
-    });
+      _react2.fireEvent.keyDown(optionsList, {
+        key: 'ArrowDown'
+      });
 
-    _react2.fireEvent.focus(optionsList);
+      expect(getByText(defaultProps.items[1].label).closest('.label')).toHaveStyle("\n      border-color: ".concat((0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), ";\n        "));
 
-    _react2.fireEvent.keyDown(optionsList, {
-      key: 'ArrowDown'
-    });
+      _react2.fireEvent.keyDown(optionsList, {
+        key: 'ArrowUp'
+      });
 
-    _react2.fireEvent.keyDown(optionsList, {
-      key: 'Enter'
+      expect(getByText(defaultProps.items[0].label).closest('.label')).toHaveStyle("\n      border-color: ".concat((0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), ";\n        "));
     });
-
-    expect(onChange).toHaveBeenCalledWith(selectedItem.id);
-    expect(getByLabelText(selectedItem.label)).toBeChecked();
-  });
-  describe('selecting disabled element with keyboard', function () {
     it('selects an item with Enter or Space key', function () {
       var onChange = jest.fn();
-      var onlyDisabledItems = [{
-        id: '2',
-        label: 'Option 2',
-        value: '2',
-        disabled: true
-      }, {
-        id: disabledItemId,
-        label: disabledItemLabel,
-        value: '4',
-        disabled: true
-      }];
-
-      var _render6 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
-        items: onlyDisabledItems,
-        onChange: onChange
+
+      var _render5 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        onChange: onChange,
+        size: size
       }))),
-          getByLabelText = _render6.getByLabelText,
-          container = _render6.container;
+          getByLabelText = _render5.getByLabelText,
+          container = _render5.container;
 
+      var selectedItem = defaultProps.items[1];
       var optionsList = container.querySelector('ul'); // simulate it is focused while tabbing
 
       _react2.fireEvent.keyDown(container, {
@@ -243,131 +211,179 @@ describe('OptionsList', function () {
         key: 'Enter'
       });
 
-      expect(onChange).not.toHaveBeenCalledWith(disabledItemId);
-      expect(onChange).not.toHaveBeenCalled();
-      expect(getByLabelText(disabledItemLabel)).not.toBeChecked();
+      expect(onChange).toHaveBeenCalledWith(selectedItem.id);
+      expect(getByLabelText(selectedItem.label)).toBeChecked();
     });
-  });
-  describe('single selection', function () {
-    it('calls onChange with id when item is clicked', function () {
-      var onChange = jest.fn();
-
-      var _render7 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
-        onChange: onChange
-      }))),
-          getByText = _render7.getByText,
-          getByLabelText = _render7.getByLabelText;
+    describe('selecting disabled element with keyboard', function () {
+      it('selects an item with Enter or Space key', function () {
+        var onChange = jest.fn();
+        var onlyDisabledItems = [{
+          id: '2',
+          label: 'Option 2',
+          value: '2',
+          disabled: true
+        }, {
+          id: disabledItemId,
+          label: disabledItemLabel,
+          value: '4',
+          disabled: true
+        }];
+
+        var _render6 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+          items: onlyDisabledItems,
+          onChange: onChange,
+          size: size
+        }))),
+            getByLabelText = _render6.getByLabelText,
+            container = _render6.container;
 
-      var item = items[0];
+        var optionsList = container.querySelector('ul'); // simulate it is focused while tabbing
 
-      _react2.fireEvent.click(getByText(item.label));
+        _react2.fireEvent.keyDown(container, {
+          key: 'Tab'
+        });
 
-      expect(onChange).toHaveBeenLastCalledWith(item.id);
-      var subItem = items[2].items[0];
+        _react2.fireEvent.focus(optionsList);
 
-      _react2.fireEvent.click(getByText(subItem.label));
+        _react2.fireEvent.keyDown(optionsList, {
+          key: 'ArrowDown'
+        });
 
-      expect(onChange).toHaveBeenLastCalledWith(subItem.id); // there should be an item marked as selected
+        _react2.fireEvent.keyDown(optionsList, {
+          key: 'Enter'
+        });
 
-      expect(getByLabelText(subItem.label)).toBeChecked();
+        expect(onChange).not.toHaveBeenCalledWith(disabledItemId);
+        expect(onChange).not.toHaveBeenCalled();
+        expect(getByLabelText(disabledItemLabel)).not.toBeChecked();
+      });
     });
-    describe('disabled element', function () {
-      it('does not calls onChange when item is clicked', function () {
+    describe('single selection', function () {
+      it('calls onChange with id when item is clicked', function () {
         var onChange = jest.fn();
 
-        var _render8 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
-          onChange: onChange
+        var _render7 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+          onChange: onChange,
+          size: size
         }))),
-            getByText = _render8.getByText,
-            getByLabelText = _render8.getByLabelText;
+            getByText = _render7.getByText,
+            getByLabelText = _render7.getByLabelText;
 
-        _react2.fireEvent.click(getByText(disabledItemLabel));
+        var item = items[0];
 
-        expect(onChange).not.toHaveBeenLastCalledWith(disabledItemId);
-        expect(onChange).not.toHaveBeenCalled(); // the item shouldn't be marked as selected
+        _react2.fireEvent.click(getByText(item.label));
 
-        expect(getByLabelText(disabledItemLabel)).not.toBeChecked();
+        expect(onChange).toHaveBeenLastCalledWith(item.id);
+        var subItem = items[2].items[0];
+
+        _react2.fireEvent.click(getByText(subItem.label));
+
+        expect(onChange).toHaveBeenLastCalledWith(subItem.id); // there should be an item marked as selected
+
+        expect(getByLabelText(subItem.label)).toBeChecked();
       });
-    });
-    describe('controlled', function () {
-      it('prefers value over internal', function () {
-        var selected = items[1];
+      describe('disabled element', function () {
+        it('does not calls onChange when item is clicked', function () {
+          var onChange = jest.fn();
 
-        var _render9 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
-          selected: selected.id
-        }))),
-            getByText = _render9.getByText,
-            getByLabelText = _render9.getByLabelText;
+          var _render8 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+            onChange: onChange,
+            size: size
+          }))),
+              getByText = _render8.getByText,
+              getByLabelText = _render8.getByLabelText;
 
-        var item = items[0];
+          _react2.fireEvent.click(getByText(disabledItemLabel));
 
-        _react2.fireEvent.click(getByText(item.label));
+          expect(onChange).not.toHaveBeenLastCalledWith(disabledItemId);
+          expect(onChange).not.toHaveBeenCalled(); // the item shouldn't be marked as selected
+
+          expect(getByLabelText(disabledItemLabel)).not.toBeChecked();
+        });
+      });
+      describe('controlled', function () {
+        it('prefers value over internal', function () {
+          var selected = items[1];
+
+          var _render9 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+            selected: selected.id,
+            size: size
+          }))),
+              getByText = _render9.getByText,
+              getByLabelText = _render9.getByLabelText;
+
+          var item = items[0];
 
-        expect(getByLabelText(item.label)).not.toBeChecked();
-        expect(getByLabelText(selected.label)).toBeChecked();
+          _react2.fireEvent.click(getByText(item.label));
+
+          expect(getByLabelText(item.label)).not.toBeChecked();
+          expect(getByLabelText(selected.label)).toBeChecked();
+        });
       });
     });
-  });
-  describe('multi selection', function () {
-    it('calls onChange with array of selected ids when item is clicked', function () {
-      var onChange = jest.fn();
+    describe('multi selection', function () {
+      it('calls onChange with array of selected ids when item is clicked', function () {
+        var onChange = jest.fn();
 
-      var _render10 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
-        onChange: onChange,
-        multiple: true
-      }))),
-          getByText = _render10.getByText,
-          getByLabelText = _render10.getByLabelText;
+        var _render10 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+          onChange: onChange,
+          multiple: true,
+          size: size
+        }))),
+            getByText = _render10.getByText,
+            getByLabelText = _render10.getByLabelText;
 
-      var item = items[0];
+        var item = items[0];
 
-      _react2.fireEvent.click(getByText(item.label));
+        _react2.fireEvent.click(getByText(item.label));
 
-      expect(onChange).toHaveBeenLastCalledWith([item.id]);
-      var subItem = items[2].items[0];
+        expect(onChange).toHaveBeenLastCalledWith([item.id]);
+        var subItem = items[2].items[0];
 
-      _react2.fireEvent.click(getByText(subItem.label));
+        _react2.fireEvent.click(getByText(subItem.label));
 
-      expect(onChange).toHaveBeenLastCalledWith([item.id, subItem.id]);
-      expect(getByLabelText(subItem.label)).toBeChecked();
-      expect(getByLabelText(item.label)).toBeChecked(); // second click unselects
+        expect(onChange).toHaveBeenLastCalledWith([item.id, subItem.id]);
+        expect(getByLabelText(subItem.label)).toBeChecked();
+        expect(getByLabelText(item.label)).toBeChecked(); // second click unselects
 
-      _react2.fireEvent.click(getByText(item.label));
+        _react2.fireEvent.click(getByText(item.label));
 
-      expect(onChange).toHaveBeenLastCalledWith([subItem.id]);
-    });
-    it('adds a footer with buttons when actions are provided', function () {
-      var onClick = jest.fn();
-      var actions = [{
-        id: '1',
-        text: 'apply',
-        onClick: onClick
-      }, {
-        id: '2',
-        text: 'cancel',
-        kind: 'secondary',
-        onClick: onClick
-      }, {
-        id: '3',
-        text: 'clear',
-        kind: 'secondary',
-        variant: 'ghost',
-        paddingLeft: 4,
-        onClick: onClick
-      }];
-
-      var _render11 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
-        actions: actions,
-        multiple: true
-      }))),
-          baseElement = _render11.baseElement,
-          getByText = _render11.getByText;
+        expect(onChange).toHaveBeenLastCalledWith([subItem.id]);
+      });
+      it('adds a footer with buttons when actions are provided', function () {
+        var onClick = jest.fn();
+        var actions = [{
+          id: '1',
+          text: 'apply',
+          onClick: onClick
+        }, {
+          id: '2',
+          text: 'cancel',
+          kind: 'secondary',
+          onClick: onClick
+        }, {
+          id: '3',
+          text: 'clear',
+          kind: 'secondary',
+          variant: 'ghost',
+          paddingLeft: 4,
+          onClick: onClick
+        }];
+
+        var _render11 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+          actions: actions,
+          multiple: true,
+          size: size
+        }))),
+            baseElement = _render11.baseElement,
+            getByText = _render11.getByText;
 
-      actions.forEach(function (_ref5) {
-        var label = _ref5.text;
-        return expect(getByText(label)).toBeTruthy();
+        actions.forEach(function (_ref5) {
+          var label = _ref5.text;
+          return expect(getByText(label)).toBeTruthy();
+        });
+        expect(baseElement).toMatchSnapshot();
       });
-      expect(baseElement).toMatchSnapshot();
     });
   });
 });

package/lib/atoms/OptionsList/schema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAA2C,CAAC;AAuExD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAA2C,CAAC;AA0ExD,eAAe,MAAM,CAAC"}

package/lib/atoms/OptionsList/schema.js

@@ -39,7 +39,8 @@ schema.makePropTypes = function () {
     renderOptionLabel: _reactDesc.PropTypes.func.description('Function to customize render of option labels, called with the item value.'),
     selectable: _reactDesc.PropTypes.bool.description('Enables selection in the options list.').defaultValue(true),
     role: _reactDesc.PropTypes.string.description('The role assigned to the list.').defaultValue('listbox'),
-    itemRole: _reactDesc.PropTypes.string.description('The role assigned to each item in the list.').defaultValue('option')
+    itemRole: _reactDesc.PropTypes.string.description('The role assigned to each item in the list.').defaultValue('option'),
+    size: _reactDesc.PropTypes.oneOf(['small', 'medium']).description('Defines the size of the OptionList').defaultValue('small')
   };
 };
 

package/lib/atoms/OptionsList/types.d.ts

@@ -5,9 +5,11 @@ import { AvatarProps } from '../../components/Avatar';
 import { BadgeProps } from '../../components/Badge';
 import { DimensionsProps } from '../../modifiers/dimensions';
 import { ButtonProps } from '../../components/Button';
+import { LinkProps } from '../../components/Link';
 export declare type OptionAvatarProps = Omit<AvatarProps, 'ref' | 'size'>;
 export declare type OptionBadgeProps = Omit<BadgeProps, 'size' | 'variant'>;
 export declare type InputMethod = 'mouse' | 'keyboard' | undefined;
+export declare type Size = 'small' | 'medium' | undefined;
 export declare type Selection = string | string[];
 export declare type OptionsListDimensions = Pick<DimensionsProps, 'minWidth' | 'maxHeight' | 'maxWidth'>;
 interface AvatarDecoration extends OptionAvatarProps {
@@ -38,6 +40,7 @@ export interface Category {
     items: Option[];
     label: string;
     showCheckbox?: boolean;
+    size?: Size;
 }
 export declare type CategoryProps = Category;
 export declare type IconComponent = (props: IconProps) => JSX.Element;
@@ -50,6 +53,7 @@ interface BaseOption {
     labelDetails?: string;
     showCheckbox?: boolean;
     meta?: object;
+    size?: Size;
 }
 export interface ItemOption extends BaseOption {
     value?: string;
@@ -76,10 +80,24 @@ export interface OptionsListProps extends OptionsListDimensions {
     showCheckbox?: boolean;
     tabIndex?: number;
     selectable?: boolean;
+    size?: Size;
     defaultSelected?: Selection;
     role?: string;
     itemRole?: string;
 }
 export declare type OptionsListContainerRef = HTMLUListElement;
+export interface StyledCategoryProps extends React.LiHTMLAttributes<HTMLLIElement> {
+    size: Size;
+}
+export interface ContainerProps {
+    borderRadius?: BorderRadiusProperty<string>;
+    isActive: boolean;
+    multiple: boolean;
+    inputMethod: InputMethod;
+    size: Size;
+}
+export interface StyledLinkProps extends LinkProps {
+    disabled: boolean;
+}
 export {};
 //# sourceMappingURL=types.d.ts.map

package/lib/atoms/OptionsList/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/types.ts"],"names":[],"mappings":"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"}

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;