@dialpad/dialtone 9.86.1 → 9.87.0

package/dist/vue2/recipes/conversation_view/feed_item_pill/feed_item_pill.vue.cjs

@@ -2,7 +2,6 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const feed_item_pill_constants = require("./feed_item_pill_constants.cjs");
 const vue2 = require("@dialpad/dialtone-icons/vue2");
-;/* empty css                      */
 const _pluginVue2_normalizer = require("../../../_virtual/_plugin-vue2_normalizer.cjs");
 const item_layout = require("../../../components/item_layout/item_layout.vue.cjs");
 const collapsible = require("../../../components/collapsible/collapsible.vue.cjs");
@@ -88,8 +87,8 @@ const _sfc_main = {
 };
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c("div", { class: ["dt-recipe-feed-item-pill__border", _vm.borderClass, _vm.wrapperClass] }, [_c("div", { staticClass: "dt-recipe-feed-item-pill__wrapper" }, [_c("dt-collapsible", { attrs: { "open": _vm.expanded }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
-    return [_c("button", { class: ["dt-recipe-feed-item-pill__button", _vm.toggleableClass, _vm.buttonClass], attrs: { "data-qa": "dt-recipe-feed-item-pill", "aria-label": _vm.ariaLabel }, on: { "focusin": function($event) {
+  return _c("div", { class: ["d-recipe-feed-item-pill__border", _vm.borderClass, _vm.wrapperClass] }, [_c("div", { staticClass: "d-recipe-feed-item-pill__wrapper" }, [_c("dt-collapsible", { attrs: { "open": _vm.expanded }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
+    return [_c("button", { class: ["d-recipe-feed-item-pill__button", _vm.toggleableClass, _vm.buttonClass], attrs: { "data-qa": "dt-recipe-feed-item-pill", "aria-label": _vm.ariaLabel }, on: { "focusin": function($event) {
       _vm.hover = true;
     }, "focusout": function($event) {
       _vm.hover = false;
@@ -97,8 +96,8 @@ var _sfc_render = function render() {
       _vm.hover = true;
     }, "mouseleave": function($event) {
       _vm.hover = false;
-    }, "click": _vm.onClick } }, [_c("dt-item-layout", { staticClass: "dt-recipe-feed-item-pill__layout", scopedSlots: _vm._u([{ key: "left", fn: function() {
-      return [_c("div", { staticClass: "dt-recipe-feed-item-pill__icon", attrs: { "data-qa": "dt-recipe-feed-item-pill__icon" } }, [_vm.showChevronIcon ? _c(_vm.toggleIcon, { tag: "component", attrs: { "size": "300" } }) : _vm._t("leftIcon", null, { "iconSize": "300" })], 2)];
+    }, "click": _vm.onClick } }, [_c("dt-item-layout", { staticClass: "d-recipe-feed-item-pill__layout", scopedSlots: _vm._u([{ key: "left", fn: function() {
+      return [_c("div", { staticClass: "d-recipe-feed-item-pill__icon", attrs: { "data-qa": "dt-recipe-feed-item-pill__icon" } }, [_vm.showChevronIcon ? _c(_vm.toggleIcon, { tag: "component", attrs: { "size": "300" } }) : _vm._t("leftIcon", null, { "iconSize": "300" })], 2)];
     }, proxy: true }, { key: "subtitle", fn: function() {
       return [_vm._t("subtitle")];
     }, proxy: true }, { key: "bottom", fn: function() {
@@ -106,20 +105,17 @@ var _sfc_render = function render() {
     }, proxy: true }, { key: "right", fn: function() {
       return [_vm._t("right")];
     }, proxy: true }], null, true) }, [_vm._t("title", function() {
-      return [_c("span", { staticClass: "dt-recipe-feed-item-pill__title" }, [_vm._v(_vm._s(_vm.title))])];
+      return [_c("span", { staticClass: "d-recipe-feed-item-pill__title" }, [_vm._v(_vm._s(_vm.title))])];
     })], 2)], 1)];
   }, proxy: true }, { key: "content", fn: function() {
-    return [_c("div", { staticClass: "dt-recipe-feed-item-pill__content" }, [_vm._t("content")], 2)];
+    return [_c("div", { staticClass: "d-recipe-feed-item-pill__content" }, [_vm._t("content")], 2)];
   }, proxy: true }], null, true) })], 1)]);
 };
 var _sfc_staticRenderFns = [];
 var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.default(
   _sfc_main,
   _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  "943b3d15"
+  _sfc_staticRenderFns
 );
 const feed_item_pill = __component__.exports;
 exports.default = feed_item_pill;

package/dist/vue2/recipes/conversation_view/feed_item_pill/feed_item_pill.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"feed_item_pill.vue.cjs","sources":["../../../../recipes/conversation_view/feed_item_pill/feed_item_pill.vue"],"sourcesContent":["<template>\n  <div :class=\"['dt-recipe-feed-item-pill__border', borderClass, wrapperClass]\">\n    <div class=\"dt-recipe-feed-item-pill__wrapper\">\n      <dt-collapsible :open=\"expanded\">\n        <template #anchor>\n          <button\n            data-qa=\"dt-recipe-feed-item-pill\"\n            :aria-label=\"ariaLabel\"\n            :class=\"['dt-recipe-feed-item-pill__button', toggleableClass, buttonClass]\"\n            @focusin=\"hover = true\"\n            @focusout=\"hover = false\"\n            @mouseenter=\"hover = true\"\n            @mouseleave=\"hover = false\"\n            @click=\"onClick\"\n          >\n            <dt-item-layout class=\"dt-recipe-feed-item-pill__layout\">\n              <slot name=\"title\">\n                <span class=\"dt-recipe-feed-item-pill__title\">{{ title }}</span>\n              </slot>\n              <template #left>\n                <div\n                  class=\"dt-recipe-feed-item-pill__icon\"\n                  data-qa=\"dt-recipe-feed-item-pill__icon\"\n                >\n                  <component\n                    :is=\"toggleIcon\"\n                    v-if=\"showChevronIcon\"\n                    size=\"300\"\n                  />\n                  <!-- @slot Slot for left icon, icon-size slot prop defaults to '300' -->\n                  <slot\n                    v-else\n                    name=\"leftIcon\"\n                    :icon-size=\"'300'\"\n                  />\n                </div>\n              </template>\n              <template #subtitle>\n                <slot name=\"subtitle\" />\n              </template>\n              <template #bottom>\n                <slot name=\"bottom\" />\n              </template>\n              <template #right>\n                <slot name=\"right\" />\n              </template>\n            </dt-item-layout>\n          </button>\n        </template>\n        <template #content>\n          <div class=\"dt-recipe-feed-item-pill__content\">\n            <slot name=\"content\" />\n          </div>\n        </template>\n      </dt-collapsible>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { FEED_ITEM_PILL_BORDER_COLORS } from './feed_item_pill_constants';\nimport { DtItemLayout } from '@/components/item_layout';\nimport { DtCollapsible } from '@/components/collapsible';\nimport { DtIconChevronDown, DtIconChevronRight } from '@dialpad/dialtone-icons/vue2';\n\nexport default {\n  name: 'DtRecipeFeedItemPill',\n\n  components: { DtItemLayout, DtCollapsible },\n\n  props: {\n    /**\n     * Bolded primary text\n     */\n    title: {\n      type: String,\n      default: () => '',\n    },\n\n    /**\n     * Additional styling around the pill\n     */\n    wrapperClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional styling for the pill\n     */\n    buttonClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Aria label for feed pill\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Sets whether the pill can be toggled (Icon changing on hover, expanding and collapsing, pointer)\n     */\n    toggleable: {\n      type: Boolean,\n      default: () => true,\n    },\n\n    defaultToggled: {\n      type: Boolean,\n      default: () => false,\n    },\n\n    /**\n     * Callbox border color\n     * @values default, ai, critical\n     */\n    borderColor: {\n      type: String,\n      default: 'default',\n      validator: (color) => Object.keys(FEED_ITEM_PILL_BORDER_COLORS).includes(color),\n    },\n  },\n\n  data () {\n    return {\n      hover: false,\n      expanded: this.defaultToggled,\n    };\n  },\n\n  computed: {\n    toggleIcon () {\n      return this.expanded ? DtIconChevronDown : DtIconChevronRight;\n    },\n\n    showChevronIcon () {\n      return this.toggleable && this.hover;\n    },\n\n    toggleableClass () {\n      return this.toggleable ? 'd-c-pointer' : '';\n    },\n\n    borderClass () {\n      return FEED_ITEM_PILL_BORDER_COLORS[this.borderColor];\n    },\n  },\n\n  methods: {\n    onClick () {\n      if (!this.toggleable) return;\n\n      this.expanded = !this.expanded;\n    },\n  },\n};\n</script>\n\n<style lang=\"less\" scoped>\n.dt-recipe-feed-item-pill {\n  &__wrapper {\n    background-color: var(--dt-color-surface-secondary);\n    padding: var(--dt-space-400);\n  }\n\n  &__button {\n    background-color: var(--dt-color-surface-moderate);\n    text-align: left;\n    width: 100%;\n    cursor: pointer;\n    border-width: 0;\n    border-radius: var(--dt-size-radius-600);\n    --button-padding-x: var(--button-padding-y-md);\n    --button-padding-y: var(--button-padding-y-md);\n    --button-color-text: var(--dt-action-color-foreground-muted-default);\n    --button-border-radius: var(--dt-size-radius-600);\n  }\n\n  &__layout {\n    padding: var(--dt-space-400);\n    gap: var(--dt-space-300);\n    width: 100%;\n\n    &:deep(> .d-item-layout--left) {\n      padding-right: var(--dt-space-0);\n      justify-content: center;\n    }\n  }\n\n  &__icon {\n    display: flex;\n    &:deep(svg) {\n      animation: fade 0.15s ease-in;\n    }\n  }\n\n  &__content {\n    display: flex;\n    justify-content: center;\n  }\n\n  &__title {\n    font-weight: var(--dt-font-weight-bold);\n  }\n\n  // Gradient radius solution taken from https://stackoverflow.com/a/53037637\n  &__border {\n    border: double 1px transparent;\n    border-radius: var(--dt-size-radius-600);\n    background-origin: border-box;\n    background-clip: content-box, border-box;\n    overflow: hidden;\n  }\n\n  &__border-default {\n    background: var(--dt-color-border-default)\n  }\n\n  &__border-ai {\n    background-image:\n      linear-gradient(var(--dt-color-surface-primary), var(--dt-color-surface-primary)),\n      var(--dt-badge-color-background-ai);\n  }\n\n  &__border-critical {\n    background: var(--dt-color-foreground-critical);\n  }\n\n  @keyframes fade {\n    0%   {transform: scale(0);}\n    100% {transform: scale(1);}\n  }\n}\n</style>\n"],"names":["DtItemLayout","DtCollapsible","FEED_ITEM_PILL_BORDER_COLORS","DtIconChevronDown","DtIconChevronRight"],"mappings":";;;;;;;;AAiEA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA,EAAA,cAAAA,YAAA,SAAA,eAAAC,oBAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,IACA;AAAA,IAEA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,UAAA,OAAA,KAAAC,qDAAA,EAAA,SAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,aAAA;AACA,aAAA,KAAA,WAAAC,KAAA,oBAAAC;IACA;AAAA,IAEA,kBAAA;AACA,aAAA,KAAA,cAAA,KAAA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAA,KAAA,aAAA,gBAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,aAAAF,yBAAA,6BAAA,KAAA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,UAAA;AACA,UAAA,CAAA,KAAA,WAAA;AAEA,WAAA,WAAA,CAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"feed_item_pill.vue.cjs","sources":["../../../../recipes/conversation_view/feed_item_pill/feed_item_pill.vue"],"sourcesContent":["<template>\n  <div :class=\"['d-recipe-feed-item-pill__border', borderClass, wrapperClass]\">\n    <div class=\"d-recipe-feed-item-pill__wrapper\">\n      <dt-collapsible :open=\"expanded\">\n        <template #anchor>\n          <button\n            data-qa=\"dt-recipe-feed-item-pill\"\n            :aria-label=\"ariaLabel\"\n            :class=\"['d-recipe-feed-item-pill__button', toggleableClass, buttonClass]\"\n            @focusin=\"hover = true\"\n            @focusout=\"hover = false\"\n            @mouseenter=\"hover = true\"\n            @mouseleave=\"hover = false\"\n            @click=\"onClick\"\n          >\n            <dt-item-layout class=\"d-recipe-feed-item-pill__layout\">\n              <slot name=\"title\">\n                <span class=\"d-recipe-feed-item-pill__title\">{{ title }}</span>\n              </slot>\n              <template #left>\n                <div\n                  class=\"d-recipe-feed-item-pill__icon\"\n                  data-qa=\"dt-recipe-feed-item-pill__icon\"\n                >\n                  <component\n                    :is=\"toggleIcon\"\n                    v-if=\"showChevronIcon\"\n                    size=\"300\"\n                  />\n                  <!-- @slot Slot for left icon, icon-size slot prop defaults to '300' -->\n                  <slot\n                    v-else\n                    name=\"leftIcon\"\n                    :icon-size=\"'300'\"\n                  />\n                </div>\n              </template>\n              <template #subtitle>\n                <slot name=\"subtitle\" />\n              </template>\n              <template #bottom>\n                <slot name=\"bottom\" />\n              </template>\n              <template #right>\n                <slot name=\"right\" />\n              </template>\n            </dt-item-layout>\n          </button>\n        </template>\n        <template #content>\n          <div class=\"d-recipe-feed-item-pill__content\">\n            <slot name=\"content\" />\n          </div>\n        </template>\n      </dt-collapsible>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { FEED_ITEM_PILL_BORDER_COLORS } from './feed_item_pill_constants';\nimport { DtItemLayout } from '@/components/item_layout';\nimport { DtCollapsible } from '@/components/collapsible';\nimport { DtIconChevronDown, DtIconChevronRight } from '@dialpad/dialtone-icons/vue2';\n\nexport default {\n  name: 'DtRecipeFeedItemPill',\n\n  components: { DtItemLayout, DtCollapsible },\n\n  props: {\n    /**\n     * Bolded primary text\n     */\n    title: {\n      type: String,\n      default: () => '',\n    },\n\n    /**\n     * Additional styling around the pill\n     */\n    wrapperClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional styling for the pill\n     */\n    buttonClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Aria label for feed pill\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Sets whether the pill can be toggled (Icon changing on hover, expanding and collapsing, pointer)\n     */\n    toggleable: {\n      type: Boolean,\n      default: () => true,\n    },\n\n    defaultToggled: {\n      type: Boolean,\n      default: () => false,\n    },\n\n    /**\n     * Callbox border color\n     * @values default, ai, critical\n     */\n    borderColor: {\n      type: String,\n      default: 'default',\n      validator: (color) => Object.keys(FEED_ITEM_PILL_BORDER_COLORS).includes(color),\n    },\n  },\n\n  data () {\n    return {\n      hover: false,\n      expanded: this.defaultToggled,\n    };\n  },\n\n  computed: {\n    toggleIcon () {\n      return this.expanded ? DtIconChevronDown : DtIconChevronRight;\n    },\n\n    showChevronIcon () {\n      return this.toggleable && this.hover;\n    },\n\n    toggleableClass () {\n      return this.toggleable ? 'd-c-pointer' : '';\n    },\n\n    borderClass () {\n      return FEED_ITEM_PILL_BORDER_COLORS[this.borderColor];\n    },\n  },\n\n  methods: {\n    onClick () {\n      if (!this.toggleable) return;\n\n      this.expanded = !this.expanded;\n    },\n  },\n};\n</script>\n"],"names":["DtItemLayout","DtCollapsible","FEED_ITEM_PILL_BORDER_COLORS","DtIconChevronDown","DtIconChevronRight"],"mappings":";;;;;;;AAiEA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA,EAAA,cAAAA,YAAA,SAAA,eAAAC,oBAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,IACA;AAAA,IAEA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,UAAA,OAAA,KAAAC,qDAAA,EAAA,SAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,aAAA;AACA,aAAA,KAAA,WAAAC,KAAA,oBAAAC;IACA;AAAA,IAEA,kBAAA;AACA,aAAA,KAAA,cAAA,KAAA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAA,KAAA,aAAA,gBAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,aAAAF,yBAAA,6BAAA,KAAA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,UAAA;AACA,UAAA,CAAA,KAAA,WAAA;AAEA,WAAA,WAAA,CAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue2/recipes/conversation_view/feed_item_pill/feed_item_pill.vue.js

@@ -1,6 +1,5 @@
 import { FEED_ITEM_PILL_BORDER_COLORS } from "./feed_item_pill_constants.js";
 import { DtIconChevronDown, DtIconChevronRight } from "@dialpad/dialtone-icons/vue2";
-/* empty css                    */
 import normalizeComponent from "../../../_virtual/_plugin-vue2_normalizer.js";
 import DtItemLayout from "../../../components/item_layout/item_layout.vue.js";
 import DtCollapsible from "../../../components/collapsible/collapsible.vue.js";
@@ -86,8 +85,8 @@ const _sfc_main = {
 };
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c("div", { class: ["dt-recipe-feed-item-pill__border", _vm.borderClass, _vm.wrapperClass] }, [_c("div", { staticClass: "dt-recipe-feed-item-pill__wrapper" }, [_c("dt-collapsible", { attrs: { "open": _vm.expanded }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
-    return [_c("button", { class: ["dt-recipe-feed-item-pill__button", _vm.toggleableClass, _vm.buttonClass], attrs: { "data-qa": "dt-recipe-feed-item-pill", "aria-label": _vm.ariaLabel }, on: { "focusin": function($event) {
+  return _c("div", { class: ["d-recipe-feed-item-pill__border", _vm.borderClass, _vm.wrapperClass] }, [_c("div", { staticClass: "d-recipe-feed-item-pill__wrapper" }, [_c("dt-collapsible", { attrs: { "open": _vm.expanded }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
+    return [_c("button", { class: ["d-recipe-feed-item-pill__button", _vm.toggleableClass, _vm.buttonClass], attrs: { "data-qa": "dt-recipe-feed-item-pill", "aria-label": _vm.ariaLabel }, on: { "focusin": function($event) {
       _vm.hover = true;
     }, "focusout": function($event) {
       _vm.hover = false;
@@ -95,8 +94,8 @@ var _sfc_render = function render() {
       _vm.hover = true;
     }, "mouseleave": function($event) {
       _vm.hover = false;
-    }, "click": _vm.onClick } }, [_c("dt-item-layout", { staticClass: "dt-recipe-feed-item-pill__layout", scopedSlots: _vm._u([{ key: "left", fn: function() {
-      return [_c("div", { staticClass: "dt-recipe-feed-item-pill__icon", attrs: { "data-qa": "dt-recipe-feed-item-pill__icon" } }, [_vm.showChevronIcon ? _c(_vm.toggleIcon, { tag: "component", attrs: { "size": "300" } }) : _vm._t("leftIcon", null, { "iconSize": "300" })], 2)];
+    }, "click": _vm.onClick } }, [_c("dt-item-layout", { staticClass: "d-recipe-feed-item-pill__layout", scopedSlots: _vm._u([{ key: "left", fn: function() {
+      return [_c("div", { staticClass: "d-recipe-feed-item-pill__icon", attrs: { "data-qa": "dt-recipe-feed-item-pill__icon" } }, [_vm.showChevronIcon ? _c(_vm.toggleIcon, { tag: "component", attrs: { "size": "300" } }) : _vm._t("leftIcon", null, { "iconSize": "300" })], 2)];
     }, proxy: true }, { key: "subtitle", fn: function() {
       return [_vm._t("subtitle")];
     }, proxy: true }, { key: "bottom", fn: function() {
@@ -104,20 +103,17 @@ var _sfc_render = function render() {
     }, proxy: true }, { key: "right", fn: function() {
       return [_vm._t("right")];
     }, proxy: true }], null, true) }, [_vm._t("title", function() {
-      return [_c("span", { staticClass: "dt-recipe-feed-item-pill__title" }, [_vm._v(_vm._s(_vm.title))])];
+      return [_c("span", { staticClass: "d-recipe-feed-item-pill__title" }, [_vm._v(_vm._s(_vm.title))])];
     })], 2)], 1)];
   }, proxy: true }, { key: "content", fn: function() {
-    return [_c("div", { staticClass: "dt-recipe-feed-item-pill__content" }, [_vm._t("content")], 2)];
+    return [_c("div", { staticClass: "d-recipe-feed-item-pill__content" }, [_vm._t("content")], 2)];
   }, proxy: true }], null, true) })], 1)]);
 };
 var _sfc_staticRenderFns = [];
 var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_main,
   _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  "943b3d15"
+  _sfc_staticRenderFns
 );
 const feed_item_pill = __component__.exports;
 export {

package/dist/vue2/recipes/conversation_view/feed_item_pill/feed_item_pill.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"feed_item_pill.vue.js","sources":["../../../../recipes/conversation_view/feed_item_pill/feed_item_pill.vue"],"sourcesContent":["<template>\n  <div :class=\"['dt-recipe-feed-item-pill__border', borderClass, wrapperClass]\">\n    <div class=\"dt-recipe-feed-item-pill__wrapper\">\n      <dt-collapsible :open=\"expanded\">\n        <template #anchor>\n          <button\n            data-qa=\"dt-recipe-feed-item-pill\"\n            :aria-label=\"ariaLabel\"\n            :class=\"['dt-recipe-feed-item-pill__button', toggleableClass, buttonClass]\"\n            @focusin=\"hover = true\"\n            @focusout=\"hover = false\"\n            @mouseenter=\"hover = true\"\n            @mouseleave=\"hover = false\"\n            @click=\"onClick\"\n          >\n            <dt-item-layout class=\"dt-recipe-feed-item-pill__layout\">\n              <slot name=\"title\">\n                <span class=\"dt-recipe-feed-item-pill__title\">{{ title }}</span>\n              </slot>\n              <template #left>\n                <div\n                  class=\"dt-recipe-feed-item-pill__icon\"\n                  data-qa=\"dt-recipe-feed-item-pill__icon\"\n                >\n                  <component\n                    :is=\"toggleIcon\"\n                    v-if=\"showChevronIcon\"\n                    size=\"300\"\n                  />\n                  <!-- @slot Slot for left icon, icon-size slot prop defaults to '300' -->\n                  <slot\n                    v-else\n                    name=\"leftIcon\"\n                    :icon-size=\"'300'\"\n                  />\n                </div>\n              </template>\n              <template #subtitle>\n                <slot name=\"subtitle\" />\n              </template>\n              <template #bottom>\n                <slot name=\"bottom\" />\n              </template>\n              <template #right>\n                <slot name=\"right\" />\n              </template>\n            </dt-item-layout>\n          </button>\n        </template>\n        <template #content>\n          <div class=\"dt-recipe-feed-item-pill__content\">\n            <slot name=\"content\" />\n          </div>\n        </template>\n      </dt-collapsible>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { FEED_ITEM_PILL_BORDER_COLORS } from './feed_item_pill_constants';\nimport { DtItemLayout } from '@/components/item_layout';\nimport { DtCollapsible } from '@/components/collapsible';\nimport { DtIconChevronDown, DtIconChevronRight } from '@dialpad/dialtone-icons/vue2';\n\nexport default {\n  name: 'DtRecipeFeedItemPill',\n\n  components: { DtItemLayout, DtCollapsible },\n\n  props: {\n    /**\n     * Bolded primary text\n     */\n    title: {\n      type: String,\n      default: () => '',\n    },\n\n    /**\n     * Additional styling around the pill\n     */\n    wrapperClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional styling for the pill\n     */\n    buttonClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Aria label for feed pill\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Sets whether the pill can be toggled (Icon changing on hover, expanding and collapsing, pointer)\n     */\n    toggleable: {\n      type: Boolean,\n      default: () => true,\n    },\n\n    defaultToggled: {\n      type: Boolean,\n      default: () => false,\n    },\n\n    /**\n     * Callbox border color\n     * @values default, ai, critical\n     */\n    borderColor: {\n      type: String,\n      default: 'default',\n      validator: (color) => Object.keys(FEED_ITEM_PILL_BORDER_COLORS).includes(color),\n    },\n  },\n\n  data () {\n    return {\n      hover: false,\n      expanded: this.defaultToggled,\n    };\n  },\n\n  computed: {\n    toggleIcon () {\n      return this.expanded ? DtIconChevronDown : DtIconChevronRight;\n    },\n\n    showChevronIcon () {\n      return this.toggleable && this.hover;\n    },\n\n    toggleableClass () {\n      return this.toggleable ? 'd-c-pointer' : '';\n    },\n\n    borderClass () {\n      return FEED_ITEM_PILL_BORDER_COLORS[this.borderColor];\n    },\n  },\n\n  methods: {\n    onClick () {\n      if (!this.toggleable) return;\n\n      this.expanded = !this.expanded;\n    },\n  },\n};\n</script>\n\n<style lang=\"less\" scoped>\n.dt-recipe-feed-item-pill {\n  &__wrapper {\n    background-color: var(--dt-color-surface-secondary);\n    padding: var(--dt-space-400);\n  }\n\n  &__button {\n    background-color: var(--dt-color-surface-moderate);\n    text-align: left;\n    width: 100%;\n    cursor: pointer;\n    border-width: 0;\n    border-radius: var(--dt-size-radius-600);\n    --button-padding-x: var(--button-padding-y-md);\n    --button-padding-y: var(--button-padding-y-md);\n    --button-color-text: var(--dt-action-color-foreground-muted-default);\n    --button-border-radius: var(--dt-size-radius-600);\n  }\n\n  &__layout {\n    padding: var(--dt-space-400);\n    gap: var(--dt-space-300);\n    width: 100%;\n\n    &:deep(> .d-item-layout--left) {\n      padding-right: var(--dt-space-0);\n      justify-content: center;\n    }\n  }\n\n  &__icon {\n    display: flex;\n    &:deep(svg) {\n      animation: fade 0.15s ease-in;\n    }\n  }\n\n  &__content {\n    display: flex;\n    justify-content: center;\n  }\n\n  &__title {\n    font-weight: var(--dt-font-weight-bold);\n  }\n\n  // Gradient radius solution taken from https://stackoverflow.com/a/53037637\n  &__border {\n    border: double 1px transparent;\n    border-radius: var(--dt-size-radius-600);\n    background-origin: border-box;\n    background-clip: content-box, border-box;\n    overflow: hidden;\n  }\n\n  &__border-default {\n    background: var(--dt-color-border-default)\n  }\n\n  &__border-ai {\n    background-image:\n      linear-gradient(var(--dt-color-surface-primary), var(--dt-color-surface-primary)),\n      var(--dt-badge-color-background-ai);\n  }\n\n  &__border-critical {\n    background: var(--dt-color-foreground-critical);\n  }\n\n  @keyframes fade {\n    0%   {transform: scale(0);}\n    100% {transform: scale(1);}\n  }\n}\n</style>\n"],"names":[],"mappings":";;;;;;AAiEA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA,EAAA,cAAA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,IACA;AAAA,IAEA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,UAAA,OAAA,KAAA,4BAAA,EAAA,SAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,aAAA;AACA,aAAA,KAAA,WAAA,oBAAA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAA,KAAA,cAAA,KAAA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAA,KAAA,aAAA,gBAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,aAAA,6BAAA,KAAA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,UAAA;AACA,UAAA,CAAA,KAAA,WAAA;AAEA,WAAA,WAAA,CAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"feed_item_pill.vue.js","sources":["../../../../recipes/conversation_view/feed_item_pill/feed_item_pill.vue"],"sourcesContent":["<template>\n  <div :class=\"['d-recipe-feed-item-pill__border', borderClass, wrapperClass]\">\n    <div class=\"d-recipe-feed-item-pill__wrapper\">\n      <dt-collapsible :open=\"expanded\">\n        <template #anchor>\n          <button\n            data-qa=\"dt-recipe-feed-item-pill\"\n            :aria-label=\"ariaLabel\"\n            :class=\"['d-recipe-feed-item-pill__button', toggleableClass, buttonClass]\"\n            @focusin=\"hover = true\"\n            @focusout=\"hover = false\"\n            @mouseenter=\"hover = true\"\n            @mouseleave=\"hover = false\"\n            @click=\"onClick\"\n          >\n            <dt-item-layout class=\"d-recipe-feed-item-pill__layout\">\n              <slot name=\"title\">\n                <span class=\"d-recipe-feed-item-pill__title\">{{ title }}</span>\n              </slot>\n              <template #left>\n                <div\n                  class=\"d-recipe-feed-item-pill__icon\"\n                  data-qa=\"dt-recipe-feed-item-pill__icon\"\n                >\n                  <component\n                    :is=\"toggleIcon\"\n                    v-if=\"showChevronIcon\"\n                    size=\"300\"\n                  />\n                  <!-- @slot Slot for left icon, icon-size slot prop defaults to '300' -->\n                  <slot\n                    v-else\n                    name=\"leftIcon\"\n                    :icon-size=\"'300'\"\n                  />\n                </div>\n              </template>\n              <template #subtitle>\n                <slot name=\"subtitle\" />\n              </template>\n              <template #bottom>\n                <slot name=\"bottom\" />\n              </template>\n              <template #right>\n                <slot name=\"right\" />\n              </template>\n            </dt-item-layout>\n          </button>\n        </template>\n        <template #content>\n          <div class=\"d-recipe-feed-item-pill__content\">\n            <slot name=\"content\" />\n          </div>\n        </template>\n      </dt-collapsible>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { FEED_ITEM_PILL_BORDER_COLORS } from './feed_item_pill_constants';\nimport { DtItemLayout } from '@/components/item_layout';\nimport { DtCollapsible } from '@/components/collapsible';\nimport { DtIconChevronDown, DtIconChevronRight } from '@dialpad/dialtone-icons/vue2';\n\nexport default {\n  name: 'DtRecipeFeedItemPill',\n\n  components: { DtItemLayout, DtCollapsible },\n\n  props: {\n    /**\n     * Bolded primary text\n     */\n    title: {\n      type: String,\n      default: () => '',\n    },\n\n    /**\n     * Additional styling around the pill\n     */\n    wrapperClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional styling for the pill\n     */\n    buttonClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Aria label for feed pill\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Sets whether the pill can be toggled (Icon changing on hover, expanding and collapsing, pointer)\n     */\n    toggleable: {\n      type: Boolean,\n      default: () => true,\n    },\n\n    defaultToggled: {\n      type: Boolean,\n      default: () => false,\n    },\n\n    /**\n     * Callbox border color\n     * @values default, ai, critical\n     */\n    borderColor: {\n      type: String,\n      default: 'default',\n      validator: (color) => Object.keys(FEED_ITEM_PILL_BORDER_COLORS).includes(color),\n    },\n  },\n\n  data () {\n    return {\n      hover: false,\n      expanded: this.defaultToggled,\n    };\n  },\n\n  computed: {\n    toggleIcon () {\n      return this.expanded ? DtIconChevronDown : DtIconChevronRight;\n    },\n\n    showChevronIcon () {\n      return this.toggleable && this.hover;\n    },\n\n    toggleableClass () {\n      return this.toggleable ? 'd-c-pointer' : '';\n    },\n\n    borderClass () {\n      return FEED_ITEM_PILL_BORDER_COLORS[this.borderColor];\n    },\n  },\n\n  methods: {\n    onClick () {\n      if (!this.toggleable) return;\n\n      this.expanded = !this.expanded;\n    },\n  },\n};\n</script>\n"],"names":[],"mappings":";;;;;AAiEA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA,EAAA,cAAA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,IACA;AAAA,IAEA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,UAAA,OAAA,KAAA,4BAAA,EAAA,SAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,aAAA;AACA,aAAA,KAAA,WAAA,oBAAA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAA,KAAA,cAAA,KAAA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAA,KAAA,aAAA,gBAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,aAAA,6BAAA,KAAA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,UAAA;AACA,UAAA,CAAA,KAAA,WAAA;AAEA,WAAA,WAAA,CAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue2/recipes/conversation_view/feed_item_pill/feed_item_pill_constants.cjs

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const FEED_ITEM_PILL_BORDER_COLORS = {
-  default: "dt-recipe-feed-item-pill__border-default",
-  ai: "dt-recipe-feed-item-pill__border-ai",
-  critical: "dt-recipe-feed-item-pill__border-critical"
+  default: "d-recipe-feed-item-pill__border--default",
+  ai: "d-recipe-feed-item-pill__border--ai",
+  critical: "d-recipe-feed-item-pill__border--critical"
 };
 exports.FEED_ITEM_PILL_BORDER_COLORS = FEED_ITEM_PILL_BORDER_COLORS;
 //# sourceMappingURL=feed_item_pill_constants.cjs.map

package/dist/vue2/recipes/conversation_view/feed_item_pill/feed_item_pill_constants.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"feed_item_pill_constants.cjs","sources":["../../../../recipes/conversation_view/feed_item_pill/feed_item_pill_constants.js"],"sourcesContent":["export const FEED_ITEM_PILL_BORDER_COLORS = {\n  default: 'dt-recipe-feed-item-pill__border-default',\n  ai: 'dt-recipe-feed-item-pill__border-ai',\n  critical: 'dt-recipe-feed-item-pill__border-critical',\n};\n\nexport default {\n  FEED_ITEM_PILL_BORDER_COLORS,\n};\n"],"names":[],"mappings":";;AAAY,MAAC,+BAA+B;AAAA,EAC1C,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,UAAU;AACZ;;"}
+{"version":3,"file":"feed_item_pill_constants.cjs","sources":["../../../../recipes/conversation_view/feed_item_pill/feed_item_pill_constants.js"],"sourcesContent":["export const FEED_ITEM_PILL_BORDER_COLORS = {\n  default: 'd-recipe-feed-item-pill__border--default',\n  ai: 'd-recipe-feed-item-pill__border--ai',\n  critical: 'd-recipe-feed-item-pill__border--critical',\n};\n\nexport default {\n  FEED_ITEM_PILL_BORDER_COLORS,\n};\n"],"names":[],"mappings":";;AAAY,MAAC,+BAA+B;AAAA,EAC1C,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,UAAU;AACZ;;"}

package/dist/vue2/recipes/conversation_view/feed_item_pill/feed_item_pill_constants.js

@@ -1,7 +1,7 @@
 const FEED_ITEM_PILL_BORDER_COLORS = {
-  default: "dt-recipe-feed-item-pill__border-default",
-  ai: "dt-recipe-feed-item-pill__border-ai",
-  critical: "dt-recipe-feed-item-pill__border-critical"
+  default: "d-recipe-feed-item-pill__border--default",
+  ai: "d-recipe-feed-item-pill__border--ai",
+  critical: "d-recipe-feed-item-pill__border--critical"
 };
 export {
   FEED_ITEM_PILL_BORDER_COLORS

package/dist/vue2/recipes/conversation_view/feed_item_pill/feed_item_pill_constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"feed_item_pill_constants.js","sources":["../../../../recipes/conversation_view/feed_item_pill/feed_item_pill_constants.js"],"sourcesContent":["export const FEED_ITEM_PILL_BORDER_COLORS = {\n  default: 'dt-recipe-feed-item-pill__border-default',\n  ai: 'dt-recipe-feed-item-pill__border-ai',\n  critical: 'dt-recipe-feed-item-pill__border-critical',\n};\n\nexport default {\n  FEED_ITEM_PILL_BORDER_COLORS,\n};\n"],"names":[],"mappings":"AAAY,MAAC,+BAA+B;AAAA,EAC1C,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,UAAU;AACZ;"}
+{"version":3,"file":"feed_item_pill_constants.js","sources":["../../../../recipes/conversation_view/feed_item_pill/feed_item_pill_constants.js"],"sourcesContent":["export const FEED_ITEM_PILL_BORDER_COLORS = {\n  default: 'd-recipe-feed-item-pill__border--default',\n  ai: 'd-recipe-feed-item-pill__border--ai',\n  critical: 'd-recipe-feed-item-pill__border--critical',\n};\n\nexport default {\n  FEED_ITEM_PILL_BORDER_COLORS,\n};\n"],"names":[],"mappings":"AAAY,MAAC,+BAA+B;AAAA,EAC1C,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,UAAU;AACZ;"}

package/dist/vue2/recipes/conversation_view/feed_item_row/feed_item_row.vue.cjs

@@ -3,7 +3,6 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const feed_item_row_constants = require("./feed_item_row_constants.cjs");
 const modal = require("../../../common/mixins/modal.cjs");
 const vue2 = require("@dialpad/dialtone-icons/vue2");
-;/* empty css                     */
 const _pluginVue2_normalizer = require("../../../_virtual/_plugin-vue2_normalizer.cjs");
 const avatar = require("../../../components/avatar/avatar.vue.cjs");
 const lazy_show = require("../../../components/lazy_show/lazy_show.vue.cjs");
@@ -145,9 +144,9 @@ const _sfc_main = {
     },
     listItemClasses() {
       return [
-        "dt-feed-item-row",
-        { "dt-feed-item-row--active": this.isActive && this.state === feed_item_row_constants.DEFAULT_FEED_ROW_STATE },
-        { "dt-feed-item-row--state-transition": this.transitionActive },
+        "d-recipe-feed-item-row",
+        { "d-recipe-feed-item-row--active": this.isActive && this.state === feed_item_row_constants.DEFAULT_FEED_ROW_STATE },
+        { "d-recipe-feed-item-row__state-transition": this.transitionActive },
         feed_item_row_constants.FEED_ROW_STATE_BACKGROUND_COLOR[this.state]
       ];
     }
@@ -181,26 +180,23 @@ const _sfc_main = {
 };
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c("dt-list-item", _vm._g(_vm._b({ ref: "FeedItemRef", class: ["dt-feed-item-row", _vm.listItemClasses], attrs: { "navigation-type": "none", "data-qa": "dt-feed-item-row" }, scopedSlots: _vm._u([{ key: "left", fn: function() {
-    return [_vm.showHeader ? _c("div", { staticClass: "dt-feed-item-row__avatar-container" }, [_vm._t("avatar", function() {
+  return _c("dt-list-item", _vm._g(_vm._b({ ref: "FeedItemRef", class: ["d-recipe-feed-item-row", _vm.listItemClasses], attrs: { "navigation-type": "none", "data-qa": "dt-recipe-feed-item-row" }, scopedSlots: _vm._u([{ key: "left", fn: function() {
+    return [_vm.showHeader ? _c("div", { staticClass: "d-recipe-feed-item-row__avatar-container" }, [_vm._t("avatar", function() {
       return [_c("dt-avatar", { attrs: { "full-name": _vm.displayName, "image-src": _vm.avatarImageUrl, "image-alt": "", "seed": _vm.avatarSeed }, scopedSlots: _vm._u([_vm.noInitials ? { key: "icon", fn: function({ iconSize }) {
         return [_c("dt-icon-user", { attrs: { "size": iconSize } })];
       } } : null], null, true) })];
-    })], 2) : _vm._e(), !_vm.showHeader ? _c("span", { directives: [{ name: "show", rawName: "v-show", value: _vm.isActive, expression: "isActive" }], staticClass: "dt-feed-item-row__left-time", attrs: { "data-qa": "dt-feed-item-row--left-time" } }, [_vm._v(" " + _vm._s(_vm.shortTime) + " ")]) : _vm._e()];
+    })], 2) : _vm._e(), !_vm.showHeader ? _c("span", { directives: [{ name: "show", rawName: "v-show", value: _vm.isActive, expression: "isActive" }], staticClass: "d-recipe-feed-item-row__left-time", attrs: { "data-qa": "dt-recipe-feed-item-row--left-time" } }, [_vm._v(" " + _vm._s(_vm.shortTime) + " ")]) : _vm._e()];
   }, proxy: true }, { key: "bottom", fn: function() {
-    return [_vm.$slots.reactions ? _c("div", { staticClass: "dt-feed-item-row__reactions", attrs: { "data-qa": "dt-feed-item-row--reactions" } }, [_vm._t("reactions")], 2) : _vm._e(), _vm.$slots.threading ? _c("div", { staticClass: "dt-feed-item-row__threading" }, [_vm._t("threading")], 2) : _vm._e()];
+    return [_vm.$slots.reactions ? _c("div", { staticClass: "d-recipe-feed-item-row__reactions", attrs: { "data-qa": "dt-recipe-feed-item-row--reactions" } }, [_vm._t("reactions")], 2) : _vm._e(), _vm.$slots.threading ? _c("div", { staticClass: "d-recipe-feed-item-row__threading" }, [_vm._t("threading")], 2) : _vm._e()];
   }, proxy: true }, { key: "right", fn: function() {
-    return [_c("div", { directives: [{ name: "show", rawName: "v-show", value: _vm.isActive, expression: "isActive" }], staticClass: "dt-feed-item-row__menu", attrs: { "data-qa": "dt-feed-item-row--menu" } }, [_c("dt-lazy-show", { attrs: { "appear": true, "transition": "fade", "show": _vm.isActive } }, [_vm._t("menu")], 2)], 1)];
-  }, proxy: true }], null, true) }, "dt-list-item", _vm.$attrs, false), _vm.feedListeners), [_c("article", { staticClass: "dt-feed-item-row__content" }, [_vm.showHeader ? _c("div", { staticClass: "dt-feed-item-row__header", attrs: { "data-qa": "dt-feed-item-row--header" } }, [_c("p", { staticClass: "dt-feed-item-row__header__name" }, [_vm._v(" " + _vm._s(_vm.displayName) + " ")]), _c("time", { staticClass: "dt-feed-item-row__header__time" }, [_vm._v(" " + _vm._s(_vm.time) + " ")]), _vm.labelText ? _c("dt-badge", { attrs: { "text": _vm.labelText } }) : _vm._e()], 1) : _vm._e(), _c("span", { attrs: { "data-qa": "dt-feed-item-row--content" } }, [_vm._t("default")], 2), _vm.$slots.attachment ? _c("div", { staticClass: "dt-feed-item-row__attachment", attrs: { "data-qa": "dt-feed-item-row--attachment" } }, [_vm._t("attachment")], 2) : _vm._e()])]);
+    return [_c("div", { directives: [{ name: "show", rawName: "v-show", value: _vm.isActive, expression: "isActive" }], staticClass: "d-recipe-feed-item-row__menu", attrs: { "data-qa": "dt-recipe-feed-item-row--menu" } }, [_c("dt-lazy-show", { attrs: { "appear": true, "transition": "fade", "show": _vm.isActive } }, [_vm._t("menu")], 2)], 1)];
+  }, proxy: true }], null, true) }, "dt-list-item", _vm.$attrs, false), _vm.feedListeners), [_c("article", { staticClass: "d-recipe-feed-item-row__content" }, [_vm.showHeader ? _c("div", { staticClass: "d-recipe-feed-item-row__header", attrs: { "data-qa": "dt-recipe-feed-item-row--header" } }, [_c("p", { staticClass: "d-recipe-feed-item-row__header-name" }, [_vm._v(" " + _vm._s(_vm.displayName) + " ")]), _c("time", { staticClass: "d-recipe-feed-item-row__header-time" }, [_vm._v(" " + _vm._s(_vm.time) + " ")]), _vm.labelText ? _c("dt-badge", { attrs: { "text": _vm.labelText } }) : _vm._e()], 1) : _vm._e(), _c("span", { attrs: { "data-qa": "dt-recipe-feed-item-row--content" } }, [_vm._t("default")], 2), _vm.$slots.attachment ? _c("div", { staticClass: "d-recipe-feed-item-row__attachment", attrs: { "data-qa": "dt-recipe-feed-item-row--attachment" } }, [_vm._t("attachment")], 2) : _vm._e()])]);
 };
 var _sfc_staticRenderFns = [];
 var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.default(
   _sfc_main,
   _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  "72f5c20c"
+  _sfc_staticRenderFns
 );
 const feed_item_row = __component__.exports;
 exports.default = feed_item_row;

package/dist/vue2/recipes/conversation_view/feed_item_row/feed_item_row.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"feed_item_row.vue.cjs","sources":["../../../../recipes/conversation_view/feed_item_row/feed_item_row.vue"],"sourcesContent":["<template>\n  <dt-list-item\n    ref=\"FeedItemRef\"\n    navigation-type=\"none\"\n    v-bind=\"$attrs\"\n    :class=\"['dt-feed-item-row', listItemClasses]\"\n    data-qa=\"dt-feed-item-row\"\n    v-on=\"feedListeners\"\n  >\n    <!-- Avatar or time -->\n    <template #left>\n      <div\n        v-if=\"showHeader\"\n        class=\"dt-feed-item-row__avatar-container\"\n      >\n        <!-- @slot Slot to contain the avatar, overrides avatar props. -->\n        <slot\n          name=\"avatar\"\n        >\n          <dt-avatar\n            :full-name=\"displayName\"\n            :image-src=\"avatarImageUrl\"\n            image-alt=\"\"\n            :seed=\"avatarSeed\"\n          >\n            <template\n              v-if=\"noInitials\"\n              #icon=\"{ iconSize }\"\n            >\n              <dt-icon-user\n                :size=\"iconSize\"\n              />\n            </template>\n          </dt-avatar>\n        </slot>\n      </div>\n      <!-- show time instead of avatar when headers not present -->\n      <span\n        v-if=\"!showHeader\"\n        v-show=\"isActive\"\n        class=\"dt-feed-item-row__left-time\"\n        data-qa=\"dt-feed-item-row--left-time\"\n      >\n        {{ shortTime }}\n      </span>\n    </template>\n\n    <article class=\"dt-feed-item-row__content\">\n      <!-- Feed Item -->\n      <div\n        v-if=\"showHeader\"\n        data-qa=\"dt-feed-item-row--header\"\n        class=\"dt-feed-item-row__header\"\n      >\n        <p class=\"dt-feed-item-row__header__name\">\n          {{ displayName }}\n        </p>\n        <time\n          class=\"dt-feed-item-row__header__time\"\n        >\n          {{ time }}\n        </time>\n        <dt-badge\n          v-if=\"labelText\"\n          :text=\"labelText\"\n        />\n      </div>\n      <!-- @slot Default content slot for feed item row -->\n      <span\n        data-qa=\"dt-feed-item-row--content\"\n      >\n        <slot />\n      </span>\n      <div\n        v-if=\"$slots.attachment\"\n        data-qa=\"dt-feed-item-row--attachment\"\n        class=\"dt-feed-item-row__attachment\"\n      >\n        <slot name=\"attachment\" />\n      </div>\n    </article>\n\n    <template #bottom>\n      <div\n        v-if=\"$slots.reactions\"\n        class=\"dt-feed-item-row__reactions\"\n        data-qa=\"dt-feed-item-row--reactions\"\n      >\n        <!-- @slot Slot for reactions row component -->\n        <slot name=\"reactions\" />\n      </div>\n      <div\n        v-if=\"$slots.threading\"\n        class=\"dt-feed-item-row__threading\"\n      >\n        <!-- @slot Slot for threading row component -->\n        <slot name=\"threading\" />\n      </div>\n    </template>\n\n    <!-- Action menu -->\n    <template #right>\n      <div\n        v-show=\"isActive\"\n        data-qa=\"dt-feed-item-row--menu\"\n        class=\"dt-feed-item-row__menu\"\n      >\n        <dt-lazy-show\n          :appear=\"true\"\n          transition=\"fade\"\n          :show=\"isActive\"\n        >\n          <!-- @slot Slot for actions hover menu component -->\n          <slot name=\"menu\" />\n        </dt-lazy-show>\n      </div>\n    </template>\n  </dt-list-item>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport { DEFAULT_FEED_ROW_STATE, FEED_ROW_STATE_BACKGROUND_COLOR } from './feed_item_row_constants.js';\nimport { DtAvatar } from '@/components/avatar';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport { DtListItem } from '@/components/list_item';\nimport { DtBadge } from '@/components/badge';\nimport Modal from '@/common/mixins/modal';\nimport { DtIconUser } from '@dialpad/dialtone-icons/vue2';\n\nexport default {\n  name: 'DtRecipeFeedItemRow',\n\n  components: {\n    DtAvatar,\n    DtLazyShow,\n    DtListItem,\n    DtBadge,\n    DtIconUser,\n  },\n\n  mixins: [Modal],\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.\n     */\n    avatarSeed: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Show avatar, show header text or dont show left time and vice versa\n     */\n    showHeader: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Optional avatar image url.\n     * If not provided it will use extracted initials from displayName.\n     */\n    avatarImageUrl: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The display name of the sender\n     */\n    displayName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Initials will never be shown. Instead it will show a \"User\" icon.\n     */\n    noInitials: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * time string displayed as is.\n     * Shown on the header when showHeader is true\n     */\n    time: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * short time string without AM/PM displayed as is.\n     * Shown on the left of feed item when showHeader is false and isActive is true\n     */\n    shortTime: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * A label displayed next to the displayName. Will not show if empty.\n     */\n    labelText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * displays a darkened background on the row.\n     */\n    isActive: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * state for the feed item row. Can be normal, searched & error\n     */\n    state: {\n      type: String,\n      default: DEFAULT_FEED_ROW_STATE,\n      validator: state => Object.keys(FEED_ROW_STATE_BACKGROUND_COLOR).includes(state),\n    },\n  },\n\n  emits: [\n    /**\n     * Fires when hovered over feed row\n     *\n     * @event hover\n     * @type {Boolean}\n     */\n    'hover',\n\n    /**\n     * Fires when focused over feed row\n     *\n     * @event focus\n     * @type {Boolean}\n     */\n    'focus',\n\n    /**\n     * Key down event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n  ],\n\n  data () {\n    return {\n      transitionActive: false,\n    };\n  },\n\n  computed: {\n    feedListeners () {\n      return {\n        ...this.$listeners,\n        mouseenter: () => this.setHover(true),\n        mouseleave: () => this.setHover(false),\n        focusin: () => this.setFocus(true),\n        focusout: () => this.setFocus(false),\n        transitionend: () => this.transitionComplete(),\n        keydown: event => {\n          switch (event.code) {\n            case 'Tab':\n              this.trapFocus(event);\n              break;\n          }\n          this.$emit('keydown', event);\n        },\n      };\n    },\n\n    listItemClasses () {\n      return [\n        'dt-feed-item-row',\n        { 'dt-feed-item-row--active': this.isActive && this.state === DEFAULT_FEED_ROW_STATE },\n        { 'dt-feed-item-row--state-transition': this.transitionActive },\n        FEED_ROW_STATE_BACKGROUND_COLOR[this.state],\n\n      ];\n    },\n  },\n\n  watch: {\n    state: {\n      immediate: true,\n      handler: function (newState, oldState) {\n        if (newState !== DEFAULT_FEED_ROW_STATE) {\n          this.transitionActive = true;\n        }\n      },\n    },\n  },\n\n  methods: {\n    transitionComplete () {\n      if (this.state === DEFAULT_FEED_ROW_STATE) {\n        this.transitionActive = false;\n      }\n    },\n\n    trapFocus (e) {\n      this.focusTrappedTabPress(e);\n    },\n\n    setFocus (bool) {\n      this.$emit('focus', bool);\n    },\n\n    setHover (bool) {\n      this.$emit('hover', bool);\n    },\n  },\n};\n</script>\n\n<style lang=\"less\" scoped>\n.dt-feed-item-row {\n\n  width: var(--dt-size-100-percent);\n  box-sizing: border-box;\n  position: relative;\n  padding: var(--dt-space-300) var(--dt-space-500);\n\n  &:focus-visible {\n    box-shadow: var(--dt-shadow-focus-inset);\n  }\n\n  &--state-searched {\n    background-color: var(--dt-color-surface-warning-subtle);\n  }\n\n  &--state-error {\n    background-color: var(--dt-color-surface-critical-subtle);\n  }\n\n  &--active {\n    background-color: var(--dt-color-surface-secondary-opaque);\n  }\n\n  &--state-transition {\n    transition-duration: 2s;\n    transition-delay: 0s;\n    transition-timing-function: var(--ttf-in-out);\n    transition-property: background-color;\n  }\n\n  &__avatar-container {\n    padding-top: var(--dt-space-300);\n    padding-bottom: var(--dt-space-300);\n  }\n\n  &__content {\n    padding-left: var(--dt-space-300);\n  }\n\n  &__attachment {\n    padding-top: var(--dt-space-200);\n    padding-bottom: var(--dt-space-300);\n\n    &:deep(.dt-feed-item-row__image)  {\n      border: var(--dt-color-border-subtle) solid var(--dt-size-border-100);\n      border-radius: var(--dt-size-radius-400);\n      display: block;\n      max-width: 30rem;\n      max-height: 30rem;\n      min-width: 5.6rem;\n      min-height: 5.6rem;\n    }\n\n    &:deep(.dt-feed-item-row__video)  {\n      display: block;\n      height: 25.0rem;\n    }\n  }\n\n  &__header {\n    display: flex;\n    align-items: baseline;\n    flex-wrap: wrap;\n    gap: var(--dt-space-300);\n    font-size: var(--dt-font-size-200);\n    line-height: var(--dt-font-line-height-300);\n\n    &__name {\n      font-weight: var(--dt-font-weight-bold);\n    }\n\n    &__time {\n      font-size: var(--dt-font-size-100);\n      color: var(--dt-color-foreground-tertiary);\n      flex-shrink: 0;\n    }\n  }\n\n  &__reactions {\n    display: flex;\n    flex-wrap: wrap;\n    padding-top: var(--dt-space-200);\n    padding-bottom: var(--dt-space-200);\n    padding-left: var(--dt-space-300);\n  }\n\n  &__threading {\n    padding-top: var(--dt-space-200);\n    padding-bottom: var(--dt-space-200);\n  }\n\n  &__left-time {\n    color: var(--dt-color-foreground-tertiary);\n    font-size: var(--dt-font-size-100);\n    font-weight: var(--dt-font-weight-normal);\n    vertical-align: middle;\n    white-space: nowrap;\n  }\n\n  &__menu {\n    position: absolute;\n    top: var(--dt-space-550-negative);\n    right: var(--dt-space-450);\n  }\n\n  &:deep(> .d-item-layout) {\n    font: var(--dt-typography-body-md-compact);\n    min-height: initial;\n    padding: 0px;\n  }\n\n  &:deep(> .d-item-layout > .d-item-layout--left) {\n    align-self: flex-start;\n    text-align: end;\n    display: block;\n    padding-right: var(--dt-space-300);\n    padding-left: var(--dt-space-0);\n    // min-width = avatar width + padding\n    min-width: calc(var(--dt-space-600) + var(--dt-space-300));\n  }\n\n  &:deep(> .d-item-layout > .d-item-layout--right) {\n    padding: 0;\n    min-width: initial;\n  }\n\n  &:deep(> .d-item-layout > .d-item-layout--content > .d-item-layout--bottom) {\n    display: flex;\n    flex-direction: column;\n    margin-top: 0;\n  }\n}\n</style>\n"],"names":["DtAvatar","DtLazyShow","DtListItem","DtBadge","DtIconUser","Modal","DEFAULT_FEED_ROW_STATE","FEED_ROW_STATE_BACKGROUND_COLOR"],"mappings":"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"}
+{"version":3,"file":"feed_item_row.vue.cjs","sources":["../../../../recipes/conversation_view/feed_item_row/feed_item_row.vue"],"sourcesContent":["<template>\n  <dt-list-item\n    ref=\"FeedItemRef\"\n    navigation-type=\"none\"\n    v-bind=\"$attrs\"\n    :class=\"['d-recipe-feed-item-row', listItemClasses]\"\n    data-qa=\"dt-recipe-feed-item-row\"\n    v-on=\"feedListeners\"\n  >\n    <!-- Avatar or time -->\n    <template #left>\n      <div\n        v-if=\"showHeader\"\n        class=\"d-recipe-feed-item-row__avatar-container\"\n      >\n        <!-- @slot Slot to contain the avatar, overrides avatar props. -->\n        <slot\n          name=\"avatar\"\n        >\n          <dt-avatar\n            :full-name=\"displayName\"\n            :image-src=\"avatarImageUrl\"\n            image-alt=\"\"\n            :seed=\"avatarSeed\"\n          >\n            <template\n              v-if=\"noInitials\"\n              #icon=\"{ iconSize }\"\n            >\n              <dt-icon-user\n                :size=\"iconSize\"\n              />\n            </template>\n          </dt-avatar>\n        </slot>\n      </div>\n      <!-- show time instead of avatar when headers not present -->\n      <span\n        v-if=\"!showHeader\"\n        v-show=\"isActive\"\n        class=\"d-recipe-feed-item-row__left-time\"\n        data-qa=\"dt-recipe-feed-item-row--left-time\"\n      >\n        {{ shortTime }}\n      </span>\n    </template>\n\n    <article class=\"d-recipe-feed-item-row__content\">\n      <!-- Feed Item -->\n      <div\n        v-if=\"showHeader\"\n        data-qa=\"dt-recipe-feed-item-row--header\"\n        class=\"d-recipe-feed-item-row__header\"\n      >\n        <p class=\"d-recipe-feed-item-row__header-name\">\n          {{ displayName }}\n        </p>\n        <time\n          class=\"d-recipe-feed-item-row__header-time\"\n        >\n          {{ time }}\n        </time>\n        <dt-badge\n          v-if=\"labelText\"\n          :text=\"labelText\"\n        />\n      </div>\n      <!-- @slot Default content slot for feed item row -->\n      <span\n        data-qa=\"dt-recipe-feed-item-row--content\"\n      >\n        <slot />\n      </span>\n      <div\n        v-if=\"$slots.attachment\"\n        data-qa=\"dt-recipe-feed-item-row--attachment\"\n        class=\"d-recipe-feed-item-row__attachment\"\n      >\n        <slot name=\"attachment\" />\n      </div>\n    </article>\n\n    <template #bottom>\n      <div\n        v-if=\"$slots.reactions\"\n        class=\"d-recipe-feed-item-row__reactions\"\n        data-qa=\"dt-recipe-feed-item-row--reactions\"\n      >\n        <!-- @slot Slot for reactions row component -->\n        <slot name=\"reactions\" />\n      </div>\n      <div\n        v-if=\"$slots.threading\"\n        class=\"d-recipe-feed-item-row__threading\"\n      >\n        <!-- @slot Slot for threading row component -->\n        <slot name=\"threading\" />\n      </div>\n    </template>\n\n    <!-- Action menu -->\n    <template #right>\n      <div\n        v-show=\"isActive\"\n        data-qa=\"dt-recipe-feed-item-row--menu\"\n        class=\"d-recipe-feed-item-row__menu\"\n      >\n        <dt-lazy-show\n          :appear=\"true\"\n          transition=\"fade\"\n          :show=\"isActive\"\n        >\n          <!-- @slot Slot for actions hover menu component -->\n          <slot name=\"menu\" />\n        </dt-lazy-show>\n      </div>\n    </template>\n  </dt-list-item>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport { DEFAULT_FEED_ROW_STATE, FEED_ROW_STATE_BACKGROUND_COLOR } from './feed_item_row_constants.js';\nimport { DtAvatar } from '@/components/avatar';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport { DtListItem } from '@/components/list_item';\nimport { DtBadge } from '@/components/badge';\nimport Modal from '@/common/mixins/modal';\nimport { DtIconUser } from '@dialpad/dialtone-icons/vue2';\n\nexport default {\n  name: 'DtRecipeFeedItemRow',\n\n  components: {\n    DtAvatar,\n    DtLazyShow,\n    DtListItem,\n    DtBadge,\n    DtIconUser,\n  },\n\n  mixins: [Modal],\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.\n     */\n    avatarSeed: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Show avatar, show header text or dont show left time and vice versa\n     */\n    showHeader: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Optional avatar image url.\n     * If not provided it will use extracted initials from displayName.\n     */\n    avatarImageUrl: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The display name of the sender\n     */\n    displayName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Initials will never be shown. Instead it will show a \"User\" icon.\n     */\n    noInitials: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * time string displayed as is.\n     * Shown on the header when showHeader is true\n     */\n    time: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * short time string without AM/PM displayed as is.\n     * Shown on the left of feed item when showHeader is false and isActive is true\n     */\n    shortTime: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * A label displayed next to the displayName. Will not show if empty.\n     */\n    labelText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * displays a darkened background on the row.\n     */\n    isActive: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * state for the feed item row. Can be normal, searched & error\n     */\n    state: {\n      type: String,\n      default: DEFAULT_FEED_ROW_STATE,\n      validator: state => Object.keys(FEED_ROW_STATE_BACKGROUND_COLOR).includes(state),\n    },\n  },\n\n  emits: [\n    /**\n     * Fires when hovered over feed row\n     *\n     * @event hover\n     * @type {Boolean}\n     */\n    'hover',\n\n    /**\n     * Fires when focused over feed row\n     *\n     * @event focus\n     * @type {Boolean}\n     */\n    'focus',\n\n    /**\n     * Key down event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n  ],\n\n  data () {\n    return {\n      transitionActive: false,\n    };\n  },\n\n  computed: {\n    feedListeners () {\n      return {\n        ...this.$listeners,\n        mouseenter: () => this.setHover(true),\n        mouseleave: () => this.setHover(false),\n        focusin: () => this.setFocus(true),\n        focusout: () => this.setFocus(false),\n        transitionend: () => this.transitionComplete(),\n        keydown: event => {\n          switch (event.code) {\n            case 'Tab':\n              this.trapFocus(event);\n              break;\n          }\n          this.$emit('keydown', event);\n        },\n      };\n    },\n\n    listItemClasses () {\n      return [\n        'd-recipe-feed-item-row',\n        { 'd-recipe-feed-item-row--active': this.isActive && this.state === DEFAULT_FEED_ROW_STATE },\n        { 'd-recipe-feed-item-row__state-transition': this.transitionActive },\n        FEED_ROW_STATE_BACKGROUND_COLOR[this.state],\n\n      ];\n    },\n  },\n\n  watch: {\n    state: {\n      immediate: true,\n      handler: function (newState, oldState) {\n        if (newState !== DEFAULT_FEED_ROW_STATE) {\n          this.transitionActive = true;\n        }\n      },\n    },\n  },\n\n  methods: {\n    transitionComplete () {\n      if (this.state === DEFAULT_FEED_ROW_STATE) {\n        this.transitionActive = false;\n      }\n    },\n\n    trapFocus (e) {\n      this.focusTrappedTabPress(e);\n    },\n\n    setFocus (bool) {\n      this.$emit('focus', bool);\n    },\n\n    setHover (bool) {\n      this.$emit('hover', bool);\n    },\n  },\n};\n</script>\n"],"names":["DtAvatar","DtLazyShow","DtListItem","DtBadge","DtIconUser","Modal","DEFAULT_FEED_ROW_STATE","FEED_ROW_STATE_BACKGROUND_COLOR"],"mappings":";;;;;;;;;;AAkIA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAA,OAAA;AAAA,IACA,YAAAC,UAAA;AAAA,IACA,YAAAC,UAAA;AAAA,IACA,SAAAC,MAAA;AAAA,IACA,YAAAC,KAAA;AAAA,EACA;AAAA,EAEA,QAAA,CAAAC,MAAAA,OAAA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAAC,wBAAA;AAAA,MACA,WAAA,WAAA,OAAA,KAAAC,wBAAAA,+BAAA,EAAA,SAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,kBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,gBAAA;AACA,aAAA;AAAA,QACA,GAAA,KAAA;AAAA,QACA,YAAA,MAAA,KAAA,SAAA,IAAA;AAAA,QACA,YAAA,MAAA,KAAA,SAAA,KAAA;AAAA,QACA,SAAA,MAAA,KAAA,SAAA,IAAA;AAAA,QACA,UAAA,MAAA,KAAA,SAAA,KAAA;AAAA,QACA,eAAA,MAAA,KAAA,mBAAA;AAAA,QACA,SAAA,WAAA;AACA,kBAAA,MAAA,MAAA;AAAA,YACA,KAAA;AACA,mBAAA,UAAA,KAAA;AACA;AAAA,UACA;AACA,eAAA,MAAA,WAAA,KAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAA;AAAA,QACA;AAAA,QACA,EAAA,kCAAA,KAAA,YAAA,KAAA,UAAAD,wBAAAA,uBAAA;AAAA,QACA,EAAA,4CAAA,KAAA,iBAAA;AAAA,QACAC,wBAAA,gCAAA,KAAA,KAAA;AAAA,MAEA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,OAAA;AAAA,MACA,WAAA;AAAA,MACA,SAAA,SAAA,UAAA,UAAA;AACA,YAAA,aAAAD,wBAAAA,wBAAA;AACA,eAAA,mBAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,qBAAA;AACA,UAAA,KAAA,UAAAA,gDAAA;AACA,aAAA,mBAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,UAAA,GAAA;AACA,WAAA,qBAAA,CAAA;AAAA,IACA;AAAA,IAEA,SAAA,MAAA;AACA,WAAA,MAAA,SAAA,IAAA;AAAA,IACA;AAAA,IAEA,SAAA,MAAA;AACA,WAAA,MAAA,SAAA,IAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue2/recipes/conversation_view/feed_item_row/feed_item_row.vue.js

@@ -1,7 +1,6 @@
 import { DEFAULT_FEED_ROW_STATE, FEED_ROW_STATE_BACKGROUND_COLOR } from "./feed_item_row_constants.js";
 import Modal from "../../../common/mixins/modal.js";
 import { DtIconUser } from "@dialpad/dialtone-icons/vue2";
-/* empty css                   */
 import normalizeComponent from "../../../_virtual/_plugin-vue2_normalizer.js";
 import DtAvatar from "../../../components/avatar/avatar.vue.js";
 import DtLazyShow from "../../../components/lazy_show/lazy_show.vue.js";
@@ -143,9 +142,9 @@ const _sfc_main = {
     },
     listItemClasses() {
       return [
-        "dt-feed-item-row",
-        { "dt-feed-item-row--active": this.isActive && this.state === DEFAULT_FEED_ROW_STATE },
-        { "dt-feed-item-row--state-transition": this.transitionActive },
+        "d-recipe-feed-item-row",
+        { "d-recipe-feed-item-row--active": this.isActive && this.state === DEFAULT_FEED_ROW_STATE },
+        { "d-recipe-feed-item-row__state-transition": this.transitionActive },
         FEED_ROW_STATE_BACKGROUND_COLOR[this.state]
       ];
     }
@@ -179,26 +178,23 @@ const _sfc_main = {
 };
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c("dt-list-item", _vm._g(_vm._b({ ref: "FeedItemRef", class: ["dt-feed-item-row", _vm.listItemClasses], attrs: { "navigation-type": "none", "data-qa": "dt-feed-item-row" }, scopedSlots: _vm._u([{ key: "left", fn: function() {
-    return [_vm.showHeader ? _c("div", { staticClass: "dt-feed-item-row__avatar-container" }, [_vm._t("avatar", function() {
+  return _c("dt-list-item", _vm._g(_vm._b({ ref: "FeedItemRef", class: ["d-recipe-feed-item-row", _vm.listItemClasses], attrs: { "navigation-type": "none", "data-qa": "dt-recipe-feed-item-row" }, scopedSlots: _vm._u([{ key: "left", fn: function() {
+    return [_vm.showHeader ? _c("div", { staticClass: "d-recipe-feed-item-row__avatar-container" }, [_vm._t("avatar", function() {
       return [_c("dt-avatar", { attrs: { "full-name": _vm.displayName, "image-src": _vm.avatarImageUrl, "image-alt": "", "seed": _vm.avatarSeed }, scopedSlots: _vm._u([_vm.noInitials ? { key: "icon", fn: function({ iconSize }) {
         return [_c("dt-icon-user", { attrs: { "size": iconSize } })];
       } } : null], null, true) })];
-    })], 2) : _vm._e(), !_vm.showHeader ? _c("span", { directives: [{ name: "show", rawName: "v-show", value: _vm.isActive, expression: "isActive" }], staticClass: "dt-feed-item-row__left-time", attrs: { "data-qa": "dt-feed-item-row--left-time" } }, [_vm._v(" " + _vm._s(_vm.shortTime) + " ")]) : _vm._e()];
+    })], 2) : _vm._e(), !_vm.showHeader ? _c("span", { directives: [{ name: "show", rawName: "v-show", value: _vm.isActive, expression: "isActive" }], staticClass: "d-recipe-feed-item-row__left-time", attrs: { "data-qa": "dt-recipe-feed-item-row--left-time" } }, [_vm._v(" " + _vm._s(_vm.shortTime) + " ")]) : _vm._e()];
   }, proxy: true }, { key: "bottom", fn: function() {
-    return [_vm.$slots.reactions ? _c("div", { staticClass: "dt-feed-item-row__reactions", attrs: { "data-qa": "dt-feed-item-row--reactions" } }, [_vm._t("reactions")], 2) : _vm._e(), _vm.$slots.threading ? _c("div", { staticClass: "dt-feed-item-row__threading" }, [_vm._t("threading")], 2) : _vm._e()];
+    return [_vm.$slots.reactions ? _c("div", { staticClass: "d-recipe-feed-item-row__reactions", attrs: { "data-qa": "dt-recipe-feed-item-row--reactions" } }, [_vm._t("reactions")], 2) : _vm._e(), _vm.$slots.threading ? _c("div", { staticClass: "d-recipe-feed-item-row__threading" }, [_vm._t("threading")], 2) : _vm._e()];
   }, proxy: true }, { key: "right", fn: function() {
-    return [_c("div", { directives: [{ name: "show", rawName: "v-show", value: _vm.isActive, expression: "isActive" }], staticClass: "dt-feed-item-row__menu", attrs: { "data-qa": "dt-feed-item-row--menu" } }, [_c("dt-lazy-show", { attrs: { "appear": true, "transition": "fade", "show": _vm.isActive } }, [_vm._t("menu")], 2)], 1)];
-  }, proxy: true }], null, true) }, "dt-list-item", _vm.$attrs, false), _vm.feedListeners), [_c("article", { staticClass: "dt-feed-item-row__content" }, [_vm.showHeader ? _c("div", { staticClass: "dt-feed-item-row__header", attrs: { "data-qa": "dt-feed-item-row--header" } }, [_c("p", { staticClass: "dt-feed-item-row__header__name" }, [_vm._v(" " + _vm._s(_vm.displayName) + " ")]), _c("time", { staticClass: "dt-feed-item-row__header__time" }, [_vm._v(" " + _vm._s(_vm.time) + " ")]), _vm.labelText ? _c("dt-badge", { attrs: { "text": _vm.labelText } }) : _vm._e()], 1) : _vm._e(), _c("span", { attrs: { "data-qa": "dt-feed-item-row--content" } }, [_vm._t("default")], 2), _vm.$slots.attachment ? _c("div", { staticClass: "dt-feed-item-row__attachment", attrs: { "data-qa": "dt-feed-item-row--attachment" } }, [_vm._t("attachment")], 2) : _vm._e()])]);
+    return [_c("div", { directives: [{ name: "show", rawName: "v-show", value: _vm.isActive, expression: "isActive" }], staticClass: "d-recipe-feed-item-row__menu", attrs: { "data-qa": "dt-recipe-feed-item-row--menu" } }, [_c("dt-lazy-show", { attrs: { "appear": true, "transition": "fade", "show": _vm.isActive } }, [_vm._t("menu")], 2)], 1)];
+  }, proxy: true }], null, true) }, "dt-list-item", _vm.$attrs, false), _vm.feedListeners), [_c("article", { staticClass: "d-recipe-feed-item-row__content" }, [_vm.showHeader ? _c("div", { staticClass: "d-recipe-feed-item-row__header", attrs: { "data-qa": "dt-recipe-feed-item-row--header" } }, [_c("p", { staticClass: "d-recipe-feed-item-row__header-name" }, [_vm._v(" " + _vm._s(_vm.displayName) + " ")]), _c("time", { staticClass: "d-recipe-feed-item-row__header-time" }, [_vm._v(" " + _vm._s(_vm.time) + " ")]), _vm.labelText ? _c("dt-badge", { attrs: { "text": _vm.labelText } }) : _vm._e()], 1) : _vm._e(), _c("span", { attrs: { "data-qa": "dt-recipe-feed-item-row--content" } }, [_vm._t("default")], 2), _vm.$slots.attachment ? _c("div", { staticClass: "d-recipe-feed-item-row__attachment", attrs: { "data-qa": "dt-recipe-feed-item-row--attachment" } }, [_vm._t("attachment")], 2) : _vm._e()])]);
 };
 var _sfc_staticRenderFns = [];
 var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_main,
   _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  "72f5c20c"
+  _sfc_staticRenderFns
 );
 const feed_item_row = __component__.exports;
 export {

package/dist/vue2/recipes/conversation_view/feed_item_row/feed_item_row.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"feed_item_row.vue.js","sources":["../../../../recipes/conversation_view/feed_item_row/feed_item_row.vue"],"sourcesContent":["<template>\n  <dt-list-item\n    ref=\"FeedItemRef\"\n    navigation-type=\"none\"\n    v-bind=\"$attrs\"\n    :class=\"['dt-feed-item-row', listItemClasses]\"\n    data-qa=\"dt-feed-item-row\"\n    v-on=\"feedListeners\"\n  >\n    <!-- Avatar or time -->\n    <template #left>\n      <div\n        v-if=\"showHeader\"\n        class=\"dt-feed-item-row__avatar-container\"\n      >\n        <!-- @slot Slot to contain the avatar, overrides avatar props. -->\n        <slot\n          name=\"avatar\"\n        >\n          <dt-avatar\n            :full-name=\"displayName\"\n            :image-src=\"avatarImageUrl\"\n            image-alt=\"\"\n            :seed=\"avatarSeed\"\n          >\n            <template\n              v-if=\"noInitials\"\n              #icon=\"{ iconSize }\"\n            >\n              <dt-icon-user\n                :size=\"iconSize\"\n              />\n            </template>\n          </dt-avatar>\n        </slot>\n      </div>\n      <!-- show time instead of avatar when headers not present -->\n      <span\n        v-if=\"!showHeader\"\n        v-show=\"isActive\"\n        class=\"dt-feed-item-row__left-time\"\n        data-qa=\"dt-feed-item-row--left-time\"\n      >\n        {{ shortTime }}\n      </span>\n    </template>\n\n    <article class=\"dt-feed-item-row__content\">\n      <!-- Feed Item -->\n      <div\n        v-if=\"showHeader\"\n        data-qa=\"dt-feed-item-row--header\"\n        class=\"dt-feed-item-row__header\"\n      >\n        <p class=\"dt-feed-item-row__header__name\">\n          {{ displayName }}\n        </p>\n        <time\n          class=\"dt-feed-item-row__header__time\"\n        >\n          {{ time }}\n        </time>\n        <dt-badge\n          v-if=\"labelText\"\n          :text=\"labelText\"\n        />\n      </div>\n      <!-- @slot Default content slot for feed item row -->\n      <span\n        data-qa=\"dt-feed-item-row--content\"\n      >\n        <slot />\n      </span>\n      <div\n        v-if=\"$slots.attachment\"\n        data-qa=\"dt-feed-item-row--attachment\"\n        class=\"dt-feed-item-row__attachment\"\n      >\n        <slot name=\"attachment\" />\n      </div>\n    </article>\n\n    <template #bottom>\n      <div\n        v-if=\"$slots.reactions\"\n        class=\"dt-feed-item-row__reactions\"\n        data-qa=\"dt-feed-item-row--reactions\"\n      >\n        <!-- @slot Slot for reactions row component -->\n        <slot name=\"reactions\" />\n      </div>\n      <div\n        v-if=\"$slots.threading\"\n        class=\"dt-feed-item-row__threading\"\n      >\n        <!-- @slot Slot for threading row component -->\n        <slot name=\"threading\" />\n      </div>\n    </template>\n\n    <!-- Action menu -->\n    <template #right>\n      <div\n        v-show=\"isActive\"\n        data-qa=\"dt-feed-item-row--menu\"\n        class=\"dt-feed-item-row__menu\"\n      >\n        <dt-lazy-show\n          :appear=\"true\"\n          transition=\"fade\"\n          :show=\"isActive\"\n        >\n          <!-- @slot Slot for actions hover menu component -->\n          <slot name=\"menu\" />\n        </dt-lazy-show>\n      </div>\n    </template>\n  </dt-list-item>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport { DEFAULT_FEED_ROW_STATE, FEED_ROW_STATE_BACKGROUND_COLOR } from './feed_item_row_constants.js';\nimport { DtAvatar } from '@/components/avatar';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport { DtListItem } from '@/components/list_item';\nimport { DtBadge } from '@/components/badge';\nimport Modal from '@/common/mixins/modal';\nimport { DtIconUser } from '@dialpad/dialtone-icons/vue2';\n\nexport default {\n  name: 'DtRecipeFeedItemRow',\n\n  components: {\n    DtAvatar,\n    DtLazyShow,\n    DtListItem,\n    DtBadge,\n    DtIconUser,\n  },\n\n  mixins: [Modal],\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.\n     */\n    avatarSeed: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Show avatar, show header text or dont show left time and vice versa\n     */\n    showHeader: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Optional avatar image url.\n     * If not provided it will use extracted initials from displayName.\n     */\n    avatarImageUrl: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The display name of the sender\n     */\n    displayName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Initials will never be shown. Instead it will show a \"User\" icon.\n     */\n    noInitials: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * time string displayed as is.\n     * Shown on the header when showHeader is true\n     */\n    time: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * short time string without AM/PM displayed as is.\n     * Shown on the left of feed item when showHeader is false and isActive is true\n     */\n    shortTime: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * A label displayed next to the displayName. Will not show if empty.\n     */\n    labelText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * displays a darkened background on the row.\n     */\n    isActive: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * state for the feed item row. Can be normal, searched & error\n     */\n    state: {\n      type: String,\n      default: DEFAULT_FEED_ROW_STATE,\n      validator: state => Object.keys(FEED_ROW_STATE_BACKGROUND_COLOR).includes(state),\n    },\n  },\n\n  emits: [\n    /**\n     * Fires when hovered over feed row\n     *\n     * @event hover\n     * @type {Boolean}\n     */\n    'hover',\n\n    /**\n     * Fires when focused over feed row\n     *\n     * @event focus\n     * @type {Boolean}\n     */\n    'focus',\n\n    /**\n     * Key down event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n  ],\n\n  data () {\n    return {\n      transitionActive: false,\n    };\n  },\n\n  computed: {\n    feedListeners () {\n      return {\n        ...this.$listeners,\n        mouseenter: () => this.setHover(true),\n        mouseleave: () => this.setHover(false),\n        focusin: () => this.setFocus(true),\n        focusout: () => this.setFocus(false),\n        transitionend: () => this.transitionComplete(),\n        keydown: event => {\n          switch (event.code) {\n            case 'Tab':\n              this.trapFocus(event);\n              break;\n          }\n          this.$emit('keydown', event);\n        },\n      };\n    },\n\n    listItemClasses () {\n      return [\n        'dt-feed-item-row',\n        { 'dt-feed-item-row--active': this.isActive && this.state === DEFAULT_FEED_ROW_STATE },\n        { 'dt-feed-item-row--state-transition': this.transitionActive },\n        FEED_ROW_STATE_BACKGROUND_COLOR[this.state],\n\n      ];\n    },\n  },\n\n  watch: {\n    state: {\n      immediate: true,\n      handler: function (newState, oldState) {\n        if (newState !== DEFAULT_FEED_ROW_STATE) {\n          this.transitionActive = true;\n        }\n      },\n    },\n  },\n\n  methods: {\n    transitionComplete () {\n      if (this.state === DEFAULT_FEED_ROW_STATE) {\n        this.transitionActive = false;\n      }\n    },\n\n    trapFocus (e) {\n      this.focusTrappedTabPress(e);\n    },\n\n    setFocus (bool) {\n      this.$emit('focus', bool);\n    },\n\n    setHover (bool) {\n      this.$emit('hover', bool);\n    },\n  },\n};\n</script>\n\n<style lang=\"less\" scoped>\n.dt-feed-item-row {\n\n  width: var(--dt-size-100-percent);\n  box-sizing: border-box;\n  position: relative;\n  padding: var(--dt-space-300) var(--dt-space-500);\n\n  &:focus-visible {\n    box-shadow: var(--dt-shadow-focus-inset);\n  }\n\n  &--state-searched {\n    background-color: var(--dt-color-surface-warning-subtle);\n  }\n\n  &--state-error {\n    background-color: var(--dt-color-surface-critical-subtle);\n  }\n\n  &--active {\n    background-color: var(--dt-color-surface-secondary-opaque);\n  }\n\n  &--state-transition {\n    transition-duration: 2s;\n    transition-delay: 0s;\n    transition-timing-function: var(--ttf-in-out);\n    transition-property: background-color;\n  }\n\n  &__avatar-container {\n    padding-top: var(--dt-space-300);\n    padding-bottom: var(--dt-space-300);\n  }\n\n  &__content {\n    padding-left: var(--dt-space-300);\n  }\n\n  &__attachment {\n    padding-top: var(--dt-space-200);\n    padding-bottom: var(--dt-space-300);\n\n    &:deep(.dt-feed-item-row__image)  {\n      border: var(--dt-color-border-subtle) solid var(--dt-size-border-100);\n      border-radius: var(--dt-size-radius-400);\n      display: block;\n      max-width: 30rem;\n      max-height: 30rem;\n      min-width: 5.6rem;\n      min-height: 5.6rem;\n    }\n\n    &:deep(.dt-feed-item-row__video)  {\n      display: block;\n      height: 25.0rem;\n    }\n  }\n\n  &__header {\n    display: flex;\n    align-items: baseline;\n    flex-wrap: wrap;\n    gap: var(--dt-space-300);\n    font-size: var(--dt-font-size-200);\n    line-height: var(--dt-font-line-height-300);\n\n    &__name {\n      font-weight: var(--dt-font-weight-bold);\n    }\n\n    &__time {\n      font-size: var(--dt-font-size-100);\n      color: var(--dt-color-foreground-tertiary);\n      flex-shrink: 0;\n    }\n  }\n\n  &__reactions {\n    display: flex;\n    flex-wrap: wrap;\n    padding-top: var(--dt-space-200);\n    padding-bottom: var(--dt-space-200);\n    padding-left: var(--dt-space-300);\n  }\n\n  &__threading {\n    padding-top: var(--dt-space-200);\n    padding-bottom: var(--dt-space-200);\n  }\n\n  &__left-time {\n    color: var(--dt-color-foreground-tertiary);\n    font-size: var(--dt-font-size-100);\n    font-weight: var(--dt-font-weight-normal);\n    vertical-align: middle;\n    white-space: nowrap;\n  }\n\n  &__menu {\n    position: absolute;\n    top: var(--dt-space-550-negative);\n    right: var(--dt-space-450);\n  }\n\n  &:deep(> .d-item-layout) {\n    font: var(--dt-typography-body-md-compact);\n    min-height: initial;\n    padding: 0px;\n  }\n\n  &:deep(> .d-item-layout > .d-item-layout--left) {\n    align-self: flex-start;\n    text-align: end;\n    display: block;\n    padding-right: var(--dt-space-300);\n    padding-left: var(--dt-space-0);\n    // min-width = avatar width + padding\n    min-width: calc(var(--dt-space-600) + var(--dt-space-300));\n  }\n\n  &:deep(> .d-item-layout > .d-item-layout--right) {\n    padding: 0;\n    min-width: initial;\n  }\n\n  &:deep(> .d-item-layout > .d-item-layout--content > .d-item-layout--bottom) {\n    display: flex;\n    flex-direction: column;\n    margin-top: 0;\n  }\n}\n</style>\n"],"names":[],"mappings":";;;;;;;;;AAkIA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,QAAA,CAAA,KAAA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,WAAA,OAAA,KAAA,+BAAA,EAAA,SAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,kBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,gBAAA;AACA,aAAA;AAAA,QACA,GAAA,KAAA;AAAA,QACA,YAAA,MAAA,KAAA,SAAA,IAAA;AAAA,QACA,YAAA,MAAA,KAAA,SAAA,KAAA;AAAA,QACA,SAAA,MAAA,KAAA,SAAA,IAAA;AAAA,QACA,UAAA,MAAA,KAAA,SAAA,KAAA;AAAA,QACA,eAAA,MAAA,KAAA,mBAAA;AAAA,QACA,SAAA,WAAA;AACA,kBAAA,MAAA,MAAA;AAAA,YACA,KAAA;AACA,mBAAA,UAAA,KAAA;AACA;AAAA,UACA;AACA,eAAA,MAAA,WAAA,KAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAA;AAAA,QACA;AAAA,QACA,EAAA,4BAAA,KAAA,YAAA,KAAA,UAAA,uBAAA;AAAA,QACA,EAAA,sCAAA,KAAA,iBAAA;AAAA,QACA,gCAAA,KAAA,KAAA;AAAA,MAEA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,OAAA;AAAA,MACA,WAAA;AAAA,MACA,SAAA,SAAA,UAAA,UAAA;AACA,YAAA,aAAA,wBAAA;AACA,eAAA,mBAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,qBAAA;AACA,UAAA,KAAA,UAAA,wBAAA;AACA,aAAA,mBAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,UAAA,GAAA;AACA,WAAA,qBAAA,CAAA;AAAA,IACA;AAAA,IAEA,SAAA,MAAA;AACA,WAAA,MAAA,SAAA,IAAA;AAAA,IACA;AAAA,IAEA,SAAA,MAAA;AACA,WAAA,MAAA,SAAA,IAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"feed_item_row.vue.js","sources":["../../../../recipes/conversation_view/feed_item_row/feed_item_row.vue"],"sourcesContent":["<template>\n  <dt-list-item\n    ref=\"FeedItemRef\"\n    navigation-type=\"none\"\n    v-bind=\"$attrs\"\n    :class=\"['d-recipe-feed-item-row', listItemClasses]\"\n    data-qa=\"dt-recipe-feed-item-row\"\n    v-on=\"feedListeners\"\n  >\n    <!-- Avatar or time -->\n    <template #left>\n      <div\n        v-if=\"showHeader\"\n        class=\"d-recipe-feed-item-row__avatar-container\"\n      >\n        <!-- @slot Slot to contain the avatar, overrides avatar props. -->\n        <slot\n          name=\"avatar\"\n        >\n          <dt-avatar\n            :full-name=\"displayName\"\n            :image-src=\"avatarImageUrl\"\n            image-alt=\"\"\n            :seed=\"avatarSeed\"\n          >\n            <template\n              v-if=\"noInitials\"\n              #icon=\"{ iconSize }\"\n            >\n              <dt-icon-user\n                :size=\"iconSize\"\n              />\n            </template>\n          </dt-avatar>\n        </slot>\n      </div>\n      <!-- show time instead of avatar when headers not present -->\n      <span\n        v-if=\"!showHeader\"\n        v-show=\"isActive\"\n        class=\"d-recipe-feed-item-row__left-time\"\n        data-qa=\"dt-recipe-feed-item-row--left-time\"\n      >\n        {{ shortTime }}\n      </span>\n    </template>\n\n    <article class=\"d-recipe-feed-item-row__content\">\n      <!-- Feed Item -->\n      <div\n        v-if=\"showHeader\"\n        data-qa=\"dt-recipe-feed-item-row--header\"\n        class=\"d-recipe-feed-item-row__header\"\n      >\n        <p class=\"d-recipe-feed-item-row__header-name\">\n          {{ displayName }}\n        </p>\n        <time\n          class=\"d-recipe-feed-item-row__header-time\"\n        >\n          {{ time }}\n        </time>\n        <dt-badge\n          v-if=\"labelText\"\n          :text=\"labelText\"\n        />\n      </div>\n      <!-- @slot Default content slot for feed item row -->\n      <span\n        data-qa=\"dt-recipe-feed-item-row--content\"\n      >\n        <slot />\n      </span>\n      <div\n        v-if=\"$slots.attachment\"\n        data-qa=\"dt-recipe-feed-item-row--attachment\"\n        class=\"d-recipe-feed-item-row__attachment\"\n      >\n        <slot name=\"attachment\" />\n      </div>\n    </article>\n\n    <template #bottom>\n      <div\n        v-if=\"$slots.reactions\"\n        class=\"d-recipe-feed-item-row__reactions\"\n        data-qa=\"dt-recipe-feed-item-row--reactions\"\n      >\n        <!-- @slot Slot for reactions row component -->\n        <slot name=\"reactions\" />\n      </div>\n      <div\n        v-if=\"$slots.threading\"\n        class=\"d-recipe-feed-item-row__threading\"\n      >\n        <!-- @slot Slot for threading row component -->\n        <slot name=\"threading\" />\n      </div>\n    </template>\n\n    <!-- Action menu -->\n    <template #right>\n      <div\n        v-show=\"isActive\"\n        data-qa=\"dt-recipe-feed-item-row--menu\"\n        class=\"d-recipe-feed-item-row__menu\"\n      >\n        <dt-lazy-show\n          :appear=\"true\"\n          transition=\"fade\"\n          :show=\"isActive\"\n        >\n          <!-- @slot Slot for actions hover menu component -->\n          <slot name=\"menu\" />\n        </dt-lazy-show>\n      </div>\n    </template>\n  </dt-list-item>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport { DEFAULT_FEED_ROW_STATE, FEED_ROW_STATE_BACKGROUND_COLOR } from './feed_item_row_constants.js';\nimport { DtAvatar } from '@/components/avatar';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport { DtListItem } from '@/components/list_item';\nimport { DtBadge } from '@/components/badge';\nimport Modal from '@/common/mixins/modal';\nimport { DtIconUser } from '@dialpad/dialtone-icons/vue2';\n\nexport default {\n  name: 'DtRecipeFeedItemRow',\n\n  components: {\n    DtAvatar,\n    DtLazyShow,\n    DtListItem,\n    DtBadge,\n    DtIconUser,\n  },\n\n  mixins: [Modal],\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.\n     */\n    avatarSeed: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Show avatar, show header text or dont show left time and vice versa\n     */\n    showHeader: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Optional avatar image url.\n     * If not provided it will use extracted initials from displayName.\n     */\n    avatarImageUrl: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The display name of the sender\n     */\n    displayName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Initials will never be shown. Instead it will show a \"User\" icon.\n     */\n    noInitials: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * time string displayed as is.\n     * Shown on the header when showHeader is true\n     */\n    time: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * short time string without AM/PM displayed as is.\n     * Shown on the left of feed item when showHeader is false and isActive is true\n     */\n    shortTime: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * A label displayed next to the displayName. Will not show if empty.\n     */\n    labelText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * displays a darkened background on the row.\n     */\n    isActive: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * state for the feed item row. Can be normal, searched & error\n     */\n    state: {\n      type: String,\n      default: DEFAULT_FEED_ROW_STATE,\n      validator: state => Object.keys(FEED_ROW_STATE_BACKGROUND_COLOR).includes(state),\n    },\n  },\n\n  emits: [\n    /**\n     * Fires when hovered over feed row\n     *\n     * @event hover\n     * @type {Boolean}\n     */\n    'hover',\n\n    /**\n     * Fires when focused over feed row\n     *\n     * @event focus\n     * @type {Boolean}\n     */\n    'focus',\n\n    /**\n     * Key down event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n  ],\n\n  data () {\n    return {\n      transitionActive: false,\n    };\n  },\n\n  computed: {\n    feedListeners () {\n      return {\n        ...this.$listeners,\n        mouseenter: () => this.setHover(true),\n        mouseleave: () => this.setHover(false),\n        focusin: () => this.setFocus(true),\n        focusout: () => this.setFocus(false),\n        transitionend: () => this.transitionComplete(),\n        keydown: event => {\n          switch (event.code) {\n            case 'Tab':\n              this.trapFocus(event);\n              break;\n          }\n          this.$emit('keydown', event);\n        },\n      };\n    },\n\n    listItemClasses () {\n      return [\n        'd-recipe-feed-item-row',\n        { 'd-recipe-feed-item-row--active': this.isActive && this.state === DEFAULT_FEED_ROW_STATE },\n        { 'd-recipe-feed-item-row__state-transition': this.transitionActive },\n        FEED_ROW_STATE_BACKGROUND_COLOR[this.state],\n\n      ];\n    },\n  },\n\n  watch: {\n    state: {\n      immediate: true,\n      handler: function (newState, oldState) {\n        if (newState !== DEFAULT_FEED_ROW_STATE) {\n          this.transitionActive = true;\n        }\n      },\n    },\n  },\n\n  methods: {\n    transitionComplete () {\n      if (this.state === DEFAULT_FEED_ROW_STATE) {\n        this.transitionActive = false;\n      }\n    },\n\n    trapFocus (e) {\n      this.focusTrappedTabPress(e);\n    },\n\n    setFocus (bool) {\n      this.$emit('focus', bool);\n    },\n\n    setHover (bool) {\n      this.$emit('hover', bool);\n    },\n  },\n};\n</script>\n"],"names":[],"mappings":"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"}

package/dist/vue2/recipes/conversation_view/feed_item_row/feed_item_row_constants.cjs

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const FEED_ROW_STATE_BACKGROUND_COLOR = {
   NORMAL: "",
-  SEARCHED: "dt-feed-item-row--state-searched",
-  ERROR: "dt-feed-item-row--state-error"
+  SEARCHED: "d-recipe-feed-item-row__state--searched",
+  ERROR: "d-recipe-feed-item-row__state--error"
 };
 const DEFAULT_FEED_ROW_STATE = "NORMAL";
 exports.DEFAULT_FEED_ROW_STATE = DEFAULT_FEED_ROW_STATE;

package/dist/vue2/recipes/conversation_view/feed_item_row/feed_item_row_constants.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"feed_item_row_constants.cjs","sources":["../../../../recipes/conversation_view/feed_item_row/feed_item_row_constants.js"],"sourcesContent":["export const FEED_ROW_STATE_BACKGROUND_COLOR = {\n  NORMAL: '',\n  SEARCHED: 'dt-feed-item-row--state-searched',\n  ERROR: 'dt-feed-item-row--state-error',\n};\n\nexport const DEFAULT_FEED_ROW_STATE = 'NORMAL';\n\nexport default {\n  FEED_ROW_STATE_BACKGROUND_COLOR,\n  DEFAULT_FEED_ROW_STATE,\n};\n"],"names":[],"mappings":";;AAAY,MAAC,kCAAkC;AAAA,EAC7C,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,OAAO;AACT;AAEY,MAAC,yBAAyB;;;"}
+{"version":3,"file":"feed_item_row_constants.cjs","sources":["../../../../recipes/conversation_view/feed_item_row/feed_item_row_constants.js"],"sourcesContent":["export const FEED_ROW_STATE_BACKGROUND_COLOR = {\n  NORMAL: '',\n  SEARCHED: 'd-recipe-feed-item-row__state--searched',\n  ERROR: 'd-recipe-feed-item-row__state--error',\n};\n\nexport const DEFAULT_FEED_ROW_STATE = 'NORMAL';\n\nexport default {\n  FEED_ROW_STATE_BACKGROUND_COLOR,\n  DEFAULT_FEED_ROW_STATE,\n};\n"],"names":[],"mappings":";;AAAY,MAAC,kCAAkC;AAAA,EAC7C,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,OAAO;AACT;AAEY,MAAC,yBAAyB;;;"}

package/dist/vue2/recipes/conversation_view/feed_item_row/feed_item_row_constants.js

@@ -1,7 +1,7 @@
 const FEED_ROW_STATE_BACKGROUND_COLOR = {
   NORMAL: "",
-  SEARCHED: "dt-feed-item-row--state-searched",
-  ERROR: "dt-feed-item-row--state-error"
+  SEARCHED: "d-recipe-feed-item-row__state--searched",
+  ERROR: "d-recipe-feed-item-row__state--error"
 };
 const DEFAULT_FEED_ROW_STATE = "NORMAL";
 export {

package/dist/vue2/recipes/conversation_view/feed_item_row/feed_item_row_constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"feed_item_row_constants.js","sources":["../../../../recipes/conversation_view/feed_item_row/feed_item_row_constants.js"],"sourcesContent":["export const FEED_ROW_STATE_BACKGROUND_COLOR = {\n  NORMAL: '',\n  SEARCHED: 'dt-feed-item-row--state-searched',\n  ERROR: 'dt-feed-item-row--state-error',\n};\n\nexport const DEFAULT_FEED_ROW_STATE = 'NORMAL';\n\nexport default {\n  FEED_ROW_STATE_BACKGROUND_COLOR,\n  DEFAULT_FEED_ROW_STATE,\n};\n"],"names":[],"mappings":"AAAY,MAAC,kCAAkC;AAAA,EAC7C,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,OAAO;AACT;AAEY,MAAC,yBAAyB;"}
+{"version":3,"file":"feed_item_row_constants.js","sources":["../../../../recipes/conversation_view/feed_item_row/feed_item_row_constants.js"],"sourcesContent":["export const FEED_ROW_STATE_BACKGROUND_COLOR = {\n  NORMAL: '',\n  SEARCHED: 'd-recipe-feed-item-row__state--searched',\n  ERROR: 'd-recipe-feed-item-row__state--error',\n};\n\nexport const DEFAULT_FEED_ROW_STATE = 'NORMAL';\n\nexport default {\n  FEED_ROW_STATE_BACKGROUND_COLOR,\n  DEFAULT_FEED_ROW_STATE,\n};\n"],"names":[],"mappings":"AAAY,MAAC,kCAAkC;AAAA,EAC7C,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,OAAO;AACT;AAEY,MAAC,yBAAyB;"}

package/dist/vue2/recipes/conversation_view/message_input/extensions/meeting_pill/MeetingPill.vue.cjs

@@ -2,7 +2,6 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue2 = require("@tiptap/vue-2");
 const vue2$1 = require("@dialpad/dialtone-icons/vue2");
-;/* empty css                   */
 const _pluginVue2_normalizer = require("../../../../../_virtual/_plugin-vue2_normalizer.cjs");
 const item_layout = require("../../../../../components/item_layout/item_layout.vue.cjs");
 const button = require("../../../../../components/button/button.vue.cjs");
@@ -25,10 +24,10 @@ const _sfc_main = {
 };
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c("node-view-wrapper", { staticClass: "dt-message-input-meeting-pill" }, [_c("dt-item-layout", { staticClass: "dt-message-input-meeting-pill__layout", attrs: { "unstyled": "" }, scopedSlots: _vm._u([{ key: "left", fn: function() {
-    return [_c("div", { staticClass: "dt-message-input-meeting-pill__icon" }, [_c("dt-icon-video", { attrs: { "size": "400" } })], 1)];
+  return _c("node-view-wrapper", { staticClass: "d-recipe-message-input-meeting-pill" }, [_c("dt-item-layout", { staticClass: "d-recipe-message-input-meeting-pill__layout", attrs: { "unstyled": "" }, scopedSlots: _vm._u([{ key: "left", fn: function() {
+    return [_c("div", { staticClass: "d-recipe-message-input-meeting-pill__icon" }, [_c("dt-icon-video", { attrs: { "size": "400" } })], 1)];
   }, proxy: true }, { key: "right", fn: function() {
-    return [_c("div", { staticClass: "dt-message-input-meeting-pill__close" }, [_c("dt-button", { attrs: { "circle": "", "aria-label": _vm.node.attrs["close-button-aria-label"], "size": "xs", "importance": "clear" }, on: { "click": _vm.close }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_c("div", { staticClass: "d-recipe-message-input-meeting-pill__close" }, [_c("dt-button", { attrs: { "circle": "", "aria-label": _vm.node.attrs["close-button-aria-label"], "size": "xs", "importance": "clear" }, on: { "click": _vm.close }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
       return [_c("dt-icon-close", { attrs: { "size": "300" } })];
     }, proxy: true }]) })], 1)];
   }, proxy: true }]) }, [_vm._v(" " + _vm._s(_vm.node.attrs.text) + " ")])], 1);
@@ -37,10 +36,7 @@ var _sfc_staticRenderFns = [];
 var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.default(
   _sfc_main,
   _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null
+  _sfc_staticRenderFns
 );
 const MeetingPill = __component__.exports;
 exports.default = MeetingPill;

package/dist/vue2/recipes/conversation_view/message_input/extensions/meeting_pill/MeetingPill.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MeetingPill.vue.cjs","sources":["../../../../../../recipes/conversation_view/message_input/extensions/meeting_pill/MeetingPill.vue"],"sourcesContent":["<template>\n  <node-view-wrapper class=\"dt-message-input-meeting-pill\">\n    <dt-item-layout\n      class=\"dt-message-input-meeting-pill__layout\"\n      unstyled\n    >\n      <template #left>\n        <div class=\"dt-message-input-meeting-pill__icon\">\n          <dt-icon-video\n            size=\"400\"\n          />\n        </div>\n      </template>\n      {{ node.attrs.text }}\n      <template #right>\n        <div class=\"dt-message-input-meeting-pill__close\">\n          <dt-button\n            circle\n            :aria-label=\"node.attrs['close-button-aria-label']\"\n            size=\"xs\"\n            importance=\"clear\"\n            @click=\"close\"\n          >\n            <template #icon>\n              <dt-icon-close\n                size=\"300\"\n              />\n            </template>\n          </dt-button>\n        </div>\n      </template>\n    </dt-item-layout>\n  </node-view-wrapper>\n</template>\n\n<script>\nimport { NodeViewWrapper, nodeViewProps } from '@tiptap/vue-2';\nimport { DtItemLayout } from '@/components/item_layout';\nimport { DtIconClose, DtIconVideo } from '@dialpad/dialtone-icons/vue2';\nimport { DtButton } from '@/components/button';\n\nexport default {\n  name: 'MeetingPill',\n\n  components: {\n    NodeViewWrapper,\n    DtItemLayout,\n    DtIconClose,\n    DtButton,\n    DtIconVideo,\n  },\n\n  props: nodeViewProps,\n\n  emits: ['meeting-pill-close'],\n\n  methods: {\n    close (e) {\n      this.$parent.$emit('meeting-pill-close', e);\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-message-input-meeting-pill {\n  display: inline-block;\n\n  &__layout {\n    gap: var(--dt-space-400);\n    grid-template-areas: 'left content right';\n    grid-template-columns: minmax(0, max-content) 1fr minmax(0, max-content);\n    align-items: center;\n    max-width: var(--dt-size-905);\n    padding-left: var(--dt-space-400);\n    padding-right: var(--dt-space-400);\n    padding-top: var(--dt-space-200);\n    padding-bottom: var(--dt-space-200);\n    border: var(--dt-size-border-100) solid var(--dt-color-border-default);\n    border-radius: var(--dt-size-radius-300);\n    font: var(--dt-typography-headline-md);\n  }\n\n  &__icon {\n    display: flex;\n    align-items: center;\n    padding: var(--dt-space-350);\n  }\n\n  &__close {\n    display: flex;\n    justify-content: flex-end;\n  }\n}\n</style>\n"],"names":["NodeViewWrapper","DtItemLayout","DtIconClose","DtButton","DtIconVideo","nodeViewProps"],"mappings":";;;;;;;;AAyCA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,iBAAAA,KAAA;AAAA,IACA,cAAAC,YAAA;AAAA,IACA,aAAAC,OAAA;AAAA,IACA,UAAAC,OAAA;AAAA,IACA,aAAAC,OAAA;AAAA,EACA;AAAA,EAEA,OAAAC,KAAA;AAAA,EAEA,OAAA,CAAA,oBAAA;AAAA,EAEA,SAAA;AAAA,IACA,MAAA,GAAA;AACA,WAAA,QAAA,MAAA,sBAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"MeetingPill.vue.cjs","sources":["../../../../../../recipes/conversation_view/message_input/extensions/meeting_pill/MeetingPill.vue"],"sourcesContent":["<template>\n  <node-view-wrapper class=\"d-recipe-message-input-meeting-pill\">\n    <dt-item-layout\n      class=\"d-recipe-message-input-meeting-pill__layout\"\n      unstyled\n    >\n      <template #left>\n        <div class=\"d-recipe-message-input-meeting-pill__icon\">\n          <dt-icon-video\n            size=\"400\"\n          />\n        </div>\n      </template>\n      {{ node.attrs.text }}\n      <template #right>\n        <div class=\"d-recipe-message-input-meeting-pill__close\">\n          <dt-button\n            circle\n            :aria-label=\"node.attrs['close-button-aria-label']\"\n            size=\"xs\"\n            importance=\"clear\"\n            @click=\"close\"\n          >\n            <template #icon>\n              <dt-icon-close\n                size=\"300\"\n              />\n            </template>\n          </dt-button>\n        </div>\n      </template>\n    </dt-item-layout>\n  </node-view-wrapper>\n</template>\n\n<script>\nimport { NodeViewWrapper, nodeViewProps } from '@tiptap/vue-2';\nimport { DtItemLayout } from '@/components/item_layout';\nimport { DtIconClose, DtIconVideo } from '@dialpad/dialtone-icons/vue2';\nimport { DtButton } from '@/components/button';\n\nexport default {\n  name: 'MeetingPill',\n\n  components: {\n    NodeViewWrapper,\n    DtItemLayout,\n    DtIconClose,\n    DtButton,\n    DtIconVideo,\n  },\n\n  props: nodeViewProps,\n\n  emits: ['meeting-pill-close'],\n\n  methods: {\n    close (e) {\n      this.$parent.$emit('meeting-pill-close', e);\n    },\n  },\n};\n</script>\n"],"names":["NodeViewWrapper","DtItemLayout","DtIconClose","DtButton","DtIconVideo","nodeViewProps"],"mappings":";;;;;;;AAyCA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,iBAAAA,KAAA;AAAA,IACA,cAAAC,YAAA;AAAA,IACA,aAAAC,OAAA;AAAA,IACA,UAAAC,OAAA;AAAA,IACA,aAAAC,OAAA;AAAA,EACA;AAAA,EAEA,OAAAC,KAAA;AAAA,EAEA,OAAA,CAAA,oBAAA;AAAA,EAEA,SAAA;AAAA,IACA,MAAA,GAAA;AACA,WAAA,QAAA,MAAA,sBAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;"}