@dialpad/dialtone-vue 3.30.1 → 3.31.0

package/dist/dialtone-vue.common.js

@@ -23,6 +23,30 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".enter-active,.leave-active{overflow:h
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
 
+/***/ }),
+
+/***/ 772:
+/***/ ((module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(81);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(645);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
+// Imports
+
+
+var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
+// Module
+___CSS_LOADER_EXPORT___.push([module.id, ".d-avatar--image-loaded{background-color:initial;background-image:unset}", ""]);
+// Exports
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
+
+
 /***/ }),
 
 /***/ 869:
@@ -542,6 +566,22 @@ var update = add("e1cef0bc", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
+/***/ 224:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+// style-loader: Adds some css to the DOM by adding a <style> tag
+
+// load the styles
+var content = __webpack_require__(772);
+if(content.__esModule) content = content.default;
+if(typeof content === 'string') content = [[module.id, content, '']];
+if(content.locals) module.exports = content.locals;
+// add the styles to the DOM
+var add = (__webpack_require__(402)/* ["default"] */ .Z)
+var update = add("7326dee6", content, true, {"sourceMap":false,"shadowMode":false});
+
+/***/ }),
+
 /***/ 704:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
@@ -1130,7 +1170,6 @@ __webpack_require__.r(__webpack_exports__);
 
 // EXPORTS
 __webpack_require__.d(__webpack_exports__, {
-  "AVATAR_COLOR_MODIFIERS": () => (/* reexport */ AVATAR_COLOR_MODIFIERS),
   "AVATAR_KIND_MODIFIERS": () => (/* reexport */ AVATAR_KIND_MODIFIERS),
   "AVATAR_SIZE_MODIFIERS": () => (/* reexport */ AVATAR_SIZE_MODIFIERS),
   "BADGE_KIND_MODIFIERS": () => (/* reexport */ BADGE_KIND_MODIFIERS),
@@ -1272,25 +1311,31 @@ if (typeof window !== 'undefined') {
 
 ;// CONCATENATED MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
 const external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject = require("vue");
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/avatar/avatar.vue?vue&type=template&id=093957dc
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/avatar/avatar.vue?vue&type=template&id=52a431d8
 
 const _hoisted_1 = ["id"];
+const _hoisted_2 = {
+  key: 1
+};
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_presence = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-presence");
 
   return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
     id: $props.id,
-    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-avatar', $data.AVATAR_KIND_MODIFIERS[$data.kind], $data.AVATAR_SIZE_MODIFIERS[$props.size], $data.AVATAR_COLOR_MODIFIERS[$props.color], $props.avatarClass]),
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-avatar', $data.AVATAR_KIND_MODIFIERS[$data.kind], $data.AVATAR_SIZE_MODIFIERS[$props.size], $props.avatarClass]),
+    style: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeStyle)($options.initialKindStyle),
     "data-qa": "dt-avatar"
-  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default"), $props.presence ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_presence, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
-    key: 0,
+  }, [$options.showDefaultSlot ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default", {
+    key: 0
+  }) : $options.showInitials ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", _hoisted_2, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($data.formattedInitials), 1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), $props.presence ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_presence, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+    key: 2,
     presence: $props.presence,
     class: ['d-avatar__presence', $data.AVATAR_PRESENCE_SIZE_MODIFIERS[$props.size]]
   }, $props.presenceProps, {
     "data-qa": "dt-presence"
-  }), null, 16, ["presence", "class"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 10, _hoisted_1);
+  }), null, 16, ["presence", "class"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 14, _hoisted_1);
 }
-;// CONCATENATED MODULE: ./components/avatar/avatar.vue?vue&type=template&id=093957dc
+;// CONCATENATED MODULE: ./components/avatar/avatar.vue?vue&type=template&id=52a431d8
 
 ;// CONCATENATED MODULE: ./common/constants.js
 /* TODO: Move and sort these in a constants directory
@@ -1377,6 +1422,15 @@ function getUniqueString() {
   let prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : DEFAULT_PREFIX;
   return `${prefix}${UNIQUE_ID_COUNTER++}`;
 }
+/**
+ * Returns a random element from array
+ * @param array
+ * @returns {*}
+ */
+
+function getRandomElement(array) {
+  return array[Math.floor(Math.random() * array.length)];
+}
 function formatMessages(messages) {
   if (!messages) {
     return [];
@@ -1472,6 +1526,7 @@ const pascalCaseToKebabCase = string => {
 };
 /* harmony default export */ const utils = ({
   getUniqueString,
+  getRandomElement,
   formatMessages,
   filterFormattedMessages,
   hasFormattedMessageOfType,
@@ -1483,7 +1538,7 @@ const pascalCaseToKebabCase = string => {
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/presence/presence.vue?vue&type=template&id=85037b42
 
 const presencevue_type_template_id_85037b42_hoisted_1 = ["aria-live"];
-const _hoisted_2 = {
+const presencevue_type_template_id_85037b42_hoisted_2 = {
   key: 0,
   "data-qa": "dt-presence-sr-text",
   class: "sr-only"
@@ -1494,7 +1549,7 @@ function presencevue_type_template_id_85037b42_render(_ctx, _cache, $props, $set
     "data-qa": "dt-presence",
     role: "status",
     "aria-live": _ctx.$attrs.ariaLive || 'off'
-  }, [$props.srText ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", _hoisted_2, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.srText), 1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
+  }, [$props.srText ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", presencevue_type_template_id_85037b42_hoisted_2, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.srText), 1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(["d-presence__inner", {
       'd-presence__inner--active': $props.presence === 'active',
       'd-presence__inner--away': $props.presence === 'away',
@@ -1569,43 +1624,35 @@ const AVATAR_KIND_MODIFIERS = {
   initials: 'd-avatar--initials'
 };
 const AVATAR_SIZE_MODIFIERS = {
+  xs: 'd-avatar--xs',
   sm: 'd-avatar--sm',
   md: 'd-avatar--md',
-  lg: 'd-avatar--lg'
+  lg: 'd-avatar--lg',
+  xl: 'd-avatar--xl'
 };
 const AVATAR_PRESENCE_SIZE_MODIFIERS = {
   md: 'd-avatar__presence--md',
   lg: 'd-avatar__presence--lg'
 };
-const AVATAR_COLOR_MODIFIERS = {
-  base: '',
-  'orange-200': 'd-avatar--orange-200',
-  'orange-300': 'd-avatar--orange-300',
-  'orange-400': 'd-avatar--orange-400',
-  'orange-500': 'd-avatar--orange-500',
-  'magenta-100': 'd-avatar--magenta-100',
-  'magenta-200': 'd-avatar--magenta-200',
-  'magenta-300': 'd-avatar--magenta-300',
-  'magenta-400': 'd-avatar--magenta-400',
-  'purple-200': 'd-avatar--purple-200',
-  'purple-300': 'd-avatar--purple-300',
-  'purple-400': 'd-avatar--purple-400',
-  'purple-500': 'd-avatar--purple-500',
-  'gold-100': 'd-avatar--gold-100',
-  'gold-200': 'd-avatar--gold-200',
-  'gold-300': 'd-avatar--gold-300',
-  'gold-500': 'd-avatar--gold-500'
-};
 const AVATAR_ICON_SIZES = {
+  xs: '100',
   sm: '200',
   md: '400',
-  lg: '500'
+  lg: '500',
+  xl: '600'
+};
+const AVATAR_ANGLES = [45, -45, 90, -90, 135, -135, 180, -180];
+const GRADIENT_COLORS = {
+  with100: ['purple-100', 'magenta-100', 'gold-100', 'blue-100'],
+  with200: ['purple-200', 'magenta-200', 'gold-200', 'blue-200']
 };
+const MAX_GRADIENT_COLORS = 3;
+const MAX_GRADIENT_COLORS_100 = 2;
 /* harmony default export */ const avatar_constants = ({
   AVATAR_KIND_MODIFIERS,
   AVATAR_SIZE_MODIFIERS,
-  AVATAR_COLOR_MODIFIERS,
-  AVATAR_ICON_SIZES
+  AVATAR_ICON_SIZES,
+  AVATAR_ANGLES
 });
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/avatar/avatar.vue?vue&type=script&lang=js
 
@@ -1638,7 +1685,7 @@ const AVATAR_ICON_SIZES = {
 
     /**
      * The size of the avatar
-     * @values sm, md, lg
+     * @values xs, sm, md, lg, xl
      */
     size: {
       type: String,
@@ -1646,20 +1693,6 @@ const AVATAR_ICON_SIZES = {
       validator: size => Object.keys(AVATAR_SIZE_MODIFIERS).includes(size)
     },
 
-    /**
-     * The color of the avatar
-     * @values base
-     * orange-200, orange-300, orange-400, orange-500,
-     * pink-300, pink-400, pink-500, pink-600,
-     * purple-200, purple-300, purple-500, purple-600,
-     * yellow-200, yellow-300, yellow-400, yellow-500
-     */
-    color: {
-      type: String,
-      default: 'base',
-      validator: color => Object.keys(AVATAR_COLOR_MODIFIERS).includes(color)
-    },
-
     /**
      * Used to customize the avatar container
      */
@@ -1684,40 +1717,98 @@ const AVATAR_ICON_SIZES = {
     presenceProps: {
       type: Object,
       default: () => ({})
+    },
+
+    /**
+     * Initials to be shown in the avatar. Used as fallback if image fails to load.
+     */
+    initials: {
+      type: String,
+      default: ''
     }
   },
 
   data() {
     return {
       // initials, image or icon
-      kind: 'initials',
+      kind: 'image',
       AVATAR_SIZE_MODIFIERS: AVATAR_SIZE_MODIFIERS,
-      AVATAR_COLOR_MODIFIERS: AVATAR_COLOR_MODIFIERS,
       AVATAR_KIND_MODIFIERS: AVATAR_KIND_MODIFIERS,
-      AVATAR_PRESENCE_SIZE_MODIFIERS: AVATAR_PRESENCE_SIZE_MODIFIERS
+      AVATAR_PRESENCE_SIZE_MODIFIERS: AVATAR_PRESENCE_SIZE_MODIFIERS,
+      imageLoadedSuccessfully: null,
+      slottedInitials: '',
+      formattedInitials: ''
     };
   },
 
+  computed: {
+    showDefaultSlot() {
+      return this.kind !== 'initials' && this.imageLoadedSuccessfully !== false;
+    },
+
+    showInitials() {
+      return this.kind === 'initials' || this.initials;
+    },
+
+    initialKindStyle() {
+      const randomGradientColorStops = this.randomizeGradientColorStops();
+      return {
+        '--avatar-gradient-angle': `${this.randomizeGradientAngle()}deg`,
+        '--avatar-gradient-stop-1': `var(--${randomGradientColorStops[0]})`,
+        '--avatar-gradient-stop-2': `var(--${randomGradientColorStops[1]})`,
+        '--avatar-gradient-stop-3': `var(--${randomGradientColorStops[2]})`
+      };
+    }
+
+  },
+
   mounted() {
     this.init();
   },
 
   updated() {
-    this.init();
+    if (this.kind === 'initials') {
+      this.slottedInitials = this.$el.children[0].textContent;
+      this.formatInitials(this.slottedInitials);
+    }
   },
 
   methods: {
     init() {
-      const firstChild = this.$el.children[0];
+      const firstChild = this.$el.children[0] || this.$el;
 
       if (firstChild) {
         this.setKind(firstChild);
 
         if (this.kind === 'image') {
           firstChild.classList.add('d-avatar__image');
+          this.validateImageAttrsPresence();
+          firstChild.addEventListener('error', () => {
+            this.formatInitials(this.initials);
+            this.imageLoadedSuccessfully = false;
+          });
+          firstChild.addEventListener('load', () => {
+            firstChild.classList.add('d-avatar--image-loaded');
+            this.imageLoadedSuccessfully = true;
+          });
         }
 
-        this.validateImageAttrsPresence();
+        if (this.kind === 'initials') {
+          this.slottedInitials = firstChild.textContent;
+          this.formatInitials(this.slottedInitials);
+        }
+      }
+    },
+
+    formatInitials(initials) {
+      if (!initials) return;
+
+      if (this.size === 'xs') {
+        this.formattedInitials = '';
+      } else if (this.size === 'sm') {
+        this.formattedInitials = initials.trim()[0];
+      } else {
+        this.formattedInitials = initials.trim().slice(0, 2);
       }
     },
 
@@ -1747,25 +1838,50 @@ const AVATAR_ICON_SIZES = {
       return (element === null || element === void 0 ? void 0 : (_element$tagName2 = element.tagName) === null || _element$tagName2 === void 0 ? void 0 : _element$tagName2.toUpperCase()) === 'IMG';
     },
 
-    validateImageAttrsPresence() {
-      if (this.kind === 'image') {
-        // Check that default slot image required attributes are provided
-        if (!this.$el.children[0].getAttribute('src') || !this.$el.children[0].getAttribute('alt')) {
-          (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.warn)('src and alt attributes are required for image avatars', this);
+    randomizeGradientAngle() {
+      return getRandomElement(AVATAR_ANGLES);
+    },
+
+    randomizeGradientColorStops() {
+      const colors = new Set(); // get 3 unique colors, 2 from colorsWith100 and one from colorsWith200
+
+      while (colors.size < MAX_GRADIENT_COLORS) {
+        if (colors.size === MAX_GRADIENT_COLORS_100) {
+          colors.add(getRandomElement(GRADIENT_COLORS.with200));
+        } else {
+          colors.add(getRandomElement(GRADIENT_COLORS.with100));
         }
       }
+
+      const shuffledColors = Array.from(colors).sort(() => 0.5 - Math.random());
+      return shuffledColors;
+    },
+
+    validateImageAttrsPresence() {
+      const isSrcMissing = !this.$el.children[0].getAttribute('src');
+      const isAltMissing = !this.$el.children[0].getAttribute('alt');
+
+      if (isSrcMissing || isAltMissing) {
+        (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.warn)('src and alt attributes are required for image avatars', this);
+      }
     }
 
   }
 });
 ;// CONCATENATED MODULE: ./components/avatar/avatar.vue?vue&type=script&lang=js
  
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/avatar/avatar.vue?vue&type=style&index=0&id=52a431d8&lang=less
+var avatarvue_type_style_index_0_id_52a431d8_lang_less = __webpack_require__(224);
+;// CONCATENATED MODULE: ./components/avatar/avatar.vue?vue&type=style&index=0&id=52a431d8&lang=less
+
 ;// CONCATENATED MODULE: ./components/avatar/avatar.vue
 
 
 
 
 ;
+
+
 const avatar_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(avatarvue_type_script_lang_js, [['render',render]])
 
 /* harmony default export */ const avatar = (avatar_exports_);
@@ -19409,26 +19525,26 @@ const callbar_button_with_popover_exports_ = /*#__PURE__*/(0,exportHelper/* defa
 /* harmony default export */ const callbar_button_with_popover = (callbar_button_with_popover_exports_);
 ;// CONCATENATED MODULE: ./recipes/buttons/callbar_button_with_popover/index.js
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/list_items/contact_info/contact_info.vue?vue&type=template&id=c1f377a8
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/list_items/contact_info/contact_info.vue?vue&type=template&id=9fe40f88
 
-const contact_infovue_type_template_id_c1f377a8_hoisted_1 = {
+const contact_infovue_type_template_id_9fe40f88_hoisted_1 = {
   class: "d-ps-relative",
   "data-qa": "contact-info-left"
 };
-const contact_infovue_type_template_id_c1f377a8_hoisted_2 = ["src", "alt"];
-const contact_infovue_type_template_id_c1f377a8_hoisted_3 = {
+const contact_infovue_type_template_id_9fe40f88_hoisted_2 = ["src", "alt"];
+const contact_infovue_type_template_id_9fe40f88_hoisted_3 = {
   "data-qa": "contact-info-header"
 };
-const contact_infovue_type_template_id_c1f377a8_hoisted_4 = {
+const contact_infovue_type_template_id_9fe40f88_hoisted_4 = {
   "data-qa": "contact-info-subtitle"
 };
-const contact_infovue_type_template_id_c1f377a8_hoisted_5 = {
+const contact_infovue_type_template_id_9fe40f88_hoisted_5 = {
   "data-qa": "contact-info-bottom"
 };
-const contact_infovue_type_template_id_c1f377a8_hoisted_6 = {
+const contact_infovue_type_template_id_9fe40f88_hoisted_6 = {
   "data-qa": "contact-info-right"
 };
-function contact_infovue_type_template_id_c1f377a8_render(_ctx, _cache, $props, $setup, $data, $options) {
+function contact_infovue_type_template_id_9fe40f88_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_avatar = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-avatar");
 
   const _component_dt_list_item = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-list-item");
@@ -19439,7 +19555,7 @@ function contact_infovue_type_template_id_c1f377a8_render(_ctx, _cache, $props,
     "element-type": "div",
     "data-qa": "contact-info"
   }, {
-    left: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_infovue_type_template_id_c1f377a8_hoisted_1, [$props.avatarSrc ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_avatar, {
+    left: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_infovue_type_template_id_9fe40f88_hoisted_1, [$props.avatarSrc ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_avatar, {
       key: 0,
       size: "lg"
     }, {
@@ -19447,29 +19563,27 @@ function contact_infovue_type_template_id_c1f377a8_render(_ctx, _cache, $props,
         "data-qa": "dt-contact-avatar",
         src: $props.avatarSrc,
         alt: $props.avatarInitials
-      }, null, 8, contact_infovue_type_template_id_c1f377a8_hoisted_2)]),
+      }, null, 8, contact_infovue_type_template_id_9fe40f88_hoisted_2)]),
       _: 1
     })) : $props.avatarInitials ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_avatar, {
       key: 1,
-      kind: "initials",
-      size: "lg",
-      color: $props.avatarColor
+      size: "lg"
     }, {
       default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createTextVNode)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.avatarInitials), 1)]),
       _: 1
-    }, 8, ["color"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), $options.showUserStatus ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
+    })) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), $options.showUserStatus ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
       key: 2,
       class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-ba', 'd-bc-white', 'd-baw2', 'd-bar2', 'd-ps-absolute', 'd-bn1', 'd-rn1', 'd-w20p', 'd-h20p', $data.USER_STATUS_COLOR_MODIFIERS[$props.userStatusColor]]),
       "data-qa": "contact-info-user-status"
     }, "   ", 2)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)])]),
-    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_infovue_type_template_id_c1f377a8_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "header")])]),
-    subtitle: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_infovue_type_template_id_c1f377a8_hoisted_4, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "subtitle")])]),
-    bottom: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_infovue_type_template_id_c1f377a8_hoisted_5, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "bottom")])]),
-    right: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_infovue_type_template_id_c1f377a8_hoisted_6, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "right")])]),
+    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_infovue_type_template_id_9fe40f88_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "header")])]),
+    subtitle: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_infovue_type_template_id_9fe40f88_hoisted_4, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "subtitle")])]),
+    bottom: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_infovue_type_template_id_9fe40f88_hoisted_5, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "bottom")])]),
+    right: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_infovue_type_template_id_9fe40f88_hoisted_6, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "right")])]),
     _: 3
   }, 8, ["id", "role"]);
 }
-;// CONCATENATED MODULE: ./recipes/list_items/contact_info/contact_info.vue?vue&type=template&id=c1f377a8
+;// CONCATENATED MODULE: ./recipes/list_items/contact_info/contact_info.vue?vue&type=template&id=9fe40f88
 
 ;// CONCATENATED MODULE: ./recipes/list_items/contact_info/contact_info_constants.js
 const USER_STATUS_COLOR_MODIFIERS = {
@@ -19486,7 +19600,6 @@ const USER_STATUS_COLOR_MODIFIERS = {
 
 
 
-
 /* harmony default export */ const contact_infovue_type_script_lang_js = ({
   name: 'DtRecipeContactInfo',
   components: {
@@ -19538,15 +19651,6 @@ const USER_STATUS_COLOR_MODIFIERS = {
       default: ''
     },
 
-    /**
-     * Background color of initials letters in avatar.
-     */
-    avatarColor: {
-      type: String,
-      default: 'base',
-      validator: color => Object.keys(AVATAR_COLOR_MODIFIERS).includes(color)
-    },
-
     /**
      * Status color of user from contact.
      */
@@ -19578,7 +19682,7 @@ const USER_STATUS_COLOR_MODIFIERS = {
 
 
 ;
-const contact_info_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(contact_infovue_type_script_lang_js, [['render',contact_infovue_type_template_id_c1f377a8_render]])
+const contact_info_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(contact_infovue_type_script_lang_js, [['render',contact_infovue_type_template_id_9fe40f88_render]])
 
 /* harmony default export */ const contact_info = (contact_info_exports_);
 ;// CONCATENATED MODULE: ./recipes/list_items/contact_info/index.js