@dialpad/dialtone-vue 3.24.0 → 3.25.1

package/dist/dialtone-vue.umd.js

@@ -203,7 +203,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".tippy-box[data-popper-escaped] .d-pop
 
 /***/ }),
 
-/***/ 371:
+/***/ 948:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -299,7 +299,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".tippy-box[data-popper-escaped] .d-too
 
 /***/ }),
 
-/***/ 337:
+/***/ 99:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -316,7 +316,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--active{--button--fc:var(--muted-color-hover);--button--bgc:hsla(var(--muted-color-hsl)/15%)}.dt-recipe-callbar-button--danger.dt-recipe-callbar-button--active{--button--bgc:hsla(var(--error-color-hsl)/10%);--button--fc:var(--error-color-hover)}.dt-recipe-callbar-button--danger.dt-recipe-callbar-button--active:hover{--button--bgc:hsla(var(--error-color-hsl)/20%);--button--fc:var(--error-color-hover)}.dt-recipe-callbar-button--circle.d-btn--icon-only .d-btn__label{display:none}", ""]);
+___CSS_LOADER_EXPORT___.push([module.id, ".dt-recipe-callbar-button:not(.dt-recipe-callbar-button--circle){letter-spacing:-.011rem;line-height:1.6rem}.dt-recipe-callbar-button--circle{border-radius:var(--br-circle)}.dt-recipe-callbar-button.d-btn[disabled]{background-color:unset}.dt-recipe-callbar-button--circle.d-btn[disabled]{border-color:unset}.dt-recipe-callbar-button--danger.dt-recipe-callbar-button--active{--button--bgc:hsla(var(--error-color-hsl)/10%);--button--fc:var(--error-color-hover)}.dt-recipe-callbar-button--danger.dt-recipe-callbar-button--active:hover{--button--bgc:hsla(var(--error-color-hsl)/20%);--button--fc:var(--error-color-hover)}.dt-recipe-callbar-button--circle.d-btn--icon-only .d-btn__label{display:none}.dt-recipe-callbar-button--active .base-button__icon,.dt-recipe-callbar-button--active:hover .base-button__icon{color:var(--primary-color)}", ""]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -664,19 +664,19 @@ var update = add("1085b016", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
-/***/ 271:
+/***/ 669:
 /***/ ((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__(371);
+var content = __webpack_require__(948);
 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("09de2218", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("0b91eb1b", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
@@ -728,19 +728,19 @@ var update = add("38fad59c", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
-/***/ 7:
+/***/ 119:
 /***/ ((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__(337);
+var content = __webpack_require__(99);
 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("230a3096", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("3a4b387a", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
@@ -1281,59 +1281,26 @@ if (typeof window !== 'undefined') {
 
 ;// CONCATENATED MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
 const external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject = require("vue");
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/avatar/avatar.vue?vue&type=template&id=1d4433a8
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/avatar/avatar.vue?vue&type=template&id=36adc278
 
 const _hoisted_1 = ["id"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_presence = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-presence");
+
   return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
     id: $props.id,
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-avatar', $data.AVATAR_KIND_MODIFIERS[$data.kind], $data.AVATAR_SIZE_MODIFIERS[$props.size], $data.AVATAR_COLOR_MODIFIERS[$props.color], $props.avatarClass]),
     "data-qa": "dt-avatar"
-  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1);
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default"), $props.presence ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_presence, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+    key: 0,
+    presence: $props.presence,
+    class: ['d-avatar__presence', $data.AVATAR_PRESENCE_SIZE_MODIFIERS[$props.size]]
+  }, $props.presenceProps, {
+    "data-qa": "dt-presence"
+  }), null, 16, ["presence", "class"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 10, _hoisted_1);
 }
-;// CONCATENATED MODULE: ./components/avatar/avatar.vue?vue&type=template&id=1d4433a8
+;// CONCATENATED MODULE: ./components/avatar/avatar.vue?vue&type=template&id=36adc278
 
-;// CONCATENATED MODULE: ./components/avatar/avatar_constants.js
-const AVATAR_KIND_MODIFIERS = {
-  default: '',
-  icon: 'd-avatar--icon',
-  initials: 'd-avatar--initials'
-};
-const AVATAR_SIZE_MODIFIERS = {
-  sm: 'd-avatar--sm',
-  md: 'd-avatar--md',
-  lg: 'd-avatar--lg'
-};
-const AVATAR_COLOR_MODIFIERS = {
-  base: '',
-  'orange-200': 'd-avatar--orange-200',
-  'orange-300': 'd-avatar--orange-300',
-  'orange-400': 'd-avatar--orange-400',
-  'orange-500': 'd-avatar--orange-500',
-  'magenta-100': 'd-avatar--magenta-100',
-  'magenta-200': 'd-avatar--magenta-200',
-  'magenta-300': 'd-avatar--magenta-300',
-  'magenta-400': 'd-avatar--magenta-400',
-  'purple-200': 'd-avatar--purple-200',
-  'purple-300': 'd-avatar--purple-300',
-  'purple-400': 'd-avatar--purple-400',
-  'purple-500': 'd-avatar--purple-500',
-  'gold-100': 'd-avatar--gold-100',
-  'gold-200': 'd-avatar--gold-200',
-  'gold-300': 'd-avatar--gold-300',
-  'gold-500': 'd-avatar--gold-500'
-};
-const AVATAR_ICON_SIZES = {
-  sm: '200',
-  md: '400',
-  lg: '500'
-};
-/* harmony default export */ const avatar_constants = ({
-  AVATAR_KIND_MODIFIERS,
-  AVATAR_SIZE_MODIFIERS,
-  AVATAR_COLOR_MODIFIERS,
-  AVATAR_ICON_SIZES
-});
 ;// CONCATENATED MODULE: ./common/constants.js
 /* TODO: Move and sort these in a constants directory
 
@@ -1522,10 +1489,138 @@ const pascalCaseToKebabCase = string => {
   flushPromises,
   kebabCaseToPascalCase
 });
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/presence/presence.vue?vue&type=template&id=85037b42
+
+const presencevue_type_template_id_85037b42_hoisted_1 = ["aria-live"];
+const _hoisted_2 = {
+  key: 0,
+  "data-qa": "dt-presence-sr-text",
+  class: "sr-only"
+};
+function presencevue_type_template_id_85037b42_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
+    class: "d-presence",
+    "data-qa": "dt-presence",
+    role: "status",
+    "aria-live": _ctx.$attrs.ariaLive || 'off'
+  }, [$props.srText ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", _hoisted_2, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.srText), 1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(["d-presence__inner", {
+      'd-presence__inner--active': $props.presence === 'active',
+      'd-presence__inner--away': $props.presence === 'away',
+      'd-presence__inner--busy': $props.presence === 'busy',
+      'd-presence__inner--offline': $props.presence === 'offline'
+    }])
+  }, null, 2)], 8, presencevue_type_template_id_85037b42_hoisted_1);
+}
+;// CONCATENATED MODULE: ./components/presence/presence.vue?vue&type=template&id=85037b42
+
+;// CONCATENATED MODULE: ./components/presence/presence_constants.js
+const PRESENCE_STATES = {
+  BUSY: 'busy',
+  AWAY: 'away',
+  OFFLINE: 'offline',
+  ACTIVE: 'active'
+};
+const PRESENCE_STATES_LIST = [PRESENCE_STATES.BUSY, PRESENCE_STATES.AWAY, PRESENCE_STATES.OFFLINE, PRESENCE_STATES.ACTIVE];
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/presence/presence.vue?vue&type=script&lang=js
+
+/**
+ * Presence is a user status visual indicator element.
+ * @see https://dialpad.design/components/presence.html
+ */
+
+/* harmony default export */ const presencevue_type_script_lang_js = ({
+  name: 'DtPresence',
+  props: {
+    /**
+     * Determines the color of the inner presence circle, indicating status.
+     * Accepts one of 4 values: 'busy', 'away', 'active', 'offline'
+     */
+    presence: {
+      type: String,
+      default: PRESENCE_STATES.ACTIVE,
+      validator: role => {
+        return PRESENCE_STATES_LIST.includes(role);
+      }
+    },
+
+    /**
+     * Since Presence is a visual element, we need SRs to read out any state changes
+     * that occur.
+     * Text entered here will be read by assistive technology. If null this component will be ignored by AT.
+     */
+    srText: {
+      type: String,
+      default: null
+    }
+  }
+});
+;// CONCATENATED MODULE: ./components/presence/presence.vue?vue&type=script&lang=js
+ 
+// EXTERNAL MODULE: ./node_modules/vue-loader/dist/exportHelper.js
+var exportHelper = __webpack_require__(744);
+;// CONCATENATED MODULE: ./components/presence/presence.vue
+
+
+
+
+;
+const __exports__ = /*#__PURE__*/(0,exportHelper/* default */.Z)(presencevue_type_script_lang_js, [['render',presencevue_type_template_id_85037b42_render]])
+
+/* harmony default export */ const presence = (__exports__);
+;// CONCATENATED MODULE: ./components/presence/index.js
+
+
+;// CONCATENATED MODULE: ./components/avatar/avatar_constants.js
+const AVATAR_KIND_MODIFIERS = {
+  default: '',
+  icon: 'd-avatar--icon',
+  initials: 'd-avatar--initials'
+};
+const AVATAR_SIZE_MODIFIERS = {
+  sm: 'd-avatar--sm',
+  md: 'd-avatar--md',
+  lg: 'd-avatar--lg'
+};
+const AVATAR_PRESENCE_SIZE_MODIFIERS = {
+  md: 'd-avatar__presence--md',
+  lg: 'd-avatar__presence--lg'
+};
+const AVATAR_COLOR_MODIFIERS = {
+  base: '',
+  'orange-200': 'd-avatar--orange-200',
+  'orange-300': 'd-avatar--orange-300',
+  'orange-400': 'd-avatar--orange-400',
+  'orange-500': 'd-avatar--orange-500',
+  'magenta-100': 'd-avatar--magenta-100',
+  'magenta-200': 'd-avatar--magenta-200',
+  'magenta-300': 'd-avatar--magenta-300',
+  'magenta-400': 'd-avatar--magenta-400',
+  'purple-200': 'd-avatar--purple-200',
+  'purple-300': 'd-avatar--purple-300',
+  'purple-400': 'd-avatar--purple-400',
+  'purple-500': 'd-avatar--purple-500',
+  'gold-100': 'd-avatar--gold-100',
+  'gold-200': 'd-avatar--gold-200',
+  'gold-300': 'd-avatar--gold-300',
+  'gold-500': 'd-avatar--gold-500'
+};
+const AVATAR_ICON_SIZES = {
+  sm: '200',
+  md: '400',
+  lg: '500'
+};
+/* harmony default export */ const avatar_constants = ({
+  AVATAR_KIND_MODIFIERS,
+  AVATAR_SIZE_MODIFIERS,
+  AVATAR_COLOR_MODIFIERS,
+  AVATAR_ICON_SIZES
+});
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/avatar/avatar.vue?vue&type=script&lang=js
 
 
 
+
 /**
  * An avatar is a visual representation of a user or object.
  * @see https://dialpad.design/components/avatar.html
@@ -1533,6 +1628,9 @@ const pascalCaseToKebabCase = string => {
 
 /* harmony default export */ const avatarvue_type_script_lang_js = ({
   name: 'DtAvatar',
+  components: {
+    DtPresence: presence
+  },
   inheritAttrs: false,
   props: {
     /**
@@ -1577,6 +1675,24 @@ const pascalCaseToKebabCase = string => {
     avatarClass: {
       type: [String, Array, Object],
       default: ''
+    },
+
+    /**
+     * Determines whether to show the presence indicator for
+     * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',
+     * or 'active'. By default, it's null and nothing is shown.
+     */
+    presence: {
+      type: String,
+      default: null
+    },
+
+    /**
+     * A set of props to be passed into the presence component.
+     */
+    presenceProps: {
+      type: Object,
+      default: () => ({})
     }
   },
 
@@ -1586,7 +1702,8 @@ const pascalCaseToKebabCase = string => {
       kind: 'initials',
       AVATAR_SIZE_MODIFIERS: AVATAR_SIZE_MODIFIERS,
       AVATAR_COLOR_MODIFIERS: AVATAR_COLOR_MODIFIERS,
-      AVATAR_KIND_MODIFIERS: AVATAR_KIND_MODIFIERS
+      AVATAR_KIND_MODIFIERS: AVATAR_KIND_MODIFIERS,
+      AVATAR_PRESENCE_SIZE_MODIFIERS: AVATAR_PRESENCE_SIZE_MODIFIERS
     };
   },
 
@@ -1647,17 +1764,15 @@ const pascalCaseToKebabCase = string => {
 });
 ;// CONCATENATED MODULE: ./components/avatar/avatar.vue?vue&type=script&lang=js
  
-// EXTERNAL MODULE: ./node_modules/vue-loader/dist/exportHelper.js
-var exportHelper = __webpack_require__(744);
 ;// CONCATENATED MODULE: ./components/avatar/avatar.vue
 
 
 
 
 ;
-const __exports__ = /*#__PURE__*/(0,exportHelper/* default */.Z)(avatarvue_type_script_lang_js, [['render',render]])
+const avatar_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(avatarvue_type_script_lang_js, [['render',render]])
 
-/* harmony default export */ const avatar = (__exports__);
+/* harmony default export */ const avatar = (avatar_exports_);
 ;// CONCATENATED MODULE: ./components/avatar/index.js
 
 
@@ -1746,7 +1861,7 @@ const badge_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(badgevue_typ
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/banner/banner.vue?vue&type=template&id=a3c41ca8
 
 const bannervue_type_template_id_a3c41ca8_hoisted_1 = ["role"];
-const _hoisted_2 = ["aria-labelledby", "aria-describedby"];
+const bannervue_type_template_id_a3c41ca8_hoisted_2 = ["aria-labelledby", "aria-describedby"];
 function bannervue_type_template_id_a3c41ca8_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_notice_icon = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-notice-icon");
 
@@ -1788,7 +1903,7 @@ function bannervue_type_template_id_a3c41ca8_render(_ctx, _cache, $props, $setup
   }, {
     default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "action")]),
     _: 3
-  }, 8, ["hide-close", "close-button-props", "visually-hidden-close", "visually-hidden-close-label"])], 10, _hoisted_2)], 46, bannervue_type_template_id_a3c41ca8_hoisted_1);
+  }, 8, ["hide-close", "close-button-props", "visually-hidden-close", "visually-hidden-close-label"])], 10, bannervue_type_template_id_a3c41ca8_hoisted_2)], 46, bannervue_type_template_id_a3c41ca8_hoisted_1);
 }
 ;// CONCATENATED MODULE: ./components/banner/banner.vue?vue&type=template&id=a3c41ca8
 
@@ -17270,15 +17385,15 @@ const keyboard_shortcut_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(
 ;// CONCATENATED MODULE: ./components/keyboard_shortcut/index.js
 
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.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/root_layout/root_layout.vue?vue&type=template&id=3d8876c4
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.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/root_layout/root_layout.vue?vue&type=template&id=d408d192
 
-const root_layoutvue_type_template_id_3d8876c4_hoisted_1 = {
+const root_layoutvue_type_template_id_d408d192_hoisted_1 = {
   class: "root-layout"
 };
-function root_layoutvue_type_template_id_3d8876c4_render(_ctx, _cache, $props, $setup, $data, $options) {
+function root_layoutvue_type_template_id_d408d192_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_root_layout_body = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-root-layout-body");
 
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", root_layoutvue_type_template_id_3d8876c4_hoisted_1, [_ctx.$slots.header ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("header", {
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", root_layoutvue_type_template_id_d408d192_hoisted_1, [_ctx.$slots.header ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("header", {
     key: 0,
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['root-layout__header', $props.headerClass, {
       'root-layout__header--sticky': $props.headerSticky
@@ -17294,11 +17409,17 @@ function root_layoutvue_type_template_id_3d8876c4_render(_ctx, _cache, $props, $
     "sidebar-class": $props.sidebarClass,
     "sidebar-width": $props.sidebarWidth,
     "sidebar-position": $props.sidebarPosition
-  }, {
-    sidebar: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "sidebar")]),
-    content: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")]),
-    _: 3
-  }, 8, ["body-class", "content-class", "content-wrap-width-percent", "sidebar-class", "sidebar-width", "sidebar-position"]), _ctx.$slots.footer ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("footer", {
+  }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createSlots)({
+    _: 2
+  }, [_ctx.$slots.sidebar ? {
+    name: "sidebar",
+    fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "sidebar")]),
+    key: "0"
+  } : undefined, _ctx.$slots.default ? {
+    name: "content",
+    fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")]),
+    key: "1"
+  } : undefined]), 1032, ["body-class", "content-class", "content-wrap-width-percent", "sidebar-class", "sidebar-width", "sidebar-position"]), _ctx.$slots.footer ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("footer", {
     key: 1,
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['root-layout__footer', $props.footerClass]),
     style: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeStyle)({
@@ -17307,7 +17428,7 @@ function root_layoutvue_type_template_id_3d8876c4_render(_ctx, _cache, $props, $
     "data-qa": "root-layout-footer"
   }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "footer")], 6)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]);
 }
-;// CONCATENATED MODULE: ./components/root_layout/root_layout.vue?vue&type=template&id=3d8876c4
+;// CONCATENATED MODULE: ./components/root_layout/root_layout.vue?vue&type=template&id=d408d192
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.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/root_layout/root_layout_body.vue?vue&type=template&id=98ce9f78
 
@@ -17539,9 +17660,9 @@ const root_layout_body_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(r
 });
 ;// CONCATENATED MODULE: ./components/root_layout/root_layout.vue?vue&type=script&lang=js
  
-// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-74.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-74.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-74.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/root_layout/root_layout.vue?vue&type=style&index=0&id=3d8876c4&lang=less
-var root_layoutvue_type_style_index_0_id_3d8876c4_lang_less = __webpack_require__(271);
-;// CONCATENATED MODULE: ./components/root_layout/root_layout.vue?vue&type=style&index=0&id=3d8876c4&lang=less
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-74.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-74.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-74.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/root_layout/root_layout.vue?vue&type=style&index=0&id=d408d192&lang=less
+var root_layoutvue_type_style_index_0_id_d408d192_lang_less = __webpack_require__(669);
+;// CONCATENATED MODULE: ./components/root_layout/root_layout.vue?vue&type=style&index=0&id=d408d192&lang=less
 
 ;// CONCATENATED MODULE: ./components/root_layout/root_layout.vue
 
@@ -17551,7 +17672,7 @@ var root_layoutvue_type_style_index_0_id_3d8876c4_lang_less = __webpack_require_
 ;
 
 
-const root_layout_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(root_layoutvue_type_script_lang_js, [['render',root_layoutvue_type_template_id_3d8876c4_render]])
+const root_layout_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(root_layoutvue_type_script_lang_js, [['render',root_layoutvue_type_template_id_d408d192_render]])
 
 /* harmony default export */ const root_layout = (root_layout_exports_);
 ;// CONCATENATED MODULE: ./components/root_layout/index.js
@@ -18681,9 +18802,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-82.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=515e121a
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/buttons/callbar_button/callbar_button.vue?vue&type=template&id=e4ef387c
 
-function callbar_buttonvue_type_template_id_515e121a_render(_ctx, _cache, $props, $setup, $data, $options) {
+function callbar_buttonvue_type_template_id_e4ef387c_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-button");
 
   const _component_dt_tooltip = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-tooltip");
@@ -18710,7 +18831,7 @@ function callbar_buttonvue_type_template_id_515e121a_render(_ctx, _cache, $props
     _: 3
   }, 8, ["id"]);
 }
-;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=template&id=515e121a
+;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=template&id=e4ef387c
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.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
 
@@ -18811,9 +18932,9 @@ function callbar_buttonvue_type_template_id_515e121a_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-74.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-74.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-74.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=515e121a&lang=less
-var callbar_buttonvue_type_style_index_0_id_515e121a_lang_less = __webpack_require__(7);
-;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=style&index=0&id=515e121a&lang=less
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-74.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-74.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-74.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__(119);
+;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=style&index=0&id=e4ef387c&lang=less
 
 ;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue
 
@@ -18823,7 +18944,7 @@ var callbar_buttonvue_type_style_index_0_id_515e121a_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_515e121a_render]])
+const callbar_button_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(callbar_buttonvue_type_script_lang_js, [['render',callbar_buttonvue_type_template_id_e4ef387c_render]])
 
 /* harmony default export */ const callbar_button = (callbar_button_exports_);
 ;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/index.js