@dialpad/dialtone 9.86.1 → 9.87.0

package/dist/vue3/recipes/leftbar/general_row/general_row.vue.js

@@ -3,8 +3,7 @@ import { DtIconPhone, DtIconWaveform } from "@dialpad/dialtone-icons/vue3";
 import DtEmojiTextWrapper from "../../../components/emoji_text_wrapper/emoji_text_wrapper.vue.js";
 import DtRecipeLeftbarGeneralRowIcon from "./leftbar_general_row_icon.vue.js";
 import { extractVueListeners, safeConcatStrings } from "../../../common/utils.js";
-import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, mergeProps, toHandlers, renderSlot, createVNode, normalizeStyle, withCtx, createTextVNode, toDisplayString, createBlock, createCommentVNode, withModifiers, pushScopeId, popScopeId } from "vue";
-/* empty css                 */
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, mergeProps, toHandlers, renderSlot, createVNode, normalizeStyle, withCtx, createTextVNode, toDisplayString, createBlock, createCommentVNode, withModifiers } from "vue";
 import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
 import DtBadge from "../../../components/badge/badge.vue.js";
 import DtButton from "../../../components/button/button.vue.js";
@@ -181,14 +180,14 @@ const _sfc_main = {
   computed: {
     leftbarGeneralRowClasses() {
       return [
-        "dt-leftbar-row",
+        "d-recipe-leftbar-row",
         {
-          "dt-leftbar-row--no-action": !this.hasCallButton,
-          "dt-leftbar-row--has-unread": this.hasUnreads,
-          "dt-leftbar-row--unread-count": this.showUnreadCount || this.showUnreadMentionCount,
-          "dt-leftbar-row--selected": this.selected,
-          "dt-leftbar-row--muted": this.muted,
-          "dt-leftbar-row--action-focused": this.actionFocused
+          "d-recipe-leftbar-row--no-action": !this.hasCallButton,
+          "d-recipe-leftbar-row--has-unread": this.hasUnreads,
+          "d-recipe-leftbar-row__unread-count": this.showUnreadCount || this.showUnreadMentionCount,
+          "d-recipe-leftbar-row--selected": this.selected,
+          "d-recipe-leftbar-row--muted": this.muted,
+          "d-recipe-leftbar-row--action-focused": this.actionFocused
         }
       ];
     },
@@ -263,24 +262,23 @@ const _sfc_main = {
     },
     adjustLabelWidth() {
       var _a, _b, _c, _d, _e, _f;
-      const labelWidth = ((_b = (_a = this.$el) == null ? void 0 : _a.querySelector(".dt-leftbar-row__primary")) == null ? void 0 : _b.clientWidth) || 0;
-      const omegaWidth = ((_d = (_c = this.$el) == null ? void 0 : _c.querySelector(".dt-leftbar-row__omega")) == null ? void 0 : _d.clientWidth) || 0;
-      const alphaWidth = ((_f = (_e = this.$el) == null ? void 0 : _e.querySelector(".dt-leftbar-row__alpha")) == null ? void 0 : _f.clientWidth) || 0;
+      const labelWidth = ((_b = (_a = this.$el) == null ? void 0 : _a.querySelector(".d-recipe-leftbar-row__primary")) == null ? void 0 : _b.clientWidth) || 0;
+      const omegaWidth = ((_d = (_c = this.$el) == null ? void 0 : _c.querySelector(".d-recipe-leftbar-row__omega")) == null ? void 0 : _d.clientWidth) || 0;
+      const alphaWidth = ((_f = (_e = this.$el) == null ? void 0 : _e.querySelector(".d-recipe-leftbar-row__alpha")) == null ? void 0 : _f.clientWidth) || 0;
       const paddings = 16;
       this.labelWidth = labelWidth - (omegaWidth + alphaWidth + paddings) + "px";
     }
   }
 };
-const _withScopeId = (n) => (pushScopeId("data-v-9b78a9ef"), n = n(), popScopeId(), n);
 const _hoisted_1 = ["data-qa", "aria-label", "title", "href"];
-const _hoisted_2 = { class: "dt-leftbar-row__alpha" };
+const _hoisted_2 = { class: "d-recipe-leftbar-row__alpha" };
 const _hoisted_3 = {
   key: 0,
-  class: "dt-leftbar-row__is-typing"
+  class: "d-recipe-leftbar-row__is-typing"
 };
-const _hoisted_4 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("span", null, null, -1));
-const _hoisted_5 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("span", null, null, -1));
-const _hoisted_6 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("span", null, null, -1));
+const _hoisted_4 = /* @__PURE__ */ createElementVNode("span", null, null, -1);
+const _hoisted_5 = /* @__PURE__ */ createElementVNode("span", null, null, -1);
+const _hoisted_6 = /* @__PURE__ */ createElementVNode("span", null, null, -1);
 const _hoisted_7 = [
   _hoisted_4,
   _hoisted_5,
@@ -288,16 +286,16 @@ const _hoisted_7 = [
 ];
 const _hoisted_8 = {
   key: 0,
-  class: "dt-leftbar-row__omega"
+  class: "d-recipe-leftbar-row__omega"
 };
 const _hoisted_9 = {
   key: 1,
-  class: "dt-leftbar-row__active-voice"
+  class: "d-recipe-leftbar-row__active-voice"
 };
 const _hoisted_10 = {
   key: 3,
-  class: "dt-leftbar-row__action",
-  "data-qa": "dt-leftbar-row-action"
+  class: "d-recipe-leftbar-row__action",
+  "data-qa": "dt-recipe-leftbar-row-action"
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_recipe_leftbar_general_row_icon = resolveComponent("dt-recipe-leftbar-general-row-icon");
@@ -309,11 +307,11 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_button = resolveComponent("dt-button");
   return openBlock(), createElementBlock("div", {
     class: normalizeClass($options.leftbarGeneralRowClasses),
-    "data-qa": "dt-leftbar-row"
+    "data-qa": "dt-recipe-leftbar-row"
   }, [
     createElementVNode("a", mergeProps({
-      class: "dt-leftbar-row__primary",
-      "data-qa": "data-qa" in _ctx.$attrs ? _ctx.$attrs["data-qa"] : "dt-leftbar-row-link",
+      class: "d-recipe-leftbar-row__primary",
+      "data-qa": "data-qa" in _ctx.$attrs ? _ctx.$attrs["data-qa"] : "d-recipe-leftbar-row-link",
       "aria-label": $options.getAriaLabel,
       title: $props.description,
       href: "href" in _ctx.$attrs ? _ctx.$attrs.href : "javascript:void(0)"
@@ -324,18 +322,18 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             type: $options.getIcon,
             color: $props.color,
             "icon-size": $props.iconSize,
-            "data-qa": "dt-leftbar-row-icon"
+            "data-qa": "dt-recipe-leftbar-row-icon"
           }, null, 8, ["type", "color", "icon-size"])
-        ], true)
+        ])
       ]),
       createElementVNode("div", {
-        class: "dt-leftbar-row__label",
+        class: "d-recipe-leftbar-row__label",
         style: normalizeStyle(`flex-basis: ${$data.labelWidth}`)
       }, [
         renderSlot(_ctx.$slots, "label", {}, () => [
           createVNode(_component_dt_emoji_text_wrapper, {
-            class: "dt-leftbar-row__description",
-            "data-qa": "dt-leftbar-row-description",
+            class: "d-recipe-leftbar-row__description",
+            "data-qa": "dt-recipe-leftbar-row-description",
             size: "200"
           }, {
             default: withCtx(() => [
@@ -343,7 +341,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             ]),
             _: 1
           })
-        ], true)
+        ])
       ], 4)
     ], 16, _hoisted_1),
     $options.hasActions ? (openBlock(), createElementBlock("div", _hoisted_8, [
@@ -354,9 +352,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       }, {
         anchor: withCtx(() => [
           createElementVNode("div", {
-            ref: "dt-leftbar-row-dnd",
-            class: "dt-leftbar-row__dnd",
-            "data-qa": "dt-leftbar-row-dnd"
+            ref: "d-recipe-leftbar-row-dnd",
+            class: "d-recipe-leftbar-row__dnd",
+            "data-qa": "dt-recipe-leftbar-row-dnd"
           }, toDisplayString($props.dndText), 513)
         ]),
         _: 1
@@ -373,9 +371,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             key: 0,
             kind: "count",
             type: "bulletin",
-            "data-qa": "dt-leftbar-row-unread-badge",
-            class: normalizeClass(["dt-leftbar-row__unread-badge", {
-              "dt-leftbar-row__unread-count-badge": $options.shouldApplyCustomStyleForCountBadge
+            "data-qa": "dt-recipe-leftbar-row-unread-badge",
+            class: normalizeClass(["d-recipe-leftbar-row__unread-badge", {
+              "d-recipe-leftbar-row__unread-count-badge": $options.shouldApplyCustomStyleForCountBadge
             }])
           }, {
             default: withCtx(() => [
@@ -387,11 +385,11 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             key: 1,
             kind: "count",
             type: "bulletin",
-            "data-qa": "dt-leftbar-row-unread-mention-badge",
+            "data-qa": "dt-recipe-leftbar-row-unread-mention-badge",
             class: normalizeClass([
-              "dt-leftbar-row__unread-badge",
-              { "dt-leftbar-row__unread-mention-count-badge": $options.shouldApplyCustomStyleForCountBadge },
-              { "dt-leftbar-row__unread-mention-only-count-badge": $options.shouldApplyCustomStyleForMentionOnly }
+              "d-recipe-leftbar-row__unread-badge",
+              { "d-recipe-leftbar-row__unread-mention-count-badge": $options.shouldApplyCustomStyleForCountBadge },
+              { "d-recipe-leftbar-row__unread-mention-only-count-badge": $options.shouldApplyCustomStyleForMentionOnly }
             ])
           }, {
             default: withCtx(() => [
@@ -409,8 +407,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         }, {
           anchor: withCtx(() => [
             createVNode(_component_dt_button, {
-              class: "dt-leftbar-row__action-button",
-              "data-qa": "dt-leftbar-row-action-call-button",
+              class: "d-recipe-leftbar-row__action-button",
+              "data-qa": "dt-recipe-leftbar-row-action-call-button",
               circle: true,
               size: "xs",
               kind: "inverted",
@@ -431,7 +429,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     ])) : createCommentVNode("", true)
   ], 2);
 }
-const DtRecipeGeneralRow = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-9b78a9ef"]]);
+const DtRecipeGeneralRow = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
   DtRecipeGeneralRow as default
 };

package/dist/vue3/recipes/leftbar/general_row/general_row.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"general_row.vue.js","sources":["../../../../recipes/leftbar/general_row/general_row.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"leftbarGeneralRowClasses\"\n    data-qa=\"dt-leftbar-row\"\n  >\n    <a\n      class=\"dt-leftbar-row__primary\"\n      :data-qa=\"'data-qa' in $attrs ? $attrs['data-qa'] : 'dt-leftbar-row-link'\"\n      :aria-label=\"getAriaLabel\"\n      :title=\"description\"\n      :href=\"'href' in $attrs ? $attrs.href : 'javascript:void(0)'\"\n      v-bind=\"$attrs\"\n      v-on=\"generalRowListeners\"\n    >\n      <div\n        class=\"dt-leftbar-row__alpha\"\n      >\n        <div\n          v-if=\"isTyping\"\n          class=\"dt-leftbar-row__is-typing\"\n        >\n          <span /><span /><span />\n        </div>\n        <slot\n          v-else\n          name=\"left\"\n        >\n          <dt-recipe-leftbar-general-row-icon\n            :type=\"getIcon\"\n            :color=\"color\"\n            :icon-size=\"iconSize\"\n            data-qa=\"dt-leftbar-row-icon\"\n          />\n        </slot>\n      </div>\n      <div\n        class=\"dt-leftbar-row__label\"\n        :style=\"`flex-basis: ${labelWidth}`\"\n      >\n        <slot name=\"label\">\n          <dt-emoji-text-wrapper\n            class=\"dt-leftbar-row__description\"\n            data-qa=\"dt-leftbar-row-description\"\n            size=\"200\"\n          >\n            {{ description }}\n          </dt-emoji-text-wrapper>\n        </slot>\n      </div>\n    </a>\n    <div\n      v-if=\"hasActions\"\n      class=\"dt-leftbar-row__omega\"\n    >\n      <dt-tooltip\n        v-if=\"dndText\"\n        placement=\"top\"\n        :message=\"dndTextTooltip\"\n      >\n        <template #anchor>\n          <div\n            ref=\"dt-leftbar-row-dnd\"\n            class=\"dt-leftbar-row__dnd\"\n            data-qa=\"dt-leftbar-row-dnd\"\n          >\n            {{ dndText }}\n          </div>\n        </template>\n      </dt-tooltip>\n      <div\n        v-if=\"activeVoiceChat\"\n        class=\"dt-leftbar-row__active-voice\"\n      >\n        <dt-icon-waveform\n          size=\"300\"\n        />\n      </div>\n      <dt-tooltip\n        v-else-if=\"showUnreadCount || showUnreadMentionCount\"\n        :message=\"unreadCountTooltip\"\n        placement=\"top\"\n      >\n        <template #anchor>\n          <dt-badge\n            v-if=\"showUnreadCount\"\n            kind=\"count\"\n            type=\"bulletin\"\n            data-qa=\"dt-leftbar-row-unread-badge\"\n            :class=\"['dt-leftbar-row__unread-badge', {\n              'dt-leftbar-row__unread-count-badge':\n                shouldApplyCustomStyleForCountBadge,\n            }]\"\n          >\n            {{ unreadCount }}\n          </dt-badge>\n          <dt-badge\n            v-if=\"showUnreadMentionCount\"\n            kind=\"count\"\n            type=\"bulletin\"\n            data-qa=\"dt-leftbar-row-unread-mention-badge\"\n            :class=\"['dt-leftbar-row__unread-badge',\n                     { 'dt-leftbar-row__unread-mention-count-badge': shouldApplyCustomStyleForCountBadge },\n                     { 'dt-leftbar-row__unread-mention-only-count-badge': shouldApplyCustomStyleForMentionOnly },\n            ]\"\n          >\n            {{ unreadMentionCount }}\n          </dt-badge>\n        </template>\n      </dt-tooltip>\n      <div\n        v-if=\"hasCallButton\"\n        class=\"dt-leftbar-row__action\"\n        data-qa=\"dt-leftbar-row-action\"\n      >\n        <dt-tooltip\n          :message=\"callButtonTooltip\"\n          placement=\"top\"\n        >\n          <template #anchor>\n            <dt-button\n              class=\"dt-leftbar-row__action-button\"\n              data-qa=\"dt-leftbar-row-action-call-button\"\n              :circle=\"true\"\n              size=\"xs\"\n              kind=\"inverted\"\n              :aria-label=\"callButtonTooltip\"\n              @focus=\"actionFocused = true\"\n              @blur=\"actionFocused = false\"\n              @click.stop=\"$emit('call', $event)\"\n            >\n              <template #icon>\n                <dt-icon-phone\n                  size=\"200\"\n                />\n              </template>\n            </dt-button>\n          </template>\n        </dt-tooltip>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport {\n  LEFTBAR_GENERAL_ROW_TYPES,\n  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS,\n  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR,\n  LEFTBAR_GENERAL_ROW_ICON_SIZES,\n} from './general_row_constants';\nimport { DtBadge } from '@/components/badge';\nimport { DtIconPhone, DtIconWaveform } from '@dialpad/dialtone-icons/vue3';\nimport { DtButton } from '@/components/button';\nimport { DtTooltip } from '@/components/tooltip';\nimport DtEmojiTextWrapper from '@/components/emoji_text_wrapper/emoji_text_wrapper.vue';\nimport DtRecipeLeftbarGeneralRowIcon from './leftbar_general_row_icon.vue';\nimport { extractVueListeners, safeConcatStrings } from '@/common/utils';\n\nexport default {\n  name: 'DtRecipeGeneralRow',\n\n  components: {\n    DtEmojiTextWrapper,\n    DtBadge,\n    DtButton,\n    DtTooltip,\n    DtIconPhone,\n    DtIconWaveform,\n    DtRecipeLeftbarGeneralRowIcon,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Determines the icon to show.\n     * If type is contact center, the color prop must be provided and will determine the color of the icon\n     */\n    type: {\n      type: String,\n      default: 'inbox',\n      validator: (type) => {\n        return Object.values(LEFTBAR_GENERAL_ROW_TYPES).includes(type);\n      },\n    },\n\n    /**\n     * Will be read out by a screen reader upon focus of this row. If not defined \"description\" will be read.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Text displayed next to the icon. Required. Even if you are overriding this field using the label slot\n     * you still must input this as it will be displayed as the \"title\" attribute for the row.\n     */\n    description: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Determines the color of the contact center icon\n     */\n    color: {\n      type: String,\n      default: null,\n      validator: (color) => {\n        return Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).includes(color);\n      },\n    },\n\n    /**\n     * The channel setting, either 'mention' or 'always'.\n     * @values 'mention', 'always', null.\n     */\n    channelSetting: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Styles the row with an increased font weight to convey it has unreads. This must be true to see\n     * the unread count badge.\n     */\n    hasUnreads: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Number of unread messages\n     */\n    unreadCount: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Number of unread mention messages\n     */\n    unreadMentionCount: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Text shown when the unread count is hovered.\n     */\n    unreadCountTooltip: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines if the row is selected\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Gives a faded style to be used when muted\n     */\n    muted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Shows styling to represent an active voice chat. This will display over unreadCount.\n     */\n    activeVoiceChat: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Acronym used to represent \"Do not Disturb\" state. If entered will display the entered text alongside\n     * unreadCount.\n     */\n    dndText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Text shown in tooltip when you hover the dndText\n     */\n    dndTextTooltip: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Whether the row should have a call button. Usually only applicable to individual contact rows.\n     */\n    hasCallButton: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Text shown when the call button is hovered.\n     */\n    callButtonTooltip: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Shows an \"is typing\" animation over the avatar when true.\n     */\n    isTyping: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Sets the size of the icon.\n     */\n    iconSize: {\n      type: String,\n      default: '300',\n      validator: (size) => {\n        return LEFTBAR_GENERAL_ROW_ICON_SIZES.includes(size);\n      },\n    },\n  },\n\n  emits: [\n    /**\n     * Call button clicked\n     *\n     * @event call\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'call',\n  ],\n\n  data () {\n    return {\n      actionFocused: false,\n      labelWidth: '100%',\n    };\n  },\n\n  computed: {\n    leftbarGeneralRowClasses () {\n      return [\n        'dt-leftbar-row',\n        {\n          'dt-leftbar-row--no-action': !this.hasCallButton,\n          'dt-leftbar-row--has-unread': this.hasUnreads,\n          'dt-leftbar-row--unread-count': this.showUnreadCount || this.showUnreadMentionCount,\n          'dt-leftbar-row--selected': this.selected,\n          'dt-leftbar-row--muted': this.muted,\n          'dt-leftbar-row--action-focused': this.actionFocused,\n        },\n      ];\n    },\n\n    getIcon () {\n      switch (this.type) {\n        case LEFTBAR_GENERAL_ROW_TYPES.CHANNELS:\n          if (this.hasUnreads) return 'channel unread';\n          break;\n        case LEFTBAR_GENERAL_ROW_TYPES.LOCKED_CHANNEL:\n          if (this.hasUnreads) return 'locked channel unread';\n          break;\n      }\n      return this.type;\n    },\n\n    generalRowListeners () {\n      return extractVueListeners(this.$attrs);\n    },\n\n    getAriaLabel () {\n      return this.ariaLabel\n        ? this.ariaLabel\n        : safeConcatStrings([this.description, this.unreadCountTooltip, this.dndTextTooltip]);\n    },\n\n    hasActions () {\n      return this.dndText || this.activeVoiceChat || this.showUnreadCount || this.hasCallButton ||\n        this.showUnreadMentionCount;\n    },\n\n    showUnreadCount () {\n      return !!this.unreadCount && this.hasUnreads;\n    },\n\n    showUnreadMentionCount () {\n      return !!this.unreadMentionCount && this.hasUnreads;\n    },\n\n    hasUnreadCount () {\n      return this.unreadCount !== null;\n    },\n\n    hasUnreadMentionCount () {\n      return this.unreadMentionCount !== null;\n    },\n\n    shouldApplyCustomStyleForCountBadge () {\n      return this.hasUnreadCount && this.hasUnreadMentionCount;\n    },\n\n    /**\n     * When a channel in 'always' setting, meaning the user should see both unread count and unread mention count,\n     * if there are only mention messages, we should apply the theme design tokens var(--dt-theme-mention-color-[background||foreground]-strong).\n     * @returns {boolean}\n     */\n    shouldApplyCustomStyleForMentionOnly () {\n      return this.channelSetting === 'always' && !this.hasUnreadCount && this.hasUnreadMentionCount;\n    },\n  },\n\n  watch: {\n    $props: {\n      immediate: true,\n      deep: true,\n      async handler () {\n        this.validateProps();\n        await this.$nextTick();\n        this.adjustLabelWidth();\n      },\n    },\n  },\n\n  mounted () {\n    this.resizeObserver = new ResizeObserver(this.adjustLabelWidth);\n    this.resizeObserver.observe(this.$el);\n    this.adjustLabelWidth();\n  },\n\n  beforeUnmount: function () {\n    this.resizeObserver.disconnect();\n  },\n\n  methods: {\n    validateProps () {\n      if (this.type === LEFTBAR_GENERAL_ROW_TYPES.CONTACT_CENTER &&\n        !Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).includes(this.color)) {\n        console.error(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR);\n      }\n    },\n\n    adjustLabelWidth () {\n      const labelWidth = this.$el?.querySelector('.dt-leftbar-row__primary')?.clientWidth || 0;\n      const omegaWidth = this.$el?.querySelector('.dt-leftbar-row__omega')?.clientWidth || 0;\n      const alphaWidth = this.$el?.querySelector('.dt-leftbar-row__alpha')?.clientWidth || 0;\n      const paddings = 16;\n      this.labelWidth = labelWidth - (omegaWidth + alphaWidth + paddings) + 'px';\n    },\n  },\n};\n</script>\n\n<style lang=\"less\" scoped>\n@import \"../style/leftbar_row.less\";\n</style>\n"],"names":["_createElementVNode","_createElementBlock","_normalizeClass","_mergeProps","_toHandlers","_renderSlot","_createVNode","_normalizeStyle","_withCtx","_createTextVNode","_toDisplayString","_openBlock","_createBlock","_createCommentVNode","_withModifiers"],"mappings":"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"}
+{"version":3,"file":"general_row.vue.js","sources":["../../../../recipes/leftbar/general_row/general_row.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"leftbarGeneralRowClasses\"\n    data-qa=\"dt-recipe-leftbar-row\"\n  >\n    <a\n      class=\"d-recipe-leftbar-row__primary\"\n      :data-qa=\"'data-qa' in $attrs ? $attrs['data-qa'] : 'd-recipe-leftbar-row-link'\"\n      :aria-label=\"getAriaLabel\"\n      :title=\"description\"\n      :href=\"'href' in $attrs ? $attrs.href : 'javascript:void(0)'\"\n      v-bind=\"$attrs\"\n      v-on=\"generalRowListeners\"\n    >\n      <div\n        class=\"d-recipe-leftbar-row__alpha\"\n      >\n        <div\n          v-if=\"isTyping\"\n          class=\"d-recipe-leftbar-row__is-typing\"\n        >\n          <span /><span /><span />\n        </div>\n        <slot\n          v-else\n          name=\"left\"\n        >\n          <dt-recipe-leftbar-general-row-icon\n            :type=\"getIcon\"\n            :color=\"color\"\n            :icon-size=\"iconSize\"\n            data-qa=\"dt-recipe-leftbar-row-icon\"\n          />\n        </slot>\n      </div>\n      <div\n        class=\"d-recipe-leftbar-row__label\"\n        :style=\"`flex-basis: ${labelWidth}`\"\n      >\n        <slot name=\"label\">\n          <dt-emoji-text-wrapper\n            class=\"d-recipe-leftbar-row__description\"\n            data-qa=\"dt-recipe-leftbar-row-description\"\n            size=\"200\"\n          >\n            {{ description }}\n          </dt-emoji-text-wrapper>\n        </slot>\n      </div>\n    </a>\n    <div\n      v-if=\"hasActions\"\n      class=\"d-recipe-leftbar-row__omega\"\n    >\n      <dt-tooltip\n        v-if=\"dndText\"\n        placement=\"top\"\n        :message=\"dndTextTooltip\"\n      >\n        <template #anchor>\n          <div\n            ref=\"d-recipe-leftbar-row-dnd\"\n            class=\"d-recipe-leftbar-row__dnd\"\n            data-qa=\"dt-recipe-leftbar-row-dnd\"\n          >\n            {{ dndText }}\n          </div>\n        </template>\n      </dt-tooltip>\n      <div\n        v-if=\"activeVoiceChat\"\n        class=\"d-recipe-leftbar-row__active-voice\"\n      >\n        <dt-icon-waveform\n          size=\"300\"\n        />\n      </div>\n      <dt-tooltip\n        v-else-if=\"showUnreadCount || showUnreadMentionCount\"\n        :message=\"unreadCountTooltip\"\n        placement=\"top\"\n      >\n        <template #anchor>\n          <dt-badge\n            v-if=\"showUnreadCount\"\n            kind=\"count\"\n            type=\"bulletin\"\n            data-qa=\"dt-recipe-leftbar-row-unread-badge\"\n            :class=\"['d-recipe-leftbar-row__unread-badge', {\n              'd-recipe-leftbar-row__unread-count-badge':\n                shouldApplyCustomStyleForCountBadge,\n            }]\"\n          >\n            {{ unreadCount }}\n          </dt-badge>\n          <dt-badge\n            v-if=\"showUnreadMentionCount\"\n            kind=\"count\"\n            type=\"bulletin\"\n            data-qa=\"dt-recipe-leftbar-row-unread-mention-badge\"\n            :class=\"['d-recipe-leftbar-row__unread-badge',\n                     { 'd-recipe-leftbar-row__unread-mention-count-badge': shouldApplyCustomStyleForCountBadge },\n                     { 'd-recipe-leftbar-row__unread-mention-only-count-badge': shouldApplyCustomStyleForMentionOnly },\n            ]\"\n          >\n            {{ unreadMentionCount }}\n          </dt-badge>\n        </template>\n      </dt-tooltip>\n      <div\n        v-if=\"hasCallButton\"\n        class=\"d-recipe-leftbar-row__action\"\n        data-qa=\"dt-recipe-leftbar-row-action\"\n      >\n        <dt-tooltip\n          :message=\"callButtonTooltip\"\n          placement=\"top\"\n        >\n          <template #anchor>\n            <dt-button\n              class=\"d-recipe-leftbar-row__action-button\"\n              data-qa=\"dt-recipe-leftbar-row-action-call-button\"\n              :circle=\"true\"\n              size=\"xs\"\n              kind=\"inverted\"\n              :aria-label=\"callButtonTooltip\"\n              @focus=\"actionFocused = true\"\n              @blur=\"actionFocused = false\"\n              @click.stop=\"$emit('call', $event)\"\n            >\n              <template #icon>\n                <dt-icon-phone\n                  size=\"200\"\n                />\n              </template>\n            </dt-button>\n          </template>\n        </dt-tooltip>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport {\n  LEFTBAR_GENERAL_ROW_TYPES,\n  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS,\n  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR,\n  LEFTBAR_GENERAL_ROW_ICON_SIZES,\n} from './general_row_constants';\nimport { DtBadge } from '@/components/badge';\nimport { DtIconPhone, DtIconWaveform } from '@dialpad/dialtone-icons/vue3';\nimport { DtButton } from '@/components/button';\nimport { DtTooltip } from '@/components/tooltip';\nimport DtEmojiTextWrapper from '@/components/emoji_text_wrapper/emoji_text_wrapper.vue';\nimport DtRecipeLeftbarGeneralRowIcon from './leftbar_general_row_icon.vue';\nimport { extractVueListeners, safeConcatStrings } from '@/common/utils';\n\nexport default {\n  name: 'DtRecipeGeneralRow',\n\n  components: {\n    DtEmojiTextWrapper,\n    DtBadge,\n    DtButton,\n    DtTooltip,\n    DtIconPhone,\n    DtIconWaveform,\n    DtRecipeLeftbarGeneralRowIcon,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Determines the icon to show.\n     * If type is contact center, the color prop must be provided and will determine the color of the icon\n     */\n    type: {\n      type: String,\n      default: 'inbox',\n      validator: (type) => {\n        return Object.values(LEFTBAR_GENERAL_ROW_TYPES).includes(type);\n      },\n    },\n\n    /**\n     * Will be read out by a screen reader upon focus of this row. If not defined \"description\" will be read.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Text displayed next to the icon. Required. Even if you are overriding this field using the label slot\n     * you still must input this as it will be displayed as the \"title\" attribute for the row.\n     */\n    description: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Determines the color of the contact center icon\n     */\n    color: {\n      type: String,\n      default: null,\n      validator: (color) => {\n        return Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).includes(color);\n      },\n    },\n\n    /**\n     * The channel setting, either 'mention' or 'always'.\n     * @values 'mention', 'always', null.\n     */\n    channelSetting: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Styles the row with an increased font weight to convey it has unreads. This must be true to see\n     * the unread count badge.\n     */\n    hasUnreads: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Number of unread messages\n     */\n    unreadCount: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Number of unread mention messages\n     */\n    unreadMentionCount: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Text shown when the unread count is hovered.\n     */\n    unreadCountTooltip: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines if the row is selected\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Gives a faded style to be used when muted\n     */\n    muted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Shows styling to represent an active voice chat. This will display over unreadCount.\n     */\n    activeVoiceChat: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Acronym used to represent \"Do not Disturb\" state. If entered will display the entered text alongside\n     * unreadCount.\n     */\n    dndText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Text shown in tooltip when you hover the dndText\n     */\n    dndTextTooltip: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Whether the row should have a call button. Usually only applicable to individual contact rows.\n     */\n    hasCallButton: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Text shown when the call button is hovered.\n     */\n    callButtonTooltip: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Shows an \"is typing\" animation over the avatar when true.\n     */\n    isTyping: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Sets the size of the icon.\n     */\n    iconSize: {\n      type: String,\n      default: '300',\n      validator: (size) => {\n        return LEFTBAR_GENERAL_ROW_ICON_SIZES.includes(size);\n      },\n    },\n  },\n\n  emits: [\n    /**\n     * Call button clicked\n     *\n     * @event call\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'call',\n  ],\n\n  data () {\n    return {\n      actionFocused: false,\n      labelWidth: '100%',\n    };\n  },\n\n  computed: {\n    leftbarGeneralRowClasses () {\n      return [\n        'd-recipe-leftbar-row',\n        {\n          'd-recipe-leftbar-row--no-action': !this.hasCallButton,\n          'd-recipe-leftbar-row--has-unread': this.hasUnreads,\n          'd-recipe-leftbar-row__unread-count': this.showUnreadCount || this.showUnreadMentionCount,\n          'd-recipe-leftbar-row--selected': this.selected,\n          'd-recipe-leftbar-row--muted': this.muted,\n          'd-recipe-leftbar-row--action-focused': this.actionFocused,\n        },\n      ];\n    },\n\n    getIcon () {\n      switch (this.type) {\n        case LEFTBAR_GENERAL_ROW_TYPES.CHANNELS:\n          if (this.hasUnreads) return 'channel unread';\n          break;\n        case LEFTBAR_GENERAL_ROW_TYPES.LOCKED_CHANNEL:\n          if (this.hasUnreads) return 'locked channel unread';\n          break;\n      }\n      return this.type;\n    },\n\n    generalRowListeners () {\n      return extractVueListeners(this.$attrs);\n    },\n\n    getAriaLabel () {\n      return this.ariaLabel\n        ? this.ariaLabel\n        : safeConcatStrings([this.description, this.unreadCountTooltip, this.dndTextTooltip]);\n    },\n\n    hasActions () {\n      return this.dndText || this.activeVoiceChat || this.showUnreadCount || this.hasCallButton ||\n        this.showUnreadMentionCount;\n    },\n\n    showUnreadCount () {\n      return !!this.unreadCount && this.hasUnreads;\n    },\n\n    showUnreadMentionCount () {\n      return !!this.unreadMentionCount && this.hasUnreads;\n    },\n\n    hasUnreadCount () {\n      return this.unreadCount !== null;\n    },\n\n    hasUnreadMentionCount () {\n      return this.unreadMentionCount !== null;\n    },\n\n    shouldApplyCustomStyleForCountBadge () {\n      return this.hasUnreadCount && this.hasUnreadMentionCount;\n    },\n\n    /**\n     * When a channel in 'always' setting, meaning the user should see both unread count and unread mention count,\n     * if there are only mention messages, we should apply the theme design tokens var(--dt-theme-mention-color-[background||foreground]-strong).\n     * @returns {boolean}\n     */\n    shouldApplyCustomStyleForMentionOnly () {\n      return this.channelSetting === 'always' && !this.hasUnreadCount && this.hasUnreadMentionCount;\n    },\n  },\n\n  watch: {\n    $props: {\n      immediate: true,\n      deep: true,\n      async handler () {\n        this.validateProps();\n        await this.$nextTick();\n        this.adjustLabelWidth();\n      },\n    },\n  },\n\n  mounted () {\n    this.resizeObserver = new ResizeObserver(this.adjustLabelWidth);\n    this.resizeObserver.observe(this.$el);\n    this.adjustLabelWidth();\n  },\n\n  beforeUnmount: function () {\n    this.resizeObserver.disconnect();\n  },\n\n  methods: {\n    validateProps () {\n      if (this.type === LEFTBAR_GENERAL_ROW_TYPES.CONTACT_CENTER &&\n        !Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).includes(this.color)) {\n        console.error(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR);\n      }\n    },\n\n    adjustLabelWidth () {\n      const labelWidth = this.$el?.querySelector('.d-recipe-leftbar-row__primary')?.clientWidth || 0;\n      const omegaWidth = this.$el?.querySelector('.d-recipe-leftbar-row__omega')?.clientWidth || 0;\n      const alphaWidth = this.$el?.querySelector('.d-recipe-leftbar-row__alpha')?.clientWidth || 0;\n      const paddings = 16;\n      this.labelWidth = labelWidth - (omegaWidth + alphaWidth + paddings) + 'px';\n    },\n  },\n};\n</script>\n"],"names":["_createElementVNode","_createElementBlock","_normalizeClass","_mergeProps","_toHandlers","_renderSlot","_createVNode","_normalizeStyle","_withCtx","_createTextVNode","_toDisplayString","_openBlock","_createBlock","_createCommentVNode","_withModifiers"],"mappings":"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"}

package/dist/vue3/recipes/leftbar/general_row/leftbar_general_row_icon.vue.cjs

@@ -68,7 +68,7 @@ const _sfc_main = {
     },
     contactCenterIconClasses() {
       return [
-        "dt-leftbar-row__icon-cc",
+        "d-recipe-leftbar-row__icon-cc",
         general_row_constants.LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS[this.color]
       ];
     },

package/dist/vue3/recipes/leftbar/general_row/leftbar_general_row_icon.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"leftbar_general_row_icon.vue.cjs","sources":["../../../../recipes/leftbar/general_row/leftbar_general_row_icon.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"getIconName\"\n    v-if=\"isIconType\"\n    :size=\"iconSize\"\n  />\n  <div\n    v-else-if=\"isContactCenterType\"\n    :class=\"contactCenterIconClasses\"\n  />\n  <div\n    v-else-if=\"isDialbotType\"\n    :class=\"dialbotClasses\"\n    data-qa=\"general-row-dialbot\"\n  >\n    <dt-icon-dialbot\n      size=\"500\"\n    />\n  </div>\n</template>\n\n<script>\nimport {\n  DtIconDialbot,\n  DtIconInbox,\n  DtIconContacts,\n  DtIconHash,\n  DtIconThread,\n  DtIconLayoutTemplate,\n  DtIconLock,\n  DtIconSparkle,\n  DtIconUsers,\n  DtIconExternalLink,\n  DtIconLockFilled,\n  DtIconHashBold,\n  DtIconAtSign,\n  DtIconLaptop2,\n  DtIconCalendarClock,\n} from '@dialpad/dialtone-icons/vue3';\nimport {\n  LEFTBAR_GENERAL_ROW_TYPES as TYPES,\n  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS as COLORS,\n} from '@/recipes/leftbar/general_row/general_row_constants';\n\nconst typeToIcon = new Map([\n  [TYPES.INBOX, DtIconInbox],\n  [TYPES.CONTACTS, DtIconContacts],\n  [TYPES.CHANNELS, DtIconHash],\n  [TYPES.THREADS, DtIconThread],\n  [TYPES.LAUNCHPAD, DtIconLayoutTemplate],\n  [TYPES.LOCKED_CHANNEL, DtIconLock],\n  [TYPES.QUICK_START, DtIconSparkle],\n  [TYPES.COACHING_GROUP, DtIconUsers],\n  [TYPES.COACHING_CENTER, DtIconExternalLink],\n  ['locked channel unread', DtIconLockFilled],\n  ['channel unread', DtIconHashBold],\n  [TYPES.ASSIGNED, DtIconAtSign],\n  [TYPES.DIGITAL, DtIconLaptop2],\n  [TYPES.SCHEDULED, DtIconCalendarClock],\n]);\n\nexport default {\n  name: 'DtRecipeLeftbarGeneralRowIcon',\n  components: {\n    DtIconDialbot,\n    DtIconInbox,\n    DtIconContacts,\n    DtIconHash,\n    DtIconThread,\n    DtIconLayoutTemplate,\n    DtIconLock,\n    DtIconSparkle,\n    DtIconUsers,\n    DtIconExternalLink,\n    DtIconLockFilled,\n    DtIconHashBold,\n    DtIconAtSign,\n    DtIconLaptop2,\n    DtIconCalendarClock,\n  },\n\n  props: {\n    type: {\n      type: String,\n      default: null,\n    },\n\n    color: {\n      type: String,\n      default: null,\n    },\n\n    iconSize: {\n      type: String,\n      default: '300',\n    },\n  },\n\n  computed: {\n    isIconType () {\n      return ![TYPES.DIALBOT, TYPES.CONTACT_CENTER].includes(this.type);\n    },\n\n    isContactCenterType () {\n      return this.type === TYPES.CONTACT_CENTER;\n    },\n\n    isDialbotType () {\n      return this.type === TYPES.DIALBOT;\n    },\n\n    getIconName () {\n      return typeToIcon.get(this.type);\n    },\n\n    contactCenterIconClasses () {\n      return [\n        'dt-leftbar-row__icon-cc',\n        COLORS[this.color],\n      ];\n    },\n\n    dialbotClasses () {\n      return [\n        'd-d-flex',\n        'd-ai-center',\n        'd-jc-center',\n      ];\n    },\n  },\n};\n</script>\n"],"names":["TYPES","DtIconInbox","DtIconContacts","DtIconHash","DtIconThread","DtIconLayoutTemplate","DtIconLock","DtIconSparkle","DtIconUsers","DtIconExternalLink","DtIconLockFilled","DtIconHashBold","DtIconAtSign","DtIconLaptop2","DtIconCalendarClock","DtIconDialbot","COLORS","_createBlock","_resolveDynamicComponent","_createElementBlock","_normalizeClass","_createVNode","_createCommentVNode"],"mappings":";;;;;;AA4CA,MAAM,aAAa,oBAAI,IAAI;AAAA,EACzB,CAACA,sBAAK,0BAAC,OAAOC,gBAAW;AAAA,EACzB,CAACD,sBAAK,0BAAC,UAAUE,mBAAc;AAAA,EAC/B,CAACF,sBAAK,0BAAC,UAAUG,eAAU;AAAA,EAC3B,CAACH,sBAAK,0BAAC,SAASI,iBAAY;AAAA,EAC5B,CAACJ,sBAAK,0BAAC,WAAWK,yBAAoB;AAAA,EACtC,CAACL,sBAAK,0BAAC,gBAAgBM,eAAU;AAAA,EACjC,CAACN,sBAAK,0BAAC,aAAaO,kBAAa;AAAA,EACjC,CAACP,sBAAK,0BAAC,gBAAgBQ,gBAAW;AAAA,EAClC,CAACR,sBAAK,0BAAC,iBAAiBS,uBAAkB;AAAA,EAC1C,CAAC,yBAAyBC,KAAAA,gBAAgB;AAAA,EAC1C,CAAC,kBAAkBC,KAAAA,cAAc;AAAA,EACjC,CAACX,sBAAK,0BAAC,UAAUY,iBAAY;AAAA,EAC7B,CAACZ,sBAAK,0BAAC,SAASa,kBAAa;AAAA,EAC7B,CAACb,sBAAK,0BAAC,WAAWc,wBAAmB;AACvC,CAAC;AAED,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EACN,YAAY;AAAA,mBACVC,KAAa;AAAA,iBACbd,KAAW;AAAA,IACX,gBAAAC,KAAc;AAAA,gBACdC,KAAU;AAAA,kBACVC,KAAY;AAAA,IACZ,sBAAAC,KAAoB;AAAA,gBACpBC,KAAU;AAAA,mBACVC,KAAa;AAAA,iBACbC,KAAW;AAAA,IACX,oBAAAC,KAAkB;AAAA,IAClB,kBAAAC,KAAgB;AAAA,IAChB,gBAAAC,KAAc;AAAA,kBACdC,KAAY;AAAA,mBACZC,KAAa;AAAA,IACb,qBAAAC,KAAmB;AAAA,EACpB;AAAA,EAED,OAAO;AAAA,IACL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,IAED,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,IAED,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,UAAU;AAAA,IACR,aAAc;AACZ,aAAO,CAAC,CAACd,gDAAM,SAASA,sBAAK,0BAAC,cAAc,EAAE,SAAS,KAAK,IAAI;AAAA,IACjE;AAAA,IAED,sBAAuB;AACrB,aAAO,KAAK,SAASA,sBAAK,0BAAC;AAAA,IAC5B;AAAA,IAED,gBAAiB;AACf,aAAO,KAAK,SAASA,sBAAK,0BAAC;AAAA,IAC5B;AAAA,IAED,cAAe;AACb,aAAO,WAAW,IAAI,KAAK,IAAI;AAAA,IAChC;AAAA,IAED,2BAA4B;AAC1B,aAAO;AAAA,QACL;AAAA,QACAgB,sBAAM,0CAAC,KAAK,KAAK;AAAA;IAEpB;AAAA,IAED,iBAAkB;AAChB,aAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA;IAEH;AAAA,EACF;AACH;;;SA/HU,SAAU,+BAFlBC,IAIE,YALJC,4BAES,SAAW,WAAA,GAAA;AAAA,IAFpB,KAAA;AAAA,IAIK,MAAM,OAAQ;AAAA,2BAGJ,SAAmB,wCADhCC,IAGE,mBAAA,OAAA;AAAA,IATJ,KAAA;AAAA,IAQK,OARLC,IAAAA,eAQY,SAAwB,wBAAA;AAAA,iBAGrB,SAAa,kCAD1BD,IAQM,mBAAA,OAAA;AAAA,IAlBR,KAAA;AAAA,IAYK,OAZLC,IAAAA,eAYY,SAAc,cAAA;AAAA,IACtB,WAAQ;AAAA;IAERC,IAAAA,YAEE,4BAAA,EADA,MAAK,MAAK,CAAA;AAAA,WAhBhBC,IAAA,mBAAA,IAAA,IAAA;;;;"}
+{"version":3,"file":"leftbar_general_row_icon.vue.cjs","sources":["../../../../recipes/leftbar/general_row/leftbar_general_row_icon.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"getIconName\"\n    v-if=\"isIconType\"\n    :size=\"iconSize\"\n  />\n  <div\n    v-else-if=\"isContactCenterType\"\n    :class=\"contactCenterIconClasses\"\n  />\n  <div\n    v-else-if=\"isDialbotType\"\n    :class=\"dialbotClasses\"\n    data-qa=\"general-row-dialbot\"\n  >\n    <dt-icon-dialbot\n      size=\"500\"\n    />\n  </div>\n</template>\n\n<script>\nimport {\n  DtIconDialbot,\n  DtIconInbox,\n  DtIconContacts,\n  DtIconHash,\n  DtIconThread,\n  DtIconLayoutTemplate,\n  DtIconLock,\n  DtIconSparkle,\n  DtIconUsers,\n  DtIconExternalLink,\n  DtIconLockFilled,\n  DtIconHashBold,\n  DtIconAtSign,\n  DtIconLaptop2,\n  DtIconCalendarClock,\n} from '@dialpad/dialtone-icons/vue3';\nimport {\n  LEFTBAR_GENERAL_ROW_TYPES as TYPES,\n  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS as COLORS,\n} from '@/recipes/leftbar/general_row/general_row_constants';\n\nconst typeToIcon = new Map([\n  [TYPES.INBOX, DtIconInbox],\n  [TYPES.CONTACTS, DtIconContacts],\n  [TYPES.CHANNELS, DtIconHash],\n  [TYPES.THREADS, DtIconThread],\n  [TYPES.LAUNCHPAD, DtIconLayoutTemplate],\n  [TYPES.LOCKED_CHANNEL, DtIconLock],\n  [TYPES.QUICK_START, DtIconSparkle],\n  [TYPES.COACHING_GROUP, DtIconUsers],\n  [TYPES.COACHING_CENTER, DtIconExternalLink],\n  ['locked channel unread', DtIconLockFilled],\n  ['channel unread', DtIconHashBold],\n  [TYPES.ASSIGNED, DtIconAtSign],\n  [TYPES.DIGITAL, DtIconLaptop2],\n  [TYPES.SCHEDULED, DtIconCalendarClock],\n]);\n\nexport default {\n  name: 'DtRecipeLeftbarGeneralRowIcon',\n  components: {\n    DtIconDialbot,\n    DtIconInbox,\n    DtIconContacts,\n    DtIconHash,\n    DtIconThread,\n    DtIconLayoutTemplate,\n    DtIconLock,\n    DtIconSparkle,\n    DtIconUsers,\n    DtIconExternalLink,\n    DtIconLockFilled,\n    DtIconHashBold,\n    DtIconAtSign,\n    DtIconLaptop2,\n    DtIconCalendarClock,\n  },\n\n  props: {\n    type: {\n      type: String,\n      default: null,\n    },\n\n    color: {\n      type: String,\n      default: null,\n    },\n\n    iconSize: {\n      type: String,\n      default: '300',\n    },\n  },\n\n  computed: {\n    isIconType () {\n      return ![TYPES.DIALBOT, TYPES.CONTACT_CENTER].includes(this.type);\n    },\n\n    isContactCenterType () {\n      return this.type === TYPES.CONTACT_CENTER;\n    },\n\n    isDialbotType () {\n      return this.type === TYPES.DIALBOT;\n    },\n\n    getIconName () {\n      return typeToIcon.get(this.type);\n    },\n\n    contactCenterIconClasses () {\n      return [\n        'd-recipe-leftbar-row__icon-cc',\n        COLORS[this.color],\n      ];\n    },\n\n    dialbotClasses () {\n      return [\n        'd-d-flex',\n        'd-ai-center',\n        'd-jc-center',\n      ];\n    },\n  },\n};\n</script>\n"],"names":["TYPES","DtIconInbox","DtIconContacts","DtIconHash","DtIconThread","DtIconLayoutTemplate","DtIconLock","DtIconSparkle","DtIconUsers","DtIconExternalLink","DtIconLockFilled","DtIconHashBold","DtIconAtSign","DtIconLaptop2","DtIconCalendarClock","DtIconDialbot","COLORS","_createBlock","_resolveDynamicComponent","_createElementBlock","_normalizeClass","_createVNode","_createCommentVNode"],"mappings":";;;;;;AA4CA,MAAM,aAAa,oBAAI,IAAI;AAAA,EACzB,CAACA,sBAAK,0BAAC,OAAOC,gBAAW;AAAA,EACzB,CAACD,sBAAK,0BAAC,UAAUE,mBAAc;AAAA,EAC/B,CAACF,sBAAK,0BAAC,UAAUG,eAAU;AAAA,EAC3B,CAACH,sBAAK,0BAAC,SAASI,iBAAY;AAAA,EAC5B,CAACJ,sBAAK,0BAAC,WAAWK,yBAAoB;AAAA,EACtC,CAACL,sBAAK,0BAAC,gBAAgBM,eAAU;AAAA,EACjC,CAACN,sBAAK,0BAAC,aAAaO,kBAAa;AAAA,EACjC,CAACP,sBAAK,0BAAC,gBAAgBQ,gBAAW;AAAA,EAClC,CAACR,sBAAK,0BAAC,iBAAiBS,uBAAkB;AAAA,EAC1C,CAAC,yBAAyBC,KAAAA,gBAAgB;AAAA,EAC1C,CAAC,kBAAkBC,KAAAA,cAAc;AAAA,EACjC,CAACX,sBAAK,0BAAC,UAAUY,iBAAY;AAAA,EAC7B,CAACZ,sBAAK,0BAAC,SAASa,kBAAa;AAAA,EAC7B,CAACb,sBAAK,0BAAC,WAAWc,wBAAmB;AACvC,CAAC;AAED,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EACN,YAAY;AAAA,mBACVC,KAAa;AAAA,iBACbd,KAAW;AAAA,IACX,gBAAAC,KAAc;AAAA,gBACdC,KAAU;AAAA,kBACVC,KAAY;AAAA,IACZ,sBAAAC,KAAoB;AAAA,gBACpBC,KAAU;AAAA,mBACVC,KAAa;AAAA,iBACbC,KAAW;AAAA,IACX,oBAAAC,KAAkB;AAAA,IAClB,kBAAAC,KAAgB;AAAA,IAChB,gBAAAC,KAAc;AAAA,kBACdC,KAAY;AAAA,mBACZC,KAAa;AAAA,IACb,qBAAAC,KAAmB;AAAA,EACpB;AAAA,EAED,OAAO;AAAA,IACL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,IAED,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,IAED,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,UAAU;AAAA,IACR,aAAc;AACZ,aAAO,CAAC,CAACd,gDAAM,SAASA,sBAAK,0BAAC,cAAc,EAAE,SAAS,KAAK,IAAI;AAAA,IACjE;AAAA,IAED,sBAAuB;AACrB,aAAO,KAAK,SAASA,sBAAK,0BAAC;AAAA,IAC5B;AAAA,IAED,gBAAiB;AACf,aAAO,KAAK,SAASA,sBAAK,0BAAC;AAAA,IAC5B;AAAA,IAED,cAAe;AACb,aAAO,WAAW,IAAI,KAAK,IAAI;AAAA,IAChC;AAAA,IAED,2BAA4B;AAC1B,aAAO;AAAA,QACL;AAAA,QACAgB,sBAAM,0CAAC,KAAK,KAAK;AAAA;IAEpB;AAAA,IAED,iBAAkB;AAChB,aAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA;IAEH;AAAA,EACF;AACH;;;SA/HU,SAAU,+BAFlBC,IAIE,YALJC,4BAES,SAAW,WAAA,GAAA;AAAA,IAFpB,KAAA;AAAA,IAIK,MAAM,OAAQ;AAAA,2BAGJ,SAAmB,wCADhCC,IAGE,mBAAA,OAAA;AAAA,IATJ,KAAA;AAAA,IAQK,OARLC,IAAAA,eAQY,SAAwB,wBAAA;AAAA,iBAGrB,SAAa,kCAD1BD,IAQM,mBAAA,OAAA;AAAA,IAlBR,KAAA;AAAA,IAYK,OAZLC,IAAAA,eAYY,SAAc,cAAA;AAAA,IACtB,WAAQ;AAAA;IAERC,IAAAA,YAEE,4BAAA,EADA,MAAK,MAAK,CAAA;AAAA,WAhBhBC,IAAA,mBAAA,IAAA,IAAA;;;;"}

package/dist/vue3/recipes/leftbar/general_row/leftbar_general_row_icon.vue.js

@@ -66,7 +66,7 @@ const _sfc_main = {
     },
     contactCenterIconClasses() {
       return [
-        "dt-leftbar-row__icon-cc",
+        "d-recipe-leftbar-row__icon-cc",
         LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS[this.color]
       ];
     },

package/dist/vue3/recipes/leftbar/general_row/leftbar_general_row_icon.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"leftbar_general_row_icon.vue.js","sources":["../../../../recipes/leftbar/general_row/leftbar_general_row_icon.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"getIconName\"\n    v-if=\"isIconType\"\n    :size=\"iconSize\"\n  />\n  <div\n    v-else-if=\"isContactCenterType\"\n    :class=\"contactCenterIconClasses\"\n  />\n  <div\n    v-else-if=\"isDialbotType\"\n    :class=\"dialbotClasses\"\n    data-qa=\"general-row-dialbot\"\n  >\n    <dt-icon-dialbot\n      size=\"500\"\n    />\n  </div>\n</template>\n\n<script>\nimport {\n  DtIconDialbot,\n  DtIconInbox,\n  DtIconContacts,\n  DtIconHash,\n  DtIconThread,\n  DtIconLayoutTemplate,\n  DtIconLock,\n  DtIconSparkle,\n  DtIconUsers,\n  DtIconExternalLink,\n  DtIconLockFilled,\n  DtIconHashBold,\n  DtIconAtSign,\n  DtIconLaptop2,\n  DtIconCalendarClock,\n} from '@dialpad/dialtone-icons/vue3';\nimport {\n  LEFTBAR_GENERAL_ROW_TYPES as TYPES,\n  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS as COLORS,\n} from '@/recipes/leftbar/general_row/general_row_constants';\n\nconst typeToIcon = new Map([\n  [TYPES.INBOX, DtIconInbox],\n  [TYPES.CONTACTS, DtIconContacts],\n  [TYPES.CHANNELS, DtIconHash],\n  [TYPES.THREADS, DtIconThread],\n  [TYPES.LAUNCHPAD, DtIconLayoutTemplate],\n  [TYPES.LOCKED_CHANNEL, DtIconLock],\n  [TYPES.QUICK_START, DtIconSparkle],\n  [TYPES.COACHING_GROUP, DtIconUsers],\n  [TYPES.COACHING_CENTER, DtIconExternalLink],\n  ['locked channel unread', DtIconLockFilled],\n  ['channel unread', DtIconHashBold],\n  [TYPES.ASSIGNED, DtIconAtSign],\n  [TYPES.DIGITAL, DtIconLaptop2],\n  [TYPES.SCHEDULED, DtIconCalendarClock],\n]);\n\nexport default {\n  name: 'DtRecipeLeftbarGeneralRowIcon',\n  components: {\n    DtIconDialbot,\n    DtIconInbox,\n    DtIconContacts,\n    DtIconHash,\n    DtIconThread,\n    DtIconLayoutTemplate,\n    DtIconLock,\n    DtIconSparkle,\n    DtIconUsers,\n    DtIconExternalLink,\n    DtIconLockFilled,\n    DtIconHashBold,\n    DtIconAtSign,\n    DtIconLaptop2,\n    DtIconCalendarClock,\n  },\n\n  props: {\n    type: {\n      type: String,\n      default: null,\n    },\n\n    color: {\n      type: String,\n      default: null,\n    },\n\n    iconSize: {\n      type: String,\n      default: '300',\n    },\n  },\n\n  computed: {\n    isIconType () {\n      return ![TYPES.DIALBOT, TYPES.CONTACT_CENTER].includes(this.type);\n    },\n\n    isContactCenterType () {\n      return this.type === TYPES.CONTACT_CENTER;\n    },\n\n    isDialbotType () {\n      return this.type === TYPES.DIALBOT;\n    },\n\n    getIconName () {\n      return typeToIcon.get(this.type);\n    },\n\n    contactCenterIconClasses () {\n      return [\n        'dt-leftbar-row__icon-cc',\n        COLORS[this.color],\n      ];\n    },\n\n    dialbotClasses () {\n      return [\n        'd-d-flex',\n        'd-ai-center',\n        'd-jc-center',\n      ];\n    },\n  },\n};\n</script>\n"],"names":["TYPES","COLORS","_createBlock","_resolveDynamicComponent","_createElementBlock","_normalizeClass","_createVNode","_createCommentVNode"],"mappings":";;;;AA4CA,MAAM,aAAa,oBAAI,IAAI;AAAA,EACzB,CAACA,0BAAM,OAAO,WAAW;AAAA,EACzB,CAACA,0BAAM,UAAU,cAAc;AAAA,EAC/B,CAACA,0BAAM,UAAU,UAAU;AAAA,EAC3B,CAACA,0BAAM,SAAS,YAAY;AAAA,EAC5B,CAACA,0BAAM,WAAW,oBAAoB;AAAA,EACtC,CAACA,0BAAM,gBAAgB,UAAU;AAAA,EACjC,CAACA,0BAAM,aAAa,aAAa;AAAA,EACjC,CAACA,0BAAM,gBAAgB,WAAW;AAAA,EAClC,CAACA,0BAAM,iBAAiB,kBAAkB;AAAA,EAC1C,CAAC,yBAAyB,gBAAgB;AAAA,EAC1C,CAAC,kBAAkB,cAAc;AAAA,EACjC,CAACA,0BAAM,UAAU,YAAY;AAAA,EAC7B,CAACA,0BAAM,SAAS,aAAa;AAAA,EAC7B,CAACA,0BAAM,WAAW,mBAAmB;AACvC,CAAC;AAED,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EACN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAAA,EAED,OAAO;AAAA,IACL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,IAED,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,IAED,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,UAAU;AAAA,IACR,aAAc;AACZ,aAAO,CAAC,CAACA,0BAAM,SAASA,0BAAM,cAAc,EAAE,SAAS,KAAK,IAAI;AAAA,IACjE;AAAA,IAED,sBAAuB;AACrB,aAAO,KAAK,SAASA,0BAAM;AAAA,IAC5B;AAAA,IAED,gBAAiB;AACf,aAAO,KAAK,SAASA,0BAAM;AAAA,IAC5B;AAAA,IAED,cAAe;AACb,aAAO,WAAW,IAAI,KAAK,IAAI;AAAA,IAChC;AAAA,IAED,2BAA4B;AAC1B,aAAO;AAAA,QACL;AAAA,QACAC,0CAAO,KAAK,KAAK;AAAA;IAEpB;AAAA,IAED,iBAAkB;AAChB,aAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA;IAEH;AAAA,EACF;AACH;;;SA/HU,SAAU,2BAFlBC,YADFC,wBAES,SAAW,WAAA,GAAA;AAAA,IAFpB,KAAA;AAAA,IAIK,MAAM,OAAQ;AAAA,2BAGJ,SAAmB,oCADhCC,mBAGE,OAAA;AAAA,IATJ,KAAA;AAAA,IAQK,OARLC,eAQY,SAAwB,wBAAA;AAAA,iBAGrB,SAAa,8BAD1BD,mBAQM,OAAA;AAAA,IAlBR,KAAA;AAAA,IAYK,OAZLC,eAYY,SAAc,cAAA;AAAA,IACtB,WAAQ;AAAA;IAERC,YAEE,4BAAA,EADA,MAAK,MAAK,CAAA;AAAA,WAhBhBC,mBAAA,IAAA,IAAA;;;"}
+{"version":3,"file":"leftbar_general_row_icon.vue.js","sources":["../../../../recipes/leftbar/general_row/leftbar_general_row_icon.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"getIconName\"\n    v-if=\"isIconType\"\n    :size=\"iconSize\"\n  />\n  <div\n    v-else-if=\"isContactCenterType\"\n    :class=\"contactCenterIconClasses\"\n  />\n  <div\n    v-else-if=\"isDialbotType\"\n    :class=\"dialbotClasses\"\n    data-qa=\"general-row-dialbot\"\n  >\n    <dt-icon-dialbot\n      size=\"500\"\n    />\n  </div>\n</template>\n\n<script>\nimport {\n  DtIconDialbot,\n  DtIconInbox,\n  DtIconContacts,\n  DtIconHash,\n  DtIconThread,\n  DtIconLayoutTemplate,\n  DtIconLock,\n  DtIconSparkle,\n  DtIconUsers,\n  DtIconExternalLink,\n  DtIconLockFilled,\n  DtIconHashBold,\n  DtIconAtSign,\n  DtIconLaptop2,\n  DtIconCalendarClock,\n} from '@dialpad/dialtone-icons/vue3';\nimport {\n  LEFTBAR_GENERAL_ROW_TYPES as TYPES,\n  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS as COLORS,\n} from '@/recipes/leftbar/general_row/general_row_constants';\n\nconst typeToIcon = new Map([\n  [TYPES.INBOX, DtIconInbox],\n  [TYPES.CONTACTS, DtIconContacts],\n  [TYPES.CHANNELS, DtIconHash],\n  [TYPES.THREADS, DtIconThread],\n  [TYPES.LAUNCHPAD, DtIconLayoutTemplate],\n  [TYPES.LOCKED_CHANNEL, DtIconLock],\n  [TYPES.QUICK_START, DtIconSparkle],\n  [TYPES.COACHING_GROUP, DtIconUsers],\n  [TYPES.COACHING_CENTER, DtIconExternalLink],\n  ['locked channel unread', DtIconLockFilled],\n  ['channel unread', DtIconHashBold],\n  [TYPES.ASSIGNED, DtIconAtSign],\n  [TYPES.DIGITAL, DtIconLaptop2],\n  [TYPES.SCHEDULED, DtIconCalendarClock],\n]);\n\nexport default {\n  name: 'DtRecipeLeftbarGeneralRowIcon',\n  components: {\n    DtIconDialbot,\n    DtIconInbox,\n    DtIconContacts,\n    DtIconHash,\n    DtIconThread,\n    DtIconLayoutTemplate,\n    DtIconLock,\n    DtIconSparkle,\n    DtIconUsers,\n    DtIconExternalLink,\n    DtIconLockFilled,\n    DtIconHashBold,\n    DtIconAtSign,\n    DtIconLaptop2,\n    DtIconCalendarClock,\n  },\n\n  props: {\n    type: {\n      type: String,\n      default: null,\n    },\n\n    color: {\n      type: String,\n      default: null,\n    },\n\n    iconSize: {\n      type: String,\n      default: '300',\n    },\n  },\n\n  computed: {\n    isIconType () {\n      return ![TYPES.DIALBOT, TYPES.CONTACT_CENTER].includes(this.type);\n    },\n\n    isContactCenterType () {\n      return this.type === TYPES.CONTACT_CENTER;\n    },\n\n    isDialbotType () {\n      return this.type === TYPES.DIALBOT;\n    },\n\n    getIconName () {\n      return typeToIcon.get(this.type);\n    },\n\n    contactCenterIconClasses () {\n      return [\n        'd-recipe-leftbar-row__icon-cc',\n        COLORS[this.color],\n      ];\n    },\n\n    dialbotClasses () {\n      return [\n        'd-d-flex',\n        'd-ai-center',\n        'd-jc-center',\n      ];\n    },\n  },\n};\n</script>\n"],"names":["TYPES","COLORS","_createBlock","_resolveDynamicComponent","_createElementBlock","_normalizeClass","_createVNode","_createCommentVNode"],"mappings":";;;;AA4CA,MAAM,aAAa,oBAAI,IAAI;AAAA,EACzB,CAACA,0BAAM,OAAO,WAAW;AAAA,EACzB,CAACA,0BAAM,UAAU,cAAc;AAAA,EAC/B,CAACA,0BAAM,UAAU,UAAU;AAAA,EAC3B,CAACA,0BAAM,SAAS,YAAY;AAAA,EAC5B,CAACA,0BAAM,WAAW,oBAAoB;AAAA,EACtC,CAACA,0BAAM,gBAAgB,UAAU;AAAA,EACjC,CAACA,0BAAM,aAAa,aAAa;AAAA,EACjC,CAACA,0BAAM,gBAAgB,WAAW;AAAA,EAClC,CAACA,0BAAM,iBAAiB,kBAAkB;AAAA,EAC1C,CAAC,yBAAyB,gBAAgB;AAAA,EAC1C,CAAC,kBAAkB,cAAc;AAAA,EACjC,CAACA,0BAAM,UAAU,YAAY;AAAA,EAC7B,CAACA,0BAAM,SAAS,aAAa;AAAA,EAC7B,CAACA,0BAAM,WAAW,mBAAmB;AACvC,CAAC;AAED,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EACN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAAA,EAED,OAAO;AAAA,IACL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,IAED,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,IAED,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,UAAU;AAAA,IACR,aAAc;AACZ,aAAO,CAAC,CAACA,0BAAM,SAASA,0BAAM,cAAc,EAAE,SAAS,KAAK,IAAI;AAAA,IACjE;AAAA,IAED,sBAAuB;AACrB,aAAO,KAAK,SAASA,0BAAM;AAAA,IAC5B;AAAA,IAED,gBAAiB;AACf,aAAO,KAAK,SAASA,0BAAM;AAAA,IAC5B;AAAA,IAED,cAAe;AACb,aAAO,WAAW,IAAI,KAAK,IAAI;AAAA,IAChC;AAAA,IAED,2BAA4B;AAC1B,aAAO;AAAA,QACL;AAAA,QACAC,0CAAO,KAAK,KAAK;AAAA;IAEpB;AAAA,IAED,iBAAkB;AAChB,aAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA;IAEH;AAAA,EACF;AACH;;;SA/HU,SAAU,2BAFlBC,YADFC,wBAES,SAAW,WAAA,GAAA;AAAA,IAFpB,KAAA;AAAA,IAIK,MAAM,OAAQ;AAAA,2BAGJ,SAAmB,oCADhCC,mBAGE,OAAA;AAAA,IATJ,KAAA;AAAA,IAQK,OARLC,eAQY,SAAwB,wBAAA;AAAA,iBAGrB,SAAa,8BAD1BD,mBAQM,OAAA;AAAA,IAlBR,KAAA;AAAA,IAYK,OAZLC,eAYY,SAAc,cAAA;AAAA,IACtB,WAAQ;AAAA;IAERC,YAEE,4BAAA,EADA,MAAK,MAAK,CAAA;AAAA,WAhBhBC,mBAAA,IAAA,IAAA;;;"}

package/dist/vue3/recipes/leftbar/unread_pill/unread_pill.vue.cjs

@@ -3,7 +3,6 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const vue3 = require("@dialpad/dialtone-icons/vue3");
 const unread_pill_constants = require("./unread_pill_constants.cjs");
 const vue = require("vue");
-;/* empty css                   */
 const _pluginVue_exportHelper = require("../../../_virtual/_plugin-vue_export-helper.cjs");
 const _sfc_main = {
   name: "DtRecipeUnreadPill",
@@ -48,14 +47,14 @@ const _sfc_main = {
     }
   }
 };
-const _hoisted_1 = { "data-qa": "dt-leftbar-unread-pill__label" };
+const _hoisted_1 = { "data-qa": "dt-recipe-leftbar-unread-pill__label" };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_icon_arrow_up = vue.resolveComponent("dt-icon-arrow-up");
   const _component_dt_icon_arrow_down = vue.resolveComponent("dt-icon-arrow-down");
   return vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
-    class: ["dt-leftbar-unread-pill", `dt-leftbar-unread-pill--${$props.kind}`],
+    class: ["d-recipe-leftbar-unread-pill", `d-recipe-leftbar-unread-pill-${$props.kind}`],
     type: "button",
-    "data-qa": "dt-leftbar-unread-pill"
+    "data-qa": "dt-recipe-leftbar-unread-pill"
   }, vue.toHandlers($options.unreadChipListeners, true)), [
     $props.direction === "up" ? (vue.openBlock(), vue.createBlock(_component_dt_icon_arrow_up, {
       key: 0,

package/dist/vue3/recipes/leftbar/unread_pill/unread_pill.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"unread_pill.vue.cjs","sources":["../../../../recipes/leftbar/unread_pill/unread_pill.vue"],"sourcesContent":["<template>\n  <button\n    :class=\"['dt-leftbar-unread-pill', `dt-leftbar-unread-pill--${kind}`]\"\n    type=\"button\"\n    data-qa=\"dt-leftbar-unread-pill\"\n    v-on=\"unreadChipListeners\"\n  >\n    <dt-icon-arrow-up\n      v-if=\"direction === 'up'\"\n      size=\"300\"\n    />\n    <dt-icon-arrow-down\n      v-else\n      size=\"300\"\n    />\n    <span data-qa=\"dt-leftbar-unread-pill__label\">\n      <slot />\n    </span>\n  </button>\n</template>\n\n<script>\nimport { DtIconArrowUp, DtIconArrowDown } from '@dialpad/dialtone-icons/vue3';\nimport { UNREAD_PILL_DIRECTIONS, UNREAD_PILL_KINDS } from './unread_pill_constants';\nexport default {\n  name: 'DtRecipeUnreadPill',\n\n  components: {\n    DtIconArrowUp,\n    DtIconArrowDown,\n  },\n\n  props: {\n    /**\n     * The kind of unread pill which determines the styling\n     * @values 'mentions', 'messages'\n     **/\n    kind: {\n      type: String,\n      required: true,\n      validator: (kind) => UNREAD_PILL_KINDS.includes(kind),\n    },\n\n    /**\n     * The direction of the arrow icon\n     * @values 'up', 'down'\n     **/\n    direction: {\n      type: String,\n      required: true,\n      validator: (dir) => UNREAD_PILL_DIRECTIONS.includes(dir),\n    },\n  },\n\n  emits: [\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  computed: {\n    unreadChipListeners () {\n      return {\n        click: event => this.$emit('click', event),\n      };\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-leftbar-unread-pill {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--dt-space-200) var(--dt-space-500) var(--dt-space-200) var(--dt-space-400);\n  gap: var(--dt-space-300);\n  font-size: var(--dt-font-size-100);\n  box-shadow: var(--dt-shadow-medium);\n  border-radius: var(--dt-size-radius-pill);\n  border: none;\n  line-height: var(--dt-font-line-height-600);\n  cursor: pointer;\n\n  &--mentions {\n    font-weight: var(--dt-font-weight-bold);\n    background-color: var(--dt-theme-mention-color-background);\n    color: var(--dt-theme-mention-color-foreground);\n  }\n\n  &--messages {\n    background-color: var(--dt-color-surface-contrast);\n    color: var(--dt-color-foreground-secondary-inverted);\n  }\n}\n</style>\n"],"names":["DtIconArrowUp","DtIconArrowDown","UNREAD_PILL_KINDS","UNREAD_PILL_DIRECTIONS","_openBlock","_createElementBlock","_mergeProps","_toHandlers","_createBlock","_createElementVNode","_renderSlot"],"mappings":";;;;;;;AAwBA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,mBACVA,KAAa;AAAA,IACb,iBAAAC,KAAe;AAAA,EAChB;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,UAAU;AAAA,MACV,WAAW,CAAC,SAASC,wCAAkB,SAAS,IAAI;AAAA,IACrD;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,UAAU;AAAA,MACV,WAAW,CAAC,QAAQC,6CAAuB,SAAS,GAAG;AAAA,IACxD;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA,EACD;AAAA,EAED,UAAU;AAAA,IACR,sBAAuB;AACrB,aAAO;AAAA,QACL,OAAO,WAAS,KAAK,MAAM,SAAS,KAAK;AAAA;IAE5C;AAAA,EACF;AACH;AAxDU,MAAA,aAAA,EAAA,WAAQ,gCAA+B;;;;AAd/C,SAAAC,cAAA,GAAAC,uBAiBS,UAjBTC,IAAAA,WAiBS;AAAA,IAhBN,6DAA6D,OAAI,IAAA,EAAA;AAAA,IAClE,MAAK;AAAA,IACL,WAAQ;AAAA,EACR,GAAAC,IAAA,WAA0B,SAAD,qBAAA,IAAA,CAAA,GAAA;AAAA,IAGjB,OAAS,cAAA,yBADjBC,IAGE,YAAA,6BAAA;AAAA,MAVN,KAAA;AAAA,MASM,MAAK;AAAA,4BAEPA,IAGE,YAAA,+BAAA;AAAA,MAdN,KAAA;AAAA,MAaM,MAAK;AAAA;IAEPC,IAAA,mBAEO,QAFP,YAEO;AAAA,MADLC,eAAQ,KAAA,QAAA,SAAA;AAAA;;;;;"}
+{"version":3,"file":"unread_pill.vue.cjs","sources":["../../../../recipes/leftbar/unread_pill/unread_pill.vue"],"sourcesContent":["<template>\n  <button\n    :class=\"['d-recipe-leftbar-unread-pill', `d-recipe-leftbar-unread-pill-${kind}`]\"\n    type=\"button\"\n    data-qa=\"dt-recipe-leftbar-unread-pill\"\n    v-on=\"unreadChipListeners\"\n  >\n    <dt-icon-arrow-up\n      v-if=\"direction === 'up'\"\n      size=\"300\"\n    />\n    <dt-icon-arrow-down\n      v-else\n      size=\"300\"\n    />\n    <span data-qa=\"dt-recipe-leftbar-unread-pill__label\">\n      <slot />\n    </span>\n  </button>\n</template>\n\n<script>\nimport { DtIconArrowUp, DtIconArrowDown } from '@dialpad/dialtone-icons/vue3';\nimport { UNREAD_PILL_DIRECTIONS, UNREAD_PILL_KINDS } from './unread_pill_constants';\nexport default {\n  name: 'DtRecipeUnreadPill',\n\n  components: {\n    DtIconArrowUp,\n    DtIconArrowDown,\n  },\n\n  props: {\n    /**\n     * The kind of unread pill which determines the styling\n     * @values 'mentions', 'messages'\n     **/\n    kind: {\n      type: String,\n      required: true,\n      validator: (kind) => UNREAD_PILL_KINDS.includes(kind),\n    },\n\n    /**\n     * The direction of the arrow icon\n     * @values 'up', 'down'\n     **/\n    direction: {\n      type: String,\n      required: true,\n      validator: (dir) => UNREAD_PILL_DIRECTIONS.includes(dir),\n    },\n  },\n\n  emits: [\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  computed: {\n    unreadChipListeners () {\n      return {\n        click: event => this.$emit('click', event),\n      };\n    },\n  },\n};\n</script>\n"],"names":["DtIconArrowUp","DtIconArrowDown","UNREAD_PILL_KINDS","UNREAD_PILL_DIRECTIONS","_openBlock","_createElementBlock","_mergeProps","_toHandlers","_createBlock","_createElementVNode","_renderSlot"],"mappings":";;;;;;AAwBA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,mBACVA,KAAa;AAAA,IACb,iBAAAC,KAAe;AAAA,EAChB;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,UAAU;AAAA,MACV,WAAW,CAAC,SAASC,wCAAkB,SAAS,IAAI;AAAA,IACrD;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,UAAU;AAAA,MACV,WAAW,CAAC,QAAQC,6CAAuB,SAAS,GAAG;AAAA,IACxD;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA,EACD;AAAA,EAED,UAAU;AAAA,IACR,sBAAuB;AACrB,aAAO;AAAA,QACL,OAAO,WAAS,KAAK,MAAM,SAAS,KAAK;AAAA;IAE5C;AAAA,EACF;AACH;AAxDU,MAAA,aAAA,EAAA,WAAQ,uCAAsC;;;;AAdtD,SAAAC,cAAA,GAAAC,uBAiBS,UAjBTC,IAAAA,WAiBS;AAAA,IAhBN,wEAAwE,OAAI,IAAA,EAAA;AAAA,IAC7E,MAAK;AAAA,IACL,WAAQ;AAAA,EACR,GAAAC,IAAA,WAA0B,SAAD,qBAAA,IAAA,CAAA,GAAA;AAAA,IAGjB,OAAS,cAAA,yBADjBC,IAGE,YAAA,6BAAA;AAAA,MAVN,KAAA;AAAA,MASM,MAAK;AAAA,4BAEPA,IAGE,YAAA,+BAAA;AAAA,MAdN,KAAA;AAAA,MAaM,MAAK;AAAA;IAEPC,IAAA,mBAEO,QAFP,YAEO;AAAA,MADLC,eAAQ,KAAA,QAAA,SAAA;AAAA;;;;;"}

package/dist/vue3/recipes/leftbar/unread_pill/unread_pill.vue.js

@@ -1,7 +1,6 @@
 import { DtIconArrowUp, DtIconArrowDown } from "@dialpad/dialtone-icons/vue3";
 import { UNREAD_PILL_KINDS, UNREAD_PILL_DIRECTIONS } from "./unread_pill_constants.js";
 import { resolveComponent, openBlock, createElementBlock, mergeProps, toHandlers, createBlock, createElementVNode, renderSlot } from "vue";
-/* empty css                 */
 import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
 const _sfc_main = {
   name: "DtRecipeUnreadPill",
@@ -46,14 +45,14 @@ const _sfc_main = {
     }
   }
 };
-const _hoisted_1 = { "data-qa": "dt-leftbar-unread-pill__label" };
+const _hoisted_1 = { "data-qa": "dt-recipe-leftbar-unread-pill__label" };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_icon_arrow_up = resolveComponent("dt-icon-arrow-up");
   const _component_dt_icon_arrow_down = resolveComponent("dt-icon-arrow-down");
   return openBlock(), createElementBlock("button", mergeProps({
-    class: ["dt-leftbar-unread-pill", `dt-leftbar-unread-pill--${$props.kind}`],
+    class: ["d-recipe-leftbar-unread-pill", `d-recipe-leftbar-unread-pill-${$props.kind}`],
     type: "button",
-    "data-qa": "dt-leftbar-unread-pill"
+    "data-qa": "dt-recipe-leftbar-unread-pill"
   }, toHandlers($options.unreadChipListeners, true)), [
     $props.direction === "up" ? (openBlock(), createBlock(_component_dt_icon_arrow_up, {
       key: 0,

package/dist/vue3/recipes/leftbar/unread_pill/unread_pill.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"unread_pill.vue.js","sources":["../../../../recipes/leftbar/unread_pill/unread_pill.vue"],"sourcesContent":["<template>\n  <button\n    :class=\"['dt-leftbar-unread-pill', `dt-leftbar-unread-pill--${kind}`]\"\n    type=\"button\"\n    data-qa=\"dt-leftbar-unread-pill\"\n    v-on=\"unreadChipListeners\"\n  >\n    <dt-icon-arrow-up\n      v-if=\"direction === 'up'\"\n      size=\"300\"\n    />\n    <dt-icon-arrow-down\n      v-else\n      size=\"300\"\n    />\n    <span data-qa=\"dt-leftbar-unread-pill__label\">\n      <slot />\n    </span>\n  </button>\n</template>\n\n<script>\nimport { DtIconArrowUp, DtIconArrowDown } from '@dialpad/dialtone-icons/vue3';\nimport { UNREAD_PILL_DIRECTIONS, UNREAD_PILL_KINDS } from './unread_pill_constants';\nexport default {\n  name: 'DtRecipeUnreadPill',\n\n  components: {\n    DtIconArrowUp,\n    DtIconArrowDown,\n  },\n\n  props: {\n    /**\n     * The kind of unread pill which determines the styling\n     * @values 'mentions', 'messages'\n     **/\n    kind: {\n      type: String,\n      required: true,\n      validator: (kind) => UNREAD_PILL_KINDS.includes(kind),\n    },\n\n    /**\n     * The direction of the arrow icon\n     * @values 'up', 'down'\n     **/\n    direction: {\n      type: String,\n      required: true,\n      validator: (dir) => UNREAD_PILL_DIRECTIONS.includes(dir),\n    },\n  },\n\n  emits: [\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  computed: {\n    unreadChipListeners () {\n      return {\n        click: event => this.$emit('click', event),\n      };\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-leftbar-unread-pill {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--dt-space-200) var(--dt-space-500) var(--dt-space-200) var(--dt-space-400);\n  gap: var(--dt-space-300);\n  font-size: var(--dt-font-size-100);\n  box-shadow: var(--dt-shadow-medium);\n  border-radius: var(--dt-size-radius-pill);\n  border: none;\n  line-height: var(--dt-font-line-height-600);\n  cursor: pointer;\n\n  &--mentions {\n    font-weight: var(--dt-font-weight-bold);\n    background-color: var(--dt-theme-mention-color-background);\n    color: var(--dt-theme-mention-color-foreground);\n  }\n\n  &--messages {\n    background-color: var(--dt-color-surface-contrast);\n    color: var(--dt-color-foreground-secondary-inverted);\n  }\n}\n</style>\n"],"names":["_openBlock","_createElementBlock","_mergeProps","_toHandlers","_createBlock","_createElementVNode","_renderSlot"],"mappings":";;;;;AAwBA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,UAAU;AAAA,MACV,WAAW,CAAC,SAAS,kBAAkB,SAAS,IAAI;AAAA,IACrD;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,UAAU;AAAA,MACV,WAAW,CAAC,QAAQ,uBAAuB,SAAS,GAAG;AAAA,IACxD;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA,EACD;AAAA,EAED,UAAU;AAAA,IACR,sBAAuB;AACrB,aAAO;AAAA,QACL,OAAO,WAAS,KAAK,MAAM,SAAS,KAAK;AAAA;IAE5C;AAAA,EACF;AACH;AAxDU,MAAA,aAAA,EAAA,WAAQ,gCAA+B;;;;AAd/C,SAAAA,UAAA,GAAAC,mBAiBS,UAjBTC,WAiBS;AAAA,IAhBN,6DAA6D,OAAI,IAAA,EAAA;AAAA,IAClE,MAAK;AAAA,IACL,WAAQ;AAAA,EACR,GAAAC,WAA0B,SAAD,qBAAA,IAAA,CAAA,GAAA;AAAA,IAGjB,OAAS,cAAA,qBADjBC,YAGE,6BAAA;AAAA,MAVN,KAAA;AAAA,MASM,MAAK;AAAA,wBAEPA,YAGE,+BAAA;AAAA,MAdN,KAAA;AAAA,MAaM,MAAK;AAAA;IAEPC,mBAEO,QAFP,YAEO;AAAA,MADLC,WAAQ,KAAA,QAAA,SAAA;AAAA;;;;"}
+{"version":3,"file":"unread_pill.vue.js","sources":["../../../../recipes/leftbar/unread_pill/unread_pill.vue"],"sourcesContent":["<template>\n  <button\n    :class=\"['d-recipe-leftbar-unread-pill', `d-recipe-leftbar-unread-pill-${kind}`]\"\n    type=\"button\"\n    data-qa=\"dt-recipe-leftbar-unread-pill\"\n    v-on=\"unreadChipListeners\"\n  >\n    <dt-icon-arrow-up\n      v-if=\"direction === 'up'\"\n      size=\"300\"\n    />\n    <dt-icon-arrow-down\n      v-else\n      size=\"300\"\n    />\n    <span data-qa=\"dt-recipe-leftbar-unread-pill__label\">\n      <slot />\n    </span>\n  </button>\n</template>\n\n<script>\nimport { DtIconArrowUp, DtIconArrowDown } from '@dialpad/dialtone-icons/vue3';\nimport { UNREAD_PILL_DIRECTIONS, UNREAD_PILL_KINDS } from './unread_pill_constants';\nexport default {\n  name: 'DtRecipeUnreadPill',\n\n  components: {\n    DtIconArrowUp,\n    DtIconArrowDown,\n  },\n\n  props: {\n    /**\n     * The kind of unread pill which determines the styling\n     * @values 'mentions', 'messages'\n     **/\n    kind: {\n      type: String,\n      required: true,\n      validator: (kind) => UNREAD_PILL_KINDS.includes(kind),\n    },\n\n    /**\n     * The direction of the arrow icon\n     * @values 'up', 'down'\n     **/\n    direction: {\n      type: String,\n      required: true,\n      validator: (dir) => UNREAD_PILL_DIRECTIONS.includes(dir),\n    },\n  },\n\n  emits: [\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  computed: {\n    unreadChipListeners () {\n      return {\n        click: event => this.$emit('click', event),\n      };\n    },\n  },\n};\n</script>\n"],"names":["_openBlock","_createElementBlock","_mergeProps","_toHandlers","_createBlock","_createElementVNode","_renderSlot"],"mappings":";;;;AAwBA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,UAAU;AAAA,MACV,WAAW,CAAC,SAAS,kBAAkB,SAAS,IAAI;AAAA,IACrD;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,UAAU;AAAA,MACV,WAAW,CAAC,QAAQ,uBAAuB,SAAS,GAAG;AAAA,IACxD;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA,EACD;AAAA,EAED,UAAU;AAAA,IACR,sBAAuB;AACrB,aAAO;AAAA,QACL,OAAO,WAAS,KAAK,MAAM,SAAS,KAAK;AAAA;IAE5C;AAAA,EACF;AACH;AAxDU,MAAA,aAAA,EAAA,WAAQ,uCAAsC;;;;AAdtD,SAAAA,UAAA,GAAAC,mBAiBS,UAjBTC,WAiBS;AAAA,IAhBN,wEAAwE,OAAI,IAAA,EAAA;AAAA,IAC7E,MAAK;AAAA,IACL,WAAQ;AAAA,EACR,GAAAC,WAA0B,SAAD,qBAAA,IAAA,CAAA,GAAA;AAAA,IAGjB,OAAS,cAAA,qBADjBC,YAGE,6BAAA;AAAA,MAVN,KAAA;AAAA,MASM,MAAK;AAAA,wBAEPA,YAGE,+BAAA;AAAA,MAdN,KAAA;AAAA,MAaM,MAAK;AAAA;IAEPC,mBAEO,QAFP,YAEO;AAAA,MADLC,WAAQ,KAAA,QAAA,SAAA;AAAA;;;;"}

package/dist/vue3/recipes/notices/top_banner_info/top_banner_info.vue.cjs

@@ -2,7 +2,6 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const top_banner_info_constants = require("./top_banner_info_constants.cjs");
 const vue = require("vue");
-;/* empty css                       */
 const _pluginVue_exportHelper = require("../../../_virtual/_plugin-vue_export-helper.cjs");
 const _sfc_main = {
   name: "DtRecipeTopBannerInfo",
@@ -36,15 +35,15 @@ const _sfc_main = {
     }
   }
 };
-const _hoisted_1 = { class: "dt-top-banner-info__left" };
+const _hoisted_1 = { class: "d-recipe-top-banner-info__left" };
 const _hoisted_2 = {
-  class: "dt-top-banner-info__middle",
+  class: "d-recipe-top-banner-info__middle",
   "data-qa": "banner-info--middle"
 };
-const _hoisted_3 = { class: "dt-top-banner-info__right" };
+const _hoisted_3 = { class: "d-recipe-top-banner-info__right" };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("div", {
-    class: vue.normalizeClass(["dt-top-banner-info", $options.bannerInfoClass]),
+    class: vue.normalizeClass(["d-recipe-top-banner-info", $options.bannerInfoClass]),
     "data-qa": "banner-info"
   }, [
     vue.createElementVNode("div", _hoisted_1, [

package/dist/vue3/recipes/notices/top_banner_info/top_banner_info.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"top_banner_info.vue.cjs","sources":["../../../../recipes/notices/top_banner_info/top_banner_info.vue"],"sourcesContent":["<template>\n  <div\n    class=\"dt-top-banner-info\"\n    :class=\"bannerInfoClass\"\n    data-qa=\"banner-info\"\n  >\n    <div class=\"dt-top-banner-info__left\">\n      <slot name=\"left\" />\n    </div>\n\n    <div\n      class=\"dt-top-banner-info__middle\"\n      data-qa=\"banner-info--middle\"\n    >\n      <slot />\n    </div>\n\n    <div class=\"dt-top-banner-info__right\">\n      <slot name=\"right\" />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { COLOR_CODES } from './top_banner_info_constants';\n\nexport default {\n  name: 'DtRecipeTopBannerInfo',\n\n  props: {\n    /**\n     * color of the banner background\n     */\n    colorCode: {\n      type: String,\n      default: 'green300',\n      validator: function (kind) {\n        return COLOR_CODES.includes(kind);\n      },\n    },\n  },\n\n  computed: {\n    bannerInfoClass () {\n      const bgColors = {\n        // these are too specific, so for now I'm at least updating the resultant semantic value\n        // TODO: breaking change: update to be more abstract\n        green300: 'd-bgc-success',\n        green100: 'd-bgc-success',\n        red200: 'd-bgc-critical',\n        red100: 'd-bgc-critical',\n        gold200: 'd-bgc-warning',\n        gold100: 'd-bgc-warning',\n        black100: 'd-bgc-info',\n        white: 'd-bgc-primary',\n      };\n      return [bgColors[this.colorCode]];\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-top-banner-info {\n  font-size: var(--dt-font-size-100);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  color: var(--dt-color-foreground-primary);\n\n   &__left {\n     margin: var(--dt-space-300) 0 var(--dt-space-300) var(--dt-space-400);\n     min-width: 20%;\n  }\n  &__middle {\n     display: flex;\n     align-items: center;\n     gap: var(--dt-size-300);\n     margin-top: var(--dt-space-300);\n    margin-bottom: var(--dt-space-300);\n  }\n  &__right {\n     display: flex;\n     align-items: baseline;\n     justify-content: flex-end;\n     gap: var(--dt-size-300);\n     margin: var(--dt-space-300) var(--dt-space-500) var(--dt-space-300) 0;\n     min-width: 20%;\n     text-align: right;\n  }\n}\n</style>\n"],"names":["COLOR_CODES","_createElementBlock","_normalizeClass","_createElementVNode","_renderSlot"],"mappings":";;;;;;AA0BA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,SAAU,MAAM;AACzB,eAAOA,0BAAW,YAAC,SAAS,IAAI;AAAA,MACjC;AAAA,IACF;AAAA,EACF;AAAA,EAED,UAAU;AAAA,IACR,kBAAmB;AACjB,YAAM,WAAW;AAAA;AAAA;AAAA,QAGf,UAAU;AAAA,QACV,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,SAAS;AAAA,QACT,UAAU;AAAA,QACV,OAAO;AAAA;AAET,aAAO,CAAC,SAAS,KAAK,SAAS,CAAC;AAAA,IACjC;AAAA,EACF;AACH;AArDS,MAAA,aAAA,EAAA,OAAM,2BAA0B;;EAKnC,OAAM;AAAA,EACN,WAAQ;;AAKL,MAAA,aAAA,EAAA,OAAM,4BAA2B;;0BAhBxCC,IAmBM,mBAAA,OAAA;AAAA,IAlBJ,OAFJC,IAAAA,eAAA,CAEU,sBACE,SAAe,eAAA,CAAA;AAAA,IACvB,WAAQ;AAAA;IAERC,IAAA,mBAEM,OAFN,YAEM;AAAA,MADJC,eAAoB,KAAA,QAAA,MAAA;AAAA;IAGtBD,IAAA,mBAKM,OALN,YAKM;AAAA,MADJC,eAAQ,KAAA,QAAA,SAAA;AAAA;IAGVD,IAAA,mBAEM,OAFN,YAEM;AAAA,MADJC,eAAqB,KAAA,QAAA,OAAA;AAAA;;;;;"}
+{"version":3,"file":"top_banner_info.vue.cjs","sources":["../../../../recipes/notices/top_banner_info/top_banner_info.vue"],"sourcesContent":["<template>\n  <div\n    class=\"d-recipe-top-banner-info\"\n    :class=\"bannerInfoClass\"\n    data-qa=\"banner-info\"\n  >\n    <div class=\"d-recipe-top-banner-info__left\">\n      <slot name=\"left\" />\n    </div>\n\n    <div\n      class=\"d-recipe-top-banner-info__middle\"\n      data-qa=\"banner-info--middle\"\n    >\n      <slot />\n    </div>\n\n    <div class=\"d-recipe-top-banner-info__right\">\n      <slot name=\"right\" />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { COLOR_CODES } from './top_banner_info_constants';\n\nexport default {\n  name: 'DtRecipeTopBannerInfo',\n\n  props: {\n    /**\n     * color of the banner background\n     */\n    colorCode: {\n      type: String,\n      default: 'green300',\n      validator: function (kind) {\n        return COLOR_CODES.includes(kind);\n      },\n    },\n  },\n\n  computed: {\n    bannerInfoClass () {\n      const bgColors = {\n        // these are too specific, so for now I'm at least updating the resultant semantic value\n        // TODO: breaking change: update to be more abstract\n        green300: 'd-bgc-success',\n        green100: 'd-bgc-success',\n        red200: 'd-bgc-critical',\n        red100: 'd-bgc-critical',\n        gold200: 'd-bgc-warning',\n        gold100: 'd-bgc-warning',\n        black100: 'd-bgc-info',\n        white: 'd-bgc-primary',\n      };\n      return [bgColors[this.colorCode]];\n    },\n  },\n};\n</script>\n"],"names":["COLOR_CODES","_createElementBlock","_normalizeClass","_createElementVNode","_renderSlot"],"mappings":";;;;;AA0BA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,SAAU,MAAM;AACzB,eAAOA,0BAAW,YAAC,SAAS,IAAI;AAAA,MACjC;AAAA,IACF;AAAA,EACF;AAAA,EAED,UAAU;AAAA,IACR,kBAAmB;AACjB,YAAM,WAAW;AAAA;AAAA;AAAA,QAGf,UAAU;AAAA,QACV,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,SAAS;AAAA,QACT,UAAU;AAAA,QACV,OAAO;AAAA;AAET,aAAO,CAAC,SAAS,KAAK,SAAS,CAAC;AAAA,IACjC;AAAA,EACF;AACH;AArDS,MAAA,aAAA,EAAA,OAAM,iCAAgC;;EAKzC,OAAM;AAAA,EACN,WAAQ;;AAKL,MAAA,aAAA,EAAA,OAAM,kCAAiC;;0BAhB9CC,IAmBM,mBAAA,OAAA;AAAA,IAlBJ,OAFJC,IAAAA,eAAA,CAEU,4BACE,SAAe,eAAA,CAAA;AAAA,IACvB,WAAQ;AAAA;IAERC,IAAA,mBAEM,OAFN,YAEM;AAAA,MADJC,eAAoB,KAAA,QAAA,MAAA;AAAA;IAGtBD,IAAA,mBAKM,OALN,YAKM;AAAA,MADJC,eAAQ,KAAA,QAAA,SAAA;AAAA;IAGVD,IAAA,mBAEM,OAFN,YAEM;AAAA,MADJC,eAAqB,KAAA,QAAA,OAAA;AAAA;;;;;"}

package/dist/vue3/recipes/notices/top_banner_info/top_banner_info.vue.js

@@ -1,6 +1,5 @@
 import { COLOR_CODES } from "./top_banner_info_constants.js";
 import { openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot } from "vue";
-/* empty css                     */
 import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
 const _sfc_main = {
   name: "DtRecipeTopBannerInfo",
@@ -34,15 +33,15 @@ const _sfc_main = {
     }
   }
 };
-const _hoisted_1 = { class: "dt-top-banner-info__left" };
+const _hoisted_1 = { class: "d-recipe-top-banner-info__left" };
 const _hoisted_2 = {
-  class: "dt-top-banner-info__middle",
+  class: "d-recipe-top-banner-info__middle",
   "data-qa": "banner-info--middle"
 };
-const _hoisted_3 = { class: "dt-top-banner-info__right" };
+const _hoisted_3 = { class: "d-recipe-top-banner-info__right" };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
-    class: normalizeClass(["dt-top-banner-info", $options.bannerInfoClass]),
+    class: normalizeClass(["d-recipe-top-banner-info", $options.bannerInfoClass]),
     "data-qa": "banner-info"
   }, [
     createElementVNode("div", _hoisted_1, [

package/dist/vue3/recipes/notices/top_banner_info/top_banner_info.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"top_banner_info.vue.js","sources":["../../../../recipes/notices/top_banner_info/top_banner_info.vue"],"sourcesContent":["<template>\n  <div\n    class=\"dt-top-banner-info\"\n    :class=\"bannerInfoClass\"\n    data-qa=\"banner-info\"\n  >\n    <div class=\"dt-top-banner-info__left\">\n      <slot name=\"left\" />\n    </div>\n\n    <div\n      class=\"dt-top-banner-info__middle\"\n      data-qa=\"banner-info--middle\"\n    >\n      <slot />\n    </div>\n\n    <div class=\"dt-top-banner-info__right\">\n      <slot name=\"right\" />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { COLOR_CODES } from './top_banner_info_constants';\n\nexport default {\n  name: 'DtRecipeTopBannerInfo',\n\n  props: {\n    /**\n     * color of the banner background\n     */\n    colorCode: {\n      type: String,\n      default: 'green300',\n      validator: function (kind) {\n        return COLOR_CODES.includes(kind);\n      },\n    },\n  },\n\n  computed: {\n    bannerInfoClass () {\n      const bgColors = {\n        // these are too specific, so for now I'm at least updating the resultant semantic value\n        // TODO: breaking change: update to be more abstract\n        green300: 'd-bgc-success',\n        green100: 'd-bgc-success',\n        red200: 'd-bgc-critical',\n        red100: 'd-bgc-critical',\n        gold200: 'd-bgc-warning',\n        gold100: 'd-bgc-warning',\n        black100: 'd-bgc-info',\n        white: 'd-bgc-primary',\n      };\n      return [bgColors[this.colorCode]];\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-top-banner-info {\n  font-size: var(--dt-font-size-100);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  color: var(--dt-color-foreground-primary);\n\n   &__left {\n     margin: var(--dt-space-300) 0 var(--dt-space-300) var(--dt-space-400);\n     min-width: 20%;\n  }\n  &__middle {\n     display: flex;\n     align-items: center;\n     gap: var(--dt-size-300);\n     margin-top: var(--dt-space-300);\n    margin-bottom: var(--dt-space-300);\n  }\n  &__right {\n     display: flex;\n     align-items: baseline;\n     justify-content: flex-end;\n     gap: var(--dt-size-300);\n     margin: var(--dt-space-300) var(--dt-space-500) var(--dt-space-300) 0;\n     min-width: 20%;\n     text-align: right;\n  }\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","_createElementVNode","_renderSlot"],"mappings":";;;;AA0BA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,SAAU,MAAM;AACzB,eAAO,YAAY,SAAS,IAAI;AAAA,MACjC;AAAA,IACF;AAAA,EACF;AAAA,EAED,UAAU;AAAA,IACR,kBAAmB;AACjB,YAAM,WAAW;AAAA;AAAA;AAAA,QAGf,UAAU;AAAA,QACV,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,SAAS;AAAA,QACT,UAAU;AAAA,QACV,OAAO;AAAA;AAET,aAAO,CAAC,SAAS,KAAK,SAAS,CAAC;AAAA,IACjC;AAAA,EACF;AACH;AArDS,MAAA,aAAA,EAAA,OAAM,2BAA0B;;EAKnC,OAAM;AAAA,EACN,WAAQ;;AAKL,MAAA,aAAA,EAAA,OAAM,4BAA2B;;sBAhBxCA,mBAmBM,OAAA;AAAA,IAlBJ,OAFJC,eAAA,CAEU,sBACE,SAAe,eAAA,CAAA;AAAA,IACvB,WAAQ;AAAA;IAERC,mBAEM,OAFN,YAEM;AAAA,MADJC,WAAoB,KAAA,QAAA,MAAA;AAAA;IAGtBD,mBAKM,OALN,YAKM;AAAA,MADJC,WAAQ,KAAA,QAAA,SAAA;AAAA;IAGVD,mBAEM,OAFN,YAEM;AAAA,MADJC,WAAqB,KAAA,QAAA,OAAA;AAAA;;;;"}
+{"version":3,"file":"top_banner_info.vue.js","sources":["../../../../recipes/notices/top_banner_info/top_banner_info.vue"],"sourcesContent":["<template>\n  <div\n    class=\"d-recipe-top-banner-info\"\n    :class=\"bannerInfoClass\"\n    data-qa=\"banner-info\"\n  >\n    <div class=\"d-recipe-top-banner-info__left\">\n      <slot name=\"left\" />\n    </div>\n\n    <div\n      class=\"d-recipe-top-banner-info__middle\"\n      data-qa=\"banner-info--middle\"\n    >\n      <slot />\n    </div>\n\n    <div class=\"d-recipe-top-banner-info__right\">\n      <slot name=\"right\" />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { COLOR_CODES } from './top_banner_info_constants';\n\nexport default {\n  name: 'DtRecipeTopBannerInfo',\n\n  props: {\n    /**\n     * color of the banner background\n     */\n    colorCode: {\n      type: String,\n      default: 'green300',\n      validator: function (kind) {\n        return COLOR_CODES.includes(kind);\n      },\n    },\n  },\n\n  computed: {\n    bannerInfoClass () {\n      const bgColors = {\n        // these are too specific, so for now I'm at least updating the resultant semantic value\n        // TODO: breaking change: update to be more abstract\n        green300: 'd-bgc-success',\n        green100: 'd-bgc-success',\n        red200: 'd-bgc-critical',\n        red100: 'd-bgc-critical',\n        gold200: 'd-bgc-warning',\n        gold100: 'd-bgc-warning',\n        black100: 'd-bgc-info',\n        white: 'd-bgc-primary',\n      };\n      return [bgColors[this.colorCode]];\n    },\n  },\n};\n</script>\n"],"names":["_createElementBlock","_normalizeClass","_createElementVNode","_renderSlot"],"mappings":";;;AA0BA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,SAAU,MAAM;AACzB,eAAO,YAAY,SAAS,IAAI;AAAA,MACjC;AAAA,IACF;AAAA,EACF;AAAA,EAED,UAAU;AAAA,IACR,kBAAmB;AACjB,YAAM,WAAW;AAAA;AAAA;AAAA,QAGf,UAAU;AAAA,QACV,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,SAAS;AAAA,QACT,UAAU;AAAA,QACV,OAAO;AAAA;AAET,aAAO,CAAC,SAAS,KAAK,SAAS,CAAC;AAAA,IACjC;AAAA,EACF;AACH;AArDS,MAAA,aAAA,EAAA,OAAM,iCAAgC;;EAKzC,OAAM;AAAA,EACN,WAAQ;;AAKL,MAAA,aAAA,EAAA,OAAM,kCAAiC;;sBAhB9CA,mBAmBM,OAAA;AAAA,IAlBJ,OAFJC,eAAA,CAEU,4BACE,SAAe,eAAA,CAAA;AAAA,IACvB,WAAQ;AAAA;IAERC,mBAEM,OAFN,YAEM;AAAA,MADJC,WAAoB,KAAA,QAAA,MAAA;AAAA;IAGtBD,mBAKM,OALN,YAKM;AAAA,MADJC,WAAQ,KAAA,QAAA,SAAA;AAAA;IAGVD,mBAEM,OAFN,YAEM;AAAA,MADJC,WAAqB,KAAA,QAAA,OAAA;AAAA;;;;"}