@dialpad/dialtone-vue 3.159.1 → 3.159.2

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

@@ -0,0 +1,102 @@
+import { DtIconDialbot, DtIconInbox, DtIconContacts, DtIconHash, DtIconThread, DtIconLayoutTemplate, DtIconLock, DtIconSparkle, DtIconUsers, DtIconExternalLink, DtIconLockFilled, DtIconHashBold, DtIconAtSign, DtIconLaptop2, DtIconCalendarClock } from "@dialpad/dialtone-icons/vue3";
+import { LEFTBAR_GENERAL_ROW_TYPES, LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS } from "./general_row_constants.js";
+import { resolveComponent, openBlock, createBlock, resolveDynamicComponent, createElementBlock, normalizeClass, createVNode, createCommentVNode } from "vue";
+import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
+const typeToIcon = /* @__PURE__ */ new Map([
+  [LEFTBAR_GENERAL_ROW_TYPES.INBOX, DtIconInbox],
+  [LEFTBAR_GENERAL_ROW_TYPES.CONTACTS, DtIconContacts],
+  [LEFTBAR_GENERAL_ROW_TYPES.CHANNELS, DtIconHash],
+  [LEFTBAR_GENERAL_ROW_TYPES.THREADS, DtIconThread],
+  [LEFTBAR_GENERAL_ROW_TYPES.LAUNCHPAD, DtIconLayoutTemplate],
+  [LEFTBAR_GENERAL_ROW_TYPES.LOCKED_CHANNEL, DtIconLock],
+  [LEFTBAR_GENERAL_ROW_TYPES.QUICK_START, DtIconSparkle],
+  [LEFTBAR_GENERAL_ROW_TYPES.COACHING_GROUP, DtIconUsers],
+  [LEFTBAR_GENERAL_ROW_TYPES.COACHING_CENTER, DtIconExternalLink],
+  ["locked channel unread", DtIconLockFilled],
+  ["channel unread", DtIconHashBold],
+  [LEFTBAR_GENERAL_ROW_TYPES.ASSIGNED, DtIconAtSign],
+  [LEFTBAR_GENERAL_ROW_TYPES.DIGITAL, DtIconLaptop2],
+  [LEFTBAR_GENERAL_ROW_TYPES.SCHEDULED, DtIconCalendarClock]
+]);
+const _sfc_main = {
+  name: "DtRecipeLeftbarGeneralRowIcon",
+  components: {
+    DtIconDialbot,
+    DtIconInbox,
+    DtIconContacts,
+    DtIconHash,
+    DtIconThread,
+    DtIconLayoutTemplate,
+    DtIconLock,
+    DtIconSparkle,
+    DtIconUsers,
+    DtIconExternalLink,
+    DtIconLockFilled,
+    DtIconHashBold,
+    DtIconAtSign,
+    DtIconLaptop2,
+    DtIconCalendarClock
+  },
+  props: {
+    type: {
+      type: String,
+      default: null
+    },
+    color: {
+      type: String,
+      default: null
+    },
+    iconSize: {
+      type: String,
+      default: "300"
+    }
+  },
+  computed: {
+    isIconType() {
+      return ![LEFTBAR_GENERAL_ROW_TYPES.DIALBOT, LEFTBAR_GENERAL_ROW_TYPES.CONTACT_CENTER].includes(this.type);
+    },
+    isContactCenterType() {
+      return this.type === LEFTBAR_GENERAL_ROW_TYPES.CONTACT_CENTER;
+    },
+    isDialbotType() {
+      return this.type === LEFTBAR_GENERAL_ROW_TYPES.DIALBOT;
+    },
+    getIconName() {
+      return typeToIcon.get(this.type);
+    },
+    contactCenterIconClasses() {
+      return [
+        "dt-leftbar-row__icon-cc",
+        LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS[this.color]
+      ];
+    },
+    dialbotClasses() {
+      return [
+        "d-d-flex",
+        "d-ai-center",
+        "d-jc-center"
+      ];
+    }
+  }
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_icon_dialbot = resolveComponent("dt-icon-dialbot");
+  return $options.isIconType ? (openBlock(), createBlock(resolveDynamicComponent($options.getIconName), {
+    key: 0,
+    size: $props.iconSize
+  }, null, 8, ["size"])) : $options.isContactCenterType ? (openBlock(), createElementBlock("div", {
+    key: 1,
+    class: normalizeClass($options.contactCenterIconClasses)
+  }, null, 2)) : $options.isDialbotType ? (openBlock(), createElementBlock("div", {
+    key: 2,
+    class: normalizeClass($options.dialbotClasses),
+    "data-qa": "general-row-dialbot"
+  }, [
+    createVNode(_component_dt_icon_dialbot, { size: "500" })
+  ], 2)) : createCommentVNode("", true);
+}
+const DtRecipeLeftbarGeneralRowIcon = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  DtRecipeLeftbarGeneralRowIcon as default
+};
+//# sourceMappingURL=leftbar_general_row_icon.vue.js.map

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

@@ -0,0 +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    v-if=\"isIconType\"\n    :is=\"getIconName\"\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;;;SAhIU,SAAU,2BADlBC,YADFC,wBAGS,SAAW,WAAA,GAAA;AAAA,IAHpB,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/recipes/leftbar/group_row/group_row.vue.cjs

@@ -0,0 +1,97 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue3 = require("@dialpad/dialtone-icons/vue3");
+const common_utils = require("../../../common/utils.cjs");
+const vue = require("vue");
+const _pluginVue_exportHelper = require("../../../_virtual/_plugin-vue_export-helper.cjs");
+const general_row = require("../general_row/general_row.vue.cjs");
+const _sfc_main = {
+  name: "DtRecipeGroupRow",
+  components: {
+    DtIconUsers: vue3.DtIconUsers,
+    DtRecipeGeneralRow: general_row.default
+  },
+  inheritAttrs: false,
+  props: {
+    /**
+     * Screen reader will read out the number of users in the group using this text. Ex: "2 users"
+     */
+    groupCountText: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Names of the group members
+     */
+    names: {
+      type: String,
+      required: true
+    },
+    /**
+     * Number of unread messages
+     */
+    unreadCount: {
+      type: String,
+      default: null
+    },
+    /**
+     * Text shown when the unread count is hovered.
+     */
+    unreadCountTooltip: {
+      type: String,
+      default: null
+    },
+    /**
+     * Styles the row with an increased font weight to convey it has unreads. This must be true to see
+     * the unread count badge.
+     */
+    hasUnreads: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Determines if the row is selected
+     */
+    selected: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Shows an "is typing" animation over the avatar when true.
+     */
+    isTyping: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: [],
+  computed: {
+    ariaLabel() {
+      return common_utils.safeConcatStrings([this.groupCountText, this.names]);
+    },
+    contactRowListeners() {
+      return common_utils.extractVueListeners(this.$attrs);
+    }
+  }
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_icon_users = vue.resolveComponent("dt-icon-users");
+  const _component_dt_recipe_general_row = vue.resolveComponent("dt-recipe-general-row");
+  return vue.openBlock(), vue.createBlock(_component_dt_recipe_general_row, vue.mergeProps({
+    description: $props.names,
+    "aria-label": $options.ariaLabel,
+    "unread-count": $props.unreadCount,
+    "has-unreads": $props.hasUnreads,
+    "unread-count-tooltip": $props.unreadCountTooltip,
+    selected: $props.selected,
+    "is-typing": $props.isTyping
+  }, _ctx.$attrs, vue.toHandlers($options.contactRowListeners)), {
+    left: vue.withCtx(() => [
+      vue.createVNode(_component_dt_icon_users, { size: "300" })
+    ]),
+    _: 1
+  }, 16, ["description", "aria-label", "unread-count", "has-unreads", "unread-count-tooltip", "selected", "is-typing"]);
+}
+const group_row = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render]]);
+exports.default = group_row;
+//# sourceMappingURL=group_row.vue.cjs.map

package/dist/recipes/leftbar/group_row/group_row.vue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"group_row.vue.cjs","sources":["../../../../recipes/leftbar/group_row/group_row.vue"],"sourcesContent":["<template>\n  <dt-recipe-general-row\n    :description=\"names\"\n    :aria-label=\"ariaLabel\"\n    :unread-count=\"unreadCount\"\n    :has-unreads=\"hasUnreads\"\n    :unread-count-tooltip=\"unreadCountTooltip\"\n    :selected=\"selected\"\n    :is-typing=\"isTyping\"\n    v-bind=\"$attrs\"\n    v-on=\"contactRowListeners\"\n  >\n    <template #left>\n      <dt-icon-users\n        size=\"300\"\n      />\n    </template>\n  </dt-recipe-general-row>\n</template>\n\n<script>\nimport { DtRecipeGeneralRow } from '@/recipes/leftbar/general_row';\nimport { DtIconUsers } from '@dialpad/dialtone-icons/vue3';\nimport { safeConcatStrings, extractVueListeners } from '@/common/utils';\n\nexport default {\n  name: 'DtRecipeGroupRow',\n\n  components: {\n    DtIconUsers,\n    DtRecipeGeneralRow,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n\n    /**\n     * Screen reader will read out the number of users in the group using this text. Ex: \"2 users\"\n     */\n    groupCountText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Names of the group members\n     */\n    names: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Number of unread messages\n     */\n    unreadCount: {\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: 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     * Determines if the row is selected\n     */\n    selected: {\n      type: Boolean,\n      default: false,\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  emits: [\n  ],\n\n  computed: {\n    ariaLabel () {\n      return safeConcatStrings([this.groupCountText, this.names]);\n    },\n\n    contactRowListeners () {\n      return extractVueListeners(this.$attrs);\n    },\n  },\n};\n</script>\n"],"names":["DtIconUsers","DtRecipeGeneralRow","safeConcatStrings","extractVueListeners","_openBlock","_createBlock","_mergeProps","_toHandlers","_createVNode"],"mappings":";;;;;;;AAyBA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,iBACVA,KAAW;AAAA,IACX,oBAAAC,YAAkB;AAAA,EACnB;AAAA,EAED,cAAc;AAAA,EAEd,OAAO;AAAA;AAAA;AAAA;AAAA,IAKL,gBAAgB;AAAA,MACd,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,oBAAoB;AAAA,MAClB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAO,CACN;AAAA,EAED,UAAU;AAAA,IACR,YAAa;AACX,aAAOC,aAAAA,kBAAkB,CAAC,KAAK,gBAAgB,KAAK,KAAK,CAAC;AAAA,IAC3D;AAAA,IAED,sBAAuB;AACrB,aAAOC,aAAmB,oBAAC,KAAK,MAAM;AAAA,IACvC;AAAA,EACF;AACH;;;;AA1GE,SAAAC,cAAA,GAAAC,gBAgBwB,kCAhBxBC,IAAAA,WAgBwB;AAAA,IAfrB,aAAa,OAAK;AAAA,IAClB,cAAY,SAAS;AAAA,IACrB,gBAAc,OAAW;AAAA,IACzB,eAAa,OAAU;AAAA,IACvB,wBAAsB,OAAkB;AAAA,IACxC,UAAU,OAAQ;AAAA,IAClB,aAAW,OAAQ;AAAA,KACZ,KAAM,QACdC,IAAAA,WAAM,SAAmB,mBAAA,CAAA,GAAA;AAAA,IAEd,kBACT,MAEE;AAAA,MAFFC,IAAAA,YAEE,0BAAA,EADA,MAAK,MAAK,CAAA;AAAA;IAdlB,GAAA;AAAA;;;;"}

package/dist/recipes/leftbar/group_row/group_row.vue.js

@@ -0,0 +1,97 @@
+import { DtIconUsers } from "@dialpad/dialtone-icons/vue3";
+import { safeConcatStrings, extractVueListeners } from "../../../common/utils.js";
+import { resolveComponent, openBlock, createBlock, mergeProps, toHandlers, withCtx, createVNode } from "vue";
+import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
+import DtRecipeGeneralRow from "../general_row/general_row.vue.js";
+const _sfc_main = {
+  name: "DtRecipeGroupRow",
+  components: {
+    DtIconUsers,
+    DtRecipeGeneralRow
+  },
+  inheritAttrs: false,
+  props: {
+    /**
+     * Screen reader will read out the number of users in the group using this text. Ex: "2 users"
+     */
+    groupCountText: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Names of the group members
+     */
+    names: {
+      type: String,
+      required: true
+    },
+    /**
+     * Number of unread messages
+     */
+    unreadCount: {
+      type: String,
+      default: null
+    },
+    /**
+     * Text shown when the unread count is hovered.
+     */
+    unreadCountTooltip: {
+      type: String,
+      default: null
+    },
+    /**
+     * Styles the row with an increased font weight to convey it has unreads. This must be true to see
+     * the unread count badge.
+     */
+    hasUnreads: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Determines if the row is selected
+     */
+    selected: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Shows an "is typing" animation over the avatar when true.
+     */
+    isTyping: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: [],
+  computed: {
+    ariaLabel() {
+      return safeConcatStrings([this.groupCountText, this.names]);
+    },
+    contactRowListeners() {
+      return extractVueListeners(this.$attrs);
+    }
+  }
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_icon_users = resolveComponent("dt-icon-users");
+  const _component_dt_recipe_general_row = resolveComponent("dt-recipe-general-row");
+  return openBlock(), createBlock(_component_dt_recipe_general_row, mergeProps({
+    description: $props.names,
+    "aria-label": $options.ariaLabel,
+    "unread-count": $props.unreadCount,
+    "has-unreads": $props.hasUnreads,
+    "unread-count-tooltip": $props.unreadCountTooltip,
+    selected: $props.selected,
+    "is-typing": $props.isTyping
+  }, _ctx.$attrs, toHandlers($options.contactRowListeners)), {
+    left: withCtx(() => [
+      createVNode(_component_dt_icon_users, { size: "300" })
+    ]),
+    _: 1
+  }, 16, ["description", "aria-label", "unread-count", "has-unreads", "unread-count-tooltip", "selected", "is-typing"]);
+}
+const group_row = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  group_row as default
+};
+//# sourceMappingURL=group_row.vue.js.map

package/dist/recipes/leftbar/group_row/group_row.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"group_row.vue.js","sources":["../../../../recipes/leftbar/group_row/group_row.vue"],"sourcesContent":["<template>\n  <dt-recipe-general-row\n    :description=\"names\"\n    :aria-label=\"ariaLabel\"\n    :unread-count=\"unreadCount\"\n    :has-unreads=\"hasUnreads\"\n    :unread-count-tooltip=\"unreadCountTooltip\"\n    :selected=\"selected\"\n    :is-typing=\"isTyping\"\n    v-bind=\"$attrs\"\n    v-on=\"contactRowListeners\"\n  >\n    <template #left>\n      <dt-icon-users\n        size=\"300\"\n      />\n    </template>\n  </dt-recipe-general-row>\n</template>\n\n<script>\nimport { DtRecipeGeneralRow } from '@/recipes/leftbar/general_row';\nimport { DtIconUsers } from '@dialpad/dialtone-icons/vue3';\nimport { safeConcatStrings, extractVueListeners } from '@/common/utils';\n\nexport default {\n  name: 'DtRecipeGroupRow',\n\n  components: {\n    DtIconUsers,\n    DtRecipeGeneralRow,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n\n    /**\n     * Screen reader will read out the number of users in the group using this text. Ex: \"2 users\"\n     */\n    groupCountText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Names of the group members\n     */\n    names: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Number of unread messages\n     */\n    unreadCount: {\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: 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     * Determines if the row is selected\n     */\n    selected: {\n      type: Boolean,\n      default: false,\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  emits: [\n  ],\n\n  computed: {\n    ariaLabel () {\n      return safeConcatStrings([this.groupCountText, this.names]);\n    },\n\n    contactRowListeners () {\n      return extractVueListeners(this.$attrs);\n    },\n  },\n};\n</script>\n"],"names":["_openBlock","_createBlock","_mergeProps","_toHandlers","_createVNode"],"mappings":";;;;;AAyBA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,EACD;AAAA,EAED,cAAc;AAAA,EAEd,OAAO;AAAA;AAAA;AAAA;AAAA,IAKL,gBAAgB;AAAA,MACd,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,oBAAoB;AAAA,MAClB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAO,CACN;AAAA,EAED,UAAU;AAAA,IACR,YAAa;AACX,aAAO,kBAAkB,CAAC,KAAK,gBAAgB,KAAK,KAAK,CAAC;AAAA,IAC3D;AAAA,IAED,sBAAuB;AACrB,aAAO,oBAAoB,KAAK,MAAM;AAAA,IACvC;AAAA,EACF;AACH;;;;AA1GE,SAAAA,UAAA,GAAAC,YAgBwB,kCAhBxBC,WAgBwB;AAAA,IAfrB,aAAa,OAAK;AAAA,IAClB,cAAY,SAAS;AAAA,IACrB,gBAAc,OAAW;AAAA,IACzB,eAAa,OAAU;AAAA,IACvB,wBAAsB,OAAkB;AAAA,IACxC,UAAU,OAAQ;AAAA,IAClB,aAAW,OAAQ;AAAA,KACZ,KAAM,QACdC,WAAM,SAAmB,mBAAA,CAAA,GAAA;AAAA,IAEd,cACT,MAEE;AAAA,MAFFC,YAEE,0BAAA,EADA,MAAK,MAAK,CAAA;AAAA;IAdlB,GAAA;AAAA;;;"}

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

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+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",
+  components: {
+    DtIconArrowUp: vue3.DtIconArrowUp,
+    DtIconArrowDown: vue3.DtIconArrowDown
+  },
+  props: {
+    /**
+     * The kind of unread pill which determines the styling
+     * @values 'mentions', 'messages'
+     **/
+    kind: {
+      type: String,
+      required: true,
+      validator: (kind) => unread_pill_constants.UNREAD_PILL_KINDS.includes(kind)
+    },
+    /**
+     * The direction of the arrow icon
+     * @values 'up', 'down'
+     **/
+    direction: {
+      type: String,
+      required: true,
+      validator: (dir) => unread_pill_constants.UNREAD_PILL_DIRECTIONS.includes(dir)
+    }
+  },
+  emits: [
+    /**
+     * Native click event
+     *
+     * @event click
+     * @type {PointerEvent | KeyboardEvent}
+     */
+    "click"
+  ],
+  computed: {
+    unreadChipListeners() {
+      return {
+        click: (event) => this.$emit("click", event)
+      };
+    }
+  }
+};
+const _hoisted_1 = { "data-qa": "dt-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}`],
+    type: "button",
+    "data-qa": "dt-leftbar-unread-pill"
+  }, vue.toHandlers($options.unreadChipListeners, true)), [
+    $props.direction === "up" ? (vue.openBlock(), vue.createBlock(_component_dt_icon_arrow_up, {
+      key: 0,
+      size: "300"
+    })) : (vue.openBlock(), vue.createBlock(_component_dt_icon_arrow_down, {
+      key: 1,
+      size: "300"
+    })),
+    vue.createElementVNode("span", _hoisted_1, [
+      vue.renderSlot(_ctx.$slots, "default")
+    ])
+  ], 16);
+}
+const unread_pill = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render]]);
+exports.default = unread_pill;
+//# sourceMappingURL=unread_pill.vue.cjs.map

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

@@ -0,0 +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;;;;;"}

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

@@ -0,0 +1,74 @@
+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",
+  components: {
+    DtIconArrowUp,
+    DtIconArrowDown
+  },
+  props: {
+    /**
+     * The kind of unread pill which determines the styling
+     * @values 'mentions', 'messages'
+     **/
+    kind: {
+      type: String,
+      required: true,
+      validator: (kind) => UNREAD_PILL_KINDS.includes(kind)
+    },
+    /**
+     * The direction of the arrow icon
+     * @values 'up', 'down'
+     **/
+    direction: {
+      type: String,
+      required: true,
+      validator: (dir) => UNREAD_PILL_DIRECTIONS.includes(dir)
+    }
+  },
+  emits: [
+    /**
+     * Native click event
+     *
+     * @event click
+     * @type {PointerEvent | KeyboardEvent}
+     */
+    "click"
+  ],
+  computed: {
+    unreadChipListeners() {
+      return {
+        click: (event) => this.$emit("click", event)
+      };
+    }
+  }
+};
+const _hoisted_1 = { "data-qa": "dt-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}`],
+    type: "button",
+    "data-qa": "dt-leftbar-unread-pill"
+  }, toHandlers($options.unreadChipListeners, true)), [
+    $props.direction === "up" ? (openBlock(), createBlock(_component_dt_icon_arrow_up, {
+      key: 0,
+      size: "300"
+    })) : (openBlock(), createBlock(_component_dt_icon_arrow_down, {
+      key: 1,
+      size: "300"
+    })),
+    createElementVNode("span", _hoisted_1, [
+      renderSlot(_ctx.$slots, "default")
+    ])
+  ], 16);
+}
+const unread_pill = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  unread_pill as default
+};
+//# sourceMappingURL=unread_pill.vue.js.map

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

@@ -0,0 +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;;;;"}

package/dist/recipes/leftbar/unread_pill/unread_pill_constants.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"unread_pill_constants.cjs","sources":["../../../../recipes/leftbar/unread_pill/unread_pill_constants.js"],"sourcesContent":["export const UNREAD_PILL_DIRECTIONS = ['up', 'down'];\nexport const UNREAD_PILL_KINDS = ['mentions', 'messages'];\n\nexport default {\n  UNREAD_PILL_DIRECTIONS,\n  UNREAD_PILL_KINDS,\n};\n"],"names":[],"mappings":";;AAAY,MAAC,yBAAyB,CAAC,MAAM,MAAM;AACvC,MAAC,oBAAoB,CAAC,YAAY,UAAU;;;"}

package/dist/recipes/leftbar/unread_pill/unread_pill_constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"unread_pill_constants.js","sources":["../../../../recipes/leftbar/unread_pill/unread_pill_constants.js"],"sourcesContent":["export const UNREAD_PILL_DIRECTIONS = ['up', 'down'];\nexport const UNREAD_PILL_KINDS = ['mentions', 'messages'];\n\nexport default {\n  UNREAD_PILL_DIRECTIONS,\n  UNREAD_PILL_KINDS,\n};\n"],"names":[],"mappings":"AAAY,MAAC,yBAAyB,CAAC,MAAM,MAAM;AACvC,MAAC,oBAAoB,CAAC,YAAY,UAAU;"}

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

@@ -0,0 +1,63 @@
+"use strict";
+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",
+  props: {
+    /**
+     * color of the banner background
+     */
+    colorCode: {
+      type: String,
+      default: "green300",
+      validator: function(kind) {
+        return top_banner_info_constants.COLOR_CODES.includes(kind);
+      }
+    }
+  },
+  computed: {
+    bannerInfoClass() {
+      const bgColors = {
+        // these are too specific, so for now I'm at least updating the resultant semantic value
+        // TODO: breaking change: update to be more abstract
+        green300: "d-bgc-success",
+        green100: "d-bgc-success",
+        red200: "d-bgc-critical",
+        red100: "d-bgc-critical",
+        gold200: "d-bgc-warning",
+        gold100: "d-bgc-warning",
+        black100: "d-bgc-info",
+        white: "d-bgc-primary"
+      };
+      return [bgColors[this.colorCode]];
+    }
+  }
+};
+const _hoisted_1 = { class: "dt-top-banner-info__left" };
+const _hoisted_2 = {
+  class: "dt-top-banner-info__middle",
+  "data-qa": "banner-info--middle"
+};
+const _hoisted_3 = { class: "dt-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]),
+    "data-qa": "banner-info"
+  }, [
+    vue.createElementVNode("div", _hoisted_1, [
+      vue.renderSlot(_ctx.$slots, "left")
+    ]),
+    vue.createElementVNode("div", _hoisted_2, [
+      vue.renderSlot(_ctx.$slots, "default")
+    ]),
+    vue.createElementVNode("div", _hoisted_3, [
+      vue.renderSlot(_ctx.$slots, "right")
+    ])
+  ], 2);
+}
+const top_banner_info = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render]]);
+exports.default = top_banner_info;
+//# sourceMappingURL=top_banner_info.vue.cjs.map

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

@@ -0,0 +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;;;;;"}

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

@@ -0,0 +1,63 @@
+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",
+  props: {
+    /**
+     * color of the banner background
+     */
+    colorCode: {
+      type: String,
+      default: "green300",
+      validator: function(kind) {
+        return COLOR_CODES.includes(kind);
+      }
+    }
+  },
+  computed: {
+    bannerInfoClass() {
+      const bgColors = {
+        // these are too specific, so for now I'm at least updating the resultant semantic value
+        // TODO: breaking change: update to be more abstract
+        green300: "d-bgc-success",
+        green100: "d-bgc-success",
+        red200: "d-bgc-critical",
+        red100: "d-bgc-critical",
+        gold200: "d-bgc-warning",
+        gold100: "d-bgc-warning",
+        black100: "d-bgc-info",
+        white: "d-bgc-primary"
+      };
+      return [bgColors[this.colorCode]];
+    }
+  }
+};
+const _hoisted_1 = { class: "dt-top-banner-info__left" };
+const _hoisted_2 = {
+  class: "dt-top-banner-info__middle",
+  "data-qa": "banner-info--middle"
+};
+const _hoisted_3 = { class: "dt-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]),
+    "data-qa": "banner-info"
+  }, [
+    createElementVNode("div", _hoisted_1, [
+      renderSlot(_ctx.$slots, "left")
+    ]),
+    createElementVNode("div", _hoisted_2, [
+      renderSlot(_ctx.$slots, "default")
+    ]),
+    createElementVNode("div", _hoisted_3, [
+      renderSlot(_ctx.$slots, "right")
+    ])
+  ], 2);
+}
+const top_banner_info = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  top_banner_info as default
+};
+//# sourceMappingURL=top_banner_info.vue.js.map

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

@@ -0,0 +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;;;;"}

package/dist/recipes/notices/top_banner_info/top_banner_info_constants.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"top_banner_info_constants.cjs","sources":["../../../../recipes/notices/top_banner_info/top_banner_info_constants.js"],"sourcesContent":["export const COLOR_CODES = ['green300', 'green100', 'red200', 'red100', 'gold100',\n  'gold200', 'black100', 'white'];\n\nexport default {\n  COLOR_CODES,\n};\n"],"names":[],"mappings":";;AAAY,MAAC,cAAc;AAAA,EAAC;AAAA,EAAY;AAAA,EAAY;AAAA,EAAU;AAAA,EAAU;AAAA,EACtE;AAAA,EAAW;AAAA,EAAY;AAAO;;"}