@dialpad/dialtone-vue 2.42.0 → 2.43.0

package/dist/dialtone-vue.common.js

@@ -1113,7 +1113,8 @@ __webpack_require__.d(__webpack_exports__, {
   "AVATAR_COLOR_MODIFIERS": () => (/* reexport */ AVATAR_COLOR_MODIFIERS),
   "AVATAR_KIND_MODIFIERS": () => (/* reexport */ AVATAR_KIND_MODIFIERS),
   "AVATAR_SIZE_MODIFIERS": () => (/* reexport */ AVATAR_SIZE_MODIFIERS),
-  "BADGE_COLOR_MODIFIERS": () => (/* reexport */ BADGE_COLOR_MODIFIERS),
+  "BADGE_KIND_MODIFIERS": () => (/* reexport */ BADGE_KIND_MODIFIERS),
+  "BADGE_TYPE_MODIFIERS": () => (/* reexport */ BADGE_TYPE_MODIFIERS),
   "BREADCRUMBS_INVERTED_MODIFIER": () => (/* reexport */ BREADCRUMBS_INVERTED_MODIFIER),
   "BREADCRUMB_ITEM_SELECTED_MODIFIER": () => (/* reexport */ BREADCRUMB_ITEM_SELECTED_MODIFIER),
   "BUTTON_GROUP_ALIGNMENT": () => (/* reexport */ BUTTON_GROUP_ALIGNMENT),
@@ -1913,121 +1914,28 @@ var avatar_component = normalizeComponent(
 ;// CONCATENATED MODULE: ./components/avatar/index.js
 
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/badge/badge.vue?vue&type=template&id=fea57e1e&
-var badgevue_type_template_id_fea57e1e_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('span',{class:[
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/badge/badge.vue?vue&type=template&id=741d001d&
+var badgevue_type_template_id_741d001d_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('span',{class:[
     'd-badge',
-    _vm.BADGE_COLOR_MODIFIERS[_vm.color] ],attrs:{"data-qa":"dt-badge"}},[_vm._t("default",function(){return [_vm._v(" "+_vm._s(_vm.text)+" ")]})],2)}
-var badgevue_type_template_id_fea57e1e_staticRenderFns = []
+    _vm.BADGE_TYPE_MODIFIERS[_vm.type],
+    _vm.BADGE_KIND_MODIFIERS[_vm.kind] ],attrs:{"data-qa":"dt-badge"}},[(_vm.iconLeft || _vm.type === 'ai')?_c('span',{staticClass:"d-badge__icon-left"},[_c('dt-icon',{attrs:{"name":_vm.iconLeft || 'dialpad-ai',"size":"200"}})],1):_vm._e(),_c('span',{staticClass:"d-badge__label"},[_vm._t("default",function(){return [_vm._v(" "+_vm._s(_vm.text)+" ")]})],2),(_vm.iconRight)?_c('span',{staticClass:"d-badge__icon-right"},[_c('dt-icon',{attrs:{"name":_vm.iconRight,"size":"200"}})],1):_vm._e()])}
+var badgevue_type_template_id_741d001d_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./components/badge/badge_constants.js
-const BADGE_COLOR_MODIFIERS = {
-  base: '',
-  'black-700': 'd-badge--black-700',
-  'green-400': 'd-badge--green-400',
-  'orange-400': 'd-badge--orange-400',
-  'magenta-100': 'd-badge--magenta-100',
-  'magenta-300': 'd-badge--magenta-300',
-  'magenta-400': 'd-badge--magenta-400',
-  'magenta-500': 'd-badge--magenta-500',
-  'purple-100': 'd-badge--purple-100',
-  'purple-300': 'd-badge--purple-300',
-  'purple-400': 'd-badge--purple-400',
-  'purple-500': 'd-badge--purple-500',
-  'red-300': 'd-badge--red-300',
-  white: 'd-badge--white',
-  'gold-200': 'd-badge--gold-200'
+const BADGE_TYPE_MODIFIERS = {
+  default: '',
+  info: 'd-badge--info',
+  success: 'd-badge--success',
+  warning: 'd-badge--warning',
+  critical: 'd-badge--critical',
+  bulletin: 'd-badge--bulletin',
+  ai: 'd-badge--ai'
+};
+const BADGE_KIND_MODIFIERS = {
+  label: '',
+  count: 'd-badge--count'
 };
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/badge/badge.vue?vue&type=script&lang=js&
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-
-/**
- * A badge is a compact UI element that provides brief, descriptive information about an element.
- * It is terse, ideally one word.
- * @see https://dialpad.design/components/badge.html
- */
-
-/* harmony default export */ const badgevue_type_script_lang_js_ = ({
-  name: 'DtBadge',
-  props: {
-    /**
-     * Text for the badge content
-     */
-    text: {
-      type: String,
-      default: ''
-    },
-
-    /**
-     * Color for the badge background
-     * @values base, black-700, green-400, orange-400,
-     * pink-300, pink-500, pink-600, pink-700,
-     * purple-100, purple-300, purple-500, purple-700,
-     * red-500, white, yellow-300
-     */
-    color: {
-      type: String,
-      default: 'base',
-      validator: color => Object.keys(BADGE_COLOR_MODIFIERS).includes(color)
-    }
-  },
-
-  data() {
-    return {
-      BADGE_COLOR_MODIFIERS: BADGE_COLOR_MODIFIERS
-    };
-  }
-
-});
-;// CONCATENATED MODULE: ./components/badge/badge.vue?vue&type=script&lang=js&
- /* harmony default export */ const badge_badgevue_type_script_lang_js_ = (badgevue_type_script_lang_js_); 
-;// CONCATENATED MODULE: ./components/badge/badge.vue
-
-
-
-
-
-/* normalize component */
-;
-var badge_component = normalizeComponent(
-  badge_badgevue_type_script_lang_js_,
-  badgevue_type_template_id_fea57e1e_render,
-  badgevue_type_template_id_fea57e1e_staticRenderFns,
-  false,
-  null,
-  null,
-  null
-  
-)
-
-/* harmony default export */ const badge = (badge_component.exports);
-;// CONCATENATED MODULE: ./components/badge/index.js
-
-
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/banner/banner.vue?vue&type=template&id=756779c1&
-var bannervue_type_template_id_756779c1_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('aside',{class:_vm.bannerClass,style:(_vm.bannerBackgroundImage),attrs:{"role":_vm.role},on:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"tab",9,$event.key,"Tab")){ return null; }return _vm.trapFocus.apply(null, arguments)}}},[_c('div',{staticClass:"d-banner__dialog",class:_vm.dialogClass,attrs:{"aria-labelledby":_vm.titleId,"aria-describedby":_vm.contentId}},[(!_vm.hideIcon)?_c('dt-notice-icon',_vm._g({attrs:{"kind":_vm.kind}},_vm.$listeners),[_vm._t("icon")],2):_vm._e(),_c('dt-notice-content',_vm._g({attrs:{"title-id":_vm.titleId,"content-id":_vm.contentId,"title":_vm.title},scopedSlots:_vm._u([{key:"titleOverride",fn:function(){return [_vm._t("titleOverride")]},proxy:true}],null,true)},_vm.$listeners),[_vm._t("default")],2),_c('dt-notice-action',_vm._g({attrs:{"hide-close":_vm.hideClose,"close-button-props":_vm.closeButtonProps,"visually-hidden-close":_vm.visuallyHiddenClose,"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel}},_vm.$listeners),[_vm._t("action")],2)],1)])}
-var bannervue_type_template_id_756779c1_staticRenderFns = []
-
-
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/notice/notice_icon.vue?vue&type=template&id=dbeeebfa&
-var notice_iconvue_type_template_id_dbeeebfa_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.defaultIcon || _vm.$slots.default)?_c('div',{staticClass:"d-notice__icon",attrs:{"aria-hidden":"true"}},[_vm._t("default",function(){return [_c('dt-icon',{attrs:{"name":_vm.defaultIcon,"size":"400"}})]})],2):_vm._e()}
-var notice_iconvue_type_template_id_dbeeebfa_staticRenderFns = []
-
-
 ;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/icon/icon.vue?vue&type=template&id=0c7462d0&
 var iconvue_type_template_id_0c7462d0_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.currentIcon,{tag:"component",class:_vm.iconSize,attrs:{"data-qa":"dt-icon","aria-hidden":_vm.ariaLabel ? 'false' : 'true',"aria-label":_vm.ariaLabel}})}
 var iconvue_type_template_id_0c7462d0_staticRenderFns = []
@@ -2143,6 +2051,167 @@ var icon_component = normalizeComponent(
 /* harmony default export */ const icon = (icon_component.exports);
 ;// CONCATENATED MODULE: ./components/icon/index.js
 
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/badge/badge.vue?vue&type=script&lang=js&
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+
+/**
+ * A badge is a compact UI element that provides brief, descriptive information about an element.
+ * It is terse, ideally one word.
+ * @see https://dialpad.design/components/badge.html
+ */
+
+/* harmony default export */ const badgevue_type_script_lang_js_ = ({
+  name: 'DtBadge',
+  components: {
+    DtIcon: icon
+  },
+  props: {
+    /**
+     * Icon on the left side of the badge. Supports any valid icon name from the icon catalog at
+     * https://dialpad.design/components/icon.html#icon-catalog. If type:'ai' is set, the ai icon
+     * will automatically be shown here, but this can be overridden by setting this prop.
+     */
+    iconLeft: {
+      type: String,
+      default: ''
+    },
+
+    /**
+     * Icon on the right side of the badge. Supports any valid icon name from the icon catalog at
+     * https://dialpad.design/components/icon.html#icon-catalog
+     */
+    iconRight: {
+      type: String,
+      default: ''
+    },
+
+    /**
+     * Text for the badge content
+     */
+    text: {
+      type: String,
+      default: ''
+    },
+
+    /**
+     * The kind of badge which determines the styling
+     * @values label, count
+     */
+    kind: {
+      type: String,
+      default: 'label',
+      validator: kind => Object.keys(BADGE_KIND_MODIFIERS).includes(kind)
+    },
+
+    /**
+     * Color for the badge background
+     * @values default, info, success, warning, critical, bulletin, ai
+     */
+    type: {
+      type: String,
+      default: 'default',
+      validator: type => Object.keys(BADGE_TYPE_MODIFIERS).includes(type)
+    }
+  },
+
+  data() {
+    return {
+      BADGE_TYPE_MODIFIERS: BADGE_TYPE_MODIFIERS,
+      BADGE_KIND_MODIFIERS: BADGE_KIND_MODIFIERS
+    };
+  },
+
+  watch: {
+    $props: {
+      immediate: true,
+      deep: true,
+
+      handler() {
+        this.validateProps();
+      }
+
+    }
+  },
+  methods: {
+    validateProps() {
+      if (this.type === 'ai' && this.kind === 'count') {
+        console.error('DtBadge error: type: \'ai\' with kind: \'count\' is an invalid combination.');
+      }
+    }
+
+  }
+});
+;// CONCATENATED MODULE: ./components/badge/badge.vue?vue&type=script&lang=js&
+ /* harmony default export */ const badge_badgevue_type_script_lang_js_ = (badgevue_type_script_lang_js_); 
+;// CONCATENATED MODULE: ./components/badge/badge.vue
+
+
+
+
+
+/* normalize component */
+;
+var badge_component = normalizeComponent(
+  badge_badgevue_type_script_lang_js_,
+  badgevue_type_template_id_741d001d_render,
+  badgevue_type_template_id_741d001d_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ const badge = (badge_component.exports);
+;// CONCATENATED MODULE: ./components/badge/index.js
+
+
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/banner/banner.vue?vue&type=template&id=756779c1&
+var bannervue_type_template_id_756779c1_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('aside',{class:_vm.bannerClass,style:(_vm.bannerBackgroundImage),attrs:{"role":_vm.role},on:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"tab",9,$event.key,"Tab")){ return null; }return _vm.trapFocus.apply(null, arguments)}}},[_c('div',{staticClass:"d-banner__dialog",class:_vm.dialogClass,attrs:{"aria-labelledby":_vm.titleId,"aria-describedby":_vm.contentId}},[(!_vm.hideIcon)?_c('dt-notice-icon',_vm._g({attrs:{"kind":_vm.kind}},_vm.$listeners),[_vm._t("icon")],2):_vm._e(),_c('dt-notice-content',_vm._g({attrs:{"title-id":_vm.titleId,"content-id":_vm.contentId,"title":_vm.title},scopedSlots:_vm._u([{key:"titleOverride",fn:function(){return [_vm._t("titleOverride")]},proxy:true}],null,true)},_vm.$listeners),[_vm._t("default")],2),_c('dt-notice-action',_vm._g({attrs:{"hide-close":_vm.hideClose,"close-button-props":_vm.closeButtonProps,"visually-hidden-close":_vm.visuallyHiddenClose,"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel}},_vm.$listeners),[_vm._t("action")],2)],1)])}
+var bannervue_type_template_id_756779c1_staticRenderFns = []
+
+
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/notice/notice_icon.vue?vue&type=template&id=dbeeebfa&
+var notice_iconvue_type_template_id_dbeeebfa_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.defaultIcon || _vm.$slots.default)?_c('div',{staticClass:"d-notice__icon",attrs:{"aria-hidden":"true"}},[_vm._t("default",function(){return [_c('dt-icon',{attrs:{"name":_vm.defaultIcon,"size":"400"}})]})],2):_vm._e()}
+var notice_iconvue_type_template_id_dbeeebfa_staticRenderFns = []
+
+
 ;// CONCATENATED MODULE: ./components/notice/notice_constants.js
 const NOTICE_KINDS = ['base', 'error', 'info', 'success', 'warning'];
 const NOTICE_ROLES = ['alert', 'alertdialog', 'status'];

package/dist/dialtone-vue.umd.js

@@ -1123,7 +1123,8 @@ __webpack_require__.d(__webpack_exports__, {
   "AVATAR_COLOR_MODIFIERS": () => (/* reexport */ AVATAR_COLOR_MODIFIERS),
   "AVATAR_KIND_MODIFIERS": () => (/* reexport */ AVATAR_KIND_MODIFIERS),
   "AVATAR_SIZE_MODIFIERS": () => (/* reexport */ AVATAR_SIZE_MODIFIERS),
-  "BADGE_COLOR_MODIFIERS": () => (/* reexport */ BADGE_COLOR_MODIFIERS),
+  "BADGE_KIND_MODIFIERS": () => (/* reexport */ BADGE_KIND_MODIFIERS),
+  "BADGE_TYPE_MODIFIERS": () => (/* reexport */ BADGE_TYPE_MODIFIERS),
   "BREADCRUMBS_INVERTED_MODIFIER": () => (/* reexport */ BREADCRUMBS_INVERTED_MODIFIER),
   "BREADCRUMB_ITEM_SELECTED_MODIFIER": () => (/* reexport */ BREADCRUMB_ITEM_SELECTED_MODIFIER),
   "BUTTON_GROUP_ALIGNMENT": () => (/* reexport */ BUTTON_GROUP_ALIGNMENT),
@@ -1923,121 +1924,28 @@ var avatar_component = normalizeComponent(
 ;// CONCATENATED MODULE: ./components/avatar/index.js
 
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/badge/badge.vue?vue&type=template&id=fea57e1e&
-var badgevue_type_template_id_fea57e1e_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('span',{class:[
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/badge/badge.vue?vue&type=template&id=741d001d&
+var badgevue_type_template_id_741d001d_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('span',{class:[
     'd-badge',
-    _vm.BADGE_COLOR_MODIFIERS[_vm.color] ],attrs:{"data-qa":"dt-badge"}},[_vm._t("default",function(){return [_vm._v(" "+_vm._s(_vm.text)+" ")]})],2)}
-var badgevue_type_template_id_fea57e1e_staticRenderFns = []
+    _vm.BADGE_TYPE_MODIFIERS[_vm.type],
+    _vm.BADGE_KIND_MODIFIERS[_vm.kind] ],attrs:{"data-qa":"dt-badge"}},[(_vm.iconLeft || _vm.type === 'ai')?_c('span',{staticClass:"d-badge__icon-left"},[_c('dt-icon',{attrs:{"name":_vm.iconLeft || 'dialpad-ai',"size":"200"}})],1):_vm._e(),_c('span',{staticClass:"d-badge__label"},[_vm._t("default",function(){return [_vm._v(" "+_vm._s(_vm.text)+" ")]})],2),(_vm.iconRight)?_c('span',{staticClass:"d-badge__icon-right"},[_c('dt-icon',{attrs:{"name":_vm.iconRight,"size":"200"}})],1):_vm._e()])}
+var badgevue_type_template_id_741d001d_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./components/badge/badge_constants.js
-const BADGE_COLOR_MODIFIERS = {
-  base: '',
-  'black-700': 'd-badge--black-700',
-  'green-400': 'd-badge--green-400',
-  'orange-400': 'd-badge--orange-400',
-  'magenta-100': 'd-badge--magenta-100',
-  'magenta-300': 'd-badge--magenta-300',
-  'magenta-400': 'd-badge--magenta-400',
-  'magenta-500': 'd-badge--magenta-500',
-  'purple-100': 'd-badge--purple-100',
-  'purple-300': 'd-badge--purple-300',
-  'purple-400': 'd-badge--purple-400',
-  'purple-500': 'd-badge--purple-500',
-  'red-300': 'd-badge--red-300',
-  white: 'd-badge--white',
-  'gold-200': 'd-badge--gold-200'
+const BADGE_TYPE_MODIFIERS = {
+  default: '',
+  info: 'd-badge--info',
+  success: 'd-badge--success',
+  warning: 'd-badge--warning',
+  critical: 'd-badge--critical',
+  bulletin: 'd-badge--bulletin',
+  ai: 'd-badge--ai'
+};
+const BADGE_KIND_MODIFIERS = {
+  label: '',
+  count: 'd-badge--count'
 };
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-80[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/badge/badge.vue?vue&type=script&lang=js&
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-
-/**
- * A badge is a compact UI element that provides brief, descriptive information about an element.
- * It is terse, ideally one word.
- * @see https://dialpad.design/components/badge.html
- */
-
-/* harmony default export */ const badgevue_type_script_lang_js_ = ({
-  name: 'DtBadge',
-  props: {
-    /**
-     * Text for the badge content
-     */
-    text: {
-      type: String,
-      default: ''
-    },
-
-    /**
-     * Color for the badge background
-     * @values base, black-700, green-400, orange-400,
-     * pink-300, pink-500, pink-600, pink-700,
-     * purple-100, purple-300, purple-500, purple-700,
-     * red-500, white, yellow-300
-     */
-    color: {
-      type: String,
-      default: 'base',
-      validator: color => Object.keys(BADGE_COLOR_MODIFIERS).includes(color)
-    }
-  },
-
-  data() {
-    return {
-      BADGE_COLOR_MODIFIERS: BADGE_COLOR_MODIFIERS
-    };
-  }
-
-});
-;// CONCATENATED MODULE: ./components/badge/badge.vue?vue&type=script&lang=js&
- /* harmony default export */ const badge_badgevue_type_script_lang_js_ = (badgevue_type_script_lang_js_); 
-;// CONCATENATED MODULE: ./components/badge/badge.vue
-
-
-
-
-
-/* normalize component */
-;
-var badge_component = normalizeComponent(
-  badge_badgevue_type_script_lang_js_,
-  badgevue_type_template_id_fea57e1e_render,
-  badgevue_type_template_id_fea57e1e_staticRenderFns,
-  false,
-  null,
-  null,
-  null
-  
-)
-
-/* harmony default export */ const badge = (badge_component.exports);
-;// CONCATENATED MODULE: ./components/badge/index.js
-
-
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/banner/banner.vue?vue&type=template&id=756779c1&
-var bannervue_type_template_id_756779c1_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('aside',{class:_vm.bannerClass,style:(_vm.bannerBackgroundImage),attrs:{"role":_vm.role},on:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"tab",9,$event.key,"Tab")){ return null; }return _vm.trapFocus.apply(null, arguments)}}},[_c('div',{staticClass:"d-banner__dialog",class:_vm.dialogClass,attrs:{"aria-labelledby":_vm.titleId,"aria-describedby":_vm.contentId}},[(!_vm.hideIcon)?_c('dt-notice-icon',_vm._g({attrs:{"kind":_vm.kind}},_vm.$listeners),[_vm._t("icon")],2):_vm._e(),_c('dt-notice-content',_vm._g({attrs:{"title-id":_vm.titleId,"content-id":_vm.contentId,"title":_vm.title},scopedSlots:_vm._u([{key:"titleOverride",fn:function(){return [_vm._t("titleOverride")]},proxy:true}],null,true)},_vm.$listeners),[_vm._t("default")],2),_c('dt-notice-action',_vm._g({attrs:{"hide-close":_vm.hideClose,"close-button-props":_vm.closeButtonProps,"visually-hidden-close":_vm.visuallyHiddenClose,"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel}},_vm.$listeners),[_vm._t("action")],2)],1)])}
-var bannervue_type_template_id_756779c1_staticRenderFns = []
-
-
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/notice/notice_icon.vue?vue&type=template&id=dbeeebfa&
-var notice_iconvue_type_template_id_dbeeebfa_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.defaultIcon || _vm.$slots.default)?_c('div',{staticClass:"d-notice__icon",attrs:{"aria-hidden":"true"}},[_vm._t("default",function(){return [_c('dt-icon',{attrs:{"name":_vm.defaultIcon,"size":"400"}})]})],2):_vm._e()}
-var notice_iconvue_type_template_id_dbeeebfa_staticRenderFns = []
-
-
 ;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/icon/icon.vue?vue&type=template&id=0c7462d0&
 var iconvue_type_template_id_0c7462d0_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.currentIcon,{tag:"component",class:_vm.iconSize,attrs:{"data-qa":"dt-icon","aria-hidden":_vm.ariaLabel ? 'false' : 'true',"aria-label":_vm.ariaLabel}})}
 var iconvue_type_template_id_0c7462d0_staticRenderFns = []
@@ -2153,6 +2061,167 @@ var icon_component = normalizeComponent(
 /* harmony default export */ const icon = (icon_component.exports);
 ;// CONCATENATED MODULE: ./components/icon/index.js
 
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-80[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/badge/badge.vue?vue&type=script&lang=js&
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+
+/**
+ * A badge is a compact UI element that provides brief, descriptive information about an element.
+ * It is terse, ideally one word.
+ * @see https://dialpad.design/components/badge.html
+ */
+
+/* harmony default export */ const badgevue_type_script_lang_js_ = ({
+  name: 'DtBadge',
+  components: {
+    DtIcon: icon
+  },
+  props: {
+    /**
+     * Icon on the left side of the badge. Supports any valid icon name from the icon catalog at
+     * https://dialpad.design/components/icon.html#icon-catalog. If type:'ai' is set, the ai icon
+     * will automatically be shown here, but this can be overridden by setting this prop.
+     */
+    iconLeft: {
+      type: String,
+      default: ''
+    },
+
+    /**
+     * Icon on the right side of the badge. Supports any valid icon name from the icon catalog at
+     * https://dialpad.design/components/icon.html#icon-catalog
+     */
+    iconRight: {
+      type: String,
+      default: ''
+    },
+
+    /**
+     * Text for the badge content
+     */
+    text: {
+      type: String,
+      default: ''
+    },
+
+    /**
+     * The kind of badge which determines the styling
+     * @values label, count
+     */
+    kind: {
+      type: String,
+      default: 'label',
+      validator: kind => Object.keys(BADGE_KIND_MODIFIERS).includes(kind)
+    },
+
+    /**
+     * Color for the badge background
+     * @values default, info, success, warning, critical, bulletin, ai
+     */
+    type: {
+      type: String,
+      default: 'default',
+      validator: type => Object.keys(BADGE_TYPE_MODIFIERS).includes(type)
+    }
+  },
+
+  data() {
+    return {
+      BADGE_TYPE_MODIFIERS: BADGE_TYPE_MODIFIERS,
+      BADGE_KIND_MODIFIERS: BADGE_KIND_MODIFIERS
+    };
+  },
+
+  watch: {
+    $props: {
+      immediate: true,
+      deep: true,
+
+      handler() {
+        this.validateProps();
+      }
+
+    }
+  },
+  methods: {
+    validateProps() {
+      if (this.type === 'ai' && this.kind === 'count') {
+        console.error('DtBadge error: type: \'ai\' with kind: \'count\' is an invalid combination.');
+      }
+    }
+
+  }
+});
+;// CONCATENATED MODULE: ./components/badge/badge.vue?vue&type=script&lang=js&
+ /* harmony default export */ const badge_badgevue_type_script_lang_js_ = (badgevue_type_script_lang_js_); 
+;// CONCATENATED MODULE: ./components/badge/badge.vue
+
+
+
+
+
+/* normalize component */
+;
+var badge_component = normalizeComponent(
+  badge_badgevue_type_script_lang_js_,
+  badgevue_type_template_id_741d001d_render,
+  badgevue_type_template_id_741d001d_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ const badge = (badge_component.exports);
+;// CONCATENATED MODULE: ./components/badge/index.js
+
+
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/banner/banner.vue?vue&type=template&id=756779c1&
+var bannervue_type_template_id_756779c1_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('aside',{class:_vm.bannerClass,style:(_vm.bannerBackgroundImage),attrs:{"role":_vm.role},on:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"tab",9,$event.key,"Tab")){ return null; }return _vm.trapFocus.apply(null, arguments)}}},[_c('div',{staticClass:"d-banner__dialog",class:_vm.dialogClass,attrs:{"aria-labelledby":_vm.titleId,"aria-describedby":_vm.contentId}},[(!_vm.hideIcon)?_c('dt-notice-icon',_vm._g({attrs:{"kind":_vm.kind}},_vm.$listeners),[_vm._t("icon")],2):_vm._e(),_c('dt-notice-content',_vm._g({attrs:{"title-id":_vm.titleId,"content-id":_vm.contentId,"title":_vm.title},scopedSlots:_vm._u([{key:"titleOverride",fn:function(){return [_vm._t("titleOverride")]},proxy:true}],null,true)},_vm.$listeners),[_vm._t("default")],2),_c('dt-notice-action',_vm._g({attrs:{"hide-close":_vm.hideClose,"close-button-props":_vm.closeButtonProps,"visually-hidden-close":_vm.visuallyHiddenClose,"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel}},_vm.$listeners),[_vm._t("action")],2)],1)])}
+var bannervue_type_template_id_756779c1_staticRenderFns = []
+
+
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/notice/notice_icon.vue?vue&type=template&id=dbeeebfa&
+var notice_iconvue_type_template_id_dbeeebfa_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.defaultIcon || _vm.$slots.default)?_c('div',{staticClass:"d-notice__icon",attrs:{"aria-hidden":"true"}},[_vm._t("default",function(){return [_c('dt-icon',{attrs:{"name":_vm.defaultIcon,"size":"400"}})]})],2):_vm._e()}
+var notice_iconvue_type_template_id_dbeeebfa_staticRenderFns = []
+
+
 ;// CONCATENATED MODULE: ./components/notice/notice_constants.js
 const NOTICE_KINDS = ['base', 'error', 'info', 'success', 'warning'];
 const NOTICE_ROLES = ['alert', 'alertdialog', 'status'];