@dialpad/dialtone-vue 3.21.0 → 3.22.0

package/dist/dialtone-vue.common.js

@@ -49,7 +49,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".d-context-menu-list{width:24rem}", ""
 
 /***/ }),
 
-/***/ 826:
+/***/ 640:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -289,7 +289,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".tippy-box[data-popper-escaped] .d-too
 
 /***/ }),
 
-/***/ 20:
+/***/ 844:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -558,19 +558,19 @@ var update = add("06fe8c46", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
-/***/ 633:
+/***/ 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__(826);
+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("e7bd0444", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("1c8d62da", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
@@ -718,19 +718,19 @@ var update = add("7a6863ba", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
-/***/ 170:
+/***/ 476:
 /***/ ((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__(20);
+var content = __webpack_require__(844);
 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("5dfba78e", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("15451cd3", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
@@ -1159,6 +1159,7 @@ __webpack_require__.d(__webpack_exports__, {
   "DtDropdownList": () => (/* reexport */ dropdown_list),
   "DtDropdownSeparator": () => (/* reexport */ dropdown_separator),
   "DtGroupableInputMixin": () => (/* reexport */ GroupableMixin),
+  "DtIcon": () => (/* reexport */ icon),
   "DtInput": () => (/* reexport */ input_input),
   "DtInputGroup": () => (/* reexport */ input_group_input_group),
   "DtInputGroupMixin": () => (/* reexport */ InputGroupMixin),
@@ -1168,6 +1169,7 @@ __webpack_require__.d(__webpack_exports__, {
   "DtLazyShow": () => (/* reexport */ lazy_show),
   "DtLink": () => (/* reexport */ link_link),
   "DtListItem": () => (/* reexport */ list_item),
+  "DtListItemGroup": () => (/* reexport */ list_item_group),
   "DtListSection": () => (/* reexport */ list_section),
   "DtModal": () => (/* reexport */ modal_modal),
   "DtNotice": () => (/* reexport */ notice),
@@ -1458,6 +1460,15 @@ const flushPromises = () => {
     scheduler(resolve);
   });
 };
+/**
+ * Transform a string from kebab-case to pascalCase
+ * @param string
+ * @returns {string}
+ */
+
+const kebabCaseToPascalCase = string => {
+  return string.toLowerCase().split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join('');
+};
 /* harmony default export */ const utils = ({
   getUniqueString,
   formatMessages,
@@ -1465,7 +1476,8 @@ const flushPromises = () => {
   hasFormattedMessageOfType,
   getValidationState,
   htmlFragment,
-  flushPromises
+  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/index.js??ruleSet[0].use[0]!./components/avatar/avatar.vue?vue&type=script&lang=js
 
@@ -11879,16 +11891,16 @@ function dropdown_listvue_type_template_id_eefb7378_render(_ctx, _cache, $props,
 const dropdown_list_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(dropdown_listvue_type_script_lang_js, [['render',dropdown_listvue_type_template_id_eefb7378_render]])
 
 /* harmony default export */ const dropdown_list = (dropdown_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/dropdown/dropdown_separator.vue?vue&type=template&id=6a948a17
+;// 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/dropdown/dropdown_separator.vue?vue&type=template&id=703ad17c
 
-const dropdown_separatorvue_type_template_id_6a948a17_hoisted_1 = {
+const dropdown_separatorvue_type_template_id_703ad17c_hoisted_1 = {
   "aria-hidden": "true",
-  class: "dt-list-separator d-bgc-black-075 d-my8"
+  class: "dt-list-separator d-bgc-black-300 d-my8"
 };
-function dropdown_separatorvue_type_template_id_6a948a17_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)("li", dropdown_separatorvue_type_template_id_6a948a17_hoisted_1);
+function dropdown_separatorvue_type_template_id_703ad17c_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)("li", dropdown_separatorvue_type_template_id_703ad17c_hoisted_1);
 }
-;// CONCATENATED MODULE: ./components/dropdown/dropdown_separator.vue?vue&type=template&id=6a948a17
+;// CONCATENATED MODULE: ./components/dropdown/dropdown_separator.vue?vue&type=template&id=703ad17c
 
 ;// 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/dropdown/dropdown_separator.vue?vue&type=script&lang=js
 /* harmony default export */ const dropdown_separatorvue_type_script_lang_js = ({
@@ -11896,9 +11908,9 @@ function dropdown_separatorvue_type_template_id_6a948a17_render(_ctx, _cache, $p
 });
 ;// CONCATENATED MODULE: ./components/dropdown/dropdown_separator.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/dropdown/dropdown_separator.vue?vue&type=style&index=0&id=6a948a17&lang=less
-var dropdown_separatorvue_type_style_index_0_id_6a948a17_lang_less = __webpack_require__(633);
-;// CONCATENATED MODULE: ./components/dropdown/dropdown_separator.vue?vue&type=style&index=0&id=6a948a17&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/dropdown/dropdown_separator.vue?vue&type=style&index=0&id=703ad17c&lang=less
+var dropdown_separatorvue_type_style_index_0_id_703ad17c_lang_less = __webpack_require__(412);
+;// CONCATENATED MODULE: ./components/dropdown/dropdown_separator.vue?vue&type=style&index=0&id=703ad17c&lang=less
 
 ;// CONCATENATED MODULE: ./components/dropdown/dropdown_separator.vue
 
@@ -11908,7 +11920,7 @@ var dropdown_separatorvue_type_style_index_0_id_6a948a17_lang_less = __webpack_r
 ;
 
 
-const dropdown_separator_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(dropdown_separatorvue_type_script_lang_js, [['render',dropdown_separatorvue_type_template_id_6a948a17_render]])
+const dropdown_separator_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(dropdown_separatorvue_type_script_lang_js, [['render',dropdown_separatorvue_type_template_id_703ad17c_render]])
 
 /* harmony default export */ const dropdown_separator = (dropdown_separator_exports_);
 ;// CONCATENATED MODULE: ./components/dropdown/index.js
@@ -13832,6 +13844,89 @@ const list_section_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(list_
 /* harmony default export */ const list_section = (list_section_exports_);
 ;// CONCATENATED MODULE: ./components/list_section/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/list_item_group/list_item_group.vue?vue&type=template&id=f5aed6e8
+
+const list_item_groupvue_type_template_id_f5aed6e8_hoisted_1 = ["id", "aria-labelledby"];
+const list_item_groupvue_type_template_id_f5aed6e8_hoisted_2 = ["id"];
+function list_item_groupvue_type_template_id_f5aed6e8_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)("ul", {
+    id: $props.id,
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-ps-relative', 'd-px0', $props.listClass]),
+    role: "group",
+    "data-qa": "dt-dropdown-list-wrapper",
+    "aria-labelledby": `${$props.id}-heading`
+  }, [$props.heading ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("li", {
+    key: 0,
+    id: `${$props.id}-heading`,
+    role: "presentation",
+    "data-qa": "dt-dropdown-list-heading",
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['dt-dropdown-list--header', $props.headingClass])
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "headingSlot", {}, () => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createTextVNode)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.heading), 1)])], 10, list_item_groupvue_type_template_id_f5aed6e8_hoisted_2)) : (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, list_item_groupvue_type_template_id_f5aed6e8_hoisted_1);
+}
+;// CONCATENATED MODULE: ./components/list_item_group/list_item_group.vue?vue&type=template&id=f5aed6e8
+
+;// CONCATENATED MODULE: ./components/list_item_group/list_item_group_constants.js
+const DEFAULT_CONSTANTS = null;
+/* harmony default export */ const list_item_group_constants = ({
+  DEFAULT_CONSTANTS
+});
+;// 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_group/list_item_group.vue?vue&type=script&lang=js
+
+
+/* harmony default export */ const list_item_groupvue_type_script_lang_js = ({
+  name: 'DtListItemGroup',
+  props: {
+    /**
+     * Id of the List Item Group
+     */
+    id: {
+      type: String,
+
+      default() {
+        return getUniqueString();
+      }
+
+    },
+
+    /**
+     * List's heading.
+     */
+    heading: {
+      type: String,
+      default: ''
+    },
+
+    /**
+     * Additional class to style the heading
+     */
+    headingClass: {
+      type: [String, Array, Object],
+      default: ''
+    },
+
+    /**
+     * Additional class for the wrapper list element.
+     */
+    listClass: {
+      type: [String, Array, Object],
+      default: ''
+    }
+  }
+});
+;// CONCATENATED MODULE: ./components/list_item_group/list_item_group.vue?vue&type=script&lang=js
+ 
+;// CONCATENATED MODULE: ./components/list_item_group/list_item_group.vue
+
+
+
+
+;
+const list_item_group_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(list_item_groupvue_type_script_lang_js, [['render',list_item_groupvue_type_template_id_f5aed6e8_render]])
+
+/* harmony default export */ const list_item_group = (list_item_group_exports_);
+;// CONCATENATED MODULE: ./components/list_item_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/notice/notice.vue?vue&type=template&id=28b8ab50
 
 function noticevue_type_template_id_28b8ab50_render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -16300,44 +16395,49 @@ const toast_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(toastvue_typ
 ;// CONCATENATED MODULE: ./components/toast/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/toggle/toggle.vue?vue&type=template&id=5692f89a
+;// 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/toggle/toggle.vue?vue&type=template&id=54ed4aa0
 
-const togglevue_type_template_id_5692f89a_hoisted_1 = {
+const togglevue_type_template_id_54ed4aa0_hoisted_1 = {
   class: "d-d-flex d-ai-center"
 };
-const togglevue_type_template_id_5692f89a_hoisted_2 = ["for"];
-const togglevue_type_template_id_5692f89a_hoisted_3 = ["id", "aria-checked", "disabled", "aria-disabled"];
-
-const togglevue_type_template_id_5692f89a_hoisted_4 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", {
+const togglevue_type_template_id_54ed4aa0_hoisted_2 = ["for"];
+const togglevue_type_template_id_54ed4aa0_hoisted_3 = ["id", "role", "aria-checked", "disabled", "aria-disabled"];
+const togglevue_type_template_id_54ed4aa0_hoisted_4 = {
+  key: 0,
   class: "d-toggle__inner"
-}, null, -1);
-
-const togglevue_type_template_id_5692f89a_hoisted_5 = [togglevue_type_template_id_5692f89a_hoisted_4];
-function togglevue_type_template_id_5692f89a_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", togglevue_type_template_id_5692f89a_hoisted_1, [_ctx.$slots.default ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("label", (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+};
+function togglevue_type_template_id_54ed4aa0_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", togglevue_type_template_id_54ed4aa0_hoisted_1, [_ctx.$slots.default ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("label", (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
     key: 0,
     class: $props.labelClass,
     for: $props.id
   }, $props.labelChildProps, {
     "data-qa": "toggle-label"
-  }), [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")], 16, togglevue_type_template_id_5692f89a_hoisted_2)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("button", (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+  }), [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")], 16, togglevue_type_template_id_54ed4aa0_hoisted_2)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("button", (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
     id: $props.id,
-    role: "switch",
+    role: $options.toggleRole,
     type: "button",
     "aria-checked": $data.internalChecked.toString(),
     disabled: $props.disabled,
     "aria-disabled": $props.disabled.toString(),
-    class: ['d-toggle', {
-      'd-toggle--checked': $data.internalChecked,
-      'd-toggle--disabled': $props.disabled
-    }]
-  }, $options.inputListeners), togglevue_type_template_id_5692f89a_hoisted_5, 16, togglevue_type_template_id_5692f89a_hoisted_3)]);
+    class: $options.toggleClasses
+  }, $options.inputListeners), [$props.showIcon ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", togglevue_type_template_id_54ed4aa0_hoisted_4)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 16, togglevue_type_template_id_54ed4aa0_hoisted_3)]);
 }
-;// CONCATENATED MODULE: ./components/toggle/toggle.vue?vue&type=template&id=5692f89a
+;// CONCATENATED MODULE: ./components/toggle/toggle.vue?vue&type=template&id=54ed4aa0
 
+;// CONCATENATED MODULE: ./components/toggle/toggle_constants.js
+const TOGGLE_SIZE_MODIFIERS = {
+  sm: 'd-toggle--small',
+  md: ''
+};
+const TOGGLE_CHECKED_VALUES = [false, true, 'mixed'];
+/* harmony default export */ const toggle_constants = ({
+  TOGGLE_SIZE_MODIFIERS
+});
 ;// 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/toggle/toggle.vue?vue&type=script&lang=js
 
 
+
 /**
  * A toggle (or "switch") is a button control element that allows the user to make a binary (on/off) selection.
  * @see https://dialpad.design/components/toggle.html
@@ -16375,11 +16475,31 @@ function togglevue_type_template_id_5692f89a_render(_ctx, _cache, $props, $setup
     /**
      * Value of the toggle
      * @model checked
-     * @values true, false
+     * @values true, false, 'mixed'
      */
     checked: {
+      type: [Boolean, String],
+      default: false,
+      validator: v => TOGGLE_CHECKED_VALUES.includes(v)
+    },
+
+    /**
+     * The size of the toggle.
+     * @values sm, md
+     */
+    size: {
+      type: String,
+      default: 'md',
+      validator: s => Object.keys(TOGGLE_SIZE_MODIFIERS).includes(s)
+    },
+
+    /**
+     * Shows the icon
+     * @values true, false
+     */
+    showIcon: {
       type: Boolean,
-      default: false
+      default: true
     },
 
     /**
@@ -16419,6 +16539,22 @@ function togglevue_type_template_id_5692f89a_render(_ctx, _cache, $props, $setup
       return { ...this.$attrs,
         onClick: _ => this.toggleCheckedValue()
       };
+    },
+
+    isIndeterminate() {
+      return this.internalChecked === 'mixed';
+    },
+
+    toggleRole() {
+      return this.isIndeterminate ? 'checkbox' : 'switch';
+    },
+
+    toggleClasses() {
+      return ['d-toggle', TOGGLE_SIZE_MODIFIERS[this.size], {
+        'd-toggle--checked': this.internalChecked === true,
+        'd-toggle--disabled': this.disabled,
+        'd-toggle--indeterminate': this.isIndeterminate
+      }];
     }
 
   },
@@ -16463,7 +16599,7 @@ function togglevue_type_template_id_5692f89a_render(_ctx, _cache, $props, $setup
 
 
 ;
-const toggle_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(togglevue_type_script_lang_js, [['render',togglevue_type_template_id_5692f89a_render]])
+const toggle_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(togglevue_type_script_lang_js, [['render',togglevue_type_template_id_54ed4aa0_render]])
 
 /* harmony default export */ const toggle = (toggle_exports_);
 ;// CONCATENATED MODULE: ./components/toggle/index.js
@@ -17482,6 +17618,97 @@ 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=d56f4446
 
 const combobox_with_popovervue_type_template_id_d56f4446_hoisted_1 = ["id"];
@@ -18605,9 +18832,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=20cb5327
+;// 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
 
-function callbar_buttonvue_type_template_id_20cb5327_render(_ctx, _cache, $props, $setup, $data, $options) {
+function callbar_buttonvue_type_template_id_a7118c92_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");
@@ -18634,7 +18861,7 @@ function callbar_buttonvue_type_template_id_20cb5327_render(_ctx, _cache, $props
     _: 3
   }, 8, ["id"]);
 }
-;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=template&id=20cb5327
+;// CONCATENATED MODULE: ./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/index.js??ruleSet[0].use[0]!./recipes/buttons/callbar_button/callbar_button.vue?vue&type=script&lang=js
 
@@ -18723,7 +18950,7 @@ function callbar_buttonvue_type_template_id_20cb5327_render(_ctx, _cache, $props
   },
   computed: {
     callbarButtonClass() {
-      return [this.buttonClass, 'dt-recipe-callbar-button', 'd-stack4', 'd-px0', {
+      return [this.buttonClass, 'dt-recipe-callbar-button', 'd-stack4', 'd-px0', 'h:d-bgc-black-200', 'h:d-bgo50', {
         'dt-recipe-callbar-button--circle': this.circle,
         'd-btn--icon-only': this.circle,
         'dt-recipe-callbar-button--active': this.active,
@@ -18735,9 +18962,9 @@ function callbar_buttonvue_type_template_id_20cb5327_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=20cb5327&lang=less
-var callbar_buttonvue_type_style_index_0_id_20cb5327_lang_less = __webpack_require__(170);
-;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=style&index=0&id=20cb5327&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=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
 
 ;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue
 
@@ -18747,7 +18974,7 @@ var callbar_buttonvue_type_style_index_0_id_20cb5327_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_20cb5327_render]])
+const callbar_button_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(callbar_buttonvue_type_script_lang_js, [['render',callbar_buttonvue_type_template_id_a7118c92_render]])
 
 /* harmony default export */ const callbar_button = (callbar_button_exports_);
 ;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/index.js
@@ -19071,26 +19298,26 @@ const callbar_button_with_popover_exports_ = /*#__PURE__*/(0,exportHelper/* defa
 /* harmony default export */ const callbar_button_with_popover = (callbar_button_with_popover_exports_);
 ;// CONCATENATED MODULE: ./recipes/buttons/callbar_button_with_popover/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/list_items/contact_info/contact_info.vue?vue&type=template&id=466e560c
+;// 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/list_items/contact_info/contact_info.vue?vue&type=template&id=c1f377a8
 
-const contact_infovue_type_template_id_466e560c_hoisted_1 = {
+const contact_infovue_type_template_id_c1f377a8_hoisted_1 = {
   class: "d-ps-relative",
   "data-qa": "contact-info-left"
 };
-const contact_infovue_type_template_id_466e560c_hoisted_2 = ["src", "alt"];
-const contact_infovue_type_template_id_466e560c_hoisted_3 = {
+const contact_infovue_type_template_id_c1f377a8_hoisted_2 = ["src", "alt"];
+const contact_infovue_type_template_id_c1f377a8_hoisted_3 = {
   "data-qa": "contact-info-header"
 };
-const contact_infovue_type_template_id_466e560c_hoisted_4 = {
+const contact_infovue_type_template_id_c1f377a8_hoisted_4 = {
   "data-qa": "contact-info-subtitle"
 };
-const contact_infovue_type_template_id_466e560c_hoisted_5 = {
+const contact_infovue_type_template_id_c1f377a8_hoisted_5 = {
   "data-qa": "contact-info-bottom"
 };
-const contact_infovue_type_template_id_466e560c_hoisted_6 = {
+const contact_infovue_type_template_id_c1f377a8_hoisted_6 = {
   "data-qa": "contact-info-right"
 };
-function contact_infovue_type_template_id_466e560c_render(_ctx, _cache, $props, $setup, $data, $options) {
+function contact_infovue_type_template_id_c1f377a8_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_avatar = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-avatar");
 
   const _component_dt_list_item = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-list-item");
@@ -19101,7 +19328,7 @@ function contact_infovue_type_template_id_466e560c_render(_ctx, _cache, $props,
     "element-type": "div",
     "data-qa": "contact-info"
   }, {
-    left: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_infovue_type_template_id_466e560c_hoisted_1, [$props.avatarSrc ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_avatar, {
+    left: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_infovue_type_template_id_c1f377a8_hoisted_1, [$props.avatarSrc ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_avatar, {
       key: 0,
       size: "lg"
     }, {
@@ -19109,7 +19336,7 @@ function contact_infovue_type_template_id_466e560c_render(_ctx, _cache, $props,
         "data-qa": "dt-contact-avatar",
         src: $props.avatarSrc,
         alt: $props.avatarInitials
-      }, null, 8, contact_infovue_type_template_id_466e560c_hoisted_2)]),
+      }, null, 8, contact_infovue_type_template_id_c1f377a8_hoisted_2)]),
       _: 1
     })) : $props.avatarInitials ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_avatar, {
       key: 1,
@@ -19124,14 +19351,14 @@ function contact_infovue_type_template_id_466e560c_render(_ctx, _cache, $props,
       class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-ba', 'd-bc-white', 'd-baw2', 'd-bar2', 'd-ps-absolute', 'd-bn1', 'd-rn1', 'd-w20p', 'd-h20p', $data.USER_STATUS_COLOR_MODIFIERS[$props.userStatusColor]]),
       "data-qa": "contact-info-user-status"
     }, "   ", 2)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)])]),
-    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_infovue_type_template_id_466e560c_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "header")])]),
-    subtitle: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_infovue_type_template_id_466e560c_hoisted_4, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "subtitle")])]),
-    bottom: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_infovue_type_template_id_466e560c_hoisted_5, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "bottom")])]),
-    right: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_infovue_type_template_id_466e560c_hoisted_6, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "right")])]),
+    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_infovue_type_template_id_c1f377a8_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "header")])]),
+    subtitle: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_infovue_type_template_id_c1f377a8_hoisted_4, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "subtitle")])]),
+    bottom: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_infovue_type_template_id_c1f377a8_hoisted_5, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "bottom")])]),
+    right: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_infovue_type_template_id_c1f377a8_hoisted_6, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "right")])]),
     _: 3
   }, 8, ["id", "role"]);
 }
-;// CONCATENATED MODULE: ./recipes/list_items/contact_info/contact_info.vue?vue&type=template&id=466e560c
+;// CONCATENATED MODULE: ./recipes/list_items/contact_info/contact_info.vue?vue&type=template&id=c1f377a8
 
 ;// CONCATENATED MODULE: ./recipes/list_items/contact_info/contact_info_constants.js
 const USER_STATUS_COLOR_MODIFIERS = {
@@ -19184,6 +19411,8 @@ const USER_STATUS_COLOR_MODIFIERS = {
 
     /**
      * Optional avatar image url.
+     * if provided, it's also required to provide a value in the `avatarInitials` prop to use
+     * in the alt attribute of the avatar.
      */
     avatarSrc: {
       type: String,
@@ -19238,7 +19467,7 @@ const USER_STATUS_COLOR_MODIFIERS = {
 
 
 ;
-const contact_info_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(contact_infovue_type_script_lang_js, [['render',contact_infovue_type_template_id_466e560c_render]])
+const contact_info_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(contact_infovue_type_script_lang_js, [['render',contact_infovue_type_template_id_c1f377a8_render]])
 
 /* harmony default export */ const contact_info = (contact_info_exports_);
 ;// CONCATENATED MODULE: ./recipes/list_items/contact_info/index.js
@@ -19955,6 +20184,8 @@ const grouped_chip_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(group
 
 
 
+
+