@dialpad/dialtone-vue 3.53.3 → 3.54.0

package/dist/dialtone-vue.common.js

@@ -1164,6 +1164,7 @@ __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),
@@ -3897,6 +3898,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 +6564,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 +6587,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 +6620,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 +12465,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 +12708,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 +12721,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
@@ -23310,11 +23357,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 +23373,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 +23388,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 +23467,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
@@ -23780,6 +23779,7 @@ const contact_row_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(contac
 
 
 
+
 
 
  /// Recipes

package/dist/dialtone-vue.umd.js

@@ -1174,6 +1174,7 @@ __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),
@@ -3907,6 +3908,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-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/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-82.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-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/combobox/combobox.vue?vue&type=template&id=e1fc642c
 
 const comboboxvue_type_template_id_e1fc642c_hoisted_1 = {
@@ -6540,10 +6574,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-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/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-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/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");
@@ -6563,7 +6597,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
@@ -6594,12 +6630,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-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/popover/popover.vue?vue&type=template&id=348aec1e
 
@@ -12439,6 +12475,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: [
@@ -12671,10 +12718,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-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/less-loader/dist/cjs.js??clonedRuleSet-74.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-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/less-loader/dist/cjs.js??clonedRuleSet-74.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
 
@@ -12684,7 +12731,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-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/dropdown/dropdown_separator.vue?vue&type=template&id=6ff5576d
@@ -23320,11 +23367,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-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/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-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/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");
 
@@ -23337,25 +23383,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-82.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
 
@@ -23363,47 +23398,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"
      */
@@ -23478,7 +23477,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
@@ -23790,6 +23789,7 @@ const contact_row_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(contac
 
 
 
+
 
 
  /// Recipes