@dialpad/dialtone-vue 3.221.1 → 3.222.0-next.2

package/dist/lib/skeleton/skeleton-list-item.js

@@ -3,9 +3,8 @@ import { SKELETON_SHAPES as t } from "./skeleton-constants.js";
 import n from "./skeleton-shape.js";
 import r from "./skeleton-paragraph.js";
 import { createElementBlock as i, createElementVNode as a, createVNode as o, mergeProps as s, normalizeClass as c, openBlock as l, resolveComponent as u } from "vue";
-//#region components/skeleton/skeleton-list-item.vue
+//#region components/Skeleton/SkeletonListItem.vue
 var d = {
-	compatConfig: { MODE: 3 },
 	name: "DtSkeletonListItem",
 	components: {
 		DtSkeletonShape: n,
@@ -18,8 +17,8 @@ var d = {
 			validator: (e) => Object.keys(t).includes(e)
 		},
 		shapeSize: {
-			type: String,
-			default: "md"
+			type: [String, Number],
+			default: 300
 		},
 		paragraphs: {
 			type: Object,

package/dist/lib/skeleton/skeleton-list-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton-list-item.js","names":[],"sources":["../../../components/skeleton/skeleton-list-item.vue"],"sourcesContent":["<template>\n  <div\n    data-qa=\"skeleton-list-item\"\n    :class=\"[\n      'd-skeleton-list-item',\n      {\n        'd-skeleton-list-item--single': paragraphs.rows === 1,\n      },\n      contentClass,\n    ]\"\n  >\n    <dt-skeleton-shape\n      class=\"d-skeleton-list-item__shape\"\n      :size=\"shapeSize\"\n      :shape=\"shape\"\n      :animation-duration=\"animationDuration\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n      :content-class=\"shapeClass\"\n    />\n    <div class=\"d-skeleton-list-item__paragraph-container\">\n      <dt-skeleton-paragraph\n        v-bind=\"paragraphs\"\n        :animation-duration=\"animationDuration\"\n        :animate=\"animate\"\n        :offset=\"offset\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { SKELETON_SHAPES } from './skeleton_constants';\nimport DtSkeletonShape from './skeleton-shape.vue';\nimport DtSkeletonParagraph from './skeleton-paragraph.vue';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtSkeletonListItem',\n\n  components: {\n    DtSkeletonShape,\n    DtSkeletonParagraph,\n  },\n\n  props: {\n    /**\n     * Defines the shape of the skeleton, accepts circle or square.\n     * @values circle, square\n     */\n    shape: {\n      type: String,\n      default: 'circle',\n      validator: shape => Object.keys(SKELETON_SHAPES).includes(shape),\n    },\n\n    /**\n     * Size of the shape\n     * @values xs, sm, md, lg, xl\n     */\n    shapeSize: {\n      type: String,\n      default: 'md',\n    },\n\n    /**\n     * Object containing quantity of paragraphs to display\n     * and a randomWidth boolean.\n     */\n    paragraphs: {\n      type: Object,\n      default: () => ({ rows: 3, randomWidth: true }),\n    },\n\n    /**\n     * Duration time of the animation (ms), set -1 for an infinite animation.\n     */\n    animationDuration: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * This property has higher priority than \"option.animate\"\n     * @values true, false\n     */\n    animate: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * RippleDuration controls how long the delay is for the animation of a\n     * placeholder 1000 pixels from the top of the page. Each placeholder\n     * from the top down will have a delay duration from 0 to this offset.\n     * The delay of each placeholder animation is based on how far down the page\n     * the placeholder is rendered. This is a linear relationship. The unit\n     * is milliseconds.\n     */\n    offset: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Additional class name for the shape.\n     */\n    shapeClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the content.\n     */\n    contentClass: {\n      type: String,\n      default: '',\n    },\n  },\n};\n</script>\n"],"mappings":";;;;;;AAoCA,IAAK,IAAU;CACb,cAAc,EAAE,MAAM,GAAG;CACzB,MAAM;CAEN,YAAY;EACV,iBAAA;EACA,qBAAA;EACD;CAED,OAAO;EAKL,OAAO;GACL,MAAM;GACN,SAAS;GACT,YAAW,MAAS,OAAO,KAAK,EAAgB,CAAC,SAAS,EAAM;GACjE;EAMD,WAAW;GACT,MAAM;GACN,SAAS;GACV;EAMD,YAAY;GACV,MAAM;GACN,gBAAgB;IAAE,MAAM;IAAG,aAAa;IAAM;GAC/C;EAKD,mBAAmB;GACjB,MAAM;GACN,SAAS;GACV;EAMD,SAAS;GACP,MAAM;GACN,SAAS;GACV;EAUD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EAKD,YAAY;GACV,MAAM;GACN,SAAS;GACV;EAKD,cAAc;GACZ,MAAM;GACN,SAAS;GACV;EACF;CACF,QApGQ,OAAM,6CAA2C;;;aAnBxD,EA2BM,OAAA;EA1BJ,WAAQ;EACP,OAAK,EAAA;;qCAAkF,EAAA,WAAW,SAAI,GAAA;GAAuB,EAAA;;KAQ9H,EAQE,GAAA;EAPA,OAAM;EACL,MAAM,EAAA;EACN,OAAO,EAAA;EACP,sBAAoB,EAAA;EACpB,SAAS,EAAA;EACT,QAAQ,EAAA;EACR,iBAAe,EAAA;;;;;;;;KAElB,EAOM,OAPN,GAOM,CANJ,EAKE,GALF,EAKE,EAJQ,YAAU;EACjB,sBAAoB,EAAA;EACpB,SAAS,EAAA;EACT,QAAQ,EAAA"}
+{"version":3,"file":"skeleton-list-item.js","names":[],"sources":["../../../components/Skeleton/SkeletonListItem.vue"],"sourcesContent":["<template>\n  <div\n    data-qa=\"skeleton-list-item\"\n    :class=\"[\n      'd-skeleton-list-item',\n      {\n        'd-skeleton-list-item--single': paragraphs.rows === 1,\n      },\n      contentClass,\n    ]\"\n  >\n    <dt-skeleton-shape\n      class=\"d-skeleton-list-item__shape\"\n      :size=\"shapeSize\"\n      :shape=\"shape\"\n      :animation-duration=\"animationDuration\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n      :content-class=\"shapeClass\"\n    />\n    <div class=\"d-skeleton-list-item__paragraph-container\">\n      <dt-skeleton-paragraph\n        v-bind=\"paragraphs\"\n        :animation-duration=\"animationDuration\"\n        :animate=\"animate\"\n        :offset=\"offset\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { SKELETON_SHAPES } from './SkeletonConstants';\nimport DtSkeletonShape from './SkeletonShape.vue';\nimport DtSkeletonParagraph from './SkeletonParagraph.vue';\n\nexport default {\n  name: 'DtSkeletonListItem',\n\n  components: {\n    DtSkeletonShape,\n    DtSkeletonParagraph,\n  },\n\n  props: {\n    /**\n     * Defines the shape of the skeleton, accepts circle or square.\n     * @values circle, square\n     */\n    shape: {\n      type: String,\n      default: 'circle',\n      validator: shape => Object.keys(SKELETON_SHAPES).includes(shape),\n    },\n\n    /**\n     * Size of the shape\n     * @values 100, 200, 300, 400, 500\n     */\n    shapeSize: {\n      type: [String, Number],\n      default: 300,\n    },\n\n    /**\n     * Object containing quantity of paragraphs to display\n     * and a randomWidth boolean.\n     */\n    paragraphs: {\n      type: Object,\n      default: () => ({ rows: 3, randomWidth: true }),\n    },\n\n    /**\n     * Duration time of the animation (ms), set -1 for an infinite animation.\n     */\n    animationDuration: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * This property has higher priority than \"option.animate\"\n     * @values true, false\n     */\n    animate: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * RippleDuration controls how long the delay is for the animation of a\n     * placeholder 1000 pixels from the top of the page. Each placeholder\n     * from the top down will have a delay duration from 0 to this offset.\n     * The delay of each placeholder animation is based on how far down the page\n     * the placeholder is rendered. This is a linear relationship. The unit\n     * is milliseconds.\n     */\n    offset: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Additional class name for the shape.\n     */\n    shapeClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the content.\n     */\n    contentClass: {\n      type: String,\n      default: '',\n    },\n  },\n};\n</script>\n"],"mappings":";;;;;;AAoCA,IAAK,IAAU;CACb,MAAM;CAEN,YAAY;EACV,iBAAA;EACA,qBAAA;EACD;CAED,OAAO;EAKL,OAAO;GACL,MAAM;GACN,SAAS;GACT,YAAW,MAAS,OAAO,KAAK,EAAgB,CAAC,SAAS,EAAM;GACjE;EAMD,WAAW;GACT,MAAM,CAAC,QAAQ,OAAO;GACtB,SAAS;GACV;EAMD,YAAY;GACV,MAAM;GACN,gBAAgB;IAAE,MAAM;IAAG,aAAa;IAAM;GAC/C;EAKD,mBAAmB;GACjB,MAAM;GACN,SAAS;GACV;EAMD,SAAS;GACP,MAAM;GACN,SAAS;GACV;EAUD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EAKD,YAAY;GACV,MAAM;GACN,SAAS;GACV;EAKD,cAAc;GACZ,MAAM;GACN,SAAS;GACV;EACF;CACF,QAnGQ,OAAM,6CAA2C;;;aAnBxD,EA2BM,OAAA;EA1BJ,WAAQ;EACP,OAAK,EAAA;;qCAAkF,EAAA,WAAW,SAAI,GAAA;GAAuB,EAAA;;KAQ9H,EAQE,GAAA;EAPA,OAAM;EACL,MAAM,EAAA;EACN,OAAO,EAAA;EACP,sBAAoB,EAAA;EACpB,SAAS,EAAA;EACT,QAAQ,EAAA;EACR,iBAAe,EAAA;;;;;;;;KAElB,EAOM,OAPN,GAOM,CANJ,EAKE,GALF,EAKE,EAJQ,YAAU;EACjB,sBAAoB,EAAA;EACpB,SAAS,EAAA;EACT,QAAQ,EAAA"}

package/dist/lib/skeleton/skeleton-paragraph.cjs

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),t=require(`./skeleton-text.cjs`);let n=require(`vue`);var r=e=>e!==``&&!Number.isNaN(Number(e)),i={compatConfig:{MODE:3},name:`DtSkeletonParagraph`,components:{DtSkeletonText:t.default},props:{rows:{type:[Number,String],default:3,validator:r},animate:{type:Boolean,default:!0},minWidth:{type:[Number,String],default:30,validator:r},maxWidth:{type:[Number,String],default:100,validator:r},width:{type:[String,Array],default:null},randomWidth:{type:Boolean,default:!1},offset:{type:Number,default:1},animationDuration:{type:Number,default:-1},contentClass:{type:String,default:``},rowClass:{type:String,default:``}},computed:{integerRows(){return Number(this.rows)}},methods:{randomWidthPercentage(){let e=Math.min(this.minWidth,this.maxWidth),t=Math.max(this.minWidth,this.maxWidth);return`${Math.round(Math.random()*(t-e))+e}%`},getSizeParagraphRow(e){let t=this.width,n=Array.isArray(t),r=t?.[e-1],i=e===this.rows;return this.randomWidth?this.randomWidthPercentage():t&&!n?t:t&&n&&r?r:i?`38%`:`100%`}}};function a(e,t,r,i,a,o){let s=(0,n.resolveComponent)(`dt-skeleton-text`);return(0,n.openBlock)(),(0,n.createElementBlock)(`div`,{class:(0,n.normalizeClass)([`d-skeleton-paragraph`,r.contentClass]),contentClass:``,"data-qa":`skeleton-paragraph`},[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(o.integerRows,e=>((0,n.openBlock)(),(0,n.createBlock)(s,{key:e,"data-qa":`skeleton-paragraph-row`,"content-class":r.rowClass,animate:r.animate,offset:r.offset,"animation-duration":r.animationDuration,width:o.getSizeParagraphRow(e)},null,8,[`content-class`,`animate`,`offset`,`animation-duration`,`width`]))),128))],2)}var o=e.t(i,[[`render`,a]]);exports.default=o;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),t=require(`./skeleton-text.cjs`);let n=require(`vue`);var r=e=>e!==``&&!Number.isNaN(Number(e)),i={name:`DtSkeletonParagraph`,components:{DtSkeletonText:t.default},props:{rows:{type:[Number,String],default:3,validator:r},animate:{type:Boolean,default:!0},minWidth:{type:[Number,String],default:30,validator:r},maxWidth:{type:[Number,String],default:100,validator:r},width:{type:[String,Array],default:null},randomWidth:{type:Boolean,default:!1},offset:{type:Number,default:1},animationDuration:{type:Number,default:-1},contentClass:{type:String,default:``},rowClass:{type:String,default:``}},computed:{integerRows(){return Number(this.rows)}},methods:{randomWidthPercentage(){let e=Math.min(this.minWidth,this.maxWidth),t=Math.max(this.minWidth,this.maxWidth);return`${Math.round(Math.random()*(t-e))+e}%`},getSizeParagraphRow(e){let t=this.width,n=Array.isArray(t),r=t?.[e-1],i=e===this.rows;return this.randomWidth?this.randomWidthPercentage():t&&!n?t:t&&n&&r?r:i?`38%`:`100%`}}};function a(e,t,r,i,a,o){let s=(0,n.resolveComponent)(`dt-skeleton-text`);return(0,n.openBlock)(),(0,n.createElementBlock)(`div`,{class:(0,n.normalizeClass)([`d-skeleton-paragraph`,r.contentClass]),contentClass:``,"data-qa":`skeleton-paragraph`},[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(o.integerRows,e=>((0,n.openBlock)(),(0,n.createBlock)(s,{key:e,"data-qa":`skeleton-paragraph-row`,"content-class":r.rowClass,animate:r.animate,offset:r.offset,"animation-duration":r.animationDuration,width:o.getSizeParagraphRow(e)},null,8,[`content-class`,`animate`,`offset`,`animation-duration`,`width`]))),128))],2)}var o=e.t(i,[[`render`,a]]);exports.default=o;
 //# sourceMappingURL=skeleton-paragraph.cjs.map

package/dist/lib/skeleton/skeleton-paragraph.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton-paragraph.cjs","names":[],"sources":["../../../components/skeleton/skeleton-paragraph.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'd-skeleton-paragraph',\n      contentClass,\n    ]\"\n    contentClass\n    data-qa=\"skeleton-paragraph\"\n  >\n    <dt-skeleton-text\n      v-for=\"row in integerRows\"\n      :key=\"row\"\n      data-qa=\"skeleton-paragraph-row\"\n      :content-class=\"rowClass\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n      :animation-duration=\"animationDuration\"\n      :width=\"getSizeParagraphRow(row)\"\n    />\n  </div>\n</template>\n\n<script>\nimport DtSkeletonText from './skeleton-text.vue';\n\nconst validator = number => number !== '' && !Number.isNaN(Number(number));\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtSkeletonParagraph',\n  components: {\n    DtSkeletonText,\n  },\n\n  props: {\n    /**\n     * Quantity of rows to display\n     */\n    rows: {\n      type: [Number, String],\n      default: 3,\n      validator,\n    },\n\n    /**\n     * This property has higher priority than \"option.animate\"\n     * @values true, false\n     */\n    animate: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Controls the min width of paragraphs\n     */\n    minWidth: {\n      type: [Number, String],\n      default: 30,\n      validator,\n    },\n\n    /**\n     * Controls the max width of paragraphs\n     */\n    maxWidth: {\n      type: [Number, String],\n      default: 100,\n      validator,\n    },\n\n    /**\n     * Controls the width of paragraphs\n     */\n    width: {\n      type: [String, Array],\n      default: null,\n    },\n\n    /**\n     * If true, row widths will be random\n     * @values true, false\n     */\n    randomWidth: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * RippleDuration controls how long the delay is for the animation of a\n     * placeholder 1000 pixels from the top of the page. Each placeholder\n     * from the top down will have a delay duration from 0 to this offset.\n     * The delay of each placeholder animation is based on how far down the page\n     * the placeholder is rendered. This is a linear relationship. The unit\n     * is milliseconds.\n     */\n    offset: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Duration time of the animation (ms), set -1 for an infinite animation.\n     */\n    animationDuration: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * Additional class name for the content.\n     */\n    contentClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the row.\n     */\n    rowClass: {\n      type: String,\n      default: '',\n    },\n  },\n\n  computed: {\n    integerRows () {\n      return Number(this.rows);\n    },\n  },\n\n  methods: {\n    randomWidthPercentage () {\n      const min = Math.min(this.minWidth, this.maxWidth);\n      const max = Math.max(this.minWidth, this.maxWidth);\n      return `${Math.round(Math.random() * (max - min)) + min}%`;\n    },\n\n    getSizeParagraphRow (row) {\n      const paragraphWidth = this.width;\n      const isArrayWidth = Array.isArray(paragraphWidth);\n      const currentWidth = paragraphWidth?.[row - 1];\n      const isLastRow = row === this.rows;\n\n      if (this.randomWidth) {\n        return this.randomWidthPercentage();\n      }\n\n      if (paragraphWidth && !isArrayWidth) {\n        return paragraphWidth;\n      }\n\n      if (paragraphWidth && isArrayWidth && currentWidth) {\n        return currentWidth;\n      }\n\n      return isLastRow ? '38%' : '100%';\n    },\n  },\n};\n</script>\n"],"mappings":"yPAyBA,IAAM,EAAY,GAAU,IAAW,IAAM,CAAC,OAAO,MAAM,OAAO,EAAO,CAAC,CACrE,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,sBACN,WAAY,CACV,eAAA,EAAA,QACD,CAED,MAAO,CAIL,KAAM,CACJ,KAAM,CAAC,OAAQ,OAAO,CACtB,QAAS,EACT,YACD,CAMD,QAAS,CACP,KAAM,QACN,QAAS,GACV,CAKD,SAAU,CACR,KAAM,CAAC,OAAQ,OAAO,CACtB,QAAS,GACT,YACD,CAKD,SAAU,CACR,KAAM,CAAC,OAAQ,OAAO,CACtB,QAAS,IACT,YACD,CAKD,MAAO,CACL,KAAM,CAAC,OAAQ,MAAM,CACrB,QAAS,KACV,CAMD,YAAa,CACX,KAAM,QACN,QAAS,GACV,CAUD,OAAQ,CACN,KAAM,OACN,QAAS,EACV,CAKD,kBAAmB,CACjB,KAAM,OACN,QAAS,GACV,CAKD,aAAc,CACZ,KAAM,OACN,QAAS,GACV,CAKD,SAAU,CACR,KAAM,OACN,QAAS,GACV,CACF,CAED,SAAU,CACR,aAAe,CACb,OAAO,OAAO,KAAK,KAAK,EAE3B,CAED,QAAS,CACP,uBAAyB,CACvB,IAAM,EAAM,KAAK,IAAI,KAAK,SAAU,KAAK,SAAS,CAC5C,EAAM,KAAK,IAAI,KAAK,SAAU,KAAK,SAAS,CAClD,MAAO,GAAG,KAAK,MAAM,KAAK,QAAO,EAAK,EAAM,GAAI,CAAI,EAAI,IAG1D,oBAAqB,EAAK,CACxB,IAAM,EAAiB,KAAK,MACtB,EAAe,MAAM,QAAQ,EAAe,CAC5C,EAAe,IAAiB,EAAM,GACtC,EAAY,IAAQ,KAAK,KAc/B,OAZI,KAAK,YACA,KAAK,uBAAuB,CAGjC,GAAkB,CAAC,EACd,EAGL,GAAkB,GAAgB,EAC7B,EAGF,EAAY,MAAQ,QAE9B,CACF,2HA5IO,MAAA,CAjBH,OAAA,EAAA,EAAA,gBAAK,CAAA,uBAAwC,EAAA,aAAA,CAAA,CAI9C,aAAA,GACA,UAAQ,qEAWN,EAAA,SAAA,MAAA,EAAA,EAAA,YARc,EAAA,YAAP,wCAQP,EAAA,CAPC,IAAK,EACN,UAAQ,yBACP,gBAAe,EAAA,SACf,QAAS,EAAA,QACT,OAAQ,EAAA,OACR,qBAAoB,EAAA,kBACpB,MAAO,EAAA,oBAAoB,EAAG"}
+{"version":3,"file":"skeleton-paragraph.cjs","names":[],"sources":["../../../components/Skeleton/SkeletonParagraph.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'd-skeleton-paragraph',\n      contentClass,\n    ]\"\n    contentClass\n    data-qa=\"skeleton-paragraph\"\n  >\n    <dt-skeleton-text\n      v-for=\"row in integerRows\"\n      :key=\"row\"\n      data-qa=\"skeleton-paragraph-row\"\n      :content-class=\"rowClass\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n      :animation-duration=\"animationDuration\"\n      :width=\"getSizeParagraphRow(row)\"\n    />\n  </div>\n</template>\n\n<script>\nimport DtSkeletonText from './SkeletonText.vue';\n\nconst validator = number => number !== '' && !Number.isNaN(Number(number));\nexport default {\n  name: 'DtSkeletonParagraph',\n  components: {\n    DtSkeletonText,\n  },\n\n  props: {\n    /**\n     * Quantity of rows to display\n     */\n    rows: {\n      type: [Number, String],\n      default: 3,\n      validator,\n    },\n\n    /**\n     * This property has higher priority than \"option.animate\"\n     * @values true, false\n     */\n    animate: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Controls the min width of paragraphs\n     */\n    minWidth: {\n      type: [Number, String],\n      default: 30,\n      validator,\n    },\n\n    /**\n     * Controls the max width of paragraphs\n     */\n    maxWidth: {\n      type: [Number, String],\n      default: 100,\n      validator,\n    },\n\n    /**\n     * Controls the width of paragraphs\n     */\n    width: {\n      type: [String, Array],\n      default: null,\n    },\n\n    /**\n     * If true, row widths will be random\n     * @values true, false\n     */\n    randomWidth: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * RippleDuration controls how long the delay is for the animation of a\n     * placeholder 1000 pixels from the top of the page. Each placeholder\n     * from the top down will have a delay duration from 0 to this offset.\n     * The delay of each placeholder animation is based on how far down the page\n     * the placeholder is rendered. This is a linear relationship. The unit\n     * is milliseconds.\n     */\n    offset: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Duration time of the animation (ms), set -1 for an infinite animation.\n     */\n    animationDuration: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * Additional class name for the content.\n     */\n    contentClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the row.\n     */\n    rowClass: {\n      type: String,\n      default: '',\n    },\n  },\n\n  computed: {\n    integerRows () {\n      return Number(this.rows);\n    },\n  },\n\n  methods: {\n    randomWidthPercentage () {\n      const min = Math.min(this.minWidth, this.maxWidth);\n      const max = Math.max(this.minWidth, this.maxWidth);\n      return `${Math.round(Math.random() * (max - min)) + min}%`;\n    },\n\n    getSizeParagraphRow (row) {\n      const paragraphWidth = this.width;\n      const isArrayWidth = Array.isArray(paragraphWidth);\n      const currentWidth = paragraphWidth?.[row - 1];\n      const isLastRow = row === this.rows;\n\n      if (this.randomWidth) {\n        return this.randomWidthPercentage();\n      }\n\n      if (paragraphWidth && !isArrayWidth) {\n        return paragraphWidth;\n      }\n\n      if (paragraphWidth && isArrayWidth && currentWidth) {\n        return currentWidth;\n      }\n\n      return isLastRow ? '38%' : '100%';\n    },\n  },\n};\n</script>\n"],"mappings":"yPAyBA,IAAM,EAAY,GAAU,IAAW,IAAM,CAAC,OAAO,MAAM,OAAO,EAAO,CAAC,CACrE,EAAU,CACb,KAAM,sBACN,WAAY,CACV,eAAA,EAAA,QACD,CAED,MAAO,CAIL,KAAM,CACJ,KAAM,CAAC,OAAQ,OAAO,CACtB,QAAS,EACT,YACD,CAMD,QAAS,CACP,KAAM,QACN,QAAS,GACV,CAKD,SAAU,CACR,KAAM,CAAC,OAAQ,OAAO,CACtB,QAAS,GACT,YACD,CAKD,SAAU,CACR,KAAM,CAAC,OAAQ,OAAO,CACtB,QAAS,IACT,YACD,CAKD,MAAO,CACL,KAAM,CAAC,OAAQ,MAAM,CACrB,QAAS,KACV,CAMD,YAAa,CACX,KAAM,QACN,QAAS,GACV,CAUD,OAAQ,CACN,KAAM,OACN,QAAS,EACV,CAKD,kBAAmB,CACjB,KAAM,OACN,QAAS,GACV,CAKD,aAAc,CACZ,KAAM,OACN,QAAS,GACV,CAKD,SAAU,CACR,KAAM,OACN,QAAS,GACV,CACF,CAED,SAAU,CACR,aAAe,CACb,OAAO,OAAO,KAAK,KAAK,EAE3B,CAED,QAAS,CACP,uBAAyB,CACvB,IAAM,EAAM,KAAK,IAAI,KAAK,SAAU,KAAK,SAAS,CAC5C,EAAM,KAAK,IAAI,KAAK,SAAU,KAAK,SAAS,CAClD,MAAO,GAAG,KAAK,MAAM,KAAK,QAAO,EAAK,EAAM,GAAI,CAAI,EAAI,IAG1D,oBAAqB,EAAK,CACxB,IAAM,EAAiB,KAAK,MACtB,EAAe,MAAM,QAAQ,EAAe,CAC5C,EAAe,IAAiB,EAAM,GACtC,EAAY,IAAQ,KAAK,KAc/B,OAZI,KAAK,YACA,KAAK,uBAAuB,CAGjC,GAAkB,CAAC,EACd,EAGL,GAAkB,GAAgB,EAC7B,EAGF,EAAY,MAAQ,QAE9B,CACF,2HA3IO,MAAA,CAjBH,OAAA,EAAA,EAAA,gBAAK,CAAA,uBAAwC,EAAA,aAAA,CAAA,CAI9C,aAAA,GACA,UAAQ,qEAWN,EAAA,SAAA,MAAA,EAAA,EAAA,YARc,EAAA,YAAP,wCAQP,EAAA,CAPC,IAAK,EACN,UAAQ,yBACP,gBAAe,EAAA,SACf,QAAS,EAAA,QACT,OAAQ,EAAA,OACR,qBAAoB,EAAA,kBACpB,MAAO,EAAA,oBAAoB,EAAG"}

package/dist/lib/skeleton/skeleton-paragraph.js

@@ -1,9 +1,8 @@
 import { t as e } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
 import t from "./skeleton-text.js";
 import { Fragment as n, createBlock as r, createElementBlock as i, normalizeClass as a, openBlock as o, renderList as s, resolveComponent as c } from "vue";
-//#region components/skeleton/skeleton-paragraph.vue
+//#region components/Skeleton/SkeletonParagraph.vue
 var l = (e) => e !== "" && !Number.isNaN(Number(e)), u = {
-	compatConfig: { MODE: 3 },
 	name: "DtSkeletonParagraph",
 	components: { DtSkeletonText: t },
 	props: {

package/dist/lib/skeleton/skeleton-paragraph.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton-paragraph.js","names":[],"sources":["../../../components/skeleton/skeleton-paragraph.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'd-skeleton-paragraph',\n      contentClass,\n    ]\"\n    contentClass\n    data-qa=\"skeleton-paragraph\"\n  >\n    <dt-skeleton-text\n      v-for=\"row in integerRows\"\n      :key=\"row\"\n      data-qa=\"skeleton-paragraph-row\"\n      :content-class=\"rowClass\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n      :animation-duration=\"animationDuration\"\n      :width=\"getSizeParagraphRow(row)\"\n    />\n  </div>\n</template>\n\n<script>\nimport DtSkeletonText from './skeleton-text.vue';\n\nconst validator = number => number !== '' && !Number.isNaN(Number(number));\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtSkeletonParagraph',\n  components: {\n    DtSkeletonText,\n  },\n\n  props: {\n    /**\n     * Quantity of rows to display\n     */\n    rows: {\n      type: [Number, String],\n      default: 3,\n      validator,\n    },\n\n    /**\n     * This property has higher priority than \"option.animate\"\n     * @values true, false\n     */\n    animate: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Controls the min width of paragraphs\n     */\n    minWidth: {\n      type: [Number, String],\n      default: 30,\n      validator,\n    },\n\n    /**\n     * Controls the max width of paragraphs\n     */\n    maxWidth: {\n      type: [Number, String],\n      default: 100,\n      validator,\n    },\n\n    /**\n     * Controls the width of paragraphs\n     */\n    width: {\n      type: [String, Array],\n      default: null,\n    },\n\n    /**\n     * If true, row widths will be random\n     * @values true, false\n     */\n    randomWidth: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * RippleDuration controls how long the delay is for the animation of a\n     * placeholder 1000 pixels from the top of the page. Each placeholder\n     * from the top down will have a delay duration from 0 to this offset.\n     * The delay of each placeholder animation is based on how far down the page\n     * the placeholder is rendered. This is a linear relationship. The unit\n     * is milliseconds.\n     */\n    offset: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Duration time of the animation (ms), set -1 for an infinite animation.\n     */\n    animationDuration: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * Additional class name for the content.\n     */\n    contentClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the row.\n     */\n    rowClass: {\n      type: String,\n      default: '',\n    },\n  },\n\n  computed: {\n    integerRows () {\n      return Number(this.rows);\n    },\n  },\n\n  methods: {\n    randomWidthPercentage () {\n      const min = Math.min(this.minWidth, this.maxWidth);\n      const max = Math.max(this.minWidth, this.maxWidth);\n      return `${Math.round(Math.random() * (max - min)) + min}%`;\n    },\n\n    getSizeParagraphRow (row) {\n      const paragraphWidth = this.width;\n      const isArrayWidth = Array.isArray(paragraphWidth);\n      const currentWidth = paragraphWidth?.[row - 1];\n      const isLastRow = row === this.rows;\n\n      if (this.randomWidth) {\n        return this.randomWidthPercentage();\n      }\n\n      if (paragraphWidth && !isArrayWidth) {\n        return paragraphWidth;\n      }\n\n      if (paragraphWidth && isArrayWidth && currentWidth) {\n        return currentWidth;\n      }\n\n      return isLastRow ? '38%' : '100%';\n    },\n  },\n};\n</script>\n"],"mappings":";;;;AAyBA,IAAM,KAAY,MAAU,MAAW,MAAM,CAAC,OAAO,MAAM,OAAO,EAAO,CAAC,EACrE,IAAU;CACb,cAAc,EAAE,MAAM,GAAG;CACzB,MAAM;CACN,YAAY,EACV,gBAAA,GACD;CAED,OAAO;EAIL,MAAM;GACJ,MAAM,CAAC,QAAQ,OAAO;GACtB,SAAS;GACT;GACD;EAMD,SAAS;GACP,MAAM;GACN,SAAS;GACV;EAKD,UAAU;GACR,MAAM,CAAC,QAAQ,OAAO;GACtB,SAAS;GACT;GACD;EAKD,UAAU;GACR,MAAM,CAAC,QAAQ,OAAO;GACtB,SAAS;GACT;GACD;EAKD,OAAO;GACL,MAAM,CAAC,QAAQ,MAAM;GACrB,SAAS;GACV;EAMD,aAAa;GACX,MAAM;GACN,SAAS;GACV;EAUD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EAKD,mBAAmB;GACjB,MAAM;GACN,SAAS;GACV;EAKD,cAAc;GACZ,MAAM;GACN,SAAS;GACV;EAKD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EACF;CAED,UAAU,EACR,cAAe;AACb,SAAO,OAAO,KAAK,KAAK;IAE3B;CAED,SAAS;EACP,wBAAyB;GACvB,IAAM,IAAM,KAAK,IAAI,KAAK,UAAU,KAAK,SAAS,EAC5C,IAAM,KAAK,IAAI,KAAK,UAAU,KAAK,SAAS;AAClD,UAAO,GAAG,KAAK,MAAM,KAAK,QAAO,IAAK,IAAM,GAAI,GAAI,EAAI;;EAG1D,oBAAqB,GAAK;GACxB,IAAM,IAAiB,KAAK,OACtB,IAAe,MAAM,QAAQ,EAAe,EAC5C,IAAe,IAAiB,IAAM,IACtC,IAAY,MAAQ,KAAK;AAc/B,UAZI,KAAK,cACA,KAAK,uBAAuB,GAGjC,KAAkB,CAAC,IACd,IAGL,KAAkB,KAAgB,IAC7B,IAGF,IAAY,QAAQ;;EAE9B;CACF;;;aA9JC,EAkBM,OAAA;EAjBH,OAAK,EAAA,CAAA,wBAAwC,EAAA,aAAA,CAAA;EAI9C,cAAA;EACA,WAAQ;aAER,EASE,GAAA,MAAA,EARc,EAAA,cAAP,YADT,EASE,GAAA;EAPC,KAAK;EACN,WAAQ;EACP,iBAAe,EAAA;EACf,SAAS,EAAA;EACT,QAAQ,EAAA;EACR,sBAAoB,EAAA;EACpB,OAAO,EAAA,oBAAoB,EAAG"}
+{"version":3,"file":"skeleton-paragraph.js","names":[],"sources":["../../../components/Skeleton/SkeletonParagraph.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'd-skeleton-paragraph',\n      contentClass,\n    ]\"\n    contentClass\n    data-qa=\"skeleton-paragraph\"\n  >\n    <dt-skeleton-text\n      v-for=\"row in integerRows\"\n      :key=\"row\"\n      data-qa=\"skeleton-paragraph-row\"\n      :content-class=\"rowClass\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n      :animation-duration=\"animationDuration\"\n      :width=\"getSizeParagraphRow(row)\"\n    />\n  </div>\n</template>\n\n<script>\nimport DtSkeletonText from './SkeletonText.vue';\n\nconst validator = number => number !== '' && !Number.isNaN(Number(number));\nexport default {\n  name: 'DtSkeletonParagraph',\n  components: {\n    DtSkeletonText,\n  },\n\n  props: {\n    /**\n     * Quantity of rows to display\n     */\n    rows: {\n      type: [Number, String],\n      default: 3,\n      validator,\n    },\n\n    /**\n     * This property has higher priority than \"option.animate\"\n     * @values true, false\n     */\n    animate: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Controls the min width of paragraphs\n     */\n    minWidth: {\n      type: [Number, String],\n      default: 30,\n      validator,\n    },\n\n    /**\n     * Controls the max width of paragraphs\n     */\n    maxWidth: {\n      type: [Number, String],\n      default: 100,\n      validator,\n    },\n\n    /**\n     * Controls the width of paragraphs\n     */\n    width: {\n      type: [String, Array],\n      default: null,\n    },\n\n    /**\n     * If true, row widths will be random\n     * @values true, false\n     */\n    randomWidth: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * RippleDuration controls how long the delay is for the animation of a\n     * placeholder 1000 pixels from the top of the page. Each placeholder\n     * from the top down will have a delay duration from 0 to this offset.\n     * The delay of each placeholder animation is based on how far down the page\n     * the placeholder is rendered. This is a linear relationship. The unit\n     * is milliseconds.\n     */\n    offset: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Duration time of the animation (ms), set -1 for an infinite animation.\n     */\n    animationDuration: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * Additional class name for the content.\n     */\n    contentClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the row.\n     */\n    rowClass: {\n      type: String,\n      default: '',\n    },\n  },\n\n  computed: {\n    integerRows () {\n      return Number(this.rows);\n    },\n  },\n\n  methods: {\n    randomWidthPercentage () {\n      const min = Math.min(this.minWidth, this.maxWidth);\n      const max = Math.max(this.minWidth, this.maxWidth);\n      return `${Math.round(Math.random() * (max - min)) + min}%`;\n    },\n\n    getSizeParagraphRow (row) {\n      const paragraphWidth = this.width;\n      const isArrayWidth = Array.isArray(paragraphWidth);\n      const currentWidth = paragraphWidth?.[row - 1];\n      const isLastRow = row === this.rows;\n\n      if (this.randomWidth) {\n        return this.randomWidthPercentage();\n      }\n\n      if (paragraphWidth && !isArrayWidth) {\n        return paragraphWidth;\n      }\n\n      if (paragraphWidth && isArrayWidth && currentWidth) {\n        return currentWidth;\n      }\n\n      return isLastRow ? '38%' : '100%';\n    },\n  },\n};\n</script>\n"],"mappings":";;;;AAyBA,IAAM,KAAY,MAAU,MAAW,MAAM,CAAC,OAAO,MAAM,OAAO,EAAO,CAAC,EACrE,IAAU;CACb,MAAM;CACN,YAAY,EACV,gBAAA,GACD;CAED,OAAO;EAIL,MAAM;GACJ,MAAM,CAAC,QAAQ,OAAO;GACtB,SAAS;GACT;GACD;EAMD,SAAS;GACP,MAAM;GACN,SAAS;GACV;EAKD,UAAU;GACR,MAAM,CAAC,QAAQ,OAAO;GACtB,SAAS;GACT;GACD;EAKD,UAAU;GACR,MAAM,CAAC,QAAQ,OAAO;GACtB,SAAS;GACT;GACD;EAKD,OAAO;GACL,MAAM,CAAC,QAAQ,MAAM;GACrB,SAAS;GACV;EAMD,aAAa;GACX,MAAM;GACN,SAAS;GACV;EAUD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EAKD,mBAAmB;GACjB,MAAM;GACN,SAAS;GACV;EAKD,cAAc;GACZ,MAAM;GACN,SAAS;GACV;EAKD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EACF;CAED,UAAU,EACR,cAAe;AACb,SAAO,OAAO,KAAK,KAAK;IAE3B;CAED,SAAS;EACP,wBAAyB;GACvB,IAAM,IAAM,KAAK,IAAI,KAAK,UAAU,KAAK,SAAS,EAC5C,IAAM,KAAK,IAAI,KAAK,UAAU,KAAK,SAAS;AAClD,UAAO,GAAG,KAAK,MAAM,KAAK,QAAO,IAAK,IAAM,GAAI,GAAI,EAAI;;EAG1D,oBAAqB,GAAK;GACxB,IAAM,IAAiB,KAAK,OACtB,IAAe,MAAM,QAAQ,EAAe,EAC5C,IAAe,IAAiB,IAAM,IACtC,IAAY,MAAQ,KAAK;AAc/B,UAZI,KAAK,cACA,KAAK,uBAAuB,GAGjC,KAAkB,CAAC,IACd,IAGL,KAAkB,KAAgB,IAC7B,IAGF,IAAY,QAAQ;;EAE9B;CACF;;;aA7JC,EAkBM,OAAA;EAjBH,OAAK,EAAA,CAAA,wBAAwC,EAAA,aAAA,CAAA;EAI9C,cAAA;EACA,WAAQ;aAER,EASE,GAAA,MAAA,EARc,EAAA,cAAP,YADT,EASE,GAAA;EAPC,KAAK;EACN,WAAQ;EACP,iBAAe,EAAA;EACf,SAAS,EAAA;EACT,QAAQ,EAAA;EACR,sBAAoB,EAAA;EACpB,OAAO,EAAA,oBAAoB,EAAG"}

package/dist/lib/skeleton/skeleton-shape.cjs

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),t=require(`./skeleton-constants.cjs`),n=require(`../../common/mixins/skeleton.cjs`);let r=require(`vue`);var i={compatConfig:{MODE:3},name:`DtSkeletonShape`,mixins:[n.default],props:{shape:{type:String,default:`circle`,validator:e=>Object.keys(t.SKELETON_SHAPES).includes(e)},size:{type:String,default:`md`},animationDuration:{type:Number,default:-1},animate:{type:Boolean,default:!0},offset:{type:Number,default:1},contentClass:{type:[String,Object,Array],default:``}},data(){return{SKELETON_SHAPES:t.SKELETON_SHAPES}},computed:{shapeStyles(){let e=t.SKELETON_SHAPE_SIZES[this.size]||this.size;return{...this.skeletonStyle,"min-width":e,"max-width":e,"min-height":e,"max-height":e}}}};function a(e,t,n,i,a,o){return(0,r.openBlock)(),(0,r.createElementBlock)(`div`,{ref:`skeleton`,"data-qa":`skeleton-shape`,class:(0,r.normalizeClass)([`d-skeleton-placeholder`,a.SKELETON_SHAPES[n.shape],{"d-skeleton-placeholder--animate":n.animate},n.contentClass]),style:(0,r.normalizeStyle)(o.shapeStyles)},null,6)}var o=e.t(i,[[`render`,a]]);exports.default=o;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),t=require(`./skeleton-constants.cjs`),n=require(`../../common/mixins/skeleton.cjs`);let r=require(`vue`);var i={name:`DtSkeletonShape`,mixins:[n.default],props:{shape:{type:String,default:`circle`,validator:e=>Object.keys(t.SKELETON_SHAPES).includes(e)},size:{type:[String,Number],default:300},animationDuration:{type:Number,default:-1},animate:{type:Boolean,default:!0},offset:{type:Number,default:1},contentClass:{type:[String,Object,Array],default:``}},data(){return{SKELETON_SHAPES:t.SKELETON_SHAPES}},computed:{shapeStyles(){let e=t.SKELETON_SHAPE_SIZES[String(this.size)]||this.size;return{...this.skeletonStyle,"min-width":e,"max-width":e,"min-height":e,"max-height":e}}}};function a(e,t,n,i,a,o){return(0,r.openBlock)(),(0,r.createElementBlock)(`div`,{ref:`skeleton`,"data-qa":`skeleton-shape`,class:(0,r.normalizeClass)([`d-skeleton-placeholder`,a.SKELETON_SHAPES[n.shape],{"d-skeleton-placeholder--animate":n.animate},n.contentClass]),style:(0,r.normalizeStyle)(o.shapeStyles)},null,6)}var o=e.t(i,[[`render`,a]]);exports.default=o;
 //# sourceMappingURL=skeleton-shape.cjs.map

package/dist/lib/skeleton/skeleton-shape.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton-shape.cjs","names":[],"sources":["../../../components/skeleton/skeleton-shape.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"skeleton\"\n    data-qa=\"skeleton-shape\"\n    :class=\"[\n      'd-skeleton-placeholder',\n      SKELETON_SHAPES[shape],\n      {\n        'd-skeleton-placeholder--animate': animate,\n      },\n      contentClass,\n    ]\"\n    :style=\"shapeStyles\"\n  />\n</template>\n\n<script>\nimport SkeletonAnimation from '@/common/mixins/skeleton';\nimport {\n  SKELETON_SHAPES,\n  SKELETON_SHAPE_SIZES,\n} from './skeleton_constants';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtSkeletonShape',\n\n  mixins: [SkeletonAnimation],\n\n  props: {\n    /**\n     * Defines the shape of the skeleton, accepts circle or square.\n     * @values circle, square\n     */\n    shape: {\n      type: String,\n      default: 'circle',\n      validator: shape => Object.keys(SKELETON_SHAPES).includes(shape),\n    },\n\n    /**\n     * Size of the shape\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n    },\n\n    /**\n     * Duration time of the animation (ms), set -1 for an infinite animation.\n     */\n    animationDuration: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * This property has higher priority than \"option.animate\"\n     * @values true, false\n     */\n    animate: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * RippleDuration controls how long the delay is for the animation of a\n     * placeholder 1000 pixels from the top of the page. Each placeholder\n     * from the top down will have a delay duration from 0 to this offset.\n     * The delay of each placeholder animation is based on how far down the page\n     * the placeholder is rendered. This is a linear relationship. The unit\n     * is milliseconds.\n     */\n    offset: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Additional class name for the content.\n     */\n    contentClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      SKELETON_SHAPES,\n    };\n  },\n\n  computed: {\n    shapeStyles () {\n      const size = SKELETON_SHAPE_SIZES[this.size] || this.size;\n      return {\n        ...this.skeletonStyle,\n        'min-width': size,\n        'max-width': size,\n        'min-height': size,\n        'max-height': size,\n      };\n    },\n  },\n};\n</script>\n"],"mappings":"4SAuBA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,kBAEN,OAAQ,CAAC,EAAA,QAAkB,CAE3B,MAAO,CAKL,MAAO,CACL,KAAM,OACN,QAAS,SACT,UAAW,GAAS,OAAO,KAAK,EAAA,gBAAgB,CAAC,SAAS,EAAM,CACjE,CAMD,KAAM,CACJ,KAAM,OACN,QAAS,KACV,CAKD,kBAAmB,CACjB,KAAM,OACN,QAAS,GACV,CAMD,QAAS,CACP,KAAM,QACN,QAAS,GACV,CAUD,OAAQ,CACN,KAAM,OACN,QAAS,EACV,CAKD,aAAc,CACZ,KAAM,CAAC,OAAQ,OAAQ,MAAM,CAC7B,QAAS,GACV,CACF,CAED,MAAQ,CACN,MAAO,CACL,gBAAA,EAAA,gBACD,EAGH,SAAU,CACR,aAAe,CACb,IAAM,EAAO,EAAA,qBAAqB,KAAK,OAAS,KAAK,KACrD,MAAO,CACL,GAAG,KAAK,cACR,YAAa,EACb,YAAa,EACb,aAAc,EACd,aAAc,EACf,EAEJ,CACF,0EA7FG,MAAA,CAXA,IAAI,WACJ,UAAQ,iBACP,OAAA,EAAA,EAAA,gBAAK,0BAA0C,EAAA,gBAAgB,EAAA,0CAA2D,EAAA,QAAA,CAAwB,EAAA,eAQlJ,OAAA,EAAA,EAAA,gBAAO,EAAA,YAAW"}
+{"version":3,"file":"skeleton-shape.cjs","names":[],"sources":["../../../components/Skeleton/SkeletonShape.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"skeleton\"\n    data-qa=\"skeleton-shape\"\n    :class=\"[\n      'd-skeleton-placeholder',\n      SKELETON_SHAPES[shape],\n      {\n        'd-skeleton-placeholder--animate': animate,\n      },\n      contentClass,\n    ]\"\n    :style=\"shapeStyles\"\n  />\n</template>\n\n<script>\nimport SkeletonAnimation from '@/common/mixins/skeleton';\nimport {\n  SKELETON_SHAPES,\n  SKELETON_SHAPE_SIZES,\n} from './SkeletonConstants';\n\nexport default {\n  name: 'DtSkeletonShape',\n\n  mixins: [SkeletonAnimation],\n\n  props: {\n    /**\n     * Defines the shape of the skeleton, accepts circle or square.\n     * @values circle, square\n     */\n    shape: {\n      type: String,\n      default: 'circle',\n      validator: shape => Object.keys(SKELETON_SHAPES).includes(shape),\n    },\n\n    /**\n     * Size of the shape\n     * @values 100, 200, 300, 400, 500\n     */\n    size: {\n      type: [String, Number],\n      default: 300,\n    },\n\n    /**\n     * Duration time of the animation (ms), set -1 for an infinite animation.\n     */\n    animationDuration: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * This property has higher priority than \"option.animate\"\n     * @values true, false\n     */\n    animate: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * RippleDuration controls how long the delay is for the animation of a\n     * placeholder 1000 pixels from the top of the page. Each placeholder\n     * from the top down will have a delay duration from 0 to this offset.\n     * The delay of each placeholder animation is based on how far down the page\n     * the placeholder is rendered. This is a linear relationship. The unit\n     * is milliseconds.\n     */\n    offset: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Additional class name for the content.\n     */\n    contentClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      SKELETON_SHAPES,\n    };\n  },\n\n  computed: {\n    shapeStyles () {\n      const size = SKELETON_SHAPE_SIZES[String(this.size)] || this.size;\n      return {\n        ...this.skeletonStyle,\n        'min-width': size,\n        'max-width': size,\n        'min-height': size,\n        'max-height': size,\n      };\n    },\n  },\n};\n</script>\n"],"mappings":"4SAuBA,IAAK,EAAU,CACb,KAAM,kBAEN,OAAQ,CAAC,EAAA,QAAkB,CAE3B,MAAO,CAKL,MAAO,CACL,KAAM,OACN,QAAS,SACT,UAAW,GAAS,OAAO,KAAK,EAAA,gBAAgB,CAAC,SAAS,EAAM,CACjE,CAMD,KAAM,CACJ,KAAM,CAAC,OAAQ,OAAO,CACtB,QAAS,IACV,CAKD,kBAAmB,CACjB,KAAM,OACN,QAAS,GACV,CAMD,QAAS,CACP,KAAM,QACN,QAAS,GACV,CAUD,OAAQ,CACN,KAAM,OACN,QAAS,EACV,CAKD,aAAc,CACZ,KAAM,CAAC,OAAQ,OAAQ,MAAM,CAC7B,QAAS,GACV,CACF,CAED,MAAQ,CACN,MAAO,CACL,gBAAA,EAAA,gBACD,EAGH,SAAU,CACR,aAAe,CACb,IAAM,EAAO,EAAA,qBAAqB,OAAO,KAAK,KAAK,GAAK,KAAK,KAC7D,MAAO,CACL,GAAG,KAAK,cACR,YAAa,EACb,YAAa,EACb,aAAc,EACd,aAAc,EACf,EAEJ,CACF,0EA5FG,MAAA,CAXA,IAAI,WACJ,UAAQ,iBACP,OAAA,EAAA,EAAA,gBAAK,0BAA0C,EAAA,gBAAgB,EAAA,0CAA2D,EAAA,QAAA,CAAwB,EAAA,eAQlJ,OAAA,EAAA,EAAA,gBAAO,EAAA,YAAW"}

package/dist/lib/skeleton/skeleton-shape.js

@@ -2,9 +2,8 @@ import { t as e } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
 import { SKELETON_SHAPES as t, SKELETON_SHAPE_SIZES as n } from "./skeleton-constants.js";
 import r from "../../common/mixins/skeleton.js";
 import { createElementBlock as i, normalizeClass as a, normalizeStyle as o, openBlock as s } from "vue";
-//#region components/skeleton/skeleton-shape.vue
+//#region components/Skeleton/SkeletonShape.vue
 var c = {
-	compatConfig: { MODE: 3 },
 	name: "DtSkeletonShape",
 	mixins: [r],
 	props: {
@@ -14,8 +13,8 @@ var c = {
 			validator: (e) => Object.keys(t).includes(e)
 		},
 		size: {
-			type: String,
-			default: "md"
+			type: [String, Number],
+			default: 300
 		},
 		animationDuration: {
 			type: Number,
@@ -42,7 +41,7 @@ var c = {
 		return { SKELETON_SHAPES: t };
 	},
 	computed: { shapeStyles() {
-		let e = n[this.size] || this.size;
+		let e = n[String(this.size)] || this.size;
 		return {
 			...this.skeletonStyle,
 			"min-width": e,

package/dist/lib/skeleton/skeleton-shape.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton-shape.js","names":[],"sources":["../../../components/skeleton/skeleton-shape.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"skeleton\"\n    data-qa=\"skeleton-shape\"\n    :class=\"[\n      'd-skeleton-placeholder',\n      SKELETON_SHAPES[shape],\n      {\n        'd-skeleton-placeholder--animate': animate,\n      },\n      contentClass,\n    ]\"\n    :style=\"shapeStyles\"\n  />\n</template>\n\n<script>\nimport SkeletonAnimation from '@/common/mixins/skeleton';\nimport {\n  SKELETON_SHAPES,\n  SKELETON_SHAPE_SIZES,\n} from './skeleton_constants';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtSkeletonShape',\n\n  mixins: [SkeletonAnimation],\n\n  props: {\n    /**\n     * Defines the shape of the skeleton, accepts circle or square.\n     * @values circle, square\n     */\n    shape: {\n      type: String,\n      default: 'circle',\n      validator: shape => Object.keys(SKELETON_SHAPES).includes(shape),\n    },\n\n    /**\n     * Size of the shape\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n    },\n\n    /**\n     * Duration time of the animation (ms), set -1 for an infinite animation.\n     */\n    animationDuration: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * This property has higher priority than \"option.animate\"\n     * @values true, false\n     */\n    animate: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * RippleDuration controls how long the delay is for the animation of a\n     * placeholder 1000 pixels from the top of the page. Each placeholder\n     * from the top down will have a delay duration from 0 to this offset.\n     * The delay of each placeholder animation is based on how far down the page\n     * the placeholder is rendered. This is a linear relationship. The unit\n     * is milliseconds.\n     */\n    offset: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Additional class name for the content.\n     */\n    contentClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      SKELETON_SHAPES,\n    };\n  },\n\n  computed: {\n    shapeStyles () {\n      const size = SKELETON_SHAPE_SIZES[this.size] || this.size;\n      return {\n        ...this.skeletonStyle,\n        'min-width': size,\n        'max-width': size,\n        'min-height': size,\n        'max-height': size,\n      };\n    },\n  },\n};\n</script>\n"],"mappings":";;;;;AAuBA,IAAK,IAAU;CACb,cAAc,EAAE,MAAM,GAAG;CACzB,MAAM;CAEN,QAAQ,CAAC,EAAkB;CAE3B,OAAO;EAKL,OAAO;GACL,MAAM;GACN,SAAS;GACT,YAAW,MAAS,OAAO,KAAK,EAAgB,CAAC,SAAS,EAAM;GACjE;EAMD,MAAM;GACJ,MAAM;GACN,SAAS;GACV;EAKD,mBAAmB;GACjB,MAAM;GACN,SAAS;GACV;EAMD,SAAS;GACP,MAAM;GACN,SAAS;GACV;EAUD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EAKD,cAAc;GACZ,MAAM;IAAC;IAAQ;IAAQ;IAAM;GAC7B,SAAS;GACV;EACF;CAED,OAAQ;AACN,SAAO,EACL,oBACD;;CAGH,UAAU,EACR,cAAe;EACb,IAAM,IAAO,EAAqB,KAAK,SAAS,KAAK;AACrD,SAAO;GACL,GAAG,KAAK;GACR,aAAa;GACb,aAAa;GACb,cAAc;GACd,cAAc;GACf;IAEJ;CACF;;aAzGC,EAYE,OAAA;EAXA,KAAI;EACJ,WAAQ;EACP,OAAK,EAAA;;GAA0C,EAAA,gBAAgB,EAAA;wCAA2D,EAAA,SAAA;GAAwB,EAAA;;EAQlJ,OAAK,EAAE,EAAA,YAAW"}
+{"version":3,"file":"skeleton-shape.js","names":[],"sources":["../../../components/Skeleton/SkeletonShape.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"skeleton\"\n    data-qa=\"skeleton-shape\"\n    :class=\"[\n      'd-skeleton-placeholder',\n      SKELETON_SHAPES[shape],\n      {\n        'd-skeleton-placeholder--animate': animate,\n      },\n      contentClass,\n    ]\"\n    :style=\"shapeStyles\"\n  />\n</template>\n\n<script>\nimport SkeletonAnimation from '@/common/mixins/skeleton';\nimport {\n  SKELETON_SHAPES,\n  SKELETON_SHAPE_SIZES,\n} from './SkeletonConstants';\n\nexport default {\n  name: 'DtSkeletonShape',\n\n  mixins: [SkeletonAnimation],\n\n  props: {\n    /**\n     * Defines the shape of the skeleton, accepts circle or square.\n     * @values circle, square\n     */\n    shape: {\n      type: String,\n      default: 'circle',\n      validator: shape => Object.keys(SKELETON_SHAPES).includes(shape),\n    },\n\n    /**\n     * Size of the shape\n     * @values 100, 200, 300, 400, 500\n     */\n    size: {\n      type: [String, Number],\n      default: 300,\n    },\n\n    /**\n     * Duration time of the animation (ms), set -1 for an infinite animation.\n     */\n    animationDuration: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * This property has higher priority than \"option.animate\"\n     * @values true, false\n     */\n    animate: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * RippleDuration controls how long the delay is for the animation of a\n     * placeholder 1000 pixels from the top of the page. Each placeholder\n     * from the top down will have a delay duration from 0 to this offset.\n     * The delay of each placeholder animation is based on how far down the page\n     * the placeholder is rendered. This is a linear relationship. The unit\n     * is milliseconds.\n     */\n    offset: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Additional class name for the content.\n     */\n    contentClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      SKELETON_SHAPES,\n    };\n  },\n\n  computed: {\n    shapeStyles () {\n      const size = SKELETON_SHAPE_SIZES[String(this.size)] || this.size;\n      return {\n        ...this.skeletonStyle,\n        'min-width': size,\n        'max-width': size,\n        'min-height': size,\n        'max-height': size,\n      };\n    },\n  },\n};\n</script>\n"],"mappings":";;;;;AAuBA,IAAK,IAAU;CACb,MAAM;CAEN,QAAQ,CAAC,EAAkB;CAE3B,OAAO;EAKL,OAAO;GACL,MAAM;GACN,SAAS;GACT,YAAW,MAAS,OAAO,KAAK,EAAgB,CAAC,SAAS,EAAM;GACjE;EAMD,MAAM;GACJ,MAAM,CAAC,QAAQ,OAAO;GACtB,SAAS;GACV;EAKD,mBAAmB;GACjB,MAAM;GACN,SAAS;GACV;EAMD,SAAS;GACP,MAAM;GACN,SAAS;GACV;EAUD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EAKD,cAAc;GACZ,MAAM;IAAC;IAAQ;IAAQ;IAAM;GAC7B,SAAS;GACV;EACF;CAED,OAAQ;AACN,SAAO,EACL,oBACD;;CAGH,UAAU,EACR,cAAe;EACb,IAAM,IAAO,EAAqB,OAAO,KAAK,KAAK,KAAK,KAAK;AAC7D,SAAO;GACL,GAAG,KAAK;GACR,aAAa;GACb,aAAa;GACb,cAAc;GACd,cAAc;GACf;IAEJ;CACF;;aAxGC,EAYE,OAAA;EAXA,KAAI;EACJ,WAAQ;EACP,OAAK,EAAA;;GAA0C,EAAA,gBAAgB,EAAA;wCAA2D,EAAA,SAAA;GAAwB,EAAA;;EAQlJ,OAAK,EAAE,EAAA,YAAW"}

package/dist/lib/skeleton/skeleton-text.cjs

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),t=require(`./skeleton-constants.cjs`),n=require(`../../common/mixins/skeleton.cjs`);let r=require(`vue`);var i={compatConfig:{MODE:3},name:`DtSkeletonText`,mixins:[n.default],props:{type:{type:String,default:`body`,validator:e=>t.SKELETON_TEXT_TYPES.includes(e)},headingHeight:{type:String,default:`md`,validator:e=>Object.keys(t.SKELETON_HEADING_HEIGHTS).includes(e)},width:{type:String,default:`100%`},animationDuration:{type:Number,default:-1},animate:{type:Boolean,default:!1},offset:{type:Number,default:1},contentClass:{type:String,default:``}},data(){return{SKELETON_HEADING_HEIGHTS:t.SKELETON_HEADING_HEIGHTS}}};function a(e,t,n,i,a,o){return n.type===`body`?((0,r.openBlock)(),(0,r.createElementBlock)(`div`,{key:0,ref:`skeleton`,"data-qa":`skeleton-text-body`,class:(0,r.normalizeClass)([`d-skeleton-text`,`d-skeleton-placeholder`,{"d-skeleton-placeholder--animate":n.animate},n.contentClass]),style:(0,r.normalizeStyle)({width:n.width,...e.skeletonStyle})},null,6)):n.type===`heading`?((0,r.openBlock)(),(0,r.createElementBlock)(`div`,{key:1,ref:`skeleton`,"data-qa":`skeleton-text-heading`,class:(0,r.normalizeClass)([a.SKELETON_HEADING_HEIGHTS[n.headingHeight],`d-skeleton-text--heading`,`d-skeleton-placeholder`,{"d-skeleton-placeholder--animate":n.animate},n.contentClass]),style:(0,r.normalizeStyle)({width:n.width,...e.skeletonStyle})},null,6)):(0,r.createCommentVNode)(``,!0)}var o=e.t(i,[[`render`,a]]);exports.default=o;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),t=require(`./skeleton-constants.cjs`),n=require(`../../common/mixins/skeleton.cjs`);let r=require(`vue`);var i={name:`DtSkeletonText`,mixins:[n.default],props:{type:{type:String,default:`body`,validator:e=>t.SKELETON_TEXT_TYPES.includes(e)},headingHeight:{type:String,default:`md`,validator:e=>Object.keys(t.SKELETON_HEADING_HEIGHTS).includes(e)},width:{type:String,default:`100%`},animationDuration:{type:Number,default:-1},animate:{type:Boolean,default:!1},offset:{type:Number,default:1},contentClass:{type:String,default:``}},data(){return{SKELETON_HEADING_HEIGHTS:t.SKELETON_HEADING_HEIGHTS}}};function a(e,t,n,i,a,o){return n.type===`body`?((0,r.openBlock)(),(0,r.createElementBlock)(`div`,{key:0,ref:`skeleton`,"data-qa":`skeleton-text-body`,class:(0,r.normalizeClass)([`d-skeleton-text`,`d-skeleton-placeholder`,{"d-skeleton-placeholder--animate":n.animate},n.contentClass]),style:(0,r.normalizeStyle)({width:n.width,...e.skeletonStyle})},null,6)):n.type===`heading`?((0,r.openBlock)(),(0,r.createElementBlock)(`div`,{key:1,ref:`skeleton`,"data-qa":`skeleton-text-heading`,class:(0,r.normalizeClass)([a.SKELETON_HEADING_HEIGHTS[n.headingHeight],`d-skeleton-text--heading`,`d-skeleton-placeholder`,{"d-skeleton-placeholder--animate":n.animate},n.contentClass]),style:(0,r.normalizeStyle)({width:n.width,...e.skeletonStyle})},null,6)):(0,r.createCommentVNode)(``,!0)}var o=e.t(i,[[`render`,a]]);exports.default=o;
 //# sourceMappingURL=skeleton-text.cjs.map

package/dist/lib/skeleton/skeleton-text.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton-text.cjs","names":[],"sources":["../../../components/skeleton/skeleton-text.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"type === 'body'\"\n    ref=\"skeleton\"\n    data-qa=\"skeleton-text-body\"\n    :class=\"[\n      'd-skeleton-text',\n      'd-skeleton-placeholder',\n      {\n        'd-skeleton-placeholder--animate': animate,\n      },\n      contentClass,\n    ]\"\n    :style=\"{\n      width,\n      ...skeletonStyle,\n    }\"\n  />\n  <div\n    v-else-if=\"type === 'heading'\"\n    ref=\"skeleton\"\n    data-qa=\"skeleton-text-heading\"\n    :class=\"[\n      SKELETON_HEADING_HEIGHTS[headingHeight],\n      'd-skeleton-text--heading',\n      'd-skeleton-placeholder',\n      {\n        'd-skeleton-placeholder--animate': animate,\n      },\n      contentClass,\n    ]\"\n    :style=\"{\n      width,\n      ...skeletonStyle,\n    }\"\n  />\n</template>\n\n<script>\nimport { SKELETON_HEADING_HEIGHTS, SKELETON_TEXT_TYPES } from './skeleton_constants';\nimport SkeletonAnimation from '@/common/mixins/skeleton';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtSkeletonText',\n\n  mixins: [SkeletonAnimation],\n\n  props: {\n    /**\n     * Skeleton type\n     * @values body, heading\n     */\n    type: {\n      type: String,\n      default: 'body',\n      validator: type => SKELETON_TEXT_TYPES.includes(type),\n    },\n\n    /**\n     * Heading height\n     * @values sm, md, lg\n     */\n    headingHeight: {\n      type: String,\n      default: 'md',\n      validator: headingHeight => Object.keys(SKELETON_HEADING_HEIGHTS).includes(headingHeight),\n    },\n\n    /**\n     * Width of the skeleton\n     */\n    width: {\n      type: String,\n      default: '100%',\n    },\n\n    /**\n     * Duration time of the animation (ms), set -1 for an infinite animation.\n     */\n    animationDuration: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * This property has higher priority than \"option.animate\"\n     * @values true, false\n     */\n    animate: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * RippleDuration controls how long the delay is for the animation of a\n     * placeholder 1000 pixels from the top of the page. Each placeholder\n     * from the top down will have a delay duration from 0 to this offset.\n     * The delay of each placeholder animation is based on how far down the page\n     * the placeholder is rendered. This is a linear relationship. The unit\n     * is milliseconds.\n     */\n    offset: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Additional class name for the content.\n     */\n    contentClass: {\n      type: String,\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      SKELETON_HEADING_HEIGHTS,\n    };\n  },\n};\n</script>\n"],"mappings":"4SA0CA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,iBAEN,OAAQ,CAAC,EAAA,QAAkB,CAE3B,MAAO,CAKL,KAAM,CACJ,KAAM,OACN,QAAS,OACT,UAAW,GAAQ,EAAA,oBAAoB,SAAS,EAAK,CACtD,CAMD,cAAe,CACb,KAAM,OACN,QAAS,KACT,UAAW,GAAiB,OAAO,KAAK,EAAA,yBAAyB,CAAC,SAAS,EAAc,CAC1F,CAKD,MAAO,CACL,KAAM,OACN,QAAS,OACV,CAKD,kBAAmB,CACjB,KAAM,OACN,QAAS,GACV,CAMD,QAAS,CACP,KAAM,QACN,QAAS,GACV,CAUD,OAAQ,CACN,KAAM,OACN,QAAS,EACV,CAKD,aAAc,CACZ,KAAM,OACN,QAAS,GACV,CACF,CAED,MAAQ,CACN,MAAO,CACL,yBAAA,EAAA,yBACD,EAEJ,gCAvHS,EAAA,OAAI,SAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAeV,MAAA,OAdA,IAAI,WACJ,UAAQ,qBACP,OAAA,EAAA,EAAA,gBAAK,+EAAgH,EAAA,QAAA,CAAwB,EAAA,eAQ7I,OAAA,EAAA,EAAA,gBAAK,OAAU,EAAA,SAAgB,EAAA,0BAMrB,EAAA,OAAI,YAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAgBf,MAAA,OAfA,IAAI,WACJ,UAAQ,wBACP,OAAA,EAAA,EAAA,gBAAK,CAAU,EAAA,yBAAyB,EAAA,sGAAqI,EAAA,QAAA,CAAwB,EAAA,eASrM,OAAA,EAAA,EAAA,gBAAK,OAAU,EAAA,SAAgB,EAAA"}
+{"version":3,"file":"skeleton-text.cjs","names":[],"sources":["../../../components/Skeleton/SkeletonText.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"type === 'body'\"\n    ref=\"skeleton\"\n    data-qa=\"skeleton-text-body\"\n    :class=\"[\n      'd-skeleton-text',\n      'd-skeleton-placeholder',\n      {\n        'd-skeleton-placeholder--animate': animate,\n      },\n      contentClass,\n    ]\"\n    :style=\"{\n      width,\n      ...skeletonStyle,\n    }\"\n  />\n  <div\n    v-else-if=\"type === 'heading'\"\n    ref=\"skeleton\"\n    data-qa=\"skeleton-text-heading\"\n    :class=\"[\n      SKELETON_HEADING_HEIGHTS[headingHeight],\n      'd-skeleton-text--heading',\n      'd-skeleton-placeholder',\n      {\n        'd-skeleton-placeholder--animate': animate,\n      },\n      contentClass,\n    ]\"\n    :style=\"{\n      width,\n      ...skeletonStyle,\n    }\"\n  />\n</template>\n\n<script>\nimport { SKELETON_HEADING_HEIGHTS, SKELETON_TEXT_TYPES } from './SkeletonConstants';\nimport SkeletonAnimation from '@/common/mixins/skeleton';\n\nexport default {\n  name: 'DtSkeletonText',\n\n  mixins: [SkeletonAnimation],\n\n  props: {\n    /**\n     * Skeleton type\n     * @values body, heading\n     */\n    type: {\n      type: String,\n      default: 'body',\n      validator: type => SKELETON_TEXT_TYPES.includes(type),\n    },\n\n    /**\n     * Heading height\n     * @values sm, md, lg\n     */\n    headingHeight: {\n      type: String,\n      default: 'md',\n      validator: headingHeight => Object.keys(SKELETON_HEADING_HEIGHTS).includes(headingHeight),\n    },\n\n    /**\n     * Width of the skeleton\n     */\n    width: {\n      type: String,\n      default: '100%',\n    },\n\n    /**\n     * Duration time of the animation (ms), set -1 for an infinite animation.\n     */\n    animationDuration: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * This property has higher priority than \"option.animate\"\n     * @values true, false\n     */\n    animate: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * RippleDuration controls how long the delay is for the animation of a\n     * placeholder 1000 pixels from the top of the page. Each placeholder\n     * from the top down will have a delay duration from 0 to this offset.\n     * The delay of each placeholder animation is based on how far down the page\n     * the placeholder is rendered. This is a linear relationship. The unit\n     * is milliseconds.\n     */\n    offset: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Additional class name for the content.\n     */\n    contentClass: {\n      type: String,\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      SKELETON_HEADING_HEIGHTS,\n    };\n  },\n};\n</script>\n"],"mappings":"4SA0CA,IAAK,EAAU,CACb,KAAM,iBAEN,OAAQ,CAAC,EAAA,QAAkB,CAE3B,MAAO,CAKL,KAAM,CACJ,KAAM,OACN,QAAS,OACT,UAAW,GAAQ,EAAA,oBAAoB,SAAS,EAAK,CACtD,CAMD,cAAe,CACb,KAAM,OACN,QAAS,KACT,UAAW,GAAiB,OAAO,KAAK,EAAA,yBAAyB,CAAC,SAAS,EAAc,CAC1F,CAKD,MAAO,CACL,KAAM,OACN,QAAS,OACV,CAKD,kBAAmB,CACjB,KAAM,OACN,QAAS,GACV,CAMD,QAAS,CACP,KAAM,QACN,QAAS,GACV,CAUD,OAAQ,CACN,KAAM,OACN,QAAS,EACV,CAKD,aAAc,CACZ,KAAM,OACN,QAAS,GACV,CACF,CAED,MAAQ,CACN,MAAO,CACL,yBAAA,EAAA,yBACD,EAEJ,gCAtHS,EAAA,OAAI,SAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAeV,MAAA,OAdA,IAAI,WACJ,UAAQ,qBACP,OAAA,EAAA,EAAA,gBAAK,+EAAgH,EAAA,QAAA,CAAwB,EAAA,eAQ7I,OAAA,EAAA,EAAA,gBAAK,OAAU,EAAA,SAAgB,EAAA,0BAMrB,EAAA,OAAI,YAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAgBf,MAAA,OAfA,IAAI,WACJ,UAAQ,wBACP,OAAA,EAAA,EAAA,gBAAK,CAAU,EAAA,yBAAyB,EAAA,sGAAqI,EAAA,QAAA,CAAwB,EAAA,eASrM,OAAA,EAAA,EAAA,gBAAK,OAAU,EAAA,SAAgB,EAAA"}

package/dist/lib/skeleton/skeleton-text.js

@@ -2,9 +2,8 @@ import { t as e } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
 import { SKELETON_HEADING_HEIGHTS as t, SKELETON_TEXT_TYPES as n } from "./skeleton-constants.js";
 import r from "../../common/mixins/skeleton.js";
 import { createCommentVNode as i, createElementBlock as a, normalizeClass as o, normalizeStyle as s, openBlock as c } from "vue";
-//#region components/skeleton/skeleton-text.vue
+//#region components/Skeleton/SkeletonText.vue
 var l = {
-	compatConfig: { MODE: 3 },
 	name: "DtSkeletonText",
 	mixins: [r],
 	props: {

package/dist/lib/skeleton/skeleton-text.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton-text.js","names":[],"sources":["../../../components/skeleton/skeleton-text.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"type === 'body'\"\n    ref=\"skeleton\"\n    data-qa=\"skeleton-text-body\"\n    :class=\"[\n      'd-skeleton-text',\n      'd-skeleton-placeholder',\n      {\n        'd-skeleton-placeholder--animate': animate,\n      },\n      contentClass,\n    ]\"\n    :style=\"{\n      width,\n      ...skeletonStyle,\n    }\"\n  />\n  <div\n    v-else-if=\"type === 'heading'\"\n    ref=\"skeleton\"\n    data-qa=\"skeleton-text-heading\"\n    :class=\"[\n      SKELETON_HEADING_HEIGHTS[headingHeight],\n      'd-skeleton-text--heading',\n      'd-skeleton-placeholder',\n      {\n        'd-skeleton-placeholder--animate': animate,\n      },\n      contentClass,\n    ]\"\n    :style=\"{\n      width,\n      ...skeletonStyle,\n    }\"\n  />\n</template>\n\n<script>\nimport { SKELETON_HEADING_HEIGHTS, SKELETON_TEXT_TYPES } from './skeleton_constants';\nimport SkeletonAnimation from '@/common/mixins/skeleton';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtSkeletonText',\n\n  mixins: [SkeletonAnimation],\n\n  props: {\n    /**\n     * Skeleton type\n     * @values body, heading\n     */\n    type: {\n      type: String,\n      default: 'body',\n      validator: type => SKELETON_TEXT_TYPES.includes(type),\n    },\n\n    /**\n     * Heading height\n     * @values sm, md, lg\n     */\n    headingHeight: {\n      type: String,\n      default: 'md',\n      validator: headingHeight => Object.keys(SKELETON_HEADING_HEIGHTS).includes(headingHeight),\n    },\n\n    /**\n     * Width of the skeleton\n     */\n    width: {\n      type: String,\n      default: '100%',\n    },\n\n    /**\n     * Duration time of the animation (ms), set -1 for an infinite animation.\n     */\n    animationDuration: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * This property has higher priority than \"option.animate\"\n     * @values true, false\n     */\n    animate: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * RippleDuration controls how long the delay is for the animation of a\n     * placeholder 1000 pixels from the top of the page. Each placeholder\n     * from the top down will have a delay duration from 0 to this offset.\n     * The delay of each placeholder animation is based on how far down the page\n     * the placeholder is rendered. This is a linear relationship. The unit\n     * is milliseconds.\n     */\n    offset: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Additional class name for the content.\n     */\n    contentClass: {\n      type: String,\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      SKELETON_HEADING_HEIGHTS,\n    };\n  },\n};\n</script>\n"],"mappings":";;;;;AA0CA,IAAK,IAAU;CACb,cAAc,EAAE,MAAM,GAAG;CACzB,MAAM;CAEN,QAAQ,CAAC,EAAkB;CAE3B,OAAO;EAKL,MAAM;GACJ,MAAM;GACN,SAAS;GACT,YAAW,MAAQ,EAAoB,SAAS,EAAK;GACtD;EAMD,eAAe;GACb,MAAM;GACN,SAAS;GACT,YAAW,MAAiB,OAAO,KAAK,EAAyB,CAAC,SAAS,EAAc;GAC1F;EAKD,OAAO;GACL,MAAM;GACN,SAAS;GACV;EAKD,mBAAmB;GACjB,MAAM;GACN,SAAS;GACV;EAMD,SAAS;GACP,MAAM;GACN,SAAS;GACV;EAUD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EAKD,cAAc;GACZ,MAAM;GACN,SAAS;GACV;EACF;CAED,OAAQ;AACN,SAAO,EACL,6BACD;;CAEJ;;QAvHS,EAAA,SAAI,UAAA,GAAA,EADZ,EAgBE,OAAA;;EAdA,KAAI;EACJ,WAAQ;EACP,OAAK,EAAA;;;wCAAgH,EAAA,SAAA;GAAwB,EAAA;;EAQ7I,OAAK,EAAA;UAAU,EAAA;MAAgB,EAAA;;gBAMrB,EAAA,SAAI,aAAA,GAAA,EADjB,EAiBE,OAAA;;EAfA,KAAI;EACJ,WAAQ;EACP,OAAK,EAAA;GAAU,EAAA,yBAAyB,EAAA;;;wCAAqI,EAAA,SAAA;GAAwB,EAAA;;EASrM,OAAK,EAAA;UAAU,EAAA;MAAgB,EAAA"}
+{"version":3,"file":"skeleton-text.js","names":[],"sources":["../../../components/Skeleton/SkeletonText.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"type === 'body'\"\n    ref=\"skeleton\"\n    data-qa=\"skeleton-text-body\"\n    :class=\"[\n      'd-skeleton-text',\n      'd-skeleton-placeholder',\n      {\n        'd-skeleton-placeholder--animate': animate,\n      },\n      contentClass,\n    ]\"\n    :style=\"{\n      width,\n      ...skeletonStyle,\n    }\"\n  />\n  <div\n    v-else-if=\"type === 'heading'\"\n    ref=\"skeleton\"\n    data-qa=\"skeleton-text-heading\"\n    :class=\"[\n      SKELETON_HEADING_HEIGHTS[headingHeight],\n      'd-skeleton-text--heading',\n      'd-skeleton-placeholder',\n      {\n        'd-skeleton-placeholder--animate': animate,\n      },\n      contentClass,\n    ]\"\n    :style=\"{\n      width,\n      ...skeletonStyle,\n    }\"\n  />\n</template>\n\n<script>\nimport { SKELETON_HEADING_HEIGHTS, SKELETON_TEXT_TYPES } from './SkeletonConstants';\nimport SkeletonAnimation from '@/common/mixins/skeleton';\n\nexport default {\n  name: 'DtSkeletonText',\n\n  mixins: [SkeletonAnimation],\n\n  props: {\n    /**\n     * Skeleton type\n     * @values body, heading\n     */\n    type: {\n      type: String,\n      default: 'body',\n      validator: type => SKELETON_TEXT_TYPES.includes(type),\n    },\n\n    /**\n     * Heading height\n     * @values sm, md, lg\n     */\n    headingHeight: {\n      type: String,\n      default: 'md',\n      validator: headingHeight => Object.keys(SKELETON_HEADING_HEIGHTS).includes(headingHeight),\n    },\n\n    /**\n     * Width of the skeleton\n     */\n    width: {\n      type: String,\n      default: '100%',\n    },\n\n    /**\n     * Duration time of the animation (ms), set -1 for an infinite animation.\n     */\n    animationDuration: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * This property has higher priority than \"option.animate\"\n     * @values true, false\n     */\n    animate: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * RippleDuration controls how long the delay is for the animation of a\n     * placeholder 1000 pixels from the top of the page. Each placeholder\n     * from the top down will have a delay duration from 0 to this offset.\n     * The delay of each placeholder animation is based on how far down the page\n     * the placeholder is rendered. This is a linear relationship. The unit\n     * is milliseconds.\n     */\n    offset: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Additional class name for the content.\n     */\n    contentClass: {\n      type: String,\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      SKELETON_HEADING_HEIGHTS,\n    };\n  },\n};\n</script>\n"],"mappings":";;;;;AA0CA,IAAK,IAAU;CACb,MAAM;CAEN,QAAQ,CAAC,EAAkB;CAE3B,OAAO;EAKL,MAAM;GACJ,MAAM;GACN,SAAS;GACT,YAAW,MAAQ,EAAoB,SAAS,EAAK;GACtD;EAMD,eAAe;GACb,MAAM;GACN,SAAS;GACT,YAAW,MAAiB,OAAO,KAAK,EAAyB,CAAC,SAAS,EAAc;GAC1F;EAKD,OAAO;GACL,MAAM;GACN,SAAS;GACV;EAKD,mBAAmB;GACjB,MAAM;GACN,SAAS;GACV;EAMD,SAAS;GACP,MAAM;GACN,SAAS;GACV;EAUD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EAKD,cAAc;GACZ,MAAM;GACN,SAAS;GACV;EACF;CAED,OAAQ;AACN,SAAO,EACL,6BACD;;CAEJ;;QAtHS,EAAA,SAAI,UAAA,GAAA,EADZ,EAgBE,OAAA;;EAdA,KAAI;EACJ,WAAQ;EACP,OAAK,EAAA;;;wCAAgH,EAAA,SAAA;GAAwB,EAAA;;EAQ7I,OAAK,EAAA;UAAU,EAAA;MAAgB,EAAA;;gBAMrB,EAAA,SAAI,aAAA,GAAA,EADjB,EAiBE,OAAA;;EAfA,KAAI;EACJ,WAAQ;EACP,OAAK,EAAA;GAAU,EAAA,yBAAyB,EAAA;;;wCAAqI,EAAA,SAAA;GAAwB,EAAA;;EASrM,OAAK,EAAA;UAAU,EAAA;MAAgB,EAAA"}

package/dist/lib/skeleton/skeleton.cjs

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),t=require(`./skeleton-shape.cjs`),n=require(`./skeleton-text.cjs`),r=require(`./skeleton-paragraph.cjs`),i=require(`./skeleton-list-item.cjs`);let a=require(`vue`);var o={compatConfig:{MODE:3},name:`DtSkeleton`,components:{DtSkeletonText:n.default,DtSkeletonShape:t.default,DtSkeletonListItem:i.default,DtSkeletonParagraph:r.default},props:{paragraphOption:{type:[Object,Boolean],default:null},listItemOption:{type:[Object,Boolean],default:null},textOption:{type:Object,default:null},shapeOption:{type:[Object,Boolean],default:null},animationDuration:{type:Number,default:-1},ariaLabel:{type:String,default:``},animate:{type:Boolean,default:!0},offset:{type:Number,default:1}},computed:{validationOptions(){return{paragraphOption:this.paragraphOption,listItemOption:this.listItemOption,textOption:this.textOption,shapeOption:this.shapeOption}}},watch:{$props:{immediate:!0,handler:`validator`}},methods:{validator(){let e=Object.entries(this.validationOptions).filter(([,e])=>e);if(e.length>=2){let t=`Use only one of ${e.map(([e])=>e).join(` | `)} options at the same time`;console.error(t)}}}},s=[`aria-label`];function c(e,t,n,r,i,o){let c=(0,a.resolveComponent)(`dt-skeleton-list-item`),l=(0,a.resolveComponent)(`dt-skeleton-shape`),u=(0,a.resolveComponent)(`dt-skeleton-paragraph`),d=(0,a.resolveComponent)(`dt-skeleton-text`);return(0,a.openBlock)(),(0,a.createElementBlock)(`div`,{"aria-busy":`true`,role:`status`,"aria-label":n.ariaLabel},[n.listItemOption?((0,a.openBlock)(),(0,a.createBlock)(c,(0,a.mergeProps)({key:0},n.listItemOption===!0?{}:n.listItemOption,{"animation-duration":n.animationDuration,animate:n.animate,offset:n.offset}),null,16,[`animation-duration`,`animate`,`offset`])):n.shapeOption?((0,a.openBlock)(),(0,a.createBlock)(l,(0,a.mergeProps)({key:1},n.shapeOption===!0?{}:n.shapeOption,{"animation-duration":n.animationDuration,animate:n.animate,offset:n.offset}),null,16,[`animation-duration`,`animate`,`offset`])):n.paragraphOption?((0,a.openBlock)(),(0,a.createBlock)(u,(0,a.mergeProps)({key:2},n.paragraphOption===!0?{}:n.paragraphOption,{"animation-duration":n.animationDuration,animate:n.animate,offset:n.offset}),null,16,[`animation-duration`,`animate`,`offset`])):((0,a.openBlock)(),(0,a.createBlock)(d,(0,a.mergeProps)({key:3},n.textOption||{},{"animation-duration":n.animationDuration,animate:n.animate,offset:n.offset}),null,16,[`animation-duration`,`animate`,`offset`]))],8,s)}var l=e.t(o,[[`render`,c]]);exports.default=l;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),t=require(`./skeleton-shape.cjs`),n=require(`./skeleton-text.cjs`),r=require(`./skeleton-paragraph.cjs`),i=require(`./skeleton-list-item.cjs`);let a=require(`vue`);var o={name:`DtSkeleton`,components:{DtSkeletonText:n.default,DtSkeletonShape:t.default,DtSkeletonListItem:i.default,DtSkeletonParagraph:r.default},props:{paragraphOption:{type:[Object,Boolean],default:null},listItemOption:{type:[Object,Boolean],default:null},textOption:{type:Object,default:null},shapeOption:{type:[Object,Boolean],default:null},animationDuration:{type:Number,default:-1},ariaLabel:{type:String,default:``},animate:{type:Boolean,default:!0},offset:{type:Number,default:1}},computed:{validationOptions(){return{paragraphOption:this.paragraphOption,listItemOption:this.listItemOption,textOption:this.textOption,shapeOption:this.shapeOption}}},watch:{$props:{immediate:!0,handler:`validator`}},methods:{validator(){let e=Object.entries(this.validationOptions).filter(([,e])=>e);if(e.length>=2){let t=`Use only one of ${e.map(([e])=>e).join(` | `)} options at the same time`;console.error(t)}}}},s=[`aria-label`];function c(e,t,n,r,i,o){let c=(0,a.resolveComponent)(`dt-skeleton-list-item`),l=(0,a.resolveComponent)(`dt-skeleton-shape`),u=(0,a.resolveComponent)(`dt-skeleton-paragraph`),d=(0,a.resolveComponent)(`dt-skeleton-text`);return(0,a.openBlock)(),(0,a.createElementBlock)(`div`,{"aria-busy":`true`,role:`status`,"aria-label":n.ariaLabel},[n.listItemOption?((0,a.openBlock)(),(0,a.createBlock)(c,(0,a.mergeProps)({key:0},n.listItemOption===!0?{}:n.listItemOption,{"animation-duration":n.animationDuration,animate:n.animate,offset:n.offset}),null,16,[`animation-duration`,`animate`,`offset`])):n.shapeOption?((0,a.openBlock)(),(0,a.createBlock)(l,(0,a.mergeProps)({key:1},n.shapeOption===!0?{}:n.shapeOption,{"animation-duration":n.animationDuration,animate:n.animate,offset:n.offset}),null,16,[`animation-duration`,`animate`,`offset`])):n.paragraphOption?((0,a.openBlock)(),(0,a.createBlock)(u,(0,a.mergeProps)({key:2},n.paragraphOption===!0?{}:n.paragraphOption,{"animation-duration":n.animationDuration,animate:n.animate,offset:n.offset}),null,16,[`animation-duration`,`animate`,`offset`])):((0,a.openBlock)(),(0,a.createBlock)(d,(0,a.mergeProps)({key:3},n.textOption||{},{"animation-duration":n.animationDuration,animate:n.animate,offset:n.offset}),null,16,[`animation-duration`,`animate`,`offset`]))],8,s)}var l=e.t(o,[[`render`,c]]);exports.default=l;
 //# sourceMappingURL=skeleton.cjs.map

package/dist/lib/skeleton/skeleton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.cjs","names":[],"sources":["../../../components/skeleton/skeleton.vue"],"sourcesContent":["<template>\n  <div\n    aria-busy=\"true\"\n    role=\"status\"\n    :aria-label=\"ariaLabel\"\n  >\n    <dt-skeleton-list-item\n      v-if=\"listItemOption\"\n      v-bind=\"listItemOption === true ? {} : listItemOption\"\n      :animation-duration=\"animationDuration\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n    />\n    <dt-skeleton-shape\n      v-else-if=\"shapeOption\"\n      v-bind=\"shapeOption === true ? {} : shapeOption\"\n      :animation-duration=\"animationDuration\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n    />\n    <dt-skeleton-paragraph\n      v-else-if=\"paragraphOption\"\n      v-bind=\"paragraphOption === true ? {} : paragraphOption\"\n      :animation-duration=\"animationDuration\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n    />\n    <dt-skeleton-text\n      v-else\n      v-bind=\"textOption || {}\"\n      :animation-duration=\"animationDuration\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n    />\n  </div>\n</template>\n\n<script>\nimport DtSkeletonShape from './skeleton-shape.vue';\nimport DtSkeletonListItem from './skeleton-list-item.vue';\nimport DtSkeletonParagraph from './skeleton-paragraph.vue';\nimport DtSkeletonText from './skeleton-text.vue';\n\n/**\n * Skeleton loader is a non-interactive placeholder that displays a preview of the UI to visually communicate\n * that content is in the process of loading. Skeleton is used to provide a low fidelity\n * representation of the user interface (UI) before content appears on the page.\n * @see https://dialtone.dialpad.com/components/skeleton.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtSkeleton',\n  components: {\n    DtSkeletonText,\n    DtSkeletonShape,\n    DtSkeletonListItem,\n    DtSkeletonParagraph,\n  },\n\n  props: {\n    /**\n     * Set this prop to have the skeleton render as multiple lines of text.\n     * Set only one option prop at a time.\n     */\n    paragraphOption: {\n      type: [Object, Boolean],\n      default: null,\n    },\n\n    /**\n     * Set this prop to have the skeleton render as a list item with an avatar and wrapping text.\n     * Set only one option prop at a time.\n     */\n    listItemOption: {\n      type: [Object, Boolean],\n      default: null,\n    },\n\n    /**\n     * Set this prop to have the skeleton render as a single line of text.\n     * Set only one option prop at a time.\n     */\n    textOption: {\n      type: Object,\n      default: null,\n    },\n\n    /**\n     * Set this prop to have the skeleton render as a specific shape.\n     * Set only one option prop at a time.\n     */\n    shapeOption: {\n      type: [Object, Boolean],\n      default: null,\n    },\n\n    /**\n     * Duration time of the animation (ms), set -1 for an infinite animation.\n     */\n    animationDuration: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * Descriptive label for the content.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * This property has higher priority than \"option.animate\"\n     * @values true, false\n     */\n    animate: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * RippleDuration controls how long the delay is for the animation of a\n     * placeholder 1000 pixels from the top of the page. Each placeholder\n     * from the top down will have a delay duration from 0 to this offset.\n     * The delay of each placeholder animation is based on how far down the page\n     * the placeholder is rendered. This is a linear relationship. The unit\n     * is milliseconds.\n     */\n    offset: {\n      type: Number,\n      default: 1,\n    },\n  },\n\n  computed: {\n    validationOptions () {\n      return {\n        paragraphOption: this.paragraphOption,\n        listItemOption: this.listItemOption,\n        textOption: this.textOption,\n        shapeOption: this.shapeOption,\n      };\n    },\n  },\n\n  watch: {\n    $props: {\n      immediate: true,\n      handler: 'validator',\n    },\n  },\n\n  methods: {\n    validator () {\n      const filtered = Object.entries(this.validationOptions)\n        .filter(([, option]) => option);\n      if (filtered.length >= 2) {\n        const errorMessage = `Use only one of ${filtered.map(([key]) => key).join(' | ')} options at the same time`;\n        console.error(errorMessage);\n      }\n    },\n  },\n};\n</script>\n"],"mappings":"uWAiDA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,aACN,WAAY,CACV,eAAA,EAAA,QACA,gBAAA,EAAA,QACA,mBAAA,EAAA,QACA,oBAAA,EAAA,QACD,CAED,MAAO,CAKL,gBAAiB,CACf,KAAM,CAAC,OAAQ,QAAQ,CACvB,QAAS,KACV,CAMD,eAAgB,CACd,KAAM,CAAC,OAAQ,QAAQ,CACvB,QAAS,KACV,CAMD,WAAY,CACV,KAAM,OACN,QAAS,KACV,CAMD,YAAa,CACX,KAAM,CAAC,OAAQ,QAAQ,CACvB,QAAS,KACV,CAKD,kBAAmB,CACjB,KAAM,OACN,QAAS,GACV,CAKD,UAAW,CACT,KAAM,OACN,QAAS,GACV,CAMD,QAAS,CACP,KAAM,QACN,QAAS,GACV,CAUD,OAAQ,CACN,KAAM,OACN,QAAS,EACV,CACF,CAED,SAAU,CACR,mBAAqB,CACnB,MAAO,CACL,gBAAiB,KAAK,gBACtB,eAAgB,KAAK,eACrB,WAAY,KAAK,WACjB,YAAa,KAAK,YACnB,EAEJ,CAED,MAAO,CACL,OAAQ,CACN,UAAW,GACX,QAAS,YACV,CACF,CAED,QAAS,CACP,WAAa,CACX,IAAM,EAAW,OAAO,QAAQ,KAAK,kBAAiB,CACnD,QAAQ,EAAG,KAAY,EAAO,CACjC,GAAI,EAAS,QAAU,EAAG,CACxB,IAAM,EAAe,mBAAmB,EAAS,KAAK,CAAC,KAAS,EAAI,CAAC,KAAK,MAAM,CAAA,2BAChF,QAAQ,MAAM,EAAa,GAGhC,CACF,8RAjIO,MAAA,CAhCJ,YAAU,OACV,KAAK,SACJ,aAAY,EAAA,YAGL,EAAA,iBAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,aAKN,GAAA,EAAA,EAAA,YAAA,CAAA,IAAA,EAAA,CAJQ,EAAA,iBAAc,GAAA,EAAA,CAAiB,EAAA,eAAc,CACpD,qBAAoB,EAAA,kBACpB,QAAS,EAAA,QACT,OAAQ,EAAA,6DAGE,EAAA,cAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,aAKX,GAAA,EAAA,EAAA,YAAA,CAAA,IAAA,EAAA,CAJQ,EAAA,cAAW,GAAA,EAAA,CAAiB,EAAA,YAAW,CAC9C,qBAAoB,EAAA,kBACpB,QAAS,EAAA,QACT,OAAQ,EAAA,6DAGE,EAAA,kBAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,aAKX,GAAA,EAAA,EAAA,YAAA,CAAA,IAAA,EAAA,CAJQ,EAAA,kBAAe,GAAA,EAAA,CAAiB,EAAA,gBAAe,CACtD,qBAAoB,EAAA,kBACpB,QAAS,EAAA,QACT,OAAQ,EAAA,kGAQT,GAAA,EAAA,EAAA,YAAA,CAAA,IAAA,EAAA,CAJQ,EAAA,YAAU,EAAA,CAAA,CACjB,qBAAoB,EAAA,kBACpB,QAAS,EAAA,QACT,OAAQ,EAAA"}
+{"version":3,"file":"skeleton.cjs","names":[],"sources":["../../../components/Skeleton/Skeleton.vue"],"sourcesContent":["<template>\n  <div\n    aria-busy=\"true\"\n    role=\"status\"\n    :aria-label=\"ariaLabel\"\n  >\n    <dt-skeleton-list-item\n      v-if=\"listItemOption\"\n      v-bind=\"listItemOption === true ? {} : listItemOption\"\n      :animation-duration=\"animationDuration\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n    />\n    <dt-skeleton-shape\n      v-else-if=\"shapeOption\"\n      v-bind=\"shapeOption === true ? {} : shapeOption\"\n      :animation-duration=\"animationDuration\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n    />\n    <dt-skeleton-paragraph\n      v-else-if=\"paragraphOption\"\n      v-bind=\"paragraphOption === true ? {} : paragraphOption\"\n      :animation-duration=\"animationDuration\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n    />\n    <dt-skeleton-text\n      v-else\n      v-bind=\"textOption || {}\"\n      :animation-duration=\"animationDuration\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n    />\n  </div>\n</template>\n\n<script>\nimport DtSkeletonShape from './SkeletonShape.vue';\nimport DtSkeletonListItem from './SkeletonListItem.vue';\nimport DtSkeletonParagraph from './SkeletonParagraph.vue';\nimport DtSkeletonText from './SkeletonText.vue';\n\n/**\n * Skeleton loader is a non-interactive placeholder that displays a preview of the UI to visually communicate\n * that content is in the process of loading. Skeleton is used to provide a low fidelity\n * representation of the user interface (UI) before content appears on the page.\n * @see https://dialtone.dialpad.com/components/skeleton.html\n */\nexport default {\n  name: 'DtSkeleton',\n  components: {\n    DtSkeletonText,\n    DtSkeletonShape,\n    DtSkeletonListItem,\n    DtSkeletonParagraph,\n  },\n\n  props: {\n    /**\n     * Set this prop to have the skeleton render as multiple lines of text.\n     * Set only one option prop at a time.\n     */\n    paragraphOption: {\n      type: [Object, Boolean],\n      default: null,\n    },\n\n    /**\n     * Set this prop to have the skeleton render as a list item with an avatar and wrapping text.\n     * Set only one option prop at a time.\n     */\n    listItemOption: {\n      type: [Object, Boolean],\n      default: null,\n    },\n\n    /**\n     * Set this prop to have the skeleton render as a single line of text.\n     * Set only one option prop at a time.\n     */\n    textOption: {\n      type: Object,\n      default: null,\n    },\n\n    /**\n     * Set this prop to have the skeleton render as a specific shape.\n     * Set only one option prop at a time.\n     */\n    shapeOption: {\n      type: [Object, Boolean],\n      default: null,\n    },\n\n    /**\n     * Duration time of the animation (ms), set -1 for an infinite animation.\n     */\n    animationDuration: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * Descriptive label for the content.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * This property has higher priority than \"option.animate\"\n     * @values true, false\n     */\n    animate: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * RippleDuration controls how long the delay is for the animation of a\n     * placeholder 1000 pixels from the top of the page. Each placeholder\n     * from the top down will have a delay duration from 0 to this offset.\n     * The delay of each placeholder animation is based on how far down the page\n     * the placeholder is rendered. This is a linear relationship. The unit\n     * is milliseconds.\n     */\n    offset: {\n      type: Number,\n      default: 1,\n    },\n  },\n\n  computed: {\n    validationOptions () {\n      return {\n        paragraphOption: this.paragraphOption,\n        listItemOption: this.listItemOption,\n        textOption: this.textOption,\n        shapeOption: this.shapeOption,\n      };\n    },\n  },\n\n  watch: {\n    $props: {\n      immediate: true,\n      handler: 'validator',\n    },\n  },\n\n  methods: {\n    validator () {\n      const filtered = Object.entries(this.validationOptions)\n        .filter(([, option]) => option);\n      if (filtered.length >= 2) {\n        const errorMessage = `Use only one of ${filtered.map(([key]) => key).join(' | ')} options at the same time`;\n        console.error(errorMessage);\n      }\n    },\n  },\n};\n</script>\n"],"mappings":"uWAiDA,IAAK,EAAU,CACb,KAAM,aACN,WAAY,CACV,eAAA,EAAA,QACA,gBAAA,EAAA,QACA,mBAAA,EAAA,QACA,oBAAA,EAAA,QACD,CAED,MAAO,CAKL,gBAAiB,CACf,KAAM,CAAC,OAAQ,QAAQ,CACvB,QAAS,KACV,CAMD,eAAgB,CACd,KAAM,CAAC,OAAQ,QAAQ,CACvB,QAAS,KACV,CAMD,WAAY,CACV,KAAM,OACN,QAAS,KACV,CAMD,YAAa,CACX,KAAM,CAAC,OAAQ,QAAQ,CACvB,QAAS,KACV,CAKD,kBAAmB,CACjB,KAAM,OACN,QAAS,GACV,CAKD,UAAW,CACT,KAAM,OACN,QAAS,GACV,CAMD,QAAS,CACP,KAAM,QACN,QAAS,GACV,CAUD,OAAQ,CACN,KAAM,OACN,QAAS,EACV,CACF,CAED,SAAU,CACR,mBAAqB,CACnB,MAAO,CACL,gBAAiB,KAAK,gBACtB,eAAgB,KAAK,eACrB,WAAY,KAAK,WACjB,YAAa,KAAK,YACnB,EAEJ,CAED,MAAO,CACL,OAAQ,CACN,UAAW,GACX,QAAS,YACV,CACF,CAED,QAAS,CACP,WAAa,CACX,IAAM,EAAW,OAAO,QAAQ,KAAK,kBAAiB,CACnD,QAAQ,EAAG,KAAY,EAAO,CACjC,GAAI,EAAS,QAAU,EAAG,CACxB,IAAM,EAAe,mBAAmB,EAAS,KAAK,CAAC,KAAS,EAAI,CAAC,KAAK,MAAM,CAAA,2BAChF,QAAQ,MAAM,EAAa,GAGhC,CACF,8RAhIO,MAAA,CAhCJ,YAAU,OACV,KAAK,SACJ,aAAY,EAAA,YAGL,EAAA,iBAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,aAKN,GAAA,EAAA,EAAA,YAAA,CAAA,IAAA,EAAA,CAJQ,EAAA,iBAAc,GAAA,EAAA,CAAiB,EAAA,eAAc,CACpD,qBAAoB,EAAA,kBACpB,QAAS,EAAA,QACT,OAAQ,EAAA,6DAGE,EAAA,cAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,aAKX,GAAA,EAAA,EAAA,YAAA,CAAA,IAAA,EAAA,CAJQ,EAAA,cAAW,GAAA,EAAA,CAAiB,EAAA,YAAW,CAC9C,qBAAoB,EAAA,kBACpB,QAAS,EAAA,QACT,OAAQ,EAAA,6DAGE,EAAA,kBAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,aAKX,GAAA,EAAA,EAAA,YAAA,CAAA,IAAA,EAAA,CAJQ,EAAA,kBAAe,GAAA,EAAA,CAAiB,EAAA,gBAAe,CACtD,qBAAoB,EAAA,kBACpB,QAAS,EAAA,QACT,OAAQ,EAAA,kGAQT,GAAA,EAAA,EAAA,YAAA,CAAA,IAAA,EAAA,CAJQ,EAAA,YAAU,EAAA,CAAA,CACjB,qBAAoB,EAAA,kBACpB,QAAS,EAAA,QACT,OAAQ,EAAA"}

package/dist/lib/skeleton/skeleton.js

@@ -4,9 +4,8 @@ import n from "./skeleton-text.js";
 import r from "./skeleton-paragraph.js";
 import i from "./skeleton-list-item.js";
 import { createBlock as a, createElementBlock as o, mergeProps as s, openBlock as c, resolveComponent as l } from "vue";
-//#region components/skeleton/skeleton.vue
+//#region components/Skeleton/Skeleton.vue
 var u = {
-	compatConfig: { MODE: 3 },
 	name: "DtSkeleton",
 	components: {
 		DtSkeletonText: n,

package/dist/lib/skeleton/skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.js","names":[],"sources":["../../../components/skeleton/skeleton.vue"],"sourcesContent":["<template>\n  <div\n    aria-busy=\"true\"\n    role=\"status\"\n    :aria-label=\"ariaLabel\"\n  >\n    <dt-skeleton-list-item\n      v-if=\"listItemOption\"\n      v-bind=\"listItemOption === true ? {} : listItemOption\"\n      :animation-duration=\"animationDuration\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n    />\n    <dt-skeleton-shape\n      v-else-if=\"shapeOption\"\n      v-bind=\"shapeOption === true ? {} : shapeOption\"\n      :animation-duration=\"animationDuration\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n    />\n    <dt-skeleton-paragraph\n      v-else-if=\"paragraphOption\"\n      v-bind=\"paragraphOption === true ? {} : paragraphOption\"\n      :animation-duration=\"animationDuration\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n    />\n    <dt-skeleton-text\n      v-else\n      v-bind=\"textOption || {}\"\n      :animation-duration=\"animationDuration\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n    />\n  </div>\n</template>\n\n<script>\nimport DtSkeletonShape from './skeleton-shape.vue';\nimport DtSkeletonListItem from './skeleton-list-item.vue';\nimport DtSkeletonParagraph from './skeleton-paragraph.vue';\nimport DtSkeletonText from './skeleton-text.vue';\n\n/**\n * Skeleton loader is a non-interactive placeholder that displays a preview of the UI to visually communicate\n * that content is in the process of loading. Skeleton is used to provide a low fidelity\n * representation of the user interface (UI) before content appears on the page.\n * @see https://dialtone.dialpad.com/components/skeleton.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtSkeleton',\n  components: {\n    DtSkeletonText,\n    DtSkeletonShape,\n    DtSkeletonListItem,\n    DtSkeletonParagraph,\n  },\n\n  props: {\n    /**\n     * Set this prop to have the skeleton render as multiple lines of text.\n     * Set only one option prop at a time.\n     */\n    paragraphOption: {\n      type: [Object, Boolean],\n      default: null,\n    },\n\n    /**\n     * Set this prop to have the skeleton render as a list item with an avatar and wrapping text.\n     * Set only one option prop at a time.\n     */\n    listItemOption: {\n      type: [Object, Boolean],\n      default: null,\n    },\n\n    /**\n     * Set this prop to have the skeleton render as a single line of text.\n     * Set only one option prop at a time.\n     */\n    textOption: {\n      type: Object,\n      default: null,\n    },\n\n    /**\n     * Set this prop to have the skeleton render as a specific shape.\n     * Set only one option prop at a time.\n     */\n    shapeOption: {\n      type: [Object, Boolean],\n      default: null,\n    },\n\n    /**\n     * Duration time of the animation (ms), set -1 for an infinite animation.\n     */\n    animationDuration: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * Descriptive label for the content.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * This property has higher priority than \"option.animate\"\n     * @values true, false\n     */\n    animate: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * RippleDuration controls how long the delay is for the animation of a\n     * placeholder 1000 pixels from the top of the page. Each placeholder\n     * from the top down will have a delay duration from 0 to this offset.\n     * The delay of each placeholder animation is based on how far down the page\n     * the placeholder is rendered. This is a linear relationship. The unit\n     * is milliseconds.\n     */\n    offset: {\n      type: Number,\n      default: 1,\n    },\n  },\n\n  computed: {\n    validationOptions () {\n      return {\n        paragraphOption: this.paragraphOption,\n        listItemOption: this.listItemOption,\n        textOption: this.textOption,\n        shapeOption: this.shapeOption,\n      };\n    },\n  },\n\n  watch: {\n    $props: {\n      immediate: true,\n      handler: 'validator',\n    },\n  },\n\n  methods: {\n    validator () {\n      const filtered = Object.entries(this.validationOptions)\n        .filter(([, option]) => option);\n      if (filtered.length >= 2) {\n        const errorMessage = `Use only one of ${filtered.map(([key]) => key).join(' | ')} options at the same time`;\n        console.error(errorMessage);\n      }\n    },\n  },\n};\n</script>\n"],"mappings":";;;;;;;AAiDA,IAAK,IAAU;CACb,cAAc,EAAE,MAAM,GAAG;CACzB,MAAM;CACN,YAAY;EACV,gBAAA;EACA,iBAAA;EACA,oBAAA;EACA,qBAAA;EACD;CAED,OAAO;EAKL,iBAAiB;GACf,MAAM,CAAC,QAAQ,QAAQ;GACvB,SAAS;GACV;EAMD,gBAAgB;GACd,MAAM,CAAC,QAAQ,QAAQ;GACvB,SAAS;GACV;EAMD,YAAY;GACV,MAAM;GACN,SAAS;GACV;EAMD,aAAa;GACX,MAAM,CAAC,QAAQ,QAAQ;GACvB,SAAS;GACV;EAKD,mBAAmB;GACjB,MAAM;GACN,SAAS;GACV;EAKD,WAAW;GACT,MAAM;GACN,SAAS;GACV;EAMD,SAAS;GACP,MAAM;GACN,SAAS;GACV;EAUD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EACF;CAED,UAAU,EACR,oBAAqB;AACnB,SAAO;GACL,iBAAiB,KAAK;GACtB,gBAAgB,KAAK;GACrB,YAAY,KAAK;GACjB,aAAa,KAAK;GACnB;IAEJ;CAED,OAAO,EACL,QAAQ;EACN,WAAW;EACX,SAAS;EACV,EACF;CAED,SAAS,EACP,YAAa;EACX,IAAM,IAAW,OAAO,QAAQ,KAAK,kBAAiB,CACnD,QAAQ,GAAG,OAAY,EAAO;AACjC,MAAI,EAAS,UAAU,GAAG;GACxB,IAAM,IAAe,mBAAmB,EAAS,KAAK,CAAC,OAAS,EAAI,CAAC,KAAK,MAAM,CAAA;AAChF,WAAQ,MAAM,EAAa;;IAGhC;CACF;;;aAlKC,EAiCM,OAAA;EAhCJ,aAAU;EACV,MAAK;EACJ,cAAY,EAAA;KAGL,EAAA,kBAAA,GAAA,EADR,EAME,GANF,EAME,EAAA,KAAA,GAAA,EAJQ,EAAA,mBAAc,KAAA,EAAA,GAAiB,EAAA,gBAAc;EACpD,sBAAoB,EAAA;EACpB,SAAS,EAAA;EACT,QAAQ,EAAA;;;;;OAGE,EAAA,eAAA,GAAA,EADb,EAME,GANF,EAME,EAAA,KAAA,GAAA,EAJQ,EAAA,gBAAW,KAAA,EAAA,GAAiB,EAAA,aAAW;EAC9C,sBAAoB,EAAA;EACpB,SAAS,EAAA;EACT,QAAQ,EAAA;;;;;OAGE,EAAA,mBAAA,GAAA,EADb,EAME,GANF,EAME,EAAA,KAAA,GAAA,EAJQ,EAAA,oBAAe,KAAA,EAAA,GAAiB,EAAA,iBAAe;EACtD,sBAAoB,EAAA;EACpB,SAAS,EAAA;EACT,QAAQ,EAAA;;;;;aAEX,EAME,GANF,EAME,EAAA,KAAA,GAAA,EAJQ,EAAA,cAAU,EAAA,EAAA;EACjB,sBAAoB,EAAA;EACpB,SAAS,EAAA;EACT,QAAQ,EAAA"}
+{"version":3,"file":"skeleton.js","names":[],"sources":["../../../components/Skeleton/Skeleton.vue"],"sourcesContent":["<template>\n  <div\n    aria-busy=\"true\"\n    role=\"status\"\n    :aria-label=\"ariaLabel\"\n  >\n    <dt-skeleton-list-item\n      v-if=\"listItemOption\"\n      v-bind=\"listItemOption === true ? {} : listItemOption\"\n      :animation-duration=\"animationDuration\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n    />\n    <dt-skeleton-shape\n      v-else-if=\"shapeOption\"\n      v-bind=\"shapeOption === true ? {} : shapeOption\"\n      :animation-duration=\"animationDuration\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n    />\n    <dt-skeleton-paragraph\n      v-else-if=\"paragraphOption\"\n      v-bind=\"paragraphOption === true ? {} : paragraphOption\"\n      :animation-duration=\"animationDuration\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n    />\n    <dt-skeleton-text\n      v-else\n      v-bind=\"textOption || {}\"\n      :animation-duration=\"animationDuration\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n    />\n  </div>\n</template>\n\n<script>\nimport DtSkeletonShape from './SkeletonShape.vue';\nimport DtSkeletonListItem from './SkeletonListItem.vue';\nimport DtSkeletonParagraph from './SkeletonParagraph.vue';\nimport DtSkeletonText from './SkeletonText.vue';\n\n/**\n * Skeleton loader is a non-interactive placeholder that displays a preview of the UI to visually communicate\n * that content is in the process of loading. Skeleton is used to provide a low fidelity\n * representation of the user interface (UI) before content appears on the page.\n * @see https://dialtone.dialpad.com/components/skeleton.html\n */\nexport default {\n  name: 'DtSkeleton',\n  components: {\n    DtSkeletonText,\n    DtSkeletonShape,\n    DtSkeletonListItem,\n    DtSkeletonParagraph,\n  },\n\n  props: {\n    /**\n     * Set this prop to have the skeleton render as multiple lines of text.\n     * Set only one option prop at a time.\n     */\n    paragraphOption: {\n      type: [Object, Boolean],\n      default: null,\n    },\n\n    /**\n     * Set this prop to have the skeleton render as a list item with an avatar and wrapping text.\n     * Set only one option prop at a time.\n     */\n    listItemOption: {\n      type: [Object, Boolean],\n      default: null,\n    },\n\n    /**\n     * Set this prop to have the skeleton render as a single line of text.\n     * Set only one option prop at a time.\n     */\n    textOption: {\n      type: Object,\n      default: null,\n    },\n\n    /**\n     * Set this prop to have the skeleton render as a specific shape.\n     * Set only one option prop at a time.\n     */\n    shapeOption: {\n      type: [Object, Boolean],\n      default: null,\n    },\n\n    /**\n     * Duration time of the animation (ms), set -1 for an infinite animation.\n     */\n    animationDuration: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * Descriptive label for the content.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * This property has higher priority than \"option.animate\"\n     * @values true, false\n     */\n    animate: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * RippleDuration controls how long the delay is for the animation of a\n     * placeholder 1000 pixels from the top of the page. Each placeholder\n     * from the top down will have a delay duration from 0 to this offset.\n     * The delay of each placeholder animation is based on how far down the page\n     * the placeholder is rendered. This is a linear relationship. The unit\n     * is milliseconds.\n     */\n    offset: {\n      type: Number,\n      default: 1,\n    },\n  },\n\n  computed: {\n    validationOptions () {\n      return {\n        paragraphOption: this.paragraphOption,\n        listItemOption: this.listItemOption,\n        textOption: this.textOption,\n        shapeOption: this.shapeOption,\n      };\n    },\n  },\n\n  watch: {\n    $props: {\n      immediate: true,\n      handler: 'validator',\n    },\n  },\n\n  methods: {\n    validator () {\n      const filtered = Object.entries(this.validationOptions)\n        .filter(([, option]) => option);\n      if (filtered.length >= 2) {\n        const errorMessage = `Use only one of ${filtered.map(([key]) => key).join(' | ')} options at the same time`;\n        console.error(errorMessage);\n      }\n    },\n  },\n};\n</script>\n"],"mappings":";;;;;;;AAiDA,IAAK,IAAU;CACb,MAAM;CACN,YAAY;EACV,gBAAA;EACA,iBAAA;EACA,oBAAA;EACA,qBAAA;EACD;CAED,OAAO;EAKL,iBAAiB;GACf,MAAM,CAAC,QAAQ,QAAQ;GACvB,SAAS;GACV;EAMD,gBAAgB;GACd,MAAM,CAAC,QAAQ,QAAQ;GACvB,SAAS;GACV;EAMD,YAAY;GACV,MAAM;GACN,SAAS;GACV;EAMD,aAAa;GACX,MAAM,CAAC,QAAQ,QAAQ;GACvB,SAAS;GACV;EAKD,mBAAmB;GACjB,MAAM;GACN,SAAS;GACV;EAKD,WAAW;GACT,MAAM;GACN,SAAS;GACV;EAMD,SAAS;GACP,MAAM;GACN,SAAS;GACV;EAUD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EACF;CAED,UAAU,EACR,oBAAqB;AACnB,SAAO;GACL,iBAAiB,KAAK;GACtB,gBAAgB,KAAK;GACrB,YAAY,KAAK;GACjB,aAAa,KAAK;GACnB;IAEJ;CAED,OAAO,EACL,QAAQ;EACN,WAAW;EACX,SAAS;EACV,EACF;CAED,SAAS,EACP,YAAa;EACX,IAAM,IAAW,OAAO,QAAQ,KAAK,kBAAiB,CACnD,QAAQ,GAAG,OAAY,EAAO;AACjC,MAAI,EAAS,UAAU,GAAG;GACxB,IAAM,IAAe,mBAAmB,EAAS,KAAK,CAAC,OAAS,EAAI,CAAC,KAAK,MAAM,CAAA;AAChF,WAAQ,MAAM,EAAa;;IAGhC;CACF;;;aAjKC,EAiCM,OAAA;EAhCJ,aAAU;EACV,MAAK;EACJ,cAAY,EAAA;KAGL,EAAA,kBAAA,GAAA,EADR,EAME,GANF,EAME,EAAA,KAAA,GAAA,EAJQ,EAAA,mBAAc,KAAA,EAAA,GAAiB,EAAA,gBAAc;EACpD,sBAAoB,EAAA;EACpB,SAAS,EAAA;EACT,QAAQ,EAAA;;;;;OAGE,EAAA,eAAA,GAAA,EADb,EAME,GANF,EAME,EAAA,KAAA,GAAA,EAJQ,EAAA,gBAAW,KAAA,EAAA,GAAiB,EAAA,aAAW;EAC9C,sBAAoB,EAAA;EACpB,SAAS,EAAA;EACT,QAAQ,EAAA;;;;;OAGE,EAAA,mBAAA,GAAA,EADb,EAME,GANF,EAME,EAAA,KAAA,GAAA,EAJQ,EAAA,oBAAe,KAAA,EAAA,GAAiB,EAAA,iBAAe;EACtD,sBAAoB,EAAA;EACpB,SAAS,EAAA;EACT,QAAQ,EAAA;;;;;aAEX,EAME,GANF,EAME,EAAA,KAAA,GAAA,EAJQ,EAAA,cAAU,EAAA,EAAA;EACjB,sBAAoB,EAAA;EACpB,SAAS,EAAA;EACT,QAAQ,EAAA"}

package/dist/lib/split-button/split-button-constants.cjs

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var e={xs:`100`,sm:`100`,md:`200`,lg:`200`,xl:`300`},t={SPLIT_BUTTON_ICON_SIZES:e};exports.SPLIT_BUTTON_ICON_SIZES=e,exports.default=t;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var e={100:`100`,200:`100`,300:`200`,400:`200`,500:`300`,xs:`100`,sm:`100`,md:`200`,lg:`200`,xl:`300`},t={SPLIT_BUTTON_ICON_SIZES:e};exports.SPLIT_BUTTON_ICON_SIZES=e,exports.default=t;
 //# sourceMappingURL=split-button-constants.cjs.map

package/dist/lib/split-button/split-button-constants.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"split-button-constants.cjs","names":[],"sources":["../../../components/split_button/split_button_constants.js"],"sourcesContent":["export const SPLIT_BUTTON_ICON_SIZES = {\n  xs: '100',\n  sm: '100',\n  md: '200',\n  lg: '200',\n  xl: '300',\n};\n\nexport default {\n  SPLIT_BUTTON_ICON_SIZES,\n};\n"],"mappings":"+FAAA,IAAa,EAA0B,CACrC,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,GAAI,MACL,CAED,EAAe,CACb,0BACD"}
+{"version":3,"file":"split-button-constants.cjs","names":[],"sources":["../../../components/SplitButton/SplitButtonConstants.js"],"sourcesContent":["export const SPLIT_BUTTON_ICON_SIZES = {\n  // Numeric (preferred)\n  100: '100',\n  200: '100',\n  300: '200',\n  400: '200',\n  500: '300',\n  // T-shirt aliases (deprecated)\n  xs: '100',\n  sm: '100',\n  md: '200',\n  lg: '200',\n  xl: '300',\n};\n\nexport default {\n  SPLIT_BUTTON_ICON_SIZES,\n};\n"],"mappings":"+FAAA,IAAa,EAA0B,CAErC,IAAK,MACL,IAAK,MACL,IAAK,MACL,IAAK,MACL,IAAK,MAEL,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,GAAI,MACL,CAED,EAAe,CACb,0BACD"}

package/dist/lib/split-button/split-button-constants.js

@@ -1,5 +1,10 @@
-//#region components/split_button/split_button_constants.js
+//#region components/SplitButton/SplitButtonConstants.js
 var e = {
+	100: "100",
+	200: "100",
+	300: "200",
+	400: "200",
+	500: "300",
 	xs: "100",
 	sm: "100",
 	md: "200",

package/dist/lib/split-button/split-button-constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"split-button-constants.js","names":[],"sources":["../../../components/split_button/split_button_constants.js"],"sourcesContent":["export const SPLIT_BUTTON_ICON_SIZES = {\n  xs: '100',\n  sm: '100',\n  md: '200',\n  lg: '200',\n  xl: '300',\n};\n\nexport default {\n  SPLIT_BUTTON_ICON_SIZES,\n};\n"],"mappings":";AAAA,IAAa,IAA0B;CACrC,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAED,IAAe,EACb,4BACD"}
+{"version":3,"file":"split-button-constants.js","names":[],"sources":["../../../components/SplitButton/SplitButtonConstants.js"],"sourcesContent":["export const SPLIT_BUTTON_ICON_SIZES = {\n  // Numeric (preferred)\n  100: '100',\n  200: '100',\n  300: '200',\n  400: '200',\n  500: '300',\n  // T-shirt aliases (deprecated)\n  xs: '100',\n  sm: '100',\n  md: '200',\n  lg: '200',\n  xl: '300',\n};\n\nexport default {\n  SPLIT_BUTTON_ICON_SIZES,\n};\n"],"mappings":";AAAA,IAAa,IAA0B;CAErC,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CAEL,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAED,IAAe,EACb,4BACD"}

package/dist/lib/split-button/split-button-end.cjs

@@ -0,0 +1,2 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/utils/index.cjs`),t=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),n=require(`../button/button.cjs`),r=require(`./split-button-constants.cjs`);let i=require(`vue`),a=require(`@dialpad/dialtone-icons/vue`);var o={name:`SplitButtonEnd`,components:{DtButton:n.default,DtIconChevronDown:a.DtIconChevronDown},props:{active:{type:Boolean,default:!1},ariaLabel:{type:String,default:null},disabled:{type:Boolean,default:!1},id:{type:String,default:e.getUniqueString()},importance:{type:String,default:`primary`},kind:{type:String,default:`default`},size:{type:[String,Number],default:300},tooltipText:{type:String,default:``}},data(){return{SPLIT_BUTTON_ICON_SIZES:r.SPLIT_BUTTON_ICON_SIZES}}};function s(e,t,n,r,a,o){let s=(0,i.resolveComponent)(`dt-icon-chevron-down`),c=(0,i.resolveComponent)(`dt-button`),l=(0,i.resolveDirective)(`dt-tooltip`);return(0,i.withDirectives)(((0,i.openBlock)(),(0,i.createBlock)(c,{id:n.id,"data-qa":`dt-split-button-end`,active:n.active,"aria-label":n.ariaLabel,class:(0,i.normalizeClass)(`d-split-btn__end d-split-btn__end--${n.size}`),disabled:n.disabled,importance:n.importance,kind:n.kind,size:n.size},{icon:(0,i.withCtx)(()=>[(0,i.renderSlot)(e.$slots,`icon`,{size:a.SPLIT_BUTTON_ICON_SIZES[String(n.size)]},()=>[(0,i.createVNode)(s,{size:a.SPLIT_BUTTON_ICON_SIZES[String(n.size)]},null,8,[`size`])])]),_:3},8,[`id`,`active`,`aria-label`,`class`,`disabled`,`importance`,`kind`,`size`])),[[l,{message:n.tooltipText,inverted:n.kind===`inverted`}]])}var c=t.t(o,[[`render`,s]]);exports.default=c;
+//# sourceMappingURL=split-button-end.cjs.map

package/dist/lib/split-button/split-button-end.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-button-end.cjs","names":[],"sources":["../../../components/SplitButton/SplitButtonEnd.vue"],"sourcesContent":["<template>\n  <dt-button\n    :id=\"id\"\n    v-dt-tooltip=\"{ message: tooltipText, inverted: kind === 'inverted' }\"\n    data-qa=\"dt-split-button-end\"\n    :active=\"active\"\n    :aria-label=\"ariaLabel\"\n    :class=\"`d-split-btn__end d-split-btn__end--${size}`\"\n    :disabled=\"disabled\"\n    :importance=\"importance\"\n    :kind=\"kind\"\n    :size=\"size\"\n  >\n    <template #icon>\n      <slot\n        name=\"icon\"\n        :size=\"SPLIT_BUTTON_ICON_SIZES[String(size)]\"\n      >\n        <dt-icon-chevron-down :size=\"SPLIT_BUTTON_ICON_SIZES[String(size)]\" />\n      </slot>\n    </template>\n  </dt-button>\n</template>\n\n<script>\nimport { SPLIT_BUTTON_ICON_SIZES } from './SplitButtonConstants';\nimport { DtButton } from '@/components/Button';\nimport { DtIconChevronDown } from '@dialpad/dialtone-icons/vue';\nimport { getUniqueString } from '@/common/utils';\n\nexport default {\n  name: 'SplitButtonEnd',\n  components: {\n    DtButton,\n    DtIconChevronDown,\n  },\n\n  props: {\n    /**\n     * Determines whether the button should have active styling\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the button\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * HTML button disabled attribute\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Element ID, useful in case you need to reference the button\n     * as an external anchor for popover\n     */\n    id: {\n      type: String,\n      default: getUniqueString(),\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n    },\n\n    /**\n     * The color of the button.\n     */\n    kind: {\n      type: String,\n      default: 'default',\n    },\n\n    /**\n     * The size of the button.\n     */\n    size: {\n      type: [String, Number],\n      default: 300,\n    },\n\n    /**\n     * Text shown in tooltip when you hover the button\n     */\n    tooltipText: {\n      type: String,\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      SPLIT_BUTTON_ICON_SIZES,\n    };\n  },\n};\n</script>\n"],"mappings":"uXA8BA,IAAK,EAAU,CACb,KAAM,iBACN,WAAY,CACV,SAAA,EAAA,QACA,kBAAA,EAAA,kBACD,CAED,MAAO,CAIL,OAAQ,CACN,KAAM,QACN,QAAS,GACV,CAKD,UAAW,CACT,KAAM,OACN,QAAS,KACV,CAKD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAMD,GAAI,CACF,KAAM,OACN,QAAS,EAAA,iBAAiB,CAC3B,CAKD,WAAY,CACV,KAAM,OACN,QAAS,UACV,CAKD,KAAM,CACJ,KAAM,OACN,QAAS,UACV,CAKD,KAAM,CACJ,KAAM,CAAC,OAAQ,OAAO,CACtB,QAAS,IACV,CAKD,YAAa,CACX,KAAM,OACN,QAAS,GACV,CACF,CAED,MAAQ,CACN,MAAO,CACL,wBAAA,EAAA,wBACD,EAEJ,2NAxFa,EAAA,CAnBT,GAAI,EAAA,GAEL,UAAQ,sBACP,OAAQ,EAAA,OACR,aAAY,EAAA,UACZ,OAAA,EAAA,EAAA,gBAAK,sCAAwC,EAAA,OAAI,CACjD,SAAU,EAAA,SACV,WAAY,EAAA,WACZ,KAAM,EAAA,KACN,KAAM,EAAA,OAEI,MAAA,EAAA,EAAA,aAMF,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,OAAA,CAHJ,KAAM,EAAA,wBAAwB,OAAO,EAAA,KAAI,EAAA,KAGrC,EAAA,EAAA,EAAA,aADiE,EAAA,CAA/C,KAAM,EAAA,wBAAwB,OAAO,EAAA,KAAI,EAAA,CAAA,KAAA,EAAA,CAAA,OAAA,CAAA,CAAA,CAAA,CAAA,CAAA,kGAf3C,EAAA,YAAW,SAAY,EAAA,OAAI,WAAA,CAAA,CAAA,CAAA"}

package/dist/lib/split-button/split-button-end.js

@@ -0,0 +1,85 @@
+import { getUniqueString as e } from "../../common/utils/index.js";
+import { t } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
+import n from "../button/button.js";
+import { SPLIT_BUTTON_ICON_SIZES as r } from "./split-button-constants.js";
+import { createBlock as i, createVNode as a, normalizeClass as o, openBlock as s, renderSlot as c, resolveComponent as l, resolveDirective as u, withCtx as d, withDirectives as f } from "vue";
+import { DtIconChevronDown as p } from "@dialpad/dialtone-icons/vue";
+//#region components/SplitButton/SplitButtonEnd.vue
+var m = {
+	name: "SplitButtonEnd",
+	components: {
+		DtButton: n,
+		DtIconChevronDown: p
+	},
+	props: {
+		active: {
+			type: Boolean,
+			default: !1
+		},
+		ariaLabel: {
+			type: String,
+			default: null
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		id: {
+			type: String,
+			default: e()
+		},
+		importance: {
+			type: String,
+			default: "primary"
+		},
+		kind: {
+			type: String,
+			default: "default"
+		},
+		size: {
+			type: [String, Number],
+			default: 300
+		},
+		tooltipText: {
+			type: String,
+			default: ""
+		}
+	},
+	data() {
+		return { SPLIT_BUTTON_ICON_SIZES: r };
+	}
+};
+function h(e, t, n, r, p, m) {
+	let h = l("dt-icon-chevron-down"), g = l("dt-button"), _ = u("dt-tooltip");
+	return f((s(), i(g, {
+		id: n.id,
+		"data-qa": "dt-split-button-end",
+		active: n.active,
+		"aria-label": n.ariaLabel,
+		class: o(`d-split-btn__end d-split-btn__end--${n.size}`),
+		disabled: n.disabled,
+		importance: n.importance,
+		kind: n.kind,
+		size: n.size
+	}, {
+		icon: d(() => [c(e.$slots, "icon", { size: p.SPLIT_BUTTON_ICON_SIZES[String(n.size)] }, () => [a(h, { size: p.SPLIT_BUTTON_ICON_SIZES[String(n.size)] }, null, 8, ["size"])])]),
+		_: 3
+	}, 8, [
+		"id",
+		"active",
+		"aria-label",
+		"class",
+		"disabled",
+		"importance",
+		"kind",
+		"size"
+	])), [[_, {
+		message: n.tooltipText,
+		inverted: n.kind === "inverted"
+	}]]);
+}
+var g = /* @__PURE__ */ t(m, [["render", h]]);
+//#endregion
+export { g as default };
+
+//# sourceMappingURL=split-button-end.js.map

package/dist/lib/split-button/split-button-end.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-button-end.js","names":[],"sources":["../../../components/SplitButton/SplitButtonEnd.vue"],"sourcesContent":["<template>\n  <dt-button\n    :id=\"id\"\n    v-dt-tooltip=\"{ message: tooltipText, inverted: kind === 'inverted' }\"\n    data-qa=\"dt-split-button-end\"\n    :active=\"active\"\n    :aria-label=\"ariaLabel\"\n    :class=\"`d-split-btn__end d-split-btn__end--${size}`\"\n    :disabled=\"disabled\"\n    :importance=\"importance\"\n    :kind=\"kind\"\n    :size=\"size\"\n  >\n    <template #icon>\n      <slot\n        name=\"icon\"\n        :size=\"SPLIT_BUTTON_ICON_SIZES[String(size)]\"\n      >\n        <dt-icon-chevron-down :size=\"SPLIT_BUTTON_ICON_SIZES[String(size)]\" />\n      </slot>\n    </template>\n  </dt-button>\n</template>\n\n<script>\nimport { SPLIT_BUTTON_ICON_SIZES } from './SplitButtonConstants';\nimport { DtButton } from '@/components/Button';\nimport { DtIconChevronDown } from '@dialpad/dialtone-icons/vue';\nimport { getUniqueString } from '@/common/utils';\n\nexport default {\n  name: 'SplitButtonEnd',\n  components: {\n    DtButton,\n    DtIconChevronDown,\n  },\n\n  props: {\n    /**\n     * Determines whether the button should have active styling\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the button\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * HTML button disabled attribute\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Element ID, useful in case you need to reference the button\n     * as an external anchor for popover\n     */\n    id: {\n      type: String,\n      default: getUniqueString(),\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n    },\n\n    /**\n     * The color of the button.\n     */\n    kind: {\n      type: String,\n      default: 'default',\n    },\n\n    /**\n     * The size of the button.\n     */\n    size: {\n      type: [String, Number],\n      default: 300,\n    },\n\n    /**\n     * Text shown in tooltip when you hover the button\n     */\n    tooltipText: {\n      type: String,\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      SPLIT_BUTTON_ICON_SIZES,\n    };\n  },\n};\n</script>\n"],"mappings":";;;;;;;AA8BA,IAAK,IAAU;CACb,MAAM;CACN,YAAY;EACV,UAAA;EACA;EACD;CAED,OAAO;EAIL,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EAKD,WAAW;GACT,MAAM;GACN,SAAS;GACV;EAKD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAMD,IAAI;GACF,MAAM;GACN,SAAS,GAAiB;GAC3B;EAKD,YAAY;GACV,MAAM;GACN,SAAS;GACV;EAKD,MAAM;GACJ,MAAM;GACN,SAAS;GACV;EAKD,MAAM;GACJ,MAAM,CAAC,QAAQ,OAAO;GACtB,SAAS;GACV;EAKD,aAAa;GACX,MAAM;GACN,SAAS;GACV;EACF;CAED,OAAQ;AACN,SAAO,EACL,4BACD;;CAEJ;;;gBA5GC,EAoBY,GAAA;EAnBT,IAAI,EAAA;EAEL,WAAQ;EACP,QAAQ,EAAA;EACR,cAAY,EAAA;EACZ,OAAK,EAAA,sCAAwC,EAAA,OAAI;EACjD,UAAU,EAAA;EACV,YAAY,EAAA;EACZ,MAAM,EAAA;EACN,MAAM,EAAA;;EAEI,MAAI,QAMN,CALP,EAKO,EAAA,QAAA,QAAA,EAHJ,MAAM,EAAA,wBAAwB,OAAO,EAAA,KAAI,GAAA,QAGrC,CADL,EAAsE,GAAA,EAA/C,MAAM,EAAA,wBAAwB,OAAO,EAAA,KAAI,GAAA,EAAA,MAAA,GAAA,CAAA,OAAA,CAAA,CAAA,CAAA,CAAA,CAAA;;;;;;;;;;;;WAf3C,EAAA;EAAW,UAAY,EAAA,SAAI;EAAA,CAAA,CAAA,CAAA"}

package/dist/lib/split-button/split-button-start.cjs

@@ -0,0 +1,2 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),t=require(`../button/button-constants.cjs`),n=require(`../button/button.cjs`);let r=require(`vue`);var i={name:`SplitButtonStart`,components:{DtButton:n.default},props:{active:{type:Boolean,default:!1},ariaLabel:{type:String,default:null},iconPosition:{type:String,default:`left`},labelClass:{type:[String,Array,Object],default:``},leadingClass:{type:[String,Array,Object],default:``},trailingClass:{type:[String,Array,Object],default:``},loading:{type:Boolean,default:!1},tooltipText:{type:String,default:``},assertiveOnFocus:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},importance:{type:String,default:`primary`},kind:{type:String,default:`default`},size:{type:[String,Number],default:300},to:{type:[String,Object],default:null},replace:{type:Boolean,default:!1},href:{type:String,default:null},target:{type:String,default:null},rel:{type:String,default:null}},data(){return{BUTTON_ICON_SIZES:t.BUTTON_ICON_SIZES}},computed:{tooltipConfig(){return{message:this.tooltipText,inverted:this.kind===`inverted`}}}};function a(e,t,n,i,a,o){let s=(0,r.resolveComponent)(`dt-button`),c=(0,r.resolveDirective)(`dt-tooltip`);return(0,r.withDirectives)(((0,r.openBlock)(),(0,r.createBlock)(s,{"data-qa":`dt-split-button-start`,active:n.active,"aria-label":n.ariaLabel,"assertive-on-focus":n.assertiveOnFocus,class:(0,r.normalizeClass)(`d-split-btn__start d-split-btn__start--${n.size}`),disabled:n.disabled,"icon-position":n.iconPosition,importance:n.importance,kind:n.kind,"label-class":n.labelClass,"leading-class":n.leadingClass,"trailing-class":n.trailingClass,loading:n.loading,size:n.size,to:n.to,replace:n.replace,href:n.href,target:n.target,rel:n.rel},(0,r.createSlots)({default:(0,r.withCtx)(()=>[(0,r.renderSlot)(e.$slots,`default`)]),_:2},[e.$slots.startIcon?{name:`startIcon`,fn:(0,r.withCtx)(()=>[(0,r.renderSlot)(e.$slots,`startIcon`,{size:a.BUTTON_ICON_SIZES[n.size]})]),key:`0`}:void 0,e.$slots.endIcon?{name:`endIcon`,fn:(0,r.withCtx)(()=>[(0,r.renderSlot)(e.$slots,`endIcon`,{size:a.BUTTON_ICON_SIZES[n.size]})]),key:`1`}:void 0,e.$slots.icon&&!e.$slots.startIcon&&!e.$slots.endIcon?{name:`icon`,fn:(0,r.withCtx)(()=>[(0,r.renderSlot)(e.$slots,`icon`,{size:a.BUTTON_ICON_SIZES[n.size]})]),key:`2`}:void 0,e.$slots.leading?{name:`leading`,fn:(0,r.withCtx)(()=>[(0,r.renderSlot)(e.$slots,`leading`)]),key:`3`}:void 0,e.$slots.trailing?{name:`trailing`,fn:(0,r.withCtx)(()=>[(0,r.renderSlot)(e.$slots,`trailing`)]),key:`4`}:void 0]),1032,[`active`,`aria-label`,`assertive-on-focus`,`class`,`disabled`,`icon-position`,`importance`,`kind`,`label-class`,`leading-class`,`trailing-class`,`loading`,`size`,`to`,`replace`,`href`,`target`,`rel`])),[[c,o.tooltipConfig]])}var o=e.t(i,[[`render`,a]]);exports.default=o;
+//# sourceMappingURL=split-button-start.cjs.map

package/dist/lib/split-button/split-button-start.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-button-start.cjs","names":[],"sources":["../../../components/SplitButton/SplitButtonStart.vue"],"sourcesContent":["<template>\n  <dt-button\n    v-dt-tooltip=\"tooltipConfig\"\n    data-qa=\"dt-split-button-start\"\n    :active=\"active\"\n    :aria-label=\"ariaLabel\"\n    :assertive-on-focus=\"assertiveOnFocus\"\n    :class=\"`d-split-btn__start d-split-btn__start--${size}`\"\n    :disabled=\"disabled\"\n    :icon-position=\"iconPosition\"\n    :importance=\"importance\"\n    :kind=\"kind\"\n    :label-class=\"labelClass\"\n    :leading-class=\"leadingClass\"\n    :trailing-class=\"trailingClass\"\n    :loading=\"loading\"\n    :size=\"size\"\n    :to=\"to\"\n    :replace=\"replace\"\n    :href=\"href\"\n    :target=\"target\"\n    :rel=\"rel\"\n  >\n    <template\n      v-if=\"$slots.startIcon\"\n      #startIcon\n    >\n      <slot\n        name=\"startIcon\"\n        :size=\"BUTTON_ICON_SIZES[size]\"\n      />\n    </template>\n    <template\n      v-if=\"$slots.endIcon\"\n      #endIcon\n    >\n      <slot\n        name=\"endIcon\"\n        :size=\"BUTTON_ICON_SIZES[size]\"\n      />\n    </template>\n    <template\n      v-if=\"$slots.icon && !$slots.startIcon && !$slots.endIcon\"\n      #icon\n    >\n      <slot\n        name=\"icon\"\n        :size=\"BUTTON_ICON_SIZES[size]\"\n      />\n    </template>\n    <template\n      v-if=\"$slots.leading\"\n      #leading\n    >\n      <slot name=\"leading\" />\n    </template>\n    <template\n      v-if=\"$slots.trailing\"\n      #trailing\n    >\n      <slot name=\"trailing\" />\n    </template>\n    <slot name=\"default\" />\n  </dt-button>\n</template>\n\n<script>\nimport { BUTTON_ICON_SIZES, DtButton } from '@/components/Button';\n\nexport default {\n  name: 'SplitButtonStart',\n\n  components: {\n    DtButton,\n  },\n\n  props: {\n    /**\n     * Determines whether the button should have active styling\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the button\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The position of the icon slot within the button.\n     */\n    iconPosition: {\n      type: String,\n      default: 'left',\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the leading container\n     */\n    leadingClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the trailing container\n     */\n    trailingClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Whether the button should display a loading animation or not.\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Text shown in tooltip when you hover the button\n     */\n    tooltipText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines whether a screenreader reads live updates of\n     * the button content to the user while the button is in focus.\n     */\n    assertiveOnFocus: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button disabled attribute\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n    },\n\n    /**\n     * The color of the button.\n     */\n    kind: {\n      type: String,\n      default: 'default',\n    },\n\n    /**\n     * The size of the button.\n     */\n    size: {\n      type: [String, Number],\n      default: 300,\n    },\n\n    /**\n     * Vue router `to` prop. When set, renders as a `<router-link>`.\n     */\n    to: {\n      type: [String, Object],\n      default: null,\n    },\n\n    /**\n     * Whether to use `router.replace()` instead of `router.push()`.\n     */\n    replace: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML href. When set, renders as an `<a>` element.\n     */\n    href: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * HTML target attribute for the link.\n     */\n    target: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * HTML rel attribute for the link.\n     */\n    rel: {\n      type: String,\n      default: null,\n    },\n  },\n\n  data () {\n    return {\n      BUTTON_ICON_SIZES,\n    };\n  },\n\n  computed: {\n    tooltipConfig () {\n      return {\n        message: this.tooltipText,\n        inverted: this.kind === 'inverted',\n      };\n    },\n  },\n};\n</script>\n"],"mappings":"sSAqEA,IAAK,EAAU,CACb,KAAM,mBAEN,WAAY,CACV,SAAA,EAAA,QACD,CAED,MAAO,CAIL,OAAQ,CACN,KAAM,QACN,QAAS,GACV,CAKD,UAAW,CACT,KAAM,OACN,QAAS,KACV,CAKD,aAAc,CACZ,KAAM,OACN,QAAS,OACV,CAKD,WAAY,CACV,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,CAKD,aAAc,CACZ,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,CAKD,cAAe,CACb,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,CAKD,QAAS,CACP,KAAM,QACN,QAAS,GACV,CAKD,YAAa,CACX,KAAM,OACN,QAAS,GACV,CAMD,iBAAkB,CAChB,KAAM,QACN,QAAS,GACV,CAKD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAKD,WAAY,CACV,KAAM,OACN,QAAS,UACV,CAKD,KAAM,CACJ,KAAM,OACN,QAAS,UACV,CAKD,KAAM,CACJ,KAAM,CAAC,OAAQ,OAAO,CACtB,QAAS,IACV,CAKD,GAAI,CACF,KAAM,CAAC,OAAQ,OAAO,CACtB,QAAS,KACV,CAKD,QAAS,CACP,KAAM,QACN,QAAS,GACV,CAKD,KAAM,CACJ,KAAM,OACN,QAAS,KACV,CAKD,OAAQ,CACN,KAAM,OACN,QAAS,KACV,CAKD,IAAK,CACH,KAAM,OACN,QAAS,KACV,CACF,CAED,MAAQ,CACN,MAAO,CACL,kBAAA,EAAA,kBACD,EAGH,SAAU,CACR,eAAiB,CACf,MAAO,CACL,QAAS,KAAK,YACd,SAAU,KAAK,OAAS,WACzB,EAEJ,CACF,0KA9Ka,EAAA,CA5DV,UAAQ,wBACP,OAAQ,EAAA,OACR,aAAY,EAAA,UACZ,qBAAoB,EAAA,iBACpB,OAAA,EAAA,EAAA,gBAAK,0CAA4C,EAAA,OAAI,CACrD,SAAU,EAAA,SACV,gBAAe,EAAA,aACf,WAAY,EAAA,WACZ,KAAM,EAAA,KACN,cAAa,EAAA,WACb,gBAAe,EAAA,aACf,iBAAgB,EAAA,cAChB,QAAS,EAAA,QACT,KAAM,EAAA,KACN,GAAI,EAAA,GACJ,QAAS,EAAA,QACT,KAAM,EAAA,KACN,OAAQ,EAAA,OACR,IAAK,EAAA,kDAyCiB,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,UAAA,CAAA,CAAA,OAtCf,EAAA,OAAO,UAAA,MACZ,iCAKC,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,YAAA,CADC,KAAM,EAAA,kBAAkB,EAAA,MAAA,CAAA,CAAA,CAAA,iBAIrB,EAAA,OAAO,QAAA,MACZ,+BAKC,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,UAAA,CADC,KAAM,EAAA,kBAAkB,EAAA,MAAA,CAAA,CAAA,CAAA,iBAIrB,EAAA,OAAO,MAAI,CAAK,EAAA,OAAO,WAAS,CAAK,EAAA,OAAO,QAAA,MACjD,4BAKC,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,OAAA,CADC,KAAM,EAAA,kBAAkB,EAAA,MAAA,CAAA,CAAA,CAAA,iBAIrB,EAAA,OAAO,QAAA,MACZ,+BAEsB,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,UAAA,CAAA,CAAA,iBAGjB,EAAA,OAAO,SAAA,MACZ,gCAEuB,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,WAAA,CAAA,CAAA,uOA1DZ,EAAA,cAAa,CAAA,CAAA"}