@dialpad/dialtone-vue 3.53.3 → 3.55.0

package/dist/dialtone-vue.common.js

@@ -1164,12 +1164,14 @@ __webpack_require__.d(__webpack_exports__, {
   "DtCheckbox": () => (/* reexport */ checkbox_checkbox),
   "DtCheckboxGroup": () => (/* reexport */ checkbox_group),
   "DtChip": () => (/* reexport */ chip),
+  "DtCodeblock": () => (/* reexport */ codeblock),
   "DtCollapsible": () => (/* reexport */ collapsible),
   "DtCombobox": () => (/* reexport */ combobox),
   "DtDropdown": () => (/* reexport */ dropdown),
   "DtDropdownSeparator": () => (/* reexport */ dropdown_separator),
   "DtGroupableInputMixin": () => (/* reexport */ GroupableMixin),
   "DtIcon": () => (/* reexport */ icon),
+  "DtImageViewer": () => (/* reexport */ image_viewer),
   "DtInput": () => (/* reexport */ input_input),
   "DtInputGroup": () => (/* reexport */ input_group_input_group),
   "DtInputGroupMixin": () => (/* reexport */ InputGroupMixin),
@@ -3897,6 +3899,39 @@ const card_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(cardvue_type_
 /* harmony default export */ const card = (card_exports_);
 ;// CONCATENATED MODULE: ./components/card/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]!./components/codeblock/codeblock.vue?vue&type=template&id=043e0ff6
+
+const codeblockvue_type_template_id_043e0ff6_hoisted_1 = {
+  class: "d-d-block d-bgc-secondary d-ws-pre-wrap d-p8 d-ba d-bc-subtle d-bar8 d-fs-200 d-ff-mono d-lh-400 d-fc-secondary"
+};
+function codeblockvue_type_template_id_043e0ff6_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("pre", null, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createTextVNode)("    "), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("code", codeblockvue_type_template_id_043e0ff6_hoisted_1, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.text), 1), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createTextVNode)("\n  ")]);
+}
+;// CONCATENATED MODULE: ./components/codeblock/codeblock.vue?vue&type=template&id=043e0ff6
+
+;// 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/codeblock/codeblock.vue?vue&type=script&lang=js
+/* harmony default export */ const codeblockvue_type_script_lang_js = ({
+  name: 'DtCodeblock',
+  props: {
+    text: {
+      type: String,
+      required: true
+    }
+  }
+});
+;// CONCATENATED MODULE: ./components/codeblock/codeblock.vue?vue&type=script&lang=js
+ 
+;// CONCATENATED MODULE: ./components/codeblock/codeblock.vue
+
+
+
+
+;
+const codeblock_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(codeblockvue_type_script_lang_js, [['render',codeblockvue_type_template_id_043e0ff6_render]])
+
+/* harmony default export */ const codeblock = (codeblock_exports_);
+;// CONCATENATED MODULE: ./components/codeblock/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]!./components/combobox/combobox.vue?vue&type=template&id=e1fc642c
 
 const comboboxvue_type_template_id_e1fc642c_hoisted_1 = {
@@ -6530,10 +6565,10 @@ const collapsible_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(collap
 /* harmony default export */ const collapsible = (collapsible_exports_);
 ;// CONCATENATED MODULE: ./components/collapsible/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]!./components/dropdown/dropdown.vue?vue&type=template&id=6b5cfae4
+;// 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/dropdown/dropdown.vue?vue&type=template&id=505a060a
 
-const dropdownvue_type_template_id_6b5cfae4_hoisted_1 = ["id"];
-function dropdownvue_type_template_id_6b5cfae4_render(_ctx, _cache, $props, $setup, $data, $options) {
+const dropdownvue_type_template_id_505a060a_hoisted_1 = ["id"];
+function dropdownvue_type_template_id_505a060a_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_sr_only_close_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("sr-only-close-button");
 
   const _component_dt_popover = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-popover");
@@ -6553,7 +6588,9 @@ function dropdownvue_type_template_id_6b5cfae4_render(_ctx, _cache, $props, $set
     "max-width": $props.maxWidth,
     "open-with-arrow-keys": $options.shouldOpenWithArrowKeys,
     "open-on-context": $props.openOnContext
-  }, _ctx.$attrs, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toHandlers)($options.dropdownListeners)), {
+  }, _ctx.$attrs, {
+    tether: $props.tether
+  }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toHandlers)($options.dropdownListeners)), {
     anchor: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(_ref => {
       let {
         attrs
@@ -6584,12 +6621,12 @@ function dropdownvue_type_template_id_6b5cfae4_render(_ctx, _cache, $props, $set
         "visually-hidden-close-label": _ctx.visuallyHiddenCloseLabel,
         tabindex: $options.isArrowKeyNav ? -1 : 0,
         onClose: close
-      }, null, 8, ["visually-hidden-close-label", "tabindex", "onClose"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 42, dropdownvue_type_template_id_6b5cfae4_hoisted_1)];
+      }, null, 8, ["visually-hidden-close-label", "tabindex", "onClose"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 42, dropdownvue_type_template_id_505a060a_hoisted_1)];
     }),
     _: 3
-  }, 16, ["content-width", "open", "placement", "initial-focus-element", "fallback-placements", "append-to", "modal", "max-height", "max-width", "open-with-arrow-keys", "open-on-context"]);
+  }, 16, ["content-width", "open", "placement", "initial-focus-element", "fallback-placements", "append-to", "modal", "max-height", "max-width", "open-with-arrow-keys", "open-on-context", "tether"]);
 }
-;// CONCATENATED MODULE: ./components/dropdown/dropdown.vue?vue&type=template&id=6b5cfae4
+;// CONCATENATED MODULE: ./components/dropdown/dropdown.vue?vue&type=template&id=505a060a
 
 ;// 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/popover/popover.vue?vue&type=template&id=348aec1e
 
@@ -12429,6 +12466,17 @@ const DROPDOWN_PADDING_CLASSES = {
       validator: appendTo => {
         return POPOVER_APPEND_TO_VALUES.includes(appendTo) || appendTo instanceof HTMLElement;
       }
+    },
+
+    /**
+     * If set to false the dialog will display over top of the anchor when there is insufficient space.
+     * If set to true it will never move from its position relative to the anchor and will clip instead.
+     * See <a href="https://popper.js.org/docs/v2/modifiers/prevent-overflow/#tether" target="_blank">Popper.js docs</a>
+     * @values true, false
+     */
+    tether: {
+      type: Boolean,
+      default: true
     }
   },
   emits: [
@@ -12661,10 +12709,10 @@ const DROPDOWN_PADDING_CLASSES = {
 });
 ;// CONCATENATED MODULE: ./components/dropdown/dropdown.vue?vue&type=script&lang=js
  
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.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/less-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/dropdown/dropdown.vue?vue&type=style&index=0&id=6b5cfae4&lang=less
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.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/less-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/dropdown/dropdown.vue?vue&type=style&index=0&id=505a060a&lang=less
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./components/dropdown/dropdown.vue?vue&type=style&index=0&id=6b5cfae4&lang=less
+;// CONCATENATED MODULE: ./components/dropdown/dropdown.vue?vue&type=style&index=0&id=505a060a&lang=less
 
 ;// CONCATENATED MODULE: ./components/dropdown/dropdown.vue
 
@@ -12674,7 +12722,7 @@ const DROPDOWN_PADDING_CLASSES = {
 ;
 
 
-const dropdown_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(dropdownvue_type_script_lang_js, [['render',dropdownvue_type_template_id_6b5cfae4_render]])
+const dropdown_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(dropdownvue_type_script_lang_js, [['render',dropdownvue_type_template_id_505a060a_render]])
 
 /* harmony default export */ const dropdown = (dropdown_exports_);
 ;// 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/dropdown/dropdown_separator.vue?vue&type=template&id=6ff5576d
@@ -12713,6 +12761,223 @@ const dropdown_separator_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)
 ;// CONCATENATED MODULE: ./components/dropdown/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]!./components/image_viewer/image_viewer.vue?vue&type=template&id=2229fad0
+
+const image_viewervue_type_template_id_2229fad0_hoisted_1 = ["src", "alt"];
+const image_viewervue_type_template_id_2229fad0_hoisted_2 = ["aria-hidden"];
+const image_viewervue_type_template_id_2229fad0_hoisted_3 = {
+  "data-qa": "dt-image-viewer-full",
+  class: "d-p0 d-bar0 d-wmx80p d-hmx80p",
+  role: "dialog",
+  "aria-modal": "true"
+};
+const image_viewervue_type_template_id_2229fad0_hoisted_4 = ["src", "alt"];
+function image_viewervue_type_template_id_2229fad0_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-button");
+
+  const _component_dt_icon = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-icon");
+
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", null, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_button, {
+    "data-qa": "dt-image-viewer-preview",
+    "aria-label": $props.ariaLabel,
+    importance: "clear",
+    onClick: $options.open
+  }, {
+    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("img", {
+      class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($props.imageButtonClass),
+      src: $props.imageSrc,
+      alt: $props.imageAlt
+    }, null, 10, image_viewervue_type_template_id_2229fad0_hoisted_1)]),
+    _: 1
+  }, 8, ["aria-label", "onClick"]), $data.show ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Teleport, {
+    key: 0,
+    to: "body"
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+    "aria-hidden": $options.isOpen,
+    class: "d-modal",
+    "data-qa": "dt-modal"
+  }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toHandlers)($options.modalListeners, true), {
+    onMouseover: _cache[0] || (_cache[0] = $event => $data.showCloseButton = true),
+    onMouseleave: _cache[1] || (_cache[1] = $event => $data.showCloseButton = false),
+    onFocusin: _cache[2] || (_cache[2] = $event => $data.showCloseButton = true),
+    onFocusout: _cache[3] || (_cache[3] = $event => $data.showCloseButton = false)
+  }), [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", image_viewervue_type_template_id_2229fad0_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("img", {
+    class: "d-wmx100p d-hmx100p",
+    src: $props.imageSrc,
+    alt: $props.imageAlt
+  }, null, 8, image_viewervue_type_template_id_2229fad0_hoisted_4)]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Transition, {
+    name: "fade"
+  }, {
+    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [$data.showCloseButton ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_button, {
+      key: 0,
+      ref: "closeImage",
+      "data-qa": "dt-image-viewer-close-btn",
+      class: "d-modal__close",
+      circle: "",
+      size: "lg",
+      importance: "clear",
+      kind: "inverted",
+      "aria-label": $props.closeAriaLabel,
+      onClick: $options.close
+    }, {
+      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: "close",
+        size: "400"
+      })]),
+      _: 1
+    }, 8, ["aria-label", "onClick"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]),
+    _: 1
+  })], 16, image_viewervue_type_template_id_2229fad0_hoisted_2)])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]);
+}
+;// CONCATENATED MODULE: ./components/image_viewer/image_viewer.vue?vue&type=template&id=2229fad0
+
+;// 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/image_viewer/image_viewer.vue?vue&type=script&lang=js
+
+
+
+
+/* harmony default export */ const image_viewervue_type_script_lang_js = ({
+  name: 'DtImageViewer',
+  components: {
+    DtButton: button_button,
+    DtIcon: icon
+  },
+  mixins: [modal],
+  props: {
+    /**
+     * URL of the image to be shown
+     */
+    imageSrc: {
+      type: String,
+      required: true
+    },
+
+    /**
+     * Alt text of image
+     */
+    imageAlt: {
+      type: String,
+      required: true
+    },
+
+    /**
+     * Image Class
+     */
+    imageButtonClass: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    /**
+     * Aria label
+     */
+    ariaLabel: {
+      type: String,
+      required: true
+    },
+
+    /**
+     * Aria label for close button
+     */
+    closeAriaLabel: {
+      type: String,
+      required: true
+    }
+  },
+
+  data() {
+    return {
+      show: false,
+      showCloseButton: true
+    };
+  },
+
+  computed: {
+    isOpen() {
+      return `${!this.show}`;
+    },
+
+    modalListeners() {
+      return {
+        click: event => {
+          event.target === event.currentTarget && this.close();
+        },
+        keydown: event => {
+          switch (event.code) {
+            case EVENT_KEYNAMES.esc:
+            case EVENT_KEYNAMES.escape:
+              this.close();
+              break;
+
+            case EVENT_KEYNAMES.tab:
+              this.trapFocus(event);
+              break;
+          }
+        }
+      };
+    }
+
+  },
+  watch: {
+    show: {
+      immediate: true,
+
+      handler(isShowing) {
+        if (isShowing) {
+          // Set a reference to the previously-active element, to which we'll return focus on modal close.
+          this.previousActiveElement = document.activeElement;
+        } else {
+          var _this$previousActiveE;
+
+          // Modal is being hidden, so return focus to the previously active element before clearing the reference.
+          (_this$previousActiveE = this.previousActiveElement) === null || _this$previousActiveE === void 0 ? void 0 : _this$previousActiveE.focus();
+          this.previousActiveElement = null;
+        }
+      }
+
+    }
+  },
+  methods: {
+    open() {
+      this.show = true;
+      this.showCloseButton = true;
+      setTimeout(() => {
+        this.focusAfterOpen();
+      });
+    },
+
+    close() {
+      this.show = false;
+    },
+
+    focusAfterOpen() {
+      var _this$$refs$closeImag;
+
+      (_this$$refs$closeImag = this.$refs.closeImage) === null || _this$$refs$closeImag === void 0 ? void 0 : _this$$refs$closeImag.$el.focus();
+    },
+
+    trapFocus(e) {
+      if (this.show) {
+        this.focusTrappedTabPress(e);
+      }
+    }
+
+  }
+});
+;// CONCATENATED MODULE: ./components/image_viewer/image_viewer.vue?vue&type=script&lang=js
+ 
+;// CONCATENATED MODULE: ./components/image_viewer/image_viewer.vue
+
+
+
+
+;
+const image_viewer_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(image_viewervue_type_script_lang_js, [['render',image_viewervue_type_template_id_2229fad0_render]])
+
+/* harmony default export */ const image_viewer = (image_viewer_exports_);
+;// CONCATENATED MODULE: ./components/image_viewer/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]!./components/input/input.vue?vue&type=template&id=2ab65018
 
 const inputvue_type_template_id_2ab65018_hoisted_1 = {
@@ -23310,11 +23575,10 @@ const general_row_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(genera
 ;// CONCATENATED MODULE: ./recipes/leftbar/general_row/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/leftbar/group_row/group_row.vue?vue&type=template&id=b55ed07a
+;// 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/leftbar/group_row/group_row.vue?vue&type=template&id=e18538f0
 
-const group_rowvue_type_template_id_b55ed07a_hoisted_1 = ["src"];
-function group_rowvue_type_template_id_b55ed07a_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_dt_avatar = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-avatar");
+function group_rowvue_type_template_id_e18538f0_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_recipe_general_row = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-recipe-general-row");
 
@@ -23327,25 +23591,14 @@ function group_rowvue_type_template_id_b55ed07a_render(_ctx, _cache, $props, $se
     selected: $props.selected,
     "is-typing": $props.isTyping
   }, _ctx.$attrs), {
-    left: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_avatar, {
-      initials: $props.avatarInitials,
-      seed: $props.avatarSeed,
-      group: $props.groupCount
-    }, {
-      default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [$props.avatarSrc ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("img", {
-        key: 0,
-        "data-qa": "dt-avatar-image",
-        src: $props.avatarSrc,
-        alt: ""
-      }, null, 8, group_rowvue_type_template_id_b55ed07a_hoisted_1)) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Fragment, {
-        key: 1
-      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createTextVNode)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.avatarInitials), 1)], 64))]),
-      _: 1
-    }, 8, ["initials", "seed", "group"])]),
+    left: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_icon, {
+      name: "users",
+      size: "300"
+    })]),
     _: 1
   }, 16, ["description", "aria-label", "unread-count", "has-unreads", "unread-count-tooltip", "selected", "is-typing"]);
 }
-;// CONCATENATED MODULE: ./recipes/leftbar/group_row/group_row.vue?vue&type=template&id=b55ed07a
+;// CONCATENATED MODULE: ./recipes/leftbar/group_row/group_row.vue?vue&type=template&id=e18538f0
 
 ;// 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]!./recipes/leftbar/group_row/group_row.vue?vue&type=script&lang=js
 
@@ -23353,47 +23606,11 @@ function group_rowvue_type_template_id_b55ed07a_render(_ctx, _cache, $props, $se
 /* harmony default export */ const group_rowvue_type_script_lang_js = ({
   name: 'DtRecipeGroupRow',
   components: {
-    DtAvatar: avatar,
+    DtIcon: icon,
     DtRecipeGeneralRow: general_row
   },
   inheritAttrs: false,
   props: {
-    /**
-     * Optional avatar image url.
-     * if provided, it's also required to provide a value in the `avatarInitials` prop to use
-     * in the alt attribute of the avatar.
-     */
-    avatarSrc: {
-      type: String,
-      default: ''
-    },
-
-    /**
-     * Initials to display on the avatar if avatarSrc is not provided or
-     * alt attr if avatarSrc is provided.
-     */
-    avatarInitials: {
-      type: String,
-      default: '',
-      required: true
-    },
-
-    /**
-     * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.
-     */
-    avatarSeed: {
-      type: String,
-      default: null
-    },
-
-    /**
-     * Number displayed in avatar to count group members
-     */
-    groupCount: {
-      type: Number,
-      required: true
-    },
-
     /**
      * Screen reader will read out the number of users in the group using this text. Ex: "2 users"
      */
@@ -23468,7 +23685,7 @@ function group_rowvue_type_template_id_b55ed07a_render(_ctx, _cache, $props, $se
 
 
 ;
-const group_row_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(group_rowvue_type_script_lang_js, [['render',group_rowvue_type_template_id_b55ed07a_render]])
+const group_row_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(group_rowvue_type_script_lang_js, [['render',group_rowvue_type_template_id_e18538f0_render]])
 
 /* harmony default export */ const group_row = (group_row_exports_);
 ;// CONCATENATED MODULE: ./recipes/leftbar/group_row/index.js
@@ -23779,6 +23996,8 @@ const contact_row_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(contac
 
 
 
+
+