@dialpad/dialtone-vue 2.28.0-beta.2 → 2.29.0

package/dist/emoji.umd.js

@@ -768,7 +768,7 @@ function findEmojis(textContent) {
   const emojis = matches.length ? matches.map(match => match[0]) : [];
   return new Set(emojis);
 }
-;// 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/emoji/emoji.vue?vue&type=template&id=334ba6aa&
+;// 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/emoji/emoji.vue?vue&type=template&id=a9cdd478&
 var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('span',{class:_vm.skeletonSizeClass},[_c('dt-skeleton',{directives:[{name:"show",rawName:"v-show",value:(_vm.imgLoading && _vm.showSkeleton),expression:"imgLoading && showSkeleton"}],class:_vm.skeletonSizeClass,attrs:{"offset":0,"shape-option":{ shape: 'square', contentClass: _vm.skeletonSizeClass, size: 'auto' }}}),_c('img',{directives:[{name:"show",rawName:"v-show",value:(!_vm.imgLoading),expression:"!imgLoading"}],ref:"emojiImg",class:[_vm.size, _vm.imgClass],attrs:{"aria-label":_vm.emojiLabel,"alt":_vm.emojiAlt,"title":_vm.emojiLabel,"src":_vm.emojiSrc},on:{"load":_vm.imageLoaded,"error":_vm.imageErrored}})],1)}
 var staticRenderFns = []
 
@@ -788,20 +788,20 @@ const EMOJI_SIZES = {
 /* harmony default export */ const emoji_constants = ({
   EMOJI_SIZES
 });
-;// 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/skeleton/skeleton.vue?vue&type=template&id=cf13874a&
-var skeletonvue_type_template_id_cf13874a_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{"aria-busy":"true","role":"status","aria-label":_vm.ariaLabel}},[(_vm.listItemOption)?_c('dt-skeleton-list-item',_vm._b({attrs:{"animation-duration":_vm.animationDuration,"animate":_vm.animate,"offset":_vm.offset}},'dt-skeleton-list-item',_vm.listItemOption === true ? {} : _vm.listItemOption,false)):(_vm.shapeOption)?_c('dt-skeleton-shape',_vm._b({attrs:{"animation-duration":_vm.animationDuration,"animate":_vm.animate,"offset":_vm.offset}},'dt-skeleton-shape',_vm.shapeOption === true ? {} : _vm.shapeOption,false)):(_vm.paragraphOption)?_c('dt-skeleton-paragraph',_vm._b({attrs:{"animation-duration":_vm.animationDuration,"animate":_vm.animate,"offset":_vm.offset}},'dt-skeleton-paragraph',_vm.paragraphOption === true ? {} : _vm.paragraphOption,false)):_c('dt-skeleton-text',_vm._b({attrs:{"animation-duration":_vm.animationDuration,"animate":_vm.animate,"offset":_vm.offset}},'dt-skeleton-text',_vm.textOption || {},false))],1)}
-var skeletonvue_type_template_id_cf13874a_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/skeleton/skeleton.vue?vue&type=template&id=47dbc65e&
+var skeletonvue_type_template_id_47dbc65e_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{"aria-busy":"true","role":"status","aria-label":_vm.ariaLabel}},[(_vm.listItemOption)?_c('dt-skeleton-list-item',_vm._b({attrs:{"animation-duration":_vm.animationDuration,"animate":_vm.animate,"offset":_vm.offset}},'dt-skeleton-list-item',_vm.listItemOption === true ? {} : _vm.listItemOption,false)):(_vm.shapeOption)?_c('dt-skeleton-shape',_vm._b({attrs:{"animation-duration":_vm.animationDuration,"animate":_vm.animate,"offset":_vm.offset}},'dt-skeleton-shape',_vm.shapeOption === true ? {} : _vm.shapeOption,false)):(_vm.paragraphOption)?_c('dt-skeleton-paragraph',_vm._b({attrs:{"animation-duration":_vm.animationDuration,"animate":_vm.animate,"offset":_vm.offset}},'dt-skeleton-paragraph',_vm.paragraphOption === true ? {} : _vm.paragraphOption,false)):_c('dt-skeleton-text',_vm._b({attrs:{"animation-duration":_vm.animationDuration,"animate":_vm.animate,"offset":_vm.offset}},'dt-skeleton-text',_vm.textOption || {},false))],1)}
+var skeletonvue_type_template_id_47dbc65e_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/skeleton/skeleton-shape.vue?vue&type=template&id=9cb05e20&
-var skeleton_shapevue_type_template_id_9cb05e20_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"skeleton",class:[
+;// 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/skeleton/skeleton-shape.vue?vue&type=template&id=afabf0b6&
+var skeleton_shapevue_type_template_id_afabf0b6_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"skeleton",class:[
     'skeleton-placeholder',
     _vm.SKELETON_SHAPES[_vm.shape],
     {
       'skeleton-placeholder--animate': _vm.animate,
     },
     _vm.contentClass ],style:(_vm.shapeStyles),attrs:{"data-qa":"skeleton-shape"}})}
-var skeleton_shapevue_type_template_id_9cb05e20_staticRenderFns = []
+var skeleton_shapevue_type_template_id_afabf0b6_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./components/skeleton/skeleton_constants.js
@@ -835,6 +835,10 @@ const SKELETON_HEADING_HEIGHTS = {
 });
 ;// CONCATENATED MODULE: ./common/mixins/skeleton.js
 
+/**
+ * @displayName Skeleton Animation Mixin
+ */
+
 /* harmony default export */ const skeleton = ({
   computed: {
     skeletonOffset() {
@@ -890,27 +894,58 @@ const SKELETON_HEADING_HEIGHTS = {
   name: 'DtSkeletonShape',
   mixins: [skeleton],
   props: {
+    /**
+     * Defines the shape of the skeleton, accepts circle or square.
+     * @values circle, square
+     */
     shape: {
       type: String,
       default: 'circle',
       validator: shape => Object.keys(SKELETON_SHAPES).includes(shape)
     },
+
+    /**
+     * Size of the shape
+     * @values xs, sm, md, lg, xl
+     */
     size: {
       type: String,
       default: 'md'
     },
+
+    /**
+     * Duration time of the animation (ms), set -1 for an infinite animation.
+     */
     animationDuration: {
       type: Number,
       default: -1
     },
+
+    /**
+     * This property has higher priority than "option.animate"
+     * @values true, false
+     */
     animate: {
       type: Boolean,
       default: true
     },
+
+    /**
+     * RippleDuration controls how long the delay is for the animation of a
+     * placeholder 1000 pixels from the top of the page. Each placeholder
+     * from the top down will have a delay duration from 0 to this offset.
+     * The delay of each placeholder animation is based on how far down the page
+     * the placeholder is rendered. This is a linear relationship. The unit
+     * is milliseconds.
+     */
     offset: {
       type: Number,
       default: 1
     },
+
+    /**
+     * Additional class name for the content.
+     */
     contentClass: {
       type: [String, Object, Array],
       default: ''
@@ -1048,8 +1083,8 @@ function normalizeComponent (
 ;
 var component = normalizeComponent(
   skeleton_skeleton_shapevue_type_script_lang_js_,
-  skeleton_shapevue_type_template_id_9cb05e20_render,
-  skeleton_shapevue_type_template_id_9cb05e20_staticRenderFns,
+  skeleton_shapevue_type_template_id_afabf0b6_render,
+  skeleton_shapevue_type_template_id_afabf0b6_staticRenderFns,
   false,
   null,
   null,
@@ -1058,28 +1093,28 @@ var component = normalizeComponent(
 )
 
 /* harmony default export */ const skeleton_shape = (component.exports);
-;// 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/skeleton/skeleton-list-item.vue?vue&type=template&id=550b8bfc&
-var skeleton_list_itemvue_type_template_id_550b8bfc_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:[
+;// 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/skeleton/skeleton-list-item.vue?vue&type=template&id=550aef30&
+var skeleton_list_itemvue_type_template_id_550aef30_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:[
     'd-d-flex',
     {
       'd-ai-center': _vm.paragraphs.rows === 1,
     },
     _vm.contentClass ],attrs:{"data-qa":"skeleton-list-item"}},[_c('dt-skeleton-shape',{staticClass:"d-mr8",attrs:{"size":_vm.shapeSize,"shape":_vm.shape,"animation-duration":_vm.animationDuration,"animate":_vm.animate,"offset":_vm.offset,"content-class":_vm.shapeClass}}),_c('div',{staticClass:"d-d-flex d-fd-column d-w100p"},[_c('dt-skeleton-paragraph',_vm._b({attrs:{"animation-duration":_vm.animationDuration,"animate":_vm.animate,"offset":_vm.offset}},'dt-skeleton-paragraph',_vm.paragraphs,false))],1)],1)}
-var skeleton_list_itemvue_type_template_id_550b8bfc_staticRenderFns = []
+var skeleton_list_itemvue_type_template_id_550aef30_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/skeleton/skeleton-paragraph.vue?vue&type=template&id=5c1bdf76&
-var skeleton_paragraphvue_type_template_id_5c1bdf76_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:[
+;// 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/skeleton/skeleton-paragraph.vue?vue&type=template&id=74552fc9&
+var skeleton_paragraphvue_type_template_id_74552fc9_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:[
     'd-w100p',
     _vm.contentClass ],attrs:{"contentClass":"","data-qa":"skeleton-paragraph"}},_vm._l((_vm.integerRows),function(row){return _c('dt-skeleton-text',{key:row,class:[
       {
         'd-mb12': row !== _vm.integerRows,
       } ],attrs:{"data-qa":"skeleton-paragraph-row","content-class":_vm.rowClass,"animate":_vm.animate,"offset":_vm.offset,"animation-duration":_vm.animationDuration,"width":_vm.getSizeParagraphRow(row)}})}),1)}
-var skeleton_paragraphvue_type_template_id_5c1bdf76_staticRenderFns = []
+var skeleton_paragraphvue_type_template_id_74552fc9_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/skeleton/skeleton-text.vue?vue&type=template&id=b36ce9f2&
-var skeleton_textvue_type_template_id_b36ce9f2_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.type === 'body')?_c('div',{ref:"skeleton",class:[
+;// 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/skeleton/skeleton-text.vue?vue&type=template&id=0603ca4d&
+var skeleton_textvue_type_template_id_0603ca4d_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.type === 'body')?_c('div',{ref:"skeleton",class:[
     'd-h8',
     'd-bar2',
     'skeleton-placeholder',
@@ -1096,7 +1131,7 @@ var skeleton_textvue_type_template_id_b36ce9f2_render = function () {var _vm=thi
     },
     _vm.contentClass ],style:(Object.assign({}, {width: _vm.width},
     _vm.skeletonStyle)),attrs:{"data-qa":"skeleton-text-heading"}}):_vm._e()}
-var skeleton_textvue_type_template_id_b36ce9f2_staticRenderFns = []
+var skeleton_textvue_type_template_id_0603ca4d_staticRenderFns = []
 
 
 ;// 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/skeleton/skeleton-text.vue?vue&type=script&lang=js&
@@ -1145,32 +1180,67 @@ var skeleton_textvue_type_template_id_b36ce9f2_staticRenderFns = []
   name: 'DtSkeletonText',
   mixins: [skeleton],
   props: {
+    /**
+     * Skeleton type
+     * @values body, heading
+     */
     type: {
       type: String,
       default: 'body',
       validator: type => SKELETON_TEXT_TYPES.includes(type)
     },
+
+    /**
+     * Heading height
+     * @values sm, md, lg
+     */
     headingHeight: {
       type: String,
       default: 'md',
       validator: headingHeight => Object.keys(SKELETON_HEADING_HEIGHTS).includes(headingHeight)
     },
+
+    /**
+     * Width of the skeleton
+     */
     width: {
       type: String,
       default: '100%'
     },
+
+    /**
+     * Duration time of the animation (ms), set -1 for an infinite animation.
+     */
     animationDuration: {
       type: Number,
       default: -1
     },
+
+    /**
+     * This property has higher priority than "option.animate"
+     * @values true, false
+     */
     animate: {
       type: Boolean,
       default: false
     },
+
+    /**
+     * RippleDuration controls how long the delay is for the animation of a
+     * placeholder 1000 pixels from the top of the page. Each placeholder
+     * from the top down will have a delay duration from 0 to this offset.
+     * The delay of each placeholder animation is based on how far down the page
+     * the placeholder is rendered. This is a linear relationship. The unit
+     * is milliseconds.
+     */
     offset: {
       type: Number,
       default: 1
     },
+
+    /**
+     * Additional class name for the content.
+     */
     contentClass: {
       type: String,
       default: ''
@@ -1196,8 +1266,8 @@ var skeleton_textvue_type_template_id_b36ce9f2_staticRenderFns = []
 ;
 var skeleton_text_component = normalizeComponent(
   skeleton_skeleton_textvue_type_script_lang_js_,
-  skeleton_textvue_type_template_id_b36ce9f2_render,
-  skeleton_textvue_type_template_id_b36ce9f2_staticRenderFns,
+  skeleton_textvue_type_template_id_0603ca4d_render,
+  skeleton_textvue_type_template_id_0603ca4d_staticRenderFns,
   false,
   null,
   null,
@@ -1244,45 +1314,91 @@ const validator = number => number !== '' && !Number.isNaN(Number(number));
     DtSkeletonText: skeleton_text
   },
   props: {
+    /**
+     * Quantity of rows to display
+     */
     rows: {
       type: [Number, String],
       default: 3,
       validator
     },
+
+    /**
+     * This property has higher priority than "option.animate"
+     * @values true, false
+     */
     animate: {
       type: Boolean,
       default: true
     },
+
+    /**
+     * Controls the min width of paragraphs
+     */
     minWidth: {
       type: [Number, String],
       default: 30,
       validator
     },
+
+    /**
+     * Controls the max width of paragraphs
+     */
     maxWidth: {
       type: [Number, String],
       default: 100,
       validator
     },
+
+    /**
+     * Controls the width of paragraphs
+     */
     width: {
       type: [String, Array],
       default: null
     },
+
+    /**
+     * If true, row widths will be random
+     * @values true, false
+     */
     randomWidth: {
       type: Boolean,
       default: false
     },
+
+    /**
+     * RippleDuration controls how long the delay is for the animation of a
+     * placeholder 1000 pixels from the top of the page. Each placeholder
+     * from the top down will have a delay duration from 0 to this offset.
+     * The delay of each placeholder animation is based on how far down the page
+     * the placeholder is rendered. This is a linear relationship. The unit
+     * is milliseconds.
+     */
     offset: {
       type: Number,
       default: 1
     },
+
+    /**
+     * Duration time of the animation (ms), set -1 for an infinite animation.
+     */
     animationDuration: {
       type: Number,
       default: -1
     },
+
+    /**
+     * Additional class name for the content.
+     */
     contentClass: {
       type: String,
       default: ''
     },
+
+    /**
+     * Additional class name for the row.
+     */
     rowClass: {
       type: String,
       default: ''
@@ -1336,8 +1452,8 @@ const validator = number => number !== '' && !Number.isNaN(Number(number));
 ;
 var skeleton_paragraph_component = normalizeComponent(
   skeleton_skeleton_paragraphvue_type_script_lang_js_,
-  skeleton_paragraphvue_type_template_id_5c1bdf76_render,
-  skeleton_paragraphvue_type_template_id_5c1bdf76_staticRenderFns,
+  skeleton_paragraphvue_type_template_id_74552fc9_render,
+  skeleton_paragraphvue_type_template_id_74552fc9_staticRenderFns,
   false,
   null,
   null,
@@ -1388,15 +1504,29 @@ var skeleton_paragraph_component = normalizeComponent(
     DtSkeletonParagraph: skeleton_paragraph
   },
   props: {
+    /**
+     * Defines the shape of the skeleton, accepts circle or square.
+     * @values circle, square
+     */
     shape: {
       type: String,
       default: 'circle',
       validator: shape => Object.keys(SKELETON_SHAPES).includes(shape)
     },
+
+    /**
+     * Size of the shape
+     * @values xs, sm, md, lg, xl
+     */
     shapeSize: {
       type: String,
       default: 'md'
     },
+
+    /**
+     * Object containing quantity of paragraphs to display
+     * and a randomWidth boolean.
+     */
     paragraphs: {
       type: Object,
       default: () => ({
@@ -1404,22 +1534,48 @@ var skeleton_paragraph_component = normalizeComponent(
         randomWidth: true
       })
     },
+
+    /**
+     * Duration time of the animation (ms), set -1 for an infinite animation.
+     */
     animationDuration: {
       type: Number,
       default: -1
     },
+
+    /**
+     * This property has higher priority than "option.animate"
+     * @values true, false
+     */
     animate: {
       type: Boolean,
       default: true
     },
+
+    /**
+     * RippleDuration controls how long the delay is for the animation of a
+     * placeholder 1000 pixels from the top of the page. Each placeholder
+     * from the top down will have a delay duration from 0 to this offset.
+     * The delay of each placeholder animation is based on how far down the page
+     * the placeholder is rendered. This is a linear relationship. The unit
+     * is milliseconds.
+     */
     offset: {
       type: Number,
       default: 1
     },
+
+    /**
+     * Additional class name for the shape.
+     */
     shapeClass: {
       type: String,
       default: ''
     },
+
+    /**
+     * Additional class name for the content.
+     */
     contentClass: {
       type: String,
       default: ''
@@ -1438,8 +1594,8 @@ var skeleton_paragraph_component = normalizeComponent(
 ;
 var skeleton_list_item_component = normalizeComponent(
   skeleton_skeleton_list_itemvue_type_script_lang_js_,
-  skeleton_list_itemvue_type_template_id_550b8bfc_render,
-  skeleton_list_itemvue_type_template_id_550b8bfc_staticRenderFns,
+  skeleton_list_itemvue_type_template_id_550aef30_render,
+  skeleton_list_itemvue_type_template_id_550aef30_staticRenderFns,
   false,
   null,
   null,
@@ -1490,6 +1646,13 @@ var skeleton_list_item_component = normalizeComponent(
 
 
 
+/**
+ * Skeleton loader is a non-interactive placeholder that displays a preview of the UI to visually communicate
+ * that content is in the process of loading. Skeleton is used to provide a low fidelity
+ * representation of the user interface (UI) before content appears on the page.
+ * @see https://dialpad.design/components/skeleton.html
+ */
+
 /* harmony default export */ const skeletonvue_type_script_lang_js_ = ({
   name: 'DtSkeleton',
   components: {
@@ -1499,34 +1662,75 @@ var skeleton_list_item_component = normalizeComponent(
     DtSkeletonParagraph: skeleton_paragraph
   },
   props: {
+    /**
+     * Set this prop to have the skeleton render as multiple lines of text.
+     * Set only one option prop at a time.
+     */
     paragraphOption: {
       type: [Object, Boolean],
       default: null
     },
+
+    /**
+     * Set this prop to have the skeleton render as a list item with an avatar and wrapping text.
+     * Set only one option prop at a time.
+     */
     listItemOption: {
       type: [Object, Boolean],
       default: null
     },
+
+    /**
+     * Set this prop to have the skeleton render as a single line of text.
+     * Set only one option prop at a time.
+     */
     textOption: {
       type: Object,
       default: null
     },
+
+    /**
+     * Set this prop to have the skeleton render as a specific shape.
+     * Set only one option prop at a time.
+     */
     shapeOption: {
       type: [Object, Boolean],
       default: null
     },
+
+    /**
+     * Duration time of the animation (ms), set -1 for an infinite animation.
+     */
     animationDuration: {
       type: Number,
       default: -1
     },
+
+    /**
+     * Descriptive label for the content.
+     */
     ariaLabel: {
       type: String,
       default: ''
     },
+
+    /**
+     * This property has higher priority than "option.animate"
+     * @values true, false
+     */
     animate: {
       type: Boolean,
       default: true
     },
+
+    /**
+     * RippleDuration controls how long the delay is for the animation of a
+     * placeholder 1000 pixels from the top of the page. Each placeholder
+     * from the top down will have a delay duration from 0 to this offset.
+     * The delay of each placeholder animation is based on how far down the page
+     * the placeholder is rendered. This is a linear relationship. The unit
+     * is milliseconds.
+     */
     offset: {
       type: Number,
       default: 1
@@ -1584,8 +1788,8 @@ var skeletonvue_type_style_index_0_lang_less_ = __webpack_require__(778);
 
 var skeleton_component = normalizeComponent(
   skeleton_skeletonvue_type_script_lang_js_,
-  skeletonvue_type_template_id_cf13874a_render,
-  skeletonvue_type_template_id_cf13874a_staticRenderFns,
+  skeletonvue_type_template_id_47dbc65e_render,
+  skeletonvue_type_template_id_47dbc65e_staticRenderFns,
   false,
   null,
   null,
@@ -1627,6 +1831,11 @@ var skeleton_component = normalizeComponent(
 
 
 
+/**
+ * Renders an emoji from a shortcode such as :smile: or unicode character such as 😄
+ * @see https://dialpad.design/components/emoji.html
+ */
+
 /* harmony default export */ const emojivue_type_script_lang_js_ = ({
   name: 'DtEmoji',
   components: {
@@ -1634,19 +1843,21 @@ var skeleton_component = normalizeComponent(
   },
   props: {
     /**
-      * Supports shortcode ex: :smile: or unicode ex: 😄. Will display the resulting emoji.
-      * See https://emojipedia.org/joypixels/ for all supported shortcode/unicode or the docs
-      * for setting up custom emojis.
-      */
+     * Supports shortcode ex: :smile: or unicode ex: 😄. Will display the resulting emoji.
+     * See <a href="https://emojipedia.org/joypixels/" target="_blank">JoyPixels</a>
+     *  for all supported shortcode/unicode or the docs for setting up custom emojis.
+     */
     code: {
       type: String,
       default: null
     },
 
     /**
-      * The size of the emoji. Can be any of the svg size utility
-      * classes from https://dialpad.design/utilities/svg/size
-      */
+     * The size of the emoji. Can be any of the svg size utility classes from
+     * <a href="https://dialpad.design/utilities/svg/size" target="_blank"> Dialpad SVG Size</a>
+     * @values d-svg--size14, d-svg--size16, d-svg--size18, d-svg--size20
+     * d-svg--size24, d-svg--size32, d-svg--size48, d-svg--size64, d-svg--size100p
+     */
     size: {
       type: String,
       default: EMOJI_SIZES.SIZE_20,
@@ -1655,8 +1866,8 @@ var skeleton_component = normalizeComponent(
 
     /**
      * Additional class name for the emoji img element.
-     * Can accept all of String, Object, and Array, i.e. has the
-     * same api as Vue's built-in handling of the class attribute.
+     * Can accept String, Object, and Array, i.e. has the
+     * same API as Vue's built-in handling of the class attribute.
      */
     imgClass: {
       type: [String, Object, Array],
@@ -1664,7 +1875,7 @@ var skeleton_component = normalizeComponent(
     },
 
     /**
-     * Will be read out on a screenreader for this emoji. You must use this prop if you want your emoji to be i18n
+     * Will be read out on a screen reader for this emoji. You must use this prop if you want your emoji to be i18n
      * Compatible as Dialtone Vue will not translate it by itself. If you do not set this prop the aria-label will
      * be set to the english description of the emoji. You can retrieve the description for an emoji yourself via the
      * getEmojiData() function
@@ -1676,6 +1887,7 @@ var skeleton_component = normalizeComponent(
 
     /**
      * Shows a skeleton loader while the emoji asset is loading.
+     * @values true, false
      */
     showSkeleton: {
       type: Boolean,
@@ -1791,6 +2003,11 @@ var emoji_component = normalizeComponent(
 ;// 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/emoji_text_wrapper/emoji_text_wrapper.vue?vue&type=script&lang=js&
 
 
+/**
+ * Wrapper to find and replace shortcodes like :smile: or unicode chars such as 😄 with our custom Emojis implementation.
+ * @see https://dialpad.design/components/emoji_text_wrapper.html
+ */
+
 /* harmony default export */ const emoji_text_wrappervue_type_script_lang_js_ = ({
   name: 'DtEmojiTextWrapper',
   components: {
@@ -1799,7 +2016,7 @@ var emoji_component = normalizeComponent(
   inheritAttrs: false,
   props: {
     /**
-     * The type of element to use for the wrapper.
+     * Element type (tag name) to use for the wrapper.
      */
     elementType: {
       type: String,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dialpad/dialtone-vue",
-  "version": "2.28.0-beta.2",
+  "version": "2.29.0",
   "description": "Vue component library for Dialtone components",
   "scripts": {
     "build": "npm run clean && npm run build-main && npm run build-emoji",
@@ -42,9 +42,9 @@
     "tippy.js": "^6.3.7"
   },
   "devDependencies": {
-    "@dialpad/dialtone": "^7.0.0-beta.6",
     "@commitlint/cli": "^17.1.2",
     "@commitlint/config-conventional": "^17.1.0",
+    "@dialpad/dialtone": "^7.0.0",
     "@percy/cli": "1.10.2",
     "@percy/storybook": "4.2.1",
     "@semantic-release/changelog": "^6.0.1",
@@ -86,6 +86,7 @@
     "yo": "^4.3.0"
   },
   "peerDependencies": {
+    "@dialpad/dialtone": ">=7.0",
     "vue": ">=2.6"
   },
   "engineStrict": true,