@dialpad/dialtone-vue 2.28.0-beta.1 → 2.28.0

package/dist/dialtone-vue.common.js

@@ -138,7 +138,7 @@ __webpack_require__.r(__webpack_exports__);
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, ".dt-list-item:not(.dt-list-item--static){cursor:pointer}.dt-list-item--focusable:focus,.dt-list-item--focusable:focus-within,.dt-list-item--highlighted{background-color:hsla(var(--black-500-h),var(--black-500-s),var(--black-500-l),.15)}.dt-list-item:focus-visible{outline-color:var(--purple-500)}", ""]);
+___CSS_LOADER_EXPORT___.push([module.id, ".dt-list-item:not(.dt-list-item--static){cursor:pointer}.dt-list-item--focusable:focus,.dt-list-item--focusable:focus-within,.dt-list-item--highlighted{background-color:hsla(var(--black-400-h),var(--black-400-s),var(--black-400-l),.15)}.dt-list-item:focus-visible{outline-color:var(--purple-500)}", ""]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -258,7 +258,7 @@ __webpack_require__.r(__webpack_exports__);
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, ".skeleton-placeholder{display:flex;stroke:none;fill:var(--placeholder-from-color,var(--black-300));background:var(--placeholder-from-color,var(--black-300))}.skeleton-placeholder--animate{animation-name:placeholder-throb;animation-iteration-count:infinite}@keyframes placeholder-throb{10%{fill:var(--placeholder-from-color,var(--black-300));background:var(--placeholder-from-color,var(--black-300))}50%{fill:var(--placeholder-to-color,var(--black-100));background:var(--placeholder-to-color,var(--black-100))}90%{fill:var(--placeholder-from-color,var(--black-300));background:var(--placeholder-from-color,var(--black-300))}}", ""]);
+___CSS_LOADER_EXPORT___.push([module.id, ".skeleton-placeholder{display:flex;stroke:none;fill:var(--placeholder-from-color,var(--black-075));background:var(--placeholder-from-color,var(--black-075))}.skeleton-placeholder--animate{animation-name:placeholder-throb;animation-iteration-count:infinite}@keyframes placeholder-throb{10%{fill:var(--placeholder-from-color,var(--black-075));background:var(--placeholder-from-color,var(--black-075))}50%{fill:var(--placeholder-to-color,var(--black-025));background:var(--placeholder-to-color,var(--black-025))}90%{fill:var(--placeholder-from-color,var(--black-075));background:var(--placeholder-from-color,var(--black-075))}}", ""]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -306,7 +306,7 @@ __webpack_require__.r(__webpack_exports__);
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, ".dt-recipe-callbar-button:not(.dt-recipe-callbar-button--circle){width:8rem;height:6.2rem;letter-spacing:-.011rem;line-height:1.6rem}.dt-recipe-callbar-button--circle{border-radius:var(--br-circle)}.dt-recipe-callbar-button.d-btn .d-btn__icon .d-svg{width:2.4rem;height:2.4rem}.dt-recipe-callbar-button.d-btn[disabled]{background-color:unset}.dt-recipe-callbar-button--circle.d-btn[disabled]{border-color:unset}.dt-recipe-callbar-button--active{--button--fc:var(--muted-color-hover);--button--bgc:hsla(var(--muted-color-hsl)/15%)}.dt-recipe-callbar-button--danger.dt-recipe-callbar-button--active{--button--bgc:hsla(var(--error-color-hsl)/10%);--button--fc:var(--error-color-hover)}.dt-recipe-callbar-button--danger.dt-recipe-callbar-button--active:hover{--button--bgc:hsla(var(--error-color-hsl)/20%);--button--fc:var(--error-color-hover)}", ""]);
+___CSS_LOADER_EXPORT___.push([module.id, ".dt-recipe-callbar-button:not(.dt-recipe-callbar-button--circle){letter-spacing:-.011rem;line-height:1.6rem}.dt-recipe-callbar-button--circle{border-radius:var(--br-circle)}.dt-recipe-callbar-button.d-btn .d-btn__icon .d-svg{width:2.4rem;height:2.4rem}.dt-recipe-callbar-button.d-btn[disabled]{background-color:unset}.dt-recipe-callbar-button--circle.d-btn[disabled]{border-color:unset}.dt-recipe-callbar-button--active{--button--fc:var(--muted-color-hover);--button--bgc:hsla(var(--muted-color-hsl)/15%)}.dt-recipe-callbar-button--danger.dt-recipe-callbar-button--active{--button--bgc:hsla(var(--error-color-hsl)/10%);--button--fc:var(--error-color-hover)}.dt-recipe-callbar-button--danger.dt-recipe-callbar-button--active:hover{--button--bgc:hsla(var(--error-color-hsl)/20%);--button--fc:var(--error-color-hover)}", ""]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -1246,7 +1246,7 @@ if (typeof window !== 'undefined') {
 // Indicate to webpack that this file can be concatenated
 /* harmony default export */ const setPublicPath = (null);
 
-;// 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/avatar/avatar.vue?vue&type=template&id=3c10c908&
+;// 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/avatar/avatar.vue?vue&type=template&id=2820dd63&
 var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:[
     'd-avatar',
     _vm.AVATAR_KIND_MODIFIERS[_vm.kind],
@@ -1276,18 +1276,18 @@ const AVATAR_COLOR_MODIFIERS = {
   'orange-300': 'd-avatar--orange-300',
   'orange-400': 'd-avatar--orange-400',
   'orange-500': 'd-avatar--orange-500',
-  'magenta-100': 'd-avatar--magenta-100',
-  'magenta-200': 'd-avatar--magenta-200',
-  'magenta-300': 'd-avatar--magenta-300',
-  'magenta-400': 'd-avatar--magenta-400',
+  'pink-300': 'd-avatar--pink-300',
+  'pink-400': 'd-avatar--pink-400',
+  'pink-500': 'd-avatar--pink-500',
+  'pink-600': 'd-avatar--pink-600',
   'purple-200': 'd-avatar--purple-200',
   'purple-300': 'd-avatar--purple-300',
-  'purple-400': 'd-avatar--purple-400',
   'purple-500': 'd-avatar--purple-500',
-  'gold-100': 'd-avatar--gold-100',
-  'gold-200': 'd-avatar--gold-200',
-  'gold-300': 'd-avatar--gold-300',
-  'gold-500': 'd-avatar--gold-500'
+  'purple-600': 'd-avatar--purple-600',
+  'yellow-200': 'd-avatar--yellow-200',
+  'yellow-300': 'd-avatar--yellow-300',
+  'yellow-400': 'd-avatar--yellow-400',
+  'yellow-500': 'd-avatar--yellow-500'
 };
 /* harmony default export */ const avatar_constants = ({
   AVATAR_KIND_MODIFIERS,
@@ -1480,6 +1480,11 @@ const flushPromises = () => {
 
 
 
+/**
+ * An avatar is a visual representation of a user or object.
+ * @see https://dialpad.design/components/avatar.html
+ */
+
 /* harmony default export */ const avatarvue_type_script_lang_js_ = ({
   name: 'DtAvatar',
   inheritAttrs: false,
@@ -1498,6 +1503,7 @@ const flushPromises = () => {
 
     /**
      * The size of the avatar
+     * @values sm, md, lg
      */
     size: {
       type: String,
@@ -1507,6 +1513,11 @@ const flushPromises = () => {
 
     /**
      * The color of the avatar
+     * @values base
+     * orange-200, orange-300, orange-400, orange-500,
+     * pink-300, pink-400, pink-500, pink-600,
+     * purple-200, purple-300, purple-500, purple-600,
+     * yellow-200, yellow-300, yellow-400, yellow-500
      */
     color: {
       type: String,
@@ -1713,11 +1724,11 @@ var 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=8281dbe6&
-var badgevue_type_template_id_8281dbe6_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=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:[
     '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_8281dbe6_staticRenderFns = []
+var badgevue_type_template_id_fea57e1e_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./components/badge/badge_constants.js
@@ -1726,17 +1737,17 @@ const BADGE_COLOR_MODIFIERS = {
   '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',
+  'pink-300': 'd-badge--pink-300',
+  'pink-500': 'd-badge--pink-500',
+  'pink-600': 'd-badge--pink-600',
+  'pink-700': 'd-badge--pink-700',
   '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',
+  'purple-700': 'd-badge--purple-700',
+  'red-500': 'd-badge--red-500',
   white: 'd-badge--white',
-  'gold-200': 'd-badge--gold-200'
+  'yellow-300': 'd-badge--yellow-300'
 };
 ;// 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&
 //
@@ -1755,6 +1766,12 @@ const BADGE_COLOR_MODIFIERS = {
 //
 //
 
+/**
+ * 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: {
@@ -1768,6 +1785,10 @@ const BADGE_COLOR_MODIFIERS = {
 
     /**
      * 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,
@@ -1795,8 +1816,8 @@ const BADGE_COLOR_MODIFIERS = {
 ;
 var badge_component = normalizeComponent(
   badge_badgevue_type_script_lang_js_,
-  badgevue_type_template_id_8281dbe6_render,
-  badgevue_type_template_id_8281dbe6_staticRenderFns,
+  badgevue_type_template_id_fea57e1e_render,
+  badgevue_type_template_id_fea57e1e_staticRenderFns,
   false,
   null,
   null,
@@ -1808,14 +1829,14 @@ var badge_component = normalizeComponent(
 ;// 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=1a44ca06&
-var bannervue_type_template_id_1a44ca06_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}},_vm.$listeners),[_vm._t("action")],2)],1)])}
-var bannervue_type_template_id_1a44ca06_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/banner/banner.vue?vue&type=template&id=6a644b26&
+var bannervue_type_template_id_6a644b26_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}},_vm.$listeners),[_vm._t("action")],2)],1)])}
+var bannervue_type_template_id_6a644b26_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=58ae40bb&
-var notice_iconvue_type_template_id_58ae40bb_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(_vm.defaultIcon,{tag:"component"})]})],2):_vm._e()}
-var notice_iconvue_type_template_id_58ae40bb_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=5544041e&
+var notice_iconvue_type_template_id_5544041e_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(_vm.defaultIcon,{tag:"component"})]})],2):_vm._e()}
+var notice_iconvue_type_template_id_5544041e_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!./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconLightbulb.vue?vue&type=template&id=d9fc2436&
@@ -1960,6 +1981,7 @@ const NOTICE_ROLES = ['alert', 'alertdialog', 'status'];
 //
 //
 //
+//
 
 
 
@@ -1977,6 +1999,10 @@ const kindToIcon = new Map([['info', 'IconInfo'], ['success', 'IconCheckCircle']
     IconCheckCircle: IconCheckCircle
   },
   props: {
+    /**
+     * Kind of icon
+     * @values base, error, info, success, warning
+     */
     kind: {
       type: String,
       default: 'base',
@@ -2006,8 +2032,8 @@ const kindToIcon = new Map([['info', 'IconInfo'], ['success', 'IconCheckCircle']
 ;
 var notice_icon_component = normalizeComponent(
   notice_notice_iconvue_type_script_lang_js_,
-  notice_iconvue_type_template_id_58ae40bb_render,
-  notice_iconvue_type_template_id_58ae40bb_staticRenderFns,
+  notice_iconvue_type_template_id_5544041e_render,
+  notice_iconvue_type_template_id_5544041e_staticRenderFns,
   false,
   null,
   null,
@@ -2016,9 +2042,9 @@ var notice_icon_component = normalizeComponent(
 )
 
 /* harmony default export */ const notice_icon = (notice_icon_component.exports);
-;// 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_content.vue?vue&type=template&id=24cf95e4&
-var notice_contentvue_type_template_id_24cf95e4_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"d-notice__content",attrs:{"data-qa":"notice-content"}},[(_vm.title || this.$slots.titleOverride)?_c('p',{staticClass:"d-notice__title",attrs:{"id":_vm.titleId,"data-qa":"notice-content-title"}},[_vm._t("titleOverride",function(){return [_vm._v(" "+_vm._s(_vm.title)+" ")]})],2):_vm._e(),_c('p',{staticClass:"d-notice__message",attrs:{"id":_vm.contentId,"data-qa":"notice-content-message"}},[_vm._t("default")],2)])}
-var notice_contentvue_type_template_id_24cf95e4_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_content.vue?vue&type=template&id=45f8172a&
+var notice_contentvue_type_template_id_45f8172a_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"d-notice__content",attrs:{"data-qa":"notice-content"}},[(_vm.title || _vm.$slots.titleOverride)?_c('p',{staticClass:"d-notice__title",attrs:{"id":_vm.titleId,"data-qa":"notice-content-title"}},[_vm._t("titleOverride",function(){return [_vm._v(" "+_vm._s(_vm.title)+" ")]})],2):_vm._e(),_c('p',{staticClass:"d-notice__message",attrs:{"id":_vm.contentId,"data-qa":"notice-content-message"}},[_vm._t("default")],2)])}
+var notice_contentvue_type_template_id_45f8172a_staticRenderFns = []
 
 
 ;// 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/notice/notice_content.vue?vue&type=script&lang=js&
@@ -2047,17 +2073,32 @@ var notice_contentvue_type_template_id_24cf95e4_staticRenderFns = []
 //
 //
 //
+//
+//
 /* harmony default export */ const notice_contentvue_type_script_lang_js_ = ({
   name: 'DtNoticeContent',
   props: {
+    /**
+     * Title header of the notice. This can be left blank to remove the title from the notice entirely.
+     */
     title: {
       type: String,
       default: ''
     },
+
+    /**
+     * ID for the title element of the component. Useful for aria-describedby
+     * or aria-labelledby or any other reason you may need an id to refer to the title.
+     */
     titleId: {
       type: String,
       default: undefined
     },
+
+    /**
+     * ID for the content element of the component. Useful for aria-describedby
+     * or aria-labelledby or any other reason you may need an id to refer to the content.
+     */
     contentId: {
       type: String,
       default: undefined
@@ -2076,8 +2117,8 @@ var notice_contentvue_type_template_id_24cf95e4_staticRenderFns = []
 ;
 var notice_content_component = normalizeComponent(
   notice_notice_contentvue_type_script_lang_js_,
-  notice_contentvue_type_template_id_24cf95e4_render,
-  notice_contentvue_type_template_id_24cf95e4_staticRenderFns,
+  notice_contentvue_type_template_id_45f8172a_render,
+  notice_contentvue_type_template_id_45f8172a_staticRenderFns,
   false,
   null,
   null,
@@ -2086,9 +2127,9 @@ var notice_content_component = normalizeComponent(
 )
 
 /* harmony default export */ const notice_content = (notice_content_component.exports);
-;// 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_action.vue?vue&type=template&id=83c987fc&
-var notice_actionvue_type_template_id_83c987fc_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"d-notice__actions",attrs:{"data-qa":"notice-content-actions"}},[_vm._t("default"),(!_vm.hideClose)?_c('dt-button',_vm._b({ref:"closeButton",attrs:{"size":"sm","importance":"clear","circle":"","aria-label":_vm.closeButtonProps.ariaLabel ? _vm.closeButtonProps.ariaLabel : 'Close'},on:{"click":_vm.close},scopedSlots:_vm._u([{key:"icon",fn:function(){return [_c('icon-close')]},proxy:true}],null,false,4267981299)},'dt-button',_vm.closeButtonProps,false)):_vm._e()],2)}
-var notice_actionvue_type_template_id_83c987fc_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_action.vue?vue&type=template&id=49bf6244&
+var notice_actionvue_type_template_id_49bf6244_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"d-notice__actions",attrs:{"data-qa":"notice-content-actions"}},[_vm._t("default"),(!_vm.hideClose)?_c('dt-button',_vm._b({ref:"closeButton",attrs:{"size":"sm","importance":"clear","circle":"","aria-label":_vm.closeButtonProps.ariaLabel ? _vm.closeButtonProps.ariaLabel : 'Close'},on:{"click":_vm.close},scopedSlots:_vm._u([{key:"icon",fn:function(){return [_c('icon-close')]},proxy:true}],null,false,4267981299)},'dt-button',_vm.closeButtonProps,false)):_vm._e()],2)}
+var notice_actionvue_type_template_id_49bf6244_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!./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconClose.vue?vue&type=template&id=4ef5457b&
@@ -2115,14 +2156,14 @@ var IconClose_component = normalizeComponent(
 )
 
 /* harmony default export */ const IconClose = (IconClose_component.exports);
-;// 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/button/button.vue?vue&type=template&id=29abe406&
-var buttonvue_type_template_id_29abe406_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('button',_vm._g({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/button/button.vue?vue&type=template&id=5c485efa&
+var buttonvue_type_template_id_5c485efa_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('button',_vm._g({class:[
     'base-button__button',
-    _vm.buttonClasses() ],attrs:{"data-qa":"dt-button","type":_vm.type,"aria-live":_vm.computedAriaLive,"aria-label":_vm.loading ? 'loading' : _vm.$attrs['aria-label']}},_vm.buttonListeners),[(_vm.shouldRenderIcon())?_c('span',{class:[
+    _vm.buttonClasses() ],style:({ width: _vm.width }),attrs:{"data-qa":"dt-button","type":_vm.type,"disabled":_vm.disabled,"aria-live":_vm.computedAriaLive,"aria-label":_vm.loading ? 'loading' : _vm.$attrs['aria-label']}},_vm.buttonListeners),[(_vm.shouldRenderIcon())?_c('span',{class:[
       'base-button__icon',
       'd-btn__icon',
       _vm.ICON_POSITION_MODIFIERS[_vm.iconPosition] ],attrs:{"data-qa":"dt-button-icon"}},[_vm._t("icon")],2):_vm._e(),(_vm.$slots.default)?_c('span',{class:['d-w100p', 'd-btn__label', 'base-button__label', _vm.labelClass],attrs:{"data-qa":"dt-button-label"}},[_vm._t("default")],2):_vm._e()])}
-var buttonvue_type_template_id_29abe406_staticRenderFns = []
+var buttonvue_type_template_id_5c485efa_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./components/button/button_constants.js
@@ -2177,7 +2218,7 @@ function _invalidCombinationMessage(circle, kind, importance) {
   return `You cannot have a ${circle ? 'circle ' : ''}button \
 with kind: ${kind} and importance: ${importance} as it \
 does not exist in our design system. \
-See https://dialpad.design/components/button for a \
+See https://dialpad.design/components/button.html for a \
 list of available button styles`;
 }
 
@@ -2243,14 +2284,16 @@ const LINK_KIND_MODIFIERS = {
 //
 //
 //
+//
+//
 
 
 
 /**
- * Base Vue component for Dialtone Buttons.
- * @displayName DtButton
- * @property {Boolean} disabled attribute
- * @property {String} width attribute
+ * A button is a UI element which allows users to take an action throughout the app.
+ * It is important a button is identifiable, consistent, and communicates its actions clearly,
+ * and is appropriately sized to its action.
+ * @see https://dialpad.design/components/button.html
  */
 
 /* harmony default export */ const buttonvue_type_script_lang_js_ = ({
@@ -2259,7 +2302,6 @@ const LINK_KIND_MODIFIERS = {
     /**
      * Whether the button is a circle or not.
      * @values true, false
-     * @see https://dialpad.design/components/button/
      */
     circle: {
       type: Boolean,
@@ -2269,7 +2311,6 @@ const LINK_KIND_MODIFIERS = {
     /**
      * The position of the icon slot within the button.
      * @values left, right, top, bottom
-     * @see https://dialpad.design/components/button/
      */
     iconPosition: {
       type: String,
@@ -2280,7 +2321,6 @@ const LINK_KIND_MODIFIERS = {
     /**
      * The fill and outline of the button associated with its visual importance.
      * @values clear, outlined, primary
-     * @see https://dialpad.design/components/button/
      */
     importance: {
       type: String,
@@ -2291,7 +2331,7 @@ const LINK_KIND_MODIFIERS = {
     /**
      * Whether the button should be styled as a link or not.
      * @values true, false
-     * @see https://dialpad.design/components/link
+     * @see https://dialpad.design/components/link.html
      */
     link: {
       type: Boolean,
@@ -2300,8 +2340,8 @@ const LINK_KIND_MODIFIERS = {
 
     /**
      * The color of the link and button if the button is styled as a link.
-     * @values danger, dark, default, success, warning
-     * @see https://dialpad.design/components/link
+     * @values default, warning, danger, success, muted, inverted
+     * @see https://dialpad.design/components/link.html
      */
     linkKind: {
       type: String,
@@ -2310,9 +2350,23 @@ const LINK_KIND_MODIFIERS = {
     },
 
     /**
-     * The HTML button type attribute.
+     * HTML button disabled attribute
+     * <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled" target="_blank">
+     *   (Reference)
+     * </a>
+     * @values true, false
+     */
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+
+    /**
+     * HTML button type attribute
+     * <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type" target="_blank">
+     *   (Reference)
+     * </a>
      * @values button, submit, reset
-     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
      */
     type: {
       type: String,
@@ -2320,10 +2374,21 @@ const LINK_KIND_MODIFIERS = {
       validator: t => BUTTON_TYPES.includes(t)
     },
 
+    /**
+     * Button width, accepts
+     * <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/width" target="_blank">
+     *   CSS width attribute
+     * </a>
+     * values
+     */
+    width: {
+      type: String,
+      default: 'auto'
+    },
+
     /**
      * The size of the button.
      * @values xs, sm, md, lg, xl
-     * @see https://dialpad.design/components/button
      */
     size: {
       type: String,
@@ -2342,7 +2407,6 @@ const LINK_KIND_MODIFIERS = {
     /**
      * Whether the button should display a loading animation or not.
      * @values true, false
-     * @see https://dialpad.design/components/button
      */
     loading: {
       type: Boolean,
@@ -2351,8 +2415,7 @@ const LINK_KIND_MODIFIERS = {
 
     /**
      * The color of the button.
-     * @values default, danger, inverted
-     * @see https://dialpad.design/components/button
+     * @values default, muted, danger, inverted
      */
     kind: {
       type: String,
@@ -2502,8 +2565,8 @@ const LINK_KIND_MODIFIERS = {
 ;
 var button_component = normalizeComponent(
   button_buttonvue_type_script_lang_js_,
-  buttonvue_type_template_id_29abe406_render,
-  buttonvue_type_template_id_29abe406_staticRenderFns,
+  buttonvue_type_template_id_5c485efa_render,
+  buttonvue_type_template_id_5c485efa_staticRenderFns,
   false,
   null,
   null,
@@ -2536,6 +2599,7 @@ var button_component = normalizeComponent(
 //
 //
 //
+//
 
 
 /* harmony default export */ const notice_actionvue_type_script_lang_js_ = ({
@@ -2545,16 +2609,30 @@ var button_component = normalizeComponent(
     DtButton: button_button
   },
   props: {
+    /**
+     * Props for the notice close button.
+     */
     closeButtonProps: {
       type: Object,
       default: () => ({})
     },
+
+    /**
+     * Hides the close button from the notice
+     * @values true, false
+     */
     hideClose: {
       type: Boolean,
       default: false
     }
   },
-  emits: ['close'],
+  emits: [
+  /**
+   * Close button click event
+   *
+   * @event close
+   */
+  'close'],
 
   created() {
     if (!this.hideClose && !this.closeButtonProps.ariaLabel) {
@@ -2593,8 +2671,8 @@ var button_component = normalizeComponent(
 ;
 var notice_action_component = normalizeComponent(
   notice_notice_actionvue_type_script_lang_js_,
-  notice_actionvue_type_template_id_83c987fc_render,
-  notice_actionvue_type_template_id_83c987fc_staticRenderFns,
+  notice_actionvue_type_template_id_49bf6244_render,
+  notice_actionvue_type_template_id_49bf6244_staticRenderFns,
   false,
   null,
   null,
@@ -2608,14 +2686,19 @@ const focusableAttrs = ':not(:disabled):not([aria-disabled="true"])';
 const tabbableAttrs = `${focusableAttrs}:not([tabindex="-1"])`;
 const focusableElementsList = `button,[href],input,select,textarea,details,[tabindex]`;
 /**
- * this mixin provides the methods to automatically trap tab focus within
+ * This mixin provides the methods to automatically trap tab focus within
  * the component this mixin is on, meaning it is not possible to tab out
- * of the component without dismissing it. Useful for accessibility reasons
- * on things like important actionable alerts. Use focusFirstElement to
- * focus on the first tabbable element within your component, and call
+ * of the component without dismissing it.
+ *
+ * Useful for accessibility reasons on things like important actionable alerts.
+ *
+ * Use focusFirstElement to focus on the first tabbable element within your component, and call
  * focusTrappedTabPress every time tab is pressed to trap tab within this
- * component. Note that focusFirstElement WILL focus elements with tabindex="-1",
+ * component.
+ *
+ * Note that focusFirstElement WILL focus elements with tabindex="-1",
  * however focusTrappedTabPress will not.
+ * @displayName Modal Mixin
  */
 
 /* harmony default export */ const modal = ({
@@ -2770,6 +2853,12 @@ const focusableElementsList = `button,[href],input,select,textarea,details,[tabi
 
 
 
+/**
+ * Banners are a type of notice, delivering system and engagement messaging.
+ * These are highly intrusive notices and should be used sparingly and appropriately.
+ * @see https://dialpad.design/components/banner.html
+ */
+
 /* harmony default export */ const bannervue_type_script_lang_js_ = ({
   name: 'DtBanner',
   components: {
@@ -2815,8 +2904,9 @@ const focusableElementsList = `button,[href],input,select,textarea,details,[tabi
 
     /**
      * Used in scenarios where the message needs to visually dominate the screen.
-     *  This will also change the aria role from status to alertdialog.
+     * This will also change the aria role from status to alertdialog.
      * and will modally trap the keyboard focus in the dialog as soon as it displays.
+     * @values true, false
      */
     important: {
       type: Boolean,
@@ -2825,6 +2915,7 @@ const focusableElementsList = `button,[href],input,select,textarea,details,[tabi
 
     /**
      * Pins the banner to the top of the window and pushes all app content down.
+     * @values true, false
      */
     pinned: {
       type: Boolean,
@@ -2833,10 +2924,11 @@ const focusableElementsList = `button,[href],input,select,textarea,details,[tabi
 
     /**
      * Severity level of the notice, sets the icon and background
+     * @values base, error, info, success, warning
      */
     kind: {
       type: String,
-      default: '',
+      default: 'base',
 
       validate(kind) {
         return NOTICE_KINDS.includes(kind);
@@ -2862,6 +2954,7 @@ const focusableElementsList = `button,[href],input,select,textarea,details,[tabi
 
     /**
      * Hides the icon from the notice
+     * @values true, false
      */
     hideIcon: {
       type: Boolean,
@@ -2886,7 +2979,9 @@ const focusableElementsList = `button,[href],input,select,textarea,details,[tabi
 
     /**
      * Background image size, follows the background-size CSS property values
-     * https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
+     * <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-size" target="_blank">
+     *   CSS background-sizes
+     * </a>
      */
     backgroundSize: {
       type: String,
@@ -2954,8 +3049,8 @@ const focusableElementsList = `button,[href],input,select,textarea,details,[tabi
 ;
 var banner_component = normalizeComponent(
   banner_bannervue_type_script_lang_js_,
-  bannervue_type_template_id_1a44ca06_render,
-  bannervue_type_template_id_1a44ca06_staticRenderFns,
+  bannervue_type_template_id_6a644b26_render,
+  bannervue_type_template_id_6a644b26_staticRenderFns,
   false,
   null,
   null,
@@ -2966,32 +3061,32 @@ var banner_component = normalizeComponent(
 /* harmony default export */ const banner = (banner_component.exports);
 ;// CONCATENATED MODULE: ./components/banner/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/breadcrumbs/breadcrumbs.vue?vue&type=template&id=6b368508&
-var breadcrumbsvue_type_template_id_6b368508_render = function () {
+;// 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/breadcrumbs/breadcrumbs.vue?vue&type=template&id=44efd414&
+var breadcrumbsvue_type_template_id_44efd414_render = function () {
 var _obj;
 var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('nav',{class:[
     'd-breadcrumbs',
     ( _obj = {}, _obj[_vm.BREADCRUMBS_INVERTED_MODIFIER] = _vm.inverted, _obj ) ],attrs:{"aria-label":_vm.ariaLabel,"data-qa":"dt-breadcrumbs"}},[_c('ol',[_vm._t("default",function(){return _vm._l((_vm.breadcrumbs),function(item,index){return _c('dt-breadcrumb-item',_vm._b({key:_vm.getBreadcrumbItemKey(index),attrs:{"inverted":_vm.inverted}},'dt-breadcrumb-item',item,false))})})],2)])}
-var breadcrumbsvue_type_template_id_6b368508_staticRenderFns = []
+var breadcrumbsvue_type_template_id_44efd414_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./components/breadcrumbs/breadcrumbs_constants.js
 const BREADCRUMB_ITEM_SELECTED_MODIFIER = 'd-breadcrumbs__item--selected';
 const BREADCRUMBS_INVERTED_MODIFIER = 'd-breadcrumbs--inverted';
-;// 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/breadcrumbs/breadcrumb_item.vue?vue&type=template&id=6f97ec8a&
-var breadcrumb_itemvue_type_template_id_6f97ec8a_render = function () {
+;// 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/breadcrumbs/breadcrumb_item.vue?vue&type=template&id=5a420c8e&
+var breadcrumb_itemvue_type_template_id_5a420c8e_render = function () {
 var _obj;
 var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('li',{class:[
     'd-breadcrumbs__item',
     ( _obj = {}, _obj[_vm.BREADCRUMB_ITEM_SELECTED_MODIFIER] = _vm.selected, _obj ) ],attrs:{"data-qa":"dt-breadcrumb-item"}},[_c('dt-link',_vm._b({attrs:{"kind":_vm.linkKind,"aria-current":_vm.ariaCurrent,"data-qa":"breadcrumb-item"}},'dt-link',_vm.$attrs,false),[_vm._t("default",function(){return [_vm._v(" "+_vm._s(_vm.label)+" ")]})],2)],1)}
-var breadcrumb_itemvue_type_template_id_6f97ec8a_staticRenderFns = []
+var breadcrumb_itemvue_type_template_id_5a420c8e_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/link/link.vue?vue&type=template&id=f7ce3dfc&
-var linkvue_type_template_id_f7ce3dfc_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('a',_vm._g({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/link/link.vue?vue&type=template&id=17f0d290&
+var linkvue_type_template_id_17f0d290_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('a',_vm._g({class:[
     'd-link',
     _vm.LINK_KIND_MODIFIERS[_vm.kind] ],attrs:{"data-qa":"dt-link"}},_vm.$listeners),[_vm._t("default")],2)}
-var linkvue_type_template_id_f7ce3dfc_staticRenderFns = []
+var linkvue_type_template_id_17f0d290_staticRenderFns = []
 
 
 ;// 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/link/link.vue?vue&type=script&lang=js&
@@ -3008,10 +3103,13 @@ var linkvue_type_template_id_f7ce3dfc_staticRenderFns = []
 //
 //
 //
+//
 
 /**
+ * A link is a navigational element that can be found on its own, within other text, or directly following content.
  * @property {String} href attribute
  * @property {String} rel attribute
+ * @see https://dialpad.design/components/link.html
  */
 
 /* harmony default export */ const linkvue_type_script_lang_js_ = ({
@@ -3019,6 +3117,7 @@ var linkvue_type_template_id_f7ce3dfc_staticRenderFns = []
   props: {
     /**
      * Applies the link variant styles
+     * @values null, danger, warning, success, muted, inverted
      */
     kind: {
       type: String,
@@ -3072,8 +3171,8 @@ var linkvue_type_template_id_f7ce3dfc_staticRenderFns = []
 ;
 var link_component = normalizeComponent(
   link_linkvue_type_script_lang_js_,
-  linkvue_type_template_id_f7ce3dfc_render,
-  linkvue_type_template_id_f7ce3dfc_staticRenderFns,
+  linkvue_type_template_id_17f0d290_render,
+  linkvue_type_template_id_17f0d290_staticRenderFns,
   false,
   null,
   null,
@@ -3119,7 +3218,7 @@ var link_component = normalizeComponent(
   inheritAttrs: false,
   props: {
     /**
-     * Applies the inverted styles to the link
+     * Passed through to link. If true, applies inverted styles to the link.
      */
     inverted: {
       type: Boolean,
@@ -3136,7 +3235,7 @@ var link_component = normalizeComponent(
 
     /**
      * Describes the breadcrumb. Overridden by default slot
-     * */
+     */
     label: {
       type: String,
       default: ''
@@ -3172,8 +3271,8 @@ var link_component = normalizeComponent(
 ;
 var breadcrumb_item_component = normalizeComponent(
   breadcrumbs_breadcrumb_itemvue_type_script_lang_js_,
-  breadcrumb_itemvue_type_template_id_6f97ec8a_render,
-  breadcrumb_itemvue_type_template_id_6f97ec8a_staticRenderFns,
+  breadcrumb_itemvue_type_template_id_5a420c8e_render,
+  breadcrumb_itemvue_type_template_id_5a420c8e_staticRenderFns,
   false,
   null,
   null,
@@ -3209,6 +3308,12 @@ var breadcrumb_item_component = normalizeComponent(
 
 
 
+/**
+ * Breadcrumbs are links used to provide context for the currently-viewed page
+ * and where it is located within the overall site structure.
+ * @see https://dialpad.design/components/breadcrumbs.html
+ */
+
 /* harmony default export */ const breadcrumbsvue_type_script_lang_js_ = ({
   name: 'DtBreadcrumbs',
   components: {
@@ -3236,6 +3341,7 @@ var breadcrumb_item_component = normalizeComponent(
 
     /**
      * Passed through to link. If true, applies inverted styles to the link.
+     * @values true, false
      */
     inverted: {
       type: Boolean,
@@ -3276,8 +3382,8 @@ var breadcrumb_item_component = normalizeComponent(
 ;
 var breadcrumbs_component = normalizeComponent(
   breadcrumbs_breadcrumbsvue_type_script_lang_js_,
-  breadcrumbsvue_type_template_id_6b368508_render,
-  breadcrumbsvue_type_template_id_6b368508_staticRenderFns,
+  breadcrumbsvue_type_template_id_44efd414_render,
+  breadcrumbsvue_type_template_id_44efd414_staticRenderFns,
   false,
   null,
   null,
@@ -3292,11 +3398,11 @@ var breadcrumbs_component = normalizeComponent(
 
 ;// CONCATENATED MODULE: ./components/button/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/button_group/button_group.vue?vue&type=template&id=8962a2f0&
-var button_groupvue_type_template_id_8962a2f0_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{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/button_group/button_group.vue?vue&type=template&id=26eb52e6&
+var button_groupvue_type_template_id_26eb52e6_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:[
     'd-btn-group',
-    _vm.BUTTON_GROUP_ALIGNMENT[this.alignment] ],attrs:{"role":"group"}},[_vm._t("default")],2)}
-var button_groupvue_type_template_id_8962a2f0_staticRenderFns = []
+    _vm.BUTTON_GROUP_ALIGNMENT[_vm.alignment] ],attrs:{"role":"group"}},[_vm._t("default")],2)}
+var button_groupvue_type_template_id_26eb52e6_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./components/button_group/button_group_constants.js
@@ -3352,8 +3458,8 @@ const BUTTON_GROUP_ALIGNMENT = {
 ;
 var button_group_component = normalizeComponent(
   button_group_button_groupvue_type_script_lang_js_,
-  button_groupvue_type_template_id_8962a2f0_render,
-  button_groupvue_type_template_id_8962a2f0_staticRenderFns,
+  button_groupvue_type_template_id_26eb52e6_render,
+  button_groupvue_type_template_id_26eb52e6_staticRenderFns,
   false,
   null,
   null,
@@ -3365,8 +3471,8 @@ var button_group_component = normalizeComponent(
 ;// CONCATENATED MODULE: ./components/button_group/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/card/card.vue?vue&type=template&id=092db2a1&
-var cardvue_type_template_id_092db2a1_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{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/card/card.vue?vue&type=template&id=e2408fa4&
+var cardvue_type_template_id_e2408fa4_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:[
     'd-card',
     _vm.containerClass ],attrs:{"data-qa":"dt-card"}},[(_vm.$slots.header)?_c('div',{class:[
       'd-card__header',
@@ -3375,7 +3481,7 @@ var cardvue_type_template_id_092db2a1_render = function () {var _vm=this;var _h=
       _vm.contentClass ],style:({ 'max-height': _vm.maxHeight })},[_vm._t("content")],2),(_vm.$slots.footer)?_c('div',{class:[
       'd-card__footer',
       _vm.footerClass ]},[_vm._t("footer")],2):_vm._e()])}
-var cardvue_type_template_id_092db2a1_staticRenderFns = []
+var cardvue_type_template_id_e2408fa4_staticRenderFns = []
 
 
 ;// 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/card/card.vue?vue&type=script&lang=js&
@@ -3419,6 +3525,15 @@ var cardvue_type_template_id_092db2a1_staticRenderFns = []
 //
 //
 //
+//
+//
+//
+
+/**
+ * A card contains summary content and actions about a single subject.
+ * It can be used by itself or within a list, and is generally interactive.
+ * @see https://dialpad.design/components/card.html
+ */
 /* harmony default export */ const cardvue_type_script_lang_js_ = ({
   name: 'DtCard',
   props: {
@@ -3476,8 +3591,8 @@ var cardvue_type_template_id_092db2a1_staticRenderFns = []
 ;
 var card_component = normalizeComponent(
   card_cardvue_type_script_lang_js_,
-  cardvue_type_template_id_092db2a1_render,
-  cardvue_type_template_id_092db2a1_staticRenderFns,
+  cardvue_type_template_id_e2408fa4_render,
+  cardvue_type_template_id_e2408fa4_staticRenderFns,
   false,
   null,
   null,
@@ -3488,9 +3603,9 @@ var card_component = normalizeComponent(
 /* harmony default export */ const card = (card_component.exports);
 ;// CONCATENATED MODULE: ./components/card/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/combobox/combobox.vue?vue&type=template&id=f9b55a7e&
-var comboboxvue_type_template_id_f9b55a7e_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{on:{"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.stopPropagation();return _vm.onKeyValidation($event, 'onEscapeKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }if($event.ctrlKey||$event.shiftKey||$event.altKey||$event.metaKey){ return null; }return _vm.onKeyValidation($event, 'onEnterKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onUpKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onDownKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"home",undefined,$event.key,undefined)){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onHomeKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"end",undefined,$event.key,undefined)){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onEndKey')}]}},[_c('div',{attrs:{"data-qa":"dt-combobox-input-wrapper"}},[_vm._t("input",null,{"inputProps":_vm.inputProps})],2),(_vm.showList)?_c('div',{ref:"listWrapper",attrs:{"data-qa":"dt-combobox-list-wrapper"},on:{"mouseleave":_vm.clearHighlightIndex,"focusout":_vm.clearHighlightIndex,"!mousemove":function($event){return _vm.onMouseHighlight.apply(null, arguments)}}},[(_vm.loading && !_vm.listRenderedOutside)?_c('combobox-loading-list',_vm._b({},'combobox-loading-list',_vm.listProps,false)):(_vm.emptyList && _vm.emptyStateMessage && !_vm.listRenderedOutside)?_c('combobox-empty-list',_vm._b({attrs:{"message":_vm.emptyStateMessage}},'combobox-empty-list',_vm.listProps,false)):_vm._t("list",null,{"listProps":_vm.listProps,"opened":_vm.onOpen,"clearHighlightIndex":_vm.clearHighlightIndex})],2):_vm._e()])}
-var comboboxvue_type_template_id_f9b55a7e_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/combobox/combobox.vue?vue&type=template&id=397ad57a&
+var comboboxvue_type_template_id_397ad57a_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{on:{"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.stopPropagation();return _vm.onKeyValidation($event, 'onEscapeKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }if($event.ctrlKey||$event.shiftKey||$event.altKey||$event.metaKey){ return null; }return _vm.onKeyValidation($event, 'onEnterKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onUpKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onDownKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"home",undefined,$event.key,undefined)){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onHomeKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"end",undefined,$event.key,undefined)){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onEndKey')}]}},[_c('div',{attrs:{"data-qa":"dt-combobox-input-wrapper"}},[_vm._t("input",null,{"inputProps":_vm.inputProps})],2),(_vm.showList)?_c('div',{ref:"listWrapper",attrs:{"data-qa":"dt-combobox-list-wrapper"},on:{"mouseleave":_vm.clearHighlightIndex,"focusout":_vm.clearHighlightIndex,"!mousemove":function($event){return _vm.onMouseHighlight.apply(null, arguments)}}},[(_vm.loading && !_vm.listRenderedOutside)?_c('combobox-loading-list',_vm._b({},'combobox-loading-list',_vm.listProps,false)):(_vm.emptyList && _vm.emptyStateMessage && !_vm.listRenderedOutside)?_c('combobox-empty-list',_vm._b({attrs:{"message":_vm.emptyStateMessage}},'combobox-empty-list',_vm.listProps,false)):_vm._t("list",null,{"listProps":_vm.listProps,"opened":_vm.onOpen,"clearHighlightIndex":_vm.clearHighlightIndex})],2):_vm._e()])}
+var comboboxvue_type_template_id_397ad57a_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./common/mixins/dom.js
@@ -3626,6 +3741,8 @@ var comboboxvue_type_template_id_f9b55a7e_staticRenderFns = []
   }
 });
 ;// CONCATENATED MODULE: ./common/mixins/keyboard_list_navigation.js
+
+const ERROR_INVALID_LIST_ELEMENT = 'listElementKey is required or the referenced ' + 'element doesn\'t exist. Received listElement: ';
 /**
  * Usage: `mixins: [keyboardNavigationMixin(options)]`
  *
@@ -3634,9 +3751,21 @@ var comboboxvue_type_template_id_f9b55a7e_staticRenderFns = []
  *
  * To be effective, you must bind the onUpKey and onDownKey events, usually to
  * the root element of the component.
+ *
+ * @param listItemRole
+ * @param indexKey
+ * @param idKey
+ * @param listElementKey
+ * @param activeItemKey
+ * @param openMethod
+ * @param afterHighlightMethod
+ * @param beginningOfListMethod
+ * @param endOfListMethod
+ * @param scrollToOnHighlight
+ * @param focusOnKeyboardNavigation
+ * @displayName Keyboard Navigation Mixin
  */
 
-const ERROR_INVALID_LIST_ELEMENT = 'listElementKey is required or the referenced ' + 'element doesn\'t exist. Received listElement: ';
 /* harmony default export */ const keyboard_list_navigation = (function () {
   let {
     // Role of the list items in the component. This is used to identify the list items
@@ -3867,13 +3996,13 @@ var combobox_loading_listvue_type_template_id_07d9971d_render = function () {var
 var combobox_loading_listvue_type_template_id_07d9971d_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/list_item/list_item.vue?vue&type=template&id=3f4f4d25&
-var list_itemvue_type_template_id_3f4f4d25_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.elementType,_vm._g({tag:"component",class:['dt-list-item d-ls-none focus-visible', {
+;// 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/list_item/list_item.vue?vue&type=template&id=f39797e6&
+var list_itemvue_type_template_id_f39797e6_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.elementType,_vm._g({tag:"component",class:['dt-list-item d-ls-none focus-visible', {
     'dt-list-item--focusable': _vm.isFocusable,
     'dt-list-item--highlighted': _vm.isHighlighted,
     'dt-list-item--static': !_vm.isHoverable,
   }],attrs:{"id":_vm.id,"tabindex":_vm.isFocusable ? 0 : -1,"role":_vm.role,"aria-selected":_vm.isHighlighted}},_vm.listItemListeners),[(_vm.listItemType)?_c(_vm.listItemType,{tag:"component",scopedSlots:_vm._u([_vm._l((_vm.$slots),function(_,slotName){return {key:slotName,fn:function(){return [_vm._t(slotName)]},proxy:true}})],null,true)}):_vm._t("default")],2)}
-var list_itemvue_type_template_id_3f4f4d25_staticRenderFns = []
+var list_itemvue_type_template_id_f39797e6_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./components/list_item/list_item_constants.js
@@ -3890,9 +4019,9 @@ const LIST_ITEM_NAVIGATION_TYPES = {
   LIST_ITEM_TYPES,
   LIST_ITEM_NAVIGATION_TYPES
 });
-;// 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/list_item/default_list_item.vue?vue&type=template&id=27ccac89&
-var default_list_itemvue_type_template_id_27ccac89_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"dt-default-list-item d-fs-200 d-lh4 d-py4 d-px12 d-d-flex d-ai-center"},[(_vm.$slots.left)?_c('section',{staticClass:"dt-default-list-item--left d-d-inline-flex d-as-flex-start d-d-flex d-ai-center d-pr8",attrs:{"data-qa":"dt-default-list-item-left-wrapper"}},[_vm._t("left")],2):_vm._e(),_c('section',{staticClass:"d-fl-grow1"},[(_vm.$slots.default)?_c('div',[_vm._t("default")],2):_vm._e(),(_vm.$slots.subtitle)?_c('div',{class:['d-fs-100 d-fc-black-600', { 'd-mtn2': _vm.$slots.default }],attrs:{"data-qa":"dt-default-list-item-subtitle-wrapper"}},[_vm._t("subtitle")],2):_vm._e(),(_vm.$slots.bottom)?_c('div',{staticClass:"d-mt2",attrs:{"data-qa":"dt-default-list-item-bottom-wrapper"}},[_vm._t("bottom")],2):_vm._e()]),(_vm.$slots.right)?_c('section',{staticClass:"dt-default-list-item--right d-d-inline-flex d-as-flex-start d-d-flex d-ai-center d-pl8",attrs:{"data-qa":"dt-default-list-item-right-wrapper"}},[_vm._t("right")],2):_vm._e()])}
-var default_list_itemvue_type_template_id_27ccac89_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/list_item/default_list_item.vue?vue&type=template&id=4c89d4ed&
+var default_list_itemvue_type_template_id_4c89d4ed_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"dt-default-list-item d-fs14 d-lh4 d-py4 d-px12 d-d-flex d-ai-center"},[(_vm.$slots.left)?_c('section',{staticClass:"dt-default-list-item--left d-d-inline-flex d-as-flex-start d-d-flex d-ai-center d-pr8",attrs:{"data-qa":"dt-default-list-item-left-wrapper"}},[_vm._t("left")],2):_vm._e(),_c('section',{staticClass:"d-fl-grow1"},[(_vm.$slots.default)?_c('div',[_vm._t("default")],2):_vm._e(),(_vm.$slots.subtitle)?_c('div',{class:['d-fs12 d-fc-black-500', { 'd-mtn2': _vm.$slots.default }],attrs:{"data-qa":"dt-default-list-item-subtitle-wrapper"}},[_vm._t("subtitle")],2):_vm._e(),(_vm.$slots.bottom)?_c('div',{staticClass:"d-mt2",attrs:{"data-qa":"dt-default-list-item-bottom-wrapper"}},[_vm._t("bottom")],2):_vm._e()]),(_vm.$slots.right)?_c('section',{staticClass:"dt-default-list-item--right d-d-inline-flex d-as-flex-start d-d-flex d-ai-center d-pl8",attrs:{"data-qa":"dt-default-list-item-right-wrapper"}},[_vm._t("right")],2):_vm._e()])}
+var default_list_itemvue_type_template_id_4c89d4ed_staticRenderFns = []
 
 
 ;// 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/list_item/default_list_item.vue?vue&type=script&lang=js&
@@ -3959,8 +4088,8 @@ var default_list_itemvue_type_style_index_0_lang_less_ = __webpack_require__(986
 
 var default_list_item_component = normalizeComponent(
   list_item_default_list_itemvue_type_script_lang_js_,
-  default_list_itemvue_type_template_id_27ccac89_render,
-  default_list_itemvue_type_template_id_27ccac89_staticRenderFns,
+  default_list_itemvue_type_template_id_4c89d4ed_render,
+  default_list_itemvue_type_template_id_4c89d4ed_staticRenderFns,
   false,
   null,
   null,
@@ -4000,8 +4129,15 @@ var default_list_item_component = normalizeComponent(
 //
 //
 //
+//
+//
+
 
 
+/**
+ * A list item is an element that can be used to represent individual items in a list.
+ * @see https://dialpad.design/components/list_item.html
+ */
 
 /* harmony default export */ const list_itemvue_type_script_lang_js_ = ({
   name: 'ListItem',
@@ -4039,7 +4175,7 @@ var default_list_item_component = normalizeComponent(
     },
 
     /**
-     * The type of element to use for the wrapper.
+     * HTML element type (tag name) of the content wrapper element.
      */
     elementType: {
       type: String,
@@ -4048,6 +4184,7 @@ var default_list_item_component = normalizeComponent(
 
     /**
      * The type of child list item to use.
+     * @values default, custom
      */
     type: {
       type: String,
@@ -4060,6 +4197,7 @@ var default_list_item_component = normalizeComponent(
      * - "arrow-keys" for items that are navigated with UP/DOWN keys.
      * - "tab" for items that are navigated using the TAB key.
      * - "none" for static items that are not interactive.
+     * @values arrow-keys, tab, none
      */
     navigationType: {
       type: String,
@@ -4192,8 +4330,8 @@ var list_itemvue_type_style_index_0_lang_less_ = __webpack_require__(502);
 
 var list_item_component = normalizeComponent(
   list_item_list_itemvue_type_script_lang_js_,
-  list_itemvue_type_template_id_3f4f4d25_render,
-  list_itemvue_type_template_id_3f4f4d25_staticRenderFns,
+  list_itemvue_type_template_id_f39797e6_render,
+  list_itemvue_type_template_id_f39797e6_staticRenderFns,
   false,
   null,
   null,
@@ -4204,20 +4342,20 @@ var list_item_component = normalizeComponent(
 /* harmony default export */ const list_item = (list_item_component.exports);
 ;// CONCATENATED MODULE: ./components/list_item/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/skeleton/skeleton.vue?vue&type=template&id=cf13874a&
-var skeletonvue_type_template_id_cf13874a_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{"aria-busy":"true","role":"status","aria-label":_vm.ariaLabel}},[(_vm.listItemOption)?_c('dt-skeleton-list-item',_vm._b({attrs:{"animation-duration":_vm.animationDuration,"animate":_vm.animate,"offset":_vm.offset}},'dt-skeleton-list-item',_vm.listItemOption === true ? {} : _vm.listItemOption,false)):(_vm.shapeOption)?_c('dt-skeleton-shape',_vm._b({attrs:{"animation-duration":_vm.animationDuration,"animate":_vm.animate,"offset":_vm.offset}},'dt-skeleton-shape',_vm.shapeOption === true ? {} : _vm.shapeOption,false)):(_vm.paragraphOption)?_c('dt-skeleton-paragraph',_vm._b({attrs:{"animation-duration":_vm.animationDuration,"animate":_vm.animate,"offset":_vm.offset}},'dt-skeleton-paragraph',_vm.paragraphOption === true ? {} : _vm.paragraphOption,false)):_c('dt-skeleton-text',_vm._b({attrs:{"animation-duration":_vm.animationDuration,"animate":_vm.animate,"offset":_vm.offset}},'dt-skeleton-text',_vm.textOption || {},false))],1)}
-var skeletonvue_type_template_id_cf13874a_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/skeleton/skeleton.vue?vue&type=template&id=6cda56f1&
+var skeletonvue_type_template_id_6cda56f1_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{"aria-busy":"true","role":"status","aria-label":_vm.ariaLabel}},[(_vm.listItemOption)?_c('dt-skeleton-list-item',_vm._b({attrs:{"animation-duration":_vm.animationDuration,"animate":_vm.animate,"offset":_vm.offset}},'dt-skeleton-list-item',_vm.listItemOption === true ? {} : _vm.listItemOption,false)):(_vm.shapeOption)?_c('dt-skeleton-shape',_vm._b({attrs:{"animation-duration":_vm.animationDuration,"animate":_vm.animate,"offset":_vm.offset}},'dt-skeleton-shape',_vm.shapeOption === true ? {} : _vm.shapeOption,false)):(_vm.paragraphOption)?_c('dt-skeleton-paragraph',_vm._b({attrs:{"animation-duration":_vm.animationDuration,"animate":_vm.animate,"offset":_vm.offset}},'dt-skeleton-paragraph',_vm.paragraphOption === true ? {} : _vm.paragraphOption,false)):_c('dt-skeleton-text',_vm._b({attrs:{"animation-duration":_vm.animationDuration,"animate":_vm.animate,"offset":_vm.offset}},'dt-skeleton-text',_vm.textOption || {},false))],1)}
+var skeletonvue_type_template_id_6cda56f1_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/skeleton/skeleton-shape.vue?vue&type=template&id=9cb05e20&
-var skeleton_shapevue_type_template_id_9cb05e20_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"skeleton",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/skeleton/skeleton-shape.vue?vue&type=template&id=afabf0b6&
+var skeleton_shapevue_type_template_id_afabf0b6_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"skeleton",class:[
     'skeleton-placeholder',
     _vm.SKELETON_SHAPES[_vm.shape],
     {
       'skeleton-placeholder--animate': _vm.animate,
     },
     _vm.contentClass ],style:(_vm.shapeStyles),attrs:{"data-qa":"skeleton-shape"}})}
-var skeleton_shapevue_type_template_id_9cb05e20_staticRenderFns = []
+var skeleton_shapevue_type_template_id_afabf0b6_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./components/skeleton/skeleton_constants.js
@@ -4251,6 +4389,10 @@ const SKELETON_HEADING_HEIGHTS = {
 });
 ;// CONCATENATED MODULE: ./common/mixins/skeleton.js
 
+/**
+ * @displayName Skeleton Animation Mixin
+ */
+
 /* harmony default export */ const skeleton = ({
   computed: {
     skeletonOffset() {
@@ -4306,27 +4448,58 @@ const SKELETON_HEADING_HEIGHTS = {
   name: 'DtSkeletonShape',
   mixins: [skeleton],
   props: {
+    /**
+     * Defines the shape of the skeleton, accepts circle or square.
+     * @values circle, square
+     */
     shape: {
       type: String,
       default: 'circle',
       validator: shape => Object.keys(SKELETON_SHAPES).includes(shape)
     },
+
+    /**
+     * Size of the shape
+     * @values xs, sm, md, lg, xl
+     */
     size: {
       type: String,
       default: 'md'
     },
+
+    /**
+     * Duration time of the animation (ms), set -1 for an infinite animation.
+     */
     animationDuration: {
       type: Number,
       default: -1
     },
+
+    /**
+     * This property has higher priority than "option.animate"
+     * @values true, false
+     */
     animate: {
       type: Boolean,
       default: true
     },
+
+    /**
+     * RippleDuration controls how long the delay is for the animation of a
+     * placeholder 1000 pixels from the top of the page. Each placeholder
+     * from the top down will have a delay duration from 0 to this offset.
+     * The delay of each placeholder animation is based on how far down the page
+     * the placeholder is rendered. This is a linear relationship. The unit
+     * is milliseconds.
+     */
     offset: {
       type: Number,
       default: 1
     },
+
+    /**
+     * Additional class name for the content.
+     */
     contentClass: {
       type: [String, Object, Array],
       default: ''
@@ -4364,8 +4537,8 @@ const SKELETON_HEADING_HEIGHTS = {
 ;
 var skeleton_shape_component = normalizeComponent(
   skeleton_skeleton_shapevue_type_script_lang_js_,
-  skeleton_shapevue_type_template_id_9cb05e20_render,
-  skeleton_shapevue_type_template_id_9cb05e20_staticRenderFns,
+  skeleton_shapevue_type_template_id_afabf0b6_render,
+  skeleton_shapevue_type_template_id_afabf0b6_staticRenderFns,
   false,
   null,
   null,
@@ -4374,28 +4547,28 @@ var skeleton_shape_component = normalizeComponent(
 )
 
 /* harmony default export */ const skeleton_shape = (skeleton_shape_component.exports);
-;// 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/skeleton/skeleton-list-item.vue?vue&type=template&id=550b8bfc&
-var skeleton_list_itemvue_type_template_id_550b8bfc_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{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/skeleton/skeleton-list-item.vue?vue&type=template&id=550aef30&
+var skeleton_list_itemvue_type_template_id_550aef30_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:[
     'd-d-flex',
     {
       'd-ai-center': _vm.paragraphs.rows === 1,
     },
     _vm.contentClass ],attrs:{"data-qa":"skeleton-list-item"}},[_c('dt-skeleton-shape',{staticClass:"d-mr8",attrs:{"size":_vm.shapeSize,"shape":_vm.shape,"animation-duration":_vm.animationDuration,"animate":_vm.animate,"offset":_vm.offset,"content-class":_vm.shapeClass}}),_c('div',{staticClass:"d-d-flex d-fd-column d-w100p"},[_c('dt-skeleton-paragraph',_vm._b({attrs:{"animation-duration":_vm.animationDuration,"animate":_vm.animate,"offset":_vm.offset}},'dt-skeleton-paragraph',_vm.paragraphs,false))],1)],1)}
-var skeleton_list_itemvue_type_template_id_550b8bfc_staticRenderFns = []
+var skeleton_list_itemvue_type_template_id_550aef30_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/skeleton/skeleton-paragraph.vue?vue&type=template&id=5c1bdf76&
-var skeleton_paragraphvue_type_template_id_5c1bdf76_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{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/skeleton/skeleton-paragraph.vue?vue&type=template&id=74552fc9&
+var skeleton_paragraphvue_type_template_id_74552fc9_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:[
     'd-w100p',
     _vm.contentClass ],attrs:{"contentClass":"","data-qa":"skeleton-paragraph"}},_vm._l((_vm.integerRows),function(row){return _c('dt-skeleton-text',{key:row,class:[
       {
         'd-mb12': row !== _vm.integerRows,
       } ],attrs:{"data-qa":"skeleton-paragraph-row","content-class":_vm.rowClass,"animate":_vm.animate,"offset":_vm.offset,"animation-duration":_vm.animationDuration,"width":_vm.getSizeParagraphRow(row)}})}),1)}
-var skeleton_paragraphvue_type_template_id_5c1bdf76_staticRenderFns = []
+var skeleton_paragraphvue_type_template_id_74552fc9_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/skeleton/skeleton-text.vue?vue&type=template&id=b36ce9f2&
-var skeleton_textvue_type_template_id_b36ce9f2_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.type === 'body')?_c('div',{ref:"skeleton",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/skeleton/skeleton-text.vue?vue&type=template&id=0603ca4d&
+var skeleton_textvue_type_template_id_0603ca4d_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.type === 'body')?_c('div',{ref:"skeleton",class:[
     'd-h8',
     'd-bar2',
     'skeleton-placeholder',
@@ -4412,7 +4585,7 @@ var skeleton_textvue_type_template_id_b36ce9f2_render = function () {var _vm=thi
     },
     _vm.contentClass ],style:(Object.assign({}, {width: _vm.width},
     _vm.skeletonStyle)),attrs:{"data-qa":"skeleton-text-heading"}}):_vm._e()}
-var skeleton_textvue_type_template_id_b36ce9f2_staticRenderFns = []
+var skeleton_textvue_type_template_id_0603ca4d_staticRenderFns = []
 
 
 ;// 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/skeleton/skeleton-text.vue?vue&type=script&lang=js&
@@ -4461,32 +4634,67 @@ var skeleton_textvue_type_template_id_b36ce9f2_staticRenderFns = []
   name: 'DtSkeletonText',
   mixins: [skeleton],
   props: {
+    /**
+     * Skeleton type
+     * @values body, heading
+     */
     type: {
       type: String,
       default: 'body',
       validator: type => SKELETON_TEXT_TYPES.includes(type)
     },
+
+    /**
+     * Heading height
+     * @values sm, md, lg
+     */
     headingHeight: {
       type: String,
       default: 'md',
       validator: headingHeight => Object.keys(SKELETON_HEADING_HEIGHTS).includes(headingHeight)
     },
+
+    /**
+     * Width of the skeleton
+     */
     width: {
       type: String,
       default: '100%'
     },
+
+    /**
+     * Duration time of the animation (ms), set -1 for an infinite animation.
+     */
     animationDuration: {
       type: Number,
       default: -1
     },
+
+    /**
+     * This property has higher priority than "option.animate"
+     * @values true, false
+     */
     animate: {
       type: Boolean,
       default: false
     },
+
+    /**
+     * RippleDuration controls how long the delay is for the animation of a
+     * placeholder 1000 pixels from the top of the page. Each placeholder
+     * from the top down will have a delay duration from 0 to this offset.
+     * The delay of each placeholder animation is based on how far down the page
+     * the placeholder is rendered. This is a linear relationship. The unit
+     * is milliseconds.
+     */
     offset: {
       type: Number,
       default: 1
     },
+
+    /**
+     * Additional class name for the content.
+     */
     contentClass: {
       type: String,
       default: ''
@@ -4512,8 +4720,8 @@ var skeleton_textvue_type_template_id_b36ce9f2_staticRenderFns = []
 ;
 var skeleton_text_component = normalizeComponent(
   skeleton_skeleton_textvue_type_script_lang_js_,
-  skeleton_textvue_type_template_id_b36ce9f2_render,
-  skeleton_textvue_type_template_id_b36ce9f2_staticRenderFns,
+  skeleton_textvue_type_template_id_0603ca4d_render,
+  skeleton_textvue_type_template_id_0603ca4d_staticRenderFns,
   false,
   null,
   null,
@@ -4560,45 +4768,91 @@ const validator = number => number !== '' && !Number.isNaN(Number(number));
     DtSkeletonText: skeleton_text
   },
   props: {
+    /**
+     * Quantity of rows to display
+     */
     rows: {
       type: [Number, String],
       default: 3,
       validator
     },
+
+    /**
+     * This property has higher priority than "option.animate"
+     * @values true, false
+     */
     animate: {
       type: Boolean,
       default: true
     },
+
+    /**
+     * Controls the min width of paragraphs
+     */
     minWidth: {
       type: [Number, String],
       default: 30,
       validator
     },
+
+    /**
+     * Controls the max width of paragraphs
+     */
     maxWidth: {
       type: [Number, String],
       default: 100,
       validator
     },
+
+    /**
+     * Controls the width of paragraphs
+     */
     width: {
       type: [String, Array],
       default: null
     },
+
+    /**
+     * If true, row widths will be random
+     * @values true, false
+     */
     randomWidth: {
       type: Boolean,
       default: false
     },
+
+    /**
+     * RippleDuration controls how long the delay is for the animation of a
+     * placeholder 1000 pixels from the top of the page. Each placeholder
+     * from the top down will have a delay duration from 0 to this offset.
+     * The delay of each placeholder animation is based on how far down the page
+     * the placeholder is rendered. This is a linear relationship. The unit
+     * is milliseconds.
+     */
     offset: {
       type: Number,
       default: 1
     },
+
+    /**
+     * Duration time of the animation (ms), set -1 for an infinite animation.
+     */
     animationDuration: {
       type: Number,
       default: -1
     },
+
+    /**
+     * Additional class name for the content.
+     */
     contentClass: {
       type: String,
       default: ''
     },
+
+    /**
+     * Additional class name for the row.
+     */
     rowClass: {
       type: String,
       default: ''
@@ -4652,8 +4906,8 @@ const validator = number => number !== '' && !Number.isNaN(Number(number));
 ;
 var skeleton_paragraph_component = normalizeComponent(
   skeleton_skeleton_paragraphvue_type_script_lang_js_,
-  skeleton_paragraphvue_type_template_id_5c1bdf76_render,
-  skeleton_paragraphvue_type_template_id_5c1bdf76_staticRenderFns,
+  skeleton_paragraphvue_type_template_id_74552fc9_render,
+  skeleton_paragraphvue_type_template_id_74552fc9_staticRenderFns,
   false,
   null,
   null,
@@ -4704,15 +4958,29 @@ var skeleton_paragraph_component = normalizeComponent(
     DtSkeletonParagraph: skeleton_paragraph
   },
   props: {
+    /**
+     * Defines the shape of the skeleton, accepts circle or square.
+     * @values circle, square
+     */
     shape: {
       type: String,
       default: 'circle',
       validator: shape => Object.keys(SKELETON_SHAPES).includes(shape)
     },
+
+    /**
+     * Size of the shape
+     * @values xs, sm, md, lg, xl
+     */
     shapeSize: {
       type: String,
       default: 'md'
     },
+
+    /**
+     * Object containing quantity of paragraphs to display
+     * and a randomWidth boolean.
+     */
     paragraphs: {
       type: Object,
       default: () => ({
@@ -4720,22 +4988,48 @@ var skeleton_paragraph_component = normalizeComponent(
         randomWidth: true
       })
     },
+
+    /**
+     * Duration time of the animation (ms), set -1 for an infinite animation.
+     */
     animationDuration: {
       type: Number,
       default: -1
     },
+
+    /**
+     * This property has higher priority than "option.animate"
+     * @values true, false
+     */
     animate: {
       type: Boolean,
       default: true
     },
+
+    /**
+     * RippleDuration controls how long the delay is for the animation of a
+     * placeholder 1000 pixels from the top of the page. Each placeholder
+     * from the top down will have a delay duration from 0 to this offset.
+     * The delay of each placeholder animation is based on how far down the page
+     * the placeholder is rendered. This is a linear relationship. The unit
+     * is milliseconds.
+     */
     offset: {
       type: Number,
       default: 1
     },
+
+    /**
+     * Additional class name for the shape.
+     */
     shapeClass: {
       type: String,
       default: ''
     },
+
+    /**
+     * Additional class name for the content.
+     */
     contentClass: {
       type: String,
       default: ''
@@ -4754,8 +5048,8 @@ var skeleton_paragraph_component = normalizeComponent(
 ;
 var skeleton_list_item_component = normalizeComponent(
   skeleton_skeleton_list_itemvue_type_script_lang_js_,
-  skeleton_list_itemvue_type_template_id_550b8bfc_render,
-  skeleton_list_itemvue_type_template_id_550b8bfc_staticRenderFns,
+  skeleton_list_itemvue_type_template_id_550aef30_render,
+  skeleton_list_itemvue_type_template_id_550aef30_staticRenderFns,
   false,
   null,
   null,
@@ -4806,6 +5100,13 @@ var skeleton_list_item_component = normalizeComponent(
 
 
 
+/**
+ * Skeleton loader is a non-interactive placeholder that displays a preview of the UI to visually communicate
+ * that content is in the process of loading. Skeleton is used to provide a low fidelity
+ * representation of the user interface (UI) before content appears on the page.
+ * @see https://dialpad.design/components/skeleton.html
+ */
+
 /* harmony default export */ const skeletonvue_type_script_lang_js_ = ({
   name: 'DtSkeleton',
   components: {
@@ -4815,34 +5116,75 @@ var skeleton_list_item_component = normalizeComponent(
     DtSkeletonParagraph: skeleton_paragraph
   },
   props: {
+    /**
+     * Set this prop to have the skeleton render as multiple lines of text.
+     * Set only one option prop at a time.
+     */
     paragraphOption: {
       type: [Object, Boolean],
       default: null
     },
+
+    /**
+     * Set this prop to have the skeleton render as a list item with an avatar and wrapping text.
+     * Set only one option prop at a time.
+     */
     listItemOption: {
       type: [Object, Boolean],
       default: null
     },
+
+    /**
+     * Set this prop to have the skeleton render as a single line of text.
+     * Set only one option prop at a time.
+     */
     textOption: {
       type: Object,
       default: null
     },
+
+    /**
+     * Set this prop to have the skeleton render as a specific shape.
+     * Set only one option prop at a time.
+     */
     shapeOption: {
       type: [Object, Boolean],
       default: null
     },
+
+    /**
+     * Duration time of the animation (ms), set -1 for an infinite animation.
+     */
     animationDuration: {
       type: Number,
       default: -1
     },
+
+    /**
+     * Descriptive label for the content.
+     */
     ariaLabel: {
       type: String,
       default: ''
     },
+
+    /**
+     * This property has higher priority than "option.animate"
+     * @values true, false
+     */
     animate: {
       type: Boolean,
       default: true
     },
+
+    /**
+     * RippleDuration controls how long the delay is for the animation of a
+     * placeholder 1000 pixels from the top of the page. Each placeholder
+     * from the top down will have a delay duration from 0 to this offset.
+     * The delay of each placeholder animation is based on how far down the page
+     * the placeholder is rendered. This is a linear relationship. The unit
+     * is milliseconds.
+     */
     offset: {
       type: Number,
       default: 1
@@ -4900,8 +5242,8 @@ var skeletonvue_type_style_index_0_lang_less_ = __webpack_require__(315);
 
 var skeleton_component = normalizeComponent(
   skeleton_skeletonvue_type_script_lang_js_,
-  skeletonvue_type_template_id_cf13874a_render,
-  skeletonvue_type_template_id_cf13874a_staticRenderFns,
+  skeletonvue_type_template_id_6cda56f1_render,
+  skeletonvue_type_template_id_6cda56f1_staticRenderFns,
   false,
   null,
   null,
@@ -4968,9 +5310,9 @@ var combobox_loading_list_component = normalizeComponent(
 )
 
 /* harmony default export */ const combobox_loading_list = (combobox_loading_list_component.exports);
-;// 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/combobox/combobox_empty-list.vue?vue&type=template&id=85c21112&
-var combobox_empty_listvue_type_template_id_85c21112_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('ol',{staticClass:"d-p0",attrs:{"data-qa":"dt-combobox-empty-list"}},[_c('dt-list-item',{staticClass:"d-d-flex d-jc-center",attrs:{"role":"option","navigation-type":"arrow-keys"}},[_c('span',[_vm._v(_vm._s(_vm.message))])])],1)}
-var combobox_empty_listvue_type_template_id_85c21112_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/combobox/combobox_empty-list.vue?vue&type=template&id=d0c59b2c&
+var combobox_empty_listvue_type_template_id_d0c59b2c_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('ol',{staticClass:"d-p0",attrs:{"data-qa":"dt-combobox-empty-list"}},[_c('dt-list-item',{staticClass:"d-d-flex d-jc-center",attrs:{"role":"option","navigation-type":"arrow-keys"}},[_c('span',[_vm._v(_vm._s(_vm.message))])])],1)}
+var combobox_empty_listvue_type_template_id_d0c59b2c_staticRenderFns = []
 
 
 ;// 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/combobox/combobox_empty-list.vue?vue&type=script&lang=js&
@@ -4996,6 +5338,9 @@ var combobox_empty_listvue_type_template_id_85c21112_staticRenderFns = []
     DtListItem: list_item
   },
   props: {
+    /**
+     * Message to display when list is empty
+     */
     message: {
       type: String,
       required: true
@@ -5014,8 +5359,8 @@ var combobox_empty_listvue_type_template_id_85c21112_staticRenderFns = []
 ;
 var combobox_empty_list_component = normalizeComponent(
   combobox_combobox_empty_listvue_type_script_lang_js_,
-  combobox_empty_listvue_type_template_id_85c21112_render,
-  combobox_empty_listvue_type_template_id_85c21112_staticRenderFns,
+  combobox_empty_listvue_type_template_id_d0c59b2c_render,
+  combobox_empty_listvue_type_template_id_d0c59b2c_staticRenderFns,
   false,
   null,
   null,
@@ -5074,6 +5419,12 @@ var combobox_empty_list_component = normalizeComponent(
 
 
 
+/**
+ * A combobox is a semantic component that displays an input element combined with a listbox,
+ * which enables the user to select items from the list.
+ * @see https://dialpad.design/components/combobox.html
+ */
+
 /* harmony default export */ const comboboxvue_type_script_lang_js_ = ({
   name: 'DtCombobox',
   components: {
@@ -5129,6 +5480,7 @@ var combobox_empty_list_component = normalizeComponent(
 
     /**
      * Determines when to show the list element and also controls the aria-expanded attribute.
+     * @values true, false
      */
     showList: {
       type: Boolean,
@@ -5137,6 +5489,7 @@ var combobox_empty_list_component = normalizeComponent(
 
     /**
      * If the list is rendered outside the component, like when using popover as the list wrapper.
+     * @values true, false
      */
     listRenderedOutside: {
       type: Boolean,
@@ -5145,6 +5498,7 @@ var combobox_empty_list_component = normalizeComponent(
 
     /**
      * Determines when to show the skeletons and also controls aria-busy attribute.
+     * @values true, false
      */
     loading: {
       type: Boolean,
@@ -5153,6 +5507,7 @@ var combobox_empty_list_component = normalizeComponent(
 
     /**
      * Sets the list to an empty state, and displays the message from prop `emptyStateMessage`.
+     * @values true, false
      */
     emptyList: {
       type: Boolean,
@@ -5371,8 +5726,8 @@ var combobox_empty_list_component = normalizeComponent(
 ;
 var combobox_component = normalizeComponent(
   combobox_comboboxvue_type_script_lang_js_,
-  comboboxvue_type_template_id_f9b55a7e_render,
-  comboboxvue_type_template_id_f9b55a7e_staticRenderFns,
+  comboboxvue_type_template_id_397ad57a_render,
+  comboboxvue_type_template_id_397ad57a_staticRenderFns,
   false,
   null,
   null,
@@ -5383,8 +5738,8 @@ var combobox_component = normalizeComponent(
 /* harmony default export */ const combobox = (combobox_component.exports);
 ;// CONCATENATED MODULE: ./components/combobox/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/collapsible/collapsible.vue?vue&type=template&id=81ed658c&
-var collapsiblevue_type_template_id_81ed658c_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.elementType,_vm._g({ref:"collapsible",tag:"component"},_vm.$listeners),[_c('div',{ref:"anchor",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/collapsible/collapsible.vue?vue&type=template&id=22be811b&
+var collapsiblevue_type_template_id_22be811b_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.elementType,_vm._g({ref:"collapsible",tag:"component"},_vm.$listeners),[_c('div',{ref:"anchor",class:[
       'd-dt-collapsibe__anchor',
       _vm.anchorClass ],attrs:{"id":!_vm.ariaLabelledBy && _vm.labelledBy},on:{"!click":function($event){return _vm.defaultToggleOpen.apply(null, arguments)},"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.defaultToggleOpen.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"space",32,$event.key,[" ","Spacebar"])){ return null; }return _vm.defaultToggleOpen.apply(null, arguments)}]}},[_vm._t("anchor",function(){return [_c('dt-button',{style:({
           'width': _vm.maxWidth,
@@ -5398,12 +5753,12 @@ var collapsiblevue_type_template_id_81ed658c_render = function () {var _vm=this;
       'max-height': _vm.maxHeight,
       'max-width': _vm.maxWidth,
     }),attrs:{"id":_vm.id,"aria-hidden":("" + (!_vm.isOpen)),"aria-labelledby":_vm.labelledBy,"aria-label":_vm.ariaLabel,"show":_vm.isOpen,"element-type":_vm.contentElementType,"tabindex":"-1","appear":""},on:{"after-leave":_vm.onLeaveTransitionComplete,"after-enter":_vm.onEnterTransitionComplete}},_vm.$listeners),[_vm._t("content")],2)],1)}
-var collapsiblevue_type_template_id_81ed658c_staticRenderFns = []
+var collapsiblevue_type_template_id_22be811b_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/collapsible/collapsible_lazy_show.vue?vue&type=template&id=22ec4864&
-var collapsible_lazy_showvue_type_template_id_22ec4864_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('transition',_vm._g({attrs:{"appear":_vm.appear,"enter-active-class":"enter-active","leave-active-class":"leave-active"},on:{"before-enter":_vm.beforeEnter,"enter":_vm.enter,"after-enter":_vm.afterEnter,"before-leave":_vm.beforeLeave,"leave":_vm.leave,"after-leave":_vm.afterLeave}},_vm.$listeners),[_c(_vm.elementType,_vm._g({directives:[{name:"show",rawName:"v-show",value:(_vm.show),expression:"show"}],tag:"component"},_vm.$listeners),[(_vm.initialized)?_vm._t("default"):_vm._e()],2)],1)}
-var collapsible_lazy_showvue_type_template_id_22ec4864_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/collapsible/collapsible_lazy_show.vue?vue&type=template&id=2bfe7a0c&
+var collapsible_lazy_showvue_type_template_id_2bfe7a0c_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('transition',_vm._g({attrs:{"appear":_vm.appear,"enter-active-class":"enter-active","leave-active-class":"leave-active"},on:{"before-enter":_vm.beforeEnter,"enter":_vm.enter,"after-enter":_vm.afterEnter,"before-leave":_vm.beforeLeave,"leave":_vm.leave,"after-leave":_vm.afterLeave}},_vm.$listeners),[_c(_vm.elementType,_vm._g({directives:[{name:"show",rawName:"v-show",value:(_vm.show),expression:"show"}],tag:"component"},_vm.$listeners),[(_vm.initialized)?_vm._t("default"):_vm._e()],2)],1)}
+var collapsible_lazy_showvue_type_template_id_2bfe7a0c_staticRenderFns = []
 
 
 ;// 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/collapsible/collapsible_lazy_show.vue?vue&type=script&lang=js&
@@ -5431,6 +5786,7 @@ var collapsible_lazy_showvue_type_template_id_22ec4864_staticRenderFns = []
 //
 //
 //
+//
 /* harmony default export */ const collapsible_lazy_showvue_type_script_lang_js_ = ({
   name: 'DtCollapsibleLazyShow',
 
@@ -5441,11 +5797,22 @@ var collapsible_lazy_showvue_type_template_id_22ec4864_staticRenderFns = []
     /**
      * Whether the child slot is shown.
      */
-    show: Boolean,
+    show: {
+      type: Boolean,
+      default: null
+    },
+
+    /**
+     * Enable/Disable transition animation
+     */
     appear: {
       type: Boolean,
       default: false
     },
+
+    /**
+     * HTML element type (tag name) of the content wrapper element.
+     */
     elementType: {
       type: String,
       default: 'div'
@@ -5550,8 +5917,8 @@ var collapsible_lazy_showvue_type_style_index_0_lang_css_ = __webpack_require__(
 
 var collapsible_lazy_show_component = normalizeComponent(
   collapsible_collapsible_lazy_showvue_type_script_lang_js_,
-  collapsible_lazy_showvue_type_template_id_22ec4864_render,
-  collapsible_lazy_showvue_type_template_id_22ec4864_staticRenderFns,
+  collapsible_lazy_showvue_type_template_id_2bfe7a0c_render,
+  collapsible_lazy_showvue_type_template_id_2bfe7a0c_staticRenderFns,
   false,
   null,
   null,
@@ -5560,9 +5927,9 @@ var collapsible_lazy_show_component = normalizeComponent(
 )
 
 /* harmony default export */ const collapsible_lazy_show = (collapsible_lazy_show_component.exports);
-;// 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/lazy_show/lazy_show.vue?vue&type=template&id=9ffa4e8c&
-var lazy_showvue_type_template_id_9ffa4e8c_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('transition',_vm._g({attrs:{"name":_vm.transition,"appear":_vm.appear}},_vm.$listeners),[_c('div',_vm._g({directives:[{name:"show",rawName:"v-show",value:(_vm.show),expression:"show"}]},_vm.$listeners),[(_vm.initialized)?_vm._t("default"):_vm._e()],2)])}
-var lazy_showvue_type_template_id_9ffa4e8c_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/lazy_show/lazy_show.vue?vue&type=template&id=68041c9d&
+var lazy_showvue_type_template_id_68041c9d_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('transition',_vm._g({attrs:{"name":_vm.transition,"appear":_vm.appear}},_vm.$listeners),[_c('div',_vm._g({directives:[{name:"show",rawName:"v-show",value:(_vm.show),expression:"show"}]},_vm.$listeners),[(_vm.initialized)?_vm._t("default"):_vm._e()],2)])}
+var lazy_showvue_type_template_id_68041c9d_staticRenderFns = []
 
 
 ;// 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/lazy_show/lazy_show.vue?vue&type=script&lang=js&
@@ -5582,6 +5949,12 @@ var lazy_showvue_type_template_id_9ffa4e8c_staticRenderFns = []
 //
 //
 //
+//
+
+/**
+ * Lazy Show is a utility component that prevents its children from being rendered until the first time it is shown.
+ * @see https://dialpad.design/components/lazy_show.html
+ */
 /* harmony default export */ const lazy_showvue_type_script_lang_js_ = ({
   name: 'DtLazyShow',
 
@@ -5591,8 +5964,12 @@ var lazy_showvue_type_template_id_9ffa4e8c_staticRenderFns = []
   props: {
     /**
      * Whether the child slot is shown.
+     * @values true, false
      */
-    show: Boolean,
+    show: {
+      type: Boolean,
+      default: false
+    },
 
     /**
      * A valid Vue enter/leave CSS transition name.
@@ -5601,6 +5978,11 @@ var lazy_showvue_type_template_id_9ffa4e8c_staticRenderFns = []
       type: String,
       default: null
     },
+
+    /**
+     * Enable/Disable transition animation
+     * @values true, false
+     */
     appear: {
       type: Boolean,
       default: false
@@ -5638,8 +6020,8 @@ var lazy_showvue_type_template_id_9ffa4e8c_staticRenderFns = []
 ;
 var lazy_show_component = normalizeComponent(
   lazy_show_lazy_showvue_type_script_lang_js_,
-  lazy_showvue_type_template_id_9ffa4e8c_render,
-  lazy_showvue_type_template_id_9ffa4e8c_staticRenderFns,
+  lazy_showvue_type_template_id_68041c9d_render,
+  lazy_showvue_type_template_id_68041c9d_staticRenderFns,
   false,
   null,
   null,
@@ -5788,6 +6170,11 @@ var IconArrowAccordionClosed_component = normalizeComponent(
 
 
 
+/**
+ * A collapsible is a component consisting of an interactive anchor that toggled the expandable/collapsible element.
+ * @see https://dialpad.design/components/collapsible.html
+ */
+
 /* harmony default export */ const collapsiblevue_type_script_lang_js_ = ({
   name: 'DtCollapsible',
   components: {
@@ -5810,8 +6197,9 @@ var IconArrowAccordionClosed_component = normalizeComponent(
     /**
      * Controls whether the collapsible is shown. Leaving this null will have the collapsible start
      * expanded and trigger on click by default. If you set this value, the default trigger
-     * behavior will be disabled and you can control it as you need.
+     * behavior will be disabled, and you can control it as you need.
      * Supports .sync modifier
+     * @values null, true, false
      */
     open: {
       type: Boolean,
@@ -5831,7 +6219,7 @@ var IconArrowAccordionClosed_component = normalizeComponent(
     },
 
     /**
-     * Element type (tag name) of the root element of the component.
+     * HTML element type (tag name) of the root element of the component.
      */
     elementType: {
       type: String,
@@ -5839,7 +6227,7 @@ var IconArrowAccordionClosed_component = normalizeComponent(
     },
 
     /**
-     * Element type (tag name) of the content wrapper element.
+     * HTML element type (tag name) of the content wrapper element.
      */
     contentElementType: {
       type: String,
@@ -5897,7 +6285,19 @@ var IconArrowAccordionClosed_component = normalizeComponent(
       default: null
     }
   },
-  emits: ['update:open', 'opened'],
+  emits: [
+  /**
+   * Event fired to sync the open prop with the parent component
+   * @event update:open
+   */
+  'update:open',
+  /**
+   * Event fired when the content is shown or hidden
+   *
+   * @event opened
+   * @type {Boolean}
+   */
+  'opened'],
 
   data() {
     return {
@@ -5971,8 +6371,8 @@ var IconArrowAccordionClosed_component = normalizeComponent(
 ;
 var collapsible_component = normalizeComponent(
   collapsible_collapsiblevue_type_script_lang_js_,
-  collapsiblevue_type_template_id_81ed658c_render,
-  collapsiblevue_type_template_id_81ed658c_staticRenderFns,
+  collapsiblevue_type_template_id_22be811b_render,
+  collapsiblevue_type_template_id_22be811b_staticRenderFns,
   false,
   null,
   null,
@@ -5983,17 +6383,17 @@ var collapsible_component = normalizeComponent(
 /* harmony default export */ const collapsible = (collapsible_component.exports);
 ;// CONCATENATED MODULE: ./components/collapsible/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/dropdown/dropdown.vue?vue&type=template&id=02543726&
-var dropdownvue_type_template_id_02543726_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-popover',_vm._g({ref:"popover",attrs:{"content-width":_vm.contentWidth,"open":_vm.open,"placement":_vm.placement,"initial-focus-element":_vm.openedWithKeyboard ? 'first' : 'dialog',"fallback-placements":_vm.fallbackPlacements,"padding":"none","role":"menu","modal":_vm.modal,"max-height":_vm.maxHeight,"max-width":_vm.maxWidth,"open-with-arrow-keys":true,"open-on-context":_vm.openOnContext},on:{"opened":_vm.updateInitialHighlightIndex,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.onEnterKey.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"space",32,$event.key,[" ","Spacebar"])){ return null; }return _vm.onSpaceKey.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onUpKeyPress')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onDownKeyPress')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"home",undefined,$event.key,undefined)){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onHomeKeyPress')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"end",undefined,$event.key,undefined)){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onEndKeyPress')},function($event){return _vm.onKeyValidation($event, 'onKeyPress')}]},scopedSlots:_vm._u([{key:"anchor",fn:function(ref){
+;// 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/dropdown/dropdown.vue?vue&type=template&id=0ddf9e89&
+var dropdownvue_type_template_id_0ddf9e89_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-popover',_vm._g({ref:"popover",attrs:{"content-width":_vm.contentWidth,"open":_vm.open,"placement":_vm.placement,"initial-focus-element":_vm.openedWithKeyboard ? 'first' : 'dialog',"fallback-placements":_vm.fallbackPlacements,"padding":"none","role":"menu","modal":_vm.modal,"max-height":_vm.maxHeight,"max-width":_vm.maxWidth,"open-with-arrow-keys":true,"open-on-context":_vm.openOnContext},on:{"opened":_vm.updateInitialHighlightIndex,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.onEnterKey.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"space",32,$event.key,[" ","Spacebar"])){ return null; }return _vm.onSpaceKey.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onUpKeyPress')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onDownKeyPress')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"home",undefined,$event.key,undefined)){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onHomeKeyPress')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"end",undefined,$event.key,undefined)){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onEndKeyPress')},function($event){return _vm.onKeyValidation($event, 'onKeyPress')}]},scopedSlots:_vm._u([{key:"anchor",fn:function(ref){
 var attrs = ref.attrs;
 return [_vm._t("anchor",null,null,attrs)]}},{key:"content",fn:function(ref){
 var close = ref.close;
 return [_c('ul',{ref:"listWrapper",class:_vm.listClasses,attrs:{"id":_vm.listId,"data-qa":"dt-dropdown-list-wrapper"},on:{"mouseleave":_vm.clearHighlightIndex,"!mousemove":function($event){return _vm.onMouseHighlight.apply(null, arguments)}}},[_vm._t("list",null,{"close":close})],2)]}}],null,true)},_vm.$listeners))}
-var dropdownvue_type_template_id_02543726_staticRenderFns = []
+var dropdownvue_type_template_id_0ddf9e89_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/popover/popover.vue?vue&type=template&id=d85b2e98&
-var popovervue_type_template_id_d85b2e98_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.modal && _vm.isOpen)?_c('portal',[_c('div',{staticClass:"d-modal--transparent",attrs:{"aria-hidden":_vm.modal && _vm.isOpen ? 'false' : 'true'},on:{"click":function($event){$event.preventDefault();$event.stopPropagation();}}})]):_vm._e(),_c(_vm.elementType,_vm._g({ref:"popover",tag:"component",class:['d-popover', { 'd-popover__anchor--modal-opened': _vm.modal && _vm.isOpen }],attrs:{"data-qa":"dt-popover-container"}},_vm.$listeners),[_c('div',{ref:"anchor",attrs:{"id":!_vm.ariaLabelledby && _vm.labelledBy,"data-qa":"dt-popover-anchor","tabindex":_vm.openOnContext ? 0 : undefined},on:{"!click":function($event){return _vm.defaultToggleOpen.apply(null, arguments)},"contextmenu":function($event){$event.preventDefault();return _vm.onContext.apply(null, arguments)},"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)}],"wheel":function (e) { return (_vm.isOpen && _vm.modal) && e.preventDefault(); },"!keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"escape",undefined,$event.key,undefined)){ return null; }return _vm.closePopover.apply(null, arguments)}}},[_vm._t("anchor",null,{"attrs":{
+;// 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/popover/popover.vue?vue&type=template&id=b648cb8c&
+var popovervue_type_template_id_b648cb8c_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.modal && _vm.isOpen)?_c('portal',[_c('div',{staticClass:"d-modal--transparent",attrs:{"aria-hidden":_vm.modal && _vm.isOpen ? 'false' : 'true'},on:{"click":function($event){$event.preventDefault();$event.stopPropagation();}}})]):_vm._e(),_c(_vm.elementType,_vm._g({ref:"popover",tag:"component",class:['d-popover', { 'd-popover__anchor--modal-opened': _vm.modal && _vm.isOpen }],attrs:{"data-qa":"dt-popover-container"}},_vm.$listeners),[_c('div',{ref:"anchor",attrs:{"id":!_vm.ariaLabelledby && _vm.labelledBy,"data-qa":"dt-popover-anchor","tabindex":_vm.openOnContext ? 0 : undefined},on:{"!click":function($event){return _vm.defaultToggleOpen.apply(null, arguments)},"contextmenu":function($event){$event.preventDefault();return _vm.onContext.apply(null, arguments)},"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)}],"wheel":function (e) { return (_vm.isOpen && _vm.modal) && e.preventDefault(); },"!keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"escape",undefined,$event.key,undefined)){ return null; }return _vm.closePopover.apply(null, arguments)}}},[_vm._t("anchor",null,{"attrs":{
           'aria-expanded': _vm.isOpen.toString(),
           'aria-controls': _vm.id,
           'aria-haspopup': _vm.role,
@@ -6004,7 +6404,7 @@ var popovervue_type_template_id_d85b2e98_render = function () {var _vm=this;var
           'd-popover__content',
           _vm.POPOVER_PADDING_CLASSES[_vm.padding],
           _vm.contentClass ],attrs:{"data-qa":"dt-popover-content"}},[_vm._t("content",null,{"close":_vm.closePopover})],2),(_vm.$slots.footerContent)?_c('popover-header-footer',{ref:"popover__footer",class:_vm.POPOVER_HEADER_FOOTER_PADDING_CLASSES[_vm.padding],attrs:{"type":"footer","content-class":_vm.footerClass},scopedSlots:_vm._u([{key:"content",fn:function(){return [_vm._t("footerContent",null,{"close":_vm.closePopover})]},proxy:true}],null,true)}):_vm._e()],1)],1)],1)}
-var popovervue_type_template_id_d85b2e98_staticRenderFns = []
+var popovervue_type_template_id_b648cb8c_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getBoundingClientRect.js
@@ -10706,12 +11106,12 @@ if (typeof window !== 'undefined' && window.Vue && window.Vue === (external_comm
 /* harmony default export */ const index_esm = ((/* unused pure expression or super */ null && (install)));
 
 
-;// 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/popover/popover_header_footer.vue?vue&type=template&id=29ff8217&
-var popover_header_footervue_type_template_id_29ff8217_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{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/popover/popover_header_footer.vue?vue&type=template&id=9366be96&
+var popover_header_footervue_type_template_id_9366be96_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:{
     'd-popover__header': _vm.type === 'header',
     'd-popover__footer': _vm.type === 'footer',
   },attrs:{"data-qa":"dt-popover-header-footer"}},[(_vm.$slots.content)?_c('div',{class:['d-to-ellipsis', 'd-w100p', _vm.contentClass],attrs:{"data-qa":"dt-popover-header-footer-content"}},[_vm._t("content")],2):_vm._e(),(_vm.showCloseButton)?_c('dt-button',_vm._b({ref:"popover__close-button",staticClass:"d-p6 d-mr6 d-bc-transparent",attrs:{"data-qa":"dt-popover-close","importance":"outlined","kind":"muted","circle":""},on:{"click":function($event){return _vm.$emit('close')}},scopedSlots:_vm._u([{key:"icon",fn:function(){return [_c('icon-close',{staticClass:"d-svg--size20"})]},proxy:true}],null,false,2493961913)},'dt-button',_vm.closeButtonProps,false)):_vm._e()],1)}
-var popover_header_footervue_type_template_id_29ff8217_staticRenderFns = []
+var popover_header_footervue_type_template_id_9366be96_staticRenderFns = []
 
 
 ;// 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/popover/popover_header_footer.vue?vue&type=script&lang=js&
@@ -10750,6 +11150,7 @@ var popover_header_footervue_type_template_id_29ff8217_staticRenderFns = []
 //
 //
 //
+//
 
 
 /* harmony default export */ const popover_header_footervue_type_script_lang_js_ = ({
@@ -10777,6 +11178,7 @@ var popover_header_footervue_type_template_id_29ff8217_staticRenderFns = []
 
     /**
      * Determines visibility for close button
+     * @values true, false
      */
     showCloseButton: {
       type: Boolean,
@@ -10792,7 +11194,14 @@ var popover_header_footervue_type_template_id_29ff8217_staticRenderFns = []
       default: () => {}
     }
   },
-  emits: ['close'],
+  emits: [
+  /**
+   * Emitted when popover is closed
+   *
+   * @event close
+   * @type { Boolean }
+   */
+  'close'],
   methods: {
     focusCloseButton() {
       var _this$$refs$popover__;
@@ -10815,8 +11224,8 @@ var popover_header_footervue_type_template_id_29ff8217_staticRenderFns = []
 ;
 var popover_header_footer_component = normalizeComponent(
   popover_popover_header_footervue_type_script_lang_js_,
-  popover_header_footervue_type_template_id_29ff8217_render,
-  popover_header_footervue_type_template_id_29ff8217_staticRenderFns,
+  popover_header_footervue_type_template_id_9366be96_render,
+  popover_header_footervue_type_template_id_9366be96_staticRenderFns,
   false,
   null,
   null,
@@ -10939,6 +11348,7 @@ var popover_header_footer_component = normalizeComponent(
 //
 //
 //
+//
 
 /* eslint-disable max-lines */
 
@@ -10948,6 +11358,11 @@ var popover_header_footer_component = normalizeComponent(
 
 
 
+/**
+ * A Popover displays a content overlay when its anchor element is activated.
+ * @see https://dialpad.design/components/popover.html
+ */
+
 /* harmony default export */ const popovervue_type_script_lang_js_ = ({
   name: 'DtPopover',
 
@@ -10965,6 +11380,7 @@ var popover_header_footer_component = normalizeComponent(
      * Controls whether the popover is shown. Leaving this null will have the popover trigger on click by default.
      * If you set this value, the default trigger behavior will be disabled and you can control it as you need.
      * Supports .sync modifier
+     * @values null, true, false
      */
     open: {
       type: Boolean,
@@ -10974,6 +11390,7 @@ var popover_header_footer_component = normalizeComponent(
     /**
      * Opens the popover on right click (context menu). If you set this value to `true`,
      * the default trigger behavior will be disabled.
+     * @values true, false
      */
     openOnContext: {
       type: Boolean,
@@ -10999,7 +11416,7 @@ var popover_header_footer_component = normalizeComponent(
 
     /**
      * ARIA role for the content of the popover. Defaults to "dialog".
-     * @see https://www.w3.org/TR/wai-aria/#aria-haspopup
+     * <a href="https://www.w3.org/TR/wai-aria/#aria-haspopup" target="_blank">aria-haspopup</a>
      */
     role: {
       type: String,
@@ -11041,6 +11458,7 @@ var popover_header_footer_component = normalizeComponent(
 
     /**
      * Padding size class for the popover content.
+     * @values none, small, medium, large
      */
     padding: {
       type: String,
@@ -11061,6 +11479,7 @@ var popover_header_footer_component = normalizeComponent(
     /**
      * Width configuration for the popover content. When its value is 'anchor',
      * the popover content will have the same width as the anchor.
+     * @values null, anchor
      */
     contentWidth: {
       type: String,
@@ -11099,7 +11518,8 @@ var popover_header_footer_component = normalizeComponent(
 
     /**
      *  Displaces the content box from its anchor element
-     *  by the specified number of pixels.
+     *  by the specified number of pixels. See
+     *  <a href="https://atomiks.github.io/tippyjs/v6/all-props/#offset" target="_blank">Tippy.js docs</a>
      */
     offset: {
       type: Array,
@@ -11109,6 +11529,7 @@ var popover_header_footer_component = normalizeComponent(
     /**
      * Determines if the popover hides upon clicking the
      * anchor or outside of the content box.
+     * @values true, false
      */
     hideOnClick: {
       type: Boolean,
@@ -11118,6 +11539,7 @@ var popover_header_footer_component = normalizeComponent(
     /**
      * Determines modal state. If enabled popover has a modal overlay
      * preventing interaction with elements below it, but it is invisible.
+     * @values true, false
      */
     modal: {
       type: Boolean,
@@ -11127,6 +11549,7 @@ var popover_header_footer_component = normalizeComponent(
     /**
      * If the popover does not fit in the direction described by "placement",
      * it will attempt to change it's direction to the "fallbackPlacements".
+     * See <a href="https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements" target="_blank">Popper.js docs</a>
      * */
     fallbackPlacements: {
       type: Array,
@@ -11137,6 +11560,12 @@ var popover_header_footer_component = normalizeComponent(
 
     /**
      * The direction the popover displays relative to the anchor.
+     * See <a href="https://atomiks.github.io/tippyjs/v6/all-props/#placement" target="_blank">Tippy.js docs</a>
+     * @values top, top-start, top-end,
+     * right, right-start, right-end,
+     * left, left-start, left-end,
+     * bottom, bottom-start, bottom-end,
+     * auto, auto-start, auto-end
      */
     placement: {
       type: String,
@@ -11146,6 +11575,8 @@ var popover_header_footer_component = normalizeComponent(
     /**
      * If set to false the dialog will display over top of the anchor when there is insufficient space.
      * If set to true it will never move from its position relative to the anchor and will clip instead.
+     * See <a href="https://popper.js.org/docs/v2/modifiers/prevent-overflow/#tether" target="_blank">Popper.js docs</a>
+     * @values true, false
      */
     tether: {
       type: Boolean,
@@ -11158,6 +11589,8 @@ var popover_header_footer_component = normalizeComponent(
      * position in those cases the DOM layout changes the reference element's position.
      * `true` enables it, `reference` only checks the "reference" rect for changes and `popper` only
      * checks the "popper" rect for changes.
+     * See <a href="https://atomiks.github.io/tippyjs/v6/all-props/#sticky" target="_blank">Tippy.js docs</a>
+     * @values true, false, reference, popper
      */
     sticky: {
       type: [Boolean, String],
@@ -11187,6 +11620,7 @@ var popover_header_footer_component = normalizeComponent(
 
     /**
      * Determines visibility for close button
+     * @values true, false
      */
     showCloseButton: {
       type: Boolean,
@@ -11223,6 +11657,7 @@ var popover_header_footer_component = normalizeComponent(
      * find the element by ID. 'first' which will automatically focus
      * the first element, or 'dialog' which will focus the dialog window itself.
      * If the dialog is modal this prop cannot be 'none'.
+     * @values none, dialog, first
      */
     initialFocusElement: {
       type: [String, HTMLElement],
@@ -11235,6 +11670,7 @@ var popover_header_footer_component = normalizeComponent(
     /**
      * If the popover should open pressing up or down arrow key on the anchor element.
      * This can be set when not passing open prop.
+     * @values true, false
      */
     openWithArrowKeys: {
       type: Boolean,
@@ -11248,7 +11684,14 @@ var popover_header_footer_component = normalizeComponent(
    * @event opened
    * @type {Boolean | Array}
    */
-  'opened', 'update:open'],
+  'opened',
+  /**
+   * Emitted to sync value with parent
+   *
+   * @event update:opened
+   * @type {Boolean | Array}
+   */
+  'update:open'],
 
   data() {
     return {
@@ -11610,8 +12053,8 @@ var popovervue_type_style_index_0_lang_less_ = __webpack_require__(230);
 
 var popover_component = normalizeComponent(
   popover_popovervue_type_script_lang_js_,
-  popovervue_type_template_id_d85b2e98_render,
-  popovervue_type_template_id_d85b2e98_staticRenderFns,
+  popovervue_type_template_id_b648cb8c_render,
+  popovervue_type_template_id_b648cb8c_staticRenderFns,
   false,
   null,
   null,
@@ -11853,7 +12296,12 @@ const DROPDOWN_PADDING_CLASSES = {
    * @event opened
    * @type {Boolean | Array}
    */
-  'opened', 'update:open'],
+  'opened',
+  /**
+   * Event fired to sync the open prop with the parent component
+   * @event update:open
+   */
+  'update:open'],
 
   data() {
     return {
@@ -12013,8 +12461,8 @@ var dropdownvue_type_style_index_0_lang_less_ = __webpack_require__(782);
 
 var dropdown_component = normalizeComponent(
   dropdown_dropdownvue_type_script_lang_js_,
-  dropdownvue_type_template_id_02543726_render,
-  dropdownvue_type_template_id_02543726_staticRenderFns,
+  dropdownvue_type_template_id_0ddf9e89_render,
+  dropdownvue_type_template_id_0ddf9e89_staticRenderFns,
   false,
   null,
   null,
@@ -12023,9 +12471,9 @@ var dropdown_component = normalizeComponent(
 )
 
 /* harmony default export */ const dropdown = (dropdown_component.exports);
-;// 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/dropdown/dropdown_list.vue?vue&type=template&id=294ae37b&scoped=true&
-var dropdown_listvue_type_template_id_294ae37b_scoped_true_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('li',[(_vm.heading)?_c('div',{staticClass:"dt-dropdown-list--header d-fs12 d-fc-black-400 d-fw-bold d-lh4 d-py4 d-px12 d-d-flex d-ai-center"},[_c('span',[_vm._v(_vm._s(_vm.heading))])]):_vm._e(),_c('ul',{class:['d-ps-relative', 'd-px0', _vm.listClass],attrs:{"data-qa":"dt-dropdown-list-wrapper"}},[_vm._t("default")],2)])}
-var dropdown_listvue_type_template_id_294ae37b_scoped_true_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/dropdown/dropdown_list.vue?vue&type=template&id=55a3b3f2&
+var dropdown_listvue_type_template_id_55a3b3f2_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('li',[(_vm.heading)?_c('div',{staticClass:"dt-dropdown-list--header d-fs12 d-fc-black-400 d-fw-bold d-lh4 d-py4 d-px12 d-d-flex d-ai-center"},[_c('span',[_vm._v(_vm._s(_vm.heading))])]):_vm._e(),_c('ul',{class:['d-ps-relative', 'd-px0', _vm.listClass],attrs:{"data-qa":"dt-dropdown-list-wrapper"}},[_vm._t("default")],2)])}
+var dropdown_listvue_type_template_id_55a3b3f2_staticRenderFns = []
 
 
 ;// 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/dropdown/dropdown_list.vue?vue&type=script&lang=js&
@@ -12080,11 +12528,11 @@ var dropdown_listvue_type_template_id_294ae37b_scoped_true_staticRenderFns = []
 ;
 var dropdown_list_component = normalizeComponent(
   dropdown_dropdown_listvue_type_script_lang_js_,
-  dropdown_listvue_type_template_id_294ae37b_scoped_true_render,
-  dropdown_listvue_type_template_id_294ae37b_scoped_true_staticRenderFns,
+  dropdown_listvue_type_template_id_55a3b3f2_render,
+  dropdown_listvue_type_template_id_55a3b3f2_staticRenderFns,
   false,
   null,
-  "294ae37b",
+  null,
   null
   
 )
@@ -12137,8 +12585,8 @@ var dropdown_separator_component = normalizeComponent(
 
 
 
-;// 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/input/input.vue?vue&type=template&id=fc19976e&
-var inputvue_type_template_id_fc19976e_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"container",staticClass:"base-input",attrs:{"data-qa":"dt-input"}},[_c('label',{staticClass:"base-input__label",attrs:{"aria-details":_vm.$slots.description || _vm.description ? _vm.descriptionKey : undefined,"data-qa":"dt-input-label-wrapper"}},[_vm._t("labelSlot",function(){return [(_vm.label)?_c('div',{ref:"label",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/input/input.vue?vue&type=template&id=7e861d6a&
+var inputvue_type_template_id_7e861d6a_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"container",staticClass:"base-input",attrs:{"data-qa":"dt-input"}},[_c('label',{staticClass:"base-input__label",attrs:{"aria-details":_vm.$slots.description || _vm.description ? _vm.descriptionKey : undefined,"data-qa":"dt-input-label-wrapper"}},[_vm._t("labelSlot",function(){return [(_vm.label)?_c('div',{ref:"label",class:[
           'base-input__label-text',
           'd-label',
           _vm.labelSizeClasses[_vm.size] ],attrs:{"data-qa":"dt-input-label"}},[_vm._v(" "+_vm._s(_vm.label)+" ")]):_vm._e()]}),(_vm.$slots.description || _vm.description || _vm.shouldValidateLength)?_c('div',{ref:"description",class:[
@@ -12147,7 +12595,7 @@ var inputvue_type_template_id_fc19976e_render = function () {var _vm=this;var _h
         'd-fd-column',
         _vm.descriptionSizeClasses[_vm.size] ],attrs:{"id":_vm.descriptionKey,"data-qa":"dt-input-description"}},[(_vm.$slots.description || _vm.description)?_c('div',[_vm._t("description",function(){return [_vm._v(_vm._s(_vm.description))]})],2):_vm._e(),(_vm.shouldValidateLength)?_c('div',{class:[
           'd-mb2' ],attrs:{"data-qa":"dt-input-length-description"}},[_vm._v(" "+_vm._s(_vm.validationProps.length.description)+" ")]):_vm._e()]):_vm._e(),_c('div',{staticClass:"d-input__wrapper"},[(_vm.$slots.leftIcon)?_c('span',{class:_vm.inputIconClasses('left'),attrs:{"data-qa":"dt-input-left-icon-wrapper"},on:{"focusout":_vm.onBlur}},[_vm._t("leftIcon")],2):_vm._e(),(_vm.isTextarea)?_c('textarea',_vm._g(_vm._b({ref:"input",class:_vm.inputClasses(),attrs:{"name":_vm.name,"disabled":_vm.disabled,"maxlength":_vm.shouldLimitMaxLength ? _vm.validationProps.length.max : null,"data-qa":"dt-input-input"},domProps:{"value":_vm.value}},'textarea',_vm.$attrs,false),_vm.inputListeners)):_c('input',_vm._g(_vm._b({ref:"input",class:_vm.inputClasses(),attrs:{"name":_vm.name,"type":_vm.type,"disabled":_vm.disabled,"maxlength":_vm.shouldLimitMaxLength ? _vm.validationProps.length.max : null,"data-qa":"dt-input-input"},domProps:{"value":_vm.value}},'input',_vm.$attrs,false),_vm.inputListeners)),(_vm.$slots.rightIcon)?_c('span',{class:_vm.inputIconClasses('right'),attrs:{"data-qa":"dt-input-right-icon-wrapper"},on:{"focusout":_vm.onBlur}},[_vm._t("rightIcon")],2):_vm._e()])],2),_c('dt-validation-messages',_vm._b({class:_vm.messagesClass,attrs:{"validation-messages":_vm.validationMessages,"show-messages":_vm.showMessages,"data-qa":"dt-input-messages"}},'dt-validation-messages',_vm.messagesChildProps,false))],1)}
-var inputvue_type_template_id_fc19976e_staticRenderFns = []
+var inputvue_type_template_id_7e861d6a_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./components/input/input_constants.js
@@ -12171,15 +12619,15 @@ const INPUT_SIZES = {
   INPUT_TYPES,
   INPUT_SIZES
 });
-;// 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/validation_messages/validation_messages.vue?vue&type=template&id=e7311664&
-var validation_messagesvue_type_template_id_e7311664_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.showMessages && !_vm.isFilteredValidationMessagesEmpty)?_c('div',{staticClass:"base-input__messages d-d-flex d-fd-column",attrs:{"data-qa":"validation-messages-container"}},_vm._l((_vm.filteredValidationMessages),function(ref,index){
+;// 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/validation_messages/validation_messages.vue?vue&type=template&id=61ba07b5&
+var validation_messagesvue_type_template_id_61ba07b5_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.showMessages && !_vm.isFilteredValidationMessagesEmpty)?_c('div',{staticClass:"base-input__messages d-d-flex d-fd-column",attrs:{"data-qa":"validation-messages-container"}},_vm._l((_vm.filteredValidationMessages),function(ref,index){
 var message = ref.message;
 var type = ref.type;
 return _c('div',{key:_vm.getMessageKey(type, index),class:[
       'base-input__message',
       'd-validation-message',
       _vm.messageTypeClass(type) ],attrs:{"role":"status","aria-live":"polite","data-qa":"validation-message"}},[_c('p',{domProps:{"innerHTML":_vm._s(message)}})])}),0):_vm._e()}
-var validation_messagesvue_type_template_id_e7311664_staticRenderFns = []
+var validation_messagesvue_type_template_id_61ba07b5_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./common/validators.js
@@ -12230,6 +12678,12 @@ function validationMessageValidator(rawMessages) {
 //
 
 
+/**
+ * Validation messages are used to convey information to the user about the current state of the input element.
+ * These messages can have an error, warning or success type.
+ * @see https://dialpad.design/components/validation_messages.html
+ */
+
 /* harmony default export */ const validation_messagesvue_type_script_lang_js_ = ({
   name: 'DtValidationMessages',
   props: {
@@ -12257,6 +12711,7 @@ function validationMessageValidator(rawMessages) {
 
     /**
      * Show Validation messages
+     * @values true, false
      */
     showMessages: {
       type: Boolean,
@@ -12305,8 +12760,8 @@ function validationMessageValidator(rawMessages) {
 ;
 var validation_messages_component = normalizeComponent(
   validation_messages_validation_messagesvue_type_script_lang_js_,
-  validation_messagesvue_type_template_id_e7311664_render,
-  validation_messagesvue_type_template_id_e7311664_staticRenderFns,
+  validation_messagesvue_type_template_id_61ba07b5_render,
+  validation_messagesvue_type_template_id_61ba07b5_staticRenderFns,
   false,
   null,
   null,
@@ -12324,6 +12779,7 @@ var validation_messages_component = normalizeComponent(
 
 /**
  * This mixin provides a base set of props, watchers and data attributes that are commonly used in our input components.
+ * @displayName Input Mixin
  */
 
 const InputMixin = {
@@ -12463,6 +12919,7 @@ const InputMixin = {
  *
  * This includes the group context, checked model & prop, internal data attributes as well as a set common computed
  * properties and watchers. It also includes the group name warning logic.
+ * @displayName Checkable Mixin
  */
 
 const CheckableMixin = {
@@ -12520,6 +12977,7 @@ const CheckableMixin = {
  *
  * This includes the group context and internal data attributes as well as a set common computed
  * properties and watchers. It also includes the group name warning logic.
+ * @displayName Groupable Mixin
  */
 
 const GroupableMixin = {
@@ -12629,10 +13087,15 @@ const GroupableMixin = {
   }
 
 };
+/**
+ * This mixin provides common logic shared amongst our validation messages inputs.
+ * @displayName Messages Mixin
+ */
+
 const MessagesMixin = {
   props: {
     /**
-     * Used to customize the the validation messages component
+     * Used to customize the validation messages component
      */
     messagesClass: {
       type: [String, Array, Object],
@@ -12649,6 +13112,7 @@ const MessagesMixin = {
 
     /**
      * Used to hide / show the validation messages
+     * @values true, false
      */
     showMessages: {
       type: Boolean,
@@ -12788,13 +13252,19 @@ const MessagesMixin = {
 //
 //
 //
+//
+//
 
 
 
 
 
 /**
+ * An input field is an input control that allows users to enter alphanumeric information.
+ * It can have a range of options and supports single line and multi-line lengths,
+ * as well as varying formats, including numbers, masked passwords, etc.
  * @property {Boolean} placeholder attribute
+ * @see https://dialpad.design/components/input.html
  */
 
 /* harmony default export */ const inputvue_type_script_lang_js_ = ({
@@ -12814,8 +13284,9 @@ const MessagesMixin = {
     },
 
     /**
-     * Type of the input, one of `text`, `password`, `email`, `number`, `textarea`.
+     * Type of the input, one of: `text`, `password`, `email`, `number`, `textarea`.
      * When `textarea` a `<textarea>` element will be rendered instead of an `<input>` element.
+     * @values text, password, email, number, textarea.
      */
     type: {
       type: String,
@@ -12833,6 +13304,7 @@ const MessagesMixin = {
 
     /**
      * Disables the input
+     * @values true, false
      */
     disabled: {
       type: Boolean,
@@ -12857,6 +13329,7 @@ const MessagesMixin = {
 
     /**
      * Size of the input, one of `xs`, `sm`, `md`, `lg`, `xl`
+     * @values null, xs, sm, md, lg, xl
      */
     size: {
       type: String,
@@ -12867,6 +13340,7 @@ const MessagesMixin = {
     /**
      * Size of the icon. One of `xs`, `sm`, `md`, `lg`, `xl`. If you do not set this the icon will size relative
      * to the input size
+     * @values null, xs, sm, md, lg, xl
      */
     iconSize: {
       type: String,
@@ -12876,8 +13350,8 @@ const MessagesMixin = {
 
     /**
      * Additional class name for the input element.
-     * Can accept all of String, Object, and Array, i.e. has the
-     * same api as Vue's built-in handling of the class attribute.
+     * Can accept String, Object, and Array, i.e. has the
+     * same API as Vue's built-in handling of the class attribute.
      */
     inputClass: {
       type: [String, Object, Array],
@@ -12886,7 +13360,7 @@ const MessagesMixin = {
 
     /**
      * The current character length that the user has entered into the input.
-     * This will only need to be used if you are using validate.length and
+     * This will only need to be used if you are using `validate.length` and
      * the string contains abnormal characters.
      * For example, an emoji could take up many characters in the input, but should only count as 1 character.
      * If no number is provided, a built-in length calculation will be used for the length validation.
@@ -13242,8 +13716,8 @@ const MessagesMixin = {
 ;
 var input_component = normalizeComponent(
   input_inputvue_type_script_lang_js_,
-  inputvue_type_template_id_fc19976e_render,
-  inputvue_type_template_id_fc19976e_staticRenderFns,
+  inputvue_type_template_id_7e861d6a_render,
+  inputvue_type_template_id_7e861d6a_staticRenderFns,
   false,
   null,
   null,
@@ -13255,9 +13729,9 @@ var input_component = normalizeComponent(
 ;// CONCATENATED MODULE: ./components/input/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/input_group/input_group.vue?vue&type=template&id=cdfe834c&
-var input_groupvue_type_template_id_cdfe834c_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('fieldset',{attrs:{"data-qa":_vm.dataQaGroup}},[(_vm.$slots.legend || _vm.legend)?_c('legend',_vm._b({class:['d-label', _vm.legendClass],attrs:{"data-qa":_vm.dataQaGroupLegend}},'legend',_vm.legendChildProps,false),[_vm._t("legend",function(){return [_vm._v(" "+_vm._s(_vm.legend)+" ")]})],2):_vm._e(),_vm._t("default"),_c('dt-validation-messages',_vm._b({class:_vm.messagesClass,attrs:{"validation-messages":_vm.formattedMessages,"show-messages":_vm.showMessages,"data-qa":_vm.dataQaGroupMessages}},'dt-validation-messages',_vm.messagesChildProps,false))],2)}
-var input_groupvue_type_template_id_cdfe834c_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/input_group/input_group.vue?vue&type=template&id=b2cbc49c&
+var input_groupvue_type_template_id_b2cbc49c_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('fieldset',{attrs:{"data-qa":_vm.dataQaGroup}},[(_vm.$slots.legend || _vm.legend)?_c('legend',_vm._b({class:['d-label', _vm.legendClass],attrs:{"data-qa":_vm.dataQaGroupLegend}},'legend',_vm.legendChildProps,false),[_vm._t("legend",function(){return [_vm._v(" "+_vm._s(_vm.legend)+" ")]})],2):_vm._e(),_vm._t("default"),_c('dt-validation-messages',_vm._b({class:_vm.messagesClass,attrs:{"validation-messages":_vm.formattedMessages,"show-messages":_vm.showMessages,"data-qa":_vm.dataQaGroupMessages}},'dt-validation-messages',_vm.messagesChildProps,false))],2)}
+var input_groupvue_type_template_id_b2cbc49c_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./common/mixins/input_group.js
@@ -13268,6 +13742,7 @@ var input_groupvue_type_template_id_cdfe834c_staticRenderFns = []
 /**
  * This mixin provides a base provide obj and set of components, props, computed, watchers and data attributes that are
  * commonly used in our input group components.
+ * @displayName Input Group Mixin
  */
 
 const InputGroupMixin = {
@@ -13322,6 +13797,7 @@ const InputGroupMixin = {
 
     /**
      * Disables the input group
+     * @values true, false
      */
     disabled: {
       type: Boolean,
@@ -13339,6 +13815,7 @@ const InputGroupMixin = {
 
     /**
      * Show validation messages
+     * @values true, false
      */
     showMessages: {
       type: Boolean,
@@ -13460,6 +13937,13 @@ const InputGroupMixin = {
 //
 
 
+/**
+ * Input Groups are convenience components for a grouping of related inputs.
+ * While each input within the group could be independent, the `v-model` on the group
+ * provides a convenient interface for determining the current state of the group.
+ * @see https://dialpad.design/components/input_group.html
+ */
+
 /* harmony default export */ const input_groupvue_type_script_lang_js_ = ({
   name: 'DtInputGroup',
   components: {
@@ -13543,8 +14027,8 @@ const InputGroupMixin = {
 ;
 var input_group_component = normalizeComponent(
   input_group_input_groupvue_type_script_lang_js_,
-  input_groupvue_type_template_id_cdfe834c_render,
-  input_groupvue_type_template_id_cdfe834c_staticRenderFns,
+  input_groupvue_type_template_id_b2cbc49c_render,
+  input_groupvue_type_template_id_b2cbc49c_staticRenderFns,
   false,
   null,
   null,
@@ -13555,8 +14039,8 @@ var input_group_component = normalizeComponent(
 /* harmony default export */ const input_group_input_group = (input_group_component.exports);
 ;// CONCATENATED MODULE: ./components/input_group/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/modal/modal.vue?vue&type=template&id=e3e205ea&
-var modalvue_type_template_id_e3e205ea_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-lazy-show',{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/modal/modal.vue?vue&type=template&id=d71a3468&
+var modalvue_type_template_id_d71a3468_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-lazy-show',{class:[
     'd-modal',
     _vm.MODAL_KIND_MODIFIERS[_vm.kind],
     _vm.MODAL_SIZE_MODIFIERS[_vm.size],
@@ -13566,7 +14050,7 @@ var modalvue_type_template_id_e3e205ea_render = function () {var _vm=this;var _h
         'd-modal__dialog',
         { 'd-modal__dialog--scrollable': _vm.fixedHeaderFooter },
         _vm.dialogClass ],attrs:{"role":"dialog","aria-modal":"true","aria-describedby":_vm.describedById,"aria-labelledby":_vm.labelledById}},[(_vm.$slots.header)?_c('div',{staticClass:"d-modal__header",attrs:{"id":_vm.labelledById,"data-qa":"dt-modal-title"}},[_vm._t("header")],2):_c('h2',{staticClass:"d-modal__header",attrs:{"id":_vm.labelledById,"data-qa":"dt-modal-title"}},[_vm._v(" "+_vm._s(_vm.title)+" ")]),(_vm.$slots.default)?_c('div',{staticClass:"d-modal__content",attrs:{"data-qa":"dt-modal-copy"}},[_vm._t("default")],2):_c('p',{staticClass:"d-modal__content",attrs:{"data-qa":"dt-modal-copy"}},[_vm._v(" "+_vm._s(_vm.copy)+" ")]),(_vm.hasFooterSlot)?_c('footer',{staticClass:"d-modal__footer"},[_vm._t("footer")],2):_vm._e(),(!_vm.hideClose)?_c('dt-button',_vm._b({staticClass:"d-modal__close",attrs:{"circle":"","size":"lg","importance":"clear","aria-label":_vm.closeButtonProps.ariaLabel,"kind":_vm.kind},on:{"click":_vm.close},scopedSlots:_vm._u([{key:"icon",fn:function(){return [_c('icon-close')]},proxy:true}],null,false,4267981299)},'dt-button',_vm.closeButtonProps,false)):_vm._e()],1)])],1)}
-var modalvue_type_template_id_e3e205ea_staticRenderFns = []
+var modalvue_type_template_id_d71a3468_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./components/modal/modal_constants.js
@@ -13693,8 +14177,9 @@ const MODAL_SIZE_MODIFIERS = {
 
 
 /**
- * Base Vue component for Dialtone Modal.
- * @displayName DtModal
+ * Modals focus the user’s attention exclusively on one task or piece of information
+ * via a window that sits on top of the page content.
+ * @see https://dialpad.design/components/modal.html
  */
 
 /* harmony default export */ const modalvue_type_script_lang_js_ = ({
@@ -13707,7 +14192,8 @@ const MODAL_SIZE_MODIFIERS = {
   mixins: [modal],
   props: {
     /**
-     * A set of props to be passed into the modal's close button. Requires an 'ariaLabel' property.
+     * A set of props to be passed into the modal's close button.
+     * Requires an 'ariaLabel' property.
      */
     closeButtonProps: {
       type: Object,
@@ -13731,7 +14217,8 @@ const MODAL_SIZE_MODIFIERS = {
      * as screen readers should recite the dialog contents by default before any aria-description.
      */
     describedById: {
-      type: String
+      type: String,
+      default: ''
     },
 
     /**
@@ -13745,7 +14232,9 @@ const MODAL_SIZE_MODIFIERS = {
     },
 
     /**
-     * Whether the modal should be shown.  Parent component can sync on this value to control the modal's visibility.
+     * Whether the modal should be shown.
+     * Parent component can sync on this value to control the modal's visibility.
+     * @values true, false
      */
     show: {
       type: Boolean,
@@ -13769,9 +14258,8 @@ const MODAL_SIZE_MODIFIERS = {
     },
 
     /**
-     * The theme of the modal.
-     * @values default or danger
-     * kind - default or danger (https://dialpad.design/components/modal/)
+     * The theme of the modal. kind - default or danger,
+     * @values default, danger
      */
     kind: {
       type: String,
@@ -13780,9 +14268,8 @@ const MODAL_SIZE_MODIFIERS = {
     },
 
     /**
-     * The size of the modal.
-     * @values default or full
-     * size - default or full (https://dialpad.design/components/modal/)
+     * The size of the modal. size - default or full,
+     * @values default, full
      */
     size: {
       type: String,
@@ -13792,8 +14279,8 @@ const MODAL_SIZE_MODIFIERS = {
 
     /**
      * Additional class name for the root modal element.
-     * Can accept all of String, Object, and Array, i.e. has the
-     * same api as Vue's built-in handling of the class attribute.
+     * Can accept String, Object, and Array, i.e. has the
+     * same API as Vue's built-in handling of the class attribute.
      */
     modalClass: {
       type: [String, Object, Array],
@@ -13802,8 +14289,8 @@ const MODAL_SIZE_MODIFIERS = {
 
     /**
      * Additional class name for the dialog element within the modal.
-     * Can accept all of String, Object, and Array, i.e. has the
-     * same api as Vue's built-in handling of the class attribute.
+     * Can accept String, Object, and Array, i.e. has the
+     * same API as Vue's built-in handling of the class attribute.
      */
     dialogClass: {
       type: [String, Object, Array],
@@ -13812,8 +14299,8 @@ const MODAL_SIZE_MODIFIERS = {
 
     /**
      * Additional class name for the banner element within the modal.
-     * Can accept all of String, Object, and Array, i.e. has the
-     * same api as Vue's built-in handling of the class attribute.
+     * Can accept String, Object, and Array, i.e. has the
+     * same API as Vue's built-in handling of the class attribute.
      */
     bannerClass: {
       type: [String, Object, Array],
@@ -13822,6 +14309,7 @@ const MODAL_SIZE_MODIFIERS = {
 
     /**
      * Hides the close button on the modal
+     * @values true, false
      */
     hideClose: {
       type: Boolean,
@@ -13830,6 +14318,7 @@ const MODAL_SIZE_MODIFIERS = {
 
     /**
      * Scrollable modal that allows scroll the modal content keeping the header and footer fixed
+     * @values true, false
      */
     fixedHeaderFooter: {
       type: Boolean,
@@ -13911,8 +14400,8 @@ const MODAL_SIZE_MODIFIERS = {
 ;
 var modal_component = normalizeComponent(
   modal_modalvue_type_script_lang_js_,
-  modalvue_type_template_id_e3e205ea_render,
-  modalvue_type_template_id_e3e205ea_staticRenderFns,
+  modalvue_type_template_id_d71a3468_render,
+  modalvue_type_template_id_d71a3468_staticRenderFns,
   false,
   null,
   null,
@@ -13924,10 +14413,10 @@ var modal_component = normalizeComponent(
 ;// CONCATENATED MODULE: ./components/modal/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/list_section/list_section.vue?vue&type=template&id=61c229f2&
-var list_sectionvue_type_template_id_61c229f2_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:['dt-list-section', 'd-fs-200', 'd-lh6', 'd-py6', 'd-bc-black-400',
+;// 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/list_section/list_section.vue?vue&type=template&id=8857acea&
+var list_sectionvue_type_template_id_8857acea_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:['dt-list-section', 'd-fs14', 'd-lh6', 'd-py6', 'd-bc-black-200',
            { 'd-bb': _vm.separator }],attrs:{"id":_vm.id,"role":"group","aria-labelledby":(_vm.id + "-list-section-header"),"tabindex":"-1"}},[(_vm.header)?_c('h3',{staticClass:"d-pl12 d-mt6",attrs:{"id":(_vm.id + "-list-section-header")}},[_vm._v(" "+_vm._s(_vm.header)+" ")]):_vm._e(),(!_vm.isCollapsible || _vm.showAll)?_c('ol',{attrs:{"id":(_vm.id + "-list-section-content")}},[_vm._t("default")],2):_c('ol',{attrs:{"id":(_vm.id + "-list-section-content")}},[_c('vnodes',{attrs:{"vnodes":_vm.displayedItems}})],1),_c('div',{staticClass:"d-d-flex"},[(_vm.isCollapsible)?_c('dt-button',{staticClass:"d-ml12 d-py6",attrs:{"id":(_vm.id + "-list-section-show-more-less"),"link":""},on:{"click":_vm.showMoreLessClicked}},[_vm._v(" "+_vm._s(_vm.showMoreLessText)+" ")]):_vm._e(),_vm._t("footer")],2)])}
-var list_sectionvue_type_template_id_61c229f2_staticRenderFns = []
+var list_sectionvue_type_template_id_8857acea_staticRenderFns = []
 
 
 ;// 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/list_section/list_section.vue?vue&type=script&lang=js&
@@ -14095,8 +14584,8 @@ var list_sectionvue_type_style_index_0_lang_less_ = __webpack_require__(132);
 
 var list_section_component = normalizeComponent(
   list_section_list_sectionvue_type_script_lang_js_,
-  list_sectionvue_type_template_id_61c229f2_render,
-  list_sectionvue_type_template_id_61c229f2_staticRenderFns,
+  list_sectionvue_type_template_id_8857acea_render,
+  list_sectionvue_type_template_id_8857acea_staticRenderFns,
   false,
   null,
   null,
@@ -14107,9 +14596,9 @@ var list_section_component = normalizeComponent(
 /* harmony default export */ const list_section = (list_section_component.exports);
 ;// CONCATENATED MODULE: ./components/list_section/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/notice/notice.vue?vue&type=template&id=ca7ad14a&
-var noticevue_type_template_id_ca7ad14a_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('aside',_vm._g({class:_vm.noticeClass,attrs:{"data-qa":"notice"}},_vm.$listeners),[_c('dt-notice-icon',_vm._g({attrs:{"kind":_vm.kind}},_vm.$listeners),[_vm._t("icon")],2),_c('dt-notice-content',_vm._g({attrs:{"title-id":_vm.titleId,"content-id":_vm.contentId,"title":_vm.title,"role":_vm.role},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}},_vm.$listeners),[_vm._t("action")],2)],1)}
-var noticevue_type_template_id_ca7ad14a_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.vue?vue&type=template&id=30c65ac1&
+var noticevue_type_template_id_30c65ac1_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('aside',_vm._g({class:_vm.noticeClass,attrs:{"data-qa":"notice"}},_vm.$listeners),[_c('dt-notice-icon',_vm._g({attrs:{"kind":_vm.kind}},_vm.$listeners),[_vm._t("icon")],2),_c('dt-notice-content',_vm._g({attrs:{"title-id":_vm.titleId,"content-id":_vm.contentId,"title":_vm.title,"role":_vm.role},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}},_vm.$listeners),[_vm._t("action")],2)],1)}
+var noticevue_type_template_id_30c65ac1_staticRenderFns = []
 
 
 ;// 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/notice/notice.vue?vue&type=script&lang=js&
@@ -14156,6 +14645,11 @@ var noticevue_type_template_id_ca7ad14a_staticRenderFns = []
 
 
 
+/**
+ * A notice is an informational and assistive message that appears inline with content.
+ * @see https://dialpad.design/components/notice.html
+ */
+
 /* harmony default export */ const noticevue_type_script_lang_js_ = ({
   name: 'DtNotice',
   components: {
@@ -14194,6 +14688,7 @@ var noticevue_type_template_id_ca7ad14a_staticRenderFns = []
      * Provides a role for the notice. 'status' is used to communicate a message. 'alert' is used to communicate an
      * important message that does not contain any interactive elements. 'alertdialog' is used to communicate an
      * important message that does contain interactive elements.
+     * @values alert, alertdialog, status
      */
     role: {
       type: String,
@@ -14208,6 +14703,7 @@ var noticevue_type_template_id_ca7ad14a_staticRenderFns = []
     /**
      * Used in scenarios where the message needs to visually dominate the screen.
      * This will also change the aria role from status to alert.
+     * @values true, false
      */
     important: {
       type: Boolean,
@@ -14216,6 +14712,7 @@ var noticevue_type_template_id_ca7ad14a_staticRenderFns = []
 
     /**
      * Severity level of the notice, sets the icon and background
+     * @values base, error, info, success, warning
      */
     kind: {
       type: String,
@@ -14237,6 +14734,7 @@ var noticevue_type_template_id_ca7ad14a_staticRenderFns = []
 
     /**
      * Hides the close button from the notice
+     * @values true, false
      */
     hideClose: {
       type: Boolean,
@@ -14278,8 +14776,8 @@ var noticevue_type_template_id_ca7ad14a_staticRenderFns = []
 ;
 var notice_component = normalizeComponent(
   notice_noticevue_type_script_lang_js_,
-  noticevue_type_template_id_ca7ad14a_render,
-  noticevue_type_template_id_ca7ad14a_staticRenderFns,
+  noticevue_type_template_id_30c65ac1_render,
+  noticevue_type_template_id_30c65ac1_staticRenderFns,
   false,
   null,
   null,
@@ -14291,9 +14789,9 @@ var notice_component = normalizeComponent(
 ;// CONCATENATED MODULE: ./components/notice/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/pagination/pagination.vue?vue&type=template&id=6d874984&
-var paginationvue_type_template_id_6d874984_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('nav',{staticClass:"d-d-flex d-fd-row d-gg2 d-ai-center",attrs:{"aria-label":_vm.ariaLabel}},[_c('dt-button',{staticClass:"d-h32 d-w32",attrs:{"data-qa":"dt-pagination-prev","aria-label":_vm.prevAriaLabel,"importance":_vm.isFirstPage ? 'primary' : 'clear',"disabled":_vm.isFirstPage},on:{"click":function($event){return _vm.changePage(_vm.currentPage - 1)}}},[_c('template',{slot:"icon"},[_c('icon-chevron-left')],1)],2),_vm._l((_vm.pages),function(page,index){return _c('div',{key:("page-" + page + "-" + index)},[(isNaN(Number(page)))?_c('div',{staticClass:"d-h32 d-w32 d-d-flex d-ai-center d-jc-center",attrs:{"data-qa":"dt-pagination-separator"}},[_vm._v(" … ")]):_c('dt-button',{staticClass:"d-h32 d-w32",attrs:{"aria-label":_vm.pageNumberAriaLabel(page),"importance":_vm.currentPage === page ? 'primary' : 'clear',"label-class":"d-fs-200"},on:{"click":function($event){return _vm.changePage(page)}}},[_vm._v(" "+_vm._s(page)+" ")])],1)}),_c('dt-button',{staticClass:"d-h32 d-w32",attrs:{"data-qa":"dt-pagination-next","aria-label":_vm.nextAriaLabel,"disabled":_vm.isLastPage,"importance":_vm.isLastPage ? 'primary' : 'clear'},on:{"click":function($event){return _vm.changePage(_vm.currentPage + 1)}}},[_c('template',{slot:"icon"},[_c('icon-chevron-right')],1)],2)],2)}
-var paginationvue_type_template_id_6d874984_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/pagination/pagination.vue?vue&type=template&id=6164a229&
+var paginationvue_type_template_id_6164a229_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('nav',{staticClass:"d-d-flex d-fd-row d-gg2 d-ai-center",attrs:{"aria-label":_vm.ariaLabel}},[_c('dt-button',{staticClass:"d-h32 d-w32",attrs:{"data-qa":"dt-pagination-prev","aria-label":_vm.prevAriaLabel,"importance":_vm.isFirstPage ? 'primary' : 'clear',"disabled":_vm.isFirstPage},on:{"click":function($event){return _vm.changePage(_vm.currentPage - 1)}}},[_c('template',{slot:"icon"},[_c('icon-chevron-left')],1)],2),_vm._l((_vm.pages),function(page,index){return _c('div',{key:("page-" + page + "-" + index)},[(isNaN(Number(page)))?_c('div',{staticClass:"d-h32 d-w32 d-d-flex d-ai-center d-jc-center",attrs:{"data-qa":"dt-pagination-separator"}},[_vm._v(" … ")]):_c('dt-button',{staticClass:"d-h32 d-w32",attrs:{"aria-label":_vm.pageNumberAriaLabel(page),"importance":_vm.currentPage === page ? 'primary' : 'clear',"label-class":"d-fs14"},on:{"click":function($event){return _vm.changePage(page)}}},[_vm._v(" "+_vm._s(page)+" ")])],1)}),_c('dt-button',{staticClass:"d-h32 d-w32",attrs:{"data-qa":"dt-pagination-next","aria-label":_vm.nextAriaLabel,"disabled":_vm.isLastPage,"importance":_vm.isLastPage ? 'primary' : 'clear'},on:{"click":function($event){return _vm.changePage(_vm.currentPage + 1)}}},[_c('template',{slot:"icon"},[_c('icon-chevron-right')],1)],2)],2)}
+var paginationvue_type_template_id_6164a229_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!./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconChevronLeft.vue?vue&type=template&id=dc01e37a&
@@ -14404,6 +14902,11 @@ var IconChevronRight_component = normalizeComponent(
 
 
 
+/**
+ * Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.
+ * @see https://dialpad.design/components/pagination.html
+ */
+
 /* harmony default export */ const paginationvue_type_script_lang_js_ = ({
   name: 'DtPagination',
   components: {
@@ -14523,7 +15026,6 @@ var IconChevronRight_component = normalizeComponent(
     }
 
   },
-  watch: {},
   methods: {
     range(from, to) {
       const range = [];
@@ -14555,8 +15057,8 @@ var IconChevronRight_component = normalizeComponent(
 ;
 var pagination_component = normalizeComponent(
   pagination_paginationvue_type_script_lang_js_,
-  paginationvue_type_template_id_6d874984_render,
-  paginationvue_type_template_id_6d874984_staticRenderFns,
+  paginationvue_type_template_id_6164a229_render,
+  paginationvue_type_template_id_6164a229_staticRenderFns,
   false,
   null,
   null,
@@ -14567,9 +15069,9 @@ var pagination_component = normalizeComponent(
 /* harmony default export */ const pagination = (pagination_component.exports);
 ;// CONCATENATED MODULE: ./components/pagination/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/radio/radio.vue?vue&type=template&id=be33e8c2&
-var radiovue_type_template_id_be33e8c2_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('label',[_c('div',{class:['d-radio-group', { 'd-radio-group--disabled': _vm.internalDisabled }]},[_c('div',{staticClass:"d-radio__input"},[_c('input',_vm._g(_vm._b({class:['d-radio', _vm.inputValidationClass, _vm.inputClass],attrs:{"name":_vm.internalName,"disabled":_vm.internalDisabled,"type":"radio"},domProps:{"checked":_vm.internalChecked,"value":_vm.value}},'input',_vm.$attrs,false),_vm.inputListeners))]),_c('div',{staticClass:"d-radio__copy d-radio__label",attrs:{"data-qa":"radio-label-description-container"}},[_c('div',_vm._b({class:_vm.labelClass,attrs:{"data-qa":"radio-label"}},'div',_vm.labelChildProps,false),[_vm._t("default",function(){return [_vm._v(_vm._s(_vm.label))]})],2),(_vm.$slots.description || _vm.description)?_c('div',_vm._b({class:['d-description', _vm.descriptionClass],attrs:{"data-qa":"radio-description"}},'div',_vm.descriptionChildProps,false),[_vm._t("description",function(){return [_vm._v(_vm._s(_vm.description))]})],2):_vm._e(),_c('dt-validation-messages',_vm._b({class:_vm.messagesClass,attrs:{"validation-messages":_vm.formattedMessages,"show-messages":_vm.showMessages,"data-qa":"dt-radio-validation-messages"}},'dt-validation-messages',_vm.messagesChildProps,false))],1)])])}
-var radiovue_type_template_id_be33e8c2_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/radio/radio.vue?vue&type=template&id=ceeae6b6&
+var radiovue_type_template_id_ceeae6b6_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('label',[_c('div',{class:['d-radio-group', { 'd-radio-group--disabled': _vm.internalDisabled }]},[_c('div',{staticClass:"d-radio__input"},[_c('input',_vm._g(_vm._b({class:['d-radio', _vm.inputValidationClass, _vm.inputClass],attrs:{"name":_vm.internalName,"disabled":_vm.internalDisabled,"type":"radio"},domProps:{"checked":_vm.internalChecked,"value":_vm.value}},'input',_vm.$attrs,false),_vm.inputListeners))]),_c('div',{staticClass:"d-radio__copy d-radio__label",attrs:{"data-qa":"radio-label-description-container"}},[_c('div',_vm._b({class:_vm.labelClass,attrs:{"data-qa":"radio-label"}},'div',_vm.labelChildProps,false),[_vm._t("default",function(){return [_vm._v(_vm._s(_vm.label))]})],2),(_vm.$slots.description || _vm.description)?_c('div',_vm._b({class:['d-description', _vm.descriptionClass],attrs:{"data-qa":"radio-description"}},'div',_vm.descriptionChildProps,false),[_vm._t("description",function(){return [_vm._v(_vm._s(_vm.description))]})],2):_vm._e(),_c('dt-validation-messages',_vm._b({class:_vm.messagesClass,attrs:{"validation-messages":_vm.formattedMessages,"show-messages":_vm.showMessages,"data-qa":"dt-radio-validation-messages"}},'dt-validation-messages',_vm.messagesChildProps,false))],1)])])}
+var radiovue_type_template_id_ceeae6b6_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./components/radio/radio_constants.js
@@ -14633,6 +15135,12 @@ const RADIO_INPUT_VALIDATION_CLASSES = {
 
 
 
+/**
+ * Radios are control elements that allow the user to make a single selection.
+ * They are typically used in a Radio Group which allows the user to make a selection from a list of options.
+ * @see https://dialpad.design/components/radio.html
+ */
+
 /* harmony default export */ const radiovue_type_script_lang_js_ = ({
   name: 'DtRadio',
   components: {
@@ -14737,8 +15245,8 @@ const RADIO_INPUT_VALIDATION_CLASSES = {
 ;
 var radio_component = normalizeComponent(
   radio_radiovue_type_script_lang_js_,
-  radiovue_type_template_id_be33e8c2_render,
-  radiovue_type_template_id_be33e8c2_staticRenderFns,
+  radiovue_type_template_id_ceeae6b6_render,
+  radiovue_type_template_id_ceeae6b6_staticRenderFns,
   false,
   null,
   null,
@@ -14751,6 +15259,11 @@ var radio_component = normalizeComponent(
 
 ;// 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/radio_group/radio_group.vue?vue&type=script&lang=js&
 
+/**
+ * Radio Groups are control elements that allow the user to make a single selection from a list of options.
+ * @see https://dialpad.design/components/radio_group.html
+ */
+
 /* harmony default export */ const radio_groupvue_type_script_lang_js_ = ({
   name: 'DtRadioGroup',
   extends: input_group_input_group,
@@ -14856,15 +15369,15 @@ var radio_group_component = normalizeComponent(
 /* harmony default export */ const radio_group = (radio_group_component.exports);
 ;// CONCATENATED MODULE: ./components/radio_group/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/tabs/tab_group.vue?vue&type=template&id=618b4a34&
-var tab_groupvue_type_template_id_618b4a34_render = function () {
+;// 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/tabs/tab_group.vue?vue&type=template&id=78c9105c&
+var tab_groupvue_type_template_id_78c9105c_render = function () {
 var _obj;
 var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{"data-qa":"dt-tab-group"}},[_c('div',_vm._b({class:[
       'd-tablist',
       _vm.TAB_LIST_SIZE_MODIFIERS[_vm.size],
       ( _obj = {}, _obj[_vm.TAB_LIST_KIND_MODIFIERS.inverted] = _vm.inverted, _obj[_vm.TAB_LIST_IMPORTANCE_MODIFIERS.borderless] = _vm.borderless, _obj ),
       _vm.tabListClass ],attrs:{"role":"tablist","aria-label":_vm.label},on:{"keyup":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"left",37,$event.key,["Left","ArrowLeft"])){ return null; }if('button' in $event && $event.button !== 0){ return null; }return _vm.tabLeft.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"right",39,$event.key,["Right","ArrowRight"])){ return null; }if('button' in $event && $event.button !== 2){ return null; }return _vm.tabRight.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.selectTab.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"space",32,$event.key,[" ","Spacebar"])){ return null; }return _vm.selectTab.apply(null, arguments)}],"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"home",undefined,$event.key,undefined)){ return null; }return _vm.onHomeButton.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"end",undefined,$event.key,undefined)){ return null; }return _vm.onEndButton.apply(null, arguments)}]}},'div',_vm.tabListChildProps,false),[_vm._t("tabs")],2),_vm._t("default")],2)}
-var tab_groupvue_type_template_id_618b4a34_staticRenderFns = []
+var tab_groupvue_type_template_id_78c9105c_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./components/tabs/tabs_constants.js
@@ -14916,6 +15429,11 @@ const TAB_IMPORTANCE_MODIFIERS = {
 //
 //
 
+/**
+ * Tabs allow users to navigation between grouped content in different views while within the same page context.
+ * @see https://dialpad.design/components/tabs.html
+ */
+
 /* harmony default export */ const tab_groupvue_type_script_lang_js_ = ({
   name: 'DtTabGroup',
 
@@ -14946,6 +15464,7 @@ const TAB_IMPORTANCE_MODIFIERS = {
 
     /**
      * If true, disables the tab group
+     * @values true, false
      */
     disabled: {
       type: Boolean,
@@ -14954,6 +15473,7 @@ const TAB_IMPORTANCE_MODIFIERS = {
 
     /**
      * If true, applies inverted styles to the tab group
+     * @values true, false
      */
     inverted: {
       type: Boolean,
@@ -14962,6 +15482,7 @@ const TAB_IMPORTANCE_MODIFIERS = {
 
     /**
      * If true, applies borderless styles to the tab group
+     * @values true, false
      */
     borderless: {
       type: Boolean,
@@ -14970,6 +15491,7 @@ const TAB_IMPORTANCE_MODIFIERS = {
 
     /**
      * If provided, applies size styles to the tab group
+     * @values default, sm
      */
     size: {
       type: String,
@@ -15185,8 +15707,8 @@ const TAB_IMPORTANCE_MODIFIERS = {
 ;
 var tab_group_component = normalizeComponent(
   tabs_tab_groupvue_type_script_lang_js_,
-  tab_groupvue_type_template_id_618b4a34_render,
-  tab_groupvue_type_template_id_618b4a34_staticRenderFns,
+  tab_groupvue_type_template_id_78c9105c_render,
+  tab_groupvue_type_template_id_78c9105c_staticRenderFns,
   false,
   null,
   null,
@@ -15195,14 +15717,14 @@ var tab_group_component = normalizeComponent(
 )
 
 /* harmony default export */ const tab_group = (tab_group_component.exports);
-;// 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/tabs/tab.vue?vue&type=template&id=0bc212ec&
-var tabvue_type_template_id_0bc212ec_render = function () {
+;// 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/tabs/tab.vue?vue&type=template&id=91977b48&
+var tabvue_type_template_id_91977b48_render = function () {
 var _obj;
 var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-button',_vm._b({class:[
     'd-tab',
     ( _obj = {}, _obj[_vm.TAB_IMPORTANCE_MODIFIERS.selected] = _vm.isSelected, _obj ),
     _vm.tabClass ],attrs:{"id":("dt-tab-" + _vm.id),"role":"tab","aria-selected":("" + _vm.isSelected),"aria-controls":("dt-panel-" + _vm.panelId),"aria-label":_vm.label,"data-qa":"dt-tab","tabindex":_vm.isSelected ? '0' : '-1',"disabled":_vm.groupContext.disabled || _vm.disabled},on:{"click":function($event){return _vm.selectPanel()},"focus":function($event){return _vm.setFocus(_vm.id)}}},'dt-button',_vm.$attrs,false),[_vm._t("default")],2)}
-var tabvue_type_template_id_0bc212ec_staticRenderFns = []
+var tabvue_type_template_id_91977b48_staticRenderFns = []
 
 
 ;// 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/tabs/tab.vue?vue&type=script&lang=js&
@@ -15234,6 +15756,11 @@ var tabvue_type_template_id_0bc212ec_staticRenderFns = []
 //
 
 
+/**
+ * Tabs allow users to navigation between grouped content in different views while within the same page context.
+ * @see https://dialpad.design/components/tabs.html
+ */
+
 /* harmony default export */ const tabvue_type_script_lang_js_ = ({
   name: 'DtTab',
   components: {
@@ -15268,6 +15795,7 @@ var tabvue_type_template_id_0bc212ec_staticRenderFns = []
 
     /**
      * Controls the state of the tab
+     * @values true, false
      */
     selected: {
       type: Boolean,
@@ -15276,6 +15804,7 @@ var tabvue_type_template_id_0bc212ec_staticRenderFns = []
 
     /**
      * If true, disables the tab
+     * @values true, false
      */
     disabled: {
       type: Boolean,
@@ -15337,8 +15866,8 @@ var tabvue_type_template_id_0bc212ec_staticRenderFns = []
 ;
 var tab_component = normalizeComponent(
   tabs_tabvue_type_script_lang_js_,
-  tabvue_type_template_id_0bc212ec_render,
-  tabvue_type_template_id_0bc212ec_staticRenderFns,
+  tabvue_type_template_id_91977b48_render,
+  tabvue_type_template_id_91977b48_staticRenderFns,
   false,
   null,
   null,
@@ -15347,13 +15876,13 @@ var tab_component = normalizeComponent(
 )
 
 /* harmony default export */ const tab = (tab_component.exports);
-;// 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/tabs/tab_panel.vue?vue&type=template&id=4d6d0107&
-var tab_panelvue_type_template_id_4d6d0107_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{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/tabs/tab_panel.vue?vue&type=template&id=78c45854&
+var tab_panelvue_type_template_id_78c45854_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:[
     {
       'd-d-none': _vm.hidePanel,
     },
     _vm.tabPanelClass ],attrs:{"id":("dt-panel-" + _vm.id),"role":"tabpanel","tabindex":"0","aria-labelledby":("dt-tab-" + _vm.tabId),"aria-hidden":("" + _vm.hidePanel),"data-qa":"dt-tab-panel"}},[_vm._t("default")],2)}
-var tab_panelvue_type_template_id_4d6d0107_staticRenderFns = []
+var tab_panelvue_type_template_id_78c45854_staticRenderFns = []
 
 
 ;// 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/tabs/tab_panel.vue?vue&type=script&lang=js&
@@ -15377,6 +15906,11 @@ var tab_panelvue_type_template_id_4d6d0107_staticRenderFns = []
 //
 //
 //
+
+/**
+ * Tabs allow users to navigation between grouped content in different views while within the same page context.
+ * @see https://dialpad.design/components/tabs.html
+ */
 /* harmony default export */ const tab_panelvue_type_script_lang_js_ = ({
   name: 'DtTabPanel',
   inject: ['groupContext'],
@@ -15399,6 +15933,7 @@ var tab_panelvue_type_template_id_4d6d0107_staticRenderFns = []
 
     /**
     * If true, hides the tab content
+     * @values true, false
     */
     hidden: {
       type: Boolean,
@@ -15432,8 +15967,8 @@ var tab_panelvue_type_template_id_4d6d0107_staticRenderFns = []
 ;
 var tab_panel_component = normalizeComponent(
   tabs_tab_panelvue_type_script_lang_js_,
-  tab_panelvue_type_template_id_4d6d0107_render,
-  tab_panelvue_type_template_id_4d6d0107_staticRenderFns,
+  tab_panelvue_type_template_id_78c45854_render,
+  tab_panelvue_type_template_id_78c45854_staticRenderFns,
   false,
   null,
   null,
@@ -15447,9 +15982,9 @@ var tab_panel_component = normalizeComponent(
 
 
 
-;// 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/checkbox/checkbox.vue?vue&type=template&id=1de6993c&
-var checkboxvue_type_template_id_1de6993c_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('label',[_c('div',{class:['d-checkbox-group', { 'd-checkbox-group--disabled': _vm.internalDisabled }]},[_c('div',{staticClass:"d-checkbox__input"},[_c('input',_vm._g(_vm._b({class:['d-checkbox', _vm.inputValidationClass, _vm.inputClass],attrs:{"type":"checkbox","name":_vm.internalName,"disabled":_vm.internalDisabled},domProps:{"checked":_vm.internalChecked,"value":_vm.value,"indeterminate":_vm.internalIndeterminate}},'input',_vm.$attrs,false),_vm.inputListeners))]),(_vm.hasLabelOrDescription)?_c('div',{staticClass:"d-checkbox__copy d-checkbox__label",attrs:{"data-qa":"checkbox-label-description-container"}},[(_vm.hasLabel)?_c('div',_vm._b({class:_vm.labelClass,attrs:{"data-qa":"checkbox-label"}},'div',_vm.labelChildProps,false),[_vm._t("default",function(){return [_vm._v(_vm._s(_vm.label))]})],2):_vm._e(),(_vm.hasDescription)?_c('div',_vm._b({class:['d-description', _vm.descriptionClass],attrs:{"data-qa":"checkbox-description"}},'div',_vm.descriptionChildProps,false),[_vm._t("description",function(){return [_vm._v(_vm._s(_vm.description))]})],2):_vm._e(),_c('dt-validation-messages',_vm._b({class:_vm.messagesClass,attrs:{"validation-messages":_vm.formattedMessages,"show-messages":_vm.showMessages,"data-qa":"dt-checkbox-validation-messages"}},'dt-validation-messages',_vm.messagesChildProps,false))],1):_vm._e()])])}
-var checkboxvue_type_template_id_1de6993c_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/checkbox/checkbox.vue?vue&type=template&id=ccbc242a&
+var checkboxvue_type_template_id_ccbc242a_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('label',[_c('div',{class:['d-checkbox-group', { 'd-checkbox-group--disabled': _vm.internalDisabled }]},[_c('div',{staticClass:"d-checkbox__input"},[_c('input',_vm._g(_vm._b({class:['d-checkbox', _vm.inputValidationClass, _vm.inputClass],attrs:{"type":"checkbox","name":_vm.internalName,"disabled":_vm.internalDisabled},domProps:{"checked":_vm.internalChecked,"value":_vm.value,"indeterminate":_vm.internalIndeterminate}},'input',_vm.$attrs,false),_vm.inputListeners))]),(_vm.hasLabelOrDescription)?_c('div',{staticClass:"d-checkbox__copy d-checkbox__label",attrs:{"data-qa":"checkbox-label-description-container"}},[(_vm.hasLabel)?_c('div',_vm._b({class:_vm.labelClass,attrs:{"data-qa":"checkbox-label"}},'div',_vm.labelChildProps,false),[_vm._t("default",function(){return [_vm._v(_vm._s(_vm.label))]})],2):_vm._e(),(_vm.hasDescription)?_c('div',_vm._b({class:['d-description', _vm.descriptionClass],attrs:{"data-qa":"checkbox-description"}},'div',_vm.descriptionChildProps,false),[_vm._t("description",function(){return [_vm._v(_vm._s(_vm.description))]})],2):_vm._e(),_c('dt-validation-messages',_vm._b({class:_vm.messagesClass,attrs:{"validation-messages":_vm.formattedMessages,"show-messages":_vm.showMessages,"data-qa":"dt-checkbox-validation-messages"}},'dt-validation-messages',_vm.messagesChildProps,false))],1):_vm._e()])])}
+var checkboxvue_type_template_id_ccbc242a_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./components/checkbox/checkbox_constants.js
@@ -15517,6 +16052,12 @@ const CHECKBOX_INPUT_VALIDATION_CLASSES = {
 
 
 
+/**
+ * Checkboxes are control elements that allow the user to make a selection.They are typically used in a
+ * Checkbox Group which allows the user to make one or more selections from a list of options.
+ * @see https://dialpad.design/components/checkbox.html
+ */
+
 /* harmony default export */ const checkboxvue_type_script_lang_js_ = ({
   name: 'DtCheckbox',
   components: {
@@ -15644,8 +16185,8 @@ const CHECKBOX_INPUT_VALIDATION_CLASSES = {
 ;
 var checkbox_component = normalizeComponent(
   checkbox_checkboxvue_type_script_lang_js_,
-  checkboxvue_type_template_id_1de6993c_render,
-  checkboxvue_type_template_id_1de6993c_staticRenderFns,
+  checkboxvue_type_template_id_ccbc242a_render,
+  checkboxvue_type_template_id_ccbc242a_staticRenderFns,
   false,
   null,
   null,
@@ -15659,6 +16200,13 @@ var checkbox_component = normalizeComponent(
 ;// 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/checkbox_group/checkbox_group.vue?vue&type=script&lang=js&
 
 
+/**
+ * Checkbox Groups are convenience components for a grouping of related Checkboxes.
+ * While each Checkbox within the group is independent, the `v-model` on the group provides
+ * a convenient interface for determining which Checkboxes within the group are checked.
+ * @see https://dialpad.design/components/checkbox_group.html
+ */
+
 /* harmony default export */ const checkbox_groupvue_type_script_lang_js_ = ({
   name: 'DtCheckboxGroup',
   extends: input_group_input_group,
@@ -15798,9 +16346,9 @@ var checkbox_group_component = normalizeComponent(
 /* harmony default export */ const checkbox_group = (checkbox_group_component.exports);
 ;// CONCATENATED MODULE: ./components/checkbox_group/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/chip/chip.vue?vue&type=template&id=631494f3&
-var chipvue_type_template_id_631494f3_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('span',{staticClass:"d-chip"},[_c(_vm.interactive ? 'button' : 'span',_vm._g({tag:"component",class:_vm.chipClasses(),attrs:{"id":_vm.id,"type":_vm.interactive && 'button',"data-qa":"dt-chip","aria-labelledby":_vm.ariaLabel ? undefined : (_vm.id + "-content"),"aria-label":_vm.ariaLabel}},_vm.chipListeners),[(_vm.$slots.icon)?_c('span',{staticClass:"d-chip__icon",attrs:{"data-qa":"dt-chip-icon"}},[_vm._t("icon")],2):(_vm.$slots.avatar)?_c('span',{attrs:{"data-qa":"dt-chip-avatar"}},[_vm._t("avatar")],2):_vm._e(),(_vm.$slots.default)?_c('span',{class:['d-truncate', 'd-chip__text', _vm.contentClass],attrs:{"id":(_vm.id + "-content"),"data-qa":"dt-chip-label"}},[_vm._t("default")],2):_vm._e()]),(!_vm.hideClose)?_c('dt-button',_vm._b({class:_vm.chipCloseButtonClasses(),attrs:{"data-qa":"dt-chip-close","aria-label":_vm.closeButtonProps.ariaLabel},on:{"click":function($event){return _vm.$emit('close')}},scopedSlots:_vm._u([{key:"icon",fn:function(){return [_c('icon-close')]},proxy:true}],null,false,4267981299)},'dt-button',_vm.closeButtonProps,false)):_vm._e()],1)}
-var chipvue_type_template_id_631494f3_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/chip/chip.vue?vue&type=template&id=3a0f690e&
+var chipvue_type_template_id_3a0f690e_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('span',{staticClass:"d-chip"},[_c(_vm.interactive ? 'button' : 'span',_vm._g({tag:"component",class:_vm.chipClasses(),attrs:{"id":_vm.id,"type":_vm.interactive && 'button',"data-qa":"dt-chip","aria-labelledby":_vm.ariaLabel ? undefined : (_vm.id + "-content"),"aria-label":_vm.ariaLabel}},_vm.chipListeners),[(_vm.$slots.icon)?_c('span',{staticClass:"d-chip__icon",attrs:{"data-qa":"dt-chip-icon"}},[_vm._t("icon")],2):(_vm.$slots.avatar)?_c('span',{attrs:{"data-qa":"dt-chip-avatar"}},[_vm._t("avatar")],2):_vm._e(),(_vm.$slots.default)?_c('span',{class:['d-truncate', 'd-chip__text', _vm.contentClass],attrs:{"id":(_vm.id + "-content"),"data-qa":"dt-chip-label"}},[_vm._t("default")],2):_vm._e()]),(!_vm.hideClose)?_c('dt-button',_vm._b({class:_vm.chipCloseButtonClasses(),attrs:{"data-qa":"dt-chip-close","aria-label":_vm.closeButtonProps.ariaLabel},on:{"click":function($event){return _vm.$emit('close')}},scopedSlots:_vm._u([{key:"icon",fn:function(){return [_c('icon-close')]},proxy:true}],null,false,4267981299)},'dt-button',_vm.closeButtonProps,false)):_vm._e()],1)}
+var chipvue_type_template_id_3a0f690e_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./components/chip/chip_constants.js
@@ -15874,6 +16422,13 @@ const CHIP_CLOSE_BUTTON_SIZE_MODIFIERS = {
 
 
 
+/**
+ * A chip is a compact UI element that provides brief, descriptive information about an element.
+ * It is terse, ideally one word. It is important a button is identifiable, consistent, and
+ * communicates its actions clearly, and is appropriately sized to its action.
+ * @see https://dialpad.design/components/chip.html
+ */
+
 /* harmony default export */ const chipvue_type_script_lang_js_ = ({
   name: 'DtChip',
   components: {
@@ -15898,6 +16453,7 @@ const CHIP_CLOSE_BUTTON_SIZE_MODIFIERS = {
 
     /**
      * Hides the close button on the chip
+     * @values true, false
      */
     hideClose: {
       type: Boolean,
@@ -15907,7 +16463,6 @@ const CHIP_CLOSE_BUTTON_SIZE_MODIFIERS = {
     /**
      * The size of the chip.
      * @values xs, sm, md
-     * @see https://dialpad.design/components/chip
      */
     size: {
       type: String,
@@ -15918,7 +16473,7 @@ const CHIP_CLOSE_BUTTON_SIZE_MODIFIERS = {
     /**
      * The interactivity of the chip.
      * Makes chip clickable, apply hover/focus/active style, emit keyboard events etc.
-     * @see https://dialpad.design/components/chip
+     * @values true, false
      */
     interactive: {
       type: Boolean,
@@ -16028,8 +16583,8 @@ const CHIP_CLOSE_BUTTON_SIZE_MODIFIERS = {
 ;
 var chip_component = normalizeComponent(
   chip_chipvue_type_script_lang_js_,
-  chipvue_type_template_id_631494f3_render,
-  chipvue_type_template_id_631494f3_staticRenderFns,
+  chipvue_type_template_id_3a0f690e_render,
+  chipvue_type_template_id_3a0f690e_staticRenderFns,
   false,
   null,
   null,
@@ -16041,8 +16596,8 @@ var chip_component = normalizeComponent(
 ;// CONCATENATED MODULE: ./components/chip/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/select_menu/select_menu.vue?vue&type=template&id=2a29663a&
-var select_menuvue_type_template_id_2a29663a_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('label',[(_vm.$slots.label || _vm.label)?_c('div',_vm._b({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/select_menu/select_menu.vue?vue&type=template&id=6109d361&
+var select_menuvue_type_template_id_6109d361_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('label',[(_vm.$slots.label || _vm.label)?_c('div',_vm._b({class:[
         'd-label',
         _vm.LABEL_SIZE_MODIFIERS[_vm.size],
         _vm.labelClass ],attrs:{"aria-details":_vm.labelAriaDetails,"data-qa":"dt-select-label"}},'div',_vm.labelChildProps,false),[_vm._t("label",function(){return [_vm._v(_vm._s(_vm.label))]})],2):_vm._e(),(_vm.$slots.description || _vm.description)?_c('div',_vm._b({class:[
@@ -16055,7 +16610,7 @@ var select_menuvue_type_template_id_2a29663a_render = function () {var _vm=this;
         { 'd-select--disabled': _vm.disabled } ],attrs:{"data-qa":"dt-select-wrapper"}},[_c('select',_vm._g(_vm._b({class:[
           'd-select__input',
           _vm.SELECT_STATE_MODIFIERS[_vm.state] ],attrs:{"data-qa":"dt-select","disabled":_vm.disabled}},'select',_vm.$attrs,false),_vm.selectListeners),[_vm._t("default",function(){return _vm._l((_vm.options),function(option){return _c('option',_vm._b({key:_vm.getOptionKey(option.value),class:_vm.optionClass,domProps:{"value":option.value}},'option',_vm.optionChildProps,false),[_vm._v(" "+_vm._s(option.label)+" ")])})})],2)])]),_c('dt-validation-messages',_vm._b({class:_vm.messagesClass,attrs:{"validation-messages":_vm.formattedMessages,"show-messages":_vm.showMessages,"data-qa":"dt-select-messages"}},'dt-validation-messages',_vm.messagesChildProps,false))],1)}
-var select_menuvue_type_template_id_2a29663a_staticRenderFns = []
+var select_menuvue_type_template_id_6109d361_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./components/select_menu/select_menu_constants.js
@@ -16199,9 +16754,11 @@ const optionsValidator = options => {
 
 
 /**
+ * A select menu is an input control that allows users to choose one option from a list.
  * @property {Boolean} disabled attribute
  * @property {String} name attribute
  * @property {String} value attribute
+ * @see https://dialpad.design/components/select.html
  */
 
 /* harmony default export */ const select_menuvue_type_script_lang_js_ = ({
@@ -16244,8 +16801,7 @@ const optionsValidator = options => {
 
     /**
      * Controls the size of the select
-     * @values xs, s, md, lg, xl
-     * @see https://dialpad.design/components/select
+     * @values xs, sm, md, lg, xl
      */
     size: {
       type: String,
@@ -16311,6 +16867,7 @@ const optionsValidator = options => {
 
     /**
      * Disabled state of the select
+     * @values true, false
      */
     disabled: {
       type: Boolean,
@@ -16423,8 +16980,8 @@ const optionsValidator = options => {
 ;
 var select_menu_component = normalizeComponent(
   select_menu_select_menuvue_type_script_lang_js_,
-  select_menuvue_type_template_id_2a29663a_render,
-  select_menuvue_type_template_id_2a29663a_staticRenderFns,
+  select_menuvue_type_template_id_6109d361_render,
+  select_menuvue_type_template_id_6109d361_staticRenderFns,
   false,
   null,
   null,
@@ -16436,12 +16993,12 @@ var select_menu_component = normalizeComponent(
 ;// CONCATENATED MODULE: ./components/select_menu/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/toast/toast.vue?vue&type=template&id=a2daf12c&
-var toastvue_type_template_id_a2daf12c_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.isShown)?_c('div',{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/toast/toast.vue?vue&type=template&id=48807c9a&
+var toastvue_type_template_id_48807c9a_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.isShown)?_c('div',{class:[
     'd-toast',
     _vm.kindClass,
     { 'd-toast--important': _vm.important } ],attrs:{"data-qa":"dt-toast","aria-hidden":(!_vm.isShown).toString()}},[_c('div',{staticClass:"d-toast__dialog"},[_c('dt-notice-icon',_vm._g({attrs:{"kind":_vm.kind}},_vm.$listeners),[_vm._t("icon")],2),_c('dt-notice-content',_vm._g({attrs:{"title-id":_vm.titleId,"content-id":_vm.contentId,"title":_vm.title,"role":_vm.role},scopedSlots:_vm._u([{key:"titleOverride",fn:function(){return [_vm._t("titleOverride")]},proxy:true}],null,true)},_vm.$listeners),[_vm._t("default",function(){return [_vm._v(" "+_vm._s(_vm.message)+" ")]})],2),_c('dt-notice-action',_vm._g({attrs:{"hide-close":_vm.hideClose,"close-button-props":_vm.closeButtonProps}},_vm.noticeActionListeners),[_vm._t("action")],2)],1)]):_vm._e()}
-var toastvue_type_template_id_a2daf12c_staticRenderFns = []
+var toastvue_type_template_id_48807c9a_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./components/toast/toast_constants.js
@@ -16506,6 +17063,12 @@ const TOAST_MIN_DURATION = 6000;
 
 
 
+/**
+ * A toast notice, sometimes called a snackbar, is a time-based message that appears based on users' actions.
+ * It contains at-a-glance information about outcomes and can be paired with actions.
+ * @see https://dialpad.design/components/toast.html
+ */
+
 /* harmony default export */ const toastvue_type_script_lang_js_ = ({
   name: 'DtToast',
   components: {
@@ -16559,6 +17122,7 @@ const TOAST_MIN_DURATION = 6000;
     /**
      * Provides a role for the toast. 'status' is used by default to communicate a message. 'alert' is used to
      * communicate an important message like an error that does not contain any interactive elements.
+     * @values status, alert
      */
     role: {
       type: String,
@@ -16570,6 +17134,7 @@ const TOAST_MIN_DURATION = 6000;
 
     /**
      * Severity level of the toast, sets the icon and background
+     * @values base, error, info, success, warning
      */
     kind: {
       type: String,
@@ -16581,6 +17146,7 @@ const TOAST_MIN_DURATION = 6000;
 
     /**
      * Used in scenarios where the message needs to visually dominate the screen.
+     * @values true, false
      */
     important: {
       type: Boolean,
@@ -16592,6 +17158,7 @@ const TOAST_MIN_DURATION = 6000;
      * after reaching the duration time, so it's convenient to use `.sync` modifier with this prop to update
      * the data in your component.
      * Supports .sync modifier
+     * @values true, false
      */
     show: {
       type: Boolean,
@@ -16608,6 +17175,7 @@ const TOAST_MIN_DURATION = 6000;
 
     /**
      * Hides the close button from the toast
+     * @values true, false
      */
     hideClose: {
       type: Boolean,
@@ -16633,7 +17201,13 @@ const TOAST_MIN_DURATION = 6000;
    *
    * @event close
    */
-  'close', 'update:show'],
+  'close',
+  /**
+   * Sync show value
+   *
+   * @event update:show
+   */
+  'update:show'],
 
   data() {
     return {
@@ -16714,8 +17288,8 @@ const TOAST_MIN_DURATION = 6000;
 ;
 var toast_component = normalizeComponent(
   toast_toastvue_type_script_lang_js_,
-  toastvue_type_template_id_a2daf12c_render,
-  toastvue_type_template_id_a2daf12c_staticRenderFns,
+  toastvue_type_template_id_48807c9a_render,
+  toastvue_type_template_id_48807c9a_staticRenderFns,
   false,
   null,
   null,
@@ -16727,12 +17301,12 @@ var toast_component = normalizeComponent(
 ;// CONCATENATED MODULE: ./components/toast/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/toggle/toggle.vue?vue&type=template&id=a424bd98&
-var togglevue_type_template_id_a424bd98_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"d-d-flex d-ai-center"},[(_vm.$slots.default)?_c('label',_vm._b({class:_vm.labelClass,attrs:{"for":_vm.id,"data-qa":"toggle-label"}},'label',_vm.labelChildProps,false),[_vm._t("default")],2):_vm._e(),_c('button',_vm._g(_vm._b({class:['d-toggle', {
+;// 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/toggle/toggle.vue?vue&type=template&id=8e140268&
+var togglevue_type_template_id_8e140268_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"d-d-flex d-ai-center"},[(_vm.$slots.default)?_c('label',_vm._b({class:_vm.labelClass,attrs:{"for":_vm.id,"data-qa":"toggle-label"}},'label',_vm.labelChildProps,false),[_vm._t("default")],2):_vm._e(),_c('button',_vm._g(_vm._b({class:['d-toggle', {
       'd-toggle--checked': _vm.internalChecked,
       'd-toggle--disabled': _vm.disabled,
     }],attrs:{"id":_vm.id,"role":"switch","type":"button","aria-checked":_vm.internalChecked.toString(),"disabled":_vm.disabled,"aria-disabled":_vm.disabled.toString()}},'button',_vm.$attrs,false),_vm.inputListeners),[_c('span',{staticClass:"d-toggle__inner"})])])}
-var togglevue_type_template_id_a424bd98_staticRenderFns = []
+var togglevue_type_template_id_8e140268_staticRenderFns = []
 
 
 ;// 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/toggle/toggle.vue?vue&type=script&lang=js&
@@ -16766,8 +17340,14 @@ var togglevue_type_template_id_a424bd98_staticRenderFns = []
 //
 //
 //
+//
 
 
+/**
+ * A toggle (or "switch") is a button control element that allows the user to make a binary (on/off) selection.
+ * @see https://dialpad.design/components/toggle.html
+ */
+
 /* harmony default export */ const togglevue_type_script_lang_js_ = ({
   name: 'DtToggle',
   inheritAttrs: false,
@@ -16776,6 +17356,9 @@ var togglevue_type_template_id_a424bd98_staticRenderFns = []
     event: 'change'
   },
   props: {
+    /**
+     * The id of the toggle
+     */
     id: {
       type: String,
 
@@ -16784,22 +17367,37 @@ var togglevue_type_template_id_a424bd98_staticRenderFns = []
       }
 
     },
+
+    /**
+     * Disables the toggle interactions
+     * @values true, false
+     */
     disabled: {
       type: Boolean,
       default: false
     },
 
     /**
+     * Value of the toggle
      * @model checked
+     * @values true, false
      */
     checked: {
       type: Boolean,
       default: false
     },
+
+    /**
+     * Used to customize the label container
+     */
     labelClass: {
       type: [String, Array, Object],
       default: ''
     },
+
+    /**
+     * A set of props that are passed into the label container
+     */
     labelChildProps: {
       type: Object,
       default: () => ({})
@@ -16874,8 +17472,8 @@ var togglevue_type_template_id_a424bd98_staticRenderFns = []
 ;
 var toggle_component = normalizeComponent(
   toggle_togglevue_type_script_lang_js_,
-  togglevue_type_template_id_a424bd98_render,
-  togglevue_type_template_id_a424bd98_staticRenderFns,
+  togglevue_type_template_id_8e140268_render,
+  togglevue_type_template_id_8e140268_staticRenderFns,
   false,
   null,
   null,
@@ -16886,15 +17484,15 @@ var toggle_component = normalizeComponent(
 /* harmony default export */ const toggle = (toggle_component.exports);
 ;// CONCATENATED MODULE: ./components/toggle/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/tooltip/tooltip.vue?vue&type=template&id=2ae452d6&
-var tooltipvue_type_template_id_2ae452d6_render = function () {
+;// 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/tooltip/tooltip.vue?vue&type=template&id=2cddd20a&
+var tooltipvue_type_template_id_2cddd20a_render = function () {
 var _obj;
 var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{"data-qa":"dt-tooltip-container"}},[_c('div',{ref:"anchor",attrs:{"data-qa":"dt-tooltip-anchor"},on:{"focusin":_vm.onEnterAnchor,"focusout":_vm.onLeaveAnchor,"mouseenter":_vm.onEnterAnchor,"mouseleave":_vm.onLeaveAnchor,"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }return _vm.onLeaveAnchor.apply(null, arguments)}}},[_vm._t("anchor")],2),_c('dt-lazy-show',{ref:"content",class:[
       'd-tooltip',
       ("d-tooltip__arrow-tippy--" + _vm.currentPlacement),
       ( _obj = {}, _obj[ _vm.TOOLTIP_KIND_MODIFIERS.inverted ] = _vm.inverted, _obj ),
       _vm.contentClass ],attrs:{"id":_vm.id,"show":_vm.isShown && (!!_vm.message.trim() || !!_vm.$slots.default),"role":"tooltip","aria-hidden":"false","data-qa":"dt-tooltip","appear":"","transition":_vm.transition},on:{"after-leave":_vm.onLeaveTransitionComplete,"after-enter":_vm.onEnterTransitionComplete}},[_vm._t("default",function(){return [_vm._v(" "+_vm._s(_vm.message)+" ")]})],2)],1)}
-var tooltipvue_type_template_id_2ae452d6_staticRenderFns = []
+var tooltipvue_type_template_id_2cddd20a_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./components/tooltip/tooltip_constants.js
@@ -16956,10 +17554,19 @@ const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];
 //
 //
 //
+//
+//
 
 
 
 
+/**
+ * A tooltip is a floating label that briefly explains an action, function, or an element.
+ * Its content is exclusively text and shouldn't be vital information for users.
+ * If richer media is desired, consider using a popover instead.
+ * @see https://dialpad.design/components/tooltip.html
+ */
+
 /* harmony default export */ const tooltipvue_type_script_lang_js_ = ({
   name: 'Tooltip',
   components: {
@@ -16983,6 +17590,7 @@ const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];
      * it will attempt to change it's direction to the "fallbackPlacements"
      * if defined, otherwise it will automatically position to a new location
      * as it sees best fit.
+     * See <a href="https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements" target="_blank">Popper.js docs</a>
      * */
     fallbackPlacements: {
       type: Array,
@@ -16990,7 +17598,8 @@ const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];
     },
 
     /**
-     * Add inverted class
+     * If true, applies inverted styles to the tooltip
+     * @values true, false
      */
     inverted: {
       type: Boolean,
@@ -16999,7 +17608,8 @@ const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];
 
     /**
      *  Displaces the tooltip from its reference element
-     *  by the specified number of pixels.
+     *  by the specified number of pixels. See
+     *  <a href="https://atomiks.github.io/tippyjs/v6/all-props/#offset" target="_blank">Tippy.js docs</a>
      */
     offset: {
       type: Array,
@@ -17008,6 +17618,12 @@ const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];
 
     /**
      * The direction the popover displays relative to the anchor.
+     * See <a href="https://atomiks.github.io/tippyjs/v6/all-props/#placement" target="_blank">Tippy.js docs</a>
+     * @values top, top-start, top-end,
+     * right, right-start, right-end,
+     * left, left-start, left-end,
+     * bottom, bottom-start, bottom-end,
+     * auto, auto-start, auto-end
      */
     placement: {
       type: String,
@@ -17025,6 +17641,8 @@ const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];
      * position in those cases the DOM layout changes the reference element's position.
      * `true` enables it, `reference` only checks the "reference" rect for changes and `popper` only
      * checks the "popper" rect for changes.
+     * See <a href="https://atomiks.github.io/tippyjs/v6/all-props/#sticky" target="_blank">Tippy.js docs</a>
+     * @values true, false, reference, popper
      */
     sticky: {
       type: [Boolean, String],
@@ -17056,6 +17674,7 @@ const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];
      * Controls whether the tooltip is shown. Leaving this null will have the tooltip trigger on mouseover by default.
      * If you set this value, the default mouseover behavior will be disabled and you can control it as you need.
      * Supports .sync modifier
+     * @values true, false
      */
     show: {
       type: Boolean,
@@ -17078,7 +17697,13 @@ const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];
    * @event shown
    * @type {Boolean}
    */
-  'shown', 'update:show'],
+  'shown',
+  /**
+   * Sync show value
+   *
+   * @event update:show
+   */
+  'update:show'],
 
   data() {
     return {
@@ -17259,8 +17884,8 @@ var tooltipvue_type_style_index_0_lang_less_ = __webpack_require__(213);
 
 var tooltip_component = normalizeComponent(
   tooltip_tooltipvue_type_script_lang_js_,
-  tooltipvue_type_template_id_2ae452d6_render,
-  tooltipvue_type_template_id_2ae452d6_staticRenderFns,
+  tooltipvue_type_template_id_2cddd20a_render,
+  tooltipvue_type_template_id_2cddd20a_staticRenderFns,
   false,
   null,
   null,
@@ -17272,8 +17897,8 @@ var tooltip_component = normalizeComponent(
 ;// CONCATENATED MODULE: ./components/tooltip/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/keyboard_shortcut/keyboard_shortcut.vue?vue&type=template&id=9937b106&
-var keyboard_shortcutvue_type_template_id_9937b106_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('kbd',{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/keyboard_shortcut/keyboard_shortcut.vue?vue&type=template&id=4f25b952&
+var keyboard_shortcutvue_type_template_id_4f25b952_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('kbd',{class:[
     'd-d-inline-flex',
     'd-ff-custom',
     'd-ai-center',
@@ -17282,14 +17907,14 @@ var keyboard_shortcutvue_type_template_id_9937b106_render = function () {var _vm
     'd-px4',
     'd-ba',
     'd-bar4',
-    'd-fs-100',
-    _vm.inverted ? 'd-bc-black-500' : 'd-bc-black-400' ]},[(_vm.screenReaderText)?_c('span',{staticClass:"sr-only"},[_vm._v(" "+_vm._s(_vm.screenReaderText)+" ")]):_vm._e(),_vm._l((_vm.formattedShortcutSplit),function(item,i){return [(_vm.icons[item])?_c(_vm.icons[item],{key:(i + "-" + item),tag:"component",class:[
+    'd-fs12',
+    _vm.inverted ? 'd-bc-black-400' : 'd-bc-black-100' ]},[(_vm.screenReaderText)?_c('span',{staticClass:"sr-only"},[_vm._v(" "+_vm._s(_vm.screenReaderText)+" ")]):_vm._e(),_vm._l((_vm.formattedShortcutSplit),function(item,i){return [(_vm.icons[item])?_c(_vm.icons[item],{key:(i + "-" + item),tag:"component",class:[
         'dt-keyboard-shortcut__svg',
-        _vm.inverted ? 'd-fc-black-300' : 'd-fc-black-600',
+        _vm.inverted ? 'd-fc-black-075' : 'd-fc-black-500',
         'd-mr2' ],attrs:{"aria-hidden":"true"}}):_c('span',{key:(i + "-" + item),class:[
-        _vm.inverted ? 'd-fc-black-300' : 'd-fc-black-600',
+        _vm.inverted ? 'd-fc-black-075' : 'd-fc-black-500',
         'd-mr2' ],attrs:{"aria-hidden":"true"},domProps:{"innerHTML":_vm._s(item)}})]})],2)}
-var keyboard_shortcutvue_type_template_id_9937b106_staticRenderFns = []
+var keyboard_shortcutvue_type_template_id_4f25b952_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!./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconWindows.vue?vue&type=template&id=04be6782&
@@ -17510,6 +18135,11 @@ const SHORTCUTS_ALIASES_LIST = Object.keys(SHORTCUTS_ALIASES).map(key => `{${key
 
 
 
+/**
+ * This component displays a visual representation of a keyboard shortcut to the user.
+ * @see https://dialpad.design/components/keyboard_shortcut.html
+ */
+
 /* harmony default export */ const keyboard_shortcutvue_type_script_lang_js_ = ({
   name: 'DtKeyboardShortcut',
   components: {
@@ -17521,14 +18151,27 @@ const SHORTCUTS_ALIASES_LIST = Object.keys(SHORTCUTS_ALIASES).map(key => `{${key
     IconAdd: IconAdd
   },
   props: {
+    /**
+     * If true, applies inverted styles.
+     * @values true, false
+     */
     inverted: {
       type: Boolean,
       default: false
     },
+
+    /**
+     * Include any of these tokens in your string to render the corresponding symbol:
+     * {cmd} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}
+     */
     shortcut: {
       type: String,
       required: true
     },
+
+    /**
+     * Text entered here will be read by assistive technology. If null this component will be ignored by AT.
+     */
     screenReaderText: {
       type: String,
       default: null
@@ -17591,8 +18234,8 @@ var keyboard_shortcutvue_type_style_index_0_lang_less_ = __webpack_require__(245
 
 var keyboard_shortcut_component = normalizeComponent(
   keyboard_shortcut_keyboard_shortcutvue_type_script_lang_js_,
-  keyboard_shortcutvue_type_template_id_9937b106_render,
-  keyboard_shortcutvue_type_template_id_9937b106_staticRenderFns,
+  keyboard_shortcutvue_type_template_id_4f25b952_render,
+  keyboard_shortcutvue_type_template_id_4f25b952_staticRenderFns,
   false,
   null,
   null,
@@ -17604,14 +18247,14 @@ var keyboard_shortcut_component = normalizeComponent(
 ;// CONCATENATED MODULE: ./components/keyboard_shortcut/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/root_layout/root_layout.vue?vue&type=template&id=7ea2ab50&
-var root_layoutvue_type_template_id_7ea2ab50_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"root-layout"},[(_vm.$slots.header)?_c('header',{class:['root-layout__header', _vm.headerClass, { 'root-layout__header--sticky': _vm.headerSticky }],style:({ 'height': _vm.headerHeight }),attrs:{"data-qa":"root-layout-header"}},[_vm._t("header")],2):_vm._e(),_c('dt-root-layout-body',{attrs:{"body-class":_vm.bodyClass,"content-class":_vm.contentClass,"content-wrap-width-percent":_vm.contentWrapWidthPercent,"sidebar-class":_vm.sidebarClass,"sidebar-width":_vm.sidebarWidth,"sidebar-position":_vm.sidebarPosition},scopedSlots:_vm._u([{key:"sidebar",fn:function(){return [_vm._t("sidebar")]},proxy:true},{key:"content",fn:function(){return [_vm._t("default")]},proxy:true}],null,true)}),(_vm.$slots.footer)?_c('footer',{class:['root-layout__footer', _vm.footerClass],style:({ 'height': _vm.footerHeight }),attrs:{"data-qa":"root-layout-footer"}},[_vm._t("footer")],2):_vm._e()],1)}
-var root_layoutvue_type_template_id_7ea2ab50_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/root_layout/root_layout.vue?vue&type=template&id=cb5db598&
+var root_layoutvue_type_template_id_cb5db598_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"root-layout"},[(_vm.$slots.header)?_c('header',{class:['root-layout__header', _vm.headerClass, { 'root-layout__header--sticky': _vm.headerSticky }],style:({ 'height': _vm.headerHeight }),attrs:{"data-qa":"root-layout-header"}},[_vm._t("header")],2):_vm._e(),_c('dt-root-layout-body',{attrs:{"body-class":_vm.bodyClass,"content-class":_vm.contentClass,"content-wrap-width-percent":_vm.contentWrapWidthPercent,"sidebar-class":_vm.sidebarClass,"sidebar-width":_vm.sidebarWidth,"sidebar-position":_vm.sidebarPosition},scopedSlots:_vm._u([{key:"sidebar",fn:function(){return [_vm._t("sidebar")]},proxy:true},{key:"content",fn:function(){return [_vm._t("default")]},proxy:true}],null,true)}),(_vm.$slots.footer)?_c('footer',{class:['root-layout__footer', _vm.footerClass],style:({ 'height': _vm.footerHeight }),attrs:{"data-qa":"root-layout-footer"}},[_vm._t("footer")],2):_vm._e()],1)}
+var root_layoutvue_type_template_id_cb5db598_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/root_layout/root_layout_body.vue?vue&type=template&id=6ef959c4&
-var root_layout_bodyvue_type_template_id_6ef959c4_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:['root-layout__body', _vm.bodyClasses],attrs:{"data-qa":"root-layout-body"}},[(_vm.$slots.sidebar)?_c('aside',{class:['root-layout__sidebar', _vm.sidebarClass],style:({ 'flex-basis': _vm.sidebarWidth }),attrs:{"data-qa":"root-layout-sidebar"}},[_vm._t("sidebar")],2):_vm._e(),(_vm.$slots.content)?_c('main',{class:['root-layout__content', _vm.contentClass],style:({ 'min-inline-size': _vm.contentWrapWidthPercent }),attrs:{"data-qa":"root-layout-content"}},[_vm._t("content")],2):_vm._e()])}
-var root_layout_bodyvue_type_template_id_6ef959c4_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/root_layout/root_layout_body.vue?vue&type=template&id=fa742994&
+var root_layout_bodyvue_type_template_id_fa742994_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:['root-layout__body', _vm.bodyClasses],attrs:{"data-qa":"root-layout-body"}},[(_vm.$slots.sidebar)?_c('aside',{class:['root-layout__sidebar', _vm.sidebarClass],style:({ 'flex-basis': _vm.sidebarWidth }),attrs:{"data-qa":"root-layout-sidebar"}},[_vm._t("sidebar")],2):_vm._e(),(_vm.$slots.content)?_c('main',{class:['root-layout__content', _vm.contentClass],style:({ 'min-inline-size': _vm.contentWrapWidthPercent }),attrs:{"data-qa":"root-layout-content"}},[_vm._t("content")],2):_vm._e()])}
+var root_layout_bodyvue_type_template_id_fa742994_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./components/root_layout/root_layout_constants.js
@@ -17647,6 +18290,8 @@ const ROOT_LAYOUT_SIDEBAR_POSITIONS = {
 //
 //
 //
+//
+//
 
 /* harmony default export */ const root_layout_bodyvue_type_script_lang_js_ = ({
   name: 'DtRootLayoutBody',
@@ -17730,8 +18375,8 @@ var root_layout_bodyvue_type_style_index_0_lang_less_ = __webpack_require__(125)
 
 var root_layout_body_component = normalizeComponent(
   root_layout_root_layout_bodyvue_type_script_lang_js_,
-  root_layout_bodyvue_type_template_id_6ef959c4_render,
-  root_layout_bodyvue_type_template_id_6ef959c4_staticRenderFns,
+  root_layout_bodyvue_type_template_id_fa742994_render,
+  root_layout_bodyvue_type_template_id_fa742994_staticRenderFns,
   false,
   null,
   null,
@@ -17777,7 +18422,15 @@ var root_layout_body_component = normalizeComponent(
 //
 //
 //
+//
+//
+//
+//
+
 
+/**
+ * A root layout provides a standardized group of containers to display content at the root level.
+ */
 
 /* harmony default export */ const root_layoutvue_type_script_lang_js_ = ({
   name: 'DtRootLayout',
@@ -17812,6 +18465,7 @@ var root_layout_body_component = normalizeComponent(
 
     /**
      * Scroll the header with the page
+     * @values true, false
      */
     headerSticky: {
       type: Boolean,
@@ -17857,6 +18511,7 @@ var root_layout_body_component = normalizeComponent(
     /**
      * Whether the sidebar is on the left or right side
      * Possible options: 'left', 'right'
+     * @values left, right
      */
     sidebarPosition: {
       type: String,
@@ -17899,8 +18554,8 @@ var root_layoutvue_type_style_index_0_lang_less_ = __webpack_require__(426);
 
 var root_layout_component = normalizeComponent(
   root_layout_root_layoutvue_type_script_lang_js_,
-  root_layoutvue_type_template_id_7ea2ab50_render,
-  root_layoutvue_type_template_id_7ea2ab50_staticRenderFns,
+  root_layoutvue_type_template_id_cb5db598_render,
+  root_layoutvue_type_template_id_cb5db598_staticRenderFns,
   false,
   null,
   null,
@@ -17912,15 +18567,15 @@ var root_layout_component = normalizeComponent(
 ;// CONCATENATED MODULE: ./components/root_layout/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!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=7fd50634&
-var combobox_with_popovervue_type_template_id_7fd50634_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-combobox',_vm._g({ref:"combobox",attrs:{"loading":_vm.loading,"empty-list":_vm.emptyList,"empty-state-message":_vm.emptyStateMessage,"show-list":_vm.isListShown,"on-beginning-of-list":_vm.onBeginningOfList,"on-end-of-list":_vm.onEndOfList,"list-aria-label":_vm.listAriaLabel,"list-rendered-outside":true,"list-id":_vm.listId,"data-qa":"dt-combobox"},scopedSlots:_vm._u([{key:"input",fn:function(ref){
+;// 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!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=27a3126a&
+var combobox_with_popovervue_type_template_id_27a3126a_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-combobox',_vm._g({ref:"combobox",attrs:{"loading":_vm.loading,"empty-list":_vm.emptyList,"empty-state-message":_vm.emptyStateMessage,"show-list":_vm.isListShown,"on-beginning-of-list":_vm.onBeginningOfList,"on-end-of-list":_vm.onEndOfList,"list-aria-label":_vm.listAriaLabel,"list-rendered-outside":true,"list-id":_vm.listId,"data-qa":"dt-combobox"},scopedSlots:_vm._u([{key:"input",fn:function(ref){
 var inputProps = ref.inputProps;
 return [_c('div',{ref:"input",attrs:{"id":_vm.externalAnchor},on:{"focusin":_vm.onFocusIn,"focusout":_vm.onFocusOut,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }return _vm.openOnArrowKeyPress($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }return _vm.openOnArrowKeyPress($event)}]}},[_vm._t("input",null,{"inputProps":inputProps,"onInput":_vm.handleDisplayList})],2)]}},{key:"list",fn:function(ref){
 var opened = ref.opened;
 var listProps = ref.listProps;
 var clearHighlightIndex = ref.clearHighlightIndex;
 return [_c('dt-popover',{ref:"popover",attrs:{"open":_vm.isListShown,"hide-on-click":_vm.showList === null,"max-height":_vm.maxHeight,"max-width":_vm.maxWidth,"offset":_vm.popoverOffset,"sticky":_vm.popoverSticky,"placement":"bottom-start","padding":"none","role":"listbox","external-anchor":_vm.externalAnchor,"content-width":_vm.contentWidth,"content-tabindex":null,"modal":_vm.modal,"auto-focus":false},on:{"update:open":function($event){_vm.isListShown=$event},"opened":function($event){return opened($event, arguments[1]);}},scopedSlots:_vm._u([{key:"headerContent",fn:function(){return [(_vm.$slots.header)?_c('div',{ref:"header",on:{"focusout":_vm.onFocusOut}},[_vm._t("header")],2):_vm._e()]},proxy:true},{key:"content",fn:function(){return [_c('div',{ref:"listWrapper",class:[_vm.DROPDOWN_PADDING_CLASSES[_vm.padding], _vm.listClass],on:{"mouseleave":clearHighlightIndex,"focusout":function($event){clearHighlightIndex; _vm.onFocusOut;}}},[(_vm.loading)?_c('combobox-loading-list',_vm._b({},'combobox-loading-list',listProps,false)):(_vm.emptyList && _vm.emptyStateMessage)?_c('combobox-empty-list',_vm._b({attrs:{"message":_vm.emptyStateMessage}},'combobox-empty-list',listProps,false)):_vm._t("list",null,{"listProps":listProps})],2)]},proxy:true},{key:"footerContent",fn:function(){return [(_vm.$slots.footer)?_c('div',{ref:"footer",on:{"focusout":_vm.onFocusOut}},[_vm._t("footer")],2):_vm._e()]},proxy:true}],null,true)})]}}],null,true)},_vm.comboboxListeners))}
-var combobox_with_popovervue_type_template_id_7fd50634_staticRenderFns = []
+var combobox_with_popovervue_type_template_id_27a3126a_staticRenderFns = []
 
 
 ;// 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!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=script&lang=js&
@@ -18202,7 +18857,34 @@ var combobox_with_popovervue_type_template_id_7fd50634_staticRenderFns = []
       default: ''
     }
   },
-  emits: ['select', 'escape', 'highlight', 'opened'],
+  emits: [
+  /**
+   * Event fired when item selected
+   *
+   * @event select
+   * @type {Number}
+   */
+  'select',
+  /**
+   * Event fired when 'escape' key is pressed
+   *
+   * @event escape
+   */
+  'escape',
+  /**
+   * Event fired when an item is highlighted
+   *
+   * @event highlight
+   * @type {Number}
+   */
+  'highlight',
+  /**
+   * Emitted when items are shown or hidden
+   *
+   * @event opened
+   * @type {Boolean | Array}
+   */
+  'opened'],
 
   data() {
     return {
@@ -18335,8 +19017,8 @@ var combobox_with_popovervue_type_template_id_7fd50634_staticRenderFns = []
 ;
 var combobox_with_popover_component = normalizeComponent(
   combobox_with_popover_combobox_with_popovervue_type_script_lang_js_,
-  combobox_with_popovervue_type_template_id_7fd50634_render,
-  combobox_with_popovervue_type_template_id_7fd50634_staticRenderFns,
+  combobox_with_popovervue_type_template_id_27a3126a_render,
+  combobox_with_popovervue_type_template_id_27a3126a_staticRenderFns,
   false,
   null,
   null,
@@ -18347,11 +19029,11 @@ var combobox_with_popover_component = normalizeComponent(
 /* harmony default export */ const combobox_with_popover = (combobox_with_popover_component.exports);
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_with_popover/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!./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=template&id=23bc5ad2&
-var combobox_multi_selectvue_type_template_id_23bc5ad2_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-recipe-combobox-with-popover',{ref:"comboboxWithPopover",attrs:{"list-aria-label":"listAriaLabel","show-list":_vm.showList,"max-height":_vm.listMaxHeight,"popover-offset":_vm.popoverOffset,"has-suggestion-list":_vm.hasSuggestionList,"content-width":"anchor"},on:{"select":_vm.onComboboxSelect},scopedSlots:_vm._u([{key:"input",fn:function(ref){
+;// 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!./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=template&id=6305bf12&
+var combobox_multi_selectvue_type_template_id_6305bf12_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-recipe-combobox-with-popover',{ref:"comboboxWithPopover",attrs:{"list-aria-label":"listAriaLabel","show-list":_vm.showList,"max-height":_vm.listMaxHeight,"popover-offset":_vm.popoverOffset,"has-suggestion-list":_vm.hasSuggestionList,"content-width":"anchor"},on:{"select":_vm.onComboboxSelect},scopedSlots:_vm._u([{key:"input",fn:function(ref){
 var onInput = ref.onInput;
 return [_c('span',{ref:"inputSlotWrapper",staticClass:"d-ps-relative"},[_c('span',{ref:"chipsWrapper",staticClass:"d-ps-absolute d-mx2"},_vm._l((_vm.selectedItems),function(item){return _c('dt-chip',_vm._g({key:item.id,ref:"chips",refInFor:true,staticClass:"d-mt4 d-mx2 d-zi-base1",attrs:{"close-button-props":{ ariaLabel: 'close' },"size":_vm.size},on:{"keyup":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"backspace",undefined,$event.key,undefined)){ return null; }return _vm.onChipRemove(item)},"close":function($event){return _vm.onChipRemove(item)}}},_vm.chipListeners),[_vm._v(" "+_vm._s(item)+" ")])}),1),_c('dt-input',_vm._g({ref:"input",staticClass:"d-fl-grow1 d-mb4",attrs:{"label":_vm.label,"description":_vm.description,"placeholder":_vm.inputPlaceHolder,"show-messages":_vm.showInputMessages,"messages":_vm.inputMessages,"size":_vm.size},on:{"input":onInput},model:{value:(_vm.value),callback:function ($$v) {_vm.value=$$v},expression:"value"}},_vm.inputListeners)),_c('dt-validation-messages',{attrs:{"validation-messages":_vm.maxSelectedMessage,"show-messages":_vm.showValidationMessages}})],1)]}},{key:"header",fn:function(){return [(_vm.$slots.header)?_c('div',{ref:"header"},[_vm._t("header")],2):_vm._e()]},proxy:true},{key:"list",fn:function(){return [_c('div',{ref:"list",on:{"mousedown":function($event){$event.preventDefault();}}},[(!_vm.loading)?_vm._t("list"):_c('div',{staticClass:"d-ta-center d-py16"},[_vm._v(" "+_vm._s(_vm.loadingMessage)+" ")])],2)]},proxy:true},{key:"footer",fn:function(){return [(_vm.$slots.footer)?_c('div',{ref:"footer"},[_vm._t("footer")],2):_vm._e()]},proxy:true}],null,true)})}
-var combobox_multi_selectvue_type_template_id_23bc5ad2_staticRenderFns = []
+var combobox_multi_selectvue_type_template_id_6305bf12_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/combobox_multi_select_story_constants.js
@@ -18700,7 +19382,35 @@ const MULTI_SELECT_SIZES = {
       validator: t => Object.values(MULTI_SELECT_SIZES).includes(t)
     }
   },
-  emits: ['input', 'select', 'remove', 'max-selected'],
+  emits: [
+  /**
+   * Native input event
+   *
+   * @event input
+   * @type {String }
+   */
+  'input',
+  /**
+   * Event fired when item selected
+   *
+   * @event select
+   * @type {Number}
+   */
+  'select',
+  /**
+   * Event fired when item removed
+   *
+   * @event remove
+   * @type {String}
+   */
+  'remove',
+  /**
+   * Event fired when max selected items limit is reached
+   *
+   * @event max-selected
+   * @type {Object}
+   */
+  'max-selected'],
 
   data() {
     return {
@@ -18991,8 +19701,8 @@ const MULTI_SELECT_SIZES = {
 ;
 var combobox_multi_select_component = normalizeComponent(
   combobox_multi_select_combobox_multi_selectvue_type_script_lang_js_,
-  combobox_multi_selectvue_type_template_id_23bc5ad2_render,
-  combobox_multi_selectvue_type_template_id_23bc5ad2_staticRenderFns,
+  combobox_multi_selectvue_type_template_id_6305bf12_render,
+  combobox_multi_selectvue_type_template_id_6305bf12_staticRenderFns,
   false,
   null,
   null,
@@ -19004,9 +19714,9 @@ var combobox_multi_select_component = normalizeComponent(
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/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!./recipes/buttons/callbar_button/callbar_button.vue?vue&type=template&id=0421e5c4&
-var callbar_buttonvue_type_template_id_0421e5c4_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-tooltip',{attrs:{"id":_vm.id,"offset":[0, -12]},scopedSlots:_vm._u([{key:"anchor",fn:function(){return [_c('dt-button',_vm._g({class:_vm.callbarButtonClass,attrs:{"importance":_vm.circle ? 'outlined' : 'clear',"kind":"muted","icon-position":"top","disabled":_vm.disabled,"aria-label":_vm.ariaLabel,"label-class":"d-fs11"}},_vm.$listeners),[_vm._t("default"),_vm._t("icon",null,{"slot":"icon"})],2)]},proxy:true}],null,true)},[_vm._t("tooltip")],2)}
-var callbar_buttonvue_type_template_id_0421e5c4_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!./recipes/buttons/callbar_button/callbar_button.vue?vue&type=template&id=1cc96f5c&
+var callbar_buttonvue_type_template_id_1cc96f5c_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-tooltip',{attrs:{"id":_vm.id,"offset":[0, -12]},scopedSlots:_vm._u([{key:"anchor",fn:function(){return [_c('dt-button',_vm._g({class:_vm.callbarButtonClass,attrs:{"importance":_vm.circle ? 'outlined' : 'clear',"kind":"muted","icon-position":"top","disabled":_vm.disabled,"aria-label":_vm.ariaLabel,"label-class":"d-fs11","width":"8.4rem"}},_vm.$listeners),[_vm._t("default"),_vm._t("icon",null,{"slot":"icon"})],2)]},proxy:true}],null,true)},[_vm._t("tooltip")],2)}
+var callbar_buttonvue_type_template_id_1cc96f5c_staticRenderFns = []
 
 
 ;// 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!./recipes/buttons/callbar_button/callbar_button.vue?vue&type=script&lang=js&
@@ -19037,6 +19747,7 @@ var callbar_buttonvue_type_template_id_0421e5c4_staticRenderFns = []
 //
 //
 //
+//
 
 
 
@@ -19111,12 +19822,27 @@ var callbar_buttonvue_type_template_id_0421e5c4_staticRenderFns = []
       validator: label => {
         return label || undefined.$slots.default;
       }
+    },
+
+    /**
+     * Additional class name for the button wrapper element.
+     */
+    buttonClass: {
+      type: [String, Array, Object],
+      default: ''
     }
   },
-  emits: ['click'],
+  emits: [
+  /**
+   * Native click event
+   *
+   * @event click
+   * @type {PointerEvent | KeyboardEvent}
+   */
+  'click'],
   computed: {
     callbarButtonClass() {
-      return ['dt-recipe-callbar-button', 'd-stack4', {
+      return [this.buttonClass, 'dt-recipe-callbar-button', 'd-stack4', {
         'dt-recipe-callbar-button--circle': this.circle,
         'dt-recipe-callbar-button--active': this.active,
         'dt-recipe-callbar-button--danger': this.danger
@@ -19142,8 +19868,8 @@ var callbar_buttonvue_type_style_index_0_lang_less_ = __webpack_require__(759);
 
 var callbar_button_component = normalizeComponent(
   callbar_button_callbar_buttonvue_type_script_lang_js_,
-  callbar_buttonvue_type_template_id_0421e5c4_render,
-  callbar_buttonvue_type_template_id_0421e5c4_staticRenderFns,
+  callbar_buttonvue_type_template_id_1cc96f5c_render,
+  callbar_buttonvue_type_template_id_1cc96f5c_staticRenderFns,
   false,
   null,
   null,
@@ -19154,9 +19880,9 @@ var callbar_button_component = normalizeComponent(
 /* harmony default export */ const callbar_button = (callbar_button_component.exports);
 ;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/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!./recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue?vue&type=template&id=1085bb4c&
-var callbar_button_with_popovervue_type_template_id_1085bb4c_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"dt-recipe--callbar-button-with-popover--button"},[_c('dt-recipe-callbar-button',{staticClass:"dt-recipe--callbar-button-with-popover--main-button",attrs:{"aria-label":_vm.ariaLabel,"disabled":_vm.disabled,"active":_vm.active,"danger":_vm.danger},on:{"click":_vm.buttonClick}},[_vm._t("icon",null,{"slot":"icon"}),_vm._t("tooltip",null,{"slot":"tooltip"}),_vm._t("default")],2),(_vm.showArrowButton)?_c('dt-popover',_vm._b({staticClass:"dt-recipe--callbar-button-with-popover--popover-wrapper",attrs:{"id":_vm.id,"open":_vm.open,"placement":_vm.placement,"initial-focus-element":_vm.initialFocusElement,"show-close-button":_vm.showCloseButton,"padding":"none","dialog-class":"d-h464 d-w512 dt-recipe--callbar-button-with-popover--popover","header-class":"d-d-flex d-ai-center d-fw-normal d-px12"},on:{"opened":_vm.onModalIsOpened},scopedSlots:_vm._u([{key:"anchor",fn:function(){return [_c('dt-button',{staticClass:"dt-recipe--callbar-button-with-popover--arrow",attrs:{"circle":"","importance":"clear","size":"lg","aria-label":_vm.arrowButtonLabel,"active":_vm.open},on:{"click":_vm.arrowClick},scopedSlots:_vm._u([{key:"icon",fn:function(){return [_c('icon-arrow-drop-up',{staticClass:"d-svg--size-16"})]},proxy:true}],null,false,2876394386)})]},proxy:true}],null,false,4054443748)},'dt-popover',_vm.$attrs,false),[_vm._t("content",null,{"slot":"content"}),_vm._t("headerContent",null,{"slot":"headerContent"}),_vm._t("footerContent",null,{"slot":"footerContent"})],2):_vm._e()],1)}
-var callbar_button_with_popovervue_type_template_id_1085bb4c_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!./recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue?vue&type=template&id=4848a4c1&
+var callbar_button_with_popovervue_type_template_id_4848a4c1_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"dt-recipe--callbar-button-with-popover--button"},[_c('dt-recipe-callbar-button',{staticClass:"dt-recipe--callbar-button-with-popover--main-button",attrs:{"aria-label":_vm.ariaLabel,"disabled":_vm.disabled,"active":_vm.active,"danger":_vm.danger,"button-class":_vm.buttonClass},on:{"click":_vm.buttonClick}},[_vm._t("icon",null,{"slot":"icon"}),_vm._t("tooltip",null,{"slot":"tooltip"}),_vm._t("default")],2),(_vm.showArrowButton)?_c('dt-popover',_vm._b({staticClass:"dt-recipe--callbar-button-with-popover--popover-wrapper",attrs:{"id":_vm.id,"open":_vm.open,"placement":_vm.placement,"initial-focus-element":_vm.initialFocusElement,"show-close-button":_vm.showCloseButton,"padding":"none","dialog-class":"d-h464 d-w512 dt-recipe--callbar-button-with-popover--popover","header-class":"d-d-flex d-ai-center d-fw-normal d-px12"},on:{"opened":_vm.onModalIsOpened},scopedSlots:_vm._u([{key:"anchor",fn:function(){return [_c('dt-button',{staticClass:"dt-recipe--callbar-button-with-popover--arrow",attrs:{"circle":"","importance":"clear","size":"lg","width":"2rem","aria-label":_vm.arrowButtonLabel,"active":_vm.open},on:{"click":_vm.arrowClick},scopedSlots:_vm._u([{key:"icon",fn:function(){return [_c('icon-arrow-drop-up',{staticClass:"d-svg--size-16"})]},proxy:true}],null,false,2876394386)})]},proxy:true}],null,false,685243388)},'dt-popover',_vm.$attrs,false),[_vm._t("content",null,{"slot":"content"}),_vm._t("headerContent",null,{"slot":"headerContent"}),_vm._t("footerContent",null,{"slot":"footerContent"})],2):_vm._e()],1)}
+var callbar_button_with_popovervue_type_template_id_4848a4c1_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!./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconArrowDropUp.vue?vue&type=template&id=65ee6042&
@@ -19251,6 +19977,8 @@ var IconArrowDropUp_component = normalizeComponent(
 //
 //
 //
+//
+//
 
 
 
@@ -19378,13 +20106,28 @@ var IconArrowDropUp_component = normalizeComponent(
     danger: {
       type: Boolean,
       default: false
+    },
+
+    /**
+     * Additional class name for the button wrapper element.
+     */
+    buttonClass: {
+      type: [String, Array, Object],
+      default: ''
     }
   },
   emits: [
   /**
    * Emitted when the arrow is clicked
    */
-  'arrowClick', 'click'],
+  'arrowClick',
+  /**
+   * Native click event
+   *
+   * @event click
+   * @type {PointerEvent | KeyboardEvent}
+   */
+  'click'],
 
   data() {
     return {
@@ -19437,8 +20180,8 @@ var callbar_button_with_popovervue_type_style_index_0_lang_less_ = __webpack_req
 
 var callbar_button_with_popover_component = normalizeComponent(
   callbar_button_with_popover_callbar_button_with_popovervue_type_script_lang_js_,
-  callbar_button_with_popovervue_type_template_id_1085bb4c_render,
-  callbar_button_with_popovervue_type_template_id_1085bb4c_staticRenderFns,
+  callbar_button_with_popovervue_type_template_id_4848a4c1_render,
+  callbar_button_with_popovervue_type_template_id_4848a4c1_staticRenderFns,
   false,
   null,
   null,
@@ -19467,9 +20210,9 @@ var contact_infovue_type_template_id_466e560c_staticRenderFns = []
 ;// CONCATENATED MODULE: ./recipes/list_items/contact_info/contact_info_constants.js
 const USER_STATUS_COLOR_MODIFIERS = {
   none: '',
-  green: 'd-bgc-green-300',
-  gold: 'd-bgc-gold-200',
-  red: 'd-bgc-red-200'
+  green: 'd-bgc-green-400',
+  yellow: 'd-bgc-yellow-400',
+  red: 'd-bgc-red-400'
 };
 /* harmony default export */ const contact_info_constants = ({
   USER_STATUS_COLOR_MODIFIERS
@@ -19666,13 +20409,13 @@ var contact_info_component = normalizeComponent(
 ;// CONCATENATED MODULE: ./recipes/list_items/contact_info/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!./recipes/notices/top_banner_info/top_banner_info.vue?vue&type=template&id=1996f46e&
-var top_banner_infovue_type_template_id_1996f46e_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"d-fs-100 d-d-flex d-top-banner-info d-jc-space-between d-ai-center",class:_vm.bannerInfoClass,attrs:{"data-qa":"banner-info"}},[_c('div',{staticClass:"d-top-banner-info__left"},[_vm._t("left")],2),_c('div',{staticClass:"d-top-banner-info__middle d-my4"},[_vm._t("default")],2),_c('div',{staticClass:"d-top-banner-info__right d-ta-right"},[_vm._t("right")],2)])}
-var top_banner_infovue_type_template_id_1996f46e_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!./recipes/notices/top_banner_info/top_banner_info.vue?vue&type=template&id=d3832134&
+var top_banner_infovue_type_template_id_d3832134_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"d-fs11 d-d-flex d-top-banner-info d-jc-space-between d-ai-center",class:_vm.bannerInfoClass,attrs:{"data-qa":"banner-info"}},[_c('div',{staticClass:"d-top-banner-info__left"},[_vm._t("left")],2),_c('div',{staticClass:"d-top-banner-info__middle d-my4"},[_vm._t("default")],2),_c('div',{staticClass:"d-top-banner-info__right d-ta-right"},[_vm._t("right")],2)])}
+var top_banner_infovue_type_template_id_d3832134_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./recipes/notices/top_banner_info/top_banner_info_constants.js
-const COLOR_CODES = ['green300', 'green100', 'red200', 'red100', 'gold100', 'gold200', 'black100', 'white'];
+const COLOR_CODES = ['green400', 'green200', 'red200', 'red100', 'yellow200', 'yellow400', 'yellow050', 'black100', 'white'];
 /* harmony default export */ const top_banner_info_constants = ({
   COLOR_CODES
 });
@@ -19706,7 +20449,7 @@ const COLOR_CODES = ['green300', 'green100', 'red200', 'red100', 'gold100', 'gol
      */
     colorCode: {
       type: String,
-      default: 'green300',
+      default: 'green400',
       validator: function (kind) {
         return COLOR_CODES.includes(kind);
       }
@@ -19715,13 +20458,13 @@ const COLOR_CODES = ['green300', 'green100', 'red200', 'red100', 'gold100', 'gol
   computed: {
     bannerInfoClass() {
       const bgColors = {
-        green300: 'd-bgc-green-300',
-        green100: 'd-bgc-green-100',
+        green400: 'd-bgc-green-400',
+        green200: 'd-bgc-green-200',
         red200: 'd-bgc-red-200',
         red100: 'd-bgc-red-100',
-        gold200: 'd-bgc-gold-200',
-        gold100: 'd-bgc-gold-100',
-        black100: 'd-bgc-black-400',
+        yellow400: 'd-bgc-yellow-400',
+        yellow200: 'd-bgc-yellow-200',
+        black100: 'd-bgc-black-100',
         white: 'd-bgc-white'
       };
       return [bgColors[this.colorCode]];
@@ -19746,8 +20489,8 @@ var top_banner_infovue_type_style_index_0_lang_less_ = __webpack_require__(9);
 
 var top_banner_info_component = normalizeComponent(
   top_banner_info_top_banner_infovue_type_script_lang_js_,
-  top_banner_infovue_type_template_id_1996f46e_render,
-  top_banner_infovue_type_template_id_1996f46e_staticRenderFns,
+  top_banner_infovue_type_template_id_d3832134_render,
+  top_banner_infovue_type_template_id_d3832134_staticRenderFns,
   false,
   null,
   null,