@dialpad/dialtone-vue 3.30.1 → 3.32.0

package/dist/dialtone-vue.umd.js

@@ -33,6 +33,30 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".enter-active,.leave-active{overflow:h
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
 
+/***/ }),
+
+/***/ 901:
+/***/ ((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___);
+
+
 /***/ }),
 
 /***/ 6:
@@ -347,7 +371,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".dt-recipe--callbar-button-with-popove
 
 /***/ }),
 
-/***/ 825:
+/***/ 743:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -364,7 +388,7 @@ __webpack_require__.r(__webpack_exports__);
 
 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, ".ivr_node__width{width:280px}", ""]);
+___CSS_LOADER_EXPORT___.push([module.id, ".ivr_node__width{width:280px}.ivr_node__goto_icon{transform:rotate(90deg)}", ""]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -552,6 +576,22 @@ var update = add("d75292b8", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
+/***/ 156:
+/***/ ((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__(901);
+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("49001dd1", content, true, {"sourceMap":false,"shadowMode":false});
+
+/***/ }),
+
 /***/ 840:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
@@ -760,19 +800,19 @@ var update = add("45697d7e", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
-/***/ 572:
+/***/ 995:
 /***/ ((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__(825);
+var content = __webpack_require__(743);
 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("3ff34c76", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("2cc23047", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
@@ -1140,7 +1180,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),
@@ -1282,25 +1321,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-82.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-82.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
@@ -1387,6 +1432,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 [];
@@ -1482,6 +1536,7 @@ const pascalCaseToKebabCase = string => {
 };
 /* harmony default export */ const utils = ({
   getUniqueString,
+  getRandomElement,
   formatMessages,
   filterFormattedMessages,
   hasFormattedMessageOfType,
@@ -1493,7 +1548,7 @@ const pascalCaseToKebabCase = string => {
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.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"
@@ -1504,7 +1559,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',
@@ -1579,43 +1634,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-82.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/avatar/avatar.vue?vue&type=script&lang=js
 
@@ -1648,7 +1695,7 @@ const AVATAR_ICON_SIZES = {
 
     /**
      * The size of the avatar
-     * @values sm, md, lg
+     * @values xs, sm, md, lg, xl
      */
     size: {
       type: String,
@@ -1656,20 +1703,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
      */
@@ -1694,40 +1727,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;
+          });
+        }
+
+        if (this.kind === 'initials') {
+          this.slottedInitials = firstChild.textContent;
+          this.formatInitials(this.slottedInitials);
         }
+      }
+    },
+
+    formatInitials(initials) {
+      if (!initials) return;
 
-        this.validateImageAttrsPresence();
+      if (this.size === 'xs') {
+        this.formattedInitials = '';
+      } else if (this.size === 'sm') {
+        this.formattedInitials = initials.trim()[0];
+      } else {
+        this.formattedInitials = initials.trim().slice(0, 2);
       }
     },
 
@@ -1757,25 +1848,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-74.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-74.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-74.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__(156);
+;// 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_);
@@ -13669,26 +13785,16 @@ const input_group_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(input_
 /* harmony default export */ const input_group_input_group = (input_group_exports_);
 ;// CONCATENATED MODULE: ./components/input_group/index.js
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.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/modal/modal.vue?vue&type=template&id=44704674
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.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/modal/modal.vue?vue&type=template&id=2aa05149
 
-const modalvue_type_template_id_44704674_hoisted_1 = ["aria-describedby", "aria-labelledby"];
-const modalvue_type_template_id_44704674_hoisted_2 = ["id"];
-const modalvue_type_template_id_44704674_hoisted_3 = ["id"];
-const modalvue_type_template_id_44704674_hoisted_4 = {
-  key: 2,
-  class: "d-modal__content",
-  "data-qa": "dt-modal-copy"
-};
-const modalvue_type_template_id_44704674_hoisted_5 = {
-  key: 3,
-  class: "d-modal__content",
-  "data-qa": "dt-modal-copy"
-};
-const modalvue_type_template_id_44704674_hoisted_6 = {
+const modalvue_type_template_id_2aa05149_hoisted_1 = ["aria-describedby", "aria-labelledby"];
+const modalvue_type_template_id_2aa05149_hoisted_2 = ["id"];
+const modalvue_type_template_id_2aa05149_hoisted_3 = ["id"];
+const modalvue_type_template_id_2aa05149_hoisted_4 = {
   key: 4,
   class: "d-modal__footer"
 };
-function modalvue_type_template_id_44704674_render(_ctx, _cache, $props, $setup, $data, $options) {
+function modalvue_type_template_id_2aa05149_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_icon = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-icon");
 
   const _component_dt_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-button");
@@ -13725,12 +13831,20 @@ function modalvue_type_template_id_44704674_render(_ctx, _cache, $props, $setup,
         id: $props.labelledById,
         class: "d-modal__header",
         "data-qa": "dt-modal-title"
-      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "header")], 8, modalvue_type_template_id_44704674_hoisted_2)) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("h2", {
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "header")], 8, modalvue_type_template_id_2aa05149_hoisted_2)) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("h2", {
         key: 1,
         id: $props.labelledById,
         class: "d-modal__header",
         "data-qa": "dt-modal-title"
-      }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.title), 9, modalvue_type_template_id_44704674_hoisted_3)), _ctx.$slots.default ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", modalvue_type_template_id_44704674_hoisted_4, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")])) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("p", modalvue_type_template_id_44704674_hoisted_5, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.copy), 1)), $options.hasFooterSlot ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("footer", modalvue_type_template_id_44704674_hoisted_6, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "footer")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), !$props.hideClose ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_button, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+      }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.title), 9, modalvue_type_template_id_2aa05149_hoisted_3)), _ctx.$slots.default ? ((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-modal__content', $props.contentClass]),
+        "data-qa": "dt-modal-copy"
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")], 2)) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("p", {
+        key: 3,
+        class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-modal__content', $props.contentClass]),
+        "data-qa": "dt-modal-copy"
+      }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.copy), 3)), $options.hasFooterSlot ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("footer", modalvue_type_template_id_2aa05149_hoisted_4, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "footer")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), !$props.hideClose ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_button, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
         key: 5,
         class: "d-modal__close",
         circle: "",
@@ -13749,13 +13863,13 @@ function modalvue_type_template_id_44704674_render(_ctx, _cache, $props, $setup,
         key: 6,
         "visually-hidden-close-label": _ctx.visuallyHiddenCloseLabel,
         onClose: $options.close
-      }, null, 8, ["visually-hidden-close-label", "onClose"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 10, modalvue_type_template_id_44704674_hoisted_1), [[external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.vShow, $props.show]])]),
+      }, null, 8, ["visually-hidden-close-label", "onClose"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 10, modalvue_type_template_id_2aa05149_hoisted_1), [[external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.vShow, $props.show]])]),
       _: 3
     })]),
     _: 3
   }, 16, ["show", "class", "aria-hidden"]);
 }
-;// CONCATENATED MODULE: ./components/modal/modal.vue?vue&type=template&id=44704674
+;// CONCATENATED MODULE: ./components/modal/modal.vue?vue&type=template&id=2aa05149
 
 ;// CONCATENATED MODULE: ./components/modal/modal_constants.js
 // Modal style modifiers
@@ -13900,6 +14014,16 @@ const MODAL_SIZE_MODIFIERS = {
       default: ''
     },
 
+    /**
+     * Additional class name for the content element within the modal.
+     * Can accept String, Object, and Array, i.e. has the
+     * same API as Vue's built-in handling of the class attribute.
+     */
+    contentClass: {
+      type: [String, Object, Array],
+      default: ''
+    },
+
     /**
      * Additional class name for the banner element within the modal.
      * Can accept String, Object, and Array, i.e. has the
@@ -14055,7 +14179,7 @@ const MODAL_SIZE_MODIFIERS = {
 
 
 ;
-const modal_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(modalvue_type_script_lang_js, [['render',modalvue_type_template_id_44704674_render]])
+const modal_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(modalvue_type_script_lang_js, [['render',modalvue_type_template_id_2aa05149_render]])
 
 /* harmony default export */ const modal_modal = (modal_exports_);
 ;// CONCATENATED MODULE: ./components/modal/index.js
@@ -19419,26 +19543,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-82.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-82.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");
@@ -19449,7 +19573,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"
     }, {
@@ -19457,29 +19581,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 = {
@@ -19496,7 +19618,6 @@ const USER_STATUS_COLOR_MODIFIERS = {
 
 
 
-
 /* harmony default export */ const contact_infovue_type_script_lang_js = ({
   name: 'DtRecipeContactInfo',
   components: {
@@ -19548,15 +19669,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.
      */
@@ -19588,7 +19700,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
@@ -19671,19 +19783,19 @@ const top_banner_info_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(to
 ;// CONCATENATED MODULE: ./recipes/notices/top_banner_info/index.js
 
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.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/cards/ivr_node/ivr_node.vue?vue&type=template&id=5f1f3c1e
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.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/cards/ivr_node/ivr_node.vue?vue&type=template&id=19695402
 
-const ivr_nodevue_type_template_id_5f1f3c1e_hoisted_1 = {
+const ivr_nodevue_type_template_id_19695402_hoisted_1 = {
   class: "d-d-flex d-ai-center"
 };
-const ivr_nodevue_type_template_id_5f1f3c1e_hoisted_2 = {
+const ivr_nodevue_type_template_id_19695402_hoisted_2 = {
   class: "d-fs-200 d-fw-bold",
   "data-qa": "ivr-node-label"
 };
-const ivr_nodevue_type_template_id_5f1f3c1e_hoisted_3 = {
+const ivr_nodevue_type_template_id_19695402_hoisted_3 = {
   class: "d-w164"
 };
-function ivr_nodevue_type_template_id_5f1f3c1e_render(_ctx, _cache, $props, $setup, $data, $options) {
+function ivr_nodevue_type_template_id_19695402_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_icon = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-icon");
 
   const _component_dt_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-button");
@@ -19715,7 +19827,7 @@ function ivr_nodevue_type_template_id_5f1f3c1e_render(_ctx, _cache, $props, $set
       'd-btr4': !$props.isSelected
     }]
   }, {
-    header: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", ivr_nodevue_type_template_id_5f1f3c1e_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_button, {
+    header: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", ivr_nodevue_type_template_id_19695402_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_button, {
       "aria-label": $props.nodeType,
       importance: "clear",
       "data-qa": "dt-ivr-node-icon"
@@ -19723,10 +19835,12 @@ function ivr_nodevue_type_template_id_5f1f3c1e_render(_ctx, _cache, $props, $set
       icon: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_icon, {
         name: $options.nodeIcon,
         size: "200",
-        class: "d-fc-black-900"
-      }, null, 8, ["name"])]),
+        class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-fc-black-900', {
+          'ivr_node__goto_icon': $options.isGotoNode
+        }])
+      }, null, 8, ["name", "class"])]),
       _: 1
-    }, 8, ["aria-label"]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("p", ivr_nodevue_type_template_id_5f1f3c1e_hoisted_2, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.nodeLabel), 1)]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_dropdown, {
+    }, 8, ["aria-label"]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("p", ivr_nodevue_type_template_id_19695402_hoisted_2, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.nodeLabel), 1)]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_dropdown, {
       open: $data.isOpen,
       "onUpdate:open": _cache[0] || (_cache[0] = $event => $data.isOpen = $event),
       placement: "bottom"
@@ -19747,7 +19861,7 @@ function ivr_nodevue_type_template_id_5f1f3c1e_render(_ctx, _cache, $props, $set
         let {
           close
         } = _ref;
-        return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", ivr_nodevue_type_template_id_5f1f3c1e_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "menuItems", {
+        return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", ivr_nodevue_type_template_id_19695402_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "menuItems", {
           close: close
         })])];
       }),
@@ -19757,7 +19871,7 @@ function ivr_nodevue_type_template_id_5f1f3c1e_render(_ctx, _cache, $props, $set
     _: 3
   }, 8, ["container-class", "header-class"])], 16);
 }
-;// CONCATENATED MODULE: ./recipes/cards/ivr_node/ivr_node.vue?vue&type=template&id=5f1f3c1e
+;// CONCATENATED MODULE: ./recipes/cards/ivr_node/ivr_node.vue?vue&type=template&id=19695402
 
 ;// CONCATENATED MODULE: ./recipes/cards/ivr_node/ivr_node_constants.js
 const IVR_NODE_PROMPT_MENU = 'promptmenu';
@@ -19772,9 +19886,9 @@ const IVR_NODE_ICON_TYPES = {
   [IVR_NODE_PROMPT_MENU]: 'keypad',
   [IVR_NODE_PROMPT_COLLECT]: 'dialer',
   [IVR_NODE_PROMPT_PLAY]: 'volume-2',
-  [IVR_NODE_EXPERT]: 'corner-down-right',
-  [IVR_NODE_BRANCH]: 'network',
-  [IVR_NODE_GO_TO]: 'chevrons-up',
+  [IVR_NODE_EXPERT]: 'expert-node',
+  [IVR_NODE_BRANCH]: 'branch',
+  [IVR_NODE_GO_TO]: 'call-merge',
   [IVR_NODE_TRANSFER]: 'transfer',
   [IVR_NODE_HANGUP]: 'phone-hang-up'
 };
@@ -19899,6 +20013,10 @@ const IVR_NODE_COLOR_MAPPING = {
         selected
       } = IVR_NODE_COLOR_MAPPING[this.nodeType];
       return this.isSelected ? selected : normal;
+    },
+
+    isGotoNode() {
+      return this.nodeType === IVR_NODE_GO_TO;
     }
 
   },
@@ -19911,9 +20029,9 @@ const IVR_NODE_COLOR_MAPPING = {
 });
 ;// CONCATENATED MODULE: ./recipes/cards/ivr_node/ivr_node.vue?vue&type=script&lang=js
  
-// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-74.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-74.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-74.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/cards/ivr_node/ivr_node.vue?vue&type=style&index=0&id=5f1f3c1e&lang=less
-var ivr_nodevue_type_style_index_0_id_5f1f3c1e_lang_less = __webpack_require__(572);
-;// CONCATENATED MODULE: ./recipes/cards/ivr_node/ivr_node.vue?vue&type=style&index=0&id=5f1f3c1e&lang=less
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-74.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-74.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-74.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/cards/ivr_node/ivr_node.vue?vue&type=style&index=0&id=19695402&lang=less
+var ivr_nodevue_type_style_index_0_id_19695402_lang_less = __webpack_require__(995);
+;// CONCATENATED MODULE: ./recipes/cards/ivr_node/ivr_node.vue?vue&type=style&index=0&id=19695402&lang=less
 
 ;// CONCATENATED MODULE: ./recipes/cards/ivr_node/ivr_node.vue
 
@@ -19923,7 +20041,7 @@ var ivr_nodevue_type_style_index_0_id_5f1f3c1e_lang_less = __webpack_require__(5
 ;
 
 
-const ivr_node_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(ivr_nodevue_type_script_lang_js, [['render',ivr_nodevue_type_template_id_5f1f3c1e_render]])
+const ivr_node_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(ivr_nodevue_type_script_lang_js, [['render',ivr_nodevue_type_template_id_19695402_render]])
 
 /* harmony default export */ const ivr_node = (ivr_node_exports_);
 ;// CONCATENATED MODULE: ./recipes/cards/ivr_node/index.js