@dialpad/dialtone-vue 4.4.1 → 4.6.0

package/dist/lib/emoji-picker/index.js

@@ -1,3 +1,3 @@
-import { t as e } from "../../EmojiPicker-BllVwJf4.js";
+import { t as e } from "../../EmojiPicker-D46lLRMp.js";
 import { ARROW_KEYS as t, CDN_URL as n, EMOJIS_PER_ROW as r, EMOJI_PICKER_SKIN_TONE_MODIFIERS as i } from "./emoji-picker-constants.js";
 export { t as ARROW_KEYS, n as CDN_URL, e as DtEmojiPicker, r as EMOJIS_PER_ROW, i as EMOJI_PICKER_SKIN_TONE_MODIFIERS };

package/dist/lib/empty-state/empty-state.cjs

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/validators/index.cjs`),t=require(`../../common/utils/index.cjs`),n=require(`../text/text.cjs`),r=require(`../stack/stack.cjs`),i=require(`./empty-state-constants.cjs`);let a=require(`vue`);var o=Object.assign({name:`DtEmptyState`},{__name:`EmptyState`,props:{size:{type:[String,Number],default:400,validator:e.ordinalSizeValidator(i.EMPTY_STATE_SIZE_MODIFIERS)},headerText:{type:String,required:!0},bodyText:{type:String,default:null},illustrationClass:{type:[String,Array,Object],default:``},iconClass:{type:[String,Array,Object],default:``},bodyClass:{type:[String,Array,Object],default:``}},setup(e){let o=(0,a.useSlots)(),s=e,c=(0,a.computed)(()=>t.hasSlotContent(o.icon)),l=(0,a.computed)(()=>t.hasSlotContent(o.illustration)),u=(0,a.computed)(()=>c.value&&(!l.value||p.value)),d=(0,a.computed)(()=>l.value&&!p.value),f=(0,a.computed)(()=>String(s.size)),p=(0,a.computed)(()=>f.value===`sm`||f.value===`200`),m=(0,a.computed)(()=>i.EMPTY_STATE_SIZE_MODIFIERS[f.value]),h=(0,a.computed)(()=>[`d-empty-state`,m.value]),g=(0,a.computed)(()=>i.EMPTY_STATE_CONTENT_SIZE_MODIFIERS[f.value]),_=(0,a.computed)(()=>i.EMPTY_STATE_HEADLINE_SIZES[f.value]),v=(0,a.computed)(()=>i.EMPTY_STATE_HEADLINE_DENSITIES[f.value]),y=(0,a.computed)(()=>i.EMPTY_STATE_BODY_SIZES[f.value]),b=(0,a.computed)(()=>i.EMPTY_STATE_BODY_DENSITIES[f.value]);return(0,a.onMounted)(()=>{!s.bodyText&&!t.hasSlotContent(o.body)&&console.error(`DtEmptyState: You should provide either bodyText or content on body slot.`)}),(i,s)=>((0,a.openBlock)(),(0,a.createBlock)((0,a.unref)(r.default),{class:(0,a.normalizeClass)(h.value)},{default:(0,a.withCtx)(()=>[d.value?((0,a.openBlock)(),(0,a.createElementBlock)(`span`,{key:0,class:(0,a.normalizeClass)([`d-empty-state__illustration`,e.illustrationClass])},[(0,a.renderSlot)(i.$slots,`illustration`)],2)):(0,a.createCommentVNode)(``,!0),u.value?((0,a.openBlock)(),(0,a.createElementBlock)(`span`,{key:1,class:(0,a.normalizeClass)([`d-empty-state__icon`,e.iconClass])},[(0,a.renderSlot)(i.$slots,`icon`,{iconSize:`800`})],2)):(0,a.createCommentVNode)(``,!0),(0,a.createVNode)((0,a.unref)(r.default),{gap:`150`,class:(0,a.normalizeClass)([`d-empty-state__content`,g.value])},{default:(0,a.withCtx)(()=>[(0,a.createVNode)((0,a.unref)(n.default),{kind:`headline`,size:_.value,density:v.value,wrap:`balance`,as:`div`,class:`d-empty-state__header-text`},{default:(0,a.withCtx)(()=>[(0,a.createTextVNode)((0,a.toDisplayString)(e.headerText),1)]),_:1},8,[`size`,`density`]),e.bodyText?((0,a.openBlock)(),(0,a.createBlock)((0,a.unref)(n.default),{key:0,kind:`body`,size:y.value,density:b.value,tone:`secondary`,wrap:`balance`,as:`p`,class:`d-empty-state__body-text`},{default:(0,a.withCtx)(()=>[(0,a.createTextVNode)((0,a.toDisplayString)(e.bodyText),1)]),_:1},8,[`size`,`density`])):(0,a.createCommentVNode)(``,!0)]),_:1},8,[`class`]),(0,a.unref)(t.hasSlotContent)((0,a.unref)(o).body)?((0,a.openBlock)(),(0,a.createElementBlock)(`div`,{key:2,class:(0,a.normalizeClass)(e.bodyClass)},[(0,a.renderSlot)(i.$slots,`body`)],2)):(0,a.createCommentVNode)(``,!0)]),_:3},8,[`class`]))}});exports.default=o;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/validators/index.cjs`),t=require(`../../common/utils/index.cjs`),n=require(`../text/text.cjs`),r=require(`../stack/stack.cjs`),i=require(`./empty-state-constants.cjs`);let a=require(`vue`);var o=Object.assign({name:`DtEmptyState`},{__name:`EmptyState`,props:{size:{type:[String,Number],default:400,validator:e.ordinalSizeValidator(i.EMPTY_STATE_SIZE_MODIFIERS)},headerText:{type:String,required:!0},bodyText:{type:String,default:null},illustrationClass:{type:[String,Array,Object],default:``},iconClass:{type:[String,Array,Object],default:``},bodyClass:{type:[String,Array,Object],default:``}},setup(e){let o=(0,a.useSlots)(),s=e,c=(0,a.computed)(()=>t.hasSlotContent(o.icon)),l=(0,a.computed)(()=>t.hasSlotContent(o.illustration)),u=(0,a.computed)(()=>c.value&&(!l.value||p.value)),d=(0,a.computed)(()=>l.value&&!p.value),f=(0,a.computed)(()=>String(s.size)),p=(0,a.computed)(()=>f.value===`sm`||f.value===`200`),m=(0,a.computed)(()=>i.EMPTY_STATE_SIZE_MODIFIERS[f.value]),h=(0,a.computed)(()=>[`d-empty-state`,m.value]),g=(0,a.computed)(()=>i.EMPTY_STATE_CONTENT_SIZE_MODIFIERS[f.value]),_=(0,a.computed)(()=>i.EMPTY_STATE_HEADLINE_SIZES[f.value]),v=(0,a.computed)(()=>i.EMPTY_STATE_HEADLINE_DENSITIES[f.value]),y=(0,a.computed)(()=>i.EMPTY_STATE_BODY_SIZES[f.value]),b=(0,a.computed)(()=>i.EMPTY_STATE_BODY_DENSITIES[f.value]);return(0,a.onMounted)(()=>{!s.bodyText&&!t.hasSlotContent(o.body)&&console.error(`DtEmptyState: You should provide either bodyText or content on body slot.`)}),(i,s)=>((0,a.openBlock)(),(0,a.createBlock)((0,a.unref)(r.default),{class:(0,a.normalizeClass)(h.value)},{default:(0,a.withCtx)(()=>[d.value?((0,a.openBlock)(),(0,a.createElementBlock)(`span`,{key:0,class:(0,a.normalizeClass)([`d-empty-state__illustration`,e.illustrationClass]),"data-qa":`dt-empty-state-illustration`},[(0,a.renderSlot)(i.$slots,`illustration`)],2)):(0,a.createCommentVNode)(``,!0),u.value?((0,a.openBlock)(),(0,a.createElementBlock)(`span`,{key:1,class:(0,a.normalizeClass)([`d-empty-state__icon`,e.iconClass]),"data-qa":`dt-empty-state-icon`},[(0,a.renderSlot)(i.$slots,`icon`,{iconSize:`800`})],2)):(0,a.createCommentVNode)(``,!0),(0,a.createVNode)((0,a.unref)(r.default),{gap:`150`,class:(0,a.normalizeClass)([`d-empty-state__content`,g.value])},{default:(0,a.withCtx)(()=>[(0,a.createVNode)((0,a.unref)(n.default),{kind:`headline`,size:_.value,density:v.value,wrap:`balance`,as:`div`,class:`d-empty-state__header-text`},{default:(0,a.withCtx)(()=>[(0,a.createTextVNode)((0,a.toDisplayString)(e.headerText),1)]),_:1},8,[`size`,`density`]),e.bodyText?((0,a.openBlock)(),(0,a.createBlock)((0,a.unref)(n.default),{key:0,kind:`body`,size:y.value,density:b.value,tone:`secondary`,wrap:`balance`,as:`p`,class:`d-empty-state__body-text`},{default:(0,a.withCtx)(()=>[(0,a.createTextVNode)((0,a.toDisplayString)(e.bodyText),1)]),_:1},8,[`size`,`density`])):(0,a.createCommentVNode)(``,!0)]),_:1},8,[`class`]),(0,a.unref)(t.hasSlotContent)((0,a.unref)(o).body)?((0,a.openBlock)(),(0,a.createElementBlock)(`div`,{key:2,class:(0,a.normalizeClass)(e.bodyClass),"data-qa":`dt-empty-state-body-slot`},[(0,a.renderSlot)(i.$slots,`body`)],2)):(0,a.createCommentVNode)(``,!0)]),_:3},8,[`class`]))}});exports.default=o;
 //# sourceMappingURL=empty-state.cjs.map

package/dist/lib/empty-state/empty-state.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"empty-state.cjs","names":[],"sources":["../../../components/EmptyState/EmptyState.vue"],"sourcesContent":["<template>\n  <dt-stack\n    :class=\"emptyStateClasses\"\n  >\n    <span\n      v-if=\"showIllustration\"\n      :class=\"['d-empty-state__illustration', illustrationClass]\"\n    >\n      <!-- @slot Slot for the illustration. Displays when size is 'lg' or 'md'. Overrides icon. -->\n      <slot name=\"illustration\" />\n    </span>\n\n    <span\n      v-if=\"showIcon\"\n      :class=\"['d-empty-state__icon', iconClass]\"\n    >\n      <!-- @slot Slot for the icon. Displayed if illustration is not provided. -->\n      <slot\n        name=\"icon\"\n        :icon-size=\"'800'\"\n      />\n    </span>\n\n    <dt-stack\n      gap=\"150\"\n      :class=\"['d-empty-state__content', contentClass]\"\n    >\n      <dt-text\n        kind=\"headline\"\n        :size=\"headlineSize\"\n        :density=\"headlineDensity\"\n        wrap=\"balance\"\n        as=\"div\"\n        class=\"d-empty-state__header-text\"\n      >\n        {{ headerText }}\n      </dt-text>\n\n      <dt-text\n        v-if=\"bodyText\"\n        kind=\"body\"\n        :size=\"bodySize\"\n        :density=\"bodyDensity\"\n        tone=\"secondary\"\n        wrap=\"balance\"\n        as=\"p\"\n        class=\"d-empty-state__body-text\"\n      >\n        {{ bodyText }}\n      </dt-text>\n    </dt-stack>\n\n    <div\n      v-if=\"hasSlotContent(slots.body)\"\n      :class=\"bodyClass\"\n    >\n      <slot name=\"body\" />\n    </div>\n  </dt-stack>\n</template>\n\n<script setup>\nimport { useSlots, computed, onMounted } from 'vue';\nimport { DtStack } from '@/components/Stack';\nimport { DtText } from '@/components/Text';\nimport { hasSlotContent } from '@/common/utils';\nimport { ordinalSizeValidator } from '@/common/validators';\nimport {\n  EMPTY_STATE_BODY_DENSITIES,\n  EMPTY_STATE_BODY_SIZES,\n  EMPTY_STATE_CONTENT_SIZE_MODIFIERS,\n  EMPTY_STATE_HEADLINE_DENSITIES,\n  EMPTY_STATE_HEADLINE_SIZES,\n  EMPTY_STATE_SIZE_MODIFIERS,\n} from './EmptyStateConstants.js';\n\ndefineOptions({\n  name: 'DtEmptyState',\n});\n\nconst slots = useSlots();\n\nconst props = defineProps({\n  /**\n    * The empty state size.\n    * @values 200, 300, 400\n    */\n  size: {\n    type: [String, Number],\n    default: 400,\n    validator: ordinalSizeValidator(EMPTY_STATE_SIZE_MODIFIERS),\n  },\n\n  /**\n    * Header text\n    * @type {String}\n    */\n  headerText: {\n    type: String,\n    required: true,\n  },\n\n  /**\n    * Body text\n    * @type {String}\n    */\n  bodyText: {\n    type: String,\n    default: null,\n  },\n\n  /**\n    * Additional class name for the illustration wrapper element.\n    */\n  illustrationClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n    * Additional class name for the icon wrapper element.\n    */\n  iconClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n    * Additional class name for the body slot wrapper element.\n    */\n  bodyClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n});\n\nconst hasIcon = computed(() => {\n  return hasSlotContent(slots.icon);\n});\nconst hasIllustration = computed(() => hasSlotContent(slots.illustration));\n\n/**\n * Icon will be shown in lg and md size only if illustration is not provided\n * Icon will always be shown in sm size\n */\nconst showIcon = computed(() => hasIcon.value && (!hasIllustration.value || isSmallSize.value));\n\n/**\n * Illustration will always be shown in lg and md size\n * Illustration will not be shown in sm size\n */\nconst showIllustration = computed(() => hasIllustration.value && !isSmallSize.value);\n\nconst sizeKey = computed(() => String(props.size));\nconst isSmallSize = computed(() => sizeKey.value === 'sm' || sizeKey.value === '200');\n\nconst sizeClass = computed(() => EMPTY_STATE_SIZE_MODIFIERS[sizeKey.value]);\n\nconst emptyStateClasses = computed(() => ['d-empty-state', sizeClass.value]);\n\nconst contentClass = computed(() => EMPTY_STATE_CONTENT_SIZE_MODIFIERS[sizeKey.value]);\n\nconst headlineSize = computed(() => EMPTY_STATE_HEADLINE_SIZES[sizeKey.value]);\nconst headlineDensity = computed(() => EMPTY_STATE_HEADLINE_DENSITIES[sizeKey.value]);\n\nconst bodySize = computed(() => EMPTY_STATE_BODY_SIZES[sizeKey.value]);\nconst bodyDensity = computed(() => EMPTY_STATE_BODY_DENSITIES[sizeKey.value]);\n\nonMounted(() => {\n  if (!props.bodyText && !hasSlotContent(slots.body)) {\n    console.error('DtEmptyState: You should provide either bodyText or content on body slot.');\n  }\n});\n</script>\n"],"mappings":"4vBAgFA,IAAM,GAAA,EAAA,EAAA,WAAkB,CAElB,EAAQ,EAsDR,GAAA,EAAA,EAAA,cACG,EAAA,eAAe,EAAM,KAAK,CACjC,CACI,GAAA,EAAA,EAAA,cAAiC,EAAA,eAAe,EAAM,aAAa,CAAC,CAMpE,GAAA,EAAA,EAAA,cAA0B,EAAQ,QAAU,CAAC,EAAgB,OAAS,EAAY,OAAO,CAMzF,GAAA,EAAA,EAAA,cAAkC,EAAgB,OAAS,CAAC,EAAY,MAAM,CAE9E,GAAA,EAAA,EAAA,cAAyB,OAAO,EAAM,KAAK,CAAC,CAC5C,GAAA,EAAA,EAAA,cAA6B,EAAQ,QAAU,MAAQ,EAAQ,QAAU,MAAM,CAE/E,GAAA,EAAA,EAAA,cAA2B,EAAA,2BAA2B,EAAQ,OAAO,CAErE,GAAA,EAAA,EAAA,cAAmC,CAAC,gBAAiB,EAAU,MAAM,CAAC,CAEtE,GAAA,EAAA,EAAA,cAA8B,EAAA,mCAAmC,EAAQ,OAAO,CAEhF,GAAA,EAAA,EAAA,cAA8B,EAAA,2BAA2B,EAAQ,OAAO,CACxE,GAAA,EAAA,EAAA,cAAiC,EAAA,+BAA+B,EAAQ,OAAO,CAE/E,GAAA,EAAA,EAAA,cAA0B,EAAA,uBAAuB,EAAQ,OAAO,CAChE,GAAA,EAAA,EAAA,cAA6B,EAAA,2BAA2B,EAAQ,OAAO,QAE7E,EAAA,EAAA,eAAgB,CACV,CAAC,EAAM,UAAY,CAAC,EAAA,eAAe,EAAM,KAAK,EAChD,QAAQ,MAAM,4EAA4E,EAE5F,yDAlHW,EAAA,QAAA,CAAA,CAxDR,OAAA,EAAA,EAAA,gBAAO,EAAA,MAAiB,CAAA,CAAA,2BAQlB,CALC,EAAA,QAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAKD,OAAA,OAJJ,OAAA,EAAA,EAAA,gBAAK,CAAA,8BAAkC,EAAA,kBAAiB,CAAA,oBAG7B,EAAA,OAAA,eAAA,CAAA,CAAA,EAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,CAItB,EAAA,QAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAQD,OAAA,OAPJ,OAAA,EAAA,EAAA,gBAAK,CAAA,sBAA0B,EAAA,UAAS,CAAA,oBAMvC,EAAA,OAAA,OAAA,CADC,SAAW,MAAK,CAAA,CAAA,CAAA,EAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,+BA+BV,EAAA,QAAA,CAAA,CA1BT,IAAI,MACH,OAAA,EAAA,EAAA,gBAAK,CAAA,yBAA6B,EAAA,MAAY,CAAA,6BAWrC,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,OAAA,EAAA,QAAA,CAAA,CARR,KAAK,WACJ,KAAM,EAAA,MACN,QAAS,EAAA,MACV,KAAK,UACL,GAAG,MACH,MAAM,yDAEU,EAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,iBAAb,EAAA,WAAU,CAAA,EAAA,CAAA,CAAA,4BAIP,EAAA,WAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,OAUE,EAAA,QAAA,CAAA,OATR,KAAK,OACJ,KAAM,EAAA,MACN,QAAS,EAAA,MACV,KAAK,YACL,KAAK,UACL,GAAG,IACH,MAAM,uDAEQ,EAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,iBAAX,EAAA,SAAQ,CAAA,EAAA,CAAA,CAAA,6FAKP,EAAA,eAAc,EAAA,EAAA,EAAA,OAAC,EAAK,CAAC,KAAI,GAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAI3B,MAAA,OAHH,OAAA,EAAA,EAAA,gBAAO,EAAA,UAAS,oBAEG,EAAA,OAAA,OAAA,CAAA,CAAA,EAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA"}
+{"version":3,"file":"empty-state.cjs","names":[],"sources":["../../../components/EmptyState/EmptyState.vue"],"sourcesContent":["<template>\n  <dt-stack\n    :class=\"emptyStateClasses\"\n  >\n    <span\n      v-if=\"showIllustration\"\n      :class=\"['d-empty-state__illustration', illustrationClass]\"\n      data-qa=\"dt-empty-state-illustration\"\n    >\n      <!-- @slot Slot for the illustration. Displays when size is 'lg' or 'md'. Overrides icon. -->\n      <slot name=\"illustration\" />\n    </span>\n\n    <span\n      v-if=\"showIcon\"\n      :class=\"['d-empty-state__icon', iconClass]\"\n      data-qa=\"dt-empty-state-icon\"\n    >\n      <!-- @slot Slot for the icon. Displayed if illustration is not provided. -->\n      <slot\n        name=\"icon\"\n        :icon-size=\"'800'\"\n      />\n    </span>\n\n    <dt-stack\n      gap=\"150\"\n      :class=\"['d-empty-state__content', contentClass]\"\n    >\n      <dt-text\n        kind=\"headline\"\n        :size=\"headlineSize\"\n        :density=\"headlineDensity\"\n        wrap=\"balance\"\n        as=\"div\"\n        class=\"d-empty-state__header-text\"\n      >\n        {{ headerText }}\n      </dt-text>\n\n      <dt-text\n        v-if=\"bodyText\"\n        kind=\"body\"\n        :size=\"bodySize\"\n        :density=\"bodyDensity\"\n        tone=\"secondary\"\n        wrap=\"balance\"\n        as=\"p\"\n        class=\"d-empty-state__body-text\"\n      >\n        {{ bodyText }}\n      </dt-text>\n    </dt-stack>\n\n    <div\n      v-if=\"hasSlotContent(slots.body)\"\n      :class=\"bodyClass\"\n      data-qa=\"dt-empty-state-body-slot\"\n    >\n      <slot name=\"body\" />\n    </div>\n  </dt-stack>\n</template>\n\n<script setup>\nimport { useSlots, computed, onMounted } from 'vue';\nimport { DtStack } from '@/components/Stack';\nimport { DtText } from '@/components/Text';\nimport { hasSlotContent } from '@/common/utils';\nimport { ordinalSizeValidator } from '@/common/validators';\nimport {\n  EMPTY_STATE_BODY_DENSITIES,\n  EMPTY_STATE_BODY_SIZES,\n  EMPTY_STATE_CONTENT_SIZE_MODIFIERS,\n  EMPTY_STATE_HEADLINE_DENSITIES,\n  EMPTY_STATE_HEADLINE_SIZES,\n  EMPTY_STATE_SIZE_MODIFIERS,\n} from './EmptyStateConstants.js';\n\ndefineOptions({\n  name: 'DtEmptyState',\n});\n\nconst slots = useSlots();\n\nconst props = defineProps({\n  /**\n    * The empty state size.\n    * @values 200, 300, 400\n    */\n  size: {\n    type: [String, Number],\n    default: 400,\n    validator: ordinalSizeValidator(EMPTY_STATE_SIZE_MODIFIERS),\n  },\n\n  /**\n    * Header text\n    * @type {String}\n    */\n  headerText: {\n    type: String,\n    required: true,\n  },\n\n  /**\n    * Body text\n    * @type {String}\n    */\n  bodyText: {\n    type: String,\n    default: null,\n  },\n\n  /**\n    * Additional class name for the illustration wrapper element.\n    */\n  illustrationClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n    * Additional class name for the icon wrapper element.\n    */\n  iconClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n    * Additional class name for the body slot wrapper element.\n    */\n  bodyClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n});\n\nconst hasIcon = computed(() => {\n  return hasSlotContent(slots.icon);\n});\nconst hasIllustration = computed(() => hasSlotContent(slots.illustration));\n\n/**\n * Icon will be shown in lg and md size only if illustration is not provided\n * Icon will always be shown in sm size\n */\nconst showIcon = computed(() => hasIcon.value && (!hasIllustration.value || isSmallSize.value));\n\n/**\n * Illustration will always be shown in lg and md size\n * Illustration will not be shown in sm size\n */\nconst showIllustration = computed(() => hasIllustration.value && !isSmallSize.value);\n\nconst sizeKey = computed(() => String(props.size));\nconst isSmallSize = computed(() => sizeKey.value === 'sm' || sizeKey.value === '200');\n\nconst sizeClass = computed(() => EMPTY_STATE_SIZE_MODIFIERS[sizeKey.value]);\n\nconst emptyStateClasses = computed(() => ['d-empty-state', sizeClass.value]);\n\nconst contentClass = computed(() => EMPTY_STATE_CONTENT_SIZE_MODIFIERS[sizeKey.value]);\n\nconst headlineSize = computed(() => EMPTY_STATE_HEADLINE_SIZES[sizeKey.value]);\nconst headlineDensity = computed(() => EMPTY_STATE_HEADLINE_DENSITIES[sizeKey.value]);\n\nconst bodySize = computed(() => EMPTY_STATE_BODY_SIZES[sizeKey.value]);\nconst bodyDensity = computed(() => EMPTY_STATE_BODY_DENSITIES[sizeKey.value]);\n\nonMounted(() => {\n  if (!props.bodyText && !hasSlotContent(slots.body)) {\n    console.error('DtEmptyState: You should provide either bodyText or content on body slot.');\n  }\n});\n</script>\n"],"mappings":"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"}

package/dist/lib/empty-state/empty-state.js

@@ -54,11 +54,13 @@ var w = /* @__PURE__ */ Object.assign({ name: "DtEmptyState" }, {
 			default: C(() => [
 				k.value ? (v(), p("span", {
 					key: 0,
-					class: g(["d-empty-state__illustration", e.illustrationClass])
+					class: g(["d-empty-state__illustration", e.illustrationClass]),
+					"data-qa": "dt-empty-state-illustration"
 				}, [y(i.$slots, "illustration")], 2)) : f("", !0),
 				O.value ? (v(), p("span", {
 					key: 1,
-					class: g(["d-empty-state__icon", e.iconClass])
+					class: g(["d-empty-state__icon", e.iconClass]),
+					"data-qa": "dt-empty-state-icon"
 				}, [y(i.$slots, "icon", { iconSize: "800" })], 2)) : f("", !0),
 				h(x(r), {
 					gap: "150",
@@ -91,7 +93,8 @@ var w = /* @__PURE__ */ Object.assign({ name: "DtEmptyState" }, {
 				}, 8, ["class"]),
 				x(t)(x(w).body) ? (v(), p("div", {
 					key: 2,
-					class: g(e.bodyClass)
+					class: g(e.bodyClass),
+					"data-qa": "dt-empty-state-body-slot"
 				}, [y(i.$slots, "body")], 2)) : f("", !0)
 			]),
 			_: 3

package/dist/lib/empty-state/empty-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"empty-state.js","names":[],"sources":["../../../components/EmptyState/EmptyState.vue"],"sourcesContent":["<template>\n  <dt-stack\n    :class=\"emptyStateClasses\"\n  >\n    <span\n      v-if=\"showIllustration\"\n      :class=\"['d-empty-state__illustration', illustrationClass]\"\n    >\n      <!-- @slot Slot for the illustration. Displays when size is 'lg' or 'md'. Overrides icon. -->\n      <slot name=\"illustration\" />\n    </span>\n\n    <span\n      v-if=\"showIcon\"\n      :class=\"['d-empty-state__icon', iconClass]\"\n    >\n      <!-- @slot Slot for the icon. Displayed if illustration is not provided. -->\n      <slot\n        name=\"icon\"\n        :icon-size=\"'800'\"\n      />\n    </span>\n\n    <dt-stack\n      gap=\"150\"\n      :class=\"['d-empty-state__content', contentClass]\"\n    >\n      <dt-text\n        kind=\"headline\"\n        :size=\"headlineSize\"\n        :density=\"headlineDensity\"\n        wrap=\"balance\"\n        as=\"div\"\n        class=\"d-empty-state__header-text\"\n      >\n        {{ headerText }}\n      </dt-text>\n\n      <dt-text\n        v-if=\"bodyText\"\n        kind=\"body\"\n        :size=\"bodySize\"\n        :density=\"bodyDensity\"\n        tone=\"secondary\"\n        wrap=\"balance\"\n        as=\"p\"\n        class=\"d-empty-state__body-text\"\n      >\n        {{ bodyText }}\n      </dt-text>\n    </dt-stack>\n\n    <div\n      v-if=\"hasSlotContent(slots.body)\"\n      :class=\"bodyClass\"\n    >\n      <slot name=\"body\" />\n    </div>\n  </dt-stack>\n</template>\n\n<script setup>\nimport { useSlots, computed, onMounted } from 'vue';\nimport { DtStack } from '@/components/Stack';\nimport { DtText } from '@/components/Text';\nimport { hasSlotContent } from '@/common/utils';\nimport { ordinalSizeValidator } from '@/common/validators';\nimport {\n  EMPTY_STATE_BODY_DENSITIES,\n  EMPTY_STATE_BODY_SIZES,\n  EMPTY_STATE_CONTENT_SIZE_MODIFIERS,\n  EMPTY_STATE_HEADLINE_DENSITIES,\n  EMPTY_STATE_HEADLINE_SIZES,\n  EMPTY_STATE_SIZE_MODIFIERS,\n} from './EmptyStateConstants.js';\n\ndefineOptions({\n  name: 'DtEmptyState',\n});\n\nconst slots = useSlots();\n\nconst props = defineProps({\n  /**\n    * The empty state size.\n    * @values 200, 300, 400\n    */\n  size: {\n    type: [String, Number],\n    default: 400,\n    validator: ordinalSizeValidator(EMPTY_STATE_SIZE_MODIFIERS),\n  },\n\n  /**\n    * Header text\n    * @type {String}\n    */\n  headerText: {\n    type: String,\n    required: true,\n  },\n\n  /**\n    * Body text\n    * @type {String}\n    */\n  bodyText: {\n    type: String,\n    default: null,\n  },\n\n  /**\n    * Additional class name for the illustration wrapper element.\n    */\n  illustrationClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n    * Additional class name for the icon wrapper element.\n    */\n  iconClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n    * Additional class name for the body slot wrapper element.\n    */\n  bodyClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n});\n\nconst hasIcon = computed(() => {\n  return hasSlotContent(slots.icon);\n});\nconst hasIllustration = computed(() => hasSlotContent(slots.illustration));\n\n/**\n * Icon will be shown in lg and md size only if illustration is not provided\n * Icon will always be shown in sm size\n */\nconst showIcon = computed(() => hasIcon.value && (!hasIllustration.value || isSmallSize.value));\n\n/**\n * Illustration will always be shown in lg and md size\n * Illustration will not be shown in sm size\n */\nconst showIllustration = computed(() => hasIllustration.value && !isSmallSize.value);\n\nconst sizeKey = computed(() => String(props.size));\nconst isSmallSize = computed(() => sizeKey.value === 'sm' || sizeKey.value === '200');\n\nconst sizeClass = computed(() => EMPTY_STATE_SIZE_MODIFIERS[sizeKey.value]);\n\nconst emptyStateClasses = computed(() => ['d-empty-state', sizeClass.value]);\n\nconst contentClass = computed(() => EMPTY_STATE_CONTENT_SIZE_MODIFIERS[sizeKey.value]);\n\nconst headlineSize = computed(() => EMPTY_STATE_HEADLINE_SIZES[sizeKey.value]);\nconst headlineDensity = computed(() => EMPTY_STATE_HEADLINE_DENSITIES[sizeKey.value]);\n\nconst bodySize = computed(() => EMPTY_STATE_BODY_SIZES[sizeKey.value]);\nconst bodyDensity = computed(() => EMPTY_STATE_BODY_DENSITIES[sizeKey.value]);\n\nonMounted(() => {\n  if (!props.bodyText && !hasSlotContent(slots.body)) {\n    console.error('DtEmptyState: You should provide either bodyText or content on body slot.');\n  }\n});\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgFA,IAAM,IAAQ,GAAU,EAElB,IAAQ,GAsDR,IAAU,QACP,EAAe,EAAM,KAAK,CACjC,EACI,IAAkB,QAAe,EAAe,EAAM,aAAa,CAAC,EAMpE,IAAW,QAAe,EAAQ,UAAU,CAAC,EAAgB,SAAS,EAAY,OAAO,EAMzF,IAAmB,QAAe,EAAgB,SAAS,CAAC,EAAY,MAAM,EAE9E,IAAU,QAAe,OAAO,EAAM,KAAK,CAAC,EAC5C,IAAc,QAAe,EAAQ,UAAU,QAAQ,EAAQ,UAAU,MAAM,EAE/E,IAAY,QAAe,EAA2B,EAAQ,OAAO,EAErE,IAAoB,QAAe,CAAC,iBAAiB,EAAU,MAAM,CAAC,EAEtE,IAAe,QAAe,EAAmC,EAAQ,OAAO,EAEhF,IAAe,QAAe,EAA2B,EAAQ,OAAO,EACxE,IAAkB,QAAe,EAA+B,EAAQ,OAAO,EAE/E,IAAW,QAAe,EAAuB,EAAQ,OAAO,EAChE,IAAc,QAAe,EAA2B,EAAQ,OAAO;SAE7E,QAAgB;AACd,GAAI,CAAC,EAAM,YAAY,CAAC,EAAe,EAAM,KAAK,IAChD,QAAQ,MAAM,4EAA4E;IAE5F,kBA3KA,EAyDW,EAAA,EAAA,EAAA,EAxDR,OAAK,EAAE,EAAA,MAAiB,EAAA,EAAA;oBAQlB;IALC,EAAA,SAAA,GAAA,EADR,EAMO,QAAA;;KAJJ,OAAK,EAAA,CAAA,+BAAkC,EAAA,kBAAiB,CAAA;QAGzD,EAA4B,EAAA,QAAA,eAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;IAItB,EAAA,SAAA,GAAA,EADR,EASO,QAAA;;KAPJ,OAAK,EAAA,CAAA,uBAA0B,EAAA,UAAS,CAAA;QAGzC,EAGE,EAAA,QAAA,QAAA,EADC,UAAW,OAAK,CAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;IAIrB,EA2BW,EAAA,EAAA,EAAA;KA1BT,KAAI;KACH,OAAK,EAAA,CAAA,0BAA6B,EAAA,MAAY,CAAA;;sBAWrC,CATV,EASU,EAAA,EAAA,EAAA;MARR,MAAK;MACJ,MAAM,EAAA;MACN,SAAS,EAAA;MACV,MAAK;MACL,IAAG;MACH,OAAM;;uBAEU,CAAA,EAAA,EAAb,EAAA,WAAU,EAAA,EAAA,CAAA,CAAA;;iCAIP,EAAA,YAAA,GAAA,EADR,EAWU,EAAA,EAAA,EAAA;;MATR,MAAK;MACJ,MAAM,EAAA;MACN,SAAS,EAAA;MACV,MAAK;MACL,MAAK;MACL,IAAG;MACH,OAAM;;uBAEQ,CAAA,EAAA,EAAX,EAAA,SAAQ,EAAA,EAAA,CAAA,CAAA;;;;;IAKP,EAAA,EAAc,CAAC,EAAA,EAAK,CAAC,KAAI,IAAA,GAAA,EADjC,EAKM,OAAA;;KAHH,OAAK,EAAE,EAAA,UAAS;QAEjB,EAAoB,EAAA,QAAA,OAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA"}
+{"version":3,"file":"empty-state.js","names":[],"sources":["../../../components/EmptyState/EmptyState.vue"],"sourcesContent":["<template>\n  <dt-stack\n    :class=\"emptyStateClasses\"\n  >\n    <span\n      v-if=\"showIllustration\"\n      :class=\"['d-empty-state__illustration', illustrationClass]\"\n      data-qa=\"dt-empty-state-illustration\"\n    >\n      <!-- @slot Slot for the illustration. Displays when size is 'lg' or 'md'. Overrides icon. -->\n      <slot name=\"illustration\" />\n    </span>\n\n    <span\n      v-if=\"showIcon\"\n      :class=\"['d-empty-state__icon', iconClass]\"\n      data-qa=\"dt-empty-state-icon\"\n    >\n      <!-- @slot Slot for the icon. Displayed if illustration is not provided. -->\n      <slot\n        name=\"icon\"\n        :icon-size=\"'800'\"\n      />\n    </span>\n\n    <dt-stack\n      gap=\"150\"\n      :class=\"['d-empty-state__content', contentClass]\"\n    >\n      <dt-text\n        kind=\"headline\"\n        :size=\"headlineSize\"\n        :density=\"headlineDensity\"\n        wrap=\"balance\"\n        as=\"div\"\n        class=\"d-empty-state__header-text\"\n      >\n        {{ headerText }}\n      </dt-text>\n\n      <dt-text\n        v-if=\"bodyText\"\n        kind=\"body\"\n        :size=\"bodySize\"\n        :density=\"bodyDensity\"\n        tone=\"secondary\"\n        wrap=\"balance\"\n        as=\"p\"\n        class=\"d-empty-state__body-text\"\n      >\n        {{ bodyText }}\n      </dt-text>\n    </dt-stack>\n\n    <div\n      v-if=\"hasSlotContent(slots.body)\"\n      :class=\"bodyClass\"\n      data-qa=\"dt-empty-state-body-slot\"\n    >\n      <slot name=\"body\" />\n    </div>\n  </dt-stack>\n</template>\n\n<script setup>\nimport { useSlots, computed, onMounted } from 'vue';\nimport { DtStack } from '@/components/Stack';\nimport { DtText } from '@/components/Text';\nimport { hasSlotContent } from '@/common/utils';\nimport { ordinalSizeValidator } from '@/common/validators';\nimport {\n  EMPTY_STATE_BODY_DENSITIES,\n  EMPTY_STATE_BODY_SIZES,\n  EMPTY_STATE_CONTENT_SIZE_MODIFIERS,\n  EMPTY_STATE_HEADLINE_DENSITIES,\n  EMPTY_STATE_HEADLINE_SIZES,\n  EMPTY_STATE_SIZE_MODIFIERS,\n} from './EmptyStateConstants.js';\n\ndefineOptions({\n  name: 'DtEmptyState',\n});\n\nconst slots = useSlots();\n\nconst props = defineProps({\n  /**\n    * The empty state size.\n    * @values 200, 300, 400\n    */\n  size: {\n    type: [String, Number],\n    default: 400,\n    validator: ordinalSizeValidator(EMPTY_STATE_SIZE_MODIFIERS),\n  },\n\n  /**\n    * Header text\n    * @type {String}\n    */\n  headerText: {\n    type: String,\n    required: true,\n  },\n\n  /**\n    * Body text\n    * @type {String}\n    */\n  bodyText: {\n    type: String,\n    default: null,\n  },\n\n  /**\n    * Additional class name for the illustration wrapper element.\n    */\n  illustrationClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n    * Additional class name for the icon wrapper element.\n    */\n  iconClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n    * Additional class name for the body slot wrapper element.\n    */\n  bodyClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n});\n\nconst hasIcon = computed(() => {\n  return hasSlotContent(slots.icon);\n});\nconst hasIllustration = computed(() => hasSlotContent(slots.illustration));\n\n/**\n * Icon will be shown in lg and md size only if illustration is not provided\n * Icon will always be shown in sm size\n */\nconst showIcon = computed(() => hasIcon.value && (!hasIllustration.value || isSmallSize.value));\n\n/**\n * Illustration will always be shown in lg and md size\n * Illustration will not be shown in sm size\n */\nconst showIllustration = computed(() => hasIllustration.value && !isSmallSize.value);\n\nconst sizeKey = computed(() => String(props.size));\nconst isSmallSize = computed(() => sizeKey.value === 'sm' || sizeKey.value === '200');\n\nconst sizeClass = computed(() => EMPTY_STATE_SIZE_MODIFIERS[sizeKey.value]);\n\nconst emptyStateClasses = computed(() => ['d-empty-state', sizeClass.value]);\n\nconst contentClass = computed(() => EMPTY_STATE_CONTENT_SIZE_MODIFIERS[sizeKey.value]);\n\nconst headlineSize = computed(() => EMPTY_STATE_HEADLINE_SIZES[sizeKey.value]);\nconst headlineDensity = computed(() => EMPTY_STATE_HEADLINE_DENSITIES[sizeKey.value]);\n\nconst bodySize = computed(() => EMPTY_STATE_BODY_SIZES[sizeKey.value]);\nconst bodyDensity = computed(() => EMPTY_STATE_BODY_DENSITIES[sizeKey.value]);\n\nonMounted(() => {\n  if (!props.bodyText && !hasSlotContent(slots.body)) {\n    console.error('DtEmptyState: You should provide either bodyText or content on body slot.');\n  }\n});\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmFA,IAAM,IAAQ,GAAU,EAElB,IAAQ,GAsDR,IAAU,QACP,EAAe,EAAM,KAAK,CACjC,EACI,IAAkB,QAAe,EAAe,EAAM,aAAa,CAAC,EAMpE,IAAW,QAAe,EAAQ,UAAU,CAAC,EAAgB,SAAS,EAAY,OAAO,EAMzF,IAAmB,QAAe,EAAgB,SAAS,CAAC,EAAY,MAAM,EAE9E,IAAU,QAAe,OAAO,EAAM,KAAK,CAAC,EAC5C,IAAc,QAAe,EAAQ,UAAU,QAAQ,EAAQ,UAAU,MAAM,EAE/E,IAAY,QAAe,EAA2B,EAAQ,OAAO,EAErE,IAAoB,QAAe,CAAC,iBAAiB,EAAU,MAAM,CAAC,EAEtE,IAAe,QAAe,EAAmC,EAAQ,OAAO,EAEhF,IAAe,QAAe,EAA2B,EAAQ,OAAO,EACxE,IAAkB,QAAe,EAA+B,EAAQ,OAAO,EAE/E,IAAW,QAAe,EAAuB,EAAQ,OAAO,EAChE,IAAc,QAAe,EAA2B,EAAQ,OAAO;SAE7E,QAAgB;AACd,GAAI,CAAC,EAAM,YAAY,CAAC,EAAe,EAAM,KAAK,IAChD,QAAQ,MAAM,4EAA4E;IAE5F,kBA9KA,EA4DW,EAAA,EAAA,EAAA,EA3DR,OAAK,EAAE,EAAA,MAAiB,EAAA,EAAA;oBASlB;IANC,EAAA,SAAA,GAAA,EADR,EAOO,QAAA;;KALJ,OAAK,EAAA,CAAA,+BAAkC,EAAA,kBAAiB,CAAA;KACzD,WAAQ;QAGR,EAA4B,EAAA,QAAA,eAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;IAItB,EAAA,SAAA,GAAA,EADR,EAUO,QAAA;;KARJ,OAAK,EAAA,CAAA,uBAA0B,EAAA,UAAS,CAAA;KACzC,WAAQ;QAGR,EAGE,EAAA,QAAA,QAAA,EADC,UAAW,OAAK,CAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;IAIrB,EA2BW,EAAA,EAAA,EAAA;KA1BT,KAAI;KACH,OAAK,EAAA,CAAA,0BAA6B,EAAA,MAAY,CAAA;;sBAWrC,CATV,EASU,EAAA,EAAA,EAAA;MARR,MAAK;MACJ,MAAM,EAAA;MACN,SAAS,EAAA;MACV,MAAK;MACL,IAAG;MACH,OAAM;;uBAEU,CAAA,EAAA,EAAb,EAAA,WAAU,EAAA,EAAA,CAAA,CAAA;;iCAIP,EAAA,YAAA,GAAA,EADR,EAWU,EAAA,EAAA,EAAA;;MATR,MAAK;MACJ,MAAM,EAAA;MACN,SAAS,EAAA;MACV,MAAK;MACL,MAAK;MACL,IAAG;MACH,OAAM;;uBAEQ,CAAA,EAAA,EAAX,EAAA,SAAQ,EAAA,EAAA,CAAA,CAAA;;;;;IAKP,EAAA,EAAc,CAAC,EAAA,EAAK,CAAC,KAAI,IAAA,GAAA,EADjC,EAMM,OAAA;;KAJH,OAAK,EAAE,EAAA,UAAS;KACjB,WAAQ;QAER,EAAoB,EAAA,QAAA,OAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA"}

package/dist/lib/keyboard-shortcut/keyboard-shortcut.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(`../text/text.cjs`);let n=require(`vue`),r=require(`@dialpad/dialtone-icons/vue`);var i={"{win}":r.DtIconLayoutGrid,"{arrow-right}":r.DtIconArrowRight,"{arrow-left}":r.DtIconArrowLeft,"{arrow-up}":r.DtIconArrowUp,"{arrow-down}":r.DtIconArrowDown,"{cmd}":r.DtIconCommand,"{opt}":r.DtIconOption},a={"{cmd}":`Command`,"{opt}":`Option`,"{win}":`Windows`,"{arrow-right}":`Right Arrow`,"{arrow-left}":`Left Arrow`,"{arrow-up}":`Up Arrow`,"{arrow-down}":`Down Arrow`,"{plus}":`plus`},o={ctrl:`Control`,alt:`Alt`,esc:`Escape`,del:`Delete`,ins:`Insert`,pgup:`Page Up`,pgdn:`Page Down`,num:`Number`,caps:`Caps Lock`},s={name:`DtKeyboardShortcut`,components:{DtIconLayoutGrid:r.DtIconLayoutGrid,DtIconArrowRight:r.DtIconArrowRight,DtIconArrowLeft:r.DtIconArrowLeft,DtIconArrowUp:r.DtIconArrowUp,DtIconArrowDown:r.DtIconArrowDown,DtIconCommand:r.DtIconCommand,DtIconOption:r.DtIconOption,DtIconPlus:r.DtIconPlus,DtText:t.default},props:{inverted:{type:Boolean,default:!1},shortcut:{type:String,required:!0},screenReaderText:{type:String,default:null}},data(){return{separator:/\+/gi}},computed:{icons(){return{...i,"{plus}":r.DtIconPlus}},shortcutWithSeparator(){return this.shortcut.replace(this.separator,`{plus}`)},formattedShortcut(){return Object.keys(i).reduce((e,t)=>e.replace(RegExp(`{`+t+`}`,`gi`),i[t]),this.shortcutWithSeparator)},formattedShortcutSplit(){let e=Object.keys(this.icons).join(`|`),t=RegExp(`(${e})`,`gi`);return this.formattedShortcut.split(t).filter(Boolean)},generatedScreenReaderText(){return this.formattedShortcutSplit.map(e=>{let t=e.trim();if(a[t])return a[t];let n=t.toLowerCase();return o[n]?o[n]:t}).filter(e=>e).join(` `)}}},c={class:`d-keyboard-shortcut--sr-only`},l=[`innerHTML`];function u(e,t,r,i,a,o){let s=(0,n.resolveComponent)(`dt-text`);return(0,n.openBlock)(),(0,n.createElementBlock)(`kbd`,{class:(0,n.normalizeClass)([`d-keyboard-shortcut`,{"d-keyboard-shortcut--inverted":r.inverted}])},[(0,n.createElementVNode)(`span`,c,(0,n.toDisplayString)(r.screenReaderText||o.generatedScreenReaderText),1),((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(o.formattedShortcutSplit,(e,t)=>((0,n.openBlock)(),(0,n.createElementBlock)(n.Fragment,null,[o.icons[e]?((0,n.openBlock)(),(0,n.createBlock)((0,n.resolveDynamicComponent)(o.icons[e]),{key:`icon-${t}-${e}`,size:`100`,"aria-hidden":`true`,class:(0,n.normalizeClass)([`d-keyboard-shortcut__icon`,{"d-keyboard-shortcut__icon--inverted":r.inverted}])},null,8,[`class`])):e.trim()?((0,n.openBlock)(),(0,n.createBlock)(s,{key:`text-${t}-${e}`,kind:`body`,size:200,numeric:``,density:400,tone:`tertiary`,"aria-hidden":`true`,class:(0,n.normalizeClass)([`d-keyboard-shortcut__item`,{"d-keyboard-shortcut__item--inverted":r.inverted}])},{default:(0,n.withCtx)(()=>[(0,n.createElementVNode)(`span`,{innerHTML:e},null,8,l)]),_:2},1032,[`class`])):(0,n.createCommentVNode)(``,!0)],64))),256))],2)}var d=e.t(s,[[`render`,u]]);exports.default=d;
+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(`../text/text.cjs`);let n=require(`vue`),r=require(`@dialpad/dialtone-icons/vue`);var i={"{win}":r.DtIconLayoutGrid,"{arrow-right}":r.DtIconArrowRight,"{arrow-left}":r.DtIconArrowLeft,"{arrow-up}":r.DtIconArrowUp,"{arrow-down}":r.DtIconArrowDown,"{cmd}":r.DtIconCommand,"{opt}":r.DtIconOption},a={"{cmd}":`Command`,"{opt}":`Option`,"{win}":`Windows`,"{arrow-right}":`Right Arrow`,"{arrow-left}":`Left Arrow`,"{arrow-up}":`Up Arrow`,"{arrow-down}":`Down Arrow`,"{plus}":`plus`},o={ctrl:`Control`,alt:`Alt`,esc:`Escape`,del:`Delete`,ins:`Insert`,pgup:`Page Up`,pgdn:`Page Down`,num:`Number`,caps:`Caps Lock`},s={name:`DtKeyboardShortcut`,components:{DtIconLayoutGrid:r.DtIconLayoutGrid,DtIconArrowRight:r.DtIconArrowRight,DtIconArrowLeft:r.DtIconArrowLeft,DtIconArrowUp:r.DtIconArrowUp,DtIconArrowDown:r.DtIconArrowDown,DtIconCommand:r.DtIconCommand,DtIconOption:r.DtIconOption,DtIconPlus:r.DtIconPlus,DtText:t.default},props:{inverted:{type:Boolean,default:!1},shortcut:{type:String,required:!0},screenReaderText:{type:String,default:null}},data(){return{separator:/\+/gi}},computed:{icons(){return{...i,"{plus}":r.DtIconPlus}},shortcutWithSeparator(){return this.shortcut.replace(this.separator,`{plus}`)},formattedShortcut(){return Object.keys(i).reduce((e,t)=>e.replace(RegExp(`{`+t+`}`,`gi`),i[t]),this.shortcutWithSeparator)},formattedShortcutSplit(){let e=Object.keys(this.icons).join(`|`),t=RegExp(`(${e})`,`gi`);return this.formattedShortcut.split(t).filter(Boolean)},generatedScreenReaderText(){return this.formattedShortcutSplit.map(e=>{let t=e.trim();if(a[t])return a[t];let n=t.toLowerCase();return o[n]?o[n]:t}).filter(e=>e).join(` `)}}},c={class:`d-keyboard-shortcut--sr-only`,"data-qa":`dt-keyboard-shortcut-sr-text`},l=[`innerHTML`];function u(e,t,r,i,a,o){let s=(0,n.resolveComponent)(`dt-text`);return(0,n.openBlock)(),(0,n.createElementBlock)(`kbd`,{"data-qa":`dt-keyboard-shortcut`,class:(0,n.normalizeClass)([`d-keyboard-shortcut`,{"d-keyboard-shortcut--inverted":r.inverted}])},[(0,n.createElementVNode)(`span`,c,(0,n.toDisplayString)(r.screenReaderText||o.generatedScreenReaderText),1),((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(o.formattedShortcutSplit,(e,t)=>((0,n.openBlock)(),(0,n.createElementBlock)(n.Fragment,null,[o.icons[e]?((0,n.openBlock)(),(0,n.createBlock)((0,n.resolveDynamicComponent)(o.icons[e]),{key:`icon-${t}-${e}`,size:`100`,"aria-hidden":`true`,class:(0,n.normalizeClass)([`d-keyboard-shortcut__icon`,{"d-keyboard-shortcut__icon--inverted":r.inverted}])},null,8,[`class`])):e.trim()?((0,n.openBlock)(),(0,n.createBlock)(s,{key:`text-${t}-${e}`,kind:`body`,size:200,numeric:``,density:400,tone:`tertiary`,"aria-hidden":`true`,class:(0,n.normalizeClass)([`d-keyboard-shortcut__item`,{"d-keyboard-shortcut__item--inverted":r.inverted}])},{default:(0,n.withCtx)(()=>[(0,n.createElementVNode)(`span`,{innerHTML:e},null,8,l)]),_:2},1032,[`class`])):(0,n.createCommentVNode)(``,!0)],64))),256))],2)}var d=e.t(s,[[`render`,u]]);exports.default=d;
 //# sourceMappingURL=keyboard-shortcut.cjs.map

package/dist/lib/keyboard-shortcut/keyboard-shortcut.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard-shortcut.cjs","names":[],"sources":["../../../components/KeyboardShortcut/KeyboardShortcut.vue"],"sourcesContent":["<template>\n  <kbd\n    :class=\"[\n      'd-keyboard-shortcut',\n      { 'd-keyboard-shortcut--inverted': inverted },\n    ]\"\n  >\n    <span class=\"d-keyboard-shortcut--sr-only\">\n      {{ screenReaderText || generatedScreenReaderText }}\n    </span>\n    <template\n      v-for=\"(item, i) in formattedShortcutSplit\"\n    >\n      <component\n        :is=\"icons[item]\"\n        v-if=\"icons[item]\"\n        :key=\"`icon-${i}-${item}`\"\n        size=\"100\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__icon',\n          { 'd-keyboard-shortcut__icon--inverted': inverted },\n        ]\"\n      />\n      <dt-text\n        v-else-if=\"item.trim()\"\n        :key=\"`text-${i}-${item}`\"\n        kind=\"body\"\n        :size=\"200\"\n        numeric\n        :density=\"400\"\n        tone=\"tertiary\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__item',\n          { 'd-keyboard-shortcut__item--inverted': inverted },\n        ]\"\n      >\n        <!-- eslint-disable-next-line vue/no-v-html -->\n        <span v-html=\"item\" />\n      </dt-text>\n    </template>\n  </kbd>\n</template>\n\n<script>\nimport {\n  DtIconLayoutGrid,\n  DtIconArrowRight,\n  DtIconArrowLeft,\n  DtIconArrowUp,\n  DtIconArrowDown,\n  DtIconCommand,\n  DtIconOption,\n  DtIconPlus,\n} from '@dialpad/dialtone-icons/vue';\nimport { DtText } from '@/components/Text';\n\nconst SHORTCUTS_ICON_ALIASES = {\n  '{win}': DtIconLayoutGrid,\n  '{arrow-right}': DtIconArrowRight,\n  '{arrow-left}': DtIconArrowLeft,\n  '{arrow-up}': DtIconArrowUp,\n  '{arrow-down}': DtIconArrowDown,\n  '{cmd}': DtIconCommand,\n  '{opt}': DtIconOption,\n};\n\n// Mapping of icon aliases to readable text for accessibility\nconst ICON_ALIAS_TO_TEXT = {\n  '{cmd}': 'Command',\n  '{opt}': 'Option',\n  '{win}': 'Windows',\n  '{arrow-right}': 'Right Arrow',\n  '{arrow-left}': 'Left Arrow',\n  '{arrow-up}': 'Up Arrow',\n  '{arrow-down}': 'Down Arrow',\n  '{plus}': 'plus',\n};\n\n// Mapping of common key abbreviations to full names for accessibility\nconst KEY_ABBREVIATIONS = {\n  'ctrl': 'Control',\n  'alt': 'Alt',\n  'esc': 'Escape',\n  'del': 'Delete',\n  'ins': 'Insert',\n  'pgup': 'Page Up',\n  'pgdn': 'Page Down',\n  'num': 'Number',\n  'caps': 'Caps Lock',\n};\n\n/**\n * This component displays a visual representation of a keyboard shortcut to the user.\n * @see https://dialtone.dialpad.com/components/keyboard_shortcut.html\n */\nexport default {\n  name: 'DtKeyboardShortcut',\n\n  components: {\n    DtIconLayoutGrid,\n    DtIconArrowRight,\n    DtIconArrowLeft,\n    DtIconArrowUp,\n    DtIconArrowDown,\n    DtIconCommand,\n    DtIconOption,\n    DtIconPlus,\n    DtText,\n  },\n\n  props: {\n    /**\n     * @deprecated Use v-dt-mode instead.\n     * If true, applies inverted styles.\n     * @values true, false\n     * @deprecated Use v-dt-mode directive instead.\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Include any of these tokens in your string to render the corresponding symbol:\n     * {cmd} {opt} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}\n     */\n    shortcut: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Optional text to override the auto-generated accessible text for assistive technology.\n     * If not provided, accessible text will be automatically generated from the shortcut.\n     */\n    screenReaderText: {\n      type: String,\n      default: null,\n    },\n  },\n\n  data () {\n    return {\n      separator: /\\+/gi,\n    };\n  },\n\n  computed: {\n    icons () {\n      return {\n        ...SHORTCUTS_ICON_ALIASES,\n        '{plus}': DtIconPlus,\n      };\n    },\n\n    shortcutWithSeparator () {\n      return this.shortcut.replace(this.separator, '{plus}');\n    },\n\n    formattedShortcut () {\n      return Object.keys(SHORTCUTS_ICON_ALIASES).reduce((result, key) => {\n        return result.replace(new RegExp('{' + key + '}', 'gi'), SHORTCUTS_ICON_ALIASES[key]);\n      }, this.shortcutWithSeparator);\n    },\n\n    // Splits any icon based aliases into their own array items.\n    formattedShortcutSplit () {\n      const iconAliasString = Object.keys(this.icons).join('|');\n\n      /*\n         The regexp splits a given string with icon alias and is filtered by empty strings after:\n         if {win} is our delimiter AKA shortcut icon alias\n         '{win} + D K + {win}' returned value will be [{win}, ' ', '{plus}', ' D K ', '{plus}', ' ', {win}]\n      */\n      const regex = new RegExp(`(${iconAliasString})`, 'gi');\n      return this.formattedShortcut.split(regex).filter(Boolean);\n    },\n\n    // Generates accessible text for the keyboard shortcut\n    generatedScreenReaderText () {\n      return this.formattedShortcutSplit\n        .map(item => {\n          const trimmedItem = item.trim();\n\n          // Convert icon aliases to readable text\n          if (ICON_ALIAS_TO_TEXT[trimmedItem]) {\n            return ICON_ALIAS_TO_TEXT[trimmedItem];\n          }\n\n          // Convert key abbreviations to full names (case-insensitive)\n          const lowerItem = trimmedItem.toLowerCase();\n          if (KEY_ABBREVIATIONS[lowerItem]) {\n            return KEY_ABBREVIATIONS[lowerItem];\n          }\n\n          // Return the key as-is if it's not an alias or abbreviation\n          return trimmedItem;\n        })\n        .filter(item => item) // Remove empty strings\n        .join(' ');\n    },\n  },\n};\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"keyboard-shortcut.cjs","names":[],"sources":["../../../components/KeyboardShortcut/KeyboardShortcut.vue"],"sourcesContent":["<template>\n  <kbd\n    data-qa=\"dt-keyboard-shortcut\"\n    :class=\"[\n      'd-keyboard-shortcut',\n      { 'd-keyboard-shortcut--inverted': inverted },\n    ]\"\n  >\n    <span\n      class=\"d-keyboard-shortcut--sr-only\"\n      data-qa=\"dt-keyboard-shortcut-sr-text\"\n    >\n      {{ screenReaderText || generatedScreenReaderText }}\n    </span>\n    <template\n      v-for=\"(item, i) in formattedShortcutSplit\"\n    >\n      <component\n        :is=\"icons[item]\"\n        v-if=\"icons[item]\"\n        :key=\"`icon-${i}-${item}`\"\n        size=\"100\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__icon',\n          { 'd-keyboard-shortcut__icon--inverted': inverted },\n        ]\"\n      />\n      <dt-text\n        v-else-if=\"item.trim()\"\n        :key=\"`text-${i}-${item}`\"\n        kind=\"body\"\n        :size=\"200\"\n        numeric\n        :density=\"400\"\n        tone=\"tertiary\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__item',\n          { 'd-keyboard-shortcut__item--inverted': inverted },\n        ]\"\n      >\n        <!-- eslint-disable-next-line vue/no-v-html -->\n        <span v-html=\"item\" />\n      </dt-text>\n    </template>\n  </kbd>\n</template>\n\n<script>\nimport {\n  DtIconLayoutGrid,\n  DtIconArrowRight,\n  DtIconArrowLeft,\n  DtIconArrowUp,\n  DtIconArrowDown,\n  DtIconCommand,\n  DtIconOption,\n  DtIconPlus,\n} from '@dialpad/dialtone-icons/vue';\nimport { DtText } from '@/components/Text';\n\nconst SHORTCUTS_ICON_ALIASES = {\n  '{win}': DtIconLayoutGrid,\n  '{arrow-right}': DtIconArrowRight,\n  '{arrow-left}': DtIconArrowLeft,\n  '{arrow-up}': DtIconArrowUp,\n  '{arrow-down}': DtIconArrowDown,\n  '{cmd}': DtIconCommand,\n  '{opt}': DtIconOption,\n};\n\n// Mapping of icon aliases to readable text for accessibility\nconst ICON_ALIAS_TO_TEXT = {\n  '{cmd}': 'Command',\n  '{opt}': 'Option',\n  '{win}': 'Windows',\n  '{arrow-right}': 'Right Arrow',\n  '{arrow-left}': 'Left Arrow',\n  '{arrow-up}': 'Up Arrow',\n  '{arrow-down}': 'Down Arrow',\n  '{plus}': 'plus',\n};\n\n// Mapping of common key abbreviations to full names for accessibility\nconst KEY_ABBREVIATIONS = {\n  'ctrl': 'Control',\n  'alt': 'Alt',\n  'esc': 'Escape',\n  'del': 'Delete',\n  'ins': 'Insert',\n  'pgup': 'Page Up',\n  'pgdn': 'Page Down',\n  'num': 'Number',\n  'caps': 'Caps Lock',\n};\n\n/**\n * This component displays a visual representation of a keyboard shortcut to the user.\n * @see https://dialtone.dialpad.com/components/keyboard_shortcut.html\n */\nexport default {\n  name: 'DtKeyboardShortcut',\n\n  components: {\n    DtIconLayoutGrid,\n    DtIconArrowRight,\n    DtIconArrowLeft,\n    DtIconArrowUp,\n    DtIconArrowDown,\n    DtIconCommand,\n    DtIconOption,\n    DtIconPlus,\n    DtText,\n  },\n\n  props: {\n    /**\n     * @deprecated Use v-dt-mode instead.\n     * If true, applies inverted styles.\n     * @values true, false\n     * @deprecated Use v-dt-mode directive instead.\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Include any of these tokens in your string to render the corresponding symbol:\n     * {cmd} {opt} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}\n     */\n    shortcut: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Optional text to override the auto-generated accessible text for assistive technology.\n     * If not provided, accessible text will be automatically generated from the shortcut.\n     */\n    screenReaderText: {\n      type: String,\n      default: null,\n    },\n  },\n\n  data () {\n    return {\n      separator: /\\+/gi,\n    };\n  },\n\n  computed: {\n    icons () {\n      return {\n        ...SHORTCUTS_ICON_ALIASES,\n        '{plus}': DtIconPlus,\n      };\n    },\n\n    shortcutWithSeparator () {\n      return this.shortcut.replace(this.separator, '{plus}');\n    },\n\n    formattedShortcut () {\n      return Object.keys(SHORTCUTS_ICON_ALIASES).reduce((result, key) => {\n        return result.replace(new RegExp('{' + key + '}', 'gi'), SHORTCUTS_ICON_ALIASES[key]);\n      }, this.shortcutWithSeparator);\n    },\n\n    // Splits any icon based aliases into their own array items.\n    formattedShortcutSplit () {\n      const iconAliasString = Object.keys(this.icons).join('|');\n\n      /*\n         The regexp splits a given string with icon alias and is filtered by empty strings after:\n         if {win} is our delimiter AKA shortcut icon alias\n         '{win} + D K + {win}' returned value will be [{win}, ' ', '{plus}', ' D K ', '{plus}', ' ', {win}]\n      */\n      const regex = new RegExp(`(${iconAliasString})`, 'gi');\n      return this.formattedShortcut.split(regex).filter(Boolean);\n    },\n\n    // Generates accessible text for the keyboard shortcut\n    generatedScreenReaderText () {\n      return this.formattedShortcutSplit\n        .map(item => {\n          const trimmedItem = item.trim();\n\n          // Convert icon aliases to readable text\n          if (ICON_ALIAS_TO_TEXT[trimmedItem]) {\n            return ICON_ALIAS_TO_TEXT[trimmedItem];\n          }\n\n          // Convert key abbreviations to full names (case-insensitive)\n          const lowerItem = trimmedItem.toLowerCase();\n          if (KEY_ABBREVIATIONS[lowerItem]) {\n            return KEY_ABBREVIATIONS[lowerItem];\n          }\n\n          // Return the key as-is if it's not an alias or abbreviation\n          return trimmedItem;\n        })\n        .filter(item => item) // Remove empty strings\n        .join(' ');\n    },\n  },\n};\n</script>\n"],"mappings":"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"}

package/dist/lib/keyboard-shortcut/keyboard-shortcut.js

@@ -86,10 +86,16 @@ var S = {
 			}).filter((e) => e).join(" ");
 		}
 	}
-}, E = { class: "d-keyboard-shortcut--sr-only" }, D = ["innerHTML"];
+}, E = {
+	class: "d-keyboard-shortcut--sr-only",
+	"data-qa": "dt-keyboard-shortcut-sr-text"
+}, D = ["innerHTML"];
 function O(e, t, m, h, g, _) {
 	let v = u("dt-text");
-	return c(), a("kbd", { class: s(["d-keyboard-shortcut", { "d-keyboard-shortcut--inverted": m.inverted }]) }, [o("span", E, f(m.screenReaderText || _.generatedScreenReaderText), 1), (c(!0), a(n, null, l(_.formattedShortcutSplit, (e, t) => (c(), a(n, null, [_.icons[e] ? (c(), r(d(_.icons[e]), {
+	return c(), a("kbd", {
+		"data-qa": "dt-keyboard-shortcut",
+		class: s(["d-keyboard-shortcut", { "d-keyboard-shortcut--inverted": m.inverted }])
+	}, [o("span", E, f(m.screenReaderText || _.generatedScreenReaderText), 1), (c(!0), a(n, null, l(_.formattedShortcutSplit, (e, t) => (c(), a(n, null, [_.icons[e] ? (c(), r(d(_.icons[e]), {
 		key: `icon-${t}-${e}`,
 		size: "100",
 		"aria-hidden": "true",

package/dist/lib/keyboard-shortcut/keyboard-shortcut.js.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard-shortcut.js","names":[],"sources":["../../../components/KeyboardShortcut/KeyboardShortcut.vue"],"sourcesContent":["<template>\n  <kbd\n    :class=\"[\n      'd-keyboard-shortcut',\n      { 'd-keyboard-shortcut--inverted': inverted },\n    ]\"\n  >\n    <span class=\"d-keyboard-shortcut--sr-only\">\n      {{ screenReaderText || generatedScreenReaderText }}\n    </span>\n    <template\n      v-for=\"(item, i) in formattedShortcutSplit\"\n    >\n      <component\n        :is=\"icons[item]\"\n        v-if=\"icons[item]\"\n        :key=\"`icon-${i}-${item}`\"\n        size=\"100\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__icon',\n          { 'd-keyboard-shortcut__icon--inverted': inverted },\n        ]\"\n      />\n      <dt-text\n        v-else-if=\"item.trim()\"\n        :key=\"`text-${i}-${item}`\"\n        kind=\"body\"\n        :size=\"200\"\n        numeric\n        :density=\"400\"\n        tone=\"tertiary\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__item',\n          { 'd-keyboard-shortcut__item--inverted': inverted },\n        ]\"\n      >\n        <!-- eslint-disable-next-line vue/no-v-html -->\n        <span v-html=\"item\" />\n      </dt-text>\n    </template>\n  </kbd>\n</template>\n\n<script>\nimport {\n  DtIconLayoutGrid,\n  DtIconArrowRight,\n  DtIconArrowLeft,\n  DtIconArrowUp,\n  DtIconArrowDown,\n  DtIconCommand,\n  DtIconOption,\n  DtIconPlus,\n} from '@dialpad/dialtone-icons/vue';\nimport { DtText } from '@/components/Text';\n\nconst SHORTCUTS_ICON_ALIASES = {\n  '{win}': DtIconLayoutGrid,\n  '{arrow-right}': DtIconArrowRight,\n  '{arrow-left}': DtIconArrowLeft,\n  '{arrow-up}': DtIconArrowUp,\n  '{arrow-down}': DtIconArrowDown,\n  '{cmd}': DtIconCommand,\n  '{opt}': DtIconOption,\n};\n\n// Mapping of icon aliases to readable text for accessibility\nconst ICON_ALIAS_TO_TEXT = {\n  '{cmd}': 'Command',\n  '{opt}': 'Option',\n  '{win}': 'Windows',\n  '{arrow-right}': 'Right Arrow',\n  '{arrow-left}': 'Left Arrow',\n  '{arrow-up}': 'Up Arrow',\n  '{arrow-down}': 'Down Arrow',\n  '{plus}': 'plus',\n};\n\n// Mapping of common key abbreviations to full names for accessibility\nconst KEY_ABBREVIATIONS = {\n  'ctrl': 'Control',\n  'alt': 'Alt',\n  'esc': 'Escape',\n  'del': 'Delete',\n  'ins': 'Insert',\n  'pgup': 'Page Up',\n  'pgdn': 'Page Down',\n  'num': 'Number',\n  'caps': 'Caps Lock',\n};\n\n/**\n * This component displays a visual representation of a keyboard shortcut to the user.\n * @see https://dialtone.dialpad.com/components/keyboard_shortcut.html\n */\nexport default {\n  name: 'DtKeyboardShortcut',\n\n  components: {\n    DtIconLayoutGrid,\n    DtIconArrowRight,\n    DtIconArrowLeft,\n    DtIconArrowUp,\n    DtIconArrowDown,\n    DtIconCommand,\n    DtIconOption,\n    DtIconPlus,\n    DtText,\n  },\n\n  props: {\n    /**\n     * @deprecated Use v-dt-mode instead.\n     * If true, applies inverted styles.\n     * @values true, false\n     * @deprecated Use v-dt-mode directive instead.\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Include any of these tokens in your string to render the corresponding symbol:\n     * {cmd} {opt} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}\n     */\n    shortcut: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Optional text to override the auto-generated accessible text for assistive technology.\n     * If not provided, accessible text will be automatically generated from the shortcut.\n     */\n    screenReaderText: {\n      type: String,\n      default: null,\n    },\n  },\n\n  data () {\n    return {\n      separator: /\\+/gi,\n    };\n  },\n\n  computed: {\n    icons () {\n      return {\n        ...SHORTCUTS_ICON_ALIASES,\n        '{plus}': DtIconPlus,\n      };\n    },\n\n    shortcutWithSeparator () {\n      return this.shortcut.replace(this.separator, '{plus}');\n    },\n\n    formattedShortcut () {\n      return Object.keys(SHORTCUTS_ICON_ALIASES).reduce((result, key) => {\n        return result.replace(new RegExp('{' + key + '}', 'gi'), SHORTCUTS_ICON_ALIASES[key]);\n      }, this.shortcutWithSeparator);\n    },\n\n    // Splits any icon based aliases into their own array items.\n    formattedShortcutSplit () {\n      const iconAliasString = Object.keys(this.icons).join('|');\n\n      /*\n         The regexp splits a given string with icon alias and is filtered by empty strings after:\n         if {win} is our delimiter AKA shortcut icon alias\n         '{win} + D K + {win}' returned value will be [{win}, ' ', '{plus}', ' D K ', '{plus}', ' ', {win}]\n      */\n      const regex = new RegExp(`(${iconAliasString})`, 'gi');\n      return this.formattedShortcut.split(regex).filter(Boolean);\n    },\n\n    // Generates accessible text for the keyboard shortcut\n    generatedScreenReaderText () {\n      return this.formattedShortcutSplit\n        .map(item => {\n          const trimmedItem = item.trim();\n\n          // Convert icon aliases to readable text\n          if (ICON_ALIAS_TO_TEXT[trimmedItem]) {\n            return ICON_ALIAS_TO_TEXT[trimmedItem];\n          }\n\n          // Convert key abbreviations to full names (case-insensitive)\n          const lowerItem = trimmedItem.toLowerCase();\n          if (KEY_ABBREVIATIONS[lowerItem]) {\n            return KEY_ABBREVIATIONS[lowerItem];\n          }\n\n          // Return the key as-is if it's not an alias or abbreviation\n          return trimmedItem;\n        })\n        .filter(item => item) // Remove empty strings\n        .join(' ');\n    },\n  },\n};\n</script>\n"],"mappings":";;;;;AA0DA,IAAM,IAAyB;CAC7B,SAAS;CACT,iBAAiB;CACjB,gBAAgB;CAChB,cAAc;CACd,gBAAgB;CAChB,SAAS;CACT,SAAS;CACV,EAGK,IAAqB;CACzB,SAAS;CACT,SAAS;CACT,SAAS;CACT,iBAAiB;CACjB,gBAAgB;CAChB,cAAc;CACd,gBAAgB;CAChB,UAAU;CACX,EAGK,IAAoB;CACxB,MAAQ;CACR,KAAO;CACP,KAAO;CACP,KAAO;CACP,KAAO;CACP,MAAQ;CACR,MAAQ;CACR,KAAO;CACP,MAAQ;CACT,EAMI,IAAU;CACb,MAAM;CAEN,YAAY;EACV;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,QAAA;EACD;CAED,OAAO;EAOL,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAMD,UAAU;GACR,MAAM;GACN,UAAU;GACX;EAMD,kBAAkB;GAChB,MAAM;GACN,SAAS;GACV;EACF;CAED,OAAQ;AACN,SAAO,EACL,WAAW,QACZ;;CAGH,UAAU;EACR,QAAS;AACP,UAAO;IACL,GAAG;IACH,UAAU;IACX;;EAGH,wBAAyB;AACvB,UAAO,KAAK,SAAS,QAAQ,KAAK,WAAW,SAAS;;EAGxD,oBAAqB;AACnB,UAAO,OAAO,KAAK,EAAuB,CAAC,QAAQ,GAAQ,MAClD,EAAO,QAAY,OAAO,MAAM,IAAM,KAAK,KAAK,EAAE,EAAuB,GAAK,EACpF,KAAK,sBAAsB;;EAIhC,yBAA0B;GACxB,IAAM,IAAkB,OAAO,KAAK,KAAK,MAAM,CAAC,KAAK,IAAI,EAOnD,IAAY,OAAO,IAAI,EAAgB,IAAI,KAAK;AACtD,UAAO,KAAK,kBAAkB,MAAM,EAAM,CAAC,OAAO,QAAQ;;EAI5D,4BAA6B;AAC3B,UAAO,KAAK,uBACT,KAAI,MAAQ;IACX,IAAM,IAAc,EAAK,MAAM;AAG/B,QAAI,EAAmB,GACrB,QAAO,EAAmB;IAI5B,IAAM,IAAY,EAAY,aAAa;AAM3C,WALI,EAAkB,KACb,EAAkB,KAIpB;KACR,CACA,QAAO,MAAQ,EAAI,CACnB,KAAK,IAAI;;EAEf;CACF,QArMS,OAAM,gCAA8B;;;aAN5C,EAyCM,OAAA,EAxCH,OAAK,EAAA,CAAA,uBAAA,EAAA,iCAA0E,EAAA,UAAQ,CAAA,CAAA,EAAA,EAAA,CAKxF,EAEO,QAFP,GAEO,EADF,EAAA,oBAAoB,EAAA,0BAAyB,EAAA,EAAA,GAAA,EAAA,GAAA,EAElD,EA+BW,GAAA,MAAA,EA9BW,EAAA,yBAAZ,GAAM,wBAIN,EAAA,MAAM,MAAA,GAAA,EAFd,EAUE,EATK,EAAA,MAAM,GAAI,EAAA;EAEd,KAAG,QAAU,EAAC,GAAI;EACnB,MAAK;EACL,eAAY;EACX,OAAK,EAAA,CAAA,6BAAA,EAAA,uCAA8F,EAAA,UAAQ,CAAA,CAAA;2BAMjG,EAAK,MAAI,IAAA,GAAA,EADtB,EAgBU,GAAA;EAdP,KAAG,QAAU,EAAC,GAAI;EACnB,MAAK;EACJ,MAAM;EACP,SAAA;EACC,SAAS;EACV,MAAK;EACL,eAAY;EACX,OAAK,EAAA,CAAA,6BAAA,EAAA,uCAA8F,EAAA,UAAQ,CAAA,CAAA;;mBAMtF,CAAtB,EAAsB,QAAA,EAAhB,WAAQ,GAAI,EAAA,MAAA,GAAA,EAAA,CAAA,CAAA"}
+{"version":3,"file":"keyboard-shortcut.js","names":[],"sources":["../../../components/KeyboardShortcut/KeyboardShortcut.vue"],"sourcesContent":["<template>\n  <kbd\n    data-qa=\"dt-keyboard-shortcut\"\n    :class=\"[\n      'd-keyboard-shortcut',\n      { 'd-keyboard-shortcut--inverted': inverted },\n    ]\"\n  >\n    <span\n      class=\"d-keyboard-shortcut--sr-only\"\n      data-qa=\"dt-keyboard-shortcut-sr-text\"\n    >\n      {{ screenReaderText || generatedScreenReaderText }}\n    </span>\n    <template\n      v-for=\"(item, i) in formattedShortcutSplit\"\n    >\n      <component\n        :is=\"icons[item]\"\n        v-if=\"icons[item]\"\n        :key=\"`icon-${i}-${item}`\"\n        size=\"100\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__icon',\n          { 'd-keyboard-shortcut__icon--inverted': inverted },\n        ]\"\n      />\n      <dt-text\n        v-else-if=\"item.trim()\"\n        :key=\"`text-${i}-${item}`\"\n        kind=\"body\"\n        :size=\"200\"\n        numeric\n        :density=\"400\"\n        tone=\"tertiary\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__item',\n          { 'd-keyboard-shortcut__item--inverted': inverted },\n        ]\"\n      >\n        <!-- eslint-disable-next-line vue/no-v-html -->\n        <span v-html=\"item\" />\n      </dt-text>\n    </template>\n  </kbd>\n</template>\n\n<script>\nimport {\n  DtIconLayoutGrid,\n  DtIconArrowRight,\n  DtIconArrowLeft,\n  DtIconArrowUp,\n  DtIconArrowDown,\n  DtIconCommand,\n  DtIconOption,\n  DtIconPlus,\n} from '@dialpad/dialtone-icons/vue';\nimport { DtText } from '@/components/Text';\n\nconst SHORTCUTS_ICON_ALIASES = {\n  '{win}': DtIconLayoutGrid,\n  '{arrow-right}': DtIconArrowRight,\n  '{arrow-left}': DtIconArrowLeft,\n  '{arrow-up}': DtIconArrowUp,\n  '{arrow-down}': DtIconArrowDown,\n  '{cmd}': DtIconCommand,\n  '{opt}': DtIconOption,\n};\n\n// Mapping of icon aliases to readable text for accessibility\nconst ICON_ALIAS_TO_TEXT = {\n  '{cmd}': 'Command',\n  '{opt}': 'Option',\n  '{win}': 'Windows',\n  '{arrow-right}': 'Right Arrow',\n  '{arrow-left}': 'Left Arrow',\n  '{arrow-up}': 'Up Arrow',\n  '{arrow-down}': 'Down Arrow',\n  '{plus}': 'plus',\n};\n\n// Mapping of common key abbreviations to full names for accessibility\nconst KEY_ABBREVIATIONS = {\n  'ctrl': 'Control',\n  'alt': 'Alt',\n  'esc': 'Escape',\n  'del': 'Delete',\n  'ins': 'Insert',\n  'pgup': 'Page Up',\n  'pgdn': 'Page Down',\n  'num': 'Number',\n  'caps': 'Caps Lock',\n};\n\n/**\n * This component displays a visual representation of a keyboard shortcut to the user.\n * @see https://dialtone.dialpad.com/components/keyboard_shortcut.html\n */\nexport default {\n  name: 'DtKeyboardShortcut',\n\n  components: {\n    DtIconLayoutGrid,\n    DtIconArrowRight,\n    DtIconArrowLeft,\n    DtIconArrowUp,\n    DtIconArrowDown,\n    DtIconCommand,\n    DtIconOption,\n    DtIconPlus,\n    DtText,\n  },\n\n  props: {\n    /**\n     * @deprecated Use v-dt-mode instead.\n     * If true, applies inverted styles.\n     * @values true, false\n     * @deprecated Use v-dt-mode directive instead.\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Include any of these tokens in your string to render the corresponding symbol:\n     * {cmd} {opt} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}\n     */\n    shortcut: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Optional text to override the auto-generated accessible text for assistive technology.\n     * If not provided, accessible text will be automatically generated from the shortcut.\n     */\n    screenReaderText: {\n      type: String,\n      default: null,\n    },\n  },\n\n  data () {\n    return {\n      separator: /\\+/gi,\n    };\n  },\n\n  computed: {\n    icons () {\n      return {\n        ...SHORTCUTS_ICON_ALIASES,\n        '{plus}': DtIconPlus,\n      };\n    },\n\n    shortcutWithSeparator () {\n      return this.shortcut.replace(this.separator, '{plus}');\n    },\n\n    formattedShortcut () {\n      return Object.keys(SHORTCUTS_ICON_ALIASES).reduce((result, key) => {\n        return result.replace(new RegExp('{' + key + '}', 'gi'), SHORTCUTS_ICON_ALIASES[key]);\n      }, this.shortcutWithSeparator);\n    },\n\n    // Splits any icon based aliases into their own array items.\n    formattedShortcutSplit () {\n      const iconAliasString = Object.keys(this.icons).join('|');\n\n      /*\n         The regexp splits a given string with icon alias and is filtered by empty strings after:\n         if {win} is our delimiter AKA shortcut icon alias\n         '{win} + D K + {win}' returned value will be [{win}, ' ', '{plus}', ' D K ', '{plus}', ' ', {win}]\n      */\n      const regex = new RegExp(`(${iconAliasString})`, 'gi');\n      return this.formattedShortcut.split(regex).filter(Boolean);\n    },\n\n    // Generates accessible text for the keyboard shortcut\n    generatedScreenReaderText () {\n      return this.formattedShortcutSplit\n        .map(item => {\n          const trimmedItem = item.trim();\n\n          // Convert icon aliases to readable text\n          if (ICON_ALIAS_TO_TEXT[trimmedItem]) {\n            return ICON_ALIAS_TO_TEXT[trimmedItem];\n          }\n\n          // Convert key abbreviations to full names (case-insensitive)\n          const lowerItem = trimmedItem.toLowerCase();\n          if (KEY_ABBREVIATIONS[lowerItem]) {\n            return KEY_ABBREVIATIONS[lowerItem];\n          }\n\n          // Return the key as-is if it's not an alias or abbreviation\n          return trimmedItem;\n        })\n        .filter(item => item) // Remove empty strings\n        .join(' ');\n    },\n  },\n};\n</script>\n"],"mappings":";;;;;AA8DA,IAAM,IAAyB;CAC7B,SAAS;CACT,iBAAiB;CACjB,gBAAgB;CAChB,cAAc;CACd,gBAAgB;CAChB,SAAS;CACT,SAAS;CACV,EAGK,IAAqB;CACzB,SAAS;CACT,SAAS;CACT,SAAS;CACT,iBAAiB;CACjB,gBAAgB;CAChB,cAAc;CACd,gBAAgB;CAChB,UAAU;CACX,EAGK,IAAoB;CACxB,MAAQ;CACR,KAAO;CACP,KAAO;CACP,KAAO;CACP,KAAO;CACP,MAAQ;CACR,MAAQ;CACR,KAAO;CACP,MAAQ;CACT,EAMI,IAAU;CACb,MAAM;CAEN,YAAY;EACV;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,QAAA;EACD;CAED,OAAO;EAOL,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAMD,UAAU;GACR,MAAM;GACN,UAAU;GACX;EAMD,kBAAkB;GAChB,MAAM;GACN,SAAS;GACV;EACF;CAED,OAAQ;AACN,SAAO,EACL,WAAW,QACZ;;CAGH,UAAU;EACR,QAAS;AACP,UAAO;IACL,GAAG;IACH,UAAU;IACX;;EAGH,wBAAyB;AACvB,UAAO,KAAK,SAAS,QAAQ,KAAK,WAAW,SAAS;;EAGxD,oBAAqB;AACnB,UAAO,OAAO,KAAK,EAAuB,CAAC,QAAQ,GAAQ,MAClD,EAAO,QAAY,OAAO,MAAM,IAAM,KAAK,KAAK,EAAE,EAAuB,GAAK,EACpF,KAAK,sBAAsB;;EAIhC,yBAA0B;GACxB,IAAM,IAAkB,OAAO,KAAK,KAAK,MAAM,CAAC,KAAK,IAAI,EAOnD,IAAY,OAAO,IAAI,EAAgB,IAAI,KAAK;AACtD,UAAO,KAAK,kBAAkB,MAAM,EAAM,CAAC,OAAO,QAAQ;;EAI5D,4BAA6B;AAC3B,UAAO,KAAK,uBACT,KAAI,MAAQ;IACX,IAAM,IAAc,EAAK,MAAM;AAG/B,QAAI,EAAmB,GACrB,QAAO,EAAmB;IAI5B,IAAM,IAAY,EAAY,aAAa;AAM3C,WALI,EAAkB,KACb,EAAkB,KAIpB;KACR,CACA,QAAO,MAAQ,EAAI,CACnB,KAAK,IAAI;;EAEf;CACF;CAvMK,OAAM;CACN,WAAQ;;;;aATZ,EA6CM,OAAA;EA5CJ,WAAQ;EACP,OAAK,EAAA,CAAA,uBAAA,EAAA,iCAA0E,EAAA,UAAQ,CAAA,CAAA;KAKxF,EAKO,QALP,GAKO,EADF,EAAA,oBAAoB,EAAA,0BAAyB,EAAA,EAAA,GAAA,EAAA,GAAA,EAElD,EA+BW,GAAA,MAAA,EA9BW,EAAA,yBAAZ,GAAM,wBAIN,EAAA,MAAM,MAAA,GAAA,EAFd,EAUE,EATK,EAAA,MAAM,GAAI,EAAA;EAEd,KAAG,QAAU,EAAC,GAAI;EACnB,MAAK;EACL,eAAY;EACX,OAAK,EAAA,CAAA,6BAAA,EAAA,uCAA8F,EAAA,UAAQ,CAAA,CAAA;2BAMjG,EAAK,MAAI,IAAA,GAAA,EADtB,EAgBU,GAAA;EAdP,KAAG,QAAU,EAAC,GAAI;EACnB,MAAK;EACJ,MAAM;EACP,SAAA;EACC,SAAS;EACV,MAAK;EACL,eAAY;EACX,OAAK,EAAA,CAAA,6BAAA,EAAA,uCAA8F,EAAA,UAAQ,CAAA,CAAA;;mBAMtF,CAAtB,EAAsB,QAAA,EAAhB,WAAQ,GAAI,EAAA,MAAA,GAAA,EAAA,CAAA,CAAA"}

package/dist/lib/lazy-show/lazy-show.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`);let t=require(`vue`);var n={name:`DtLazyShow`,inheritAttrs:!1,props:{show:{type:Boolean,default:!1},transition:{type:String,default:null},appear:{type:Boolean,default:!1}},data(){return{initialized:!!this.show}},computed:{isCSSEnabled(){return process.env.NODE_ENV!==`test`}},watch:{show:function(e){!e||this.initialized||(this.initialized=!0)}}};function r(e,n,r,i,a,o){return(0,t.openBlock)(),(0,t.createBlock)(t.Transition,(0,t.mergeProps)({name:r.transition,appear:r.appear},e.$attrs,{css:o.isCSSEnabled}),{default:(0,t.withCtx)(()=>[(0,t.withDirectives)((0,t.createElementVNode)(`div`,(0,t.normalizeProps)((0,t.guardReactiveProps)(e.$attrs)),[a.initialized?(0,t.renderSlot)(e.$slots,`default`,{key:0}):(0,t.createCommentVNode)(``,!0)],16),[[t.vShow,r.show]])]),_:3},16,[`name`,`appear`,`css`])}var i=e.t(n,[[`render`,r]]);exports.default=i;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`);let t=require(`vue`);var n={name:`DtLazyShow`,inheritAttrs:!1,props:{show:{type:Boolean,default:!1},transition:{type:String,default:null},appear:{type:Boolean,default:!1}},data(){return{initialized:!!this.show}},computed:{isCSSEnabled(){return process.env.NODE_ENV!==`test`}},watch:{show:function(e){!e||this.initialized||(this.initialized=!0)}}};function r(e,n,r,i,a,o){return(0,t.openBlock)(),(0,t.createBlock)(t.Transition,(0,t.mergeProps)({name:r.transition,appear:r.appear},e.$attrs,{css:o.isCSSEnabled}),{default:(0,t.withCtx)(()=>[(0,t.withDirectives)((0,t.createElementVNode)(`div`,(0,t.mergeProps)({"data-qa":`dt-lazy-show`},e.$attrs),[a.initialized?(0,t.renderSlot)(e.$slots,`default`,{key:0}):(0,t.createCommentVNode)(``,!0)],16),[[t.vShow,r.show]])]),_:3},16,[`name`,`appear`,`css`])}var i=e.t(n,[[`render`,r]]);exports.default=i;
 //# sourceMappingURL=lazy-show.cjs.map

package/dist/lib/lazy-show/lazy-show.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"lazy-show.cjs","names":[],"sources":["../../../components/LazyShow/LazyShow.vue"],"sourcesContent":["<template>\n  <Transition\n    :name=\"transition\"\n    :appear=\"appear\"\n    v-bind=\"$attrs\"\n    :css=\"isCSSEnabled\"\n  >\n    <div\n      v-show=\"show\"\n      v-bind=\"$attrs\"\n    >\n      <!-- @slot Slot for main content -->\n      <slot v-if=\"initialized\" />\n    </div>\n  </Transition>\n</template>\n\n<script>\n/**\n * Lazy Show is a utility component that prevents its children from being rendered until the first time it is shown.\n * @see https://dialtone.dialpad.com/components/lazy_show.html\n */\nexport default {\n  name: 'DtLazyShow',\n\n  inheritAttrs: false,\n\n  /******************\n   *     PROPS      *\n   ******************/\n  props: {\n    /**\n     * Whether the child slot is shown.\n     * @values true, false\n     */\n    show: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * A valid Vue enter/leave CSS transition name.\n     */\n    transition: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Enable/Disable transition animation\n     * @values true, false\n     */\n    appear: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  /******************\n   *      DATA      *\n   ******************/\n  data () {\n    return {\n      initialized: !!this.show,\n    };\n  },\n\n  computed: {\n    /**\n     * Set the css property to false when running tests only.\n     * Refer to: https://vuejs.org/guide/built-ins/transition.html#javascript-hooks for details about\n     * transition `css` property\n     * @returns {boolean}\n     */\n    isCSSEnabled () {\n      return process.env.NODE_ENV !== 'test';\n    },\n  },\n\n  /******************\n   *      WATCH     *\n   ******************/\n  watch: {\n    show: function (newValue) {\n      if (!newValue || this.initialized) return;\n\n      this.initialized = true;\n    },\n  },\n};\n</script>\n"],"mappings":"wNAsBA,IAAK,EAAU,CACb,KAAM,aAEN,aAAc,GAKd,MAAO,CAKL,KAAM,CACJ,KAAM,QACN,QAAS,GACV,CAKD,WAAY,CACV,KAAM,OACN,QAAS,KACV,CAMD,OAAQ,CACN,KAAM,QACN,QAAS,GACV,CACF,CAKD,MAAQ,CACN,MAAO,CACL,YAAa,CAAC,CAAC,KAAK,KACrB,EAGH,SAAU,CAOR,cAAgB,CACd,OAAA,QAAA,IAAA,WAAgC,QAEnC,CAKD,MAAO,CACL,KAAM,SAAU,EAAU,CACpB,CAAC,GAAY,KAAK,cAEtB,KAAK,YAAc,KAEtB,CACF,mEA3Ec,EAAA,YAAA,EAAA,EAAA,YAAA,CAZV,KAAM,EAAA,WACN,OAAQ,EAAA,QACD,EAAA,OAAM,CACb,IAAK,EAAA,aAAY,CAAA,CAAA,2BAQZ,EAAA,EAAA,EAAA,iBAAA,EAAA,EAAA,oBAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,EAAA,oBAJI,EAAA,OAAM,CAAA,CAAA,CAGF,EAAA,aAAA,EAAA,EAAA,YAAe,EAAA,OAAA,UAAA,CAAA,IAAA,EAAA,CAAA,EAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA,EAAA,MAJnB,EAAA,KAAI,CAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"lazy-show.cjs","names":[],"sources":["../../../components/LazyShow/LazyShow.vue"],"sourcesContent":["<template>\n  <Transition\n    :name=\"transition\"\n    :appear=\"appear\"\n    v-bind=\"$attrs\"\n    :css=\"isCSSEnabled\"\n  >\n    <div\n      v-show=\"show\"\n      data-qa=\"dt-lazy-show\"\n      v-bind=\"$attrs\"\n    >\n      <!-- @slot Slot for main content -->\n      <slot v-if=\"initialized\" />\n    </div>\n  </Transition>\n</template>\n\n<script>\n/**\n * Lazy Show is a utility component that prevents its children from being rendered until the first time it is shown.\n * @see https://dialtone.dialpad.com/components/lazy_show.html\n */\nexport default {\n  name: 'DtLazyShow',\n\n  inheritAttrs: false,\n\n  /******************\n   *     PROPS      *\n   ******************/\n  props: {\n    /**\n     * Whether the child slot is shown.\n     * @values true, false\n     */\n    show: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * A valid Vue enter/leave CSS transition name.\n     */\n    transition: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Enable/Disable transition animation\n     * @values true, false\n     */\n    appear: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  /******************\n   *      DATA      *\n   ******************/\n  data () {\n    return {\n      initialized: !!this.show,\n    };\n  },\n\n  computed: {\n    /**\n     * Set the css property to false when running tests only.\n     * Refer to: https://vuejs.org/guide/built-ins/transition.html#javascript-hooks for details about\n     * transition `css` property\n     * @returns {boolean}\n     */\n    isCSSEnabled () {\n      return process.env.NODE_ENV !== 'test';\n    },\n  },\n\n  /******************\n   *      WATCH     *\n   ******************/\n  watch: {\n    show: function (newValue) {\n      if (!newValue || this.initialized) return;\n\n      this.initialized = true;\n    },\n  },\n};\n</script>\n"],"mappings":"wNAuBA,IAAK,EAAU,CACb,KAAM,aAEN,aAAc,GAKd,MAAO,CAKL,KAAM,CACJ,KAAM,QACN,QAAS,GACV,CAKD,WAAY,CACV,KAAM,OACN,QAAS,KACV,CAMD,OAAQ,CACN,KAAM,QACN,QAAS,GACV,CACF,CAKD,MAAQ,CACN,MAAO,CACL,YAAa,CAAC,CAAC,KAAK,KACrB,EAGH,SAAU,CAOR,cAAgB,CACd,OAAA,QAAA,IAAA,WAAgC,QAEnC,CAKD,MAAO,CACL,KAAM,SAAU,EAAU,CACpB,CAAC,GAAY,KAAK,cAEtB,KAAK,YAAc,KAEtB,CACF,mEA3Ec,EAAA,YAAA,EAAA,EAAA,YAAA,CAbV,KAAM,EAAA,WACN,OAAQ,EAAA,QACD,EAAA,OAAM,CACb,IAAK,EAAA,aAAY,CAAA,CAAA,2BASZ,EAAA,EAAA,EAAA,iBAAA,EAAA,EAAA,oBAAA,OAAA,EAAA,EAAA,YAAA,CALJ,UAAQ,eAAc,CACd,EAAA,OAAM,CAAA,CAGF,EAAA,aAAA,EAAA,EAAA,YAAe,EAAA,OAAA,UAAA,CAAA,IAAA,EAAA,CAAA,EAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA,EAAA,MALnB,EAAA,KAAI,CAAA,CAAA,CAAA,CAAA"}

package/dist/lib/lazy-show/lazy-show.js

@@ -1,7 +1,7 @@
 import { t as e } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
-import { Transition as t, createBlock as n, createCommentVNode as r, createElementVNode as i, guardReactiveProps as a, mergeProps as o, normalizeProps as s, openBlock as c, renderSlot as l, vShow as u, withCtx as d, withDirectives as f } from "vue";
+import { Transition as t, createBlock as n, createCommentVNode as r, createElementVNode as i, mergeProps as a, openBlock as o, renderSlot as s, vShow as c, withCtx as l, withDirectives as u } from "vue";
 //#region components/LazyShow/LazyShow.vue
-var p = {
+var d = {
 	name: "DtLazyShow",
 	inheritAttrs: !1,
 	props: {
@@ -28,12 +28,12 @@ var p = {
 		!e || this.initialized || (this.initialized = !0);
 	} }
 };
-function m(e, p, m, h, g, _) {
-	return c(), n(t, o({
-		name: m.transition,
-		appear: m.appear
-	}, e.$attrs, { css: _.isCSSEnabled }), {
-		default: d(() => [f(i("div", s(a(e.$attrs)), [g.initialized ? l(e.$slots, "default", { key: 0 }) : r("", !0)], 16), [[u, m.show]])]),
+function f(e, d, f, p, m, h) {
+	return o(), n(t, a({
+		name: f.transition,
+		appear: f.appear
+	}, e.$attrs, { css: h.isCSSEnabled }), {
+		default: l(() => [u(i("div", a({ "data-qa": "dt-lazy-show" }, e.$attrs), [m.initialized ? s(e.$slots, "default", { key: 0 }) : r("", !0)], 16), [[c, f.show]])]),
 		_: 3
 	}, 16, [
 		"name",
@@ -41,8 +41,8 @@ function m(e, p, m, h, g, _) {
 		"css"
 	]);
 }
-var h = /* @__PURE__ */ e(p, [["render", m]]);
+var p = /* @__PURE__ */ e(d, [["render", f]]);
 //#endregion
-export { h as default };
+export { p as default };
 
 //# sourceMappingURL=lazy-show.js.map

package/dist/lib/lazy-show/lazy-show.js.map

@@ -1 +1 @@
-{"version":3,"file":"lazy-show.js","names":[],"sources":["../../../components/LazyShow/LazyShow.vue"],"sourcesContent":["<template>\n  <Transition\n    :name=\"transition\"\n    :appear=\"appear\"\n    v-bind=\"$attrs\"\n    :css=\"isCSSEnabled\"\n  >\n    <div\n      v-show=\"show\"\n      v-bind=\"$attrs\"\n    >\n      <!-- @slot Slot for main content -->\n      <slot v-if=\"initialized\" />\n    </div>\n  </Transition>\n</template>\n\n<script>\n/**\n * Lazy Show is a utility component that prevents its children from being rendered until the first time it is shown.\n * @see https://dialtone.dialpad.com/components/lazy_show.html\n */\nexport default {\n  name: 'DtLazyShow',\n\n  inheritAttrs: false,\n\n  /******************\n   *     PROPS      *\n   ******************/\n  props: {\n    /**\n     * Whether the child slot is shown.\n     * @values true, false\n     */\n    show: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * A valid Vue enter/leave CSS transition name.\n     */\n    transition: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Enable/Disable transition animation\n     * @values true, false\n     */\n    appear: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  /******************\n   *      DATA      *\n   ******************/\n  data () {\n    return {\n      initialized: !!this.show,\n    };\n  },\n\n  computed: {\n    /**\n     * Set the css property to false when running tests only.\n     * Refer to: https://vuejs.org/guide/built-ins/transition.html#javascript-hooks for details about\n     * transition `css` property\n     * @returns {boolean}\n     */\n    isCSSEnabled () {\n      return process.env.NODE_ENV !== 'test';\n    },\n  },\n\n  /******************\n   *      WATCH     *\n   ******************/\n  watch: {\n    show: function (newValue) {\n      if (!newValue || this.initialized) return;\n\n      this.initialized = true;\n    },\n  },\n};\n</script>\n"],"mappings":";;;AAsBA,IAAK,IAAU;CACb,MAAM;CAEN,cAAc;CAKd,OAAO;EAKL,MAAM;GACJ,MAAM;GACN,SAAS;GACV;EAKD,YAAY;GACV,MAAM;GACN,SAAS;GACV;EAMD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EACF;CAKD,OAAQ;AACN,SAAO,EACL,aAAa,CAAC,CAAC,KAAK,MACrB;;CAGH,UAAU,EAOR,eAAgB;AACd,SAAA,QAAA,IAAA,aAAgC;IAEnC;CAKD,OAAO,EACL,MAAM,SAAU,GAAU;AACpB,GAAC,KAAY,KAAK,gBAEtB,KAAK,cAAc;IAEtB;CACF;;aAxFC,EAaa,GAbb,EAaa;EAZV,MAAM,EAAA;EACN,QAAQ,EAAA;IACD,EAAA,QAAM,EACb,KAAK,EAAA,cAAY,CAAA,EAAA;mBAQZ,CAAA,EANN,EAMM,OAAA,EAAA,EAJI,EAAA,OAAM,CAAA,EAAA,CAGF,EAAA,cAAZ,EAA2B,EAAA,QAAA,WAAA,EAAA,KAAA,GAAA,CAAA,GAAA,EAAA,IAAA,GAAA,CAAA,EAAA,GAAA,EAAA,CAAA,CAAA,GAJnB,EAAA,KAAI,CAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"lazy-show.js","names":[],"sources":["../../../components/LazyShow/LazyShow.vue"],"sourcesContent":["<template>\n  <Transition\n    :name=\"transition\"\n    :appear=\"appear\"\n    v-bind=\"$attrs\"\n    :css=\"isCSSEnabled\"\n  >\n    <div\n      v-show=\"show\"\n      data-qa=\"dt-lazy-show\"\n      v-bind=\"$attrs\"\n    >\n      <!-- @slot Slot for main content -->\n      <slot v-if=\"initialized\" />\n    </div>\n  </Transition>\n</template>\n\n<script>\n/**\n * Lazy Show is a utility component that prevents its children from being rendered until the first time it is shown.\n * @see https://dialtone.dialpad.com/components/lazy_show.html\n */\nexport default {\n  name: 'DtLazyShow',\n\n  inheritAttrs: false,\n\n  /******************\n   *     PROPS      *\n   ******************/\n  props: {\n    /**\n     * Whether the child slot is shown.\n     * @values true, false\n     */\n    show: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * A valid Vue enter/leave CSS transition name.\n     */\n    transition: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Enable/Disable transition animation\n     * @values true, false\n     */\n    appear: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  /******************\n   *      DATA      *\n   ******************/\n  data () {\n    return {\n      initialized: !!this.show,\n    };\n  },\n\n  computed: {\n    /**\n     * Set the css property to false when running tests only.\n     * Refer to: https://vuejs.org/guide/built-ins/transition.html#javascript-hooks for details about\n     * transition `css` property\n     * @returns {boolean}\n     */\n    isCSSEnabled () {\n      return process.env.NODE_ENV !== 'test';\n    },\n  },\n\n  /******************\n   *      WATCH     *\n   ******************/\n  watch: {\n    show: function (newValue) {\n      if (!newValue || this.initialized) return;\n\n      this.initialized = true;\n    },\n  },\n};\n</script>\n"],"mappings":";;;AAuBA,IAAK,IAAU;CACb,MAAM;CAEN,cAAc;CAKd,OAAO;EAKL,MAAM;GACJ,MAAM;GACN,SAAS;GACV;EAKD,YAAY;GACV,MAAM;GACN,SAAS;GACV;EAMD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EACF;CAKD,OAAQ;AACN,SAAO,EACL,aAAa,CAAC,CAAC,KAAK,MACrB;;CAGH,UAAU,EAOR,eAAgB;AACd,SAAA,QAAA,IAAA,aAAgC;IAEnC;CAKD,OAAO,EACL,MAAM,SAAU,GAAU;AACpB,GAAC,KAAY,KAAK,gBAEtB,KAAK,cAAc;IAEtB;CACF;;aAzFC,EAca,GAdb,EAca;EAbV,MAAM,EAAA;EACN,QAAQ,EAAA;IACD,EAAA,QAAM,EACb,KAAK,EAAA,cAAY,CAAA,EAAA;mBASZ,CAAA,EAPN,EAOM,OAPN,EAOM,EALJ,WAAQ,gBAAc,EACd,EAAA,OAAM,EAAA,CAGF,EAAA,cAAZ,EAA2B,EAAA,QAAA,WAAA,EAAA,KAAA,GAAA,CAAA,GAAA,EAAA,IAAA,GAAA,CAAA,EAAA,GAAA,EAAA,CAAA,CAAA,GALnB,EAAA,KAAI,CAAA,CAAA,CAAA,CAAA"}

package/dist/lib/loader/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./loader.cjs`);exports.DtLoader=e.default;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./loader-constants.cjs`),t=require(`./loader.cjs`);exports.DtLoader=t.default,exports.LOADER_KIND_MODIFIERS=e.LOADER_KIND_MODIFIERS;

package/dist/lib/loader/index.js

@@ -1,2 +1,3 @@
-import e from "./loader.js";
-export { e as DtLoader };
+import { LOADER_KIND_MODIFIERS as e } from "./loader-constants.js";
+import t from "./loader.js";
+export { t as DtLoader, e as LOADER_KIND_MODIFIERS };

package/dist/lib/loader/loader-constants.cjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={dots:``,spinner:`d-loader--spinner`};exports.LOADER_KIND_MODIFIERS=e;
+//# sourceMappingURL=loader-constants.cjs.map

package/dist/lib/loader/loader-constants.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"loader-constants.cjs","names":[],"sources":["../../../components/Loader/LoaderConstants.js"],"sourcesContent":["export const LOADER_KIND_MODIFIERS = {\n  dots: '',\n  spinner: 'd-loader--spinner',\n};\n"],"mappings":"mEAAA,IAAa,EAAwB,CACnC,KAAM,GACN,QAAS,oBACV"}

package/dist/lib/loader/loader-constants.js

@@ -0,0 +1,9 @@
+//#region components/Loader/LoaderConstants.js
+var e = {
+	dots: "",
+	spinner: "d-loader--spinner"
+};
+//#endregion
+export { e as LOADER_KIND_MODIFIERS };
+
+//# sourceMappingURL=loader-constants.js.map

package/dist/lib/loader/loader-constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loader-constants.js","names":[],"sources":["../../../components/Loader/LoaderConstants.js"],"sourcesContent":["export const LOADER_KIND_MODIFIERS = {\n  dots: '',\n  spinner: 'd-loader--spinner',\n};\n"],"mappings":";AAAA,IAAa,IAAwB;CACnC,MAAM;CACN,SAAS;CACV"}

package/dist/lib/loader/loader.cjs

@@ -1,22 +1,22 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/validators/index.cjs`),t=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),n=require(`../icon/icon-constants.cjs`);let r=require(`vue`);var i={name:`DtLoader`,props:{ariaLabel:{type:String,default:``},size:{type:[String,Number],default:500,validator:e.ordinalSizeValidator(n.ICON_SIZE_MODIFIERS)}}},a=[`aria-label`];function o(e,t,n,i,o,s){return(0,r.openBlock)(),(0,r.createElementBlock)(`div`,{class:`d-loader`,"aria-label":n.ariaLabel||`loading`,"data-qa":`dt-loader`},[((0,r.openBlock)(),(0,r.createElementBlock)(`svg`,{class:(0,r.normalizeClass)([`d-icon`,`d-icon--size-${n.size}`,`d-loader__icon-track`]),viewBox:`0 0 24 24`,fill:`currentColor`,xmlns:`http://www.w3.org/2000/svg`,"aria-hidden":`true`},[...t[0]||(t[0]=[(0,r.createElementVNode)(`path`,{d:`
-          M12 0.0180664C18.6175 0.0180664 23.9819 5.38305 23.9819
-          12.0005C23.9819 18.6177 18.6175 23.9819 12 23.9819C5.38281
-          23.9819 0.0180664 18.6177 0.0180664 12.0005C0.0180664
-          5.38305 5.38281 0.0180664 12 0.0180664ZM12 3.26807C7.17773
-          3.26807 3.26807 7.17797 3.26807 12.0005C3.26807 16.8228
-          7.17773 20.7319 12 20.7319C16.8223 20.7319 20.7319 16.8228
-          20.7319 12.0005C20.7319 7.17797 16.8223 3.26807 12 3.26807Z
-        `},null,-1)])],2)),((0,r.openBlock)(),(0,r.createElementBlock)(`svg`,{class:(0,r.normalizeClass)([`d-icon`,`d-icon--size-${n.size}`,`d-loader__icon`]),"data-qa":`dt-loader-icon`,viewBox:`0 0 24 24`,fill:`currentColor`,xmlns:`http://www.w3.org/2000/svg`,"aria-hidden":`true`},[...t[1]||(t[1]=[(0,r.createElementVNode)(`path`,{d:`
-          M0.0180664 12.0005
-          C0.0180664 5.38305 5.38305 0.0180664 12.0005 0.0180664
-          C12.8977 0.0183302 13.6255 0.745766 13.6255 1.64307
-          C13.6255 2.54037 12.8977 3.2678 12.0005 3.26807
-          C7.17797 3.26807 3.26807 7.17797 3.26807 12.0005
-          C3.26833 16.8228 7.17814 20.7319 12.0005 20.7319
-          C16.8226 20.7317 20.7317 16.8226 20.7319 12.0005
-          C20.7319 11.103 21.4595 10.3755 22.3569 10.3755
-          C23.2544 10.3755 23.9819 11.103 23.9819 12.0005
-          C23.9817 18.6175 18.6175 23.9817 12.0005 23.9819
-          C5.38321 23.9819 0.0183303 18.6177 0.0180664 12.0005Z
-        `},null,-1)])],2))],8,a)}var s=t.t(i,[[`render`,o]]);exports.default=s;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/validators/index.cjs`),t=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),n=require(`../icon/icon-constants.cjs`),r=require(`./loader-constants.cjs`);let i=require(`vue`);var a={name:`DtLoader`,props:{ariaLabel:{type:String,default:``},kind:{type:String,default:`dots`,validator:e=>Object.keys(r.LOADER_KIND_MODIFIERS).includes(e)},size:{type:[String,Number],default:500,validator:e.ordinalSizeValidator(n.ICON_SIZE_MODIFIERS)}},computed:{isSpinner(){return this.kind===`spinner`},loaderKindClass(){return this.isSpinner?r.LOADER_KIND_MODIFIERS.spinner:r.LOADER_KIND_MODIFIERS.dots}}},o=[`aria-label`];function s(e,t,n,r,a,s){return(0,i.openBlock)(),(0,i.createElementBlock)(`div`,{class:(0,i.normalizeClass)([`d-loader`,s.loaderKindClass]),"aria-label":n.ariaLabel||`loading`,"data-qa":`dt-loader`},[s.isSpinner?((0,i.openBlock)(),(0,i.createElementBlock)(i.Fragment,{key:0},[((0,i.openBlock)(),(0,i.createElementBlock)(`svg`,{class:(0,i.normalizeClass)([`d-icon`,`d-icon--size-${n.size}`,`d-loader__icon-track`]),"data-qa":`dt-loader-icon-track`,viewBox:`0 0 24 24`,fill:`currentColor`,xmlns:`http://www.w3.org/2000/svg`,"aria-hidden":`true`},[...t[0]||(t[0]=[(0,i.createElementVNode)(`path`,{d:`
+            M12 0.0180664C18.6175 0.0180664 23.9819 5.38305 23.9819
+            12.0005C23.9819 18.6177 18.6175 23.9819 12 23.9819C5.38281
+            23.9819 0.0180664 18.6177 0.0180664 12.0005C0.0180664
+            5.38305 5.38281 0.0180664 12 0.0180664ZM12 3.26807C7.17773
+            3.26807 3.26807 7.17797 3.26807 12.0005C3.26807 16.8228
+            7.17773 20.7319 12 20.7319C16.8223 20.7319 20.7319 16.8228
+            20.7319 12.0005C20.7319 7.17797 16.8223 3.26807 12 3.26807Z
+          `},null,-1)])],2)),((0,i.openBlock)(),(0,i.createElementBlock)(`svg`,{class:(0,i.normalizeClass)([`d-icon`,`d-icon--size-${n.size}`,`d-loader__icon`]),"data-qa":`dt-loader-icon`,viewBox:`0 0 24 24`,fill:`currentColor`,xmlns:`http://www.w3.org/2000/svg`,"aria-hidden":`true`},[...t[1]||(t[1]=[(0,i.createElementVNode)(`path`,{d:`
+            M0.0180664 12.0005
+            C0.0180664 5.38305 5.38305 0.0180664 12.0005 0.0180664
+            C12.8977 0.0183302 13.6255 0.745766 13.6255 1.64307
+            C13.6255 2.54037 12.8977 3.2678 12.0005 3.26807
+            C7.17797 3.26807 3.26807 7.17797 3.26807 12.0005
+            C3.26833 16.8228 7.17814 20.7319 12.0005 20.7319
+            C16.8226 20.7317 20.7317 16.8226 20.7319 12.0005
+            C20.7319 11.103 21.4595 10.3755 22.3569 10.3755
+            C23.2544 10.3755 23.9819 11.103 23.9819 12.0005
+            C23.9817 18.6175 18.6175 23.9817 12.0005 23.9819
+            C5.38321 23.9819 0.0183303 18.6177 0.0180664 12.0005Z
+          `},null,-1)])],2))],64)):((0,i.openBlock)(),(0,i.createElementBlock)(`svg`,{key:1,class:(0,i.normalizeClass)([`d-icon`,`d-icon--size-${n.size}`,`d-loader__icon`]),"data-qa":`dt-loader-icon`,viewBox:`0 0 24 24`,xmlns:`http://www.w3.org/2000/svg`,"aria-hidden":`true`},[...t[2]||(t[2]=[(0,i.createElementVNode)(`circle`,{class:`d-loader__dot d-loader__dot--1`,"data-qa":`dt-loader-dot`,cx:`14.843`,cy:`9.471`,r:`2.410`},null,-1),(0,i.createElementVNode)(`circle`,{class:`d-loader__dot d-loader__dot--2`,"data-qa":`dt-loader-dot`,cx:`9.156`,cy:`15.199`,r:`2.410`},null,-1),(0,i.createElementVNode)(`circle`,{class:`d-loader__dot d-loader__dot--3`,"data-qa":`dt-loader-dot`,cx:`15.469`,cy:`15.743`,r:`3.647`},null,-1),(0,i.createElementVNode)(`circle`,{class:`d-loader__dot d-loader__dot--4`,"data-qa":`dt-loader-dot`,cx:`8.539`,cy:`8.915`,r:`3.647`},null,-1)])],2))],10,o)}var c=t.t(a,[[`render`,s]]);exports.default=c;
 //# sourceMappingURL=loader.cjs.map

package/dist/lib/loader/loader.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"loader.cjs","names":[],"sources":["../../../components/Loader/Loader.vue"],"sourcesContent":["<template>\n  <div\n    class=\"d-loader\"\n    :aria-label=\"ariaLabel || 'loading'\"\n    data-qa=\"dt-loader\"\n  >\n    <svg\n      :class=\"['d-icon', `d-icon--size-${size}`, 'd-loader__icon-track']\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-hidden=\"true\"\n    >\n      <path\n        d=\"\n          M12 0.0180664C18.6175 0.0180664 23.9819 5.38305 23.9819\n          12.0005C23.9819 18.6177 18.6175 23.9819 12 23.9819C5.38281\n          23.9819 0.0180664 18.6177 0.0180664 12.0005C0.0180664\n          5.38305 5.38281 0.0180664 12 0.0180664ZM12 3.26807C7.17773\n          3.26807 3.26807 7.17797 3.26807 12.0005C3.26807 16.8228\n          7.17773 20.7319 12 20.7319C16.8223 20.7319 20.7319 16.8228\n          20.7319 12.0005C20.7319 7.17797 16.8223 3.26807 12 3.26807Z\n        \"\n      />\n    </svg>\n    <svg\n      :class=\"['d-icon', `d-icon--size-${size}`, 'd-loader__icon']\"\n      data-qa=\"dt-loader-icon\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-hidden=\"true\"\n    >\n      <path\n        d=\"\n          M0.0180664 12.0005\n          C0.0180664 5.38305 5.38305 0.0180664 12.0005 0.0180664\n          C12.8977 0.0183302 13.6255 0.745766 13.6255 1.64307\n          C13.6255 2.54037 12.8977 3.2678 12.0005 3.26807\n          C7.17797 3.26807 3.26807 7.17797 3.26807 12.0005\n          C3.26833 16.8228 7.17814 20.7319 12.0005 20.7319\n          C16.8226 20.7317 20.7317 16.8226 20.7319 12.0005\n          C20.7319 11.103 21.4595 10.3755 22.3569 10.3755\n          C23.2544 10.3755 23.9819 11.103 23.9819 12.0005\n          C23.9817 18.6175 18.6175 23.9817 12.0005 23.9819\n          C5.38321 23.9819 0.0183303 18.6177 0.0180664 12.0005Z\n        \"\n      />\n    </svg>\n  </div>\n</template>\n\n<script>\nimport { ICON_SIZE_MODIFIERS } from '@/components/Icon';\nimport { ordinalSizeValidator } from '@/common/validators';\n\nexport default {\n  name: 'DtLoader',\n\n  props: {\n    /**\n     * The label of the loader as read out by a screen reader.\n     * Default is \"loading\"\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The size of the icon.\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    size: {\n      type: [String, Number],\n      default: 500,\n      validator: ordinalSizeValidator(ICON_SIZE_MODIFIERS),\n    },\n  },\n};\n</script>\n"],"mappings":"+SAwDA,IAAK,EAAU,CACb,KAAM,WAEN,MAAO,CAKL,UAAW,CACT,KAAM,OACN,QAAS,GACV,CAMD,KAAM,CACJ,KAAM,CAAC,OAAQ,OAAO,CACtB,QAAS,IACT,UAAW,EAAA,qBAAqB,EAAA,oBAAoB,CACrD,CACF,CACF,2FA9BO,MAAA,CA/CJ,MAAM,WACL,aAAY,EAAA,WAAS,UACtB,UAAQ,0DAoBF,MAAA,CAjBH,OAAA,EAAA,EAAA,gBAAK,CAAA,SAAA,gBAA6B,EAAA,OAAI,uBAAA,CAAA,CACvC,QAAQ,YACR,KAAK,eACL,MAAM,6BACN,cAAY,kDAYV,OAAA,CATA,EAAE;;;;;;;;UAQD,CAAA,KAAA,GAAA,CAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBA0BC,MAAA,CAtBH,OAAA,EAAA,EAAA,gBAAK,CAAA,SAAA,gBAA6B,EAAA,OAAI,iBAAA,CAAA,CACvC,UAAQ,iBACR,QAAQ,YACR,KAAK,eACL,MAAM,6BACN,cAAY,kDAgBV,OAAA,CAbA,EAAE;;;;;;;;;;;;UAYD,CAAA,KAAA,GAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA,EAAA,EAAA"}
+{"version":3,"file":"loader.cjs","names":[],"sources":["../../../components/Loader/Loader.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"['d-loader', loaderKindClass]\"\n    :aria-label=\"ariaLabel || 'loading'\"\n    data-qa=\"dt-loader\"\n  >\n    <template v-if=\"isSpinner\">\n      <svg\n        :class=\"['d-icon', `d-icon--size-${size}`, 'd-loader__icon-track']\"\n        data-qa=\"dt-loader-icon-track\"\n        viewBox=\"0 0 24 24\"\n        fill=\"currentColor\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        aria-hidden=\"true\"\n      >\n        <path\n          d=\"\n            M12 0.0180664C18.6175 0.0180664 23.9819 5.38305 23.9819\n            12.0005C23.9819 18.6177 18.6175 23.9819 12 23.9819C5.38281\n            23.9819 0.0180664 18.6177 0.0180664 12.0005C0.0180664\n            5.38305 5.38281 0.0180664 12 0.0180664ZM12 3.26807C7.17773\n            3.26807 3.26807 7.17797 3.26807 12.0005C3.26807 16.8228\n            7.17773 20.7319 12 20.7319C16.8223 20.7319 20.7319 16.8228\n            20.7319 12.0005C20.7319 7.17797 16.8223 3.26807 12 3.26807Z\n          \"\n        />\n      </svg>\n      <svg\n        :class=\"['d-icon', `d-icon--size-${size}`, 'd-loader__icon']\"\n        data-qa=\"dt-loader-icon\"\n        viewBox=\"0 0 24 24\"\n        fill=\"currentColor\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        aria-hidden=\"true\"\n      >\n        <path\n          d=\"\n            M0.0180664 12.0005\n            C0.0180664 5.38305 5.38305 0.0180664 12.0005 0.0180664\n            C12.8977 0.0183302 13.6255 0.745766 13.6255 1.64307\n            C13.6255 2.54037 12.8977 3.2678 12.0005 3.26807\n            C7.17797 3.26807 3.26807 7.17797 3.26807 12.0005\n            C3.26833 16.8228 7.17814 20.7319 12.0005 20.7319\n            C16.8226 20.7317 20.7317 16.8226 20.7319 12.0005\n            C20.7319 11.103 21.4595 10.3755 22.3569 10.3755\n            C23.2544 10.3755 23.9819 11.103 23.9819 12.0005\n            C23.9817 18.6175 18.6175 23.9817 12.0005 23.9819\n            C5.38321 23.9819 0.0183303 18.6177 0.0180664 12.0005Z\n          \"\n        />\n      </svg>\n    </template>\n    <svg\n      v-else\n      :class=\"['d-icon', `d-icon--size-${size}`, 'd-loader__icon']\"\n      data-qa=\"dt-loader-icon\"\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-hidden=\"true\"\n    >\n      <!--\n        Rest positions and radii in the 24-unit viewBox. They must stay in sync\n        with the keyframes in loader.less, which include a 5% outward spread and\n        a 0.9655 scale on top of the Figma spec.\n      -->\n      <circle\n        class=\"d-loader__dot d-loader__dot--1\"\n        data-qa=\"dt-loader-dot\"\n        cx=\"14.843\"\n        cy=\"9.471\"\n        r=\"2.410\"\n      />\n      <circle\n        class=\"d-loader__dot d-loader__dot--2\"\n        data-qa=\"dt-loader-dot\"\n        cx=\"9.156\"\n        cy=\"15.199\"\n        r=\"2.410\"\n      />\n      <circle\n        class=\"d-loader__dot d-loader__dot--3\"\n        data-qa=\"dt-loader-dot\"\n        cx=\"15.469\"\n        cy=\"15.743\"\n        r=\"3.647\"\n      />\n      <circle\n        class=\"d-loader__dot d-loader__dot--4\"\n        data-qa=\"dt-loader-dot\"\n        cx=\"8.539\"\n        cy=\"8.915\"\n        r=\"3.647\"\n      />\n    </svg>\n  </div>\n</template>\n\n<script>\nimport { ICON_SIZE_MODIFIERS } from '@/components/Icon';\nimport { ordinalSizeValidator } from '@/common/validators';\nimport { LOADER_KIND_MODIFIERS } from './LoaderConstants';\n\nexport default {\n  name: 'DtLoader',\n\n  props: {\n    /**\n     * The label of the loader as read out by a screen reader.\n     * Default is \"loading\"\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The visual style of the loader: the four-dot loader, or the circular spinner.\n     * @values dots, spinner\n     */\n    kind: {\n      type: String,\n      default: 'dots',\n      validator: (kind) => Object.keys(LOADER_KIND_MODIFIERS).includes(kind),\n    },\n\n    /**\n     * The size of the icon.\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    size: {\n      type: [String, Number],\n      default: 500,\n      validator: ordinalSizeValidator(ICON_SIZE_MODIFIERS),\n    },\n  },\n\n  computed: {\n    isSpinner () {\n      return this.kind === 'spinner';\n    },\n\n    loaderKindClass () {\n      return this.isSpinner ? LOADER_KIND_MODIFIERS.spinner : LOADER_KIND_MODIFIERS.dots;\n    },\n  },\n};\n</script>\n"],"mappings":"mVAsGA,IAAK,EAAU,CACb,KAAM,WAEN,MAAO,CAKL,UAAW,CACT,KAAM,OACN,QAAS,GACV,CAMD,KAAM,CACJ,KAAM,OACN,QAAS,OACT,UAAY,GAAS,OAAO,KAAK,EAAA,sBAAsB,CAAC,SAAS,EAAK,CACvE,CAMD,KAAM,CACJ,KAAM,CAAC,OAAQ,OAAO,CACtB,QAAS,IACT,UAAW,EAAA,qBAAqB,EAAA,oBAAoB,CACrD,CACF,CAED,SAAU,CACR,WAAa,CACX,OAAO,KAAK,OAAS,WAGvB,iBAAmB,CACjB,OAAO,KAAK,UAAY,EAAA,sBAAsB,QAAU,EAAA,sBAAsB,MAEjF,CACF,2FAnDO,MAAA,CA5FH,OAAA,EAAA,EAAA,gBAAK,CAAA,WAAe,EAAA,gBAAe,CAAA,CACnC,aAAY,EAAA,WAAS,UACtB,UAAQ,cAEQ,EAAA,YAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBA6CL,EAAA,SAAA,CAAA,IAAA,EAAA,CAAA,GAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAzBH,MAAA,CAlBH,OAAA,EAAA,EAAA,gBAAK,CAAA,SAAA,gBAA6B,EAAA,OAAI,uBAAA,CAAA,CACvC,UAAQ,uBACR,QAAQ,YACR,KAAK,eACL,MAAM,6BACN,cAAY,kDAYV,OAAA,CATA,EAAE;;;;;;;;YAQD,CAAA,KAAA,GAAA,CAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBA0BC,MAAA,CAtBH,OAAA,EAAA,EAAA,gBAAK,CAAA,SAAA,gBAA6B,EAAA,OAAI,iBAAA,CAAA,CACvC,UAAQ,iBACR,QAAQ,YACR,KAAK,eACL,MAAM,6BACN,cAAY,kDAgBV,OAAA,CAbA,EAAE;;;;;;;;;;;;YAYD,CAAA,KAAA,GAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA,GAAA,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBA6CD,MAAA,OAvCH,OAAA,EAAA,EAAA,gBAAK,CAAA,SAAA,gBAA6B,EAAA,OAAI,iBAAA,CAAA,CACvC,UAAQ,iBACR,QAAQ,YACR,MAAM,6BACN,cAAY,kDAaV,SAAA,CALA,MAAM,iCACN,UAAQ,gBACR,GAAG,SACH,GAAG,QACH,EAAE,2CAQF,SAAA,CALA,MAAM,iCACN,UAAQ,gBACR,GAAG,QACH,GAAG,SACH,EAAE,2CAQF,SAAA,CALA,MAAM,iCACN,UAAQ,gBACR,GAAG,SACH,GAAG,SACH,EAAE,2CAQF,SAAA,CALA,MAAM,iCACN,UAAQ,gBACR,GAAG,QACH,GAAG,QACH,EAAE"}

package/dist/lib/loader/loader.js

@@ -1,39 +1,54 @@
 import { ordinalSizeValidator as e } from "../../common/validators/index.js";
 import { t } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
 import { ICON_SIZE_MODIFIERS as n } from "../icon/icon-constants.js";
-import { createElementBlock as r, createElementVNode as i, normalizeClass as a, openBlock as o } from "vue";
+import { LOADER_KIND_MODIFIERS as r } from "./loader-constants.js";
+import { Fragment as i, createElementBlock as a, createElementVNode as o, normalizeClass as s, openBlock as c } from "vue";
 //#region components/Loader/Loader.vue
-var s = {
+var l = {
 	name: "DtLoader",
 	props: {
 		ariaLabel: {
 			type: String,
 			default: ""
 		},
+		kind: {
+			type: String,
+			default: "dots",
+			validator: (e) => Object.keys(r).includes(e)
+		},
 		size: {
 			type: [String, Number],
 			default: 500,
 			validator: e(n)
 		}
+	},
+	computed: {
+		isSpinner() {
+			return this.kind === "spinner";
+		},
+		loaderKindClass() {
+			return this.isSpinner ? r.spinner : r.dots;
+		}
 	}
-}, c = ["aria-label"];
-function l(e, t, n, s, l, u) {
-	return o(), r("div", {
-		class: "d-loader",
+}, u = ["aria-label"];
+function d(e, t, n, r, l, d) {
+	return c(), a("div", {
+		class: s(["d-loader", d.loaderKindClass]),
 		"aria-label": n.ariaLabel || "loading",
 		"data-qa": "dt-loader"
-	}, [(o(), r("svg", {
-		class: a([
+	}, [d.isSpinner ? (c(), a(i, { key: 0 }, [(c(), a("svg", {
+		class: s([
 			"d-icon",
 			`d-icon--size-${n.size}`,
 			"d-loader__icon-track"
 		]),
+		"data-qa": "dt-loader-icon-track",
 		viewBox: "0 0 24 24",
 		fill: "currentColor",
 		xmlns: "http://www.w3.org/2000/svg",
 		"aria-hidden": "true"
-	}, [...t[0] || (t[0] = [i("path", { d: "\n          M12 0.0180664C18.6175 0.0180664 23.9819 5.38305 23.9819\n          12.0005C23.9819 18.6177 18.6175 23.9819 12 23.9819C5.38281\n          23.9819 0.0180664 18.6177 0.0180664 12.0005C0.0180664\n          5.38305 5.38281 0.0180664 12 0.0180664ZM12 3.26807C7.17773\n          3.26807 3.26807 7.17797 3.26807 12.0005C3.26807 16.8228\n          7.17773 20.7319 12 20.7319C16.8223 20.7319 20.7319 16.8228\n          20.7319 12.0005C20.7319 7.17797 16.8223 3.26807 12 3.26807Z\n        " }, null, -1)])], 2)), (o(), r("svg", {
-		class: a([
+	}, [...t[0] || (t[0] = [o("path", { d: "\n            M12 0.0180664C18.6175 0.0180664 23.9819 5.38305 23.9819\n            12.0005C23.9819 18.6177 18.6175 23.9819 12 23.9819C5.38281\n            23.9819 0.0180664 18.6177 0.0180664 12.0005C0.0180664\n            5.38305 5.38281 0.0180664 12 0.0180664ZM12 3.26807C7.17773\n            3.26807 3.26807 7.17797 3.26807 12.0005C3.26807 16.8228\n            7.17773 20.7319 12 20.7319C16.8223 20.7319 20.7319 16.8228\n            20.7319 12.0005C20.7319 7.17797 16.8223 3.26807 12 3.26807Z\n          " }, null, -1)])], 2)), (c(), a("svg", {
+		class: s([
 			"d-icon",
 			`d-icon--size-${n.size}`,
 			"d-loader__icon"
@@ -43,10 +58,50 @@ function l(e, t, n, s, l, u) {
 		fill: "currentColor",
 		xmlns: "http://www.w3.org/2000/svg",
 		"aria-hidden": "true"
-	}, [...t[1] || (t[1] = [i("path", { d: "\n          M0.0180664 12.0005\n          C0.0180664 5.38305 5.38305 0.0180664 12.0005 0.0180664\n          C12.8977 0.0183302 13.6255 0.745766 13.6255 1.64307\n          C13.6255 2.54037 12.8977 3.2678 12.0005 3.26807\n          C7.17797 3.26807 3.26807 7.17797 3.26807 12.0005\n          C3.26833 16.8228 7.17814 20.7319 12.0005 20.7319\n          C16.8226 20.7317 20.7317 16.8226 20.7319 12.0005\n          C20.7319 11.103 21.4595 10.3755 22.3569 10.3755\n          C23.2544 10.3755 23.9819 11.103 23.9819 12.0005\n          C23.9817 18.6175 18.6175 23.9817 12.0005 23.9819\n          C5.38321 23.9819 0.0183303 18.6177 0.0180664 12.0005Z\n        " }, null, -1)])], 2))], 8, c);
+	}, [...t[1] || (t[1] = [o("path", { d: "\n            M0.0180664 12.0005\n            C0.0180664 5.38305 5.38305 0.0180664 12.0005 0.0180664\n            C12.8977 0.0183302 13.6255 0.745766 13.6255 1.64307\n            C13.6255 2.54037 12.8977 3.2678 12.0005 3.26807\n            C7.17797 3.26807 3.26807 7.17797 3.26807 12.0005\n            C3.26833 16.8228 7.17814 20.7319 12.0005 20.7319\n            C16.8226 20.7317 20.7317 16.8226 20.7319 12.0005\n            C20.7319 11.103 21.4595 10.3755 22.3569 10.3755\n            C23.2544 10.3755 23.9819 11.103 23.9819 12.0005\n            C23.9817 18.6175 18.6175 23.9817 12.0005 23.9819\n            C5.38321 23.9819 0.0183303 18.6177 0.0180664 12.0005Z\n          " }, null, -1)])], 2))], 64)) : (c(), a("svg", {
+		key: 1,
+		class: s([
+			"d-icon",
+			`d-icon--size-${n.size}`,
+			"d-loader__icon"
+		]),
+		"data-qa": "dt-loader-icon",
+		viewBox: "0 0 24 24",
+		xmlns: "http://www.w3.org/2000/svg",
+		"aria-hidden": "true"
+	}, [...t[2] || (t[2] = [
+		o("circle", {
+			class: "d-loader__dot d-loader__dot--1",
+			"data-qa": "dt-loader-dot",
+			cx: "14.843",
+			cy: "9.471",
+			r: "2.410"
+		}, null, -1),
+		o("circle", {
+			class: "d-loader__dot d-loader__dot--2",
+			"data-qa": "dt-loader-dot",
+			cx: "9.156",
+			cy: "15.199",
+			r: "2.410"
+		}, null, -1),
+		o("circle", {
+			class: "d-loader__dot d-loader__dot--3",
+			"data-qa": "dt-loader-dot",
+			cx: "15.469",
+			cy: "15.743",
+			r: "3.647"
+		}, null, -1),
+		o("circle", {
+			class: "d-loader__dot d-loader__dot--4",
+			"data-qa": "dt-loader-dot",
+			cx: "8.539",
+			cy: "8.915",
+			r: "3.647"
+		}, null, -1)
+	])], 2))], 10, u);
 }
-var u = /* @__PURE__ */ t(s, [["render", l]]);
+var f = /* @__PURE__ */ t(l, [["render", d]]);
 //#endregion
-export { u as default };
+export { f as default };
 
 //# sourceMappingURL=loader.js.map