@dialpad/dialtone-vue 3.23.1 → 3.25.0

package/dist/dialtone-vue.common.js

@@ -25,7 +25,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".enter-active,.leave-active{overflow:h
 
 /***/ }),
 
-/***/ 280:
+/***/ 869:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -42,14 +42,14 @@ __webpack_require__.r(__webpack_exports__);
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, ".d-context-menu-list{width:24rem}", ""]);
+___CSS_LOADER_EXPORT___.push([module.id, ".dt-empty-list-item{display:flex;align-items:center;justify-content:center;font-size:var(--fs-200);line-height:var(--lh4);padding:var(--su4) var(--su12)}", ""]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
 
 /***/ }),
 
-/***/ 640:
+/***/ 280:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -66,14 +66,14 @@ __webpack_require__.r(__webpack_exports__);
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, ".dt-list-separator{height:1px;list-style:none}", ""]);
+___CSS_LOADER_EXPORT___.push([module.id, ".d-context-menu-list{width:24rem}", ""]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
 
 /***/ }),
 
-/***/ 221:
+/***/ 640:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -90,14 +90,14 @@ __webpack_require__.r(__webpack_exports__);
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, ".dt-keyboard-shortcut__svg{width:1em;height:1em}.dt-keyboard-shortcut__svg path{fill:currentColor}", ""]);
+___CSS_LOADER_EXPORT___.push([module.id, ".dt-list-separator{height:1px;list-style:none}", ""]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
 
 /***/ }),
 
-/***/ 174:
+/***/ 776:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -289,7 +289,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".tippy-box[data-popper-escaped] .d-too
 
 /***/ }),
 
-/***/ 844:
+/***/ 647:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -306,14 +306,14 @@ __webpack_require__.r(__webpack_exports__);
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_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){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)}.dt-recipe-callbar-button--circle.d-btn--icon-only .d-btn__label{display:none}", ""]);
+___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[disabled]{background-color:unset}.dt-recipe-callbar-button--circle.d-btn[disabled]{border-color:unset}.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)}.dt-recipe-callbar-button--circle.d-btn--icon-only .d-btn__label{display:none}.dt-recipe-callbar-button--active .base-button__icon,.dt-recipe-callbar-button--active:hover .base-button__icon{color:var(--primary-color)}", ""]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
 
 /***/ }),
 
-/***/ 245:
+/***/ 297:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -337,7 +337,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".dt-recipe--callbar-button-with-popove
 
 /***/ }),
 
-/***/ 975:
+/***/ 574:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -542,67 +542,67 @@ var update = add("79334d9e", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
-/***/ 8:
+/***/ 704:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(280);
+var content = __webpack_require__(869);
 if(content.__esModule) content = content.default;
 if(typeof content === 'string') content = [[module.id, content, '']];
 if(content.locals) module.exports = content.locals;
 // add the styles to the DOM
 var add = (__webpack_require__(402)/* ["default"] */ .Z)
-var update = add("7cc44206", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("5ed8c6c8", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
-/***/ 412:
+/***/ 8:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(640);
+var content = __webpack_require__(280);
 if(content.__esModule) content = content.default;
 if(typeof content === 'string') content = [[module.id, content, '']];
 if(content.locals) module.exports = content.locals;
 // add the styles to the DOM
 var add = (__webpack_require__(402)/* ["default"] */ .Z)
-var update = add("1c8d62da", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("7cc44206", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
-/***/ 777:
+/***/ 412:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(221);
+var content = __webpack_require__(640);
 if(content.__esModule) content = content.default;
 if(typeof content === 'string') content = [[module.id, content, '']];
 if(content.locals) module.exports = content.locals;
 // add the styles to the DOM
 var add = (__webpack_require__(402)/* ["default"] */ .Z)
-var update = add("3637e1f2", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("1c8d62da", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
-/***/ 902:
+/***/ 944:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(174);
+var content = __webpack_require__(776);
 if(content.__esModule) content = content.default;
 if(typeof content === 'string') content = [[module.id, content, '']];
 if(content.locals) module.exports = content.locals;
 // add the styles to the DOM
 var add = (__webpack_require__(402)/* ["default"] */ .Z)
-var update = add("03c5ee60", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("3c88a9f9", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
@@ -718,51 +718,51 @@ var update = add("da834e14", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
-/***/ 476:
+/***/ 980:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(844);
+var content = __webpack_require__(647);
 if(content.__esModule) content = content.default;
 if(typeof content === 'string') content = [[module.id, content, '']];
 if(content.locals) module.exports = content.locals;
 // add the styles to the DOM
 var add = (__webpack_require__(402)/* ["default"] */ .Z)
-var update = add("15451cd3", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("4994410c", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
-/***/ 517:
+/***/ 909:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(245);
+var content = __webpack_require__(297);
 if(content.__esModule) content = content.default;
 if(typeof content === 'string') content = [[module.id, content, '']];
 if(content.locals) module.exports = content.locals;
 // add the styles to the DOM
 var add = (__webpack_require__(402)/* ["default"] */ .Z)
-var update = add("466e4f45", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("1d7a8b7e", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
-/***/ 16:
+/***/ 723:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(975);
+var content = __webpack_require__(574);
 if(content.__esModule) content = content.default;
 if(typeof content === 'string') content = [[module.id, content, '']];
 if(content.locals) module.exports = content.locals;
 // add the styles to the DOM
 var add = (__webpack_require__(402)/* ["default"] */ .Z)
-var update = add("6ed6db11", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("1d8a80c5", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
@@ -1199,6 +1199,7 @@ __webpack_require__.d(__webpack_exports__, {
   "DtToggle": () => (/* reexport */ toggle),
   "DtTooltip": () => (/* reexport */ tooltip),
   "DtValidationMessages": () => (/* reexport */ validation_messages),
+  "ICON_SIZE_MODIFIERS": () => (/* reexport */ ICON_SIZE_MODIFIERS),
   "INPUT_SIZES": () => (/* reexport */ INPUT_SIZES),
   "INPUT_TYPES": () => (/* reexport */ INPUT_TYPES),
   "IVR_NODE_BRANCH": () => (/* reexport */ IVR_NODE_BRANCH),
@@ -1225,7 +1226,6 @@ __webpack_require__.d(__webpack_exports__, {
   "ROOT_LAYOUT_SIDEBAR_POSITIONS": () => (/* reexport */ ROOT_LAYOUT_SIDEBAR_POSITIONS),
   "SELECT_SIZE_MODIFIERS": () => (/* reexport */ SELECT_SIZE_MODIFIERS),
   "SELECT_STATE_MODIFIERS": () => (/* reexport */ SELECT_STATE_MODIFIERS),
-  "SHORTCUTS_ALIASES": () => (/* reexport */ SHORTCUTS_ALIASES),
   "SHORTCUTS_ALIASES_LIST": () => (/* reexport */ SHORTCUTS_ALIASES_LIST),
   "SHORTCUTS_ICON_ALIASES": () => (/* reexport */ SHORTCUTS_ICON_ALIASES),
   "SHORTCUTS_ICON_SEPARATOR": () => (/* reexport */ SHORTCUTS_ICON_SEPARATOR),
@@ -1271,53 +1271,26 @@ if (typeof window !== 'undefined') {
 
 ;// CONCATENATED MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
 const external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject = require("vue");
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/avatar/avatar.vue?vue&type=template&id=1d4433a8
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/avatar/avatar.vue?vue&type=template&id=36adc278
 
 const _hoisted_1 = ["id"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_presence = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-presence");
+
   return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
     id: $props.id,
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-avatar', $data.AVATAR_KIND_MODIFIERS[$data.kind], $data.AVATAR_SIZE_MODIFIERS[$props.size], $data.AVATAR_COLOR_MODIFIERS[$props.color], $props.avatarClass]),
     "data-qa": "dt-avatar"
-  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1);
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default"), $props.presence ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_presence, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+    key: 0,
+    presence: $props.presence,
+    class: ['d-avatar__presence', $data.AVATAR_PRESENCE_SIZE_MODIFIERS[$props.size]]
+  }, $props.presenceProps, {
+    "data-qa": "dt-presence"
+  }), null, 16, ["presence", "class"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 10, _hoisted_1);
 }
-;// CONCATENATED MODULE: ./components/avatar/avatar.vue?vue&type=template&id=1d4433a8
+;// CONCATENATED MODULE: ./components/avatar/avatar.vue?vue&type=template&id=36adc278
 
-;// CONCATENATED MODULE: ./components/avatar/avatar_constants.js
-const AVATAR_KIND_MODIFIERS = {
-  default: '',
-  icon: 'd-avatar--icon',
-  initials: 'd-avatar--initials'
-};
-const AVATAR_SIZE_MODIFIERS = {
-  sm: 'd-avatar--sm',
-  md: 'd-avatar--md',
-  lg: 'd-avatar--lg'
-};
-const AVATAR_COLOR_MODIFIERS = {
-  base: '',
-  'orange-200': 'd-avatar--orange-200',
-  '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',
-  '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'
-};
-/* harmony default export */ const avatar_constants = ({
-  AVATAR_KIND_MODIFIERS,
-  AVATAR_SIZE_MODIFIERS,
-  AVATAR_COLOR_MODIFIERS
-});
 ;// CONCATENATED MODULE: ./common/constants.js
 /* TODO: Move and sort these in a constants directory
 
@@ -1506,10 +1479,138 @@ const pascalCaseToKebabCase = string => {
   flushPromises,
   kebabCaseToPascalCase
 });
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/presence/presence.vue?vue&type=template&id=85037b42
+
+const presencevue_type_template_id_85037b42_hoisted_1 = ["aria-live"];
+const _hoisted_2 = {
+  key: 0,
+  "data-qa": "dt-presence-sr-text",
+  class: "sr-only"
+};
+function presencevue_type_template_id_85037b42_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
+    class: "d-presence",
+    "data-qa": "dt-presence",
+    role: "status",
+    "aria-live": _ctx.$attrs.ariaLive || 'off'
+  }, [$props.srText ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", _hoisted_2, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.srText), 1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(["d-presence__inner", {
+      'd-presence__inner--active': $props.presence === 'active',
+      'd-presence__inner--away': $props.presence === 'away',
+      'd-presence__inner--busy': $props.presence === 'busy',
+      'd-presence__inner--offline': $props.presence === 'offline'
+    }])
+  }, null, 2)], 8, presencevue_type_template_id_85037b42_hoisted_1);
+}
+;// CONCATENATED MODULE: ./components/presence/presence.vue?vue&type=template&id=85037b42
+
+;// CONCATENATED MODULE: ./components/presence/presence_constants.js
+const PRESENCE_STATES = {
+  BUSY: 'busy',
+  AWAY: 'away',
+  OFFLINE: 'offline',
+  ACTIVE: 'active'
+};
+const PRESENCE_STATES_LIST = [PRESENCE_STATES.BUSY, PRESENCE_STATES.AWAY, PRESENCE_STATES.OFFLINE, PRESENCE_STATES.ACTIVE];
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/presence/presence.vue?vue&type=script&lang=js
+
+/**
+ * Presence is a user status visual indicator element.
+ * @see https://dialpad.design/components/presence.html
+ */
+
+/* harmony default export */ const presencevue_type_script_lang_js = ({
+  name: 'DtPresence',
+  props: {
+    /**
+     * Determines the color of the inner presence circle, indicating status.
+     * Accepts one of 4 values: 'busy', 'away', 'active', 'offline'
+     */
+    presence: {
+      type: String,
+      default: PRESENCE_STATES.ACTIVE,
+      validator: role => {
+        return PRESENCE_STATES_LIST.includes(role);
+      }
+    },
+
+    /**
+     * Since Presence is a visual element, we need SRs to read out any state changes
+     * that occur.
+     * Text entered here will be read by assistive technology. If null this component will be ignored by AT.
+     */
+    srText: {
+      type: String,
+      default: null
+    }
+  }
+});
+;// CONCATENATED MODULE: ./components/presence/presence.vue?vue&type=script&lang=js
+ 
+// EXTERNAL MODULE: ./node_modules/vue-loader/dist/exportHelper.js
+var exportHelper = __webpack_require__(744);
+;// CONCATENATED MODULE: ./components/presence/presence.vue
+
+
+
+
+;
+const __exports__ = /*#__PURE__*/(0,exportHelper/* default */.Z)(presencevue_type_script_lang_js, [['render',presencevue_type_template_id_85037b42_render]])
+
+/* harmony default export */ const presence = (__exports__);
+;// CONCATENATED MODULE: ./components/presence/index.js
+
+
+;// CONCATENATED MODULE: ./components/avatar/avatar_constants.js
+const AVATAR_KIND_MODIFIERS = {
+  default: '',
+  icon: 'd-avatar--icon',
+  initials: 'd-avatar--initials'
+};
+const AVATAR_SIZE_MODIFIERS = {
+  sm: 'd-avatar--sm',
+  md: 'd-avatar--md',
+  lg: 'd-avatar--lg'
+};
+const AVATAR_PRESENCE_SIZE_MODIFIERS = {
+  md: 'd-avatar__presence--md',
+  lg: 'd-avatar__presence--lg'
+};
+const AVATAR_COLOR_MODIFIERS = {
+  base: '',
+  'orange-200': 'd-avatar--orange-200',
+  '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',
+  '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'
+};
+const AVATAR_ICON_SIZES = {
+  sm: '200',
+  md: '400',
+  lg: '500'
+};
+/* harmony default export */ const avatar_constants = ({
+  AVATAR_KIND_MODIFIERS,
+  AVATAR_SIZE_MODIFIERS,
+  AVATAR_COLOR_MODIFIERS,
+  AVATAR_ICON_SIZES
+});
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/avatar/avatar.vue?vue&type=script&lang=js
 
 
 
+
 /**
  * An avatar is a visual representation of a user or object.
  * @see https://dialpad.design/components/avatar.html
@@ -1517,6 +1618,9 @@ const pascalCaseToKebabCase = string => {
 
 /* harmony default export */ const avatarvue_type_script_lang_js = ({
   name: 'DtAvatar',
+  components: {
+    DtPresence: presence
+  },
   inheritAttrs: false,
   props: {
     /**
@@ -1561,6 +1665,24 @@ const pascalCaseToKebabCase = string => {
     avatarClass: {
       type: [String, Array, Object],
       default: ''
+    },
+
+    /**
+     * Determines whether to show the presence indicator for
+     * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',
+     * or 'active'. By default, it's null and nothing is shown.
+     */
+    presence: {
+      type: String,
+      default: null
+    },
+
+    /**
+     * A set of props to be passed into the presence component.
+     */
+    presenceProps: {
+      type: Object,
+      default: () => ({})
     }
   },
 
@@ -1570,7 +1692,8 @@ const pascalCaseToKebabCase = string => {
       kind: 'initials',
       AVATAR_SIZE_MODIFIERS: AVATAR_SIZE_MODIFIERS,
       AVATAR_COLOR_MODIFIERS: AVATAR_COLOR_MODIFIERS,
-      AVATAR_KIND_MODIFIERS: AVATAR_KIND_MODIFIERS
+      AVATAR_KIND_MODIFIERS: AVATAR_KIND_MODIFIERS,
+      AVATAR_PRESENCE_SIZE_MODIFIERS: AVATAR_PRESENCE_SIZE_MODIFIERS
     };
   },
 
@@ -1631,17 +1754,15 @@ const pascalCaseToKebabCase = string => {
 });
 ;// CONCATENATED MODULE: ./components/avatar/avatar.vue?vue&type=script&lang=js
  
-// EXTERNAL MODULE: ./node_modules/vue-loader/dist/exportHelper.js
-var exportHelper = __webpack_require__(744);
 ;// CONCATENATED MODULE: ./components/avatar/avatar.vue
 
 
 
 
 ;
-const __exports__ = /*#__PURE__*/(0,exportHelper/* default */.Z)(avatarvue_type_script_lang_js, [['render',render]])
+const avatar_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(avatarvue_type_script_lang_js, [['render',render]])
 
-/* harmony default export */ const avatar = (__exports__);
+/* harmony default export */ const avatar = (avatar_exports_);
 ;// CONCATENATED MODULE: ./components/avatar/index.js
 
 
@@ -1730,7 +1851,7 @@ const badge_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(badgevue_typ
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/banner/banner.vue?vue&type=template&id=a3c41ca8
 
 const bannervue_type_template_id_a3c41ca8_hoisted_1 = ["role"];
-const _hoisted_2 = ["aria-labelledby", "aria-describedby"];
+const bannervue_type_template_id_a3c41ca8_hoisted_2 = ["aria-labelledby", "aria-describedby"];
 function bannervue_type_template_id_a3c41ca8_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_notice_icon = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-notice-icon");
 
@@ -1772,162 +1893,119 @@ function bannervue_type_template_id_a3c41ca8_render(_ctx, _cache, $props, $setup
   }, {
     default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "action")]),
     _: 3
-  }, 8, ["hide-close", "close-button-props", "visually-hidden-close", "visually-hidden-close-label"])], 10, _hoisted_2)], 46, bannervue_type_template_id_a3c41ca8_hoisted_1);
+  }, 8, ["hide-close", "close-button-props", "visually-hidden-close", "visually-hidden-close-label"])], 10, bannervue_type_template_id_a3c41ca8_hoisted_2)], 46, bannervue_type_template_id_a3c41ca8_hoisted_1);
 }
 ;// CONCATENATED MODULE: ./components/banner/banner.vue?vue&type=template&id=a3c41ca8
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/notice/notice_icon.vue?vue&type=template&id=5544041e
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/notice/notice_icon.vue?vue&type=template&id=dbeeebfa
 
-const notice_iconvue_type_template_id_5544041e_hoisted_1 = {
+const notice_iconvue_type_template_id_dbeeebfa_hoisted_1 = {
   key: 0,
   "aria-hidden": "true",
   class: "d-notice__icon"
 };
-function notice_iconvue_type_template_id_5544041e_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return $options.defaultIcon || _ctx.$slots.default ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", notice_iconvue_type_template_id_5544041e_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default", {}, () => [((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveDynamicComponent)($options.defaultIcon)))])])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true);
-}
-;// CONCATENATED MODULE: ./components/notice/notice_icon.vue?vue&type=template&id=5544041e
-
-;// CONCATENATED MODULE: ./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconLightbulb.vue?vue&type=template&id=d9fc2436
-
+function notice_iconvue_type_template_id_dbeeebfa_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_icon = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-icon");
 
-const IconLightbulbvue_type_template_id_d9fc2436_hoisted_1 = {
-  "aria-hidden": "true",
-  focusable: "false",
-  "aria-label": "Lightbulb",
-  class: "d-svg d-svg--system d-svg__lightbulb",
-  viewBox: "0 0 24 24"
+  return $options.defaultIcon || _ctx.$slots.default ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", notice_iconvue_type_template_id_dbeeebfa_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default", {}, () => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_icon, {
+    name: $options.defaultIcon,
+    size: "400"
+  }, null, 8, ["name"])])])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true);
 }
-const IconLightbulbvue_type_template_id_d9fc2436_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M9 21c0 .5.4 1 1 1h4c.6 0 1-.5 1-1v-1H9v1Zm3-19C8.1 2 5 5.1 5 9c0 2.4 1.2 4.5 3 5.7V17c0 .5.4 1 1 1h6c.6 0 1-.5 1-1v-2.3c1.8-1.3 3-3.4 3-5.7 0-3.9-3.1-7-7-7Z" }, null, -1)
-const _hoisted_3 = [
-  IconLightbulbvue_type_template_id_d9fc2436_hoisted_2
-]
-
-function IconLightbulbvue_type_template_id_d9fc2436_render(_ctx, _cache) {
-  return ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("svg", IconLightbulbvue_type_template_id_d9fc2436_hoisted_1, _hoisted_3))
-}
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconLightbulb.vue?vue&type=template&id=d9fc2436
-
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconLightbulb.vue
-
-const script = {}
-
-;
-const IconLightbulb_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(script, [['render',IconLightbulbvue_type_template_id_d9fc2436_render]])
-
-/* harmony default export */ const IconLightbulb = (IconLightbulb_exports_);
-;// CONCATENATED MODULE: ./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconInfo.vue?vue&type=template&id=0ffb14b7
-
+;// CONCATENATED MODULE: ./components/notice/notice_icon.vue?vue&type=template&id=dbeeebfa
 
-const IconInfovue_type_template_id_0ffb14b7_hoisted_1 = {
-  "aria-hidden": "true",
-  focusable: "false",
-  "aria-label": "Info",
-  class: "d-svg d-svg--system d-svg__info",
-  viewBox: "0 0 24 24"
-}
-const IconInfovue_type_template_id_0ffb14b7_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm1 15h-2v-6h2v6Zm0-8h-2V7h2v2Z" }, null, -1)
-const IconInfovue_type_template_id_0ffb14b7_hoisted_3 = [
-  IconInfovue_type_template_id_0ffb14b7_hoisted_2
-]
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/icon/icon.vue?vue&type=template&id=1ca37c55
 
-function IconInfovue_type_template_id_0ffb14b7_render(_ctx, _cache) {
-  return ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("svg", IconInfovue_type_template_id_0ffb14b7_hoisted_1, IconInfovue_type_template_id_0ffb14b7_hoisted_3))
+function iconvue_type_template_id_1ca37c55_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveDynamicComponent)($options.currentIcon), {
+    "data-qa": "dt-icon",
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.iconSize)
+  }, null, 8, ["class"]);
 }
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconInfo.vue?vue&type=template&id=0ffb14b7
-
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconInfo.vue
-
-const IconInfo_script = {}
+;// CONCATENATED MODULE: ./components/icon/icon.vue?vue&type=template&id=1ca37c55
 
-;
-const IconInfo_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconInfo_script, [['render',IconInfovue_type_template_id_0ffb14b7_render]])
+;// CONCATENATED MODULE: ./components/icon/icon_constants.js
+const ICON_SIZE_MODIFIERS = {
+  100: 'd-icon--size-100',
+  200: 'd-icon--size-200',
+  300: 'd-icon--size-300',
+  400: 'd-icon--size-400',
+  500: 'd-icon--size-500',
+  600: 'd-icon--size-600',
+  700: 'd-icon--size-700',
+  800: 'd-icon--size-800'
+};
+/* harmony default export */ const icon_constants = ({
+  ICON_SIZE_MODIFIERS
+});
+;// CONCATENATED MODULE: external "@dialpad/dialtone-icons"
+const dialtone_icons_namespaceObject = require("@dialpad/dialtone-icons");
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/icon/icon.vue?vue&type=script&lang=js
 
-/* harmony default export */ const IconInfo = (IconInfo_exports_);
-;// CONCATENATED MODULE: ./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconWarning.vue?vue&type=template&id=0de6c9ad
 
 
-const IconWarningvue_type_template_id_0de6c9ad_hoisted_1 = {
-  "aria-hidden": "true",
-  focusable: "false",
-  "aria-label": "Warning",
-  class: "d-svg d-svg--system d-svg__warning",
-  viewBox: "0 0 24 24"
-}
-const IconWarningvue_type_template_id_0de6c9ad_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M1 21h22L12 2 1 21Zm12-3h-2v-2h2v2Zm0-4h-2v-4h2v4Z" }, null, -1)
-const IconWarningvue_type_template_id_0de6c9ad_hoisted_3 = [
-  IconWarningvue_type_template_id_0de6c9ad_hoisted_2
-]
+/**
+ * The Icon component provides a set of glyphs and sizes to provide context your application.
+ * @see https://dialpad.design/components/icon.html
+ */
 
-function IconWarningvue_type_template_id_0de6c9ad_render(_ctx, _cache) {
-  return ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("svg", IconWarningvue_type_template_id_0de6c9ad_hoisted_1, IconWarningvue_type_template_id_0de6c9ad_hoisted_3))
-}
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconWarning.vue?vue&type=template&id=0de6c9ad
+/* harmony default export */ const iconvue_type_script_lang_js = ({
+  name: 'DtIcon',
+  props: {
+    /**
+     * The size of the icon.
+     * @values 100, 200, 300, 400, 500, 600, 700, 800
+     */
+    size: {
+      type: String,
+      default: '500',
+      validator: s => Object.keys(ICON_SIZE_MODIFIERS).includes(s)
+    },
 
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconWarning.vue
+    /**
+     * The icon name in kebab-case
+     */
+    name: {
+      type: String,
+      required: true
+    }
+  },
 
-const IconWarning_script = {}
+  data() {
+    return {
+      dialtoneIcons: dialtone_icons_namespaceObject
+    };
+  },
 
-;
-const IconWarning_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconWarning_script, [['render',IconWarningvue_type_template_id_0de6c9ad_render]])
+  computed: {
+    iconSize() {
+      return ICON_SIZE_MODIFIERS[this.size];
+    },
 
-/* harmony default export */ const IconWarning = (IconWarning_exports_);
-;// CONCATENATED MODULE: ./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconError.vue?vue&type=template&id=6256a0c7
+    iconName() {
+      return kebabCaseToPascalCase(this.name);
+    },
 
+    currentIcon() {
+      return this.dialtoneIcons[this.iconName];
+    }
 
-const IconErrorvue_type_template_id_6256a0c7_hoisted_1 = {
-  "aria-hidden": "true",
-  focusable: "false",
-  "aria-label": "Error",
-  class: "d-svg d-svg--system d-svg__error",
-  viewBox: "0 0 24 24"
-}
-const IconErrorvue_type_template_id_6256a0c7_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm1 15h-2v-2h2v2Zm0-4h-2V7h2v6Z" }, null, -1)
-const IconErrorvue_type_template_id_6256a0c7_hoisted_3 = [
-  IconErrorvue_type_template_id_6256a0c7_hoisted_2
-]
+  }
+});
+;// CONCATENATED MODULE: ./components/icon/icon.vue?vue&type=script&lang=js
+ 
+;// CONCATENATED MODULE: ./components/icon/icon.vue
 
-function IconErrorvue_type_template_id_6256a0c7_render(_ctx, _cache) {
-  return ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("svg", IconErrorvue_type_template_id_6256a0c7_hoisted_1, IconErrorvue_type_template_id_6256a0c7_hoisted_3))
-}
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconError.vue?vue&type=template&id=6256a0c7
 
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconError.vue
 
-const IconError_script = {}
 
 ;
-const IconError_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconError_script, [['render',IconErrorvue_type_template_id_6256a0c7_render]])
-
-/* harmony default export */ const IconError = (IconError_exports_);
-;// CONCATENATED MODULE: ./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconCheckCircle.vue?vue&type=template&id=a74ac93c
-
-
-const IconCheckCirclevue_type_template_id_a74ac93c_hoisted_1 = {
-  "aria-hidden": "true",
-  focusable: "false",
-  "aria-label": "Check Circle",
-  class: "d-svg d-svg--system d-svg__checkCircle",
-  viewBox: "0 0 24 24"
-}
-const IconCheckCirclevue_type_template_id_a74ac93c_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9Z" }, null, -1)
-const IconCheckCirclevue_type_template_id_a74ac93c_hoisted_3 = [
-  IconCheckCirclevue_type_template_id_a74ac93c_hoisted_2
-]
-
-function IconCheckCirclevue_type_template_id_a74ac93c_render(_ctx, _cache) {
-  return ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("svg", IconCheckCirclevue_type_template_id_a74ac93c_hoisted_1, IconCheckCirclevue_type_template_id_a74ac93c_hoisted_3))
-}
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconCheckCircle.vue?vue&type=template&id=a74ac93c
-
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconCheckCircle.vue
+const icon_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(iconvue_type_script_lang_js, [['render',iconvue_type_template_id_1ca37c55_render]])
 
-const IconCheckCircle_script = {}
+/* harmony default export */ const icon = (icon_exports_);
+;// CONCATENATED MODULE: ./components/icon/index.js
 
-;
-const IconCheckCircle_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconCheckCircle_script, [['render',IconCheckCirclevue_type_template_id_a74ac93c_render]])
 
-/* harmony default export */ const IconCheckCircle = (IconCheckCircle_exports_);
 ;// CONCATENATED MODULE: ./components/notice/notice_constants.js
 const NOTICE_KINDS = ['base', 'error', 'info', 'success', 'warning'];
 const NOTICE_ROLES = ['alert', 'alertdialog', 'status'];
@@ -1938,19 +2016,11 @@ const NOTICE_ROLES = ['alert', 'alertdialog', 'status'];
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/notice/notice_icon.vue?vue&type=script&lang=js
 
 
-
-
-
-
-const kindToIcon = new Map([['info', 'IconInfo'], ['success', 'IconCheckCircle'], ['warning', 'IconWarning'], ['error', 'IconError'], ['base', 'IconLightbulb']]);
+const kindToIcon = new Map([['info', 'info'], ['success', 'check-circle'], ['warning', 'alert-triangle'], ['error', 'alert-circle'], ['base', 'bell']]);
 /* harmony default export */ const notice_iconvue_type_script_lang_js = ({
   name: 'DtNoticeIcon',
   components: {
-    IconLightbulb: IconLightbulb,
-    IconInfo: IconInfo,
-    IconWarning: IconWarning,
-    IconError: IconError,
-    IconCheckCircle: IconCheckCircle
+    DtIcon: icon
   },
   props: {
     /**
@@ -1982,7 +2052,7 @@ const kindToIcon = new Map([['info', 'IconInfo'], ['success', 'IconCheckCircle']
 
 
 ;
-const notice_icon_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(notice_iconvue_type_script_lang_js, [['render',notice_iconvue_type_template_id_5544041e_render]])
+const notice_icon_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(notice_iconvue_type_script_lang_js, [['render',notice_iconvue_type_template_id_dbeeebfa_render]])
 
 /* harmony default export */ const notice_icon = (notice_icon_exports_);
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/notice/notice_content.vue?vue&type=template&id=45f8172a
@@ -1992,7 +2062,7 @@ const notice_contentvue_type_template_id_45f8172a_hoisted_1 = {
   "data-qa": "notice-content"
 };
 const notice_contentvue_type_template_id_45f8172a_hoisted_2 = ["id"];
-const notice_contentvue_type_template_id_45f8172a_hoisted_3 = ["id"];
+const _hoisted_3 = ["id"];
 function notice_contentvue_type_template_id_45f8172a_render(_ctx, _cache, $props, $setup, $data, $options) {
   return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", notice_contentvue_type_template_id_45f8172a_hoisted_1, [$props.title || _ctx.$slots.titleOverride ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("p", {
     key: 0,
@@ -2003,7 +2073,7 @@ function notice_contentvue_type_template_id_45f8172a_render(_ctx, _cache, $props
     id: $props.contentId,
     class: "d-notice__message",
     "data-qa": "notice-content-message"
-  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")], 8, notice_contentvue_type_template_id_45f8172a_hoisted_3)]);
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")], 8, _hoisted_3)]);
 }
 ;// CONCATENATED MODULE: ./components/notice/notice_content.vue?vue&type=template&id=45f8172a
 
@@ -2049,20 +2119,20 @@ function notice_contentvue_type_template_id_45f8172a_render(_ctx, _cache, $props
 const notice_content_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(notice_contentvue_type_script_lang_js, [['render',notice_contentvue_type_template_id_45f8172a_render]])
 
 /* harmony default export */ const notice_content = (notice_content_exports_);
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/notice/notice_action.vue?vue&type=template&id=3fb27eac
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/notice/notice_action.vue?vue&type=template&id=51cd131a
 
-const notice_actionvue_type_template_id_3fb27eac_hoisted_1 = {
+const notice_actionvue_type_template_id_51cd131a_hoisted_1 = {
   class: "d-notice__actions",
   "data-qa": "notice-content-actions"
 };
-function notice_actionvue_type_template_id_3fb27eac_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_icon_close = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("icon-close");
+function notice_actionvue_type_template_id_51cd131a_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_icon = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-icon");
 
   const _component_dt_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-button");
 
   const _component_sr_only_close_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("sr-only-close-button");
 
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", notice_actionvue_type_template_id_3fb27eac_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default"), !$props.hideClose ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_button, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", notice_actionvue_type_template_id_51cd131a_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default"), !$props.hideClose ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_button, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
     key: 0,
     ref: "closeButton",
     "data-qa": "dt-notice-action-close-button",
@@ -2073,7 +2143,10 @@ function notice_actionvue_type_template_id_3fb27eac_render(_ctx, _cache, $props,
   }, $props.closeButtonProps, {
     onClick: $options.close
   }), {
-    icon: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_icon_close)]),
+    icon: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_icon, {
+      name: "close",
+      size: "200"
+    })]),
     _: 1
   }, 16, ["aria-label", "onClick"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), _ctx.showVisuallyHiddenClose ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_sr_only_close_button, {
     key: 1,
@@ -2081,36 +2154,8 @@ function notice_actionvue_type_template_id_3fb27eac_render(_ctx, _cache, $props,
     onClose: $options.close
   }, null, 8, ["visually-hidden-close-label", "onClose"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]);
 }
-;// CONCATENATED MODULE: ./components/notice/notice_action.vue?vue&type=template&id=3fb27eac
-
-;// CONCATENATED MODULE: ./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconClose.vue?vue&type=template&id=4ef5457b
-
-
-const IconClosevue_type_template_id_4ef5457b_hoisted_1 = {
-  "aria-hidden": "true",
-  focusable: "false",
-  "aria-label": "Close",
-  class: "d-svg d-svg--system d-svg__close",
-  viewBox: "0 0 24 24"
-}
-const IconClosevue_type_template_id_4ef5457b_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z" }, null, -1)
-const IconClosevue_type_template_id_4ef5457b_hoisted_3 = [
-  IconClosevue_type_template_id_4ef5457b_hoisted_2
-]
-
-function IconClosevue_type_template_id_4ef5457b_render(_ctx, _cache) {
-  return ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("svg", IconClosevue_type_template_id_4ef5457b_hoisted_1, IconClosevue_type_template_id_4ef5457b_hoisted_3))
-}
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconClose.vue?vue&type=template&id=4ef5457b
-
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconClose.vue
-
-const IconClose_script = {}
+;// CONCATENATED MODULE: ./components/notice/notice_action.vue?vue&type=template&id=51cd131a
 
-;
-const IconClose_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconClose_script, [['render',IconClosevue_type_template_id_4ef5457b_render]])
-
-/* harmony default export */ const IconClose = (IconClose_exports_);
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/button/button.vue?vue&type=template&id=6629834d
 
 const buttonvue_type_template_id_6629834d_hoisted_1 = ["type", "disabled", "aria-live", "aria-label"];
@@ -2184,6 +2229,13 @@ const INVALID_COMBINATION = [{
   importance: 'primary',
   message: _invalidCombinationMessage(false, 'muted', 'primary')
 }];
+const BUTTON_ICON_SIZES = {
+  xs: '200',
+  sm: '200',
+  md: '300',
+  lg: '400',
+  xl: '500'
+};
 
 function _invalidCombinationMessage(circle, kind, importance) {
   return `You cannot have a ${circle ? 'circle ' : ''}button \
@@ -2199,7 +2251,8 @@ list of available button styles`;
   BUTTON_IMPORTANCE_MODIFIERS,
   BUTTON_TYPES,
   ICON_POSITION_MODIFIERS,
-  INVALID_COMBINATION
+  INVALID_COMBINATION,
+  BUTTON_ICON_SIZES
 });
 ;// CONCATENATED MODULE: ./components/link/link_constants.js
 const DANGER = 'danger';
@@ -2487,6 +2540,8 @@ const LINK_KIND_MODIFIERS = {
 const button_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(buttonvue_type_script_lang_js, [['render',buttonvue_type_template_id_6629834d_render]])
 
 /* harmony default export */ const button_button = (button_exports_);
+;// CONCATENATED MODULE: ./components/button/index.js
+
 ;// CONCATENATED MODULE: ./common/mixins/sr_only_close_button.js
 /**
  * @displayName Sr-Only close button mixin
@@ -2538,10 +2593,10 @@ const button_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(buttonvue_t
 
   }
 });
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./common/sr_only_close_button.vue?vue&type=template&id=3480ff70
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./common/sr_only_close_button.vue?vue&type=template&id=0d8834c8
 
-function sr_only_close_buttonvue_type_template_id_3480ff70_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_icon_close = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("icon-close");
+function sr_only_close_buttonvue_type_template_id_0d8834c8_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_icon = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-icon");
 
   const _component_dt_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-button");
 
@@ -2553,13 +2608,13 @@ function sr_only_close_buttonvue_type_template_id_3480ff70_render(_ctx, _cache,
     onClick: $options.close,
     onKeydown: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($options.close, ["prevent", "stop"]), ["space"])
   }, {
-    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_icon_close)]),
+    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_icon, {
+      name: "close"
+    })]),
     _: 1
   }, 8, ["aria-label", "onClick", "onKeydown"]);
 }
-;// CONCATENATED MODULE: ./common/sr_only_close_button.vue?vue&type=template&id=3480ff70
-
-;// CONCATENATED MODULE: ./components/button/index.js
+;// CONCATENATED MODULE: ./common/sr_only_close_button.vue?vue&type=template&id=0d8834c8
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./common/sr_only_close_button.vue?vue&type=script&lang=js
 
@@ -2567,7 +2622,7 @@ function sr_only_close_buttonvue_type_template_id_3480ff70_render(_ctx, _cache,
 /* harmony default export */ const sr_only_close_buttonvue_type_script_lang_js = ({
   name: 'SrOnlyCloseButton',
   components: {
-    IconClose: IconClose,
+    DtIcon: icon,
     DtButton: button_button
   },
   props: {
@@ -2595,7 +2650,7 @@ function sr_only_close_buttonvue_type_template_id_3480ff70_render(_ctx, _cache,
 
 
 ;
-const sr_only_close_button_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(sr_only_close_buttonvue_type_script_lang_js, [['render',sr_only_close_buttonvue_type_template_id_3480ff70_render]])
+const sr_only_close_button_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(sr_only_close_buttonvue_type_script_lang_js, [['render',sr_only_close_buttonvue_type_template_id_0d8834c8_render]])
 
 /* harmony default export */ const common_sr_only_close_button = (sr_only_close_button_exports_);
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/notice/notice_action.vue?vue&type=script&lang=js
@@ -2606,7 +2661,7 @@ const sr_only_close_button_exports_ = /*#__PURE__*/(0,exportHelper/* default */.
 /* harmony default export */ const notice_actionvue_type_script_lang_js = ({
   name: 'DtNoticeAction',
   components: {
-    IconClose: IconClose,
+    DtIcon: icon,
     DtButton: button_button,
     SrOnlyCloseButton: common_sr_only_close_button
   },
@@ -2687,7 +2742,7 @@ const sr_only_close_button_exports_ = /*#__PURE__*/(0,exportHelper/* default */.
 
 
 ;
-const notice_action_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(notice_actionvue_type_script_lang_js, [['render',notice_actionvue_type_template_id_3fb27eac_render]])
+const notice_action_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(notice_actionvue_type_script_lang_js, [['render',notice_actionvue_type_template_id_51cd131a_render]])
 
 /* harmony default export */ const notice_action = (notice_action_exports_);
 ;// CONCATENATED MODULE: ./common/mixins/modal.js
@@ -3398,13 +3453,13 @@ const card_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(cardvue_type_
 /* harmony default export */ const card = (card_exports_);
 ;// CONCATENATED MODULE: ./components/card/index.js
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/combobox/combobox.vue?vue&type=template&id=694bee80
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/combobox/combobox.vue?vue&type=template&id=1aae3667
 
-const comboboxvue_type_template_id_694bee80_hoisted_1 = ["aria-expanded", "aria-controls", "aria-owns"];
-const comboboxvue_type_template_id_694bee80_hoisted_2 = {
+const comboboxvue_type_template_id_1aae3667_hoisted_1 = ["aria-expanded", "aria-controls", "aria-owns"];
+const comboboxvue_type_template_id_1aae3667_hoisted_2 = {
   "data-qa": "dt-combobox-input-wrapper"
 };
-function comboboxvue_type_template_id_694bee80_render(_ctx, _cache, $props, $setup, $data, $options) {
+function comboboxvue_type_template_id_1aae3667_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_combobox_loading_list = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("combobox-loading-list");
 
   const _component_combobox_empty_list = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("combobox-empty-list");
@@ -3416,7 +3471,7 @@ function comboboxvue_type_template_id_694bee80_render(_ctx, _cache, $props, $set
     "aria-owns": $props.listId,
     "aria-haspopup": "listbox",
     onKeydown: [_cache[3] || (_cache[3] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onEscapeKey'), ["stop"]), ["esc"])), _cache[4] || (_cache[4] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onEnterKey'), ["exact"]), ["enter"])), _cache[5] || (_cache[5] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onUpKey'), ["stop", "prevent"]), ["up"])), _cache[6] || (_cache[6] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onDownKey'), ["stop", "prevent"]), ["down"])), _cache[7] || (_cache[7] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onHomeKey'), ["stop", "prevent"]), ["home"])), _cache[8] || (_cache[8] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onEndKey'), ["stop", "prevent"]), ["end"]))]
-  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", comboboxvue_type_template_id_694bee80_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "input", {
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", comboboxvue_type_template_id_1aae3667_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "input", {
     inputProps: $options.inputProps
   })]), $props.showList ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
     key: 0,
@@ -3433,18 +3488,22 @@ function comboboxvue_type_template_id_694bee80_render(_ctx, _cache, $props, $set
     })
   }, [$props.loading && !$props.listRenderedOutside ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_combobox_loading_list, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeProps)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
     key: 0
-  }, $options.listProps)), null, 16)) : $props.emptyList && $props.emptyStateMessage && !$props.listRenderedOutside ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_combobox_empty_list, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+  }, $options.listProps)), null, 16)) : $props.emptyList && ($props.emptyStateMessage || _ctx.$slots.emptyListItem) && !$props.listRenderedOutside ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_combobox_empty_list, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
     key: 1
   }, $options.listProps, {
-    message: $props.emptyStateMessage
-  }), null, 16, ["message"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "list", {
+    message: $props.emptyStateMessage,
+    "item-class": $props.emptyStateClass
+  }), {
+    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "emptyListItem")]),
+    _: 3
+  }, 16, ["message", "item-class"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "list", {
     key: 2,
     listProps: $options.listProps,
     opened: $options.onOpen,
     clearHighlightIndex: $options.clearHighlightIndex
-  })], 544)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 40, comboboxvue_type_template_id_694bee80_hoisted_1);
+  })], 544)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 40, comboboxvue_type_template_id_1aae3667_hoisted_1);
 }
-;// CONCATENATED MODULE: ./components/combobox/combobox.vue?vue&type=template&id=694bee80
+;// CONCATENATED MODULE: ./components/combobox/combobox.vue?vue&type=template&id=1aae3667
 
 ;// CONCATENATED MODULE: ./common/mixins/dom.js
 /* harmony default export */ const dom = ({
@@ -3907,18 +3966,18 @@ const LIST_ITEM_NAVIGATION_TYPES = {
   LIST_ITEM_TYPES,
   LIST_ITEM_NAVIGATION_TYPES
 });
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/list_item/default_list_item.vue?vue&type=template&id=27ccac89
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/list_item/default_list_item.vue?vue&type=template&id=2006c592
 
-const default_list_itemvue_type_template_id_27ccac89_hoisted_1 = {
+const default_list_itemvue_type_template_id_2006c592_hoisted_1 = {
   class: "dt-default-list-item d-fs-200 d-lh4 d-py4 d-px12 d-d-flex d-ai-center"
 };
-const default_list_itemvue_type_template_id_27ccac89_hoisted_2 = {
+const default_list_itemvue_type_template_id_2006c592_hoisted_2 = {
   key: 0,
   class: "dt-default-list-item--left d-d-inline-flex d-as-flex-start d-d-flex d-ai-center d-pr8",
   "data-qa": "dt-default-list-item-left-wrapper"
 };
-const default_list_itemvue_type_template_id_27ccac89_hoisted_3 = {
-  class: "d-fl-grow1"
+const default_list_itemvue_type_template_id_2006c592_hoisted_3 = {
+  class: "d-fl-grow1 d-of-hidden"
 };
 const _hoisted_4 = {
   key: 0
@@ -3933,8 +3992,8 @@ const _hoisted_6 = {
   class: "dt-default-list-item--right d-d-inline-flex d-as-flex-start d-d-flex d-ai-center d-pl8",
   "data-qa": "dt-default-list-item-right-wrapper"
 };
-function default_list_itemvue_type_template_id_27ccac89_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", default_list_itemvue_type_template_id_27ccac89_hoisted_1, [_ctx.$slots.left ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("section", default_list_itemvue_type_template_id_27ccac89_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "left")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("section", default_list_itemvue_type_template_id_27ccac89_hoisted_3, [_ctx.$slots.default ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", _hoisted_4, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), _ctx.$slots.subtitle ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
+function default_list_itemvue_type_template_id_2006c592_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", default_list_itemvue_type_template_id_2006c592_hoisted_1, [_ctx.$slots.left ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("section", default_list_itemvue_type_template_id_2006c592_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "left")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("section", default_list_itemvue_type_template_id_2006c592_hoisted_3, [_ctx.$slots.default ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", _hoisted_4, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), _ctx.$slots.subtitle ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
     key: 1,
     "data-qa": "dt-default-list-item-subtitle-wrapper",
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-fs-100 d-fc-black-600', {
@@ -3942,7 +4001,7 @@ function default_list_itemvue_type_template_id_27ccac89_render(_ctx, _cache, $pr
     }])
   }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "subtitle")], 2)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), _ctx.$slots.bottom ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", _hoisted_5, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "bottom")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]), _ctx.$slots.right ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("section", _hoisted_6, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "right")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]);
 }
-;// CONCATENATED MODULE: ./components/list_item/default_list_item.vue?vue&type=template&id=27ccac89
+;// CONCATENATED MODULE: ./components/list_item/default_list_item.vue?vue&type=template&id=2006c592
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/list_item/default_list_item.vue?vue&type=script&lang=js
 /* harmony default export */ const default_list_itemvue_type_script_lang_js = ({
@@ -3950,9 +4009,9 @@ function default_list_itemvue_type_template_id_27ccac89_render(_ctx, _cache, $pr
 });
 ;// CONCATENATED MODULE: ./components/list_item/default_list_item.vue?vue&type=script&lang=js
  
-// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/list_item/default_list_item.vue?vue&type=style&index=0&id=27ccac89&lang=less
-var default_list_itemvue_type_style_index_0_id_27ccac89_lang_less = __webpack_require__(902);
-;// CONCATENATED MODULE: ./components/list_item/default_list_item.vue?vue&type=style&index=0&id=27ccac89&lang=less
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/list_item/default_list_item.vue?vue&type=style&index=0&id=2006c592&lang=less
+var default_list_itemvue_type_style_index_0_id_2006c592_lang_less = __webpack_require__(944);
+;// CONCATENATED MODULE: ./components/list_item/default_list_item.vue?vue&type=style&index=0&id=2006c592&lang=less
 
 ;// CONCATENATED MODULE: ./components/list_item/default_list_item.vue
 
@@ -3962,7 +4021,7 @@ var default_list_itemvue_type_style_index_0_id_27ccac89_lang_less = __webpack_re
 ;
 
 
-const default_list_item_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(default_list_itemvue_type_script_lang_js, [['render',default_list_itemvue_type_template_id_27ccac89_render]])
+const default_list_item_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(default_list_itemvue_type_script_lang_js, [['render',default_list_itemvue_type_template_id_2006c592_render]])
 
 /* harmony default export */ const default_list_item = (default_list_item_exports_);
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/list_item/list_item.vue?vue&type=script&lang=js
@@ -4989,25 +5048,26 @@ const skeleton_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(skeletonv
 const combobox_loading_list_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(combobox_loading_listvue_type_script_lang_js, [['render',combobox_loading_listvue_type_template_id_07d9971d_render]])
 
 /* harmony default export */ const combobox_loading_list = (combobox_loading_list_exports_);
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/combobox/combobox_empty-list.vue?vue&type=template&id=ee5abe2c
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/combobox/combobox_empty-list.vue?vue&type=template&id=53681200
 
-const combobox_empty_listvue_type_template_id_ee5abe2c_hoisted_1 = {
+const combobox_empty_listvue_type_template_id_53681200_hoisted_1 = {
   class: "d-p0",
   "data-qa": "dt-combobox-empty-list"
 };
-function combobox_empty_listvue_type_template_id_ee5abe2c_render(_ctx, _cache, $props, $setup, $data, $options) {
+function combobox_empty_listvue_type_template_id_53681200_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_list_item = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-list-item");
 
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("ol", combobox_empty_listvue_type_template_id_ee5abe2c_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_list_item, {
-    class: "d-d-flex d-jc-center",
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("ol", combobox_empty_listvue_type_template_id_53681200_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default", {}, () => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_list_item, {
     role: "option",
-    "navigation-type": "none"
+    "navigation-type": "none",
+    type: "custom",
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['dt-empty-list-item', $props.itemClass])
   }, {
     default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", null, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.message), 1)]),
     _: 1
-  })]);
+  }, 8, ["class"])])]);
 }
-;// CONCATENATED MODULE: ./components/combobox/combobox_empty-list.vue?vue&type=template&id=ee5abe2c
+;// CONCATENATED MODULE: ./components/combobox/combobox_empty-list.vue?vue&type=template&id=53681200
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/combobox/combobox_empty-list.vue?vue&type=script&lang=js
 
@@ -5023,18 +5083,34 @@ function combobox_empty_listvue_type_template_id_ee5abe2c_render(_ctx, _cache, $
     message: {
       type: String,
       required: true
+    },
+
+    /**
+     * Additional class name for the empty list 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.
+     */
+    itemClass: {
+      type: [String, Object, Array],
+      default: ''
     }
   }
 });
 ;// CONCATENATED MODULE: ./components/combobox/combobox_empty-list.vue?vue&type=script&lang=js
  
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/combobox/combobox_empty-list.vue?vue&type=style&index=0&id=53681200&lang=less
+var combobox_empty_listvue_type_style_index_0_id_53681200_lang_less = __webpack_require__(704);
+;// CONCATENATED MODULE: ./components/combobox/combobox_empty-list.vue?vue&type=style&index=0&id=53681200&lang=less
+
 ;// CONCATENATED MODULE: ./components/combobox/combobox_empty-list.vue
 
 
 
 
 ;
-const combobox_empty_list_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(combobox_empty_listvue_type_script_lang_js, [['render',combobox_empty_listvue_type_template_id_ee5abe2c_render]])
+
+
+const combobox_empty_list_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(combobox_empty_listvue_type_script_lang_js, [['render',combobox_empty_listvue_type_template_id_53681200_render]])
 
 /* harmony default export */ const combobox_empty_list = (combobox_empty_list_exports_);
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/combobox/combobox.vue?vue&type=script&lang=js
@@ -5143,6 +5219,16 @@ const combobox_empty_list_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z
     emptyStateMessage: {
       type: String,
       default: ''
+    },
+
+    /**
+     * Additional class name for the empty list 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.
+     */
+    emptyStateClass: {
+      type: [String, Object, Array],
+      default: ''
     }
   },
   emits: [
@@ -5329,6 +5415,10 @@ const combobox_empty_list_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z
     },
 
     validateEmptyListProps() {
+      if (this.$slots.emptyListItem) {
+        return;
+      }
+
       if (this.emptyList && !this.emptyStateMessage || !this.emptyList && this.emptyStateMessage) {
         console.error(`Invalid props: you must pass both props emptyList and emptyStateMessage to show the
       empty message.`);
@@ -5345,7 +5435,7 @@ const combobox_empty_list_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z
 
 
 ;
-const combobox_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(comboboxvue_type_script_lang_js, [['render',comboboxvue_type_template_id_694bee80_render]])
+const combobox_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(comboboxvue_type_script_lang_js, [['render',comboboxvue_type_template_id_1aae3667_render]])
 
 /* harmony default export */ const combobox = (combobox_exports_);
 ;// CONCATENATED MODULE: ./components/combobox/index.js
@@ -5698,10 +5788,10 @@ function IconArrowAccordionOpenvue_type_template_id_67591df8_render(_ctx, _cache
 
 ;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconArrowAccordionOpen.vue
 
-const IconArrowAccordionOpen_script = {}
+const script = {}
 
 ;
-const IconArrowAccordionOpen_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconArrowAccordionOpen_script, [['render',IconArrowAccordionOpenvue_type_template_id_67591df8_render]])
+const IconArrowAccordionOpen_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(script, [['render',IconArrowAccordionOpenvue_type_template_id_67591df8_render]])
 
 /* harmony default export */ const IconArrowAccordionOpen = (IconArrowAccordionOpen_exports_);
 ;// CONCATENATED MODULE: ./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconArrowAccordionClosed.vue?vue&type=template&id=5e7762fe
@@ -10679,10 +10769,10 @@ const POPOVER_CONTENT_WIDTHS = [null, 'anchor'];
 const POPOVER_INITIAL_FOCUS_STRINGS = ['none', 'dialog', 'first'];
 const POPOVER_STICKY_VALUES = [...TIPPY_STICKY_VALUES];
 const POPOVER_DIRECTIONS = [...BASE_TIPPY_DIRECTIONS];
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/popover/popover_header_footer.vue?vue&type=template&id=9366be96
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/popover/popover_header_footer.vue?vue&type=template&id=9190eade
 
-function popover_header_footervue_type_template_id_9366be96_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_icon_close = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("icon-close");
+function popover_header_footervue_type_template_id_9190eade_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_icon = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-icon");
 
   const _component_dt_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-button");
 
@@ -10707,13 +10797,14 @@ function popover_header_footervue_type_template_id_9366be96_render(_ctx, _cache,
   }, $props.closeButtonProps, {
     onClick: _cache[0] || (_cache[0] = $event => _ctx.$emit('close'))
   }), {
-    icon: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_icon_close, {
-      class: "d-svg--size20"
+    icon: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_icon, {
+      name: "close",
+      size: "300"
     })]),
     _: 1
   }, 16)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 2);
 }
-;// CONCATENATED MODULE: ./components/popover/popover_header_footer.vue?vue&type=template&id=9366be96
+;// CONCATENATED MODULE: ./components/popover/popover_header_footer.vue?vue&type=template&id=9190eade
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/popover/popover_header_footer.vue?vue&type=script&lang=js
 
@@ -10722,7 +10813,7 @@ function popover_header_footervue_type_template_id_9366be96_render(_ctx, _cache,
   name: 'PopoverHeaderFooter',
   components: {
     DtButton: button_button,
-    IconClose: IconClose
+    DtIcon: icon
   },
   props: {
     // eslint-disable-next-line vue/require-default-prop
@@ -10785,7 +10876,7 @@ function popover_header_footervue_type_template_id_9366be96_render(_ctx, _cache,
 
 
 ;
-const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(popover_header_footervue_type_script_lang_js, [['render',popover_header_footervue_type_template_id_9366be96_render]])
+const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(popover_header_footervue_type_script_lang_js, [['render',popover_header_footervue_type_template_id_9190eade_render]])
 
 /* harmony default export */ const popover_header_footer = (popover_header_footer_exports_);
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/popover/popover.vue?vue&type=script&lang=js
@@ -12036,30 +12127,30 @@ const dropdown_separator_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)
 
 
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/input/input.vue?vue&type=template&id=1ac302ae
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/input/input.vue?vue&type=template&id=79447a44
 
-const inputvue_type_template_id_1ac302ae_hoisted_1 = {
+const inputvue_type_template_id_79447a44_hoisted_1 = {
   ref: "container",
   class: "base-input",
   "data-qa": "dt-input"
 };
-const inputvue_type_template_id_1ac302ae_hoisted_2 = ["aria-details"];
-const inputvue_type_template_id_1ac302ae_hoisted_3 = ["id"];
-const inputvue_type_template_id_1ac302ae_hoisted_4 = {
+const inputvue_type_template_id_79447a44_hoisted_2 = ["aria-details"];
+const inputvue_type_template_id_79447a44_hoisted_3 = ["id"];
+const inputvue_type_template_id_79447a44_hoisted_4 = {
   key: 0
 };
-const inputvue_type_template_id_1ac302ae_hoisted_5 = {
+const inputvue_type_template_id_79447a44_hoisted_5 = {
   key: 1,
   "data-qa": "dt-input-length-description",
   class: /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-mb2'])
 };
-const inputvue_type_template_id_1ac302ae_hoisted_6 = ["read-only"];
+const inputvue_type_template_id_79447a44_hoisted_6 = ["read-only"];
 const _hoisted_7 = ["value", "name", "disabled", "maxlength"];
 const _hoisted_8 = ["value", "name", "type", "disabled", "maxlength"];
-function inputvue_type_template_id_1ac302ae_render(_ctx, _cache, $props, $setup, $data, $options) {
+function inputvue_type_template_id_79447a44_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_validation_messages = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-validation-messages");
 
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", inputvue_type_template_id_1ac302ae_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("label", {
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", inputvue_type_template_id_79447a44_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("label", {
     class: "base-input__label",
     "aria-details": _ctx.$slots.description || $props.description ? $options.descriptionKey : undefined,
     "data-qa": "dt-input-label-wrapper"
@@ -12074,7 +12165,7 @@ function inputvue_type_template_id_1ac302ae_render(_ctx, _cache, $props, $setup,
     ref: "description",
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['base-input__description', 'd-description', 'd-fd-column', $data.descriptionSizeClasses[$props.size]]),
     "data-qa": "dt-input-description"
-  }, [_ctx.$slots.description || $props.description ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", inputvue_type_template_id_1ac302ae_hoisted_4, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "description", {}, () => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createTextVNode)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.description), 1)])])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), $options.shouldValidateLength ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", inputvue_type_template_id_1ac302ae_hoisted_5, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($options.validationProps.length.description), 1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 10, inputvue_type_template_id_1ac302ae_hoisted_3)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
+  }, [_ctx.$slots.description || $props.description ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", inputvue_type_template_id_79447a44_hoisted_4, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "description", {}, () => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createTextVNode)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.description), 1)])])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), $options.shouldValidateLength ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", inputvue_type_template_id_79447a44_hoisted_5, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($options.validationProps.length.description), 1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 10, inputvue_type_template_id_79447a44_hoisted_3)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.inputWrapperClasses()),
     "read-only": $props.disabled === true ? true : undefined
   }, [_ctx.$slots.leftIcon ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", {
@@ -12110,7 +12201,7 @@ function inputvue_type_template_id_1ac302ae_render(_ctx, _cache, $props, $setup,
     onFocusout: _cache[1] || (_cache[1] = function () {
       return $options.onBlur && $options.onBlur(...arguments);
     })
-  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "rightIcon")], 34)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 10, inputvue_type_template_id_1ac302ae_hoisted_6)], 8, inputvue_type_template_id_1ac302ae_hoisted_2), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_validation_messages, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "rightIcon")], 34)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 10, inputvue_type_template_id_79447a44_hoisted_6)], 8, inputvue_type_template_id_79447a44_hoisted_2), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_validation_messages, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
     "validation-messages": $options.validationMessages,
     "show-messages": _ctx.showMessages,
     class: _ctx.messagesClass
@@ -12118,7 +12209,7 @@ function inputvue_type_template_id_1ac302ae_render(_ctx, _cache, $props, $setup,
     "data-qa": "dt-input-messages"
   }), null, 16, ["validation-messages", "show-messages", "class"])], 512);
 }
-;// CONCATENATED MODULE: ./components/input/input.vue?vue&type=template&id=1ac302ae
+;// CONCATENATED MODULE: ./components/input/input.vue?vue&type=template&id=79447a44
 
 ;// CONCATENATED MODULE: ./components/input/input_constants.js
 // Valid input types, any other input types (for example: 'radio' or 'checkbox') should
@@ -13131,7 +13222,7 @@ const MessagesMixin = {
 
 
 ;
-const input_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(inputvue_type_script_lang_js, [['render',inputvue_type_template_id_1ac302ae_render]])
+const input_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(inputvue_type_script_lang_js, [['render',inputvue_type_template_id_79447a44_render]])
 
 /* harmony default export */ const input_input = (input_exports_);
 ;// CONCATENATED MODULE: ./components/input/index.js
@@ -13430,27 +13521,27 @@ const input_group_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(input_
 /* harmony default export */ const input_group_input_group = (input_group_exports_);
 ;// CONCATENATED MODULE: ./components/input_group/index.js
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/modal/modal.vue?vue&type=template&id=1b67c1b8
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/modal/modal.vue?vue&type=template&id=44704674
 
-const modalvue_type_template_id_1b67c1b8_hoisted_1 = ["aria-describedby", "aria-labelledby"];
-const modalvue_type_template_id_1b67c1b8_hoisted_2 = ["id"];
-const modalvue_type_template_id_1b67c1b8_hoisted_3 = ["id"];
-const modalvue_type_template_id_1b67c1b8_hoisted_4 = {
+const modalvue_type_template_id_44704674_hoisted_1 = ["aria-describedby", "aria-labelledby"];
+const modalvue_type_template_id_44704674_hoisted_2 = ["id"];
+const modalvue_type_template_id_44704674_hoisted_3 = ["id"];
+const modalvue_type_template_id_44704674_hoisted_4 = {
   key: 2,
   class: "d-modal__content",
   "data-qa": "dt-modal-copy"
 };
-const modalvue_type_template_id_1b67c1b8_hoisted_5 = {
+const modalvue_type_template_id_44704674_hoisted_5 = {
   key: 3,
   class: "d-modal__content",
   "data-qa": "dt-modal-copy"
 };
-const modalvue_type_template_id_1b67c1b8_hoisted_6 = {
+const modalvue_type_template_id_44704674_hoisted_6 = {
   key: 4,
   class: "d-modal__footer"
 };
-function modalvue_type_template_id_1b67c1b8_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_icon_close = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("icon-close");
+function modalvue_type_template_id_44704674_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_icon = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-icon");
 
   const _component_dt_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-button");
 
@@ -13486,12 +13577,12 @@ function modalvue_type_template_id_1b67c1b8_render(_ctx, _cache, $props, $setup,
         id: $props.labelledById,
         class: "d-modal__header",
         "data-qa": "dt-modal-title"
-      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "header")], 8, modalvue_type_template_id_1b67c1b8_hoisted_2)) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("h2", {
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "header")], 8, modalvue_type_template_id_44704674_hoisted_2)) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("h2", {
         key: 1,
         id: $props.labelledById,
         class: "d-modal__header",
         "data-qa": "dt-modal-title"
-      }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.title), 9, modalvue_type_template_id_1b67c1b8_hoisted_3)), _ctx.$slots.default ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", modalvue_type_template_id_1b67c1b8_hoisted_4, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")])) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("p", modalvue_type_template_id_1b67c1b8_hoisted_5, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.copy), 1)), $options.hasFooterSlot ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("footer", modalvue_type_template_id_1b67c1b8_hoisted_6, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "footer")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), !$props.hideClose ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_button, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+      }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.title), 9, modalvue_type_template_id_44704674_hoisted_3)), _ctx.$slots.default ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", modalvue_type_template_id_44704674_hoisted_4, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")])) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("p", modalvue_type_template_id_44704674_hoisted_5, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.copy), 1)), $options.hasFooterSlot ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("footer", modalvue_type_template_id_44704674_hoisted_6, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "footer")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), !$props.hideClose ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_button, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
         key: 5,
         class: "d-modal__close",
         circle: "",
@@ -13501,19 +13592,22 @@ function modalvue_type_template_id_1b67c1b8_render(_ctx, _cache, $props, $setup,
       }, $props.closeButtonProps, {
         onClick: $options.close
       }), {
-        icon: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_icon_close)]),
+        icon: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_icon, {
+          name: "close",
+          size: "400"
+        })]),
         _: 1
       }, 16, ["aria-label", "onClick"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), _ctx.showVisuallyHiddenClose ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_sr_only_close_button, {
         key: 6,
         "visually-hidden-close-label": _ctx.visuallyHiddenCloseLabel,
         onClose: $options.close
-      }, null, 8, ["visually-hidden-close-label", "onClose"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 10, modalvue_type_template_id_1b67c1b8_hoisted_1), [[external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.vShow, $props.show]])]),
+      }, null, 8, ["visually-hidden-close-label", "onClose"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 10, modalvue_type_template_id_44704674_hoisted_1), [[external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.vShow, $props.show]])]),
       _: 3
     })]),
     _: 3
   }, 16, ["show", "class", "aria-hidden"]);
 }
-;// CONCATENATED MODULE: ./components/modal/modal.vue?vue&type=template&id=1b67c1b8
+;// CONCATENATED MODULE: ./components/modal/modal.vue?vue&type=template&id=44704674
 
 ;// CONCATENATED MODULE: ./components/modal/modal_constants.js
 // Modal style modifiers
@@ -13547,7 +13641,7 @@ const MODAL_SIZE_MODIFIERS = {
   components: {
     DtLazyShow: lazy_show,
     DtButton: button_button,
-    IconClose: IconClose,
+    DtIcon: icon,
     SrOnlyCloseButton: common_sr_only_close_button
   },
   mixins: [modal, sr_only_close_button],
@@ -13813,7 +13907,7 @@ const MODAL_SIZE_MODIFIERS = {
 
 
 ;
-const modal_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(modalvue_type_script_lang_js, [['render',modalvue_type_template_id_1b67c1b8_render]])
+const modal_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(modalvue_type_script_lang_js, [['render',modalvue_type_template_id_44704674_render]])
 
 /* harmony default export */ const modal_modal = (modal_exports_);
 ;// CONCATENATED MODULE: ./components/modal/index.js
@@ -14259,21 +14353,19 @@ const notice_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(noticevue_t
 ;// CONCATENATED MODULE: ./components/notice/index.js
 
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/pagination/pagination.vue?vue&type=template&id=e4244c82
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/pagination/pagination.vue?vue&type=template&id=0f3daac1
 
-const paginationvue_type_template_id_e4244c82_hoisted_1 = ["aria-label"];
-const paginationvue_type_template_id_e4244c82_hoisted_2 = {
+const paginationvue_type_template_id_0f3daac1_hoisted_1 = ["aria-label"];
+const paginationvue_type_template_id_0f3daac1_hoisted_2 = {
   key: 0,
   "data-qa": "dt-pagination-separator",
   class: "d-h32 d-w32 d-d-flex d-ai-center d-jc-center"
 };
-function paginationvue_type_template_id_e4244c82_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_icon_chevron_left = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("icon-chevron-left");
+function paginationvue_type_template_id_0f3daac1_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_icon = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-icon");
 
   const _component_dt_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-button");
 
-  const _component_icon_chevron_right = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("icon-chevron-right");
-
   return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("nav", {
     "aria-label": $props.ariaLabel,
     class: "d-d-flex d-fd-row d-gg2 d-ai-center"
@@ -14285,12 +14377,15 @@ function paginationvue_type_template_id_e4244c82_render(_ctx, _cache, $props, $s
     disabled: $options.isFirstPage,
     onClick: _cache[0] || (_cache[0] = $event => $options.changePage($data.currentPage - 1))
   }, {
-    icon: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_icon_chevron_left)]),
+    icon: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_icon, {
+      name: "chevron-left",
+      size: "200"
+    })]),
     _: 1
   }, 8, ["aria-label", "importance", "disabled"]), ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Fragment, null, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderList)($options.pages, (page, index) => {
     return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
       key: `page-${page}-${index}`
-    }, [isNaN(Number(page)) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", paginationvue_type_template_id_e4244c82_hoisted_2, " … ")) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_button, {
+    }, [isNaN(Number(page)) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", paginationvue_type_template_id_0f3daac1_hoisted_2, " … ")) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_button, {
       key: 1,
       "aria-label": $props.pageNumberAriaLabel(page),
       importance: $data.currentPage === page ? 'primary' : 'clear',
@@ -14309,72 +14404,18 @@ function paginationvue_type_template_id_e4244c82_render(_ctx, _cache, $props, $s
     importance: $options.isLastPage ? 'primary' : 'clear',
     onClick: _cache[1] || (_cache[1] = $event => $options.changePage($data.currentPage + 1))
   }, {
-    icon: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_icon_chevron_right)]),
+    icon: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_icon, {
+      name: "chevron-right",
+      size: "200"
+    })]),
     _: 1
-  }, 8, ["aria-label", "disabled", "importance"])], 8, paginationvue_type_template_id_e4244c82_hoisted_1);
-}
-;// CONCATENATED MODULE: ./components/pagination/pagination.vue?vue&type=template&id=e4244c82
-
-;// CONCATENATED MODULE: ./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconChevronLeft.vue?vue&type=template&id=dc01e37a
-
-
-const IconChevronLeftvue_type_template_id_dc01e37a_hoisted_1 = {
-  "aria-hidden": "true",
-  focusable: "false",
-  "aria-label": "Chevron Left",
-  class: "d-svg d-svg--system d-svg__chevronLeft",
-  viewBox: "0 0 24 24"
-}
-const IconChevronLeftvue_type_template_id_dc01e37a_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12l4.58-4.59Z" }, null, -1)
-const IconChevronLeftvue_type_template_id_dc01e37a_hoisted_3 = [
-  IconChevronLeftvue_type_template_id_dc01e37a_hoisted_2
-]
-
-function IconChevronLeftvue_type_template_id_dc01e37a_render(_ctx, _cache) {
-  return ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("svg", IconChevronLeftvue_type_template_id_dc01e37a_hoisted_1, IconChevronLeftvue_type_template_id_dc01e37a_hoisted_3))
-}
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconChevronLeft.vue?vue&type=template&id=dc01e37a
-
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconChevronLeft.vue
-
-const IconChevronLeft_script = {}
-
-;
-const IconChevronLeft_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconChevronLeft_script, [['render',IconChevronLeftvue_type_template_id_dc01e37a_render]])
-
-/* harmony default export */ const IconChevronLeft = (IconChevronLeft_exports_);
-;// CONCATENATED MODULE: ./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconChevronRight.vue?vue&type=template&id=83063a0c
-
-
-const IconChevronRightvue_type_template_id_83063a0c_hoisted_1 = {
-  "aria-hidden": "true",
-  focusable: "false",
-  "aria-label": "Chevron Right",
-  class: "d-svg d-svg--system d-svg__chevronRight",
-  viewBox: "0 0 24 24"
-}
-const IconChevronRightvue_type_template_id_83063a0c_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6Z" }, null, -1)
-const IconChevronRightvue_type_template_id_83063a0c_hoisted_3 = [
-  IconChevronRightvue_type_template_id_83063a0c_hoisted_2
-]
-
-function IconChevronRightvue_type_template_id_83063a0c_render(_ctx, _cache) {
-  return ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("svg", IconChevronRightvue_type_template_id_83063a0c_hoisted_1, IconChevronRightvue_type_template_id_83063a0c_hoisted_3))
+  }, 8, ["aria-label", "disabled", "importance"])], 8, paginationvue_type_template_id_0f3daac1_hoisted_1);
 }
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconChevronRight.vue?vue&type=template&id=83063a0c
-
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconChevronRight.vue
-
-const IconChevronRight_script = {}
-
-;
-const IconChevronRight_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconChevronRight_script, [['render',IconChevronRightvue_type_template_id_83063a0c_render]])
+;// CONCATENATED MODULE: ./components/pagination/pagination.vue?vue&type=template&id=0f3daac1
 
-/* harmony default export */ const IconChevronRight = (IconChevronRight_exports_);
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/pagination/pagination.vue?vue&type=script&lang=js
 
 
-
 /**
  * Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.
  * @see https://dialpad.design/components/pagination.html
@@ -14384,8 +14425,7 @@ const IconChevronRight_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(I
   name: 'DtPagination',
   components: {
     DtButton: button_button,
-    IconChevronLeft: IconChevronLeft,
-    IconChevronRight: IconChevronRight
+    DtIcon: icon
   },
   props: {
     /**
@@ -14526,7 +14566,7 @@ const IconChevronRight_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(I
 
 
 ;
-const pagination_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(paginationvue_type_script_lang_js, [['render',paginationvue_type_template_id_e4244c82_render]])
+const pagination_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(paginationvue_type_script_lang_js, [['render',paginationvue_type_template_id_0f3daac1_render]])
 
 /* harmony default export */ const pagination = (pagination_exports_);
 ;// CONCATENATED MODULE: ./components/pagination/index.js
@@ -15709,27 +15749,27 @@ const checkbox_group_exports_ = checkbox_groupvue_type_script_lang_js;
 /* harmony default export */ const checkbox_group = (checkbox_group_exports_);
 ;// CONCATENATED MODULE: ./components/checkbox_group/index.js
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/chip/chip.vue?vue&type=template&id=480dd4a8
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/chip/chip.vue?vue&type=template&id=af4b6988
 
-const chipvue_type_template_id_480dd4a8_hoisted_1 = {
+const chipvue_type_template_id_af4b6988_hoisted_1 = {
   class: "d-chip"
 };
-const chipvue_type_template_id_480dd4a8_hoisted_2 = {
+const chipvue_type_template_id_af4b6988_hoisted_2 = {
   key: 0,
   "data-qa": "dt-chip-icon",
   class: "d-chip__icon"
 };
-const chipvue_type_template_id_480dd4a8_hoisted_3 = {
+const chipvue_type_template_id_af4b6988_hoisted_3 = {
   key: 1,
   "data-qa": "dt-chip-avatar"
 };
-const chipvue_type_template_id_480dd4a8_hoisted_4 = ["id"];
-function chipvue_type_template_id_480dd4a8_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_icon_close = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("icon-close");
+const chipvue_type_template_id_af4b6988_hoisted_4 = ["id"];
+function chipvue_type_template_id_af4b6988_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_icon = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-icon");
 
   const _component_dt_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-button");
 
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", chipvue_type_template_id_480dd4a8_hoisted_1, [((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveDynamicComponent)($props.interactive ? 'button' : 'span'), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)(_ctx.$attrs, {
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", chipvue_type_template_id_af4b6988_hoisted_1, [((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveDynamicComponent)($props.interactive ? 'button' : 'span'), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)(_ctx.$attrs, {
     id: $props.id,
     type: $props.interactive && 'button',
     class: $options.chipClasses(),
@@ -15737,12 +15777,12 @@ function chipvue_type_template_id_480dd4a8_render(_ctx, _cache, $props, $setup,
     "aria-labelledby": $props.ariaLabel ? undefined : `${$props.id}-content`,
     "aria-label": $props.ariaLabel
   }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toHandlers)($options.chipListeners)), {
-    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [_ctx.$slots.icon ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", chipvue_type_template_id_480dd4a8_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "icon")])) : _ctx.$slots.avatar ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", chipvue_type_template_id_480dd4a8_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "avatar")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), _ctx.$slots.default ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", {
+    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [_ctx.$slots.icon ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", chipvue_type_template_id_af4b6988_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "icon")])) : _ctx.$slots.avatar ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", chipvue_type_template_id_af4b6988_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "avatar")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), _ctx.$slots.default ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", {
       key: 2,
       id: `${$props.id}-content`,
       "data-qa": "dt-chip-label",
       class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-truncate', 'd-chip__text', $props.contentClass])
-    }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")], 10, chipvue_type_template_id_480dd4a8_hoisted_4)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]),
+    }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")], 10, chipvue_type_template_id_af4b6988_hoisted_4)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]),
     _: 3
   }, 16, ["id", "type", "class", "aria-labelledby", "aria-label"])), !$props.hideClose ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_button, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
     key: 0
@@ -15752,11 +15792,14 @@ function chipvue_type_template_id_480dd4a8_render(_ctx, _cache, $props, $setup,
     "aria-label": $props.closeButtonProps.ariaLabel,
     onClick: _cache[0] || (_cache[0] = $event => _ctx.$emit('close'))
   }), {
-    icon: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_icon_close)]),
+    icon: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_icon, {
+      name: "close",
+      size: $options.closeButtonIconSize
+    }, null, 8, ["size"])]),
     _: 1
   }, 16, ["class", "aria-label"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]);
 }
-;// CONCATENATED MODULE: ./components/chip/chip.vue?vue&type=template&id=480dd4a8
+;// CONCATENATED MODULE: ./components/chip/chip.vue?vue&type=template&id=af4b6988
 
 ;// CONCATENATED MODULE: ./components/chip/chip_constants.js
 const CHIP_SIZE_MODIFIERS = {
@@ -15769,8 +15812,14 @@ const CHIP_CLOSE_BUTTON_SIZE_MODIFIERS = {
   sm: 'd-chip__close--sm',
   md: ''
 };
+const CHIP_ICON_SIZES = {
+  xs: '200',
+  sm: '300',
+  md: '300'
+};
 /* harmony default export */ const chip_constants = ({
-  CHIP_SIZE_MODIFIERS
+  CHIP_SIZE_MODIFIERS,
+  CHIP_ICON_SIZES
 });
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/chip/chip.vue?vue&type=script&lang=js
 
@@ -15787,8 +15836,8 @@ const CHIP_CLOSE_BUTTON_SIZE_MODIFIERS = {
 /* harmony default export */ const chipvue_type_script_lang_js = ({
   name: 'DtChip',
   components: {
-    IconClose: IconClose,
-    DtButton: button_button
+    DtButton: button_button,
+    DtIcon: icon
   },
   inheritAttrs: false,
   props: {
@@ -15907,6 +15956,10 @@ const CHIP_CLOSE_BUTTON_SIZE_MODIFIERS = {
           }
         }
       };
+    },
+
+    closeButtonIconSize() {
+      return CHIP_ICON_SIZES[this.size];
     }
 
   },
@@ -15935,7 +15988,7 @@ const CHIP_CLOSE_BUTTON_SIZE_MODIFIERS = {
 
 
 ;
-const chip_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(chipvue_type_script_lang_js, [['render',chipvue_type_template_id_480dd4a8_render]])
+const chip_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(chipvue_type_script_lang_js, [['render',chipvue_type_template_id_af4b6988_render]])
 
 /* harmony default export */ const chip = (chip_exports_);
 ;// CONCATENATED MODULE: ./components/chip/index.js
@@ -17186,229 +17239,51 @@ const tooltip_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(tooltipvue
 ;// CONCATENATED MODULE: ./components/tooltip/index.js
 
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/keyboard_shortcut/keyboard_shortcut.vue?vue&type=template&id=742c4ef7
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/keyboard_shortcut/keyboard_shortcut.vue?vue&type=template&id=109ff0d0
 
-const keyboard_shortcutvue_type_template_id_742c4ef7_hoisted_1 = {
+const keyboard_shortcutvue_type_template_id_109ff0d0_hoisted_1 = {
   key: 0,
   class: "sr-only"
 };
-const keyboard_shortcutvue_type_template_id_742c4ef7_hoisted_2 = ["innerHTML"];
-function keyboard_shortcutvue_type_template_id_742c4ef7_render(_ctx, _cache, $props, $setup, $data, $options) {
+const keyboard_shortcutvue_type_template_id_109ff0d0_hoisted_2 = ["innerHTML"];
+function keyboard_shortcutvue_type_template_id_109ff0d0_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_icon = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-icon");
+
   return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("kbd", {
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-d-inline-flex', 'd-ff-custom', 'd-ai-center', 'd-jc-center', 'd-box-border', 'd-px4', 'd-ba', 'd-bar4', 'd-fs-100', $props.inverted ? 'd-bc-black-500' : 'd-bc-black-400'])
-  }, [$props.screenReaderText ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", keyboard_shortcutvue_type_template_id_742c4ef7_hoisted_1, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.screenReaderText), 1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Fragment, null, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderList)($options.formattedShortcutSplit, (item, i) => {
-    return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Fragment, null, [$options.icons[item] ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveDynamicComponent)($options.icons[item]), {
+  }, [$props.screenReaderText ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", keyboard_shortcutvue_type_template_id_109ff0d0_hoisted_1, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.screenReaderText), 1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Fragment, null, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderList)($options.formattedShortcutSplit, (item, i) => {
+    return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Fragment, null, [$options.icons[item] ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_icon, {
       key: `${i}-${item}`,
+      name: $options.icons[item],
+      size: "100",
       "aria-hidden": "true",
-      class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['dt-keyboard-shortcut__svg', $props.inverted ? 'd-fc-black-300' : 'd-fc-black-600', 'd-mr2'])
-    }, null, 8, ["class"])) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", {
+      class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)([$props.inverted ? 'd-fc-black-300' : 'd-fc-black-600', 'd-mr2'])
+    }, null, 8, ["name", "class"])) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", {
       key: `${i}-${item}`,
       "aria-hidden": "true",
       class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)([$props.inverted ? 'd-fc-black-300' : 'd-fc-black-600', 'd-mr2']),
       innerHTML: item
-    }, null, 10, keyboard_shortcutvue_type_template_id_742c4ef7_hoisted_2))], 64);
-  }), 256))], 2);
-}
-;// CONCATENATED MODULE: ./components/keyboard_shortcut/keyboard_shortcut.vue?vue&type=template&id=742c4ef7
-
-;// CONCATENATED MODULE: ./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconWindows.vue?vue&type=template&id=04be6782
-
-
-const IconWindowsvue_type_template_id_04be6782_hoisted_1 = {
-  "aria-hidden": "true",
-  focusable: "false",
-  "aria-label": "Windows",
-  class: "d-svg d-svg--system d-svg__windows",
-  viewBox: "0 0 24 24"
-}
-const IconWindowsvue_type_template_id_04be6782_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M19.903 12.819v7.532L10.936 19v-6.197l8.967.016Z" }, null, -1)
-const IconWindowsvue_type_template_id_04be6782_hoisted_3 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "m10.936 5.334 8.967-1.249V11.5h-8.967V5.334Z" }, null, -1)
-const IconWindowsvue_type_template_id_04be6782_hoisted_4 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M9.745 12.757v6.134l-6.643-.885v-5.28l6.643.03Z" }, null, -1)
-const IconWindowsvue_type_template_id_04be6782_hoisted_5 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "m3.097 6.328 6.647-.885v6.134H3.1l-.003-5.25Z" }, null, -1)
-const IconWindowsvue_type_template_id_04be6782_hoisted_6 = [
-  IconWindowsvue_type_template_id_04be6782_hoisted_2,
-  IconWindowsvue_type_template_id_04be6782_hoisted_3,
-  IconWindowsvue_type_template_id_04be6782_hoisted_4,
-  IconWindowsvue_type_template_id_04be6782_hoisted_5
-]
-
-function IconWindowsvue_type_template_id_04be6782_render(_ctx, _cache) {
-  return ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("svg", IconWindowsvue_type_template_id_04be6782_hoisted_1, IconWindowsvue_type_template_id_04be6782_hoisted_6))
-}
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconWindows.vue?vue&type=template&id=04be6782
-
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconWindows.vue
-
-const IconWindows_script = {}
-
-;
-const IconWindows_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconWindows_script, [['render',IconWindowsvue_type_template_id_04be6782_render]])
-
-/* harmony default export */ const IconWindows = (IconWindows_exports_);
-;// CONCATENATED MODULE: ./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconAdd.vue?vue&type=template&id=57b884e2
-
-
-const IconAddvue_type_template_id_57b884e2_hoisted_1 = {
-  "aria-hidden": "true",
-  focusable: "false",
-  "aria-label": "Add",
-  class: "d-svg d-svg--system d-svg__add",
-  viewBox: "0 0 24 24"
-}
-const IconAddvue_type_template_id_57b884e2_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2Z" }, null, -1)
-const IconAddvue_type_template_id_57b884e2_hoisted_3 = [
-  IconAddvue_type_template_id_57b884e2_hoisted_2
-]
-
-function IconAddvue_type_template_id_57b884e2_render(_ctx, _cache) {
-  return ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("svg", IconAddvue_type_template_id_57b884e2_hoisted_1, IconAddvue_type_template_id_57b884e2_hoisted_3))
-}
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconAdd.vue?vue&type=template&id=57b884e2
-
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconAdd.vue
-
-const IconAdd_script = {}
-
-;
-const IconAdd_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconAdd_script, [['render',IconAddvue_type_template_id_57b884e2_render]])
-
-/* harmony default export */ const IconAdd = (IconAdd_exports_);
-;// CONCATENATED MODULE: ./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconArrowDownward.vue?vue&type=template&id=fd64adf8
-
-
-const IconArrowDownwardvue_type_template_id_fd64adf8_hoisted_1 = {
-  "aria-hidden": "true",
-  focusable: "false",
-  "aria-label": "Arrow Downward",
-  class: "d-svg d-svg--system d-svg__arrowDownward",
-  viewBox: "0 0 24 24"
-}
-const IconArrowDownwardvue_type_template_id_fd64adf8_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "m20 12-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8Z" }, null, -1)
-const IconArrowDownwardvue_type_template_id_fd64adf8_hoisted_3 = [
-  IconArrowDownwardvue_type_template_id_fd64adf8_hoisted_2
-]
-
-function IconArrowDownwardvue_type_template_id_fd64adf8_render(_ctx, _cache) {
-  return ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("svg", IconArrowDownwardvue_type_template_id_fd64adf8_hoisted_1, IconArrowDownwardvue_type_template_id_fd64adf8_hoisted_3))
-}
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconArrowDownward.vue?vue&type=template&id=fd64adf8
-
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconArrowDownward.vue
-
-const IconArrowDownward_script = {}
-
-;
-const IconArrowDownward_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconArrowDownward_script, [['render',IconArrowDownwardvue_type_template_id_fd64adf8_render]])
-
-/* harmony default export */ const IconArrowDownward = (IconArrowDownward_exports_);
-;// CONCATENATED MODULE: ./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconArrowUpward.vue?vue&type=template&id=007435f4
-
-
-const IconArrowUpwardvue_type_template_id_007435f4_hoisted_1 = {
-  "aria-hidden": "true",
-  focusable: "false",
-  "aria-label": "Arrow Upward",
-  class: "d-svg d-svg--system d-svg__arrowUpward",
-  viewBox: "0 0 24 24"
-}
-const IconArrowUpwardvue_type_template_id_007435f4_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "m4 12 1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8Z" }, null, -1)
-const IconArrowUpwardvue_type_template_id_007435f4_hoisted_3 = [
-  IconArrowUpwardvue_type_template_id_007435f4_hoisted_2
-]
-
-function IconArrowUpwardvue_type_template_id_007435f4_render(_ctx, _cache) {
-  return ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("svg", IconArrowUpwardvue_type_template_id_007435f4_hoisted_1, IconArrowUpwardvue_type_template_id_007435f4_hoisted_3))
-}
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconArrowUpward.vue?vue&type=template&id=007435f4
-
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconArrowUpward.vue
-
-const IconArrowUpward_script = {}
-
-;
-const IconArrowUpward_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconArrowUpward_script, [['render',IconArrowUpwardvue_type_template_id_007435f4_render]])
-
-/* harmony default export */ const IconArrowUpward = (IconArrowUpward_exports_);
-;// CONCATENATED MODULE: ./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconArrowForward.vue?vue&type=template&id=3fbcc666
-
-
-const IconArrowForwardvue_type_template_id_3fbcc666_hoisted_1 = {
-  "aria-hidden": "true",
-  focusable: "false",
-  "aria-label": "Arrow Forward",
-  class: "d-svg d-svg--system d-svg__arrowForward",
-  viewBox: "0 0 24 24"
-}
-const IconArrowForwardvue_type_template_id_3fbcc666_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8Z" }, null, -1)
-const IconArrowForwardvue_type_template_id_3fbcc666_hoisted_3 = [
-  IconArrowForwardvue_type_template_id_3fbcc666_hoisted_2
-]
-
-function IconArrowForwardvue_type_template_id_3fbcc666_render(_ctx, _cache) {
-  return ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("svg", IconArrowForwardvue_type_template_id_3fbcc666_hoisted_1, IconArrowForwardvue_type_template_id_3fbcc666_hoisted_3))
-}
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconArrowForward.vue?vue&type=template&id=3fbcc666
-
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconArrowForward.vue
-
-const IconArrowForward_script = {}
-
-;
-const IconArrowForward_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconArrowForward_script, [['render',IconArrowForwardvue_type_template_id_3fbcc666_render]])
-
-/* harmony default export */ const IconArrowForward = (IconArrowForward_exports_);
-;// CONCATENATED MODULE: ./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconArrowBackwards.vue?vue&type=template&id=1f13cb5c
-
-
-const IconArrowBackwardsvue_type_template_id_1f13cb5c_hoisted_1 = {
-  "aria-hidden": "true",
-  focusable: "false",
-  "aria-label": "Arrow Backwards",
-  class: "d-svg d-svg--system d-svg__arrowBackwards",
-  viewBox: "0 0 24 24"
-}
-const IconArrowBackwardsvue_type_template_id_1f13cb5c_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "m12 20 1.41-1.41L7.83 13H20v-2H7.83l5.58-5.59L12 4l-8 8 8 8Z" }, null, -1)
-const IconArrowBackwardsvue_type_template_id_1f13cb5c_hoisted_3 = [
-  IconArrowBackwardsvue_type_template_id_1f13cb5c_hoisted_2
-]
-
-function IconArrowBackwardsvue_type_template_id_1f13cb5c_render(_ctx, _cache) {
-  return ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("svg", IconArrowBackwardsvue_type_template_id_1f13cb5c_hoisted_1, IconArrowBackwardsvue_type_template_id_1f13cb5c_hoisted_3))
+    }, null, 10, keyboard_shortcutvue_type_template_id_109ff0d0_hoisted_2))], 64);
+  }), 256))], 2);
 }
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconArrowBackwards.vue?vue&type=template&id=1f13cb5c
-
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconArrowBackwards.vue
-
-const IconArrowBackwards_script = {}
-
-;
-const IconArrowBackwards_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconArrowBackwards_script, [['render',IconArrowBackwardsvue_type_template_id_1f13cb5c_render]])
+;// CONCATENATED MODULE: ./components/keyboard_shortcut/keyboard_shortcut.vue?vue&type=template&id=109ff0d0
 
-/* harmony default export */ const IconArrowBackwards = (IconArrowBackwards_exports_);
 ;// CONCATENATED MODULE: ./components/keyboard_shortcut/keyboard_shortcut_constants.js
-const SHORTCUTS_ALIASES = {
-  cmd: '&#8984;' // ⌘ Command
-
-};
 const SHORTCUTS_ICON_ALIASES = {
-  '{win}': 'IconWindows',
-  '{arrow-right}': 'IconArrowForward',
-  '{arrow-left}': 'IconArrowBackward',
-  '{arrow-up}': 'IconArrowUpward',
-  '{arrow-down}': 'IconArrowDownward'
+  '{win}': 'layout-grid',
+  '{arrow-right}': 'arrow-right',
+  '{arrow-left}': 'arrow-left',
+  '{arrow-up}': 'arrow-up',
+  '{arrow-down}': 'arrow-down',
+  '{cmd}': 'command'
 };
 const SHORTCUTS_ICON_SEPARATOR = {
-  '{plus}': 'IconAdd'
+  '{plus}': 'plus'
 };
-const SHORTCUTS_ALIASES_LIST = Object.keys(SHORTCUTS_ALIASES).map(key => `{${key}}`).concat(Object.keys(SHORTCUTS_ICON_ALIASES));
+const SHORTCUTS_ALIASES_LIST = Object.keys(SHORTCUTS_ICON_ALIASES);
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/keyboard_shortcut/keyboard_shortcut.vue?vue&type=script&lang=js
 
 
-
-
-
-
-
 /**
  * This component displays a visual representation of a keyboard shortcut to the user.
  * @see https://dialpad.design/components/keyboard_shortcut.html
@@ -17417,12 +17292,7 @@ const SHORTCUTS_ALIASES_LIST = Object.keys(SHORTCUTS_ALIASES).map(key => `{${key
 /* harmony default export */ const keyboard_shortcutvue_type_script_lang_js = ({
   name: 'DtKeyboardShortcut',
   components: {
-    IconWindows: IconWindows,
-    IconArrowBackward: IconArrowBackwards,
-    IconArrowDownward: IconArrowDownward,
-    IconArrowForward: IconArrowForward,
-    IconArrowUpward: IconArrowUpward,
-    IconAdd: IconAdd
+    DtIcon: icon
   },
   props: {
     /**
@@ -17471,8 +17341,8 @@ const SHORTCUTS_ALIASES_LIST = Object.keys(SHORTCUTS_ALIASES).map(key => `{${key
     },
 
     formattedShortcut() {
-      return Object.keys(SHORTCUTS_ALIASES).reduce((result, key) => {
-        return result.replace(new RegExp('{' + key + '}', 'gi'), SHORTCUTS_ALIASES[key]);
+      return Object.keys(SHORTCUTS_ICON_ALIASES).reduce((result, key) => {
+        return result.replace(new RegExp('{' + key + '}', 'gi'), SHORTCUTS_ICON_ALIASES[key]);
       }, this.shortcutWithSeparator);
     },
 
@@ -17493,19 +17363,13 @@ const SHORTCUTS_ALIASES_LIST = Object.keys(SHORTCUTS_ALIASES).map(key => `{${key
 });
 ;// CONCATENATED MODULE: ./components/keyboard_shortcut/keyboard_shortcut.vue?vue&type=script&lang=js
  
-// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/keyboard_shortcut/keyboard_shortcut.vue?vue&type=style&index=0&id=742c4ef7&lang=less
-var keyboard_shortcutvue_type_style_index_0_id_742c4ef7_lang_less = __webpack_require__(777);
-;// CONCATENATED MODULE: ./components/keyboard_shortcut/keyboard_shortcut.vue?vue&type=style&index=0&id=742c4ef7&lang=less
-
 ;// CONCATENATED MODULE: ./components/keyboard_shortcut/keyboard_shortcut.vue
 
 
 
 
 ;
-
-
-const keyboard_shortcut_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(keyboard_shortcutvue_type_script_lang_js, [['render',keyboard_shortcutvue_type_template_id_742c4ef7_render]])
+const keyboard_shortcut_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(keyboard_shortcutvue_type_script_lang_js, [['render',keyboard_shortcutvue_type_template_id_109ff0d0_render]])
 
 /* harmony default export */ const keyboard_shortcut = (keyboard_shortcut_exports_);
 ;// CONCATENATED MODULE: ./components/keyboard_shortcut/index.js
@@ -17798,97 +17662,6 @@ const root_layout_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(root_l
 ;// CONCATENATED MODULE: ./components/root_layout/index.js
 
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/icon/icon.vue?vue&type=template&id=1ca37c55
-
-function iconvue_type_template_id_1ca37c55_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveDynamicComponent)($options.currentIcon), {
-    "data-qa": "dt-icon",
-    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.iconSize)
-  }, null, 8, ["class"]);
-}
-;// CONCATENATED MODULE: ./components/icon/icon.vue?vue&type=template&id=1ca37c55
-
-;// CONCATENATED MODULE: ./components/icon/icon_constants.js
-const ICON_SIZE_MODIFIERS = {
-  100: 'd-icon--size-100',
-  200: 'd-icon--size-200',
-  300: 'd-icon--size-300',
-  400: 'd-icon--size-400',
-  500: 'd-icon--size-500',
-  600: 'd-icon--size-600',
-  700: 'd-icon--size-700',
-  800: 'd-icon--size-800'
-};
-/* harmony default export */ const icon_constants = ({
-  ICON_SIZE_MODIFIERS
-});
-;// CONCATENATED MODULE: external "@dialpad/dialtone-icons"
-const dialtone_icons_namespaceObject = require("@dialpad/dialtone-icons");
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/icon/icon.vue?vue&type=script&lang=js
-
-
-
-/**
- * The Icon component provides a set of glyphs and sizes to provide context your application.
- * @see https://dialpad.design/components/icon.html
- */
-
-/* harmony default export */ const iconvue_type_script_lang_js = ({
-  name: 'DtIcon',
-  props: {
-    /**
-     * The size of the icon.
-     * @values 100, 200, 300, 400, 500, 600, 700, 800
-     */
-    size: {
-      type: String,
-      default: '500',
-      validator: s => Object.keys(ICON_SIZE_MODIFIERS).includes(s)
-    },
-
-    /**
-     * The icon name in kebab-case
-     */
-    name: {
-      type: String,
-      required: true
-    }
-  },
-
-  data() {
-    return {
-      dialtoneIcons: dialtone_icons_namespaceObject
-    };
-  },
-
-  computed: {
-    iconSize() {
-      return ICON_SIZE_MODIFIERS[this.size];
-    },
-
-    iconName() {
-      return kebabCaseToPascalCase(this.name);
-    },
-
-    currentIcon() {
-      return this.dialtoneIcons[this.iconName];
-    }
-
-  }
-});
-;// CONCATENATED MODULE: ./components/icon/icon.vue?vue&type=script&lang=js
- 
-;// CONCATENATED MODULE: ./components/icon/icon.vue
-
-
-
-
-;
-const icon_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(iconvue_type_script_lang_js, [['render',iconvue_type_template_id_1ca37c55_render]])
-
-/* harmony default export */ const icon = (icon_exports_);
-;// CONCATENATED MODULE: ./components/icon/index.js
-
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=352f683e
 
 const combobox_with_popovervue_type_template_id_352f683e_hoisted_1 = ["id"];
@@ -19013,9 +18786,9 @@ const combobox_multi_select_exports_ = /*#__PURE__*/(0,exportHelper/* default */
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/index.js
 
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/buttons/callbar_button/callbar_button.vue?vue&type=template&id=a7118c92
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/buttons/callbar_button/callbar_button.vue?vue&type=template&id=e4ef387c
 
-function callbar_buttonvue_type_template_id_a7118c92_render(_ctx, _cache, $props, $setup, $data, $options) {
+function callbar_buttonvue_type_template_id_e4ef387c_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-button");
 
   const _component_dt_tooltip = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-tooltip");
@@ -19042,7 +18815,7 @@ function callbar_buttonvue_type_template_id_a7118c92_render(_ctx, _cache, $props
     _: 3
   }, 8, ["id"]);
 }
-;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=template&id=a7118c92
+;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=template&id=e4ef387c
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/buttons/callbar_button/callbar_button.vue?vue&type=script&lang=js
 
@@ -19143,9 +18916,9 @@ function callbar_buttonvue_type_template_id_a7118c92_render(_ctx, _cache, $props
 });
 ;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=script&lang=js
  
-// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/buttons/callbar_button/callbar_button.vue?vue&type=style&index=0&id=a7118c92&lang=less
-var callbar_buttonvue_type_style_index_0_id_a7118c92_lang_less = __webpack_require__(476);
-;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=style&index=0&id=a7118c92&lang=less
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/buttons/callbar_button/callbar_button.vue?vue&type=style&index=0&id=e4ef387c&lang=less
+var callbar_buttonvue_type_style_index_0_id_e4ef387c_lang_less = __webpack_require__(980);
+;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=style&index=0&id=e4ef387c&lang=less
 
 ;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue
 
@@ -19155,26 +18928,26 @@ var callbar_buttonvue_type_style_index_0_id_a7118c92_lang_less = __webpack_requi
 ;
 
 
-const callbar_button_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(callbar_buttonvue_type_script_lang_js, [['render',callbar_buttonvue_type_template_id_a7118c92_render]])
+const callbar_button_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(callbar_buttonvue_type_script_lang_js, [['render',callbar_buttonvue_type_template_id_e4ef387c_render]])
 
 /* harmony default export */ const callbar_button = (callbar_button_exports_);
 ;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/index.js
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue?vue&type=template&id=09c202f7
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue?vue&type=template&id=cd71689c
 
-const callbar_button_with_popovervue_type_template_id_09c202f7_hoisted_1 = {
+const callbar_button_with_popovervue_type_template_id_cd71689c_hoisted_1 = {
   class: "dt-recipe--callbar-button-with-popover--button"
 };
-function callbar_button_with_popovervue_type_template_id_09c202f7_render(_ctx, _cache, $props, $setup, $data, $options) {
+function callbar_button_with_popovervue_type_template_id_cd71689c_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_recipe_callbar_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-recipe-callbar-button");
 
-  const _component_icon_arrow_drop_up = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("icon-arrow-drop-up");
+  const _component_dt_icon = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-icon");
 
   const _component_dt_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-button");
 
   const _component_dt_popover = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-popover");
 
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", callbar_button_with_popovervue_type_template_id_09c202f7_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_recipe_callbar_button, {
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", callbar_button_with_popovervue_type_template_id_cd71689c_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_recipe_callbar_button, {
     "aria-label": $props.ariaLabel,
     disabled: $props.disabled,
     active: $props.active,
@@ -19211,8 +18984,9 @@ function callbar_button_with_popovervue_type_template_id_09c202f7_render(_ctx, _
       active: $data.open,
       onClick: $options.arrowClick
     }, {
-      icon: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_icon_arrow_drop_up, {
-        class: "d-svg--size-16"
+      icon: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_icon, {
+        name: "chevron-up",
+        size: "200"
       })]),
       _: 1
     }, 8, ["aria-label", "active", "onClick"])]),
@@ -19222,36 +18996,8 @@ function callbar_button_with_popovervue_type_template_id_09c202f7_render(_ctx, _
     _: 3
   }, 16, ["id", "open", "placement", "initial-focus-element", "show-close-button", "dialog-class", "onOpened"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]);
 }
-;// CONCATENATED MODULE: ./recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue?vue&type=template&id=09c202f7
-
-;// CONCATENATED MODULE: ./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconArrowDropUp.vue?vue&type=template&id=65ee6042
-
-
-const IconArrowDropUpvue_type_template_id_65ee6042_hoisted_1 = {
-  "aria-hidden": "true",
-  focusable: "false",
-  "aria-label": "Arrow Drop Up",
-  class: "d-svg d-svg--system d-svg__arrowDropUp",
-  viewBox: "0 0 24 24"
-}
-const IconArrowDropUpvue_type_template_id_65ee6042_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "m7 14 5-5 5 5H7Z" }, null, -1)
-const IconArrowDropUpvue_type_template_id_65ee6042_hoisted_3 = [
-  IconArrowDropUpvue_type_template_id_65ee6042_hoisted_2
-]
-
-function IconArrowDropUpvue_type_template_id_65ee6042_render(_ctx, _cache) {
-  return ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("svg", IconArrowDropUpvue_type_template_id_65ee6042_hoisted_1, IconArrowDropUpvue_type_template_id_65ee6042_hoisted_3))
-}
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconArrowDropUp.vue?vue&type=template&id=65ee6042
-
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconArrowDropUp.vue
-
-const IconArrowDropUp_script = {}
-
-;
-const IconArrowDropUp_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconArrowDropUp_script, [['render',IconArrowDropUpvue_type_template_id_65ee6042_render]])
+;// CONCATENATED MODULE: ./recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue?vue&type=template&id=cd71689c
 
-/* harmony default export */ const IconArrowDropUp = (IconArrowDropUp_exports_);
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue?vue&type=script&lang=js
 
 
@@ -19264,7 +19010,7 @@ const IconArrowDropUp_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(Ic
     DtRecipeCallbarButton: callbar_button,
     DtPopover: popover,
     DtButton: button_button,
-    IconArrowDropUp: IconArrowDropUp
+    DtIcon: icon
   },
 
   /* inheritAttrs: false is generally an option we want to set on library
@@ -19462,9 +19208,9 @@ const IconArrowDropUp_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(Ic
 });
 ;// CONCATENATED MODULE: ./recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue?vue&type=script&lang=js
  
-// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue?vue&type=style&index=0&id=09c202f7&lang=less
-var callbar_button_with_popovervue_type_style_index_0_id_09c202f7_lang_less = __webpack_require__(517);
-;// CONCATENATED MODULE: ./recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue?vue&type=style&index=0&id=09c202f7&lang=less
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue?vue&type=style&index=0&id=cd71689c&lang=less
+var callbar_button_with_popovervue_type_style_index_0_id_cd71689c_lang_less = __webpack_require__(909);
+;// CONCATENATED MODULE: ./recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue?vue&type=style&index=0&id=cd71689c&lang=less
 
 ;// CONCATENATED MODULE: ./recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue
 
@@ -19474,7 +19220,7 @@ var callbar_button_with_popovervue_type_style_index_0_id_09c202f7_lang_less = __
 ;
 
 
-const callbar_button_with_popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(callbar_button_with_popovervue_type_script_lang_js, [['render',callbar_button_with_popovervue_type_template_id_09c202f7_render]])
+const callbar_button_with_popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(callbar_button_with_popovervue_type_script_lang_js, [['render',callbar_button_with_popovervue_type_template_id_cd71689c_render]])
 
 /* harmony default export */ const callbar_button_with_popover = (callbar_button_with_popover_exports_);
 ;// CONCATENATED MODULE: ./recipes/buttons/callbar_button_with_popover/index.js
@@ -19731,22 +19477,22 @@ const top_banner_info_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(to
 ;// CONCATENATED MODULE: ./recipes/notices/top_banner_info/index.js
 
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/cards/ivr_node/ivr_node.vue?vue&type=template&id=660d0b2b
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/cards/ivr_node/ivr_node.vue?vue&type=template&id=5f1f3c1e
 
-const ivr_nodevue_type_template_id_660d0b2b_hoisted_1 = {
+const ivr_nodevue_type_template_id_5f1f3c1e_hoisted_1 = {
   class: "d-d-flex d-ai-center"
 };
-const ivr_nodevue_type_template_id_660d0b2b_hoisted_2 = {
+const ivr_nodevue_type_template_id_5f1f3c1e_hoisted_2 = {
   class: "d-fs-200 d-fw-bold",
   "data-qa": "ivr-node-label"
 };
-const ivr_nodevue_type_template_id_660d0b2b_hoisted_3 = {
+const ivr_nodevue_type_template_id_5f1f3c1e_hoisted_3 = {
   class: "d-w164"
 };
-function ivr_nodevue_type_template_id_660d0b2b_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_dt_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-button");
+function ivr_nodevue_type_template_id_5f1f3c1e_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_icon = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-icon");
 
-  const _component_icon_menu_vertical = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("icon-menu-vertical");
+  const _component_dt_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-button");
 
   const _component_dt_dropdown = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-dropdown");
 
@@ -19775,16 +19521,18 @@ function ivr_nodevue_type_template_id_660d0b2b_render(_ctx, _cache, $props, $set
       'd-btr4': !$props.isSelected
     }]
   }, {
-    header: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", ivr_nodevue_type_template_id_660d0b2b_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_button, {
+    header: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", ivr_nodevue_type_template_id_5f1f3c1e_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_button, {
       "aria-label": $props.nodeType,
       importance: "clear",
       "data-qa": "dt-ivr-node-icon"
     }, {
-      icon: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveDynamicComponent)($options.nodeIcon), {
+      icon: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_icon, {
+        name: $options.nodeIcon,
+        size: "200",
         class: "d-fc-black-900"
-      }))]),
+      }, null, 8, ["name"])]),
       _: 1
-    }, 8, ["aria-label"]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("p", ivr_nodevue_type_template_id_660d0b2b_hoisted_2, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.nodeLabel), 1)]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_dropdown, {
+    }, 8, ["aria-label"]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("p", ivr_nodevue_type_template_id_5f1f3c1e_hoisted_2, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.nodeLabel), 1)]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_dropdown, {
       open: $data.isOpen,
       "onUpdate:open": _cache[0] || (_cache[0] = $event => $data.isOpen = $event),
       placement: "bottom"
@@ -19794,7 +19542,9 @@ function ivr_nodevue_type_template_id_660d0b2b_render(_ctx, _cache, $props, $set
         "aria-label": $props.menuButtonAriaLabel,
         onClick: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($options.openMenu, ["stop", "prevent"])
       }, {
-        icon: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_icon_menu_vertical, {
+        icon: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_icon, {
+          name: "more-vertical",
+          size: "200",
           class: "d-fc-black-900"
         })]),
         _: 1
@@ -19803,7 +19553,7 @@ function ivr_nodevue_type_template_id_660d0b2b_render(_ctx, _cache, $props, $set
         let {
           close
         } = _ref;
-        return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", ivr_nodevue_type_template_id_660d0b2b_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "menuItems", {
+        return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", ivr_nodevue_type_template_id_5f1f3c1e_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "menuItems", {
           close: close
         })])];
       }),
@@ -19813,283 +19563,9 @@ function ivr_nodevue_type_template_id_660d0b2b_render(_ctx, _cache, $props, $set
     _: 3
   }, 8, ["container-class", "header-class"])], 16);
 }
-;// CONCATENATED MODULE: ./recipes/cards/ivr_node/ivr_node.vue?vue&type=template&id=660d0b2b
-
-;// CONCATENATED MODULE: ./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconMenuVertical.vue?vue&type=template&id=7bb36528
-
-
-const IconMenuVerticalvue_type_template_id_7bb36528_hoisted_1 = {
-  "aria-hidden": "true",
-  focusable: "false",
-  "aria-label": "Menu Vertical",
-  class: "d-svg d-svg--system d-svg__menuVertical",
-  viewBox: "0 0 24 24"
-}
-const IconMenuVerticalvue_type_template_id_7bb36528_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2Zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Z" }, null, -1)
-const IconMenuVerticalvue_type_template_id_7bb36528_hoisted_3 = [
-  IconMenuVerticalvue_type_template_id_7bb36528_hoisted_2
-]
-
-function IconMenuVerticalvue_type_template_id_7bb36528_render(_ctx, _cache) {
-  return ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("svg", IconMenuVerticalvue_type_template_id_7bb36528_hoisted_1, IconMenuVerticalvue_type_template_id_7bb36528_hoisted_3))
-}
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconMenuVertical.vue?vue&type=template&id=7bb36528
-
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconMenuVertical.vue
-
-const IconMenuVertical_script = {}
-
-;
-const IconMenuVertical_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconMenuVertical_script, [['render',IconMenuVerticalvue_type_template_id_7bb36528_render]])
-
-/* harmony default export */ const IconMenuVertical = (IconMenuVertical_exports_);
-;// CONCATENATED MODULE: ./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconDialpad.vue?vue&type=template&id=523e1cca
-
-
-const IconDialpadvue_type_template_id_523e1cca_hoisted_1 = {
-  "aria-hidden": "true",
-  focusable: "false",
-  "aria-label": "Dialpad",
-  class: "d-svg d-svg--system d-svg__dialpad",
-  viewBox: "0 0 24 24"
-}
-const IconDialpadvue_type_template_id_523e1cca_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M6 4c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Zm12-8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2Zm-6 8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Zm6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Z" }, null, -1)
-const IconDialpadvue_type_template_id_523e1cca_hoisted_3 = [
-  IconDialpadvue_type_template_id_523e1cca_hoisted_2
-]
-
-function IconDialpadvue_type_template_id_523e1cca_render(_ctx, _cache) {
-  return ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("svg", IconDialpadvue_type_template_id_523e1cca_hoisted_1, IconDialpadvue_type_template_id_523e1cca_hoisted_3))
-}
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconDialpad.vue?vue&type=template&id=523e1cca
-
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconDialpad.vue
-
-const IconDialpad_script = {}
-
-;
-const IconDialpad_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconDialpad_script, [['render',IconDialpadvue_type_template_id_523e1cca_render]])
-
-/* harmony default export */ const IconDialpad = (IconDialpad_exports_);
-;// CONCATENATED MODULE: ./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconPhoneDialer.vue?vue&type=template&id=be0e06dc
-
-
-const IconPhoneDialervue_type_template_id_be0e06dc_hoisted_1 = {
-  "aria-hidden": "true",
-  focusable: "false",
-  "aria-label": "Phone Dialer",
-  class: "d-svg d-svg--system d-svg__phoneDialer",
-  viewBox: "0 0 24 24"
-}
-const IconPhoneDialervue_type_template_id_be0e06dc_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M16.48 14.82c1.11.36 2.3.56 3.53.56.54 0 .99.45.99.99v3.45c0 .55-.28 1.18-.99 1.18C10.73 21 3 13.28 3 3.99 3 3.24 3.65 3 4.19 3h3.46c.54 0 .99.45.99.99 0 1.23.19 2.42.56 3.53.11.35.03.74-.24 1.02L7.01 10.2c1.41 2.93 4.06 5.48 6.89 6.83l1.57-1.97c.27-.27.66-.36 1.01-.24Z" }, null, -1)
-const IconPhoneDialervue_type_template_id_be0e06dc_hoisted_3 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M20 6h-8v1h8V6Zm0-2h-8v1h8V4Zm-8 7h4v-1h-4v1Z" }, null, -1)
-const IconPhoneDialervue_type_template_id_be0e06dc_hoisted_4 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M12 8h8v1h-8V8Z" }, null, -1)
-const IconPhoneDialervue_type_template_id_be0e06dc_hoisted_5 = [
-  IconPhoneDialervue_type_template_id_be0e06dc_hoisted_2,
-  IconPhoneDialervue_type_template_id_be0e06dc_hoisted_3,
-  IconPhoneDialervue_type_template_id_be0e06dc_hoisted_4
-]
-
-function IconPhoneDialervue_type_template_id_be0e06dc_render(_ctx, _cache) {
-  return ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("svg", IconPhoneDialervue_type_template_id_be0e06dc_hoisted_1, IconPhoneDialervue_type_template_id_be0e06dc_hoisted_5))
-}
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconPhoneDialer.vue?vue&type=template&id=be0e06dc
-
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconPhoneDialer.vue
-
-const IconPhoneDialer_script = {}
-
-;
-const IconPhoneDialer_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconPhoneDialer_script, [['render',IconPhoneDialervue_type_template_id_be0e06dc_render]])
-
-/* harmony default export */ const IconPhoneDialer = (IconPhoneDialer_exports_);
-;// CONCATENATED MODULE: ./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconVolumeUp.vue?vue&type=template&id=6e71f4fc
-
-
-const IconVolumeUpvue_type_template_id_6e71f4fc_hoisted_1 = {
-  "aria-hidden": "true",
-  focusable: "false",
-  "aria-label": "Volume Up",
-  class: "d-svg d-svg--system d-svg__volumeUp",
-  viewBox: "0 0 24 24"
-}
-const IconVolumeUpvue_type_template_id_6e71f4fc_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M3 9v6h4l5 5V4L7 9H3Zm13.5 3A4.5 4.5 0 0 0 14 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02ZM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77 0-4.28-2.99-7.86-7-8.77Z" }, null, -1)
-const IconVolumeUpvue_type_template_id_6e71f4fc_hoisted_3 = [
-  IconVolumeUpvue_type_template_id_6e71f4fc_hoisted_2
-]
-
-function IconVolumeUpvue_type_template_id_6e71f4fc_render(_ctx, _cache) {
-  return ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("svg", IconVolumeUpvue_type_template_id_6e71f4fc_hoisted_1, IconVolumeUpvue_type_template_id_6e71f4fc_hoisted_3))
-}
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconVolumeUp.vue?vue&type=template&id=6e71f4fc
-
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconVolumeUp.vue
-
-const IconVolumeUp_script = {}
-
-;
-const IconVolumeUp_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconVolumeUp_script, [['render',IconVolumeUpvue_type_template_id_6e71f4fc_render]])
-
-/* harmony default export */ const IconVolumeUp = (IconVolumeUp_exports_);
-;// CONCATENATED MODULE: ./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconPhoneTransfer.vue?vue&type=template&id=67939a33
-
-
-const IconPhoneTransfervue_type_template_id_67939a33_hoisted_1 = {
-  "aria-hidden": "true",
-  focusable: "false",
-  "aria-label": "Phone Transfer",
-  class: "d-svg d-svg--system d-svg__phoneTransfer",
-  viewBox: "0 0 24 24"
-}
-const IconPhoneTransfervue_type_template_id_67939a33_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M16.48 14.82c1.11.36 2.3.56 3.53.56.54 0 .99.45.99.99v3.45c0 .55-.28 1.18-.99 1.18C10.73 21 3 13.28 3 3.99 3 3.24 3.65 3 4.19 3h3.46c.54 0 .99.45.99.99 0 1.23.19 2.42.56 3.53.11.35.03.74-.24 1.02L7.01 10.2c1.41 2.93 4.06 5.48 6.89 6.83l1.57-1.97c.27-.27.66-.36 1.01-.24Z" }, null, -1)
-const IconPhoneTransfervue_type_template_id_67939a33_hoisted_3 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M15.49 4.75V3L13 5.5 15.49 8V6.25H21v-1.5h-5.51Z" }, null, -1)
-const IconPhoneTransfervue_type_template_id_67939a33_hoisted_4 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M18.51 9H13v1.5h5.51v1.75L21 9.75l-2.49-2.5V9Z" }, null, -1)
-const IconPhoneTransfervue_type_template_id_67939a33_hoisted_5 = [
-  IconPhoneTransfervue_type_template_id_67939a33_hoisted_2,
-  IconPhoneTransfervue_type_template_id_67939a33_hoisted_3,
-  IconPhoneTransfervue_type_template_id_67939a33_hoisted_4
-]
-
-function IconPhoneTransfervue_type_template_id_67939a33_render(_ctx, _cache) {
-  return ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("svg", IconPhoneTransfervue_type_template_id_67939a33_hoisted_1, IconPhoneTransfervue_type_template_id_67939a33_hoisted_5))
-}
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconPhoneTransfer.vue?vue&type=template&id=67939a33
-
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconPhoneTransfer.vue
-
-const IconPhoneTransfer_script = {}
-
-;
-const IconPhoneTransfer_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconPhoneTransfer_script, [['render',IconPhoneTransfervue_type_template_id_67939a33_render]])
-
-/* harmony default export */ const IconPhoneTransfer = (IconPhoneTransfer_exports_);
-;// CONCATENATED MODULE: ./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconCallEndArrow.vue?vue&type=template&id=9ec0258e
-
-
-const IconCallEndArrowvue_type_template_id_9ec0258e_hoisted_1 = {
-  "aria-hidden": "true",
-  focusable: "false",
-  "aria-label": "Call End Arrow",
-  class: "d-svg d-svg--system d-svg__callEndArrow",
-  viewBox: "0 0 24 24"
-}
-const IconCallEndArrowvue_type_template_id_9ec0258e_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M12 7c-1.6 0-3.15.25-4.6.72v3.1c0 .39-.23.74-.56.9-.98.49-1.87 1.12-2.66 1.85-.18.18-.43.28-.7.28-.28 0-.53-.11-.71-.29L.29 11.08a.956.956 0 0 1-.29-.7c0-.28.11-.53.29-.71C3.34 6.78 7.46 5 12 5c4.54 0 8.66 1.78 11.71 4.67.18.18.29.43.29.71 0 .28-.11.53-.29.71l-2.48 2.48c-.18.18-.43.29-.71.29-.27 0-.52-.11-.7-.28a11.27 11.27 0 0 0-2.67-1.85.996.996 0 0 1-.56-.9v-3.1C15.15 7.25 13.6 7 12 7Z" }, null, -1)
-const IconCallEndArrowvue_type_template_id_9ec0258e_hoisted_3 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M15.59 16.09 13 18.67V11h-2v7.67l-2.59-2.58L7 17.5l5 5 5-5-1.41-1.41Z" }, null, -1)
-const IconCallEndArrowvue_type_template_id_9ec0258e_hoisted_4 = [
-  IconCallEndArrowvue_type_template_id_9ec0258e_hoisted_2,
-  IconCallEndArrowvue_type_template_id_9ec0258e_hoisted_3
-]
-
-function IconCallEndArrowvue_type_template_id_9ec0258e_render(_ctx, _cache) {
-  return ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("svg", IconCallEndArrowvue_type_template_id_9ec0258e_hoisted_1, IconCallEndArrowvue_type_template_id_9ec0258e_hoisted_4))
-}
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconCallEndArrow.vue?vue&type=template&id=9ec0258e
-
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconCallEndArrow.vue
-
-const IconCallEndArrow_script = {}
-
-;
-const IconCallEndArrow_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconCallEndArrow_script, [['render',IconCallEndArrowvue_type_template_id_9ec0258e_render]])
-
-/* harmony default export */ const IconCallEndArrow = (IconCallEndArrow_exports_);
-;// CONCATENATED MODULE: ./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconCallMerge.vue?vue&type=template&id=2c6dac0e
-
-
-const IconCallMergevue_type_template_id_2c6dac0e_hoisted_1 = {
-  "aria-hidden": "true",
-  focusable: "false",
-  "aria-label": "Call Merge",
-  class: "d-svg d-svg--system d-svg__callMerge",
-  viewBox: "0 0 24 24"
-}
-const IconCallMergevue_type_template_id_2c6dac0e_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M17 20.41 18.41 19 15 15.59 13.59 17 17 20.41ZM7.5 8H11v5.59L5.59 19 7 20.41l6-6V8h3.5L12 3.5 7.5 8Z" }, null, -1)
-const IconCallMergevue_type_template_id_2c6dac0e_hoisted_3 = [
-  IconCallMergevue_type_template_id_2c6dac0e_hoisted_2
-]
-
-function IconCallMergevue_type_template_id_2c6dac0e_render(_ctx, _cache) {
-  return ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("svg", IconCallMergevue_type_template_id_2c6dac0e_hoisted_1, IconCallMergevue_type_template_id_2c6dac0e_hoisted_3))
-}
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconCallMerge.vue?vue&type=template&id=2c6dac0e
-
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconCallMerge.vue
-
-const IconCallMerge_script = {}
-
-;
-const IconCallMerge_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconCallMerge_script, [['render',IconCallMergevue_type_template_id_2c6dac0e_render]])
-
-/* harmony default export */ const IconCallMerge = (IconCallMerge_exports_);
-;// CONCATENATED MODULE: ./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconExpertNode.vue?vue&type=template&id=7bb944b9
-
-
-const IconExpertNodevue_type_template_id_7bb944b9_hoisted_1 = {
-  "aria-hidden": "true",
-  focusable: "false",
-  "aria-label": "Expert Node",
-  class: "d-svg d-svg--system d-svg__expertNode",
-  viewBox: "0 0 24 24"
-}
-const IconExpertNodevue_type_template_id_7bb944b9_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", { d: "M18 5H6a1 1 0 0 0-1 1v4.25c0 .414.336.75.75.75h5.42L9.126 8.946l1.41-1.41L15 12l-4.464 4.465-1.41-1.41L11.17 13H5.25A2.25 2.25 0 0 1 3 10.75V6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3v-3h2v3a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1Z" }, null, -1)
-const IconExpertNodevue_type_template_id_7bb944b9_hoisted_3 = [
-  IconExpertNodevue_type_template_id_7bb944b9_hoisted_2
-]
-
-function IconExpertNodevue_type_template_id_7bb944b9_render(_ctx, _cache) {
-  return ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("svg", IconExpertNodevue_type_template_id_7bb944b9_hoisted_1, IconExpertNodevue_type_template_id_7bb944b9_hoisted_3))
-}
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconExpertNode.vue?vue&type=template&id=7bb944b9
-
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconExpertNode.vue
-
-const IconExpertNode_script = {}
-
-;
-const IconExpertNode_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconExpertNode_script, [['render',IconExpertNodevue_type_template_id_7bb944b9_render]])
-
-/* harmony default export */ const IconExpertNode = (IconExpertNode_exports_);
-;// CONCATENATED MODULE: ./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconBranch.vue?vue&type=template&id=71269722
-
-
-const IconBranchvue_type_template_id_71269722_hoisted_1 = {
-  "aria-hidden": "true",
-  focusable: "false",
-  "aria-label": "Branch",
-  class: "d-svg d-svg--system d-svg__branch",
-  viewBox: "0 0 24 24"
-}
-const IconBranchvue_type_template_id_71269722_hoisted_2 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("path", {
-  "fill-rule": "evenodd",
-  "clip-rule": "evenodd",
-  d: "M13 7.83a3.001 3.001 0 1 0-2 0V10H7a3 3 0 0 0-3 3v.17a3.001 3.001 0 1 0 2 0V13a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v3.17a3.001 3.001 0 1 0 2 0V13a3 3 0 0 0-3-3h-4V7.83ZM13 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM5 17a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm15 2a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-}, null, -1)
-const IconBranchvue_type_template_id_71269722_hoisted_3 = [
-  IconBranchvue_type_template_id_71269722_hoisted_2
-]
-
-function IconBranchvue_type_template_id_71269722_render(_ctx, _cache) {
-  return ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("svg", IconBranchvue_type_template_id_71269722_hoisted_1, IconBranchvue_type_template_id_71269722_hoisted_3))
-}
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconBranch.vue?vue&type=template&id=71269722
-
-;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconBranch.vue
-
-const IconBranch_script = {}
-
-;
-const IconBranch_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(IconBranch_script, [['render',IconBranchvue_type_template_id_71269722_render]])
+;// CONCATENATED MODULE: ./recipes/cards/ivr_node/ivr_node.vue?vue&type=template&id=5f1f3c1e
 
-/* harmony default export */ const IconBranch = (IconBranch_exports_);
 ;// CONCATENATED MODULE: ./recipes/cards/ivr_node/ivr_node_constants.js
-
-
-
-
-
-
-
-
 const IVR_NODE_PROMPT_MENU = 'promptmenu';
 const IVR_NODE_PROMPT_COLLECT = 'promptcollect';
 const IVR_NODE_PROMPT_PLAY = 'promptplay';
@@ -20099,14 +19575,14 @@ const IVR_NODE_BRANCH = 'branch';
 const IVR_NODE_TRANSFER = 'transfer';
 const IVR_NODE_HANGUP = 'hangup';
 const IVR_NODE_ICON_TYPES = {
-  [IVR_NODE_PROMPT_MENU]: IconDialpad,
-  [IVR_NODE_PROMPT_COLLECT]: IconPhoneDialer,
-  [IVR_NODE_PROMPT_PLAY]: IconVolumeUp,
-  [IVR_NODE_EXPERT]: IconExpertNode,
-  [IVR_NODE_BRANCH]: IconBranch,
-  [IVR_NODE_GO_TO]: IconCallMerge,
-  [IVR_NODE_TRANSFER]: IconPhoneTransfer,
-  [IVR_NODE_HANGUP]: IconCallEndArrow
+  [IVR_NODE_PROMPT_MENU]: 'keypad',
+  [IVR_NODE_PROMPT_COLLECT]: 'dialer',
+  [IVR_NODE_PROMPT_PLAY]: 'volume-2',
+  [IVR_NODE_EXPERT]: 'corner-down-right',
+  [IVR_NODE_BRANCH]: 'network',
+  [IVR_NODE_GO_TO]: 'chevrons-up',
+  [IVR_NODE_TRANSFER]: 'transfer',
+  [IVR_NODE_HANGUP]: 'phone-hang-up'
 };
 const IVR_NODE_LABELS = {
   [IVR_NODE_PROMPT_MENU]: 'Menu',
@@ -20154,7 +19630,7 @@ const IVR_NODE_COLOR_MAPPING = {
     DtCard: card,
     DtButton: button_button,
     DtDropdown: dropdown,
-    IconMenuVertical: IconMenuVertical
+    DtIcon: icon
   },
   props: {
     /**
@@ -20241,9 +19717,9 @@ const IVR_NODE_COLOR_MAPPING = {
 });
 ;// CONCATENATED MODULE: ./recipes/cards/ivr_node/ivr_node.vue?vue&type=script&lang=js
  
-// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/cards/ivr_node/ivr_node.vue?vue&type=style&index=0&id=660d0b2b&lang=less
-var ivr_nodevue_type_style_index_0_id_660d0b2b_lang_less = __webpack_require__(16);
-;// CONCATENATED MODULE: ./recipes/cards/ivr_node/ivr_node.vue?vue&type=style&index=0&id=660d0b2b&lang=less
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/cards/ivr_node/ivr_node.vue?vue&type=style&index=0&id=5f1f3c1e&lang=less
+var ivr_nodevue_type_style_index_0_id_5f1f3c1e_lang_less = __webpack_require__(723);
+;// CONCATENATED MODULE: ./recipes/cards/ivr_node/ivr_node.vue?vue&type=style&index=0&id=5f1f3c1e&lang=less
 
 ;// CONCATENATED MODULE: ./recipes/cards/ivr_node/ivr_node.vue
 
@@ -20253,7 +19729,7 @@ var ivr_nodevue_type_style_index_0_id_660d0b2b_lang_less = __webpack_require__(1
 ;
 
 
-const ivr_node_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(ivr_nodevue_type_script_lang_js, [['render',ivr_nodevue_type_template_id_660d0b2b_render]])
+const ivr_node_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(ivr_nodevue_type_script_lang_js, [['render',ivr_nodevue_type_template_id_5f1f3c1e_render]])
 
 /* harmony default export */ const ivr_node = (ivr_node_exports_);
 ;// CONCATENATED MODULE: ./recipes/cards/ivr_node/index.js