@occmundial/occ-atomic 3.0.0-beta.23 → 3.0.0-beta.25

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+# [3.0.0-beta.25](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.24...v3.0.0-beta.25) (2024-07-03)
+
+
+### Bug Fixes
+
+* Add hover styles to alert link action ([1e7efde](https://github.com/occmundial/occ-atomic/commit/1e7efde311085677f43c5057769d406c88d13c33))
+* Move hover styles to cta classname ([b457e9b](https://github.com/occmundial/occ-atomic/commit/b457e9b639627361ee4b272dc64663457d67a60f))
+
+# [3.0.0-beta.24](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.23...v3.0.0-beta.24) (2024-06-28)
+
+
+### Bug Fixes
+
+* Handle key press on Avatar ([5821f9a](https://github.com/occmundial/occ-atomic/commit/5821f9ab94ee67af5a6ceebfe587dfa23656a9be))
+* Update structure and styles of Avatar ([ed5ad44](https://github.com/occmundial/occ-atomic/commit/ed5ad44f42e8e2665f6b1e59db149fc27b8842f4))
+
 # [3.0.0-beta.23](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.22...v3.0.0-beta.23) (2024-06-27)
 
 

package/build/Avatar/Avatar.js

@@ -15,6 +15,12 @@ var _AvatarContent = _interopRequireDefault(require("./AvatarContent"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(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; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -44,33 +50,72 @@ var Avatar = /*#__PURE__*/function (_React$Component) {
 
   var _super = _createSuper(Avatar);
 
-  function Avatar() {
+  function Avatar(props) {
+    var _this;
+
     _classCallCheck(this, Avatar);
 
-    return _super.apply(this, arguments);
+    _this = _super.call(this, props);
+    _this.handleKeyUp = _this.handleKeyUp.bind(_assertThisInitialized(_this));
+    return _this;
   }
 
   _createClass(Avatar, [{
+    key: "handleKeyDown",
+    value: function handleKeyDown(e) {
+      if (e.keyCode == 13 || e.keyCode == 32) {
+        e.preventDefault();
+      }
+    }
+  }, {
+    key: "handleKeyUp",
+    value: function handleKeyUp(e) {
+      if (e.keyCode == 13 || e.keyCode == 32) {
+        var _this$props = this.props,
+            onEdit = _this$props.onEdit,
+            onClick = _this$props.onClick;
+        var isEditable = onEdit || onClick;
+        var handleClick = isEditable ? onClick || onEdit : undefined;
+        if (handleClick) handleClick();
+      }
+    }
+  }, {
     key: "render",
     value: function render() {
-      var _this$props = this.props,
-          classes = _this$props.classes,
-          photo = _this$props.photo,
-          gender = _this$props.gender,
-          name = _this$props.name,
-          size = _this$props.size,
-          id = _this$props.id,
-          className = _this$props.className,
-          style = _this$props.style;
+      var _this$props2 = this.props,
+          classes = _this$props2.classes,
+          photo = _this$props2.photo,
+          name = _this$props2.name,
+          _this$props2$size = _this$props2.size,
+          size = _this$props2$size === void 0 ? 40 : _this$props2$size,
+          id = _this$props2.id,
+          className = _this$props2.className,
+          style = _this$props2.style,
+          onEdit = _this$props2.onEdit,
+          onClick = _this$props2.onClick,
+          disabled = _this$props2.disabled;
+      var isEditable = onEdit || onClick;
+      var handleClick = isEditable ? onClick || onEdit : undefined;
+      var tabIndexValue = isEditable && !disabled ? 0 : undefined;
+      var combinedClasses = "".concat(classes.circle).concat(isEditable ? " ".concat(classes.editable) : '').concat(disabled ? " ".concat(classes.disabled) : '').concat(className ? " ".concat(className) : '');
       return /*#__PURE__*/_react["default"].createElement("div", {
         id: id,
-        className: "".concat(classes.circle).concat(className ? " ".concat(className) : ''),
-        style: style
+        className: combinedClasses,
+        onClick: handleClick,
+        onKeyDown: this.handleKeyDown,
+        onKeyUp: this.handleKeyUp,
+        tabIndex: tabIndexValue,
+        style: _objectSpread(_objectSpread({}, style), {}, {
+          width: size,
+          height: size
+        })
       }, /*#__PURE__*/_react["default"].createElement(_AvatarContent["default"], {
         photo: photo,
-        gender: gender,
         name: name,
-        size: size
+        size: size,
+        onEdit: onEdit,
+        onClick: onClick,
+        disabled: disabled
       }));
     }
   }]);
@@ -78,23 +123,26 @@ var Avatar = /*#__PURE__*/function (_React$Component) {
   return Avatar;
 }(_react["default"].Component);
 
-Avatar.defaultProps = {
-  size: 70
-};
 Avatar.propTypes = {
   classes: _propTypes["default"].object.isRequired,
 
   /** A url to show a photo as the avatar. */
   photo: _propTypes["default"].string,
 
-  /** Use the values 'm' or 'f' to show a default avatar with an icon representing the gender. */
-  gender: _propTypes["default"].oneOf(['f', 'm']),
-
   /** Pass a name to show two initials. */
   name: _propTypes["default"].string,
 
   /** The size of the avatar. */
   size: _propTypes["default"].number,
+
+  /** A function to handle the click action for editing. */
+  onEdit: _propTypes["default"].func,
+
+  /** A function to handle the click. */
+  onClick: _propTypes["default"].func,
+
+  /** Determines if the avatar is disabled. */
+  disabled: _propTypes["default"].bool,
   id: _propTypes["default"].string,
   className: _propTypes["default"].string,
   style: _propTypes["default"].object

package/build/Avatar/Avatar.test.js

@@ -35,17 +35,24 @@ describe("AvatarJSS", function () {
     }));
     expect(wrapper).toMatchSnapshot();
   });
+  it('returns the right width and height', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
+      name: "John Doe",
+      size: 50
+    }));
+    var styles = wrapper.dive().props().style;
+    expect(styles.width).toBe(50);
+    expect(styles.height).toBe(50);
+    wrapper.setProps({
+      size: 70
+    });
+    var styles2 = wrapper.dive().props().style;
+    expect(styles2.width).toBe(70);
+    expect(styles2.height).toBe(70);
+  });
 });
 describe("Avatar styles", function () {
   it('matches the snapshot', function () {
     expect(_styles["default"]).toMatchSnapshot();
   });
-  it('returns the right width and height', function () {
-    var props = {};
-    expect(_styles["default"].circle.width(props)).toBe(70);
-    expect(_styles["default"].circle.height(props)).toBe(70);
-    props.size = 50;
-    expect(_styles["default"].circle.width(props)).toBe(50);
-    expect(_styles["default"].circle.height(props)).toBe(50);
-  });
 });

package/build/Avatar/AvatarContent/AvatarContent.js

@@ -9,40 +9,77 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _Icon = _interopRequireDefault(require("../../Icon"));
+
+var _colors = _interopRequireDefault(require("../../tokens/colors.json"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var capitalLetter = function capitalLetter(name) {
-  if (name) {
-    var capitals = name.toUpperCase().split(" ");
-    capitals = capitals.filter(Boolean);
-    return /*#__PURE__*/_react["default"].createElement("span", null, capitals[0] ? capitals[0].charAt(0) : 'N', capitals[1] ? capitals[1].charAt(0) : 'O');
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_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; }
+
+var getInitials = function getInitials(name) {
+  if (name && name.trim()) {
+    var _name$trim$replace$to = name.trim().replace(/\s+/g, ' ').toUpperCase().split(' '),
+        _name$trim$replace$to2 = _slicedToArray(_name$trim$replace$to, 2),
+        firstName = _name$trim$replace$to2[0],
+        lastName = _name$trim$replace$to2[1];
+
+    return "".concat(firstName === null || firstName === void 0 ? void 0 : firstName.charAt(0)).concat(lastName === null || lastName === void 0 ? void 0 : lastName.charAt(0));
   }
 
-  return "";
+  return null;
 };
 
 var AvatarContent = function AvatarContent(_ref) {
   var classes = _ref.classes,
       photo = _ref.photo,
-      gender = _ref.gender,
       name = _ref.name,
-      size = _ref.size;
+      size = _ref.size,
+      onEdit = _ref.onEdit,
+      onClick = _ref.onClick,
+      disabled = _ref.disabled;
+  var initials = getInitials(name);
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: classes.wrap
-  }, gender && /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(classes.cont, " ").concat(classes[gender])
-  }), !gender && name && /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(classes.cont, " ").concat(classes.capital),
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(classes.cont).concat(onClick ? " ".concat(classes.clickable) : '').concat(onEdit ? " ".concat(classes.editable) : '').concat(disabled ? " ".concat(classes.disabled) : '').concat(photo ? " ".concat(classes.photo) : '').concat(photo && (onClick || onEdit) ? " ".concat(classes.hoverPhoto) : ''),
+    style: photo ? {
+      background: "url('".concat(photo, "') no-repeat center center / cover")
+    } : null
+  }, !photo && !initials && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    iconName: "person",
+    className: classes.person,
+    colors: [disabled ? _colors["default"].icon["default"].disabled : _colors["default"].icon.brand["default"]],
+    size: 24,
     style: size ? {
-      fontSize: "".concat(size * 0.4, "px"),
-      lineHeight: "".concat(size, "px")
+      transform: "scale(".concat(size / 40, ")")
     } : {}
-  }, capitalLetter(name)), photo && /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.cont,
-    style: {
-      background: "url('".concat(photo, "') no-repeat center center / cover")
-    }
-  }));
+  }), initials && /*#__PURE__*/_react["default"].createElement("span", {
+    className: "".concat(classes.initials, " ").concat(disabled ? classes.disabledInitials : ''),
+    style: size ? {
+      transform: "scale(".concat(size / 40, ")")
+    } : {}
+  }, initials), /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.overlay
+  }, onEdit && !disabled && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    iconName: "camera",
+    className: classes.camera,
+    colors: [disabled ? _colors["default"].icon["default"].disabled : _colors["default"].icon.inverse["default"]],
+    size: 24,
+    style: size ? {
+      transform: "scale(".concat(size / 40, ")")
+    } : {}
+  }))));
 };
 
 AvatarContent.propTypes = {
@@ -50,7 +87,10 @@ AvatarContent.propTypes = {
   photo: _propTypes["default"].string,
   gender: _propTypes["default"].string,
   name: _propTypes["default"].string,
-  size: _propTypes["default"].number
+  size: _propTypes["default"].number,
+  onEdit: _propTypes["default"].func,
+  onClick: _propTypes["default"].func,
+  disabled: _propTypes["default"].bool
 };
 var _default = AvatarContent;
 exports["default"] = _default;

package/build/Avatar/AvatarContent/AvatarContent.test.js

@@ -27,25 +27,12 @@ describe("AvatarContent", function () {
     }));
     expect(wrapper).toMatchSnapshot();
   });
-  it('returns the first two capital letters of the name', function () {
+  it('returns the first two initial letters of the name', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_AvatarContent["default"], {
       name: "John Doe",
       classes: classes
     }));
-    expect(wrapper.find('.capital span').text()).toEqual('JD');
-  });
-  it('shows the right gender icon', function () {
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_AvatarContent["default"], {
-      gender: "m",
-      classes: classes
-    }));
-    expect(wrapper.find('.m').length).toBe(1);
-    expect(wrapper.find('.f').length).toBe(0);
-    wrapper.setProps({
-      gender: 'f'
-    });
-    expect(wrapper.find('.m').length).toBe(0);
-    expect(wrapper.find('.f').length).toBe(1);
+    expect(wrapper.find('.initials').text()).toEqual('JD');
   });
   it('renders the photo as a background', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_AvatarContent["default"], {
@@ -60,9 +47,8 @@ describe("AvatarContent", function () {
       size: 50,
       classes: classes
     }));
-    var styles = wrapper.find('.capital').prop('style');
-    expect(styles).toHaveProperty('fontSize', '20px');
-    expect(styles).toHaveProperty('lineHeight', '50px');
+    var styles = wrapper.find('.initials').prop('style');
+    expect(styles).toHaveProperty('transform', 'scale(1.25)');
   });
 });
 describe("AvatarContentJSS", function () {

package/build/Avatar/AvatarContent/__snapshots__/AvatarContent.test.js.snap

@@ -4,31 +4,91 @@ exports[`AvatarContent matches the snapshot 1`] = `ShallowWrapper {}`;
 
 exports[`AvatarContent styles matches the snapshot 1`] = `
 Object {
-  "capital": Object {
-    "background": "#f5f5f5",
-    "color": "#dddddd",
-    "fontFamily": "'OccText', sans-serif",
-    "fontSize": "57px",
-    "fontStyle": "normal",
-    "fontWeight": "400",
-    "letterSpacing": -2,
-    "lineHeight": "72px",
-    "textAlign": "center",
+  "camera": Object {
+    "gridColumnStart": 1,
+    "gridRowStart": 1,
+    "opacity": 0,
+    "transition": "all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s",
+  },
+  "clickable": Object {
+    "&:active": Object {
+      "background": "#ABBDE4",
+    },
+    "&:hover": Object {
+      "background": "#CAD5EE",
+    },
+    "transition": "all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s",
   },
   "cont": Object {
-    "borderRadius": "50%",
+    "alignItems": "center",
+    "background": "#E9EEF8",
+    "borderRadius": "9999px",
+    "display": "grid",
     "height": "100%",
+    "justifyContent": "center",
     "left": "0",
     "overflow": "hidden",
     "position": "absolute",
     "top": "0",
     "width": "100%",
   },
-  "f": Object {
-    "background": "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJCQkgdmlld0JveD0iMCAwIDcwIDcwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA3MCA3MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgoJCTxyZWN0IHk9IjAiIGZpbGw9IiNFOEVFRjgiIHdpZHRoPSI3MCIgaGVpZ2h0PSI3MCIvPgoJCTxwYXRoIGZpbGw9IiNEMEQ5RUQiIGQ9Ik00OS42LDI4LjRjLTAuOCwxLTIuNywxLjktNiwzLjJjLTQuOCwyLTkuNiwwLjYtMTEuOCwwYy03LjYtMS45LTExLDQuOC04LjQsMTEuM2MwLjQsMS4xLDAuOSwyLjUsMS40LDMuOQoJCQljLTAuOC01LjgtMC41LTE0LjUsNS41LTEzLjFjMi40LDAuNiw3LjgsMi4yLDEzLDBjMi45LTEuMiw1LjItMi43LDYuNS00YzAsMCwwLDAsMCwwYzAuMS0wLjUsMC4yLTAuOSwwLjMtMS40CgkJCUM0OS44LDI4LjUsNDkuNywyOC40LDQ5LjYsMjguNHoiLz4KCQk8bGluZWFyR3JhZGllbnQgaWQ9IlNWR0lEXzFfIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjMzLjMxMzUiIHkxPSI1Ny42MTI4IiB4Mj0iMzUuODEzNSIgeTI9IjY2LjM2MjgiPgoJCQk8c3RvcCAgb2Zmc2V0PSIwIiBzdHlsZT0ic3RvcC1jb2xvcjojQzJDREUyIi8+CgkJCTxzdG9wICBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiNEOUUxRUYiLz4KCQk8L2xpbmVhckdyYWRpZW50PgoJCTxwYXRoIGZpbGw9InVybCgjU1ZHSURfMV8pIiBkPSJNNDMuNSw1NS43QzQzLjUsNTUuNyw0My41LDU1LjYsNDMuNSw1NS43YzAsMC0wLjEsMC0wLjIsMC4xYy0wLjgsMC43LTEuNiwxLjQtMi41LDIuMQoJCQljLTMuMSwyLjQtNy4yLDIuNy0xMC41LDAuOWMtMC41LTAuMy0wLjktMC41LTEuMy0wLjljLTAuOC0wLjYtMS41LTEuMi0yLjEtMS43YzAuNSwzLjcsMC41LDcuMy0wLjQsMTAuMmMtMC4xLDAuNC0wLjMsMC44LTAuNSwxLjIKCQkJYzAsMC40LTAuMSwwLjgtMC4xLDEuMmMwLjIsMCwwLjMsMC4xLDAuNSwwLjFDMjksNjkuNiwzMiw3MCwzNSw3MGMzLDAsNS44LTAuNCw4LjYtMS4xYzAuMSwwLDAuMy0wLjEsMC40LTAuMQoJCQlDNDMuNCw2NC41LDQzLjIsNTguNiw0My41LDU1Ljd6Ii8+CgkJPHBhdGggZmlsbD0iI0JEQzhERiIgZD0iTTU1LjIsNDcuNWMxLjItNC4yLDEuOC05LjQsMS43LTEzLjZjMC0xNi4zLTExLjItMjUuNC0yMS41LTI1LjRDMTkuNiw4LjQsMTIuNiwyNS42LDEyLjUsMzkKCQkJYy0xLjEsOC45LTEuMywxOC41LDAuMSwyMi44YzAsMCwwLDAuMSwwLDAuMWMwLDAsMCwwLDAsMGMwLDAsMCwwLDAsMGMzLjcsMyw4LDUuMywxMi43LDYuN2MwLjEsMCwwLjMsMC4xLDAuNCwwLjEKCQkJYzAuMiwwLDAuMywwLjEsMC41LDAuMWMwLjEtMC44LDAuMS0xLjYsMC4yLTIuNWMxLTIuOSwxLTYuNiwwLjQtMTAuMmMwLTAuMy0wLjEtMC43LTAuMi0xYy0wLjEtMC40LTAuMS0wLjgtMC4yLTEuMgoJCQljLTAuNS0yLjUtMS4xLTQuOS0xLjgtNy4xYy0wLjUtMS41LTAuOS0yLjgtMS40LTMuOWMtMi41LTYuNSwwLjktMTMuMyw4LjQtMTEuM2MyLjIsMC42LDcsMiwxMS44LDBjMy4zLTEuNCw1LjItMi4yLDYtMy4yCgkJCWMwLjEsMCwwLjIsMC4xLDAuMywwLjFjLTAuMSwwLjQtMC4yLDAuOS0wLjMsMS40Yy0wLjMsMi0wLjYsNC40LTAuOCw2LjhjMS41LTEuNSwyLjQtMS42LDIuOS0wLjhjMC43LDEsMC4zLDIuMywwLDQuMwoJCQljLTAuMSwwLjgtMC40LDMtMC40LDMuNWMwLDEuMi0xLjIsMi4yLTIuNiwxLjhjMCwwLjMsMCwwLjYsMCwxYy0wLjMsMi40LTEuMyw0LjYtMi44LDYuM2MtMC44LDEtMS42LDItMi40LDIuOQoJCQljLTAuMSwwLjEtMC4xLDAuMS0wLjIsMC4yYy0wLjIsMy42LTAuMSw5LjMsMC4yLDEzLjFjMC4xLDAsMC4zLTAuMSwwLjQtMC4xYzYuMi0xLjYsMTEuNy00LjksMTYtOS4zQzU2LjIsNTYuMiw1My45LDUyLjEsNTUuMiw0Ny41CgkJCXoiLz4KCQk8bGluZWFyR3JhZGllbnQgaWQ9IlNWR0lEXzJfIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjkzLjQ2OTUiIHkxPSIxNzYuODA2MiIgeDI9IjM3LjIxOTUiIHkyPSI0MC41NTYyIj4KCQkJPHN0b3AgIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6I0M3RDJFNyIvPgoJCQk8c3RvcCAgb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2xvcjojRTBFN0YyIi8+CgkJPC9saW5lYXJHcmFkaWVudD4KCQk8cGF0aCBmaWxsPSJ1cmwoI1NWR0lEXzJfKSIgZD0iTTUxLjcsMzUuOWMtMC41LTAuOC0xLjQtMC44LTIuOSwwLjhjMC4yLTIuNCwwLjUtNC45LDAuOC02LjhjMCwwLDAsMCwwLDBjLTEuMywxLjMtMy42LDIuNy02LjUsNAoJCQljLTUuMSwyLjItMTAuNiwwLjYtMTMsMGMtNi4xLTEuNC02LjMsNy4yLTUuNSwxMy4xYzAuNywyLjEsMS4zLDQuNiwxLjgsNy4xYzAuMSwwLjQsMC4xLDAuOCwwLjIsMS4yYzAuMSwwLjMsMC4xLDAuNywwLjIsMQoJCQljMC43LDAuNiwxLjQsMS4xLDIuMSwxLjdjMC40LDAuMywwLjksMC42LDEuMywwLjljMy4zLDEuOCw3LjUsMS41LDEwLjUtMC45YzAuOS0wLjcsMS43LTEuNCwyLjUtMi4xYzAsMCwwLDAuMSwwLDAuMQoJCQljMC4xLTAuMSwwLjEtMC4xLDAuMi0wLjJjMC45LTAuOSwxLjctMS45LDIuNC0yLjljMS41LTEuNywyLjUtMy45LDIuOC02LjNjMC0wLjMsMC0wLjcsMC0xYzEuNSwwLjQsMi42LTAuNiwyLjYtMS44CgkJCWMwLTAuNSwwLjMtMi43LDAuNC0zLjVDNTIsMzguMiw1Mi4zLDM2LjksNTEuNywzNS45eiIvPgoJCTwvc3ZnPg==)",
+  "disabled": Object {
+    "& $camera": Object {
+      "opacity": 1,
+    },
+    "background": "#EDEDF1",
+    "pointerEvents": "none",
+  },
+  "disabledInitials": Object {
+    "color": "#878A9F",
+  },
+  "editable": Object {
+    "&:active $overlay": Object {
+      "background": "hsl(234 75.4% 12.7% / 0.4)",
+    },
+    "&:hover $camera": Object {
+      "opacity": 1,
+    },
+    "&:hover $overlay": Object {
+      "background": "hsl(234 75.4% 12.7% / 0.3)",
+    },
+  },
+  "hoverPhoto": Object {
+    "&:active $overlay": Object {
+      "background": "hsl(234 75.4% 12.7% / 0.4)",
+    },
+    "&:hover $overlay": Object {
+      "background": "hsl(234 75.4% 12.7% / 0.3)",
+    },
+  },
+  "initials": Object {
+    "color": "#083CAE",
+    "display": "inline-block",
+    "font": "400 16px/1.5 'OccText', sans-serif",
+    "gridColumnStart": "1",
+    "gridRowStart": "1",
+    "textAlign": "center",
+  },
+  "overlay": Object {
+    "alignItems": "center",
+    "border": "1px solid transparent",
+    "borderRadius": "50%",
+    "display": "grid",
+    "height": "100%",
+    "justifyContent": "center",
+    "left": "0",
+    "position": "absolute",
+    "top": "0",
+    "transition": "all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s",
+    "width": "100%",
+  },
+  "person": Object {
+    "gridColumnStart": 1,
+    "gridRowStart": 1,
+    "transition": "all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s",
   },
-  "m": Object {
-    "background": "url(data:image/svg+xml;base64,CgkJPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJCQkgdmlld0JveD0iMCAwIDcwIDcwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA3MCA3MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgoJCTxyZWN0IHk9IjAiIGZpbGw9IiNFOEVFRjgiIHdpZHRoPSI3MCIgaGVpZ2h0PSI3MCIvPgoJCTxsaW5lYXJHcmFkaWVudCBpZD0iU1ZHSURfMV8iIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iLTM2OS43ODE5IiB5MT0iMzMzLjIwODgiIHgyPSItMzY5LjMxMjIiIHkyPSIzMzIuMjQ1MSIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgtMzMuMDAyNCAzLjQ2ODcgLTMuNTUwNiAtMzMuNzgxNSAtMTA5NzYuNDAwNCAxMjU3Ny45Mzg1KSI+CgkJCTxzdG9wICBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOiNDMkNERTIiLz4KCQkJPHN0b3AgIG9mZnNldD0iMSIgc3R5bGU9InN0b3AtY29sb3I6I0Q5RTFFRiIvPgoJCTwvbGluZWFyR3JhZGllbnQ+CgkJPHBhdGggZmlsbD0idXJsKCNTVkdJRF8xXykiIGQ9Ik00Mi4yLDYxLjFjLTMsMi42LTcuNCwyLjYtMTAuNCwwYy00LjQtMy43LTcuNC02LTkuNC04LjJjMC4xLDMuMi0wLjMsOS40LTIuNCwxMy43QzI0LjYsNjguOCwyOS43LDcwLDM1LDcwCgkJCWM2LDAsMTEuNi0xLjUsMTYuNS00LjJjLTEtMi42LTEuNC03LjctMS41LTExLjhDNDguMyw1Niw0NS43LDU4LjEsNDIuMiw2MS4xeiIvPgoJCTxsaW5lYXJHcmFkaWVudCBpZD0iU1ZHSURfMl8iIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iNzkuMzcwNSIgeTE9IjE4NC44MTkyIiB4Mj0iMzYuOTAyOSIgeTI9IjQzLjM0NjUiPgoJCQk8c3RvcCAgb2Zmc2V0PSIwIiBzdHlsZT0ic3RvcC1jb2xvcjojQzdEMkU3Ii8+CgkJCTxzdG9wICBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiNFMEU3RjIiLz4KCQk8L2xpbmVhckdyYWRpZW50PgoJCTxwYXRoIGZpbGw9InVybCgjU1ZHSURfMl8pIiBkPSJNNTIuNSw0NC4yYy0xLjUtMC4yLTEuNC0yLjEtMS4yLTQuNmMwLjEtMS44LDAtMywwLjMtNGMwLDAtMC4xLDAtMC4xLDAuMWMtMi4zLDEuNC0xLjUtNC44LTItOS40CgkJCWMtMC4xLTEuMS0wLjItMy4xLTAuOC01LjNjMC0wLjEtMC4xLTAuMi0wLjEtMC4zYy0wLjMtMS0wLjYtMi0xLTIuOWMwLDAuNS0wLjIsMC42LTAuMi0wLjJjMC0wLjktMi4zLDEzLjMtMTguOCwxMy4zCgkJCWMtMS45LDAtMy45LTAuMi01LjgtMC41YzAuMSw0LjYsMCwxMC4xLTEuNyw2LjhjLTAuMy0wLjYtMC41LTEtMC43LTEuMmMwLjMsMSwwLjIsMi4xLDAuMywzLjhjMC4xLDIuNCwwLjIsNC4zLTEuMiw0LjYKCQkJYy0wLjEsMC0wLjEsMC0wLjIsMGMwLjEsMi43LDAuNCw0LjgsMC45LDUuOGMwLjUsMSwxLjIsMS45LDIuMSwyLjljMiwyLjEsNSw0LjUsOS40LDguMmMzLDIuNiw3LjQsMi42LDEwLjQsMAoJCQljMy41LTIuOSw2LjEtNS4xLDcuOC03YzEuNC0xLjYsMi4xLTMsMi4xLTQuNWMwLTAuMiwwLjQtMy4xLDAuNy01LjRDNTIuNyw0NC4yLDUyLjYsNDQuMiw1Mi41LDQ0LjJ6Ii8+CgkJPHBhdGggZmlsbD0iI0QwRDlFRCIgZD0iTTI2LjcsMjguOWMtMS4zLDAtMi41LTAuMS0zLjgtMC4yYzAsMC41LDAsMSwwLDEuNWMxLjksMC4zLDMuOCwwLjUsNS44LDAuNWMxNi41LDAsMTguOC0xNC4yLDE4LjgtMTMuMwoJCQljMCwwLjgsMC4yLDAuNywwLjIsMC4yYy0wLjEtMC4zLTAuMy0wLjUtMC40LTAuOEM0Ni43LDE2LDQ0LjYsMjguOSwyNi43LDI4Ljl6Ii8+CgkJPHBhdGggZmlsbD0iI0Q5RTFFRiIgZD0iTTU1LjUsMzNjLTAuMS0wLjMtMC4zLTAuNS0wLjUtMC42Yy0wLjUtMC4zLTEuMiwwLjMtMS44LDFjLTAuNCwwLjQtMC43LDAuOS0xLDEuMmMtMC4zLDAuMy0wLjQsMC42LTAuNiwxCgkJCWMtMC40LDEtMC4yLDIuMi0wLjMsNGMtMC4xLDIuNC0wLjIsNC4zLDEuMiw0LjZjMC4xLDAsMC4yLDAsMC4zLDBjMS4zLDAsMi4yLTEuMiwyLjItM0M1NS4xLDM5LjMsNTYuMywzNC43LDU1LjUsMzN6Ii8+CgkJPHBhdGggZmlsbD0iI0JEQzhERiIgZD0iTTU1LjEsMjEuMmMtMC4zLTIuNC0xLjUtNC44LTMuNi02LjhjLTAuMS0wLjEtMS45LTAuNS0yLjQtMC40Yy0wLjEtMC41LTAuNy0xLjktMS4xLTIuMQoJCQljLTIuNC0xLjMtNS41LTIuMi05LjItMi42QzM3LjMsOSwzNS43LDguOSwzNCw5LjJjLTUuNywxLTksOC4zLTEzLjcsOS45Yy00LjcsMS42LTQuMywxLjItNC4zLDUuNWMwLDEuMywwLjcsMi4yLDEuOCwyLjcKCQkJYzAsMS40LDAuMSwzLDAuMiw0LjRjMCwwLjIsMC4xLDAuNSwwLjEsMC44YzAuNCwwLjMsMC44LDAuNywxLjIsMS4yYzAuMiwwLjMsMC40LDAuNiwwLjYsMC44YzAuMywwLjQsMC41LDAuOCwwLjYsMS4yCgkJCWMwLjIsMC4yLDAuNCwwLjYsMC43LDEuMmMxLjYsMy4yLDEuNy0yLjMsMS43LTYuOGMwLTAuNSwwLTEsMC0xLjVjMS4zLDAuMSwyLjUsMC4yLDMuOCwwLjJjMTcuOSwwLDIwLTEyLjksMjAuNS0xMi4xCgkJCWMwLjEsMC4zLDAuMywwLjUsMC40LDAuOGMwLjQsMC45LDAuOCwxLjksMSwyLjljMCwwLjEsMC4xLDAuMiwwLjEsMC4zYzAuNSwyLjIsMC43LDQuMiwwLjgsNS4zYzAuNCw0LjctMC4zLDEwLjgsMiw5LjQKCQkJYzAsMCwwLjEsMCwwLjEtMC4xYzAuMS0wLjMsMC4zLTAuNywwLjYtMWMwLjMtMC40LDAuNy0wLjgsMS0xLjJjMC42LTAuNywxLjMtMS4zLDEuOC0xQzU1LjMsMjksNTUuNSwyNC40LDU1LjEsMjEuMnoiLz4KCQk8cGF0aCBmaWxsPSIjREVFNUYxIiBkPSJNMjAuOCwzOS42Yy0wLjEtMS43LDAtMi44LTAuMy0zLjhjLTAuMS0wLjQtMC4zLTAuOC0wLjYtMS4yYy0wLjItMC4yLTAuNC0wLjUtMC42LTAuOAoJCQljLTAuNC0wLjUtMC44LTAuOS0xLjItMS4yYy0wLjYtMC40LTEuMS0wLjUtMS41LDAuNGMtMC44LDEuNywwLjQsNi4zLDAuNCw4LjNjMC4xLDEuOCwxLDMuMSwyLjQsM2MwLjEsMCwwLjEsMCwwLjIsMAoJCQlDMjEuMSw0My45LDIwLjksNDIsMjAuOCwzOS42eiIvPgoJCTwvc3ZnPg==)",
+  "photo": Object {
+    "border": "1px solid #EDEDF1",
   },
   "wrap": Object {
     "height": "100%",

package/build/Avatar/AvatarContent/styles.js

@@ -5,14 +5,21 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _fonts = _interopRequireDefault(require("../../subatomic/fonts"));
+var _fonts = _interopRequireDefault(require("../../tokens/fonts.json"));
 
-var _icons = _interopRequireDefault(require("../../subatomic/icons"));
+var _colors = _interopRequireDefault(require("../../tokens/colors.json"));
 
-var _colors = _interopRequireDefault(require("../../subatomic/colors"));
+var _borderRadius = _interopRequireDefault(require("../../tokens/borderRadius.json"));
+
+var _fonts2 = _interopRequireDefault(require("../../subatomic/fonts"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+var avatar = _colors["default"].avatar,
+    text = _colors["default"].text,
+    border = _colors["default"].border;
+var transition = 'all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s';
+var font = _fonts["default"]['body-regular-strong'];
 var _default = {
   wrap: {
     position: 'relative',
@@ -25,25 +32,85 @@ var _default = {
     left: '0',
     width: '100%',
     height: '100%',
+    borderRadius: _borderRadius["default"]['br-full'],
+    overflow: 'hidden',
+    background: avatar.bg["default"],
+    display: 'grid',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  initials: {
+    display: 'inline-block',
+    font: "".concat(font.fontWeight, " ").concat(font.fontSize, "/").concat(font.lineHeight, " ").concat(_fonts2["default"].body),
+    color: text.indigo.primary,
+    gridRowStart: '1',
+    gridColumnStart: '1',
+    textAlign: 'center'
+  },
+  disabled: {
+    pointerEvents: 'none',
+    background: avatar.bg.disabled,
+    '& $camera': {
+      opacity: 1
+    }
+  },
+  disabledInitials: {
+    color: text.corp.disabled
+  },
+  clickable: {
+    transition: transition,
+    '&:hover': {
+      background: avatar.bg.hover
+    },
+    '&:active': {
+      background: avatar.bg.active
+    }
+  },
+  editable: {
+    '&:hover $camera': {
+      opacity: 1
+    },
+    '&:hover $overlay': {
+      background: avatar.bg.overlay.hover
+    },
+    '&:active $overlay': {
+      background: avatar.bg.overlay.active
+    }
+  },
+  person: {
+    gridRowStart: 1,
+    gridColumnStart: 1,
+    transition: transition
+  },
+  photo: {
+    border: "1px solid ".concat(border["default"].subtle)
+  },
+  hoverPhoto: {
+    '&:hover $overlay': {
+      background: avatar.bg.overlay.hover
+    },
+    '&:active $overlay': {
+      background: avatar.bg.overlay.active
+    }
+  },
+  camera: {
+    gridRowStart: 1,
+    gridColumnStart: 1,
+    opacity: 0,
+    transition: transition
+  },
+  overlay: {
     borderRadius: '50%',
-    overflow: 'hidden'
-  },
-  m: {
-    background: _icons["default"].base(_icons["default"].male.icon())
-  },
-  f: {
-    background: _icons["default"].base(_icons["default"].female.icon())
-  },
-  capital: {
-    fontFamily: _fonts["default"].body,
-    fontSize: '57px',
-    lineHeight: '72px',
-    fontWeight: '400',
-    background: _colors["default"].grey100,
-    color: _colors["default"].grey200,
-    textAlign: 'center',
-    letterSpacing: -2,
-    fontStyle: 'normal'
+    position: 'absolute',
+    top: '0',
+    left: '0',
+    width: '100%',
+    height: '100%',
+    display: 'grid',
+    alignItems: 'center',
+    justifyContent: 'center',
+    transition: transition,
+    border: "1px solid transparent"
   }
 };
 exports["default"] = _default;

package/build/Avatar/__snapshots__/Avatar.test.js.snap

@@ -6,10 +6,19 @@ exports[`Avatar styles matches the snapshot 1`] = `
 Object {
   "circle": Object {
     "borderRadius": "50%",
-    "height": [Function],
+    "outline": "none",
     "overflow": "hidden",
     "position": "relative",
-    "width": [Function],
+  },
+  "disabled": Object {
+    "pointerEvents": "none",
+  },
+  "editable": Object {
+    "&:focus-visible": Object {
+      "boxShadow": "0 0 0 8px rgba(0,110,255,0.3)",
+    },
+    "cursor": "pointer",
+    "transition": "all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s",
   },
 }
 `;

package/build/Avatar/styles.js

@@ -4,17 +4,28 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+
+var _shadows = _interopRequireDefault(require("../tokens/shadows.json"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var transition = 'all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s';
 var _default = {
   circle: {
     position: 'relative',
-    width: function width(props) {
-      return props.size ? props.size : 70;
-    },
-    height: function height(props) {
-      return props.size ? props.size : 70;
-    },
     borderRadius: '50%',
-    overflow: 'hidden'
+    overflow: 'hidden',
+    outline: 'none'
+  },
+  editable: {
+    cursor: 'pointer',
+    transition: transition,
+    '&:focus-visible': {
+      boxShadow: _shadows["default"]['focus-bright-blue']
+    }
+  },
+  disabled: {
+    pointerEvents: 'none'
   }
 };
 exports["default"] = _default;

package/build/Tip/Tip.js

@@ -38,6 +38,13 @@ var colorTextClasses = {
   success: 'textSuccess',
   error: 'textError'
 };
+var colorLinkClasses = {
+  info: 'linkInfo',
+  promote: 'linkPromote',
+  warning: 'linkWarning',
+  success: 'linkSuccess',
+  error: 'linkError'
+};
 /** Tip component with different themes (info, warning, success & error). You can pass a string or a react element as the children prop, but the bold regex will only work with strings. */
 
 var Tip = function Tip(_ref) {
@@ -79,7 +86,7 @@ var Tip = function Tip(_ref) {
     classes: "".concat(classes.normalText, " ").concat(classes[colorTextClasses[theme]]).concat(!banner ? " ".concat(classes.growText) : ''),
     text: children
   }), cta && /*#__PURE__*/_react["default"].createElement("a", _extends({
-    className: "".concat(classes.cta, " ").concat(classes[colorTextClasses[theme]]).concat(size === 'large' && banner ? " ".concat(classes.ctaBanner) : size === 'large' ? " ".concat(classes.ctaAlert) : ''),
+    className: "".concat(classes.cta, " ").concat(classes[colorLinkClasses[theme]]).concat(size === 'large' && banner ? " ".concat(classes.ctaBanner) : size === 'large' ? " ".concat(classes.ctaAlert) : ''),
     href: cta.href,
     target: cta.target,
     onClick: cta.onClick

package/build/Tip/__snapshots__/Tip.test.js.snap

@@ -24,7 +24,12 @@ Object {
     "padding": "12px",
   },
   "cta": Object {
+    "&:hover": Object {
+      "backgroundSize": "100%",
+      "cursor": "pointer",
+    },
     "alignSelf": "start",
+    "backgroundSize": "0%",
     "cursor": "pointer",
     "font": "400 14px/1.5 'OccText', sans-serif",
     "margin": Array [
@@ -34,6 +39,7 @@ Object {
     ],
     "textDecoration": "underline",
     "textWrap": "nowrap",
+    "transition": "all ease-out 150ms",
   },
   "ctaAlert": Object {
     "alignSelf": "center",
@@ -68,6 +74,46 @@ Object {
     "backgroundColor": "#e3efff",
     "outline": "1px solid #b9d7ff",
   },
+  "linkError": Object {
+    "&:active": Object {
+      "background": "linear-gradient(hsl(0 81.3% 51.8% / 0.2), hsl(0 81.3% 51.8% / 0.2))",
+    },
+    "background": "linear-gradient(hsl(0 81.3% 51.8% / 0.1), hsl(0 81.3% 51.8% / 0.1))",
+    "backgroundRepeat": "no-repeat",
+    "color": "#8b1313",
+  },
+  "linkInfo": Object {
+    "&:active": Object {
+      "background": "linear-gradient(hsl(221 91.2% 35.7% / 0.2), hsl(221 91.2% 35.7% / 0.2))",
+    },
+    "background": "linear-gradient(hsl(221 91.2% 35.7% / 0.1), hsl(221 91.2% 35.7% / 0.1))",
+    "backgroundRepeat": "no-repeat",
+    "color": "#083CAE",
+  },
+  "linkPromote": Object {
+    "&:active": Object {
+      "background": "linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0.3))",
+    },
+    "background": "linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,0.2))",
+    "backgroundRepeat": "no-repeat",
+    "color": "#fff",
+  },
+  "linkSuccess": Object {
+    "&:active": Object {
+      "background": "linear-gradient(hsl(143 63.8% 52.4% / 0.2), hsl(143 63.8% 52.4% / 0.2))",
+    },
+    "background": "linear-gradient(hsl(143 63.8% 52.4% / 0.1), hsl(143 63.8% 52.4% / 0.1))",
+    "backgroundRepeat": "no-repeat",
+    "color": "#16542e",
+  },
+  "linkWarning": Object {
+    "&:active": Object {
+      "background": "linear-gradient(hsl(41.1 100% 57.1% / 0.2), hsl(41.1 100% 57.1% / 0.2))",
+    },
+    "background": "linear-gradient(hsl(41.1 100% 57.1% / 0.1), hsl(41.1 100% 57.1% / 0.1))",
+    "backgroundRepeat": "no-repeat",
+    "color": "#664a0e",
+  },
   "maxWidth": Object {
     "margin": Array [
       0,

package/build/Tip/styles.js

@@ -69,6 +69,46 @@ var _default = {
   textPromote: {
     color: _colors["default"].text.white.primary
   },
+  linkInfo: {
+    color: _colors["default"].text.indigo.primary,
+    backgroundRepeat: 'no-repeat',
+    background: "linear-gradient(".concat(_colors["default"].link.brand.bg.hover, ", ").concat(_colors["default"].link.brand.bg.hover, ")"),
+    '&:active': {
+      background: "linear-gradient(".concat(_colors["default"].link.brand.bg.active, ", ").concat(_colors["default"].link.brand.bg.active, ")")
+    }
+  },
+  linkWarning: {
+    color: _colors["default"].text.warning,
+    backgroundRepeat: 'no-repeat',
+    background: "linear-gradient(".concat(_colors["default"].link.warning.bg.hover, ", ").concat(_colors["default"].link.warning.bg.hover, ")"),
+    '&:active': {
+      background: "linear-gradient(".concat(_colors["default"].link.warning.bg.active, ", ").concat(_colors["default"].link.warning.bg.active, ")")
+    }
+  },
+  linkSuccess: {
+    color: _colors["default"].text.success,
+    backgroundRepeat: 'no-repeat',
+    background: "linear-gradient(".concat(_colors["default"].link.success.bg.hover, ", ").concat(_colors["default"].link.success.bg.hover, ")"),
+    '&:active': {
+      background: "linear-gradient(".concat(_colors["default"].link.success.bg.active, ", ").concat(_colors["default"].link.success.bg.active, ")")
+    }
+  },
+  linkError: {
+    color: _colors["default"].text.error,
+    backgroundRepeat: 'no-repeat',
+    background: "linear-gradient(".concat(_colors["default"].link.error.bg.hover, ", ").concat(_colors["default"].link.error.bg.hover, ")"),
+    '&:active': {
+      background: "linear-gradient(".concat(_colors["default"].link.error.bg.active, ", ").concat(_colors["default"].link.error.bg.active, ")")
+    }
+  },
+  linkPromote: {
+    color: _colors["default"].text.white.primary,
+    backgroundRepeat: 'no-repeat',
+    background: "linear-gradient(".concat(_colors["default"].link.white.bg.hover, ", ").concat(_colors["default"].link.white.bg.hover, ")"),
+    '&:active': {
+      background: "linear-gradient(".concat(_colors["default"].link.white.bg.active, ", ").concat(_colors["default"].link.white.bg.active, ")")
+    }
+  },
   icon: {
     marginRight: _spacing["default"]['size-2'],
     flexShrink: 0
@@ -85,7 +125,13 @@ var _default = {
     cursor: 'pointer',
     textWrap: 'nowrap',
     margin: [_spacing["default"]['size-2'], 0, 0],
-    alignSelf: 'start'
+    alignSelf: 'start',
+    transition: 'all ease-out 150ms',
+    backgroundSize: '0%',
+    '&:hover': {
+      backgroundSize: '100%',
+      cursor: 'pointer'
+    }
   },
   ctaAlert: {
     margin: [0, 0, 0, _spacing["default"]['size-4']],

package/build/tokens/colors.json

@@ -437,6 +437,12 @@
         "hover": "hsl(221 91.2% 35.7% / 0.1)",
         "active": "hsl(221 91.2% 35.7% / 0.2)"
       }
+    },
+    "white": {
+      "bg": {
+        "hover": "rgba(255,255,255,0.2)",
+        "active": "rgba(255,255,255,0.3)"
+      }
     }
   },
   "nav": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@occmundial/occ-atomic",
-  "version": "3.0.0-beta.23",
+  "version": "3.0.0-beta.25",
   "description": "Collection of shareable styled React components for OCC applications.",
   "homepage": "http://occmundial.github.io/occ-atomic",
   "main": "build/index.js",