@dialpad/dialtone-vue 3.56.2 → 3.57.1

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+## [3.57.1](https://github.com/dialpad/dialtone-vue/compare/v3.57.0...v3.57.1) (2023-04-03)
+
+
+### Bug Fixes
+
+* **Recipe Leftbar Unread Chip:** background-color ([3331f3c](https://github.com/dialpad/dialtone-vue/commit/3331f3c6a235d88f082583e08c6533d3f3d5ba2c))
+
+# [3.57.0](https://github.com/dialpad/dialtone-vue/compare/v3.56.2...v3.57.0) (2023-04-03)
+
+
+### Bug Fixes
+
+* **Avatar:** additional null protection ([4545721](https://github.com/dialpad/dialtone-vue/commit/4545721f1ea6ac16ae6430102b0865b1d5ab2d75))
+* **Avatar:** null protect firstElementChild ([1b2b949](https://github.com/dialpad/dialtone-vue/commit/1b2b9497ea951fff41bfb7d2fe6b067120dc6c49))
+
+
+### Features
+
+* **Recipe Leftbar Unread Chip:** add leftbar unread chip recipe - vue3 ([#878](https://github.com/dialpad/dialtone-vue/issues/878)) ([03b0b0c](https://github.com/dialpad/dialtone-vue/commit/03b0b0c690ffec643c45e6016a2a60d2bdf75e78))
+
 ## [3.56.2](https://github.com/dialpad/dialtone-vue/compare/v3.56.1...v3.56.2) (2023-03-31)
 
 

package/dist/dialtone-vue.common.js

@@ -1201,6 +1201,7 @@ __webpack_require__.d(__webpack_exports__, {
   "DtRecipeGroupedChip": () => (/* reexport */ grouped_chip),
   "DtRecipeIvrNode": () => (/* reexport */ ivr_node),
   "DtRecipeTopBannerInfo": () => (/* reexport */ top_banner_info),
+  "DtRecipeUnreadChip": () => (/* reexport */ unread_chip),
   "DtRootLayout": () => (/* reexport */ root_layout),
   "DtScroller": () => (/* reexport */ DtScroller),
   "DtSelectMenu": () => (/* reexport */ select_menu),
@@ -1267,6 +1268,8 @@ __webpack_require__.d(__webpack_exports__, {
   "TOOLTIP_HIDE_ON_CLICK_VARIANTS": () => (/* reexport */ TOOLTIP_HIDE_ON_CLICK_VARIANTS),
   "TOOLTIP_KIND_MODIFIERS": () => (/* reexport */ TOOLTIP_KIND_MODIFIERS),
   "TOOLTIP_STICKY_VALUES": () => (/* reexport */ TOOLTIP_STICKY_VALUES),
+  "UNREAD_BADGE_DIRECTIONS": () => (/* reexport */ UNREAD_BADGE_DIRECTIONS),
+  "UNREAD_BADGE_KINDS": () => (/* reexport */ UNREAD_BADGE_KINDS),
   "VALIDATION_MESSAGE_TYPES": () => (/* reexport */ VALIDATION_MESSAGE_TYPES),
   "VALID_WIDTH_SIZE": () => (/* reexport */ VALID_WIDTH_SIZE),
   "filterFormattedMessages": () => (/* reexport */ filterFormattedMessages),
@@ -1295,7 +1298,7 @@ if (typeof window !== 'undefined') {
 
 ;// CONCATENATED MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
 const external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject = require("vue");
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/avatar/avatar.vue?vue&type=template&id=284ea17a
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/avatar/avatar.vue?vue&type=template&id=0694ee28
 
 const _hoisted_1 = ["id"];
 const _hoisted_2 = {
@@ -1327,7 +1330,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     "data-qa": "dt-presence"
   }), 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=284ea17a
+;// CONCATENATED MODULE: ./components/avatar/avatar.vue?vue&type=template&id=0694ee28
 
 ;// CONCATENATED MODULE: ./common/constants.js
 /* TODO: Move and sort these in a constants directory
@@ -1902,13 +1905,19 @@ const AVATAR_GROUP_VALIDATOR = group => group > 1;
 
   methods: {
     async init() {
+      var _this$$refs$canvas;
+
       if (this.initializing) return;
       this.kind = null;
       await this.$nextTick();
-      const firstChild = this.$refs.canvas.children[0] || this.$refs.canvas;
+      const firstChild = ((_this$$refs$canvas = this.$refs.canvas) === null || _this$$refs$canvas === void 0 ? void 0 : _this$$refs$canvas.children[0]) || this.$refs.canvas;
       this.formatInitials(this.initials);
-      this.setKind(firstChild);
-      this.kindHandler(firstChild);
+
+      if (firstChild) {
+        this.setKind(firstChild);
+        this.kindHandler(firstChild);
+      }
+
       this.initializing = true;
       await this.$nextTick();
       this.initializing = false;
@@ -2039,10 +2048,10 @@ const AVATAR_GROUP_VALIDATOR = group => group > 1;
 });
 ;// CONCATENATED MODULE: ./components/avatar/avatar.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/avatar/avatar.vue?vue&type=style&index=0&id=284ea17a&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/avatar/avatar.vue?vue&type=style&index=0&id=0694ee28&lang=less
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./components/avatar/avatar.vue?vue&type=style&index=0&id=284ea17a&lang=less
+;// CONCATENATED MODULE: ./components/avatar/avatar.vue?vue&type=style&index=0&id=0694ee28&lang=less
 
 ;// CONCATENATED MODULE: ./components/avatar/avatar.vue
 
@@ -16760,27 +16769,27 @@ const checkbox_group_exports_ = checkbox_groupvue_type_script_lang_js;
 /* harmony default export */ const checkbox_group = (checkbox_group_exports_);
 ;// CONCATENATED MODULE: ./components/checkbox_group/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/chip/chip.vue?vue&type=template&id=42f677c2
+;// 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/chip/chip.vue?vue&type=template&id=790baeaf
 
-const chipvue_type_template_id_42f677c2_hoisted_1 = {
+const chipvue_type_template_id_790baeaf_hoisted_1 = {
   class: "d-chip"
 };
-const chipvue_type_template_id_42f677c2_hoisted_2 = {
+const chipvue_type_template_id_790baeaf_hoisted_2 = {
   key: 0,
   "data-qa": "dt-chip-icon",
   class: "d-chip__icon"
 };
-const chipvue_type_template_id_42f677c2_hoisted_3 = {
+const chipvue_type_template_id_790baeaf_hoisted_3 = {
   key: 1,
   "data-qa": "dt-chip-avatar"
 };
-const chipvue_type_template_id_42f677c2_hoisted_4 = ["id"];
-function chipvue_type_template_id_42f677c2_render(_ctx, _cache, $props, $setup, $data, $options) {
+const chipvue_type_template_id_790baeaf_hoisted_4 = ["id"];
+function chipvue_type_template_id_790baeaf_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");
 
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", chipvue_type_template_id_42f677c2_hoisted_1, [((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveDynamicComponent)($props.interactive ? 'button' : 'span'), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", chipvue_type_template_id_790baeaf_hoisted_1, [((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveDynamicComponent)($props.interactive ? 'button' : 'span'), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
     id: $props.id,
     type: $props.interactive && 'button',
     class: $options.chipClasses(),
@@ -16788,12 +16797,12 @@ function chipvue_type_template_id_42f677c2_render(_ctx, _cache, $props, $setup,
     "aria-labelledby": $props.ariaLabel ? undefined : `${$props.id}-content`,
     "aria-label": $props.ariaLabel
   }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toHandlers)($options.chipListeners)), {
-    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [$data.hasSlotContent(_ctx.$slots.icon) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", chipvue_type_template_id_42f677c2_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "icon")])) : $data.hasSlotContent(_ctx.$slots.avatar) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", chipvue_type_template_id_42f677c2_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "avatar")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), $data.hasSlotContent(_ctx.$slots.default) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", {
+    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [$data.hasSlotContent(_ctx.$slots.icon) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", chipvue_type_template_id_790baeaf_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "icon")])) : $data.hasSlotContent(_ctx.$slots.avatar) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", chipvue_type_template_id_790baeaf_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "avatar")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), $data.hasSlotContent(_ctx.$slots.default) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", {
       key: 2,
       id: `${$props.id}-content`,
       "data-qa": "dt-chip-label",
       class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-truncate', 'd-chip__text', $props.contentClass])
-    }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")], 10, chipvue_type_template_id_42f677c2_hoisted_4)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]),
+    }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")], 10, chipvue_type_template_id_790baeaf_hoisted_4)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]),
     _: 3
   }, 16, ["id", "type", "class", "aria-labelledby", "aria-label"])), !$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: 0
@@ -16810,7 +16819,7 @@ function chipvue_type_template_id_42f677c2_render(_ctx, _cache, $props, $setup,
     _: 1
   }, 16, ["class", "aria-label"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]);
 }
-;// CONCATENATED MODULE: ./components/chip/chip.vue?vue&type=template&id=42f677c2
+;// CONCATENATED MODULE: ./components/chip/chip.vue?vue&type=template&id=790baeaf
 
 ;// CONCATENATED MODULE: ./components/chip/chip_constants.js
 const CHIP_SIZE_MODIFIERS = {
@@ -16984,7 +16993,7 @@ const CHIP_ICON_SIZES = {
   },
   methods: {
     chipClasses() {
-      return [this.$attrs['grouped-chip'] ? ['d-chip', ...this.labelClass] : 'd-chip__label', CHIP_SIZE_MODIFIERS[this.size]];
+      return [this.$attrs['grouped-chip'] ? 'd-chip' : 'd-chip__label', CHIP_SIZE_MODIFIERS[this.size], this.labelClass];
     },
 
     chipCloseButtonClasses() {
@@ -17007,7 +17016,7 @@ const CHIP_ICON_SIZES = {
 
 
 ;
-const chip_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(chipvue_type_script_lang_js, [['render',chipvue_type_template_id_42f677c2_render]])
+const chip_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(chipvue_type_script_lang_js, [['render',chipvue_type_template_id_790baeaf_render]])
 
 /* harmony default export */ const chip = (chip_exports_);
 ;// CONCATENATED MODULE: ./components/chip/index.js
@@ -24030,6 +24039,107 @@ const contact_row_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(contac
 /* harmony default export */ const contact_row = (contact_row_exports_);
 ;// CONCATENATED MODULE: ./recipes/leftbar/contact_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/unread_chip/unread_chip.vue?vue&type=template&id=5931b600
+
+const unread_chipvue_type_template_id_5931b600_hoisted_1 = {
+  "data-qa": "dt-leftbar-unread-chip__label"
+};
+function unread_chipvue_type_template_id_5931b600_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_chip = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-chip");
+
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_chip, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+    class: ['dt-leftbar-unread-chip', `dt-leftbar-unread-chip__${$props.kind}`],
+    "data-qa": "dt-leftbar-unread-chip",
+    "hide-close": true
+  }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toHandlers)($options.unreadChipListeners)), {
+    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: `arrow-${$props.direction}`,
+      size: "300"
+    }, null, 8, ["name"])]),
+    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", unread_chipvue_type_template_id_5931b600_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")])]),
+    _: 3
+  }, 16, ["class"]);
+}
+;// CONCATENATED MODULE: ./recipes/leftbar/unread_chip/unread_chip.vue?vue&type=template&id=5931b600
+
+;// CONCATENATED MODULE: ./recipes/leftbar/unread_chip/unread_chip_constants.js
+const UNREAD_BADGE_DIRECTIONS = ['up', 'down'];
+const UNREAD_BADGE_KINDS = ['mentions', 'messages'];
+/* harmony default export */ const unread_chip_constants = ({
+  UNREAD_BADGE_DIRECTIONS,
+  UNREAD_BADGE_KINDS
+});
+;// 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/unread_chip/unread_chip.vue?vue&type=script&lang=js
+
+
+
+/* harmony default export */ const unread_chipvue_type_script_lang_js = ({
+  name: 'DtRecipeUnreadChip',
+  components: {
+    DtIcon: icon,
+    DtChip: chip
+  },
+  props: {
+    /**
+     * The kind of unread chip which determines the styling
+     * @values 'mentions', 'messages'
+     **/
+    kind: {
+      type: String,
+      required: true,
+      validator: kind => UNREAD_BADGE_KINDS.includes(kind)
+    },
+
+    /**
+     * The direction of the arrow icon
+     * @values 'up', 'down'
+     **/
+    direction: {
+      type: String,
+      required: true,
+      validator: dir => UNREAD_BADGE_DIRECTIONS.includes(dir)
+    }
+  },
+  emits: [
+  /**
+   * Native click event
+   *
+   * @event click
+   * @type {PointerEvent | KeyboardEvent}
+   */
+  'click'],
+  computed: {
+    unreadChipListeners() {
+      return {
+        click: event => this.$emit('click', event)
+      };
+    }
+
+  }
+});
+;// CONCATENATED MODULE: ./recipes/leftbar/unread_chip/unread_chip.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]!./recipes/leftbar/unread_chip/unread_chip.vue?vue&type=style&index=0&id=5931b600&lang=less
+// extracted by mini-css-extract-plugin
+
+;// CONCATENATED MODULE: ./recipes/leftbar/unread_chip/unread_chip.vue?vue&type=style&index=0&id=5931b600&lang=less
+
+;// CONCATENATED MODULE: ./recipes/leftbar/unread_chip/unread_chip.vue
+
+
+
+
+;
+
+
+const unread_chip_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(unread_chipvue_type_script_lang_js, [['render',unread_chipvue_type_template_id_5931b600_render]])
+
+/* harmony default export */ const unread_chip = (unread_chip_exports_);
+;// CONCATENATED MODULE: ./recipes/leftbar/unread_chip/index.js
+
+
 ;// CONCATENATED MODULE: ./common/mixins/index.js
 
 
@@ -24088,6 +24198,7 @@ const contact_row_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(contac
 
 
 
+
  // Mixins
 
  // Constants

package/dist/dialtone-vue.css

@@ -1 +1 @@
-.d-avatar--image-loaded{background-color:initial;background-image:unset}.dt-default-list-item,.dt-default-list-item--left,.dt-default-list-item--right{min-height:28px}.dt-list-item:not(.dt-list-item--static){cursor:pointer;border-radius:var(--size-300)}.dt-list-item--focusable:focus,.dt-list-item--focusable:focus-within,.dt-list-item--highlighted{background-color:var(--bgc-moderate-opaque)}.dt-list-item--highlighted:active{background-color:var(--bgc-bold-opaque)}.dt-list-item:focus-visible{outline:none;box-shadow:var(--bs-focus-ring)}.skeleton-placeholder{display:flex;stroke:none;fill:var(--placeholder-from-color,var(--black-300));background:var(--placeholder-from-color,var(--black-300))}.skeleton-placeholder--animate{animation-name:placeholder-throb;animation-iteration-count:infinite}@keyframes placeholder-throb{10%{fill:var(--placeholder-from-color,var(--black-300));background:var(--placeholder-from-color,var(--black-300))}50%{fill:var(--placeholder-to-color,var(--black-100));background:var(--placeholder-to-color,var(--black-100))}90%{fill:var(--placeholder-from-color,var(--black-300));background:var(--placeholder-from-color,var(--black-300))}}.dt-empty-list-item{display:flex;align-items:center;justify-content:center;font-size:var(--fs-200);line-height:var(--lh4);padding:var(--space-300) calc(var(--space-300)*3)}.enter-active,.leave-active{overflow:hidden;transition:height var(--td300) var(--ttf-quint)}.tippy-box[data-popper-escaped] .d-popover__dialog,.tippy-box[data-popper-reference-hidden] .d-popover__dialog{visibility:hidden;pointer-events:none}.d-context-menu-list{width:calc(var(--size-300)*48)}.dt-list-item[role=menuitem]{border-radius:var(--size-300)}.dt-list-separator{border-top:var(--size-100) solid var(--bc-default);list-style:none}.dt-list-section[tabindex="-1"]:focus{outline:none}.tippy-box[data-popper-escaped] .d-tooltip,.tippy-box[data-popper-reference-hidden] .d-tooltip{visibility:hidden;pointer-events:none}.root-layout__body{display:flex;flex-wrap:wrap;gap:0;box-shadow:none}.root-layout__body--invert{flex-direction:row-reverse}.root-layout__sidebar{flex-grow:1;box-shadow:none}.root-layout__content{flex-basis:0;flex-grow:999;box-shadow:none}.root-layout__header--sticky{position:sticky;top:0}.vue-recycle-scroller{position:relative}.vue-recycle-scroller.direction-vertical:not(.page-mode){overflow-y:auto}.vue-recycle-scroller.direction-horizontal:not(.page-mode){overflow-x:auto}.vue-recycle-scroller.direction-horizontal{display:flex}.vue-recycle-scroller__slot{flex:auto 0 0}.vue-recycle-scroller__item-wrapper{flex:1;box-sizing:border-box;overflow:hidden;position:relative}.vue-recycle-scroller.ready .vue-recycle-scroller__item-view{position:absolute;top:0;left:0;will-change:transform}.vue-recycle-scroller.direction-vertical .vue-recycle-scroller__item-wrapper{width:100%}.vue-recycle-scroller.direction-horizontal .vue-recycle-scroller__item-wrapper{height:100%}.vue-recycle-scroller.ready.direction-vertical .vue-recycle-scroller__item-view{width:100%}.vue-recycle-scroller.ready.direction-horizontal .vue-recycle-scroller__item-view{height:100%}.dt-recipe-callbar-button:not(.dt-recipe-callbar-button--circle){line-height:var(--lh-300)}.dt-recipe-callbar-button--circle{border-radius:var(--br-circle)}.dt-recipe-callbar-button.d-btn[disabled]{background-color:unset;opacity:.5}.dt-recipe-callbar-button--circle.d-btn[disabled]{border-color:unset}.dt-recipe-callbar-button--circle.d-btn--icon-only .d-btn__label{display:none}.dt-recipe-callbar-button--active .base-button__icon,.dt-recipe-callbar-button--active:hover .base-button__icon{color:var(--primary-color)}.dt-recipe--callbar-button-with-popover--arrow.d-btn--circle{margin-top:calc(var(--space-300)*3*-1);width:var(--size-500);height:var(--size-500);padding:var(--space-400);border-radius:var(--size-300)}.dt-recipe--callbar-button-with-popover--arrow.d-btn--circle.d-btn--active{background:var(--bgc-moderate-opaque)}.dt-recipe--callbar-button-with-popover--popover .d-popover__header{background:var(--bgc-contrast);color:var(--fc-primary-inverted)}.dt-recipe--callbar-button-with-popover--popover .d-popover__header button{color:var(--fc-primary-inverted)}.dt-recipe--callbar-button-with-popover--button .d-tab--selected:after,.dt-recipe--callbar-button-with-popover--button .d-tab--selected:hover:after{--tab--bgc:var(--bgc-contrast)}.dt-recipe--callbar-button-with-popover--button .tab-group{display:flex;flex-direction:column;height:100%}.dt-recipe--callbar-button-with-popover--button .tab-content{flex:1 1 100%;overflow-y:auto}.d-top-banner-info__left{margin:var(--space-300) 0 var(--space-300) var(--space-400);min-width:20%}.d-top-banner-info__middle{display:flex;align-items:center;gap:var(--size-300)}.d-top-banner-info__right{display:flex;align-items:baseline;justify-content:flex-end;gap:var(--size-300);margin:var(--space-300) var(--space-500) var(--space-300) 0;min-width:20%}.ivr_node__width{width:280px}.ivr_node__goto_icon{transform:rotate(90deg)}.ivr-connector{z-index:var(--zi-base1);display:flex;justify-content:center;align-items:center;border-color:var(--purple-600);background-color:var(--purple-600)}.dt-leftbar-row{--leftbar-row-color-foreground:var(--theme-sidebar-color);--leftbar-row-color-background:var(--theme-sidebar-row-color-background);--leftbar-row-radius:100em;--leftbar-row-opacity:100%;--leftbar-row-alpha-color-foreground:var(--theme-sidebar-icon-color);--leftbar-row-alpha-width:calc(var(--size-300)*10);--leftbar-row-alpha-height:calc(var(--size-300)*9);--leftbar-row-omega-min-width:0;--leftbar-row-omega-height:var(--leftbar-row-alpha-height);--leftbar-row-omega-visibility:visible;--leftbar-row-description-font-weight:var(--fw-normal);--leftbar-row-description-font-size:var(--fs-200);--leftbar-row-description-line-height:var(--lh-200);--leftbar-row-status-color-foreground:var(--theme-sidebar-status-color);--leftbar-row-status-font-size:var(--fs-100);--leftbar-row-status-line-height:var(--lh-100);--leftbar-row-action-position-right:var(--size-400);--leftbar-row-action-position-bottom:50%;--leftbar-row-action-width:calc(var(--size-300)*6);--leftbar-row-action-height:var(--leftbar-row-action-width);position:relative;opacity:var(--leftbar-row-opacity)}.dt-leftbar-row:not(.dt-leftbar-row--no-action):hover{--leftbar-row-omega-min-width:var(--leftbar-row-alpha-width)}.dt-leftbar-row:hover .d-presence{--presence-color-border-base:var(--theme-sidebar-selected-row-color-background)}.dt-leftbar-row:hover .d-avatar__count{--avatar-count-color-shadow:var(--theme-sidebar-selected-row-color-background)}.dt-leftbar-row--has-unread{--leftbar-row-description-font-weight:var(--fw-bold);--leftbar-row-alpha-color-foreground:var(--leftbar-row-color-foreground)}.dt-leftbar-row--has-unread:not(.dt-leftbar-row--no-action):hover{--leftbar-row-omega-visibility:hidden}.dt-leftbar-row--muted{--leftbar-row-opacity:50%}.dt-leftbar-row--selected{--leftbar-row-color-background:var(--theme-sidebar-selected-row-color-background);--leftbar-row-color-foreground:var(--theme-sidebar-selected-row-color)}.dt-leftbar-row--selected .d-avatar__count{--avatar-count-color-shadow:var(--theme-sidebar-selected-row-color-background)}.dt-leftbar-row--action-focused{--leftbar-row-omega-visibility:hidden;--leftbar-row-omega-min-width:var(--leftbar-row-alpha-width)}.dt-leftbar-row__is-typing{--is-typing-size-shape:calc(var(--size-300)*6);height:var(--is-typing-size-shape);width:var(--is-typing-size-shape);position:absolute;display:flex;align-items:center;justify-content:center;gap:2px;border-radius:var(--br-pill);opacity:.75}.dt-leftbar-row__is-typing span{transition:all .5s ease;background:var(--bgc-strong);height:4px;width:4px;display:inline-block;padding:0;opacity:.3;border-radius:var(--br-pill);animation:wave var(--td150) ease infinite}.dt-leftbar-row__is-typing span:first-child{animation-delay:0}.dt-leftbar-row__is-typing span:nth-child(2){animation-delay:var(--td100)}.dt-leftbar-row__is-typing span:nth-child(3){animation-delay:var(--td200)}.dt-leftbar-row__primary{display:flex;align-items:center;flex:1;width:100%;text-align:left;color:var(--leftbar-row-color-foreground);text-decoration:none;background-color:var(--leftbar-row-color-background);border-radius:var(--leftbar-row-radius);transition-duration:var(--td200);transition-property:background-color,border,box-shadow;transition-timing-function:var(--ttf-out-quint);-webkit-appearance:none;appearance:none;font-size:inhert;line-height:inherit;margin:0;border:0;padding:0;cursor:pointer}.dt-leftbar-row__primary:hover{--leftbar-row-color-background:var(--theme-sidebar-row-color-background-hover)}.dt-leftbar-row__primary:active{--leftbar-row-color-background:var(--theme-sidebar-row-color-background-active)}.dt-leftbar-row__primary:focus-visible{box-shadow:var(--bs-focus-ring-inset)}.dt-leftbar-row__action{position:absolute;right:var(--leftbar-row-action-position-right);top:var(--leftbar-row-action-position-bottom);transform:translateY(calc(var(--leftbar-row-action-position-bottom)*-1))}.dt-leftbar-row__action-button{opacity:0;width:var(--leftbar-row-action-width);height:var(--leftbar-row-action-height)}.dt-leftbar-row:hover .dt-leftbar-row__action-button,.dt-leftbar-row__action-button:focus-visible{opacity:1}.dt-leftbar-row__alpha{color:var(--leftbar-row-alpha-color-foreground);display:flex;box-sizing:border-box;justify-content:center;align-items:center;padding-left:var(--space-400);padding-right:var(--space-400);width:var(--leftbar-row-alpha-width);height:var(--leftbar-row-alpha-height)}.dt-leftbar-row__label{flex:1;min-width:0}.dt-leftbar-row__omega{display:flex;gap:var(--space-300);justify-content:end;align-items:center;box-sizing:border-box;min-width:var(--leftbar-row-omega-min-width);height:var(--leftbar-row-omega-height);padding-left:var(--space-400);padding-right:var(--space-400);visibility:var(--leftbar-row-omega-visibility)}.dt-leftbar-row__active-voice{color:var(--fc-success);-webkit-animation-name:opacity-pulsate;-webkit-animation-duration:1s;-webkit-animation-iteration-count:infinite;-webkit-animation-fill-mode:both;-moz-animation-name:opacity-pulsate;-moz-animation-duration:1s;-moz-animation-iteration-count:infinite;-moz-animation-fill-mode:both;animation-name:opacity-pulsate;animation-duration:1s;animation-iteration-count:infinite;animation-fill-mode:both}.dt-leftbar-row__dnd{padding-top:var(--space-200);padding-right:var(--space-300);color:var(--fc-tertiary);font-size:var(--fs-100);line-height:var(--lh-400);font-weight:var(--fw-medium)}.dt-leftbar-row__description{font-weight:var(--leftbar-row-description-font-weight);font-size:var(--leftbar-row-description-font-size);line-height:var(--leftbar-row-description-line-height)}.dt-leftbar-row__description,.dt-leftbar-row__status{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dt-leftbar-row__status{color:var(--leftbar-row-status-color-foreground);font-size:var(--leftbar-row-status-font-size);line-height:var(--leftbar-row-status-line-height);padding-bottom:var(--space-100)}.dt-leftbar-row__meta-context~.dt-leftbar-row__meta-custom:not(:empty):before{content:" • ";color:var(--theme-sidebar-status-color)}.dt-leftbar-row__icon-cc{border-radius:var(--size-200);width:calc(var(--size-300)*3.5);height:calc(var(--size-300)*3.5)}.opacity-pulsate{-webkit-animation-name:opacity-pulsate;-webkit-animation-duration:1s;-webkit-animation-iteration-count:infinite;-webkit-animation-fill-mode:both;-moz-animation-name:opacity-pulsate;-moz-animation-duration:1s;-moz-animation-iteration-count:infinite;-moz-animation-fill-mode:both;animation-name:opacity-pulsate;animation-duration:1s;animation-iteration-count:infinite;animation-fill-mode:both}@keyframes opacity-pulsate{0%,to{opacity:.2}50%{opacity:1}}@keyframes wave{0%,50%,to{transform:translate(0)}10%{transform:translateY(-5px);opacity:90%}}
+.d-avatar--image-loaded{background-color:initial;background-image:unset}.dt-default-list-item,.dt-default-list-item--left,.dt-default-list-item--right{min-height:28px}.dt-list-item:not(.dt-list-item--static){cursor:pointer;border-radius:var(--size-300)}.dt-list-item--focusable:focus,.dt-list-item--focusable:focus-within,.dt-list-item--highlighted{background-color:var(--bgc-moderate-opaque)}.dt-list-item--highlighted:active{background-color:var(--bgc-bold-opaque)}.dt-list-item:focus-visible{outline:none;box-shadow:var(--bs-focus-ring)}.skeleton-placeholder{display:flex;stroke:none;fill:var(--placeholder-from-color,var(--black-300));background:var(--placeholder-from-color,var(--black-300))}.skeleton-placeholder--animate{animation-name:placeholder-throb;animation-iteration-count:infinite}@keyframes placeholder-throb{10%{fill:var(--placeholder-from-color,var(--black-300));background:var(--placeholder-from-color,var(--black-300))}50%{fill:var(--placeholder-to-color,var(--black-100));background:var(--placeholder-to-color,var(--black-100))}90%{fill:var(--placeholder-from-color,var(--black-300));background:var(--placeholder-from-color,var(--black-300))}}.dt-empty-list-item{display:flex;align-items:center;justify-content:center;font-size:var(--fs-200);line-height:var(--lh4);padding:var(--space-300) calc(var(--space-300)*3)}.enter-active,.leave-active{overflow:hidden;transition:height var(--td300) var(--ttf-quint)}.tippy-box[data-popper-escaped] .d-popover__dialog,.tippy-box[data-popper-reference-hidden] .d-popover__dialog{visibility:hidden;pointer-events:none}.d-context-menu-list{width:calc(var(--size-300)*48)}.dt-list-item[role=menuitem]{border-radius:var(--size-300)}.dt-list-separator{border-top:var(--size-100) solid var(--bc-default);list-style:none}.dt-list-section[tabindex="-1"]:focus{outline:none}.tippy-box[data-popper-escaped] .d-tooltip,.tippy-box[data-popper-reference-hidden] .d-tooltip{visibility:hidden;pointer-events:none}.root-layout__body{display:flex;flex-wrap:wrap;gap:0;box-shadow:none}.root-layout__body--invert{flex-direction:row-reverse}.root-layout__sidebar{flex-grow:1;box-shadow:none}.root-layout__content{flex-basis:0;flex-grow:999;box-shadow:none}.root-layout__header--sticky{position:sticky;top:0}.vue-recycle-scroller{position:relative}.vue-recycle-scroller.direction-vertical:not(.page-mode){overflow-y:auto}.vue-recycle-scroller.direction-horizontal:not(.page-mode){overflow-x:auto}.vue-recycle-scroller.direction-horizontal{display:flex}.vue-recycle-scroller__slot{flex:auto 0 0}.vue-recycle-scroller__item-wrapper{flex:1;box-sizing:border-box;overflow:hidden;position:relative}.vue-recycle-scroller.ready .vue-recycle-scroller__item-view{position:absolute;top:0;left:0;will-change:transform}.vue-recycle-scroller.direction-vertical .vue-recycle-scroller__item-wrapper{width:100%}.vue-recycle-scroller.direction-horizontal .vue-recycle-scroller__item-wrapper{height:100%}.vue-recycle-scroller.ready.direction-vertical .vue-recycle-scroller__item-view{width:100%}.vue-recycle-scroller.ready.direction-horizontal .vue-recycle-scroller__item-view{height:100%}.dt-recipe-callbar-button:not(.dt-recipe-callbar-button--circle){line-height:var(--lh-300)}.dt-recipe-callbar-button--circle{border-radius:var(--br-circle)}.dt-recipe-callbar-button.d-btn[disabled]{background-color:unset;opacity:.5}.dt-recipe-callbar-button--circle.d-btn[disabled]{border-color:unset}.dt-recipe-callbar-button--circle.d-btn--icon-only .d-btn__label{display:none}.dt-recipe-callbar-button--active .base-button__icon,.dt-recipe-callbar-button--active:hover .base-button__icon{color:var(--primary-color)}.dt-recipe--callbar-button-with-popover--arrow.d-btn--circle{margin-top:calc(var(--space-300)*3*-1);width:var(--size-500);height:var(--size-500);padding:var(--space-400);border-radius:var(--size-300)}.dt-recipe--callbar-button-with-popover--arrow.d-btn--circle.d-btn--active{background:var(--bgc-moderate-opaque)}.dt-recipe--callbar-button-with-popover--popover .d-popover__header{background:var(--bgc-contrast);color:var(--fc-primary-inverted)}.dt-recipe--callbar-button-with-popover--popover .d-popover__header button{color:var(--fc-primary-inverted)}.dt-recipe--callbar-button-with-popover--button .d-tab--selected:after,.dt-recipe--callbar-button-with-popover--button .d-tab--selected:hover:after{--tab--bgc:var(--bgc-contrast)}.dt-recipe--callbar-button-with-popover--button .tab-group{display:flex;flex-direction:column;height:100%}.dt-recipe--callbar-button-with-popover--button .tab-content{flex:1 1 100%;overflow-y:auto}.d-top-banner-info__left{margin:var(--space-300) 0 var(--space-300) var(--space-400);min-width:20%}.d-top-banner-info__middle{display:flex;align-items:center;gap:var(--size-300)}.d-top-banner-info__right{display:flex;align-items:baseline;justify-content:flex-end;gap:var(--size-300);margin:var(--space-300) var(--space-500) var(--space-300) 0;min-width:20%}.ivr_node__width{width:280px}.ivr_node__goto_icon{transform:rotate(90deg)}.ivr-connector{z-index:var(--zi-base1);display:flex;justify-content:center;align-items:center;border-color:var(--purple-600);background-color:var(--purple-600)}.dt-leftbar-row{--leftbar-row-color-foreground:var(--theme-sidebar-color);--leftbar-row-color-background:var(--theme-sidebar-row-color-background);--leftbar-row-radius:100em;--leftbar-row-opacity:100%;--leftbar-row-alpha-color-foreground:var(--theme-sidebar-icon-color);--leftbar-row-alpha-width:calc(var(--size-300)*10);--leftbar-row-alpha-height:calc(var(--size-300)*9);--leftbar-row-omega-min-width:0;--leftbar-row-omega-height:var(--leftbar-row-alpha-height);--leftbar-row-omega-visibility:visible;--leftbar-row-description-font-weight:var(--fw-normal);--leftbar-row-description-font-size:var(--fs-200);--leftbar-row-description-line-height:var(--lh-200);--leftbar-row-status-color-foreground:var(--theme-sidebar-status-color);--leftbar-row-status-font-size:var(--fs-100);--leftbar-row-status-line-height:var(--lh-100);--leftbar-row-action-position-right:var(--size-400);--leftbar-row-action-position-bottom:50%;--leftbar-row-action-width:calc(var(--size-300)*6);--leftbar-row-action-height:var(--leftbar-row-action-width);position:relative;opacity:var(--leftbar-row-opacity)}.dt-leftbar-row:not(.dt-leftbar-row--no-action):hover{--leftbar-row-omega-min-width:var(--leftbar-row-alpha-width)}.dt-leftbar-row:hover .d-presence{--presence-color-border-base:var(--theme-sidebar-selected-row-color-background)}.dt-leftbar-row:hover .d-avatar__count{--avatar-count-color-shadow:var(--theme-sidebar-selected-row-color-background)}.dt-leftbar-row--has-unread{--leftbar-row-description-font-weight:var(--fw-bold);--leftbar-row-alpha-color-foreground:var(--leftbar-row-color-foreground)}.dt-leftbar-row--has-unread:not(.dt-leftbar-row--no-action):hover{--leftbar-row-omega-visibility:hidden}.dt-leftbar-row--muted{--leftbar-row-opacity:50%}.dt-leftbar-row--selected{--leftbar-row-color-background:var(--theme-sidebar-selected-row-color-background);--leftbar-row-color-foreground:var(--theme-sidebar-selected-row-color)}.dt-leftbar-row--selected .d-avatar__count{--avatar-count-color-shadow:var(--theme-sidebar-selected-row-color-background)}.dt-leftbar-row--action-focused{--leftbar-row-omega-visibility:hidden;--leftbar-row-omega-min-width:var(--leftbar-row-alpha-width)}.dt-leftbar-row__is-typing{--is-typing-size-shape:calc(var(--size-300)*6);height:var(--is-typing-size-shape);width:var(--is-typing-size-shape);position:absolute;display:flex;align-items:center;justify-content:center;gap:2px;border-radius:var(--br-pill);opacity:.75}.dt-leftbar-row__is-typing span{transition:all .5s ease;background:var(--bgc-strong);height:4px;width:4px;display:inline-block;padding:0;opacity:.3;border-radius:var(--br-pill);animation:wave var(--td150) ease infinite}.dt-leftbar-row__is-typing span:first-child{animation-delay:0}.dt-leftbar-row__is-typing span:nth-child(2){animation-delay:var(--td100)}.dt-leftbar-row__is-typing span:nth-child(3){animation-delay:var(--td200)}.dt-leftbar-row__primary{display:flex;align-items:center;flex:1;width:100%;text-align:left;color:var(--leftbar-row-color-foreground);text-decoration:none;background-color:var(--leftbar-row-color-background);border-radius:var(--leftbar-row-radius);transition-duration:var(--td200);transition-property:background-color,border,box-shadow;transition-timing-function:var(--ttf-out-quint);-webkit-appearance:none;appearance:none;font-size:inhert;line-height:inherit;margin:0;border:0;padding:0;cursor:pointer}.dt-leftbar-row__primary:hover{--leftbar-row-color-background:var(--theme-sidebar-row-color-background-hover)}.dt-leftbar-row__primary:active{--leftbar-row-color-background:var(--theme-sidebar-row-color-background-active)}.dt-leftbar-row__primary:focus-visible{box-shadow:var(--bs-focus-ring-inset)}.dt-leftbar-row__action{position:absolute;right:var(--leftbar-row-action-position-right);top:var(--leftbar-row-action-position-bottom);transform:translateY(calc(var(--leftbar-row-action-position-bottom)*-1))}.dt-leftbar-row__action-button{opacity:0;width:var(--leftbar-row-action-width);height:var(--leftbar-row-action-height)}.dt-leftbar-row:hover .dt-leftbar-row__action-button,.dt-leftbar-row__action-button:focus-visible{opacity:1}.dt-leftbar-row__alpha{color:var(--leftbar-row-alpha-color-foreground);display:flex;box-sizing:border-box;justify-content:center;align-items:center;padding-left:var(--space-400);padding-right:var(--space-400);width:var(--leftbar-row-alpha-width);height:var(--leftbar-row-alpha-height)}.dt-leftbar-row__label{flex:1;min-width:0}.dt-leftbar-row__omega{display:flex;gap:var(--space-300);justify-content:end;align-items:center;box-sizing:border-box;min-width:var(--leftbar-row-omega-min-width);height:var(--leftbar-row-omega-height);padding-left:var(--space-400);padding-right:var(--space-400);visibility:var(--leftbar-row-omega-visibility)}.dt-leftbar-row__active-voice{color:var(--fc-success);-webkit-animation-name:opacity-pulsate;-webkit-animation-duration:1s;-webkit-animation-iteration-count:infinite;-webkit-animation-fill-mode:both;-moz-animation-name:opacity-pulsate;-moz-animation-duration:1s;-moz-animation-iteration-count:infinite;-moz-animation-fill-mode:both;animation-name:opacity-pulsate;animation-duration:1s;animation-iteration-count:infinite;animation-fill-mode:both}.dt-leftbar-row__dnd{padding-top:var(--space-200);padding-right:var(--space-300);color:var(--fc-tertiary);font-size:var(--fs-100);line-height:var(--lh-400);font-weight:var(--fw-medium)}.dt-leftbar-row__description{font-weight:var(--leftbar-row-description-font-weight);font-size:var(--leftbar-row-description-font-size);line-height:var(--leftbar-row-description-line-height)}.dt-leftbar-row__description,.dt-leftbar-row__status{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dt-leftbar-row__status{color:var(--leftbar-row-status-color-foreground);font-size:var(--leftbar-row-status-font-size);line-height:var(--leftbar-row-status-line-height);padding-bottom:var(--space-100)}.dt-leftbar-row__meta-context~.dt-leftbar-row__meta-custom:not(:empty):before{content:" • ";color:var(--theme-sidebar-status-color)}.dt-leftbar-row__icon-cc{border-radius:var(--size-200);width:calc(var(--size-300)*3.5);height:calc(var(--size-300)*3.5)}.opacity-pulsate{-webkit-animation-name:opacity-pulsate;-webkit-animation-duration:1s;-webkit-animation-iteration-count:infinite;-webkit-animation-fill-mode:both;-moz-animation-name:opacity-pulsate;-moz-animation-duration:1s;-moz-animation-iteration-count:infinite;-moz-animation-fill-mode:both;animation-name:opacity-pulsate;animation-duration:1s;animation-iteration-count:infinite;animation-fill-mode:both}@keyframes opacity-pulsate{0%,to{opacity:.2}50%{opacity:1}}@keyframes wave{0%,50%,to{transform:translate(0)}10%{transform:translateY(-5px);opacity:90%}}.dt-leftbar-unread-chip__mentions .d-chip__label{font-weight:var(--fw-medium);background-color:var(--theme-mention-color-background);color:var(--theme-mention-color-foreground)}.dt-leftbar-unread-chip__messages .d-chip__label{background-color:var(--bgc-primary)}.dt-leftbar-unread-chip .d-chip__label{padding:var(--space-300) var(--space-500) var(--space-300) var(--space-400);box-shadow:var(--bs-md)}

package/dist/dialtone-vue.umd.js

@@ -1211,6 +1211,7 @@ __webpack_require__.d(__webpack_exports__, {
   "DtRecipeGroupedChip": () => (/* reexport */ grouped_chip),
   "DtRecipeIvrNode": () => (/* reexport */ ivr_node),
   "DtRecipeTopBannerInfo": () => (/* reexport */ top_banner_info),
+  "DtRecipeUnreadChip": () => (/* reexport */ unread_chip),
   "DtRootLayout": () => (/* reexport */ root_layout),
   "DtScroller": () => (/* reexport */ DtScroller),
   "DtSelectMenu": () => (/* reexport */ select_menu),
@@ -1277,6 +1278,8 @@ __webpack_require__.d(__webpack_exports__, {
   "TOOLTIP_HIDE_ON_CLICK_VARIANTS": () => (/* reexport */ TOOLTIP_HIDE_ON_CLICK_VARIANTS),
   "TOOLTIP_KIND_MODIFIERS": () => (/* reexport */ TOOLTIP_KIND_MODIFIERS),
   "TOOLTIP_STICKY_VALUES": () => (/* reexport */ TOOLTIP_STICKY_VALUES),
+  "UNREAD_BADGE_DIRECTIONS": () => (/* reexport */ UNREAD_BADGE_DIRECTIONS),
+  "UNREAD_BADGE_KINDS": () => (/* reexport */ UNREAD_BADGE_KINDS),
   "VALIDATION_MESSAGE_TYPES": () => (/* reexport */ VALIDATION_MESSAGE_TYPES),
   "VALID_WIDTH_SIZE": () => (/* reexport */ VALID_WIDTH_SIZE),
   "filterFormattedMessages": () => (/* reexport */ filterFormattedMessages),
@@ -1305,7 +1308,7 @@ 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=284ea17a
+;// 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=0694ee28
 
 const _hoisted_1 = ["id"];
 const _hoisted_2 = {
@@ -1337,7 +1340,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     "data-qa": "dt-presence"
   }), 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=284ea17a
+;// CONCATENATED MODULE: ./components/avatar/avatar.vue?vue&type=template&id=0694ee28
 
 ;// CONCATENATED MODULE: ./common/constants.js
 /* TODO: Move and sort these in a constants directory
@@ -1912,13 +1915,19 @@ const AVATAR_GROUP_VALIDATOR = group => group > 1;
 
   methods: {
     async init() {
+      var _this$$refs$canvas;
+
       if (this.initializing) return;
       this.kind = null;
       await this.$nextTick();
-      const firstChild = this.$refs.canvas.children[0] || this.$refs.canvas;
+      const firstChild = ((_this$$refs$canvas = this.$refs.canvas) === null || _this$$refs$canvas === void 0 ? void 0 : _this$$refs$canvas.children[0]) || this.$refs.canvas;
       this.formatInitials(this.initials);
-      this.setKind(firstChild);
-      this.kindHandler(firstChild);
+
+      if (firstChild) {
+        this.setKind(firstChild);
+        this.kindHandler(firstChild);
+      }
+
       this.initializing = true;
       await this.$nextTick();
       this.initializing = false;
@@ -2049,10 +2058,10 @@ const AVATAR_GROUP_VALIDATOR = group => group > 1;
 });
 ;// CONCATENATED MODULE: ./components/avatar/avatar.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/avatar/avatar.vue?vue&type=style&index=0&id=284ea17a&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/avatar/avatar.vue?vue&type=style&index=0&id=0694ee28&lang=less
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./components/avatar/avatar.vue?vue&type=style&index=0&id=284ea17a&lang=less
+;// CONCATENATED MODULE: ./components/avatar/avatar.vue?vue&type=style&index=0&id=0694ee28&lang=less
 
 ;// CONCATENATED MODULE: ./components/avatar/avatar.vue
 
@@ -16770,27 +16779,27 @@ const checkbox_group_exports_ = checkbox_groupvue_type_script_lang_js;
 /* harmony default export */ const checkbox_group = (checkbox_group_exports_);
 ;// CONCATENATED MODULE: ./components/checkbox_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/chip/chip.vue?vue&type=template&id=42f677c2
+;// 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/chip/chip.vue?vue&type=template&id=790baeaf
 
-const chipvue_type_template_id_42f677c2_hoisted_1 = {
+const chipvue_type_template_id_790baeaf_hoisted_1 = {
   class: "d-chip"
 };
-const chipvue_type_template_id_42f677c2_hoisted_2 = {
+const chipvue_type_template_id_790baeaf_hoisted_2 = {
   key: 0,
   "data-qa": "dt-chip-icon",
   class: "d-chip__icon"
 };
-const chipvue_type_template_id_42f677c2_hoisted_3 = {
+const chipvue_type_template_id_790baeaf_hoisted_3 = {
   key: 1,
   "data-qa": "dt-chip-avatar"
 };
-const chipvue_type_template_id_42f677c2_hoisted_4 = ["id"];
-function chipvue_type_template_id_42f677c2_render(_ctx, _cache, $props, $setup, $data, $options) {
+const chipvue_type_template_id_790baeaf_hoisted_4 = ["id"];
+function chipvue_type_template_id_790baeaf_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");
 
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", chipvue_type_template_id_42f677c2_hoisted_1, [((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveDynamicComponent)($props.interactive ? 'button' : 'span'), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", chipvue_type_template_id_790baeaf_hoisted_1, [((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveDynamicComponent)($props.interactive ? 'button' : 'span'), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
     id: $props.id,
     type: $props.interactive && 'button',
     class: $options.chipClasses(),
@@ -16798,12 +16807,12 @@ function chipvue_type_template_id_42f677c2_render(_ctx, _cache, $props, $setup,
     "aria-labelledby": $props.ariaLabel ? undefined : `${$props.id}-content`,
     "aria-label": $props.ariaLabel
   }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toHandlers)($options.chipListeners)), {
-    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [$data.hasSlotContent(_ctx.$slots.icon) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", chipvue_type_template_id_42f677c2_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "icon")])) : $data.hasSlotContent(_ctx.$slots.avatar) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", chipvue_type_template_id_42f677c2_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "avatar")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), $data.hasSlotContent(_ctx.$slots.default) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", {
+    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [$data.hasSlotContent(_ctx.$slots.icon) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", chipvue_type_template_id_790baeaf_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "icon")])) : $data.hasSlotContent(_ctx.$slots.avatar) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", chipvue_type_template_id_790baeaf_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "avatar")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), $data.hasSlotContent(_ctx.$slots.default) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", {
       key: 2,
       id: `${$props.id}-content`,
       "data-qa": "dt-chip-label",
       class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-truncate', 'd-chip__text', $props.contentClass])
-    }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")], 10, chipvue_type_template_id_42f677c2_hoisted_4)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]),
+    }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")], 10, chipvue_type_template_id_790baeaf_hoisted_4)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]),
     _: 3
   }, 16, ["id", "type", "class", "aria-labelledby", "aria-label"])), !$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: 0
@@ -16820,7 +16829,7 @@ function chipvue_type_template_id_42f677c2_render(_ctx, _cache, $props, $setup,
     _: 1
   }, 16, ["class", "aria-label"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]);
 }
-;// CONCATENATED MODULE: ./components/chip/chip.vue?vue&type=template&id=42f677c2
+;// CONCATENATED MODULE: ./components/chip/chip.vue?vue&type=template&id=790baeaf
 
 ;// CONCATENATED MODULE: ./components/chip/chip_constants.js
 const CHIP_SIZE_MODIFIERS = {
@@ -16994,7 +17003,7 @@ const CHIP_ICON_SIZES = {
   },
   methods: {
     chipClasses() {
-      return [this.$attrs['grouped-chip'] ? ['d-chip', ...this.labelClass] : 'd-chip__label', CHIP_SIZE_MODIFIERS[this.size]];
+      return [this.$attrs['grouped-chip'] ? 'd-chip' : 'd-chip__label', CHIP_SIZE_MODIFIERS[this.size], this.labelClass];
     },
 
     chipCloseButtonClasses() {
@@ -17017,7 +17026,7 @@ const CHIP_ICON_SIZES = {
 
 
 ;
-const chip_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(chipvue_type_script_lang_js, [['render',chipvue_type_template_id_42f677c2_render]])
+const chip_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(chipvue_type_script_lang_js, [['render',chipvue_type_template_id_790baeaf_render]])
 
 /* harmony default export */ const chip = (chip_exports_);
 ;// CONCATENATED MODULE: ./components/chip/index.js
@@ -24040,6 +24049,107 @@ const contact_row_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(contac
 /* harmony default export */ const contact_row = (contact_row_exports_);
 ;// CONCATENATED MODULE: ./recipes/leftbar/contact_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/unread_chip/unread_chip.vue?vue&type=template&id=5931b600
+
+const unread_chipvue_type_template_id_5931b600_hoisted_1 = {
+  "data-qa": "dt-leftbar-unread-chip__label"
+};
+function unread_chipvue_type_template_id_5931b600_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_chip = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-chip");
+
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_chip, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+    class: ['dt-leftbar-unread-chip', `dt-leftbar-unread-chip__${$props.kind}`],
+    "data-qa": "dt-leftbar-unread-chip",
+    "hide-close": true
+  }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toHandlers)($options.unreadChipListeners)), {
+    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: `arrow-${$props.direction}`,
+      size: "300"
+    }, null, 8, ["name"])]),
+    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", unread_chipvue_type_template_id_5931b600_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")])]),
+    _: 3
+  }, 16, ["class"]);
+}
+;// CONCATENATED MODULE: ./recipes/leftbar/unread_chip/unread_chip.vue?vue&type=template&id=5931b600
+
+;// CONCATENATED MODULE: ./recipes/leftbar/unread_chip/unread_chip_constants.js
+const UNREAD_BADGE_DIRECTIONS = ['up', 'down'];
+const UNREAD_BADGE_KINDS = ['mentions', 'messages'];
+/* harmony default export */ const unread_chip_constants = ({
+  UNREAD_BADGE_DIRECTIONS,
+  UNREAD_BADGE_KINDS
+});
+;// 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/unread_chip/unread_chip.vue?vue&type=script&lang=js
+
+
+
+/* harmony default export */ const unread_chipvue_type_script_lang_js = ({
+  name: 'DtRecipeUnreadChip',
+  components: {
+    DtIcon: icon,
+    DtChip: chip
+  },
+  props: {
+    /**
+     * The kind of unread chip which determines the styling
+     * @values 'mentions', 'messages'
+     **/
+    kind: {
+      type: String,
+      required: true,
+      validator: kind => UNREAD_BADGE_KINDS.includes(kind)
+    },
+
+    /**
+     * The direction of the arrow icon
+     * @values 'up', 'down'
+     **/
+    direction: {
+      type: String,
+      required: true,
+      validator: dir => UNREAD_BADGE_DIRECTIONS.includes(dir)
+    }
+  },
+  emits: [
+  /**
+   * Native click event
+   *
+   * @event click
+   * @type {PointerEvent | KeyboardEvent}
+   */
+  'click'],
+  computed: {
+    unreadChipListeners() {
+      return {
+        click: event => this.$emit('click', event)
+      };
+    }
+
+  }
+});
+;// CONCATENATED MODULE: ./recipes/leftbar/unread_chip/unread_chip.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]!./recipes/leftbar/unread_chip/unread_chip.vue?vue&type=style&index=0&id=5931b600&lang=less
+// extracted by mini-css-extract-plugin
+
+;// CONCATENATED MODULE: ./recipes/leftbar/unread_chip/unread_chip.vue?vue&type=style&index=0&id=5931b600&lang=less
+
+;// CONCATENATED MODULE: ./recipes/leftbar/unread_chip/unread_chip.vue
+
+
+
+
+;
+
+
+const unread_chip_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(unread_chipvue_type_script_lang_js, [['render',unread_chipvue_type_template_id_5931b600_render]])
+
+/* harmony default export */ const unread_chip = (unread_chip_exports_);
+;// CONCATENATED MODULE: ./recipes/leftbar/unread_chip/index.js
+
+
 ;// CONCATENATED MODULE: ./common/mixins/index.js
 
 
@@ -24098,6 +24208,7 @@ const contact_row_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(contac
 
 
 
+
  // Mixins
 
  // Constants