@dialpad/dialtone-vue 3.36.0 → 3.37.0

package/README.md

@@ -54,6 +54,10 @@ import { getEmojiData } from '@dialpad/dialtone-vue/emoji'
 const emojiData = getEmojiData();
 ```
 
+## Shadow DOM
+
+If you are using Dialtone Vue within a shadow DOM set the `shadowRoot: YOUR_ELEMENT` option on your vue instance and the styles will be isolated to that element rather than rendered at the root.
+
 ## Contributing
 
 If you would like to contribute to Dialtone Vue the first step is to get the project running locally. Follow the below quickstart to do so.

package/dist/dialtone-vue.common.js

@@ -313,7 +313,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".tippy-box[data-popper-escaped] .d-too
 
 /***/ }),
 
-/***/ 647:
+/***/ 432:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -330,7 +330,7 @@ __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[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)}", ""]);
+___CSS_LOADER_EXPORT___.push([module.id, ".dt-recipe-callbar-button:not(.dt-recipe-callbar-button--circle){line-height:var(--lh-300)}.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--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___);
 
@@ -1566,9 +1566,11 @@ var content = __webpack_require__(951);
 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("e1cef0bc", content, true, {"sourceMap":false,"shadowMode":false});
+// add CSS to Shadow Root
+var add = (__webpack_require__(339)/* ["default"] */ .Z)
+module.exports.__inject__ = function (shadowRoot) {
+  add("e1cef0bc", content, shadowRoot)
+};
 
 /***/ }),
 
@@ -1582,9 +1584,11 @@ var content = __webpack_require__(794);
 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("7b0d71b4", content, true, {"sourceMap":false,"shadowMode":false});
+// add CSS to Shadow Root
+var add = (__webpack_require__(339)/* ["default"] */ .Z)
+module.exports.__inject__ = function (shadowRoot) {
+  add("7b0d71b4", content, shadowRoot)
+};
 
 /***/ }),
 
@@ -1598,9 +1602,11 @@ 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("5ed8c6c8", content, true, {"sourceMap":false,"shadowMode":false});
+// add CSS to Shadow Root
+var add = (__webpack_require__(339)/* ["default"] */ .Z)
+module.exports.__inject__ = function (shadowRoot) {
+  add("5ed8c6c8", content, shadowRoot)
+};
 
 /***/ }),
 
@@ -1614,9 +1620,11 @@ var content = __webpack_require__(515);
 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("4b0828d7", content, true, {"sourceMap":false,"shadowMode":false});
+// add CSS to Shadow Root
+var add = (__webpack_require__(339)/* ["default"] */ .Z)
+module.exports.__inject__ = function (shadowRoot) {
+  add("4b0828d7", content, shadowRoot)
+};
 
 /***/ }),
 
@@ -1630,9 +1638,11 @@ var content = __webpack_require__(317);
 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("eb4c37f0", content, true, {"sourceMap":false,"shadowMode":false});
+// add CSS to Shadow Root
+var add = (__webpack_require__(339)/* ["default"] */ .Z)
+module.exports.__inject__ = function (shadowRoot) {
+  add("eb4c37f0", content, shadowRoot)
+};
 
 /***/ }),
 
@@ -1646,9 +1656,11 @@ var content = __webpack_require__(728);
 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("0c78fb76", content, true, {"sourceMap":false,"shadowMode":false});
+// add CSS to Shadow Root
+var add = (__webpack_require__(339)/* ["default"] */ .Z)
+module.exports.__inject__ = function (shadowRoot) {
+  add("0c78fb76", content, shadowRoot)
+};
 
 /***/ }),
 
@@ -1662,9 +1674,11 @@ var content = __webpack_require__(399);
 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("61c1a254", content, true, {"sourceMap":false,"shadowMode":false});
+// add CSS to Shadow Root
+var add = (__webpack_require__(339)/* ["default"] */ .Z)
+module.exports.__inject__ = function (shadowRoot) {
+  add("61c1a254", content, shadowRoot)
+};
 
 /***/ }),
 
@@ -1678,9 +1692,11 @@ var content = __webpack_require__(265);
 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("4d925410", content, true, {"sourceMap":false,"shadowMode":false});
+// add CSS to Shadow Root
+var add = (__webpack_require__(339)/* ["default"] */ .Z)
+module.exports.__inject__ = function (shadowRoot) {
+  add("4d925410", content, shadowRoot)
+};
 
 /***/ }),
 
@@ -1694,9 +1710,11 @@ var content = __webpack_require__(273);
 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("5f7d7664", content, true, {"sourceMap":false,"shadowMode":false});
+// add CSS to Shadow Root
+var add = (__webpack_require__(339)/* ["default"] */ .Z)
+module.exports.__inject__ = function (shadowRoot) {
+  add("5f7d7664", content, shadowRoot)
+};
 
 /***/ }),
 
@@ -1710,9 +1728,11 @@ var content = __webpack_require__(298);
 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("0868b640", content, true, {"sourceMap":false,"shadowMode":false});
+// add CSS to Shadow Root
+var add = (__webpack_require__(339)/* ["default"] */ .Z)
+module.exports.__inject__ = function (shadowRoot) {
+  add("0868b640", content, shadowRoot)
+};
 
 /***/ }),
 
@@ -1726,9 +1746,11 @@ var content = __webpack_require__(691);
 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("578174fd", content, true, {"sourceMap":false,"shadowMode":false});
+// add CSS to Shadow Root
+var add = (__webpack_require__(339)/* ["default"] */ .Z)
+module.exports.__inject__ = function (shadowRoot) {
+  add("578174fd", content, shadowRoot)
+};
 
 /***/ }),
 
@@ -1742,9 +1764,11 @@ var content = __webpack_require__(141);
 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("3230f382", content, true, {"sourceMap":false,"shadowMode":false});
+// add CSS to Shadow Root
+var add = (__webpack_require__(339)/* ["default"] */ .Z)
+module.exports.__inject__ = function (shadowRoot) {
+  add("3230f382", content, shadowRoot)
+};
 
 /***/ }),
 
@@ -1758,25 +1782,29 @@ var content = __webpack_require__(6);
 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("6f07a584", content, true, {"sourceMap":false,"shadowMode":false});
+// add CSS to Shadow Root
+var add = (__webpack_require__(339)/* ["default"] */ .Z)
+module.exports.__inject__ = function (shadowRoot) {
+  add("6f07a584", content, shadowRoot)
+};
 
 /***/ }),
 
-/***/ 980:
+/***/ 924:
 /***/ ((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__(647);
+var content = __webpack_require__(432);
 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("4994410c", content, true, {"sourceMap":false,"shadowMode":false});
+// add CSS to Shadow Root
+var add = (__webpack_require__(339)/* ["default"] */ .Z)
+module.exports.__inject__ = function (shadowRoot) {
+  add("c1fd4b12", content, shadowRoot)
+};
 
 /***/ }),
 
@@ -1790,9 +1818,11 @@ 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("1d7a8b7e", content, true, {"sourceMap":false,"shadowMode":false});
+// add CSS to Shadow Root
+var add = (__webpack_require__(339)/* ["default"] */ .Z)
+module.exports.__inject__ = function (shadowRoot) {
+  add("1d7a8b7e", content, shadowRoot)
+};
 
 /***/ }),
 
@@ -1806,9 +1836,11 @@ var content = __webpack_require__(568);
 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("6a465747", content, true, {"sourceMap":false,"shadowMode":false});
+// add CSS to Shadow Root
+var add = (__webpack_require__(339)/* ["default"] */ .Z)
+module.exports.__inject__ = function (shadowRoot) {
+  add("6a465747", content, shadowRoot)
+};
 
 /***/ }),
 
@@ -1822,20 +1854,22 @@ var content = __webpack_require__(406);
 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("074f9abe", content, true, {"sourceMap":false,"shadowMode":false});
+// add CSS to Shadow Root
+var add = (__webpack_require__(339)/* ["default"] */ .Z)
+module.exports.__inject__ = function (shadowRoot) {
+  add("074f9abe", content, shadowRoot)
+};
 
 /***/ }),
 
-/***/ 402:
+/***/ 339:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
 
 // EXPORTS
 __webpack_require__.d(__webpack_exports__, {
-  "Z": () => (/* binding */ addStylesClient)
+  "Z": () => (/* binding */ addStylesToShadowDOM)
 });
 
 ;// CONCATENATED MODULE: ./node_modules/vue-style-loader/lib/listToStyles.js
@@ -1867,23 +1901,12 @@ function listToStyles (parentId, list) {
   return styles
 }
 
-;// CONCATENATED MODULE: ./node_modules/vue-style-loader/lib/addStylesClient.js
-/*
-  MIT License http://www.opensource.org/licenses/mit-license.php
-  Author Tobias Koppers @sokra
-  Modified by Evan You @yyx990803
-*/
-
-
+;// CONCATENATED MODULE: ./node_modules/vue-style-loader/lib/addStylesShadow.js
 
-var hasDocument = typeof document !== 'undefined'
 
-if (typeof DEBUG !== 'undefined' && DEBUG) {
-  if (!hasDocument) {
-    throw new Error(
-    'vue-style-loader cannot be used in a non-browser environment. ' +
-    "Use { target: 'node' } in your Webpack config to indicate a server-rendering environment."
-  ) }
+function addStylesToShadowDOM (parentId, list, shadowRoot) {
+  var styles = listToStyles(parentId, list)
+  addStyles(styles, shadowRoot)
 }
 
 /*
@@ -1899,169 +1922,31 @@ type StyleObjectPart = {
 }
 */
 
-var stylesInDom = {/*
-  [id: number]: {
-    id: number,
-    refs: number,
-    parts: Array<(obj?: StyleObjectPart) => void>
-  }
-*/}
-
-var head = hasDocument && (document.head || document.getElementsByTagName('head')[0])
-var singletonElement = null
-var singletonCounter = 0
-var isProduction = false
-var noop = function () {}
-var options = null
-var ssrIdKey = 'data-vue-ssr-id'
-
-// Force single-tag solution on IE6-9, which has a hard limit on the # of <style>
-// tags it will allow on a page
-var isOldIE = typeof navigator !== 'undefined' && /msie [6-9]\b/.test(navigator.userAgent.toLowerCase())
-
-function addStylesClient (parentId, list, _isProduction, _options) {
-  isProduction = _isProduction
-
-  options = _options || {}
-
-  var styles = listToStyles(parentId, list)
-  addStylesToDom(styles)
-
-  return function update (newList) {
-    var mayRemove = []
-    for (var i = 0; i < styles.length; i++) {
-      var item = styles[i]
-      var domStyle = stylesInDom[item.id]
-      domStyle.refs--
-      mayRemove.push(domStyle)
-    }
-    if (newList) {
-      styles = listToStyles(parentId, newList)
-      addStylesToDom(styles)
-    } else {
-      styles = []
-    }
-    for (var i = 0; i < mayRemove.length; i++) {
-      var domStyle = mayRemove[i]
-      if (domStyle.refs === 0) {
-        for (var j = 0; j < domStyle.parts.length; j++) {
-          domStyle.parts[j]()
-        }
-        delete stylesInDom[domStyle.id]
-      }
-    }
-  }
-}
-
-function addStylesToDom (styles /* Array<StyleObject> */) {
+function addStyles (styles /* Array<StyleObject> */, shadowRoot) {
+  const injectedStyles =
+    shadowRoot._injectedStyles ||
+    (shadowRoot._injectedStyles = {})
   for (var i = 0; i < styles.length; i++) {
     var item = styles[i]
-    var domStyle = stylesInDom[item.id]
-    if (domStyle) {
-      domStyle.refs++
-      for (var j = 0; j < domStyle.parts.length; j++) {
-        domStyle.parts[j](item.parts[j])
-      }
-      for (; j < item.parts.length; j++) {
-        domStyle.parts.push(addStyle(item.parts[j]))
-      }
-      if (domStyle.parts.length > item.parts.length) {
-        domStyle.parts.length = item.parts.length
-      }
-    } else {
-      var parts = []
+    var style = injectedStyles[item.id]
+    if (!style) {
       for (var j = 0; j < item.parts.length; j++) {
-        parts.push(addStyle(item.parts[j]))
+        addStyle(item.parts[j], shadowRoot)
       }
-      stylesInDom[item.id] = { id: item.id, refs: 1, parts: parts }
+      injectedStyles[item.id] = true
     }
   }
 }
 
-function createStyleElement () {
+function createStyleElement (shadowRoot) {
   var styleElement = document.createElement('style')
   styleElement.type = 'text/css'
-  head.appendChild(styleElement)
+  shadowRoot.appendChild(styleElement)
   return styleElement
 }
 
-function addStyle (obj /* StyleObjectPart */) {
-  var update, remove
-  var styleElement = document.querySelector('style[' + ssrIdKey + '~="' + obj.id + '"]')
-
-  if (styleElement) {
-    if (isProduction) {
-      // has SSR styles and in production mode.
-      // simply do nothing.
-      return noop
-    } else {
-      // has SSR styles but in dev mode.
-      // for some reason Chrome can't handle source map in server-rendered
-      // style tags - source maps in <style> only works if the style tag is
-      // created and inserted dynamically. So we remove the server rendered
-      // styles and inject new ones.
-      styleElement.parentNode.removeChild(styleElement)
-    }
-  }
-
-  if (isOldIE) {
-    // use singleton mode for IE9.
-    var styleIndex = singletonCounter++
-    styleElement = singletonElement || (singletonElement = createStyleElement())
-    update = applyToSingletonTag.bind(null, styleElement, styleIndex, false)
-    remove = applyToSingletonTag.bind(null, styleElement, styleIndex, true)
-  } else {
-    // use multi-style-tag mode in all other cases
-    styleElement = createStyleElement()
-    update = applyToTag.bind(null, styleElement)
-    remove = function () {
-      styleElement.parentNode.removeChild(styleElement)
-    }
-  }
-
-  update(obj)
-
-  return function updateStyle (newObj /* StyleObjectPart */) {
-    if (newObj) {
-      if (newObj.css === obj.css &&
-          newObj.media === obj.media &&
-          newObj.sourceMap === obj.sourceMap) {
-        return
-      }
-      update(obj = newObj)
-    } else {
-      remove()
-    }
-  }
-}
-
-var replaceText = (function () {
-  var textStore = []
-
-  return function (index, replacement) {
-    textStore[index] = replacement
-    return textStore.filter(Boolean).join('\n')
-  }
-})()
-
-function applyToSingletonTag (styleElement, index, remove, obj) {
-  var css = remove ? '' : obj.css
-
-  if (styleElement.styleSheet) {
-    styleElement.styleSheet.cssText = replaceText(index, css)
-  } else {
-    var cssNode = document.createTextNode(css)
-    var childNodes = styleElement.childNodes
-    if (childNodes[index]) styleElement.removeChild(childNodes[index])
-    if (childNodes.length) {
-      styleElement.insertBefore(cssNode, childNodes[index])
-    } else {
-      styleElement.appendChild(cssNode)
-    }
-  }
-}
-
-function applyToTag (styleElement, obj) {
+function addStyle (obj /* StyleObjectPart */, shadowRoot) {
+  var styleElement = createStyleElement(shadowRoot)
   var css = obj.css
   var media = obj.media
   var sourceMap = obj.sourceMap
@@ -2069,9 +1954,6 @@ function applyToTag (styleElement, obj) {
   if (media) {
     styleElement.setAttribute('media', media)
   }
-  if (options.ssrId) {
-    styleElement.setAttribute(ssrIdKey, obj.id)
-  }
 
   if (sourceMap) {
     // https://developer.chrome.com/devtools/docs/javascript-debugging
@@ -20225,9 +20107,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=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/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=8f55595a
 
-function callbar_buttonvue_type_template_id_e4ef387c_render(_ctx, _cache, $props, $setup, $data, $options) {
+function callbar_buttonvue_type_template_id_8f55595a_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");
@@ -20254,7 +20136,7 @@ function callbar_buttonvue_type_template_id_e4ef387c_render(_ctx, _cache, $props
     _: 3
   }, 8, ["id"]);
 }
-;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=template&id=e4ef387c
+;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=template&id=8f55595a
 
 ;// 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
 
@@ -20343,7 +20225,7 @@ function callbar_buttonvue_type_template_id_e4ef387c_render(_ctx, _cache, $props
   },
   computed: {
     callbarButtonClass() {
-      return [this.buttonClass, 'dt-recipe-callbar-button', 'd-stack4', 'd-px0', 'h:d-bgc-black-200', 'h:d-bgo50', {
+      return [this.buttonClass, 'dt-recipe-callbar-button', 'd-px0', {
         'dt-recipe-callbar-button--circle': this.circle,
         'd-btn--icon-only': this.circle,
         'dt-recipe-callbar-button--active': this.active,
@@ -20355,9 +20237,9 @@ function callbar_buttonvue_type_template_id_e4ef387c_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=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
+// 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=8f55595a&lang=less
+var callbar_buttonvue_type_style_index_0_id_8f55595a_lang_less = __webpack_require__(924);
+;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=style&index=0&id=8f55595a&lang=less
 
 ;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue
 
@@ -20367,7 +20249,7 @@ var callbar_buttonvue_type_style_index_0_id_e4ef387c_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_e4ef387c_render]])
+const callbar_button_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(callbar_buttonvue_type_script_lang_js, [['render',callbar_buttonvue_type_template_id_8f55595a_render]])
 
 /* harmony default export */ const callbar_button = (callbar_button_exports_);
 ;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/index.js