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

package/dist/lib/select-menu/select-menu.js

@@ -1,31 +1,23 @@
-import { VALIDATION_MESSAGE_TYPES as e } from "../../common/constants/index.js";
-import { getUniqueString as t, getValidationState as n, hasSlotContent as r, removeClassStyleAttrs as i } from "../../common/utils/index.js";
-import { MessagesMixin as a } from "../../common/mixins/input.js";
-import { t as o } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
-import s from "../validation-messages/validation-messages.js";
-import { TEXT_SIZE_MODIFIERS as c, TEXT_STRENGTH_MODIFIERS as l } from "../text/text-constants.js";
-import u from "../text/text.js";
-import { SELECT_SIZE_MODIFIERS as d, SELECT_STATE_MODIFIERS as f } from "./select-menu-constants.js";
-import { optionsValidator as p } from "./select-menu-validators.js";
-import { Fragment as m, createBlock as h, createCommentVNode as g, createElementBlock as _, createElementVNode as v, createTextVNode as y, createVNode as b, mergeProps as x, normalizeClass as S, normalizeStyle as C, openBlock as w, renderList as T, renderSlot as E, resolveComponent as D, toDisplayString as O, toHandlers as k, warn as A, withCtx as j } from "vue";
-//#region components/SelectMenu/SelectMenu.vue
-var M = {
+import { DESCRIPTION_SIZE_MODIFIERS as e, LABEL_SIZE_MODIFIERS as t } from "../../common/constants/index.js";
+import { addClassStyleAttrs as n, getUniqueString as r, getValidationState as i, hasSlotContent as a, removeClassStyleAttrs as o } from "../../common/utils/index.js";
+import { MessagesMixin as s } from "../../common/mixins/input.js";
+import { t as c } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
+import l from "../validation-messages/validation-messages.js";
+import { SELECT_SIZE_MODIFIERS as u, SELECT_STATE_MODIFIERS as d } from "./select-menu-constants.js";
+import { optionsValidator as f } from "./select-menu-validators.js";
+import { Fragment as p, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createTextVNode as _, createVNode as v, mergeProps as y, normalizeClass as b, openBlock as x, renderList as S, renderSlot as C, resolveComponent as w, toDisplayString as T, toHandlers as E, warn as D } from "vue";
+//#region components/select_menu/select_menu.vue
+var O = {
+	compatConfig: { MODE: 3 },
 	name: "DtSelectMenu",
-	components: {
-		DtValidationMessages: s,
-		DtText: u
-	},
-	mixins: [a],
+	components: { DtValidationMessages: l },
+	mixins: [s],
 	inheritAttrs: !1,
 	props: {
 		label: {
 			type: String,
 			default: ""
 		},
-		showLabel: {
-			type: Boolean,
-			default: !0
-		},
 		description: {
 			type: String,
 			default: ""
@@ -33,12 +25,12 @@ var M = {
 		options: {
 			type: Array,
 			default: () => [],
-			validator: (e) => p(e)
+			validator: (e) => f(e)
 		},
 		size: {
-			type: [String, Number],
-			default: 300,
-			validator: (e) => Object.keys(d).includes(String(e))
+			type: String,
+			default: "md",
+			validator: (e) => Object.keys(u).includes(e)
 		},
 		labelClass: {
 			type: [
@@ -88,54 +80,34 @@ var M = {
 			type: Boolean,
 			default: !1
 		},
-		modelValue: {
-			type: [String, Number],
+		rootClass: {
+			type: [
+				String,
+				Object,
+				Array
+			],
 			default: ""
 		},
-		labelSize: {
+		modelValue: {
 			type: [String, Number],
-			default: null,
-			validator: (e) => c.label.includes(String(e))
-		},
-		labelStrength: {
-			type: String,
-			default: null,
-			validator: (e) => Object.keys(l).includes(e)
+			default: ""
 		}
 	},
-	emits: ["update:modelValue"],
+	emits: [
+		"input",
+		"update:modelValue",
+		"change"
+	],
 	data() {
 		return {
-			SELECT_SIZE_MODIFIERS: d,
-			SELECT_STATE_MODIFIERS: f,
-			hasSlotContent: r,
-			messagesId: t()
+			LABEL_SIZE_MODIFIERS: t,
+			DESCRIPTION_SIZE_MODIFIERS: e,
+			SELECT_SIZE_MODIFIERS: u,
+			SELECT_STATE_MODIFIERS: d,
+			hasSlotContent: a
 		};
 	},
 	computed: {
-		resolvedLabelSize() {
-			if (this.labelSize != null) return this.labelSize;
-			let e = String(this.size);
-			return e === "xl" || e === "500" ? e === "500" ? "400" : "lg" : this.size;
-		},
-		resolvedDescriptionSize() {
-			return {
-				100: "xs",
-				200: "xs",
-				300: "sm",
-				400: "sm",
-				500: "md",
-				xs: "xs",
-				sm: "xs",
-				md: "sm",
-				lg: "sm",
-				xl: "md"
-			}[String(this.size)] || "sm";
-		},
-		resolvedDescriptionDensity() {
-			let e = String(this.size);
-			return e === "xl" || e === "500" ? "300" : void 0;
-		},
 		selectListeners() {
 			return {
 				input: () => {},
@@ -143,16 +115,10 @@ var M = {
 			};
 		},
 		state() {
-			return n(this.formattedMessages);
-		},
-		ariaInvalid() {
-			return this.state === e.CRITICAL ? "true" : void 0;
-		},
-		ariaDescribedBy() {
-			return this.showMessages && this.formattedMessages.length > 0 ? this.messagesId : void 0;
+			return i(this.formattedMessages);
 		},
 		selectKey() {
-			return t();
+			return r();
 		},
 		descriptionKey() {
 			return `select-${this.selectKey}-description`;
@@ -162,113 +128,78 @@ var M = {
 		}
 	},
 	mounted() {
-		this.validateOptionsPresence(), this.runValidations();
+		this.validateOptionsPresence();
 	},
 	beforeUpdate() {
 		this.validateOptionsPresence();
 	},
 	methods: {
-		removeClassStyleAttrs: i,
+		removeClassStyleAttrs: o,
+		addClassStyleAttrs: n,
 		emitValue(e, t) {
-			this.$emit("update:modelValue", e, t);
+			this.$emit("update:modelValue", e, t), this.$emit("input", e, t), this.$emit("change", e, t);
 		},
 		getOptionKey(e) {
 			return `select-${this.selectKey}-option-${e}`;
 		},
 		validateOptionsPresence() {
-			this.options?.length < 1 && !this.$slots.default && A("Options are expected to be provided via prop or slot", this);
-		},
-		runValidations() {
-			!(this.$slots.label || this.label) && !this.$attrs["aria-label"] && console.info("[Dialtone] A label is required for accessibility. Provide a label prop and use show-label=\"false\" to hide it visually.");
+			this.options?.length < 1 && !this.$slots.default && D("Options are expected to be provided via prop or slot", this);
 		}
 	}
-}, N = [
-	"aria-label",
-	"aria-invalid",
-	"aria-describedby",
-	"disabled",
-	"value"
-], P = ["value"];
-function F(e, t, n, r, i, a) {
-	let o = D("dt-text"), s = D("dt-validation-messages");
-	return w(), _("div", {
-		class: S(e.$attrs.class),
-		style: C(e.$attrs.style)
-	}, [v("label", null, [
-		n.showLabel && (i.hasSlotContent(e.$slots.label) || n.label) ? (w(), h(o, x({
+}, k = ["aria-details"], A = ["id"], j = ["disabled", "value"], M = ["value"];
+function N(e, t, n, r, i, a) {
+	let o = w("dt-validation-messages");
+	return x(), h("div", y({ class: n.rootClass }, a.addClassStyleAttrs(e.$attrs)), [g("label", null, [
+		i.hasSlotContent(e.$slots.label) || n.label ? (x(), h("div", y({
 			key: 0,
-			kind: "label",
-			size: a.resolvedLabelSize,
-			strength: n.labelStrength,
-			tone: "secondary",
-			as: "div",
 			"aria-details": a.labelAriaDetails,
-			class: ["d-select__label-text", n.labelClass]
-		}, n.labelChildProps, { "data-qa": "dt-select-label" }), {
-			default: j(() => [E(e.$slots, "label", {}, () => [y(O(n.label), 1)])]),
-			_: 3
-		}, 16, [
-			"size",
-			"strength",
-			"aria-details",
-			"class"
-		])) : g("", !0),
-		i.hasSlotContent(e.$slots.description) || n.description ? (w(), h(o, x({
+			class: [
+				"d-label",
+				i.LABEL_SIZE_MODIFIERS[n.size],
+				n.labelClass
+			]
+		}, n.labelChildProps, { "data-qa": "dt-select-label" }), [C(e.$slots, "label", {}, () => [_(T(n.label), 1)])], 16, k)) : m("", !0),
+		i.hasSlotContent(e.$slots.description) || n.description ? (x(), h("div", y({
 			key: 1,
 			id: a.descriptionKey,
-			kind: "body",
-			size: a.resolvedDescriptionSize,
-			tone: "tertiary",
-			density: a.resolvedDescriptionDensity,
-			as: "div",
-			class: ["d-description", n.descriptionClass]
-		}, n.descriptionChildProps, { "data-qa": "dt-select-description" }), {
-			default: j(() => [E(e.$slots, "description", {}, () => [y(O(n.description), 1)])]),
-			_: 3
-		}, 16, [
-			"id",
-			"size",
-			"density",
-			"class"
-		])) : g("", !0),
-		v("div", {
-			class: S([
+			class: [
+				"d-description",
+				i.DESCRIPTION_SIZE_MODIFIERS[n.size],
+				n.descriptionClass
+			]
+		}, n.descriptionChildProps, { "data-qa": "dt-select-description" }), [C(e.$slots, "description", {}, () => [_(T(n.description), 1)])], 16, A)) : m("", !0),
+		g("div", {
+			class: b([
 				"d-select",
-				i.SELECT_SIZE_MODIFIERS[String(n.size)],
+				i.SELECT_SIZE_MODIFIERS[n.size],
 				n.selectClass,
 				{ "d-select--disabled": n.disabled }
 			]),
 			"data-qa": "dt-select-wrapper"
-		}, [v("select", x({
+		}, [g("select", y({
 			ref: "selectElement",
-			class: ["d-select__input", i.SELECT_STATE_MODIFIERS[a.state]],
-			"aria-label": !n.showLabel && n.label ? n.label : void 0,
-			"aria-invalid": a.ariaInvalid,
-			"aria-describedby": a.ariaDescribedBy
+			class: ["d-select__input", i.SELECT_STATE_MODIFIERS[a.state]]
 		}, a.removeClassStyleAttrs(e.$attrs), {
 			"data-qa": "dt-select",
 			disabled: n.disabled,
 			value: n.modelValue
-		}, k(a.selectListeners, !0)), [E(e.$slots, "default", {}, () => [(w(!0), _(m, null, T(n.options, (e) => (w(), _("option", x({
+		}, E(a.selectListeners, !0)), [C(e.$slots, "default", {}, () => [(x(!0), h(p, null, S(n.options, (e) => (x(), h("option", y({
 			key: a.getOptionKey(e.value),
 			value: e.value,
 			class: n.optionClass
-		}, { ref_for: !0 }, n.optionChildProps), O(e.label), 17, P))), 128))])], 16, N)], 2)
-	]), b(s, x(e.messagesChildProps, {
-		id: i.messagesId,
+		}, { ref_for: !0 }, n.optionChildProps), T(e.label), 17, M))), 128))])], 16, j)], 2)
+	]), v(o, y({
 		"validation-messages": e.formattedMessages,
 		"show-messages": e.showMessages,
-		class: e.messagesClass,
-		"data-qa": "dt-select-messages"
-	}), null, 16, [
-		"id",
+		class: e.messagesClass
+	}, e.messagesChildProps, { "data-qa": "dt-select-messages" }), null, 16, [
 		"validation-messages",
 		"show-messages",
 		"class"
-	])], 6);
+	])], 16);
 }
-var I = /* @__PURE__ */ o(M, [["render", F]]);
+var P = /* @__PURE__ */ c(O, [["render", N]]);
 //#endregion
-export { I as default };
+export { P as default };
 
 //# sourceMappingURL=select-menu.js.map

package/dist/lib/select-menu/select-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-menu.js","names":[],"sources":["../../../components/SelectMenu/SelectMenu.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"$attrs.class\"\n    :style=\"$attrs.style\"\n  >\n    <label>\n      <dt-text\n        v-if=\"showLabel && (hasSlotContent($slots.label) || label)\"\n        kind=\"label\"\n        :size=\"resolvedLabelSize\"\n        :strength=\"labelStrength\"\n        tone=\"secondary\"\n        as=\"div\"\n        :aria-details=\"labelAriaDetails\"\n        :class=\"['d-select__label-text', labelClass]\"\n        v-bind=\"labelChildProps\"\n        data-qa=\"dt-select-label\"\n      >\n        <!-- @slot Slot for label, defaults to label prop -->\n        <slot name=\"label\">{{ label }}</slot>\n      </dt-text>\n      <dt-text\n        v-if=\"hasSlotContent($slots.description) || description\"\n        :id=\"descriptionKey\"\n        kind=\"body\"\n        :size=\"resolvedDescriptionSize\"\n        tone=\"tertiary\"\n        :density=\"resolvedDescriptionDensity\"\n        as=\"div\"\n        :class=\"[\n          'd-description',\n          descriptionClass,\n        ]\"\n        v-bind=\"descriptionChildProps\"\n        data-qa=\"dt-select-description\"\n      >\n        <!-- @slot Slot for description, defaults to description prop -->\n        <slot name=\"description\">{{ description }}</slot>\n      </dt-text>\n      <div\n        :class=\"[\n          'd-select',\n          SELECT_SIZE_MODIFIERS[String(size)],\n          selectClass,\n          { 'd-select--disabled': disabled },\n        ]\"\n        data-qa=\"dt-select-wrapper\"\n      >\n        <select\n          ref=\"selectElement\"\n          :class=\"[\n            'd-select__input',\n            SELECT_STATE_MODIFIERS[state],\n          ]\"\n          :aria-label=\"!showLabel && label ? label : undefined\"\n          :aria-invalid=\"ariaInvalid\"\n          :aria-describedby=\"ariaDescribedBy\"\n          v-bind=\"removeClassStyleAttrs($attrs)\"\n          data-qa=\"dt-select\"\n          :disabled=\"disabled\"\n          :value=\"modelValue\"\n          v-on=\"selectListeners\"\n        >\n          <!-- @slot Slot for select menu options, defaults to options prop -->\n          <slot>\n            <option\n              v-for=\"option in options\"\n              :key=\"getOptionKey(option.value)\"\n              :value=\"option.value\"\n              :class=\"optionClass\"\n              v-bind=\"optionChildProps\"\n            >\n              {{ option.label }}\n            </option>\n          </slot>\n        </select>\n      </div>\n    </label>\n    <dt-validation-messages\n      v-bind=\"messagesChildProps\"\n      :id=\"messagesId\"\n      :validation-messages=\"formattedMessages\"\n      :show-messages=\"showMessages\"\n      :class=\"messagesClass\"\n      data-qa=\"dt-select-messages\"\n    />\n  </div>\n</template>\n\n<script>\nimport { warn } from 'vue';\nimport { DtText, TEXT_SIZE_MODIFIERS, TEXT_STRENGTH_MODIFIERS } from '@/components/Text';\nimport {\n  SELECT_SIZE_MODIFIERS,\n  SELECT_STATE_MODIFIERS,\n} from './SelectMenuConstants';\nimport {\n  getUniqueString,\n  getValidationState,\n  hasSlotContent,\n  removeClassStyleAttrs,\n} from '@/common/utils';\nimport { MessagesMixin } from '@/common/mixins/input';\nimport { optionsValidator } from './SelectMenuValidators.js';\nimport { DtValidationMessages } from '../ValidationMessages';\nimport { VALIDATION_MESSAGE_TYPES } from '@/common/constants';\n\n/**\n * A select menu is an input control that allows users to choose one option from a list.\n * @property {Boolean} disabled attribute\n * @property {String} name attribute\n * @property {String} value attribute\n * @see https://dialtone.dialpad.com/components/select.html\n */\nexport default {\n  name: 'DtSelectMenu',\n\n  components: { DtValidationMessages, DtText },\n\n  mixins: [MessagesMixin],\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Label for the select.\n     * Can also be overridden with a slot of the same name.\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines visibility of select label.\n     * @values true, false\n     */\n    showLabel: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Description for the select.\n     * Can also be overridden with a slot of the same name.\n     */\n    description: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Select Menu Options, overridden by default slot. Each option has the following structure:\n     * `{ value: number || string (required), label: string (required) }`\n     * @param {Object[]} options - Optional - A list that can be used to create a list of select menu options\n     * @param {number|string} options[].value - Required - The option value\n     * @param {string} options[].label - Required - The option Label\n     */\n    options: {\n      type: Array,\n      default: () => [],\n      validator: options => optionsValidator(options),\n    },\n\n    /**\n     * Controls the size of the select\n     * @values 100, 200, 300, 400, 500\n     */\n    size: {\n      type: [String, Number],\n      default: 300,\n      validator: (s) => Object.keys(SELECT_SIZE_MODIFIERS).includes(String(s)),\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the description container\n     */\n    descriptionClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the select\n     */\n    selectClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize each option, should options be provided via prop\n     */\n    optionClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * A set of props that are passed into the label container\n     */\n    labelChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * A set of props that are passed into the description container\n     */\n    descriptionChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * A set of props that are passed into each option, should options be provided via prop\n     */\n    optionChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Disabled state of the select\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The value of the select menu\n     */\n    modelValue: {\n      type: [String, Number],\n      default: '',\n    },\n\n    /**\n     * Overrides the label text size. When not provided, the label size\n     * is derived from the component size prop.\n     * @values 100, 200, 300, 400\n     */\n    labelSize: {\n      type: [String, Number],\n      default: null,\n      validator: (s) => TEXT_SIZE_MODIFIERS.label.includes(String(s)),\n    },\n\n    /**\n     * Overrides the label font weight.\n     * @values bold, semibold, medium, normal\n     */\n    labelStrength: {\n      type: String,\n      default: null,\n      validator: (s) => Object.keys(TEXT_STRENGTH_MODIFIERS).includes(s),\n    },\n  },\n\n  emits: [\n    /**\n     * Event fired to sync the modelValue prop with the parent component\n     *\n     * @event update:modelValue\n     * @type {String | Number}\n     */\n    'update:modelValue',\n\n  ],\n\n  data () {\n    return {\n      SELECT_SIZE_MODIFIERS,\n      SELECT_STATE_MODIFIERS,\n      hasSlotContent,\n      messagesId: getUniqueString(),\n    };\n  },\n\n  computed: {\n    resolvedLabelSize () {\n      if (this.labelSize != null) return this.labelSize;\n      const sizeStr = String(this.size);\n      // xl/500 exceeds label's max size — cap at lg/400\n      if (sizeStr === 'xl' || sizeStr === '500') return sizeStr === '500' ? '400' : 'lg';\n      return this.size;\n    },\n\n    resolvedDescriptionSize () {\n      const map = {\n        100: 'xs', 200: 'xs', 300: 'sm', 400: 'sm', 500: 'md',\n        xs: 'xs', sm: 'xs', md: 'sm', lg: 'sm', xl: 'md',\n      };\n      return map[String(this.size)] || 'sm';\n    },\n\n    resolvedDescriptionDensity () {\n      const sizeStr = String(this.size);\n      return (sizeStr === 'xl' || sizeStr === '500') ? '300' : undefined;\n    },\n\n    selectListeners () {\n      return {\n        /*\n         * Override input listener to as no-op. Prevents parent input listeners from being passed through onto the input\n         * element which will result in the handler being called twice (once on the select element and once by the\n         * emitted input event by the change listener).\n        */\n        input: () => {},\n        change: event => this.emitValue(event.target.value, event),\n      };\n    },\n\n    state () {\n      return getValidationState(this.formattedMessages);\n    },\n\n    ariaInvalid () {\n      return this.state === VALIDATION_MESSAGE_TYPES.CRITICAL ? 'true' : undefined;\n    },\n\n    ariaDescribedBy () {\n      return this.showMessages && this.formattedMessages.length > 0 ? this.messagesId : undefined;\n    },\n\n    selectKey () {\n      return getUniqueString();\n    },\n\n    descriptionKey () {\n      return `select-${this.selectKey}-description`;\n    },\n\n    labelAriaDetails () {\n      if (this.$slots.description || this.description) {\n        return this.descriptionKey;\n      }\n\n      return this.$attrs['aria-details'];\n    },\n  },\n\n  mounted () {\n    this.validateOptionsPresence();\n    this.runValidations();\n  },\n\n  beforeUpdate () {\n    this.validateOptionsPresence();\n  },\n\n  methods: {\n    removeClassStyleAttrs,\n    emitValue (value, event) {\n      this.$emit('update:modelValue', value, event);\n    },\n\n    getOptionKey (value) {\n      return `select-${this.selectKey}-option-${value}`;\n    },\n\n    validateOptionsPresence () {\n      if (this.options?.length < 1 && !this.$slots.default) {\n        warn('Options are expected to be provided via prop or slot', this);\n      }\n    },\n\n    runValidations () {\n      const hasLabel = !!(this.$slots.label || this.label);\n      if (!hasLabel && !this.$attrs['aria-label']) {\n        console.info(\n          '[Dialtone] A label is required for accessibility. Provide a label prop and use show-label=\"false\" to hide it visually.',\n        );\n      }\n    },\n  },\n};\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"select-menu.js","names":[],"sources":["../../../components/select_menu/select_menu.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"rootClass\"\n    v-bind=\"addClassStyleAttrs($attrs)\"\n  >\n    <label>\n      <div\n        v-if=\"hasSlotContent($slots.label) || label\"\n        :aria-details=\"labelAriaDetails\"\n        :class=\"[\n          'd-label',\n          LABEL_SIZE_MODIFIERS[size],\n          labelClass,\n        ]\"\n        v-bind=\"labelChildProps\"\n        data-qa=\"dt-select-label\"\n      >\n        <!-- @slot Slot for label, defaults to label prop -->\n        <slot name=\"label\">{{ label }}</slot>\n      </div>\n      <div\n        v-if=\"hasSlotContent($slots.description) || description\"\n        :id=\"descriptionKey\"\n        :class=\"[\n          'd-description',\n          DESCRIPTION_SIZE_MODIFIERS[size],\n          descriptionClass,\n        ]\"\n        v-bind=\"descriptionChildProps\"\n        data-qa=\"dt-select-description\"\n      >\n        <!-- @slot Slot for description, defaults to description prop -->\n        <slot name=\"description\">{{ description }}</slot>\n      </div>\n      <div\n        :class=\"[\n          'd-select',\n          SELECT_SIZE_MODIFIERS[size],\n          selectClass,\n          { 'd-select--disabled': disabled },\n        ]\"\n        data-qa=\"dt-select-wrapper\"\n      >\n        <select\n          ref=\"selectElement\"\n          :class=\"[\n            'd-select__input',\n            SELECT_STATE_MODIFIERS[state],\n          ]\"\n          v-bind=\"removeClassStyleAttrs($attrs)\"\n          data-qa=\"dt-select\"\n          :disabled=\"disabled\"\n          :value=\"modelValue\"\n          v-on=\"selectListeners\"\n        >\n          <!-- @slot Slot for select menu options, defaults to options prop -->\n          <slot>\n            <option\n              v-for=\"option in options\"\n              :key=\"getOptionKey(option.value)\"\n              :value=\"option.value\"\n              :class=\"optionClass\"\n              v-bind=\"optionChildProps\"\n            >\n              {{ option.label }}\n            </option>\n          </slot>\n        </select>\n      </div>\n    </label>\n    <dt-validation-messages\n      :validation-messages=\"formattedMessages\"\n      :show-messages=\"showMessages\"\n      :class=\"messagesClass\"\n      v-bind=\"messagesChildProps\"\n      data-qa=\"dt-select-messages\"\n    />\n  </div>\n</template>\n\n<script>\nimport { warn } from 'vue';\nimport {\n  LABEL_SIZE_MODIFIERS,\n  DESCRIPTION_SIZE_MODIFIERS,\n} from '@/common/constants';\nimport {\n  SELECT_SIZE_MODIFIERS,\n  SELECT_STATE_MODIFIERS,\n} from './select_menu_constants';\nimport {\n  getUniqueString,\n  getValidationState,\n  hasSlotContent,\n  removeClassStyleAttrs,\n  addClassStyleAttrs,\n} from '@/common/utils';\nimport { MessagesMixin } from '@/common/mixins/input';\nimport { optionsValidator } from './select_menu_validators.js';\nimport { DtValidationMessages } from '../validation_messages';\n\n/**\n * A select menu is an input control that allows users to choose one option from a list.\n * @property {Boolean} disabled attribute\n * @property {String} name attribute\n * @property {String} value attribute\n * @see https://dialtone.dialpad.com/components/select.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtSelectMenu',\n\n  components: { DtValidationMessages },\n\n  mixins: [MessagesMixin],\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Label for the select\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Description for the select\n     */\n    description: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Select Menu Options, overridden by default slot. Each option has the following structure:\n     * `{ value: number || string (required), label: string (required) }`\n     * @param {Object[]} options - Optional - A list that can be used to create a list of select menu options\n     * @param {number|string} options[].value - Required - The option value\n     * @param {string} options[].label - Required - The option Label\n     */\n    options: {\n      type: Array,\n      default: () => [],\n      validator: options => optionsValidator(options),\n    },\n\n    /**\n     * Controls the size of the select\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(SELECT_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the description container\n     */\n    descriptionClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the select\n     */\n    selectClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize each option, should options be provided via prop\n     */\n    optionClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * A set of props that are passed into the label container\n     */\n    labelChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * A set of props that are passed into the description container\n     */\n    descriptionChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * A set of props that are passed into each option, should options be provided via prop\n     */\n    optionChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Disabled state of the select\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Additional class name for the root element.\n     * Can accept all of: String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    rootClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * The value of the select menu\n     */\n    modelValue: {\n      type: [String, Number],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {String | Number}\n     */\n    'input',\n\n    /**\n     * Event fired to sync the modelValue prop with the parent component\n     *\n     * @event input\n     * @type {String | Number}\n     */\n    'update:modelValue',\n\n    /**\n     * Native change event\n     *\n     * @event change\n     * @type {String | Number}\n     */\n    'change',\n  ],\n\n  data () {\n    return {\n      LABEL_SIZE_MODIFIERS,\n      DESCRIPTION_SIZE_MODIFIERS,\n      SELECT_SIZE_MODIFIERS,\n      SELECT_STATE_MODIFIERS,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    selectListeners () {\n      return {\n        /*\n         * Override input listener to as no-op. Prevents parent input listeners from being passed through onto the input\n         * element which will result in the handler being called twice (once on the select element and once by the\n         * emitted input event by the change listener).\n        */\n        input: () => {},\n        change: event => this.emitValue(event.target.value, event),\n      };\n    },\n\n    state () {\n      return getValidationState(this.formattedMessages);\n    },\n\n    selectKey () {\n      return getUniqueString();\n    },\n\n    descriptionKey () {\n      return `select-${this.selectKey}-description`;\n    },\n\n    labelAriaDetails () {\n      if (this.$slots.description || this.description) {\n        return this.descriptionKey;\n      }\n\n      return this.$attrs['aria-details'];\n    },\n  },\n\n  mounted () {\n    this.validateOptionsPresence();\n  },\n\n  beforeUpdate () {\n    this.validateOptionsPresence();\n  },\n\n  methods: {\n    removeClassStyleAttrs,\n    addClassStyleAttrs,\n    emitValue (value, event) {\n      this.$emit('update:modelValue', value, event);\n      this.$emit('input', value, event);\n      this.$emit('change', value, event);\n    },\n\n    getOptionKey (value) {\n      return `select-${this.selectKey}-option-${value}`;\n    },\n\n    validateOptionsPresence () {\n      if (this.options?.length < 1 && !this.$slots.default) {\n        warn('Options are expected to be provided via prop or slot', this);\n      }\n    },\n  },\n};\n</script>\n"],"mappings":"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"}

package/dist/lib/settings-menu-button/settings-menu-button.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(`../button/button.cjs`);let n=require(`vue`),r=require(`@dialpad/dialtone-icons/vue`);var i={compatConfig:{MODE:3},name:`DtRecipeSettingsMenuButton`,components:{DtButton:t.default,DtIconMoreVertical:r.DtIconMoreVertical},inheritAttrs:!1,props:{updateAvailable:{type:Boolean,default:!1},ariaLabel:{type:String,required:!0}}};function a(e,t,r,i,a,o){let s=(0,n.resolveComponent)(`dt-icon-more-vertical`),c=(0,n.resolveComponent)(`dt-button`);return r.updateAvailable?((0,n.openBlock)(),(0,n.createBlock)(c,(0,n.mergeProps)({key:0,kind:`muted`,importance:`outlined`,size:100,class:`d-recipe-settings-menu-button-update`,"aria-label":r.ariaLabel},e.$attrs),{endIcon:(0,n.withCtx)(()=>[(0,n.createVNode)(s,{size:`300`})]),default:(0,n.withCtx)(()=>[(0,n.renderSlot)(e.$slots,`default`)]),_:3},16,[`aria-label`])):((0,n.openBlock)(),(0,n.createBlock)(c,(0,n.mergeProps)({key:1,importance:`clear`,kind:`muted`,class:`d-recipe-settings-menu-button`,"aria-label":r.ariaLabel},e.$attrs),{icon:(0,n.withCtx)(()=>[(0,n.createVNode)(s,{size:`300`})]),_:1},16,[`aria-label`]))}var o=e.t(i,[[`render`,a]]);exports.default=o;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),t=require(`../button/button.cjs`);let n=require(`vue`),r=require(`@dialpad/dialtone-icons/vue3`);var i={compatConfig:{MODE:3},name:`DtRecipeSettingsMenuButton`,components:{DtButton:t.default,DtIconMoreVertical:r.DtIconMoreVertical},inheritAttrs:!1,props:{updateAvailable:{type:Boolean,default:!1},ariaLabel:{type:String,required:!0}}};function a(e,t,r,i,a,o){let s=(0,n.resolveComponent)(`dt-icon-more-vertical`),c=(0,n.resolveComponent)(`dt-button`);return r.updateAvailable?((0,n.openBlock)(),(0,n.createBlock)(c,(0,n.mergeProps)({key:0,importance:`outlined`,size:`xs`,"icon-position":`right`,class:`d-recipe-settings-menu-button-update`,"aria-label":r.ariaLabel},e.$attrs),{icon:(0,n.withCtx)(()=>[(0,n.createVNode)(s,{size:`300`})]),default:(0,n.withCtx)(()=>[(0,n.renderSlot)(e.$slots,`default`)]),_:3},16,[`aria-label`])):((0,n.openBlock)(),(0,n.createBlock)(c,(0,n.mergeProps)({key:1,importance:`clear`,kind:`inverted`,class:`d-recipe-settings-menu-button`,"aria-label":r.ariaLabel},e.$attrs),{icon:(0,n.withCtx)(()=>[(0,n.createVNode)(s,{size:`300`})]),_:1},16,[`aria-label`]))}var o=e.t(i,[[`render`,a]]);exports.default=o;
 //# sourceMappingURL=settings-menu-button.cjs.map

package/dist/lib/settings-menu-button/settings-menu-button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"settings-menu-button.cjs","names":[],"sources":["../../../recipes/header/settings_menu_button/settings_menu_button.vue"],"sourcesContent":["<template>\n  <dt-button\n    v-if=\"updateAvailable\"\n    kind=\"muted\"\n    importance=\"outlined\"\n    :size=\"100\"\n    class=\"d-recipe-settings-menu-button-update\"\n    :aria-label=\"ariaLabel\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n    <template #endIcon>\n      <dt-icon-more-vertical\n        size=\"300\"\n      />\n    </template>\n  </dt-button>\n  <dt-button\n    v-else\n    importance=\"clear\"\n    kind=\"muted\"\n    class=\"d-recipe-settings-menu-button\"\n    :aria-label=\"ariaLabel\"\n    v-bind=\"$attrs\"\n  >\n    <template #icon>\n      <dt-icon-more-vertical\n        size=\"300\"\n      />\n    </template>\n  </dt-button>\n</template>\n\n<script>\n/*\n * TODO (Dialtone 10): Localize this component as it'd be a breaking change localizing right now.\n */\nimport DtButton from '@/components/Button/Button.vue';\nimport { DtIconMoreVertical } from '@dialpad/dialtone-icons/vue';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeSettingsMenuButton',\n\n  components: {\n    DtButton,\n    DtIconMoreVertical,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Determines whether the button should display the update state\n     * default is false\n     * @values true, false\n     */\n    updateAvailable: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Aria label\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n  },\n\n};\n</script>\n"],"mappings":"mSAwCA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,6BAEN,WAAY,CACV,SAAA,EAAA,QACA,mBAAA,EAAA,mBACD,CAED,aAAc,GAEd,MAAO,CAML,gBAAiB,CACf,KAAM,QACN,QAAS,GACV,CAKD,UAAW,CACT,KAAM,OACN,SAAU,GACX,CACF,CAEF,4HArES,EAAA,kBAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,aAcI,GAAA,EAAA,EAAA,YAAA,OAbV,KAAK,QACL,WAAW,WACV,KAAM,IACP,MAAM,uCACL,aAAY,EAAA,WACL,EAAA,OAAM,CAAA,CAGH,SAAA,EAAA,EAAA,aAGP,EAAA,EAAA,EAAA,aAAA,EAAA,CADA,KAAK,MAAK,CAAA,CAAA,CAAA,2BAHN,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,UAAA,CAAA,CAAA,+DAoBE,GAAA,EAAA,EAAA,YAAA,OAXV,WAAW,QACX,KAAK,QACL,MAAM,gCACL,aAAY,EAAA,WACL,EAAA,OAAM,CAAA,CAEH,MAAA,EAAA,EAAA,aAGP,EAAA,EAAA,EAAA,aAAA,EAAA,CADA,KAAK,MAAK,CAAA,CAAA,CAAA"}
+{"version":3,"file":"settings-menu-button.cjs","names":[],"sources":["../../../recipes/header/settings_menu_button/settings_menu_button.vue"],"sourcesContent":["<template>\n  <dt-button\n    v-if=\"updateAvailable\"\n    importance=\"outlined\"\n    size=\"xs\"\n    icon-position=\"right\"\n    class=\"d-recipe-settings-menu-button-update\"\n    :aria-label=\"ariaLabel\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n    <template #icon>\n      <dt-icon-more-vertical\n        size=\"300\"\n      />\n    </template>\n  </dt-button>\n  <dt-button\n    v-else\n    importance=\"clear\"\n    kind=\"inverted\"\n    class=\"d-recipe-settings-menu-button\"\n    :aria-label=\"ariaLabel\"\n    v-bind=\"$attrs\"\n  >\n    <template #icon>\n      <dt-icon-more-vertical\n        size=\"300\"\n      />\n    </template>\n  </dt-button>\n</template>\n\n<script>\n/*\n * TODO (Dialtone 10): Localize this component as it'd be a breaking change localizing right now.\n */\nimport DtButton from '@/components/button/button.vue';\nimport { DtIconMoreVertical } from '@dialpad/dialtone-icons/vue3';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeSettingsMenuButton',\n\n  components: {\n    DtButton,\n    DtIconMoreVertical,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Determines whether the button should display the update state\n     * default is false\n     * @values true, false\n     */\n    updateAvailable: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Aria label\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n  },\n\n};\n</script>\n"],"mappings":"oSAwCA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,6BAEN,WAAY,CACV,SAAA,EAAA,QACA,mBAAA,EAAA,mBACD,CAED,aAAc,GAEd,MAAO,CAML,gBAAiB,CACf,KAAM,QACN,QAAS,GACV,CAKD,UAAW,CACT,KAAM,OACN,SAAU,GACX,CACF,CAEF,4HArES,EAAA,kBAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,aAcI,GAAA,EAAA,EAAA,YAAA,OAbV,WAAW,WACX,KAAK,KACL,gBAAc,QACd,MAAM,uCACL,aAAY,EAAA,WACL,EAAA,OAAM,CAAA,CAGH,MAAA,EAAA,EAAA,aAGP,EAAA,EAAA,EAAA,aAAA,EAAA,CADA,KAAK,MAAK,CAAA,CAAA,CAAA,2BAHN,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,UAAA,CAAA,CAAA,+DAoBE,GAAA,EAAA,EAAA,YAAA,OAXV,WAAW,QACX,KAAK,WACL,MAAM,gCACL,aAAY,EAAA,WACL,EAAA,OAAM,CAAA,CAEH,MAAA,EAAA,EAAA,aAGP,EAAA,EAAA,EAAA,aAAA,EAAA,CADA,KAAK,MAAK,CAAA,CAAA,CAAA"}

package/dist/lib/settings-menu-button/settings-menu-button.js

@@ -1,7 +1,7 @@
 import { t as e } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
 import t from "../button/button.js";
 import { createBlock as n, createVNode as r, mergeProps as i, openBlock as a, renderSlot as o, resolveComponent as s, withCtx as c } from "vue";
-import { DtIconMoreVertical as l } from "@dialpad/dialtone-icons/vue";
+import { DtIconMoreVertical as l } from "@dialpad/dialtone-icons/vue3";
 //#region recipes/header/settings_menu_button/settings_menu_button.vue
 var u = {
 	compatConfig: { MODE: 3 },
@@ -26,19 +26,19 @@ function d(e, t, l, u, d, f) {
 	let p = s("dt-icon-more-vertical"), m = s("dt-button");
 	return l.updateAvailable ? (a(), n(m, i({
 		key: 0,
-		kind: "muted",
 		importance: "outlined",
-		size: 100,
+		size: "xs",
+		"icon-position": "right",
 		class: "d-recipe-settings-menu-button-update",
 		"aria-label": l.ariaLabel
 	}, e.$attrs), {
-		endIcon: c(() => [r(p, { size: "300" })]),
+		icon: c(() => [r(p, { size: "300" })]),
 		default: c(() => [o(e.$slots, "default")]),
 		_: 3
 	}, 16, ["aria-label"])) : (a(), n(m, i({
 		key: 1,
 		importance: "clear",
-		kind: "muted",
+		kind: "inverted",
 		class: "d-recipe-settings-menu-button",
 		"aria-label": l.ariaLabel
 	}, e.$attrs), {

package/dist/lib/settings-menu-button/settings-menu-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"settings-menu-button.js","names":[],"sources":["../../../recipes/header/settings_menu_button/settings_menu_button.vue"],"sourcesContent":["<template>\n  <dt-button\n    v-if=\"updateAvailable\"\n    kind=\"muted\"\n    importance=\"outlined\"\n    :size=\"100\"\n    class=\"d-recipe-settings-menu-button-update\"\n    :aria-label=\"ariaLabel\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n    <template #endIcon>\n      <dt-icon-more-vertical\n        size=\"300\"\n      />\n    </template>\n  </dt-button>\n  <dt-button\n    v-else\n    importance=\"clear\"\n    kind=\"muted\"\n    class=\"d-recipe-settings-menu-button\"\n    :aria-label=\"ariaLabel\"\n    v-bind=\"$attrs\"\n  >\n    <template #icon>\n      <dt-icon-more-vertical\n        size=\"300\"\n      />\n    </template>\n  </dt-button>\n</template>\n\n<script>\n/*\n * TODO (Dialtone 10): Localize this component as it'd be a breaking change localizing right now.\n */\nimport DtButton from '@/components/Button/Button.vue';\nimport { DtIconMoreVertical } from '@dialpad/dialtone-icons/vue';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeSettingsMenuButton',\n\n  components: {\n    DtButton,\n    DtIconMoreVertical,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Determines whether the button should display the update state\n     * default is false\n     * @values true, false\n     */\n    updateAvailable: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Aria label\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n  },\n\n};\n</script>\n"],"mappings":";;;;;AAwCA,IAAK,IAAU;CACb,cAAc,EAAE,MAAM,GAAG;CACzB,MAAM;CAEN,YAAY;EACV,UAAA;EACA;EACD;CAED,cAAc;CAEd,OAAO;EAML,iBAAiB;GACf,MAAM;GACN,SAAS;GACV;EAKD,WAAW;GACT,MAAM;GACN,UAAU;GACX;EACF;CAEF;;;QArES,EAAA,mBAAA,GAAA,EADR,EAeY,GAfZ,EAeY;;EAbV,MAAK;EACL,YAAW;EACV,MAAM;EACP,OAAM;EACL,cAAY,EAAA;IACL,EAAA,OAAM,EAAA;EAGH,SAAO,QAGd,CAFF,EAEE,GAAA,EADA,MAAK,OAAK,CAAA,CAAA,CAAA;mBAHN,CAAR,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA;;iCAOV,EAaY,GAbZ,EAaY;;EAXV,YAAW;EACX,MAAK;EACL,OAAM;EACL,cAAY,EAAA;IACL,EAAA,OAAM,EAAA;EAEH,MAAI,QAGX,CAFF,EAEE,GAAA,EADA,MAAK,OAAK,CAAA,CAAA,CAAA"}
+{"version":3,"file":"settings-menu-button.js","names":[],"sources":["../../../recipes/header/settings_menu_button/settings_menu_button.vue"],"sourcesContent":["<template>\n  <dt-button\n    v-if=\"updateAvailable\"\n    importance=\"outlined\"\n    size=\"xs\"\n    icon-position=\"right\"\n    class=\"d-recipe-settings-menu-button-update\"\n    :aria-label=\"ariaLabel\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n    <template #icon>\n      <dt-icon-more-vertical\n        size=\"300\"\n      />\n    </template>\n  </dt-button>\n  <dt-button\n    v-else\n    importance=\"clear\"\n    kind=\"inverted\"\n    class=\"d-recipe-settings-menu-button\"\n    :aria-label=\"ariaLabel\"\n    v-bind=\"$attrs\"\n  >\n    <template #icon>\n      <dt-icon-more-vertical\n        size=\"300\"\n      />\n    </template>\n  </dt-button>\n</template>\n\n<script>\n/*\n * TODO (Dialtone 10): Localize this component as it'd be a breaking change localizing right now.\n */\nimport DtButton from '@/components/button/button.vue';\nimport { DtIconMoreVertical } from '@dialpad/dialtone-icons/vue3';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeSettingsMenuButton',\n\n  components: {\n    DtButton,\n    DtIconMoreVertical,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Determines whether the button should display the update state\n     * default is false\n     * @values true, false\n     */\n    updateAvailable: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Aria label\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n  },\n\n};\n</script>\n"],"mappings":";;;;;AAwCA,IAAK,IAAU;CACb,cAAc,EAAE,MAAM,GAAG;CACzB,MAAM;CAEN,YAAY;EACV,UAAA;EACA;EACD;CAED,cAAc;CAEd,OAAO;EAML,iBAAiB;GACf,MAAM;GACN,SAAS;GACV;EAKD,WAAW;GACT,MAAM;GACN,UAAU;GACX;EACF;CAEF;;;QArES,EAAA,mBAAA,GAAA,EADR,EAeY,GAfZ,EAeY;;EAbV,YAAW;EACX,MAAK;EACL,iBAAc;EACd,OAAM;EACL,cAAY,EAAA;IACL,EAAA,OAAM,EAAA;EAGH,MAAI,QAGX,CAFF,EAEE,GAAA,EADA,MAAK,OAAK,CAAA,CAAA,CAAA;mBAHN,CAAR,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA;;iCAOV,EAaY,GAbZ,EAaY;;EAXV,YAAW;EACX,MAAK;EACL,OAAM;EACL,cAAY,EAAA;IACL,EAAA,OAAM,EAAA;EAEH,MAAI,QAGX,CAFF,EAEE,GAAA,EADA,MAAK,OAAK,CAAA,CAAA,CAAA"}

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

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var e=3e6,t={circle:`d-bar-circle`,square:`d-bar-200`},n=[`body`,`heading`],r={100:`16px`,200:`24px`,300:`32px`,400:`48px`,500:`64px`,sm:`24px`,md:`32px`,lg:`48px`},i={200:`d-h-25`,300:`d-h-24px`,400:`d-h-50`,sm:`d-h-25`,md:`d-h-24px`,lg:`d-h-50`},a={SKELETON_RIPPLE_DURATION:e,SKELETON_SHAPES:t,SKELETON_TEXT_TYPES:n,SKELETON_HEADING_HEIGHTS:i};exports.SKELETON_HEADING_HEIGHTS=i,exports.SKELETON_RIPPLE_DURATION=e,exports.SKELETON_SHAPES=t,exports.SKELETON_SHAPE_SIZES=r,exports.SKELETON_TEXT_TYPES=n,exports.default=a;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var e=3e6,t={circle:`d-bar-circle`,square:`d-bar2`},n=[`body`,`heading`],r={sm:`24px`,md:`32px`,lg:`48px`},i={sm:`d-h16`,md:`d-h24`,lg:`d-h32`},a={SKELETON_RIPPLE_DURATION:e,SKELETON_SHAPES:t,SKELETON_TEXT_TYPES:n,SKELETON_HEADING_HEIGHTS:i};exports.SKELETON_HEADING_HEIGHTS=i,exports.SKELETON_RIPPLE_DURATION=e,exports.SKELETON_SHAPES=t,exports.SKELETON_SHAPE_SIZES=r,exports.SKELETON_TEXT_TYPES=n,exports.default=a;
 //# sourceMappingURL=skeleton-constants.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"skeleton-constants.cjs","names":[],"sources":["../../../components/Skeleton/SkeletonConstants.js"],"sourcesContent":["// NOTE: RippleDuration controls how long the delay is for the animation\n// of a skeleton 1000 pixels from the top of the page. Each skeleton\n// from the top down will have a delay duration from 0 to this offset.\n// The delay of each skeleton animation is based on how far down the page\n// the skeleton is rendered. This is a linear relationship. The unit\n// is miliseconds.\nexport const SKELETON_RIPPLE_DURATION = 3000000;\n\nexport const SKELETON_SHAPES = {\n  circle: 'd-bar-circle',\n  square: 'd-bar-200',\n};\n\nexport const SKELETON_TEXT_TYPES = [\n  'body',\n  'heading',\n];\n\nexport const SKELETON_SHAPE_SIZES = {\n  // Numeric (preferred)\n  100: '16px',\n  200: '24px',\n  300: '32px',\n  400: '48px',\n  500: '64px',\n  // T-shirt aliases (deprecated)\n  sm: '24px',\n  md: '32px',\n  lg: '48px',\n};\n\nexport const SKELETON_HEADING_HEIGHTS = {\n  // Numeric (preferred)\n  200: 'd-h-25',\n  300: 'd-h-24px',\n  400: 'd-h-50',\n  // T-shirt aliases (deprecated)\n  sm: 'd-h-25',\n  md: 'd-h-24px',\n  lg: 'd-h-50',\n};\n\nexport default {\n  SKELETON_RIPPLE_DURATION,\n  SKELETON_SHAPES,\n  SKELETON_TEXT_TYPES,\n  SKELETON_HEADING_HEIGHTS,\n};\n"],"mappings":"+FAMA,IAAa,EAA2B,IAE3B,EAAkB,CAC7B,OAAQ,eACR,OAAQ,YACT,CAEY,EAAsB,CACjC,OACA,UACD,CAEY,EAAuB,CAElC,IAAK,OACL,IAAK,OACL,IAAK,OACL,IAAK,OACL,IAAK,OAEL,GAAI,OACJ,GAAI,OACJ,GAAI,OACL,CAEY,EAA2B,CAEtC,IAAK,SACL,IAAK,WACL,IAAK,SAEL,GAAI,SACJ,GAAI,WACJ,GAAI,SACL,CAED,EAAe,CACb,2BACA,kBACA,sBACA,2BACD"}
+{"version":3,"file":"skeleton-constants.cjs","names":[],"sources":["../../../components/skeleton/skeleton_constants.js"],"sourcesContent":["// NOTE: RippleDuration controls how long the delay is for the animation\n// of a skeleton 1000 pixels from the top of the page. Each skeleton\n// from the top down will have a delay duration from 0 to this offset.\n// The delay of each skeleton animation is based on how far down the page\n// the skeleton is rendered. This is a linear relationship. The unit\n// is miliseconds.\nexport const SKELETON_RIPPLE_DURATION = 3000000;\n\nexport const SKELETON_SHAPES = {\n  circle: 'd-bar-circle',\n  square: 'd-bar2',\n};\n\nexport const SKELETON_TEXT_TYPES = [\n  'body',\n  'heading',\n];\n\nexport const SKELETON_SHAPE_SIZES = {\n  sm: '24px',\n  md: '32px',\n  lg: '48px',\n};\n\nexport const SKELETON_HEADING_HEIGHTS = {\n  sm: 'd-h16',\n  md: 'd-h24',\n  lg: 'd-h32',\n};\n\nexport default {\n  SKELETON_RIPPLE_DURATION,\n  SKELETON_SHAPES,\n  SKELETON_TEXT_TYPES,\n  SKELETON_HEADING_HEIGHTS,\n};\n"],"mappings":"+FAMA,IAAa,EAA2B,IAE3B,EAAkB,CAC7B,OAAQ,eACR,OAAQ,SACT,CAEY,EAAsB,CACjC,OACA,UACD,CAEY,EAAuB,CAClC,GAAI,OACJ,GAAI,OACJ,GAAI,OACL,CAEY,EAA2B,CACtC,GAAI,QACJ,GAAI,QACJ,GAAI,QACL,CAED,EAAe,CACb,2BACA,kBACA,sBACA,2BACD"}

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

@@ -1,23 +1,15 @@
-//#region components/Skeleton/SkeletonConstants.js
+//#region components/skeleton/skeleton_constants.js
 var e = 3e6, t = {
 	circle: "d-bar-circle",
-	square: "d-bar-200"
+	square: "d-bar2"
 }, n = ["body", "heading"], r = {
-	100: "16px",
-	200: "24px",
-	300: "32px",
-	400: "48px",
-	500: "64px",
 	sm: "24px",
 	md: "32px",
 	lg: "48px"
 }, i = {
-	200: "d-h-25",
-	300: "d-h-24px",
-	400: "d-h-50",
-	sm: "d-h-25",
-	md: "d-h-24px",
-	lg: "d-h-50"
+	sm: "d-h16",
+	md: "d-h24",
+	lg: "d-h32"
 }, a = {
 	SKELETON_RIPPLE_DURATION: e,
 	SKELETON_SHAPES: t,

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

@@ -1 +1 @@
-{"version":3,"file":"skeleton-constants.js","names":[],"sources":["../../../components/Skeleton/SkeletonConstants.js"],"sourcesContent":["// NOTE: RippleDuration controls how long the delay is for the animation\n// of a skeleton 1000 pixels from the top of the page. Each skeleton\n// from the top down will have a delay duration from 0 to this offset.\n// The delay of each skeleton animation is based on how far down the page\n// the skeleton is rendered. This is a linear relationship. The unit\n// is miliseconds.\nexport const SKELETON_RIPPLE_DURATION = 3000000;\n\nexport const SKELETON_SHAPES = {\n  circle: 'd-bar-circle',\n  square: 'd-bar-200',\n};\n\nexport const SKELETON_TEXT_TYPES = [\n  'body',\n  'heading',\n];\n\nexport const SKELETON_SHAPE_SIZES = {\n  // Numeric (preferred)\n  100: '16px',\n  200: '24px',\n  300: '32px',\n  400: '48px',\n  500: '64px',\n  // T-shirt aliases (deprecated)\n  sm: '24px',\n  md: '32px',\n  lg: '48px',\n};\n\nexport const SKELETON_HEADING_HEIGHTS = {\n  // Numeric (preferred)\n  200: 'd-h-25',\n  300: 'd-h-24px',\n  400: 'd-h-50',\n  // T-shirt aliases (deprecated)\n  sm: 'd-h-25',\n  md: 'd-h-24px',\n  lg: 'd-h-50',\n};\n\nexport default {\n  SKELETON_RIPPLE_DURATION,\n  SKELETON_SHAPES,\n  SKELETON_TEXT_TYPES,\n  SKELETON_HEADING_HEIGHTS,\n};\n"],"mappings":";AAMA,IAAa,IAA2B,KAE3B,IAAkB;CAC7B,QAAQ;CACR,QAAQ;CACT,EAEY,IAAsB,CACjC,QACA,UACD,EAEY,IAAuB;CAElC,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CAEL,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAEY,IAA2B;CAEtC,KAAK;CACL,KAAK;CACL,KAAK;CAEL,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAED,IAAe;CACb;CACA;CACA;CACA;CACD"}
+{"version":3,"file":"skeleton-constants.js","names":[],"sources":["../../../components/skeleton/skeleton_constants.js"],"sourcesContent":["// NOTE: RippleDuration controls how long the delay is for the animation\n// of a skeleton 1000 pixels from the top of the page. Each skeleton\n// from the top down will have a delay duration from 0 to this offset.\n// The delay of each skeleton animation is based on how far down the page\n// the skeleton is rendered. This is a linear relationship. The unit\n// is miliseconds.\nexport const SKELETON_RIPPLE_DURATION = 3000000;\n\nexport const SKELETON_SHAPES = {\n  circle: 'd-bar-circle',\n  square: 'd-bar2',\n};\n\nexport const SKELETON_TEXT_TYPES = [\n  'body',\n  'heading',\n];\n\nexport const SKELETON_SHAPE_SIZES = {\n  sm: '24px',\n  md: '32px',\n  lg: '48px',\n};\n\nexport const SKELETON_HEADING_HEIGHTS = {\n  sm: 'd-h16',\n  md: 'd-h24',\n  lg: 'd-h32',\n};\n\nexport default {\n  SKELETON_RIPPLE_DURATION,\n  SKELETON_SHAPES,\n  SKELETON_TEXT_TYPES,\n  SKELETON_HEADING_HEIGHTS,\n};\n"],"mappings":";AAMA,IAAa,IAA2B,KAE3B,IAAkB;CAC7B,QAAQ;CACR,QAAQ;CACT,EAEY,IAAsB,CACjC,QACA,UACD,EAEY,IAAuB;CAClC,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAEY,IAA2B;CACtC,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAED,IAAe;CACb;CACA;CACA;CACA;CACD"}

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

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),t=require(`./skeleton-constants.cjs`),n=require(`./skeleton-shape.cjs`),r=require(`./skeleton-paragraph.cjs`);let i=require(`vue`);var a={name:`DtSkeletonListItem`,components:{DtSkeletonShape:n.default,DtSkeletonParagraph:r.default},props:{shape:{type:String,default:`circle`,validator:e=>Object.keys(t.SKELETON_SHAPES).includes(e)},shapeSize:{type:[String,Number],default:300},paragraphs:{type:Object,default:()=>({rows:3,randomWidth:!0})},animationDuration:{type:Number,default:-1},animate:{type:Boolean,default:!0},offset:{type:Number,default:1},shapeClass:{type:String,default:``},contentClass:{type:String,default:``}}},o={class:`d-skeleton-list-item__paragraph-container`};function s(e,t,n,r,a,s){let c=(0,i.resolveComponent)(`dt-skeleton-shape`),l=(0,i.resolveComponent)(`dt-skeleton-paragraph`);return(0,i.openBlock)(),(0,i.createElementBlock)(`div`,{"data-qa":`skeleton-list-item`,class:(0,i.normalizeClass)([`d-skeleton-list-item`,{"d-skeleton-list-item--single":n.paragraphs.rows===1},n.contentClass])},[(0,i.createVNode)(c,{class:`d-skeleton-list-item__shape`,size:n.shapeSize,shape:n.shape,"animation-duration":n.animationDuration,animate:n.animate,offset:n.offset,"content-class":n.shapeClass},null,8,[`size`,`shape`,`animation-duration`,`animate`,`offset`,`content-class`]),(0,i.createElementVNode)(`div`,o,[(0,i.createVNode)(l,(0,i.mergeProps)(n.paragraphs,{"animation-duration":n.animationDuration,animate:n.animate,offset:n.offset}),null,16,[`animation-duration`,`animate`,`offset`])])],2)}var c=e.t(a,[[`render`,s]]);exports.default=c;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),t=require(`./skeleton-constants.cjs`),n=require(`./skeleton-shape.cjs`),r=require(`./skeleton-paragraph.cjs`);let i=require(`vue`);var a={compatConfig:{MODE:3},name:`DtSkeletonListItem`,components:{DtSkeletonShape:n.default,DtSkeletonParagraph:r.default},props:{shape:{type:String,default:`circle`,validator:e=>Object.keys(t.SKELETON_SHAPES).includes(e)},shapeSize:{type:String,default:`md`},paragraphs:{type:Object,default:()=>({rows:3,randomWidth:!0})},animationDuration:{type:Number,default:-1},animate:{type:Boolean,default:!0},offset:{type:Number,default:1},shapeClass:{type:String,default:``},contentClass:{type:String,default:``}}},o={class:`d-skeleton-list-item__paragraph-container`};function s(e,t,n,r,a,s){let c=(0,i.resolveComponent)(`dt-skeleton-shape`),l=(0,i.resolveComponent)(`dt-skeleton-paragraph`);return(0,i.openBlock)(),(0,i.createElementBlock)(`div`,{"data-qa":`skeleton-list-item`,class:(0,i.normalizeClass)([`d-skeleton-list-item`,{"d-skeleton-list-item--single":n.paragraphs.rows===1},n.contentClass])},[(0,i.createVNode)(c,{class:`d-skeleton-list-item__shape`,size:n.shapeSize,shape:n.shape,"animation-duration":n.animationDuration,animate:n.animate,offset:n.offset,"content-class":n.shapeClass},null,8,[`size`,`shape`,`animation-duration`,`animate`,`offset`,`content-class`]),(0,i.createElementVNode)(`div`,o,[(0,i.createVNode)(l,(0,i.mergeProps)(n.paragraphs,{"animation-duration":n.animationDuration,animate:n.animate,offset:n.offset}),null,16,[`animation-duration`,`animate`,`offset`])])],2)}var c=e.t(a,[[`render`,s]]);exports.default=c;
 //# sourceMappingURL=skeleton-list-item.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"skeleton-list-item.cjs","names":[],"sources":["../../../components/Skeleton/SkeletonListItem.vue"],"sourcesContent":["<template>\n  <div\n    data-qa=\"skeleton-list-item\"\n    :class=\"[\n      'd-skeleton-list-item',\n      {\n        'd-skeleton-list-item--single': paragraphs.rows === 1,\n      },\n      contentClass,\n    ]\"\n  >\n    <dt-skeleton-shape\n      class=\"d-skeleton-list-item__shape\"\n      :size=\"shapeSize\"\n      :shape=\"shape\"\n      :animation-duration=\"animationDuration\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n      :content-class=\"shapeClass\"\n    />\n    <div class=\"d-skeleton-list-item__paragraph-container\">\n      <dt-skeleton-paragraph\n        v-bind=\"paragraphs\"\n        :animation-duration=\"animationDuration\"\n        :animate=\"animate\"\n        :offset=\"offset\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { SKELETON_SHAPES } from './SkeletonConstants';\nimport DtSkeletonShape from './SkeletonShape.vue';\nimport DtSkeletonParagraph from './SkeletonParagraph.vue';\n\nexport default {\n  name: 'DtSkeletonListItem',\n\n  components: {\n    DtSkeletonShape,\n    DtSkeletonParagraph,\n  },\n\n  props: {\n    /**\n     * Defines the shape of the skeleton, accepts circle or square.\n     * @values circle, square\n     */\n    shape: {\n      type: String,\n      default: 'circle',\n      validator: shape => Object.keys(SKELETON_SHAPES).includes(shape),\n    },\n\n    /**\n     * Size of the shape\n     * @values 100, 200, 300, 400, 500\n     */\n    shapeSize: {\n      type: [String, Number],\n      default: 300,\n    },\n\n    /**\n     * Object containing quantity of paragraphs to display\n     * and a randomWidth boolean.\n     */\n    paragraphs: {\n      type: Object,\n      default: () => ({ rows: 3, randomWidth: true }),\n    },\n\n    /**\n     * Duration time of the animation (ms), set -1 for an infinite animation.\n     */\n    animationDuration: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * This property has higher priority than \"option.animate\"\n     * @values true, false\n     */\n    animate: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * RippleDuration controls how long the delay is for the animation of a\n     * placeholder 1000 pixels from the top of the page. Each placeholder\n     * from the top down will have a delay duration from 0 to this offset.\n     * The delay of each placeholder animation is based on how far down the page\n     * the placeholder is rendered. This is a linear relationship. The unit\n     * is milliseconds.\n     */\n    offset: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Additional class name for the shape.\n     */\n    shapeClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the content.\n     */\n    contentClass: {\n      type: String,\n      default: '',\n    },\n  },\n};\n</script>\n"],"mappings":"sUAoCA,IAAK,EAAU,CACb,KAAM,qBAEN,WAAY,CACV,gBAAA,EAAA,QACA,oBAAA,EAAA,QACD,CAED,MAAO,CAKL,MAAO,CACL,KAAM,OACN,QAAS,SACT,UAAW,GAAS,OAAO,KAAK,EAAA,gBAAgB,CAAC,SAAS,EAAM,CACjE,CAMD,UAAW,CACT,KAAM,CAAC,OAAQ,OAAO,CACtB,QAAS,IACV,CAMD,WAAY,CACV,KAAM,OACN,aAAgB,CAAE,KAAM,EAAG,YAAa,GAAM,EAC/C,CAKD,kBAAmB,CACjB,KAAM,OACN,QAAS,GACV,CAMD,QAAS,CACP,KAAM,QACN,QAAS,GACV,CAUD,OAAQ,CACN,KAAM,OACN,QAAS,EACV,CAKD,WAAY,CACV,KAAM,OACN,QAAS,GACV,CAKD,aAAc,CACZ,KAAM,OACN,QAAS,GACV,CACF,CACF,IAnGQ,MAAM,4CAA2C,8KAQlD,MAAA,CA1BJ,UAAQ,qBACP,OAAA,EAAA,EAAA,gBAAK,wDAAkF,EAAA,WAAW,OAAI,EAAA,CAAuB,EAAA,mCAgB5H,EAAA,CAPA,MAAM,8BACL,KAAM,EAAA,UACN,MAAO,EAAA,MACP,qBAAoB,EAAA,kBACpB,QAAS,EAAA,QACT,OAAQ,EAAA,OACR,gBAAe,EAAA,sHASZ,MAPN,EAOM,EAAA,EAAA,EAAA,aADF,GAAA,EAAA,EAAA,YAAA,EAJQ,WAAU,CACjB,qBAAoB,EAAA,kBACpB,QAAS,EAAA,QACT,OAAQ,EAAA"}
+{"version":3,"file":"skeleton-list-item.cjs","names":[],"sources":["../../../components/skeleton/skeleton-list-item.vue"],"sourcesContent":["<template>\n  <div\n    data-qa=\"skeleton-list-item\"\n    :class=\"[\n      'd-skeleton-list-item',\n      {\n        'd-skeleton-list-item--single': paragraphs.rows === 1,\n      },\n      contentClass,\n    ]\"\n  >\n    <dt-skeleton-shape\n      class=\"d-skeleton-list-item__shape\"\n      :size=\"shapeSize\"\n      :shape=\"shape\"\n      :animation-duration=\"animationDuration\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n      :content-class=\"shapeClass\"\n    />\n    <div class=\"d-skeleton-list-item__paragraph-container\">\n      <dt-skeleton-paragraph\n        v-bind=\"paragraphs\"\n        :animation-duration=\"animationDuration\"\n        :animate=\"animate\"\n        :offset=\"offset\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { SKELETON_SHAPES } from './skeleton_constants';\nimport DtSkeletonShape from './skeleton-shape.vue';\nimport DtSkeletonParagraph from './skeleton-paragraph.vue';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtSkeletonListItem',\n\n  components: {\n    DtSkeletonShape,\n    DtSkeletonParagraph,\n  },\n\n  props: {\n    /**\n     * Defines the shape of the skeleton, accepts circle or square.\n     * @values circle, square\n     */\n    shape: {\n      type: String,\n      default: 'circle',\n      validator: shape => Object.keys(SKELETON_SHAPES).includes(shape),\n    },\n\n    /**\n     * Size of the shape\n     * @values xs, sm, md, lg, xl\n     */\n    shapeSize: {\n      type: String,\n      default: 'md',\n    },\n\n    /**\n     * Object containing quantity of paragraphs to display\n     * and a randomWidth boolean.\n     */\n    paragraphs: {\n      type: Object,\n      default: () => ({ rows: 3, randomWidth: true }),\n    },\n\n    /**\n     * Duration time of the animation (ms), set -1 for an infinite animation.\n     */\n    animationDuration: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * This property has higher priority than \"option.animate\"\n     * @values true, false\n     */\n    animate: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * RippleDuration controls how long the delay is for the animation of a\n     * placeholder 1000 pixels from the top of the page. Each placeholder\n     * from the top down will have a delay duration from 0 to this offset.\n     * The delay of each placeholder animation is based on how far down the page\n     * the placeholder is rendered. This is a linear relationship. The unit\n     * is milliseconds.\n     */\n    offset: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Additional class name for the shape.\n     */\n    shapeClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the content.\n     */\n    contentClass: {\n      type: String,\n      default: '',\n    },\n  },\n};\n</script>\n"],"mappings":"sUAoCA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,qBAEN,WAAY,CACV,gBAAA,EAAA,QACA,oBAAA,EAAA,QACD,CAED,MAAO,CAKL,MAAO,CACL,KAAM,OACN,QAAS,SACT,UAAW,GAAS,OAAO,KAAK,EAAA,gBAAgB,CAAC,SAAS,EAAM,CACjE,CAMD,UAAW,CACT,KAAM,OACN,QAAS,KACV,CAMD,WAAY,CACV,KAAM,OACN,aAAgB,CAAE,KAAM,EAAG,YAAa,GAAM,EAC/C,CAKD,kBAAmB,CACjB,KAAM,OACN,QAAS,GACV,CAMD,QAAS,CACP,KAAM,QACN,QAAS,GACV,CAUD,OAAQ,CACN,KAAM,OACN,QAAS,EACV,CAKD,WAAY,CACV,KAAM,OACN,QAAS,GACV,CAKD,aAAc,CACZ,KAAM,OACN,QAAS,GACV,CACF,CACF,IApGQ,MAAM,4CAA2C,8KAQlD,MAAA,CA1BJ,UAAQ,qBACP,OAAA,EAAA,EAAA,gBAAK,wDAAkF,EAAA,WAAW,OAAI,EAAA,CAAuB,EAAA,mCAgB5H,EAAA,CAPA,MAAM,8BACL,KAAM,EAAA,UACN,MAAO,EAAA,MACP,qBAAoB,EAAA,kBACpB,QAAS,EAAA,QACT,OAAQ,EAAA,OACR,gBAAe,EAAA,sHASZ,MAPN,EAOM,EAAA,EAAA,EAAA,aADF,GAAA,EAAA,EAAA,YAAA,EAJQ,WAAU,CACjB,qBAAoB,EAAA,kBACpB,QAAS,EAAA,QACT,OAAQ,EAAA"}

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

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

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

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

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

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