@dialpad/dialtone-vue 2.163.0 → 2.163.2

package/dist/packages/dialtone-vue2/components/select_menu/select_menu.vue.js

@@ -0,0 +1,238 @@
+import Vue from "vue";
+import { LABEL_SIZE_MODIFIERS, DESCRIPTION_SIZE_MODIFIERS } from "../../../../common/constants.js";
+import { SELECT_SIZE_MODIFIERS, SELECT_STATE_MODIFIERS } from "./select_menu_constants.js";
+import { getValidationState, getUniqueString } from "../../../../common/utils.js";
+import { MessagesMixin } from "../../common/mixins/input.js";
+import { optionsValidator } from "./select_menu_validators.js";
+import normalizeComponent from "../../../../_virtual/_plugin-vue2_normalizer.js";
+import DtValidationMessages from "../validation_messages/validation_messages.vue.js";
+const _sfc_main = {
+  name: "DtSelectMenu",
+  components: { DtValidationMessages },
+  mixins: [MessagesMixin],
+  inheritAttrs: false,
+  props: {
+    /**
+     * Label for the select
+     */
+    label: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Description for the select
+     */
+    description: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Select Menu Options, overridden by default slot. Each option has the following structure:
+     * `{ index: number (optional), value: number || string (required), label: string (required) }`
+     * @param {Object[]} options - Optional - A list that can be used to create a list of select menu options
+     * @param {number} options[].index - Optional - The index of the option
+     * @param {number|string} options[].value - Required - The option value
+     * @param {string} options[].label - Required - The option Label
+     */
+    options: {
+      type: Array,
+      default: () => [],
+      validator: (options) => optionsValidator(options)
+    },
+    /**
+     * Sets the selected value of the select menu. If it does not match a value in the options array, then it will be
+     * 'unselected'.
+     */
+    value: {
+      type: String,
+      default: null
+    },
+    /**
+     * Controls the size of the select
+     * @values xs, sm, md, lg, xl
+     */
+    size: {
+      type: String,
+      default: "md",
+      validator: (s) => Object.keys(SELECT_SIZE_MODIFIERS).includes(s)
+    },
+    /**
+     * Used to customize the label container
+     */
+    labelClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * Used to customize the description container
+     */
+    descriptionClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * Used to customize the select
+     */
+    selectClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * Used to customize each option, should options be provided via prop
+     */
+    optionClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * A set of props that are passed into the label container
+     */
+    labelChildProps: {
+      type: Object,
+      default: () => ({})
+    },
+    /**
+     * A set of props that are passed into the description container
+     */
+    descriptionChildProps: {
+      type: Object,
+      default: () => ({})
+    },
+    /**
+     * A set of props that are passed into each option, should options be provided via prop
+     */
+    optionChildProps: {
+      type: Object,
+      default: () => ({})
+    },
+    /**
+     * Disabled state of the select
+     * @values true, false
+     */
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: [
+    /**
+     * Native input event
+     *
+     * @event input
+     * @type {String | Number}
+     */
+    "input",
+    /**
+     * Native change event
+     *
+     * @event change
+     * @type {String | Number}
+     */
+    "change"
+  ],
+  data() {
+    return {
+      LABEL_SIZE_MODIFIERS,
+      DESCRIPTION_SIZE_MODIFIERS,
+      SELECT_SIZE_MODIFIERS,
+      SELECT_STATE_MODIFIERS
+    };
+  },
+  computed: {
+    selectListeners() {
+      return {
+        /* TODO
+            Check if any usages of this component leverage $listeners and either remove if unused or scope the removal
+            and migration prior to upgrading to Vue 3.x
+        */
+        ...this.$listeners,
+        /*
+         * Override input listener to as no-op. Prevents parent input listeners from being passed through onto the input
+         * element which will result in the hander being called twice (once on the select element and once by the
+         * emitted input event by the change listener).
+        */
+        input: () => {
+        },
+        change: (event) => this.emitValue(event.target.value, event)
+      };
+    },
+    state() {
+      return getValidationState(this.formattedMessages);
+    },
+    selectKey() {
+      return getUniqueString();
+    },
+    descriptionKey() {
+      return `select-${this.selectKey}-description`;
+    },
+    labelAriaDetails() {
+      if (this.$slots.description || this.description) {
+        return this.descriptionKey;
+      }
+      return this.$attrs["aria-details"];
+    }
+  },
+  mounted() {
+    this.validateOptionsPresence();
+  },
+  beforeUpdate() {
+    this.validateOptionsPresence();
+  },
+  methods: {
+    emitValue(value, event) {
+      this.$emit("input", value, event);
+      this.$emit("change", value, event);
+    },
+    getOptionKey(value) {
+      return `select-${this.selectKey}-option-${value}`;
+    },
+    validateOptionsPresence() {
+      var _a;
+      if (((_a = this.options) == null ? void 0 : _a.length) < 1 && !this.$slots.default) {
+        Vue.util.warn("Options are expected to be provided via prop or slot", this);
+      }
+    }
+  }
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", [_c("label", [_vm.$slots.label || _vm.label ? _c("div", _vm._b({ class: [
+    "d-label",
+    _vm.LABEL_SIZE_MODIFIERS[_vm.size],
+    _vm.labelClass
+  ], attrs: { "aria-details": _vm.labelAriaDetails, "data-qa": "dt-select-label" } }, "div", _vm.labelChildProps, false), [_vm._t("label", function() {
+    return [_vm._v(_vm._s(_vm.label))];
+  })], 2) : _vm._e(), _vm.$slots.description || _vm.description ? _c("div", _vm._b({ class: [
+    "d-description",
+    _vm.DESCRIPTION_SIZE_MODIFIERS[_vm.size],
+    _vm.descriptionClass
+  ], attrs: { "id": _vm.descriptionKey, "data-qa": "dt-select-description" } }, "div", _vm.descriptionChildProps, false), [_vm._t("description", function() {
+    return [_vm._v(_vm._s(_vm.description))];
+  })], 2) : _vm._e(), _c("div", { class: [
+    "d-select",
+    _vm.SELECT_SIZE_MODIFIERS[_vm.size],
+    _vm.selectClass,
+    { "d-select--disabled": _vm.disabled }
+  ], attrs: { "data-qa": "dt-select-wrapper" } }, [_c("select", _vm._g(_vm._b({ ref: "selectElement", class: [
+    "d-select__input",
+    _vm.SELECT_STATE_MODIFIERS[_vm.state]
+  ], attrs: { "data-qa": "dt-select", "disabled": _vm.disabled }, domProps: { "value": _vm.value } }, "select", _vm.$attrs, false), _vm.selectListeners), [_vm._t("default", function() {
+    return _vm._l(_vm.options, function(option) {
+      return _c("option", _vm._b({ key: _vm.getOptionKey(option.value), class: _vm.optionClass, domProps: { "value": option.value } }, "option", _vm.optionChildProps, false), [_vm._v(" " + _vm._s(option.label) + " ")]);
+    });
+  })], 2)])]), _c("dt-validation-messages", _vm._b({ class: _vm.messagesClass, attrs: { "validation-messages": _vm.formattedMessages, "show-messages": _vm.showMessages, "data-qa": "dt-select-messages" } }, "dt-validation-messages", _vm.messagesChildProps, false))], 1);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null
+);
+const select_menu = __component__.exports;
+export {
+  select_menu as default
+};
+//# sourceMappingURL=select_menu.vue.js.map

package/dist/packages/dialtone-vue2/components/select_menu/select_menu.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select_menu.vue.js","sources":["../../../../../components/select_menu/select_menu.vue"],"sourcesContent":["<template>\n  <div>\n    <label>\n      <div\n        v-if=\"$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=\"$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=\"$attrs\"\n          :value=\"value\"\n          data-qa=\"dt-select\"\n          :disabled=\"disabled\"\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 Vue 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} 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  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     * `{ index: number (optional), 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} options[].index - Optional - The index of the option\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     * Sets the selected value of the select menu. If it does not match a value in the options array, then it will be\n     * 'unselected'.\n     */\n    value: {\n      type: String,\n      default: null,\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  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {String | Number}\n     */\n    'input',\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    };\n  },\n\n  computed: {\n    selectListeners () {\n      return {\n        /* TODO\n            Check if any usages of this component leverage $listeners and either remove if unused or scope the removal\n            and migration prior to upgrading to Vue 3.x\n        */\n        ...this.$listeners,\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 hander 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    emitValue (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        Vue.util.warn('Options are expected to be provided via prop or slot', this);\n      }\n    },\n  },\n};\n</script>\n"],"names":[],"mappings":"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"}

package/dist/packages/dialtone-vue2/components/select_menu/select_menu_constants.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"select_menu_constants.cjs","sources":["../../../../../components/select_menu/select_menu_constants.js"],"sourcesContent":["export const SELECT_SIZE_MODIFIERS = {\n  xs: 'd-select--xs',\n  sm: 'd-select--sm',\n  md: '',\n  lg: 'd-select--lg',\n  xl: 'd-select--xl',\n};\n\nexport const SELECT_STATE_MODIFIERS = {\n  error: 'd-select__input--error',\n  warning: 'd-select__input--warning',\n  success: 'd-select__input--success',\n};\n\nexport default {\n  SELECT_SIZE_MODIFIERS,\n  SELECT_STATE_MODIFIERS,\n};\n"],"names":[],"mappings":";;AAAY,MAAC,wBAAwB;AAAA,EACnC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEY,MAAC,yBAAyB;AAAA,EACpC,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AACX;;;"}

package/dist/packages/dialtone-vue2/components/select_menu/select_menu_constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select_menu_constants.js","sources":["../../../../../components/select_menu/select_menu_constants.js"],"sourcesContent":["export const SELECT_SIZE_MODIFIERS = {\n  xs: 'd-select--xs',\n  sm: 'd-select--sm',\n  md: '',\n  lg: 'd-select--lg',\n  xl: 'd-select--xl',\n};\n\nexport const SELECT_STATE_MODIFIERS = {\n  error: 'd-select__input--error',\n  warning: 'd-select__input--warning',\n  success: 'd-select__input--success',\n};\n\nexport default {\n  SELECT_SIZE_MODIFIERS,\n  SELECT_STATE_MODIFIERS,\n};\n"],"names":[],"mappings":"AAAY,MAAC,wBAAwB;AAAA,EACnC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEY,MAAC,yBAAyB;AAAA,EACpC,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AACX;"}

package/dist/packages/dialtone-vue2/components/select_menu/select_menu_validators.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"select_menu_validators.cjs","sources":["../../../../../components/select_menu/select_menu_validators.js"],"sourcesContent":["const hasValidOptionIndex = option => !option.index || typeof option.index === 'number';\n\nconst hasValidOptionValue = option => {\n  if (!option.value) {\n    return false;\n  }\n\n  return typeof option.value === 'string' || typeof option.value === 'number';\n};\n\nconst hasValidOptionLabel = option => {\n  if (!option.label) {\n    return false;\n  }\n\n  return typeof option.label === 'string';\n};\n\nexport const optionsValidator = options => {\n  if (!options) {\n    return true;\n  }\n\n  return options.every(option => {\n    if (!hasValidOptionIndex(option)) {\n      return false;\n    }\n\n    if (!hasValidOptionValue(option)) {\n      return false;\n    }\n\n    if (!hasValidOptionLabel(option)) {\n      return false;\n    }\n\n    return true;\n  });\n};\n"],"names":[],"mappings":";;AAAA,MAAM,sBAAsB,YAAU,CAAC,OAAO,SAAS,OAAO,OAAO,UAAU;AAE/E,MAAM,sBAAsB,YAAU;AACpC,MAAI,CAAC,OAAO,OAAO;AACjB,WAAO;AAAA,EACR;AAED,SAAO,OAAO,OAAO,UAAU,YAAY,OAAO,OAAO,UAAU;AACrE;AAEA,MAAM,sBAAsB,YAAU;AACpC,MAAI,CAAC,OAAO,OAAO;AACjB,WAAO;AAAA,EACR;AAED,SAAO,OAAO,OAAO,UAAU;AACjC;AAEY,MAAC,mBAAmB,aAAW;AACzC,MAAI,CAAC,SAAS;AACZ,WAAO;AAAA,EACR;AAED,SAAO,QAAQ,MAAM,YAAU;AAC7B,QAAI,CAAC,oBAAoB,MAAM,GAAG;AAChC,aAAO;AAAA,IACR;AAED,QAAI,CAAC,oBAAoB,MAAM,GAAG;AAChC,aAAO;AAAA,IACR;AAED,QAAI,CAAC,oBAAoB,MAAM,GAAG;AAChC,aAAO;AAAA,IACR;AAED,WAAO;AAAA,EACX,CAAG;AACH;;"}

package/dist/packages/dialtone-vue2/components/select_menu/select_menu_validators.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select_menu_validators.js","sources":["../../../../../components/select_menu/select_menu_validators.js"],"sourcesContent":["const hasValidOptionIndex = option => !option.index || typeof option.index === 'number';\n\nconst hasValidOptionValue = option => {\n  if (!option.value) {\n    return false;\n  }\n\n  return typeof option.value === 'string' || typeof option.value === 'number';\n};\n\nconst hasValidOptionLabel = option => {\n  if (!option.label) {\n    return false;\n  }\n\n  return typeof option.label === 'string';\n};\n\nexport const optionsValidator = options => {\n  if (!options) {\n    return true;\n  }\n\n  return options.every(option => {\n    if (!hasValidOptionIndex(option)) {\n      return false;\n    }\n\n    if (!hasValidOptionValue(option)) {\n      return false;\n    }\n\n    if (!hasValidOptionLabel(option)) {\n      return false;\n    }\n\n    return true;\n  });\n};\n"],"names":[],"mappings":"AAAA,MAAM,sBAAsB,YAAU,CAAC,OAAO,SAAS,OAAO,OAAO,UAAU;AAE/E,MAAM,sBAAsB,YAAU;AACpC,MAAI,CAAC,OAAO,OAAO;AACjB,WAAO;AAAA,EACR;AAED,SAAO,OAAO,OAAO,UAAU,YAAY,OAAO,OAAO,UAAU;AACrE;AAEA,MAAM,sBAAsB,YAAU;AACpC,MAAI,CAAC,OAAO,OAAO;AACjB,WAAO;AAAA,EACR;AAED,SAAO,OAAO,OAAO,UAAU;AACjC;AAEY,MAAC,mBAAmB,aAAW;AACzC,MAAI,CAAC,SAAS;AACZ,WAAO;AAAA,EACR;AAED,SAAO,QAAQ,MAAM,YAAU;AAC7B,QAAI,CAAC,oBAAoB,MAAM,GAAG;AAChC,aAAO;AAAA,IACR;AAED,QAAI,CAAC,oBAAoB,MAAM,GAAG;AAChC,aAAO;AAAA,IACR;AAED,QAAI,CAAC,oBAAoB,MAAM,GAAG;AAChC,aAAO;AAAA,IACR;AAED,WAAO;AAAA,EACX,CAAG;AACH;"}

package/dist/packages/dialtone-vue2/components/skeleton/skeleton-list-item.vue.cjs

@@ -0,0 +1,102 @@
+"use strict";
+const skeleton_constants = require("./skeleton_constants.cjs");
+const skeletonShape = require("./skeleton-shape.vue.cjs");
+const skeletonParagraph = require("./skeleton-paragraph.vue.cjs");
+const _pluginVue2_normalizer = require("../../../../_virtual/_plugin-vue2_normalizer.cjs");
+const _sfc_main = {
+  name: "DtSkeletonListItem",
+  components: {
+    DtSkeletonShape: skeletonShape,
+    DtSkeletonParagraph: skeletonParagraph
+  },
+  props: {
+    /**
+     * Defines the shape of the skeleton, accepts circle or square.
+     * @values circle, square
+     */
+    shape: {
+      type: String,
+      default: "circle",
+      validator: (shape) => Object.keys(skeleton_constants.SKELETON_SHAPES).includes(shape)
+    },
+    /**
+     * Size of the shape
+     * @values xs, sm, md, lg, xl
+     */
+    shapeSize: {
+      type: String,
+      default: "md"
+    },
+    /**
+     * Object containing quantity of paragraphs to display
+     * and a randomWidth boolean.
+     */
+    paragraphs: {
+      type: Object,
+      default: () => ({ rows: 3, randomWidth: true })
+    },
+    /**
+     * Duration time of the animation (ms), set -1 for an infinite animation.
+     */
+    animationDuration: {
+      type: Number,
+      default: -1
+    },
+    /**
+     * This property has higher priority than "option.animate"
+     * @values true, false
+     */
+    animate: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * RippleDuration controls how long the delay is for the animation of a
+     * placeholder 1000 pixels from the top of the page. Each placeholder
+     * from the top down will have a delay duration from 0 to this offset.
+     * The delay of each placeholder animation is based on how far down the page
+     * the placeholder is rendered. This is a linear relationship. The unit
+     * is milliseconds.
+     */
+    offset: {
+      type: Number,
+      default: 1
+    },
+    /**
+     * Additional class name for the shape.
+     */
+    shapeClass: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Additional class name for the content.
+     */
+    contentClass: {
+      type: String,
+      default: ""
+    }
+  }
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { class: [
+    "d-skeleton-list-item",
+    {
+      "d-skeleton-list-item--single": _vm.paragraphs.rows === 1
+    },
+    _vm.contentClass
+  ], attrs: { "data-qa": "skeleton-list-item" } }, [_c("dt-skeleton-shape", { staticClass: "d-skeleton-list-item__shape", attrs: { "size": _vm.shapeSize, "shape": _vm.shape, "animation-duration": _vm.animationDuration, "animate": _vm.animate, "offset": _vm.offset, "content-class": _vm.shapeClass } }), _c("div", { staticClass: "d-skeleton-list-item__paragraph-container" }, [_c("dt-skeleton-paragraph", _vm._b({ attrs: { "animation-duration": _vm.animationDuration, "animate": _vm.animate, "offset": _vm.offset } }, "dt-skeleton-paragraph", _vm.paragraphs, false))], 1)], 1);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null
+);
+const DtSkeletonListItem = __component__.exports;
+module.exports = DtSkeletonListItem;
+//# sourceMappingURL=skeleton-list-item.vue.cjs.map

package/dist/packages/dialtone-vue2/components/skeleton/skeleton-list-item.vue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton-list-item.vue.cjs","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  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"],"names":["DtSkeletonShape","DtSkeletonParagraph","SKELETON_SHAPES"],"mappings":";;;;;AAoCA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,iBAAAA;AAAAA,IACA,qBAAAC;AAAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,WAAA,OAAA,KAAAC,mBAAAA,eAAA,EAAA,SAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,OAAA,EAAA,MAAA,GAAA,aAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,mBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/packages/dialtone-vue2/components/skeleton/skeleton-list-item.vue.js

@@ -0,0 +1,103 @@
+import { SKELETON_SHAPES } from "./skeleton_constants.js";
+import DtSkeletonShape from "./skeleton-shape.vue.js";
+import DtSkeletonParagraph from "./skeleton-paragraph.vue.js";
+import normalizeComponent from "../../../../_virtual/_plugin-vue2_normalizer.js";
+const _sfc_main = {
+  name: "DtSkeletonListItem",
+  components: {
+    DtSkeletonShape,
+    DtSkeletonParagraph
+  },
+  props: {
+    /**
+     * Defines the shape of the skeleton, accepts circle or square.
+     * @values circle, square
+     */
+    shape: {
+      type: String,
+      default: "circle",
+      validator: (shape) => Object.keys(SKELETON_SHAPES).includes(shape)
+    },
+    /**
+     * Size of the shape
+     * @values xs, sm, md, lg, xl
+     */
+    shapeSize: {
+      type: String,
+      default: "md"
+    },
+    /**
+     * Object containing quantity of paragraphs to display
+     * and a randomWidth boolean.
+     */
+    paragraphs: {
+      type: Object,
+      default: () => ({ rows: 3, randomWidth: true })
+    },
+    /**
+     * Duration time of the animation (ms), set -1 for an infinite animation.
+     */
+    animationDuration: {
+      type: Number,
+      default: -1
+    },
+    /**
+     * This property has higher priority than "option.animate"
+     * @values true, false
+     */
+    animate: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * RippleDuration controls how long the delay is for the animation of a
+     * placeholder 1000 pixels from the top of the page. Each placeholder
+     * from the top down will have a delay duration from 0 to this offset.
+     * The delay of each placeholder animation is based on how far down the page
+     * the placeholder is rendered. This is a linear relationship. The unit
+     * is milliseconds.
+     */
+    offset: {
+      type: Number,
+      default: 1
+    },
+    /**
+     * Additional class name for the shape.
+     */
+    shapeClass: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Additional class name for the content.
+     */
+    contentClass: {
+      type: String,
+      default: ""
+    }
+  }
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { class: [
+    "d-skeleton-list-item",
+    {
+      "d-skeleton-list-item--single": _vm.paragraphs.rows === 1
+    },
+    _vm.contentClass
+  ], attrs: { "data-qa": "skeleton-list-item" } }, [_c("dt-skeleton-shape", { staticClass: "d-skeleton-list-item__shape", attrs: { "size": _vm.shapeSize, "shape": _vm.shape, "animation-duration": _vm.animationDuration, "animate": _vm.animate, "offset": _vm.offset, "content-class": _vm.shapeClass } }), _c("div", { staticClass: "d-skeleton-list-item__paragraph-container" }, [_c("dt-skeleton-paragraph", _vm._b({ attrs: { "animation-duration": _vm.animationDuration, "animate": _vm.animate, "offset": _vm.offset } }, "dt-skeleton-paragraph", _vm.paragraphs, false))], 1)], 1);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null
+);
+const DtSkeletonListItem = __component__.exports;
+export {
+  DtSkeletonListItem as default
+};
+//# sourceMappingURL=skeleton-list-item.vue.js.map

package/dist/packages/dialtone-vue2/components/skeleton/skeleton-list-item.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton-list-item.vue.js","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  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"],"names":[],"mappings":";;;;AAoCA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,WAAA,OAAA,KAAA,eAAA,EAAA,SAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,OAAA,EAAA,MAAA,GAAA,aAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,mBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;"}

package/dist/packages/dialtone-vue2/components/skeleton/skeleton-paragraph.vue.cjs

@@ -0,0 +1,141 @@
+"use strict";
+const skeletonText = require("./skeleton-text.vue.cjs");
+const _pluginVue2_normalizer = require("../../../../_virtual/_plugin-vue2_normalizer.cjs");
+const validator = (number) => number !== "" && !Number.isNaN(Number(number));
+const _sfc_main = {
+  name: "DtSkeletonParagraph",
+  components: {
+    DtSkeletonText: skeletonText
+  },
+  props: {
+    /**
+     * Quantity of rows to display
+     */
+    rows: {
+      type: [Number, String],
+      default: 3,
+      validator
+    },
+    /**
+     * This property has higher priority than "option.animate"
+     * @values true, false
+     */
+    animate: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Controls the min width of paragraphs
+     */
+    minWidth: {
+      type: [Number, String],
+      default: 30,
+      validator
+    },
+    /**
+     * Controls the max width of paragraphs
+     */
+    maxWidth: {
+      type: [Number, String],
+      default: 100,
+      validator
+    },
+    /**
+     * Controls the width of paragraphs
+     */
+    width: {
+      type: [String, Array],
+      default: null
+    },
+    /**
+     * If true, row widths will be random
+     * @values true, false
+     */
+    randomWidth: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * RippleDuration controls how long the delay is for the animation of a
+     * placeholder 1000 pixels from the top of the page. Each placeholder
+     * from the top down will have a delay duration from 0 to this offset.
+     * The delay of each placeholder animation is based on how far down the page
+     * the placeholder is rendered. This is a linear relationship. The unit
+     * is milliseconds.
+     */
+    offset: {
+      type: Number,
+      default: 1
+    },
+    /**
+     * Duration time of the animation (ms), set -1 for an infinite animation.
+     */
+    animationDuration: {
+      type: Number,
+      default: -1
+    },
+    /**
+     * Additional class name for the content.
+     */
+    contentClass: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Additional class name for the row.
+     */
+    rowClass: {
+      type: String,
+      default: ""
+    }
+  },
+  computed: {
+    integerRows() {
+      return Number(this.rows);
+    }
+  },
+  methods: {
+    randomWidthPercentage() {
+      const min = Math.min(this.minWidth, this.maxWidth);
+      const max = Math.max(this.minWidth, this.maxWidth);
+      return `${Math.round(Math.random() * (max - min)) + min}%`;
+    },
+    getSizeParagraphRow(row) {
+      const paragraphWidth = this.width;
+      const isArrayWidth = Array.isArray(paragraphWidth);
+      const currentWidth = paragraphWidth == null ? void 0 : paragraphWidth[row - 1];
+      const isLastRow = row === this.rows;
+      if (this.randomWidth) {
+        return this.randomWidthPercentage();
+      }
+      if (paragraphWidth && !isArrayWidth) {
+        return paragraphWidth;
+      }
+      if (paragraphWidth && isArrayWidth && currentWidth) {
+        return currentWidth;
+      }
+      return isLastRow ? "38%" : "100%";
+    }
+  }
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { class: [
+    "d-skeleton-paragraph",
+    _vm.contentClass
+  ], attrs: { "contentClass": "", "data-qa": "skeleton-paragraph" } }, _vm._l(_vm.integerRows, function(row) {
+    return _c("dt-skeleton-text", { key: row, attrs: { "data-qa": "skeleton-paragraph-row", "content-class": _vm.rowClass, "animate": _vm.animate, "offset": _vm.offset, "animation-duration": _vm.animationDuration, "width": _vm.getSizeParagraphRow(row) } });
+  }), 1);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null
+);
+const DtSkeletonParagraph = __component__.exports;
+module.exports = DtSkeletonParagraph;
+//# sourceMappingURL=skeleton-paragraph.vue.cjs.map

package/dist/packages/dialtone-vue2/components/skeleton/skeleton-paragraph.vue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton-paragraph.vue.cjs","sources":["../../../../../components/skeleton/skeleton-paragraph.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'd-skeleton-paragraph',\n      contentClass,\n    ]\"\n    contentClass\n    data-qa=\"skeleton-paragraph\"\n  >\n    <dt-skeleton-text\n      v-for=\"row in integerRows\"\n      :key=\"row\"\n      data-qa=\"skeleton-paragraph-row\"\n      :content-class=\"rowClass\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n      :animation-duration=\"animationDuration\"\n      :width=\"getSizeParagraphRow(row)\"\n    />\n  </div>\n</template>\n\n<script>\nimport DtSkeletonText from './skeleton-text.vue';\n\nconst validator = number => number !== '' && !Number.isNaN(Number(number));\nexport default {\n  name: 'DtSkeletonParagraph',\n  components: {\n    DtSkeletonText,\n  },\n\n  props: {\n    /**\n     * Quantity of rows to display\n     */\n    rows: {\n      type: [Number, String],\n      default: 3,\n      validator,\n    },\n\n    /**\n     * This property has higher priority than \"option.animate\"\n     * @values true, false\n     */\n    animate: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Controls the min width of paragraphs\n     */\n    minWidth: {\n      type: [Number, String],\n      default: 30,\n      validator,\n    },\n\n    /**\n     * Controls the max width of paragraphs\n     */\n    maxWidth: {\n      type: [Number, String],\n      default: 100,\n      validator,\n    },\n\n    /**\n     * Controls the width of paragraphs\n     */\n    width: {\n      type: [String, Array],\n      default: null,\n    },\n\n    /**\n     * If true, row widths will be random\n     * @values true, false\n     */\n    randomWidth: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * RippleDuration controls how long the delay is for the animation of a\n     * placeholder 1000 pixels from the top of the page. Each placeholder\n     * from the top down will have a delay duration from 0 to this offset.\n     * The delay of each placeholder animation is based on how far down the page\n     * the placeholder is rendered. This is a linear relationship. The unit\n     * is milliseconds.\n     */\n    offset: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Duration time of the animation (ms), set -1 for an infinite animation.\n     */\n    animationDuration: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * Additional class name for the content.\n     */\n    contentClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the row.\n     */\n    rowClass: {\n      type: String,\n      default: '',\n    },\n  },\n\n  computed: {\n    integerRows () {\n      return Number(this.rows);\n    },\n  },\n\n  methods: {\n    randomWidthPercentage () {\n      const min = Math.min(this.minWidth, this.maxWidth);\n      const max = Math.max(this.minWidth, this.maxWidth);\n      return `${Math.round(Math.random() * (max - min)) + min}%`;\n    },\n\n    getSizeParagraphRow (row) {\n      const paragraphWidth = this.width;\n      const isArrayWidth = Array.isArray(paragraphWidth);\n      const currentWidth = paragraphWidth?.[row - 1];\n      const isLastRow = row === this.rows;\n\n      if (this.randomWidth) {\n        return this.randomWidthPercentage();\n      }\n\n      if (paragraphWidth && !isArrayWidth) {\n        return paragraphWidth;\n      }\n\n      if (paragraphWidth && isArrayWidth && currentWidth) {\n        return currentWidth;\n      }\n\n      return isLastRow ? '38%' : '100%';\n    },\n  },\n};\n</script>\n"],"names":["DtSkeletonText"],"mappings":";;;AAyBA,MAAA,YAAA,YAAA,WAAA,MAAA,CAAA,OAAA,MAAA,OAAA,MAAA,CAAA;AACA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,gBAAAA;AAAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA,CAAA,QAAA,KAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,mBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,cAAA;AACA,aAAA,OAAA,KAAA,IAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,wBAAA;AACA,YAAA,MAAA,KAAA,IAAA,KAAA,UAAA,KAAA,QAAA;AACA,YAAA,MAAA,KAAA,IAAA,KAAA,UAAA,KAAA,QAAA;AACA,aAAA,GAAA,KAAA,MAAA,KAAA,OAAA,KAAA,MAAA,IAAA,IAAA,GAAA;AAAA,IACA;AAAA,IAEA,oBAAA,KAAA;AACA,YAAA,iBAAA,KAAA;AACA,YAAA,eAAA,MAAA,QAAA,cAAA;AACA,YAAA,eAAA,iDAAA,MAAA;AACA,YAAA,YAAA,QAAA,KAAA;AAEA,UAAA,KAAA,aAAA;AACA,eAAA,KAAA;MACA;AAEA,UAAA,kBAAA,CAAA,cAAA;AACA,eAAA;AAAA,MACA;AAEA,UAAA,kBAAA,gBAAA,cAAA;AACA,eAAA;AAAA,MACA;AAEA,aAAA,YAAA,QAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;"}