@dialpad/dialtone-vue 2.35.0 → 2.36.1

package/dist/dialtone-vue.common.js

@@ -138,7 +138,7 @@ __webpack_require__.r(__webpack_exports__);
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, ".dt-list-item:not(.dt-list-item--static){cursor:pointer}.dt-list-item--focusable:focus,.dt-list-item--focusable:focus-within,.dt-list-item--highlighted{background-color:hsla(var(--black-500-h),var(--black-500-s),var(--black-500-l),.15)}.dt-list-item:focus-visible{outline-color:var(--purple-500)}", ""]);
+___CSS_LOADER_EXPORT___.push([module.id, ".dt-list-item:not(.dt-list-item--static){cursor:pointer}.dt-list-item--focusable:focus,.dt-list-item--focusable:focus-within,.dt-list-item--highlighted{background-color:hsla(var(--black-500-h),var(--black-500-s),var(--black-500-l),.15)}.dt-list-item:focus-visible{border-radius:var(--br4);outline:none;box-shadow:inset 0 0 0 var(--su2) var(--focus-ring)}", ""]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -1139,6 +1139,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),
@@ -1470,6 +1471,24 @@ 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('');
+};
+/**
+ * Transform a string from PascalCase to kebab-case
+ * @param string
+ * @returns {string}
+ */
+
+const pascalCaseToKebabCase = string => {
+  return string.replace(/\.?([A-Z0-9]+)/g, (x, y) => '-' + y.toLowerCase()).replace(/^-/, '');
+};
 /* harmony default export */ const utils = ({
   getUniqueString,
   formatMessages,
@@ -1477,7 +1496,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[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/avatar/avatar.vue?vue&type=script&lang=js&
 //
@@ -4175,13 +4195,13 @@ var combobox_loading_listvue_type_template_id_07d9971d_render = function () {var
 var combobox_loading_listvue_type_template_id_07d9971d_staticRenderFns = []
 
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/list_item/list_item.vue?vue&type=template&id=11a83550&
-var list_itemvue_type_template_id_11a83550_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.elementType,_vm._g({tag:"component",class:['dt-list-item d-ls-none focus-visible', {
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/list_item/list_item.vue?vue&type=template&id=2554ff00&
+var list_itemvue_type_template_id_2554ff00_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.elementType,_vm._g({tag:"component",class:['dt-list-item d-ls-none', {
     'dt-list-item--focusable': _vm.isFocusable,
     'dt-list-item--highlighted': _vm.isHighlighted,
     'dt-list-item--static': !_vm.isHoverable,
   }],attrs:{"id":_vm.id,"tabindex":_vm.isFocusable ? 0 : -1,"role":_vm.role,"aria-selected":_vm.isHighlighted}},_vm.listItemListeners),[(_vm.listItemType)?_c(_vm.listItemType,{tag:"component",scopedSlots:_vm._u([_vm._l((_vm.$slots),function(_,slotName){return {key:slotName,fn:function(){return [_vm._t(slotName)]},proxy:true}})],null,true)}):_vm._t("default")],2)}
-var list_itemvue_type_template_id_11a83550_staticRenderFns = []
+var list_itemvue_type_template_id_2554ff00_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./components/list_item/list_item_constants.js
@@ -4509,8 +4529,8 @@ var list_itemvue_type_style_index_0_lang_less_ = __webpack_require__(502);
 
 var list_item_component = normalizeComponent(
   list_item_list_itemvue_type_script_lang_js_,
-  list_itemvue_type_template_id_11a83550_render,
-  list_itemvue_type_template_id_11a83550_staticRenderFns,
+  list_itemvue_type_template_id_2554ff00_render,
+  list_itemvue_type_template_id_2554ff00_staticRenderFns,
   false,
   null,
   null,
@@ -6571,8 +6591,8 @@ return [_c('ul',{ref:"listWrapper",class:_vm.listClasses,attrs:{"id":_vm.listId,
 var dropdownvue_type_template_id_1b8b46fc_staticRenderFns = []
 
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/popover/popover.vue?vue&type=template&id=50a89e08&
-var popovervue_type_template_id_50a89e08_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.modal && _vm.isOpen)?_c('portal',[_c('div',{staticClass:"d-modal--transparent",attrs:{"aria-hidden":_vm.modal && _vm.isOpen ? 'false' : 'true'},on:{"click":function($event){$event.preventDefault();$event.stopPropagation();}}})]):_vm._e(),_c(_vm.elementType,_vm._g({ref:"popover",tag:"component",class:['d-popover', { 'd-popover__anchor--opened': _vm.isOpen }],attrs:{"data-qa":"dt-popover-container"}},_vm.$listeners),[_c('div',{ref:"anchor",attrs:{"id":!_vm.ariaLabelledby && _vm.labelledBy,"data-qa":"dt-popover-anchor","tabindex":_vm.openOnContext ? 0 : undefined},on:{"!click":function($event){return _vm.defaultToggleOpen.apply(null, arguments)},"contextmenu":function($event){$event.preventDefault();return _vm.onContext.apply(null, arguments)},"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)}],"wheel":function (e) { return (_vm.isOpen && _vm.modal) && e.preventDefault(); },"!keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"escape",undefined,$event.key,undefined)){ return null; }return _vm.closePopover.apply(null, arguments)}}},[_vm._t("anchor",null,{"attrs":{
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/popover/popover.vue?vue&type=template&id=2ecb24a7&
+var popovervue_type_template_id_2ecb24a7_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.modal && _vm.isOpen)?_c('portal',[_c('div',{staticClass:"d-modal--transparent",attrs:{"aria-hidden":_vm.modal && _vm.isOpen ? 'false' : 'true'},on:{"click":function($event){$event.preventDefault();$event.stopPropagation();}}})]):_vm._e(),_c(_vm.elementType,_vm._g({ref:"popover",tag:"component",class:['d-popover', { 'd-popover__anchor--opened': _vm.isOpen }],attrs:{"data-qa":"dt-popover-container"}},_vm.$listeners),[_c('div',{ref:"anchor",attrs:{"id":!_vm.ariaLabelledby && _vm.labelledBy,"data-qa":"dt-popover-anchor","tabindex":_vm.openOnContext ? 0 : undefined},on:{"!click":function($event){return _vm.defaultToggleOpen.apply(null, arguments)},"contextmenu":_vm.onContext,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)}],"wheel":function (e) { return (_vm.isOpen && _vm.modal) && e.preventDefault(); },"!keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"escape",undefined,$event.key,undefined)){ return null; }return _vm.closePopover.apply(null, arguments)}}},[_vm._t("anchor",null,{"attrs":{
           'aria-expanded': _vm.isOpen.toString(),
           'aria-controls': _vm.id,
           'aria-haspopup': _vm.role,
@@ -6583,7 +6603,7 @@ var popovervue_type_template_id_50a89e08_render = function () {var _vm=this;var
           'd-popover__content',
           _vm.POPOVER_PADDING_CLASSES[_vm.padding],
           _vm.contentClass ],attrs:{"data-qa":"dt-popover-content"}},[_vm._t("content",null,{"close":_vm.closePopover})],2),(_vm.$slots.footerContent)?_c('popover-header-footer',{ref:"popover__footer",class:_vm.POPOVER_HEADER_FOOTER_PADDING_CLASSES[_vm.padding],attrs:{"type":"footer","content-class":_vm.footerClass},scopedSlots:_vm._u([{key:"content",fn:function(){return [_vm._t("footerContent",null,{"close":_vm.closePopover})]},proxy:true}],null,true)}):_vm._e(),(_vm.showVisuallyHiddenClose)?_c('sr-only-close-button',{attrs:{"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel},on:{"close":_vm.closePopover}}):_vm._e()],1)],1)],1)}
-var popovervue_type_template_id_50a89e08_staticRenderFns = []
+var popovervue_type_template_id_2ecb24a7_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getBoundingClientRect.js
@@ -12071,6 +12091,7 @@ var popover_header_footer_component = normalizeComponent(
         return;
       }
 
+      event.preventDefault();
       (_this$tip3 = this.tip) === null || _this$tip3 === void 0 ? void 0 : _this$tip3.setProps({
         placement: 'right-start'
       });
@@ -12255,8 +12276,8 @@ var popovervue_type_style_index_0_lang_less_ = __webpack_require__(230);
 
 var popover_component = normalizeComponent(
   popover_popovervue_type_script_lang_js_,
-  popovervue_type_template_id_50a89e08_render,
-  popovervue_type_template_id_50a89e08_staticRenderFns,
+  popovervue_type_template_id_2ecb24a7_render,
+  popovervue_type_template_id_2ecb24a7_staticRenderFns,
   false,
   null,
   null,
@@ -19079,6 +19100,111 @@ var root_layout_component = normalizeComponent(
 ;// CONCATENATED MODULE: ./components/root_layout/index.js
 
 
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/icon/icon.vue?vue&type=template&id=1ca37c55&
+var iconvue_type_template_id_1ca37c55_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.currentIcon,{tag:"component",class:_vm.iconSize,attrs:{"data-qa":"dt-icon"}})}
+var iconvue_type_template_id_1ca37c55_staticRenderFns = []
+
+
+;// 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[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./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&
+ /* harmony default export */ const icon_iconvue_type_script_lang_js_ = (iconvue_type_script_lang_js_); 
+;// CONCATENATED MODULE: ./components/icon/icon.vue
+
+
+
+
+
+/* normalize component */
+;
+var icon_component = normalizeComponent(
+  icon_iconvue_type_script_lang_js_,
+  iconvue_type_template_id_1ca37c55_render,
+  iconvue_type_template_id_1ca37c55_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ const icon = (icon_component.exports);
+;// CONCATENATED MODULE: ./components/icon/index.js
+
 ;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=96ff85ec&
 var combobox_with_popovervue_type_template_id_96ff85ec_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-combobox',_vm._g({ref:"combobox",attrs:{"loading":_vm.loading,"empty-list":_vm.emptyList,"empty-state-message":_vm.emptyStateMessage,"show-list":_vm.isListShown,"on-beginning-of-list":_vm.onBeginningOfList,"on-end-of-list":_vm.onEndOfList,"list-aria-label":_vm.listAriaLabel,"list-rendered-outside":true,"list-id":_vm.listId,"data-qa":"dt-combobox"},scopedSlots:_vm._u([{key:"input",fn:function(ref){
 var inputProps = ref.inputProps;
@@ -21669,6 +21795,7 @@ var grouped_chip_component = normalizeComponent(
 
 
 
+
 
 
  /// Recipes

package/dist/dialtone-vue.umd.js

@@ -1,13 +1,13 @@
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
-		module.exports = factory(require("vue"));
+		module.exports = factory();
 	else if(typeof define === 'function' && define.amd)
 		define([], factory);
 	else if(typeof exports === 'object')
-		exports["dialtone-vue"] = factory(require("vue"));
+		exports["dialtone-vue"] = factory();
 	else
-		root["dialtone-vue"] = factory(root["Vue"]);
-})((typeof self !== 'undefined' ? self : this), (__WEBPACK_EXTERNAL_MODULE__203__) => {
+		root["dialtone-vue"] = factory();
+})((typeof self !== 'undefined' ? self : this), () => {
 return /******/ (() => { // webpackBootstrap
 /******/ 	var __webpack_modules__ = ({
 
@@ -148,7 +148,7 @@ __webpack_require__.r(__webpack_exports__);
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, ".dt-list-item:not(.dt-list-item--static){cursor:pointer}.dt-list-item--focusable:focus,.dt-list-item--focusable:focus-within,.dt-list-item--highlighted{background-color:hsla(var(--black-500-h),var(--black-500-s),var(--black-500-l),.15)}.dt-list-item:focus-visible{outline-color:var(--purple-500)}", ""]);
+___CSS_LOADER_EXPORT___.push([module.id, ".dt-list-item:not(.dt-list-item--static){cursor:pointer}.dt-list-item--focusable:focus,.dt-list-item--focusable:focus-within,.dt-list-item--highlighted{background-color:hsla(var(--black-500-h),var(--black-500-s),var(--black-500-l),.15)}.dt-list-item:focus-visible{border-radius:var(--br4);outline:none;box-shadow:inset 0 0 0 var(--su2) var(--focus-ring)}", ""]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -1036,14 +1036,6 @@ function applyToTag (styleElement, obj) {
 }
 
 
-/***/ }),
-
-/***/ 203:
-/***/ ((module) => {
-
-"use strict";
-module.exports = __WEBPACK_EXTERNAL_MODULE__203__;
-
 /***/ })
 
 /******/ 	});
@@ -1157,6 +1149,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),
@@ -1276,9 +1269,9 @@ var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._sel
 var staticRenderFns = []
 
 
-// EXTERNAL MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
-var external_commonjs_vue_commonjs2_vue_root_Vue_ = __webpack_require__(203);
-var external_commonjs_vue_commonjs2_vue_root_Vue_default = /*#__PURE__*/__webpack_require__.n(external_commonjs_vue_commonjs2_vue_root_Vue_);
+;// CONCATENATED MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
+const external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject = require("vue");
+var external_commonjs_vue_commonjs2_vue_root_Vue_default = /*#__PURE__*/__webpack_require__.n(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject);
 ;// CONCATENATED MODULE: ./components/avatar/avatar_constants.js
 const AVATAR_KIND_MODIFIERS = {
   default: '',
@@ -1488,6 +1481,24 @@ 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('');
+};
+/**
+ * Transform a string from PascalCase to kebab-case
+ * @param string
+ * @returns {string}
+ */
+
+const pascalCaseToKebabCase = string => {
+  return string.replace(/\.?([A-Z0-9]+)/g, (x, y) => '-' + y.toLowerCase()).replace(/^-/, '');
+};
 /* harmony default export */ const utils = ({
   getUniqueString,
   formatMessages,
@@ -1495,7 +1506,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-80[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/avatar/avatar.vue?vue&type=script&lang=js&
 //
@@ -4193,13 +4205,13 @@ var combobox_loading_listvue_type_template_id_07d9971d_render = function () {var
 var combobox_loading_listvue_type_template_id_07d9971d_staticRenderFns = []
 
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/list_item/list_item.vue?vue&type=template&id=11a83550&
-var list_itemvue_type_template_id_11a83550_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.elementType,_vm._g({tag:"component",class:['dt-list-item d-ls-none focus-visible', {
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/list_item/list_item.vue?vue&type=template&id=2554ff00&
+var list_itemvue_type_template_id_2554ff00_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.elementType,_vm._g({tag:"component",class:['dt-list-item d-ls-none', {
     'dt-list-item--focusable': _vm.isFocusable,
     'dt-list-item--highlighted': _vm.isHighlighted,
     'dt-list-item--static': !_vm.isHoverable,
   }],attrs:{"id":_vm.id,"tabindex":_vm.isFocusable ? 0 : -1,"role":_vm.role,"aria-selected":_vm.isHighlighted}},_vm.listItemListeners),[(_vm.listItemType)?_c(_vm.listItemType,{tag:"component",scopedSlots:_vm._u([_vm._l((_vm.$slots),function(_,slotName){return {key:slotName,fn:function(){return [_vm._t(slotName)]},proxy:true}})],null,true)}):_vm._t("default")],2)}
-var list_itemvue_type_template_id_11a83550_staticRenderFns = []
+var list_itemvue_type_template_id_2554ff00_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./components/list_item/list_item_constants.js
@@ -4527,8 +4539,8 @@ var list_itemvue_type_style_index_0_lang_less_ = __webpack_require__(285);
 
 var list_item_component = normalizeComponent(
   list_item_list_itemvue_type_script_lang_js_,
-  list_itemvue_type_template_id_11a83550_render,
-  list_itemvue_type_template_id_11a83550_staticRenderFns,
+  list_itemvue_type_template_id_2554ff00_render,
+  list_itemvue_type_template_id_2554ff00_staticRenderFns,
   false,
   null,
   null,
@@ -6589,8 +6601,8 @@ return [_c('ul',{ref:"listWrapper",class:_vm.listClasses,attrs:{"id":_vm.listId,
 var dropdownvue_type_template_id_1b8b46fc_staticRenderFns = []
 
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/popover/popover.vue?vue&type=template&id=50a89e08&
-var popovervue_type_template_id_50a89e08_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.modal && _vm.isOpen)?_c('portal',[_c('div',{staticClass:"d-modal--transparent",attrs:{"aria-hidden":_vm.modal && _vm.isOpen ? 'false' : 'true'},on:{"click":function($event){$event.preventDefault();$event.stopPropagation();}}})]):_vm._e(),_c(_vm.elementType,_vm._g({ref:"popover",tag:"component",class:['d-popover', { 'd-popover__anchor--opened': _vm.isOpen }],attrs:{"data-qa":"dt-popover-container"}},_vm.$listeners),[_c('div',{ref:"anchor",attrs:{"id":!_vm.ariaLabelledby && _vm.labelledBy,"data-qa":"dt-popover-anchor","tabindex":_vm.openOnContext ? 0 : undefined},on:{"!click":function($event){return _vm.defaultToggleOpen.apply(null, arguments)},"contextmenu":function($event){$event.preventDefault();return _vm.onContext.apply(null, arguments)},"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)}],"wheel":function (e) { return (_vm.isOpen && _vm.modal) && e.preventDefault(); },"!keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"escape",undefined,$event.key,undefined)){ return null; }return _vm.closePopover.apply(null, arguments)}}},[_vm._t("anchor",null,{"attrs":{
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/popover/popover.vue?vue&type=template&id=2ecb24a7&
+var popovervue_type_template_id_2ecb24a7_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.modal && _vm.isOpen)?_c('portal',[_c('div',{staticClass:"d-modal--transparent",attrs:{"aria-hidden":_vm.modal && _vm.isOpen ? 'false' : 'true'},on:{"click":function($event){$event.preventDefault();$event.stopPropagation();}}})]):_vm._e(),_c(_vm.elementType,_vm._g({ref:"popover",tag:"component",class:['d-popover', { 'd-popover__anchor--opened': _vm.isOpen }],attrs:{"data-qa":"dt-popover-container"}},_vm.$listeners),[_c('div',{ref:"anchor",attrs:{"id":!_vm.ariaLabelledby && _vm.labelledBy,"data-qa":"dt-popover-anchor","tabindex":_vm.openOnContext ? 0 : undefined},on:{"!click":function($event){return _vm.defaultToggleOpen.apply(null, arguments)},"contextmenu":_vm.onContext,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)}],"wheel":function (e) { return (_vm.isOpen && _vm.modal) && e.preventDefault(); },"!keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"escape",undefined,$event.key,undefined)){ return null; }return _vm.closePopover.apply(null, arguments)}}},[_vm._t("anchor",null,{"attrs":{
           'aria-expanded': _vm.isOpen.toString(),
           'aria-controls': _vm.id,
           'aria-haspopup': _vm.role,
@@ -6601,7 +6613,7 @@ var popovervue_type_template_id_50a89e08_render = function () {var _vm=this;var
           'd-popover__content',
           _vm.POPOVER_PADDING_CLASSES[_vm.padding],
           _vm.contentClass ],attrs:{"data-qa":"dt-popover-content"}},[_vm._t("content",null,{"close":_vm.closePopover})],2),(_vm.$slots.footerContent)?_c('popover-header-footer',{ref:"popover__footer",class:_vm.POPOVER_HEADER_FOOTER_PADDING_CLASSES[_vm.padding],attrs:{"type":"footer","content-class":_vm.footerClass},scopedSlots:_vm._u([{key:"content",fn:function(){return [_vm._t("footerContent",null,{"close":_vm.closePopover})]},proxy:true}],null,true)}):_vm._e(),(_vm.showVisuallyHiddenClose)?_c('sr-only-close-button',{attrs:{"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel},on:{"close":_vm.closePopover}}):_vm._e()],1)],1)],1)}
-var popovervue_type_template_id_50a89e08_staticRenderFns = []
+var popovervue_type_template_id_2ecb24a7_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getBoundingClientRect.js
@@ -12089,6 +12101,7 @@ var popover_header_footer_component = normalizeComponent(
         return;
       }
 
+      event.preventDefault();
       (_this$tip3 = this.tip) === null || _this$tip3 === void 0 ? void 0 : _this$tip3.setProps({
         placement: 'right-start'
       });
@@ -12273,8 +12286,8 @@ var popovervue_type_style_index_0_lang_less_ = __webpack_require__(532);
 
 var popover_component = normalizeComponent(
   popover_popovervue_type_script_lang_js_,
-  popovervue_type_template_id_50a89e08_render,
-  popovervue_type_template_id_50a89e08_staticRenderFns,
+  popovervue_type_template_id_2ecb24a7_render,
+  popovervue_type_template_id_2ecb24a7_staticRenderFns,
   false,
   null,
   null,
@@ -19097,6 +19110,111 @@ var root_layout_component = normalizeComponent(
 ;// CONCATENATED MODULE: ./components/root_layout/index.js
 
 
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/icon/icon.vue?vue&type=template&id=1ca37c55&
+var iconvue_type_template_id_1ca37c55_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.currentIcon,{tag:"component",class:_vm.iconSize,attrs:{"data-qa":"dt-icon"}})}
+var iconvue_type_template_id_1ca37c55_staticRenderFns = []
+
+
+;// 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-80[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./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&
+ /* harmony default export */ const icon_iconvue_type_script_lang_js_ = (iconvue_type_script_lang_js_); 
+;// CONCATENATED MODULE: ./components/icon/icon.vue
+
+
+
+
+
+/* normalize component */
+;
+var icon_component = normalizeComponent(
+  icon_iconvue_type_script_lang_js_,
+  iconvue_type_template_id_1ca37c55_render,
+  iconvue_type_template_id_1ca37c55_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ const icon = (icon_component.exports);
+;// CONCATENATED MODULE: ./components/icon/index.js
+
 ;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=96ff85ec&
 var combobox_with_popovervue_type_template_id_96ff85ec_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-combobox',_vm._g({ref:"combobox",attrs:{"loading":_vm.loading,"empty-list":_vm.emptyList,"empty-state-message":_vm.emptyStateMessage,"show-list":_vm.isListShown,"on-beginning-of-list":_vm.onBeginningOfList,"on-end-of-list":_vm.onEndOfList,"list-aria-label":_vm.listAriaLabel,"list-rendered-outside":true,"list-id":_vm.listId,"data-qa":"dt-combobox"},scopedSlots:_vm._u([{key:"input",fn:function(ref){
 var inputProps = ref.inputProps;
@@ -21687,6 +21805,7 @@ var grouped_chip_component = normalizeComponent(
 
 
 
+
 
 
  /// Recipes