@dialpad/dialtone-vue 2.153.0 → 2.154.1

package/dist/lib/select-menu.cjs

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const Vue = require("vue");
 const common_constants = require("../common/constants.cjs");
 const common_utils = require("../common/utils.cjs");
-const input = require("../chunks/input-Hqw33WBe.js");
+const input = require("../chunks/input-Axw-wFj2.js");
 const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-1aBeR4AK.js");
 const lib_validationMessages = require("./validation-messages.cjs");
 require("../common/validators.cjs");
@@ -51,9 +51,7 @@ const optionsValidator = (options) => {
 };
 const _sfc_main = {
   name: "DtSelectMenu",
-  components: {
-    DtValidationMessages: lib_validationMessages.DtValidationMessages
-  },
+  components: { DtValidationMessages: lib_validationMessages.DtValidationMessages },
   mixins: [input.MessagesMixin],
   inheritAttrs: false,
   props: {
@@ -241,60 +239,43 @@ const _sfc_main = {
 };
 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 _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() {
+  })], 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() {
+  })], 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) + " ")]);
+      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);
+  })], 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__ */ _pluginVue2_normalizer.normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, null, null, null);
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null,
+  null,
+  null
+);
 const select_menu = __component__.exports;
 exports.DtSelectMenu = select_menu;
 exports.SELECT_SIZE_MODIFIERS = SELECT_SIZE_MODIFIERS;

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

@@ -1 +1 @@
-{"version":3,"file":"select-menu.cjs","sources":["../../components/select_menu/select_menu_constants.js","../../components/select_menu/select_menu_validators.js","../../components/select_menu/select_menu.vue"],"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","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","<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":["SELECT_SIZE_MODIFIERS","xs","sm","md","lg","xl","SELECT_STATE_MODIFIERS","error","warning","success","hasValidOptionIndex","option","index","hasValidOptionValue","value","hasValidOptionLabel","label","optionsValidator","options","every","_sfc_main","name","components","DtValidationMessages","mixins","MessagesMixin","inheritAttrs","props","type","String","default","description","Array","validator","size","s","Object","keys","includes","labelClass","descriptionClass","selectClass","optionClass","labelChildProps","descriptionChildProps","optionChildProps","disabled","Boolean","emits","data","LABEL_SIZE_MODIFIERS","DESCRIPTION_SIZE_MODIFIERS","computed","selectListeners","$listeners","input","change","event","emitValue","target","state","getValidationState","formattedMessages","selectKey","getUniqueString","descriptionKey","labelAriaDetails","$slots","$attrs","mounted","validateOptionsPresence","beforeUpdate","methods","$emit","getOptionKey","length","Vue","util","warn"],"mappings":"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"}
+{"version":3,"file":"select-menu.cjs","sources":["../../components/select_menu/select_menu_constants.js","../../components/select_menu/select_menu_validators.js","../../components/select_menu/select_menu.vue"],"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","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","<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":["DtValidationMessages","MessagesMixin","LABEL_SIZE_MODIFIERS","DESCRIPTION_SIZE_MODIFIERS","getValidationState","getUniqueString"],"mappings":"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"}

package/dist/lib/select-menu.js

@@ -1,7 +1,7 @@
 import Vue from "vue";
 import { LABEL_SIZE_MODIFIERS, DESCRIPTION_SIZE_MODIFIERS } from "../common/constants.js";
 import { getValidationState, getUniqueString } from "../common/utils.js";
-import { MessagesMixin } from "../chunks/input-PhJeBN6r.js";
+import { MessagesMixin } from "../chunks/input-6kbd8Pju.js";
 import { normalizeComponent } from "../chunks/_plugin-vue2_normalizer-sOSkiPF3.js";
 import { DtValidationMessages } from "./validation-messages.js";
 import "../common/validators.js";
@@ -49,9 +49,7 @@ const optionsValidator = (options) => {
 };
 const _sfc_main = {
   name: "DtSelectMenu",
-  components: {
-    DtValidationMessages
-  },
+  components: { DtValidationMessages },
   mixins: [MessagesMixin],
   inheritAttrs: false,
   props: {
@@ -239,60 +237,43 @@ const _sfc_main = {
 };
 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 _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() {
+  })], 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() {
+  })], 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) + " ")]);
+      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);
+  })], 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, null, null);
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null,
+  null,
+  null
+);
 const select_menu = __component__.exports;
 export {
   select_menu as DtSelectMenu,

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

@@ -1 +1 @@
-{"version":3,"file":"select-menu.js","sources":["../../components/select_menu/select_menu_constants.js","../../components/select_menu/select_menu_validators.js","../../components/select_menu/select_menu.vue"],"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","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","<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":["SELECT_SIZE_MODIFIERS","xs","sm","md","lg","xl","SELECT_STATE_MODIFIERS","error","warning","success","hasValidOptionIndex","option","index","hasValidOptionValue","value","hasValidOptionLabel","label","optionsValidator","options","every","_sfc_main","name","components","DtValidationMessages","mixins","MessagesMixin","inheritAttrs","props","type","String","default","description","Array","validator","size","s","Object","keys","includes","labelClass","descriptionClass","selectClass","optionClass","labelChildProps","descriptionChildProps","optionChildProps","disabled","Boolean","emits","data","LABEL_SIZE_MODIFIERS","DESCRIPTION_SIZE_MODIFIERS","computed","selectListeners","$listeners","input","change","event","emitValue","target","state","getValidationState","formattedMessages","selectKey","getUniqueString","descriptionKey","labelAriaDetails","$slots","$attrs","mounted","validateOptionsPresence","beforeUpdate","methods","$emit","getOptionKey","length","Vue","util","warn"],"mappings":"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"}
+{"version":3,"file":"select-menu.js","sources":["../../components/select_menu/select_menu_constants.js","../../components/select_menu/select_menu_validators.js","../../components/select_menu/select_menu.vue"],"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","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","<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/lib/settings-menu-button.cjs

@@ -6,7 +6,7 @@ const lib_icon = require("./icon.cjs");
 require("vue");
 require("../chunks/link_constants-x8NwdqmA.js");
 require("@dialpad/dialtone-icons/vue2");
-require("../chunks/icon_constants-VEA0wI5C.js");
+require("../chunks/icon_constants-QYpmdE0R.js");
 require("@dialpad/dialtone-icons/icons.json");
 const _sfc_main = {
   name: "DtRecipeSettingsMenuButton",
@@ -44,49 +44,23 @@ const _sfc_main = {
 };
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _vm.updateAvailable ? _c("dt-button", _vm._g({
-    staticClass: "settings-menu-button-update",
-    attrs: {
-      "importance": "outlined",
-      "size": "xs",
-      "icon-position": "right",
-      "aria-label": _vm.ariaLabel
-    },
-    scopedSlots: _vm._u([{
-      key: "icon",
-      fn: function() {
-        return [_c("dt-icon", {
-          attrs: {
-            "name": "more-vertical",
-            "size": "300"
-          }
-        })];
-      },
-      proxy: true
-    }], null, false, 3418040308)
-  }, _vm.$listeners), [_vm._t("default")], 2) : _c("dt-button", _vm._g({
-    staticClass: "settings-menu-button",
-    attrs: {
-      "importance": "clear",
-      "kind": "inverted",
-      "aria-label": _vm.ariaLabel
-    },
-    scopedSlots: _vm._u([{
-      key: "icon",
-      fn: function() {
-        return [_c("dt-icon", {
-          attrs: {
-            "name": "more-vertical",
-            "size": "300"
-          }
-        })];
-      },
-      proxy: true
-    }])
-  }, _vm.$listeners));
+  return _vm.updateAvailable ? _c("dt-button", _vm._g({ staticClass: "settings-menu-button-update", attrs: { "importance": "outlined", "size": "xs", "icon-position": "right", "aria-label": _vm.ariaLabel }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_c("dt-icon", { attrs: { "name": "more-vertical", "size": "300" } })];
+  }, proxy: true }], null, false, 3418040308) }, _vm.$listeners), [_vm._t("default")], 2) : _c("dt-button", _vm._g({ staticClass: "settings-menu-button", attrs: { "importance": "clear", "kind": "inverted", "aria-label": _vm.ariaLabel }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_c("dt-icon", { attrs: { "name": "more-vertical", "size": "300" } })];
+  }, proxy: true }]) }, _vm.$listeners));
 };
 var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, "4ee1371d", null, null);
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  "4ee1371d",
+  null,
+  null
+);
 const settings_menu_button = __component__.exports;
 exports.DtRecipeSettingsMenuButton = settings_menu_button;
 //# sourceMappingURL=settings-menu-button.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"settings-menu-button.cjs","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=\"settings-menu-button-update\"\n    :aria-label=\"ariaLabel\"\n    v-on=\"$listeners\"\n  >\n    <slot />\n    <template #icon>\n      <dt-icon\n        name=\"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=\"settings-menu-button\"\n    :aria-label=\"ariaLabel\"\n    v-on=\"$listeners\"\n  >\n    <template #icon>\n      <dt-icon\n        name=\"more-vertical\"\n        size=\"300\"\n      />\n    </template>\n  </dt-button>\n</template>\n\n<script>\nimport DtButton from '@/components/button/button.vue';\nimport { DtIcon } from '@/components/icon';\n\nexport default {\n  name: 'DtRecipeSettingsMenuButton',\n\n  components: {\n    DtButton,\n    DtIcon,\n  },\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  emits: [\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n};\n</script>\n\n<style scoped lang=\"less\">\n.settings-menu-button {\n  padding: var(--dt-space-0);\n  border-radius: var(--dt-size-550);\n  height: var(--dt-size-600);\n  width: var(--dt-size-550);\n  color: var(--dt-theme-topbar-button-color-foreground);\n  background-color: var(--dt-theme-topbar-button-color-background);\n\n  &:hover {\n    background-color: var(--dt-theme-topbar-button-color-background-hover);\n    color: var(--dt-theme-topbar-button-color-foreground-hover);\n  }\n\n  &:active {\n    background-color: var(--dt-theme-topbar-button-color-background-active);\n  }\n}\n\n.settings-menu-button-update {\n  background-color: hsla(var(--dt-color-blue-200-hsl) / 25%);\n  color: var(--dt-color-blue-500);\n  border-color: hsla(var(--dt-color-blue-200-hsl) / 25%);\n  border-radius: var(--dt-size-radius-pill);\n  height: var(--dt-size-600);\n\n  &:hover {\n    background-color: hsla(var(--dt-color-blue-200-hsl) / 50%);\n    color: var(--dt-theme-topbar-button-color-foreground-hover);\n  }\n}\n</style>\n"],"names":["_sfc_main","name","components","DtButton","DtIcon","props","updateAvailable","type","Boolean","default","ariaLabel","String","required","emits"],"mappings":";;;;;;;;;;AAuCA,MAAAA,YAAA;AAAA,EACAC,MAAA;AAAA,EAEAC,YAAA;AAAA,cACAC,WAAA;AAAA,IACAC,QAAAA,SAAAA;AAAAA,EACA;AAAA,EAEAC,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMAC,iBAAA;AAAA,MACAC,MAAAC;AAAAA,MACAC,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKAC,WAAA;AAAA,MACAH,MAAAI;AAAAA,MACAC,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEAC,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EAAA;AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"settings-menu-button.cjs","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=\"settings-menu-button-update\"\n    :aria-label=\"ariaLabel\"\n    v-on=\"$listeners\"\n  >\n    <slot />\n    <template #icon>\n      <dt-icon\n        name=\"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=\"settings-menu-button\"\n    :aria-label=\"ariaLabel\"\n    v-on=\"$listeners\"\n  >\n    <template #icon>\n      <dt-icon\n        name=\"more-vertical\"\n        size=\"300\"\n      />\n    </template>\n  </dt-button>\n</template>\n\n<script>\nimport DtButton from '@/components/button/button.vue';\nimport { DtIcon } from '@/components/icon';\n\nexport default {\n  name: 'DtRecipeSettingsMenuButton',\n\n  components: {\n    DtButton,\n    DtIcon,\n  },\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  emits: [\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n};\n</script>\n\n<style scoped lang=\"less\">\n.settings-menu-button {\n  padding: var(--dt-space-0);\n  border-radius: var(--dt-size-550);\n  height: var(--dt-size-600);\n  width: var(--dt-size-550);\n  color: var(--dt-theme-topbar-button-color-foreground);\n  background-color: var(--dt-theme-topbar-button-color-background);\n\n  &:hover {\n    background-color: var(--dt-theme-topbar-button-color-background-hover);\n    color: var(--dt-theme-topbar-button-color-foreground-hover);\n  }\n\n  &:active {\n    background-color: var(--dt-theme-topbar-button-color-background-active);\n  }\n}\n\n.settings-menu-button-update {\n  background-color: hsla(var(--dt-color-blue-200-hsl) / 25%);\n  color: var(--dt-color-blue-500);\n  border-color: hsla(var(--dt-color-blue-200-hsl) / 25%);\n  border-radius: var(--dt-size-radius-pill);\n  height: var(--dt-size-600);\n\n  &:hover {\n    background-color: hsla(var(--dt-color-blue-200-hsl) / 50%);\n    color: var(--dt-theme-topbar-button-color-foreground-hover);\n  }\n}\n</style>\n"],"names":["DtButton","DtIcon"],"mappings":";;;;;;;;;;AAuCA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAA,WAAA;AAAA,IACA,QAAAC,SAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,iBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AAEA;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -4,7 +4,7 @@ import { DtIcon } from "./icon.js";
 import "vue";
 import "../chunks/link_constants-AfTWrr-n.js";
 import "@dialpad/dialtone-icons/vue2";
-import "../chunks/icon_constants-TdxqLsS2.js";
+import "../chunks/icon_constants-Dy4MEUJL.js";
 import "@dialpad/dialtone-icons/icons.json";
 const _sfc_main = {
   name: "DtRecipeSettingsMenuButton",
@@ -42,49 +42,23 @@ const _sfc_main = {
 };
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _vm.updateAvailable ? _c("dt-button", _vm._g({
-    staticClass: "settings-menu-button-update",
-    attrs: {
-      "importance": "outlined",
-      "size": "xs",
-      "icon-position": "right",
-      "aria-label": _vm.ariaLabel
-    },
-    scopedSlots: _vm._u([{
-      key: "icon",
-      fn: function() {
-        return [_c("dt-icon", {
-          attrs: {
-            "name": "more-vertical",
-            "size": "300"
-          }
-        })];
-      },
-      proxy: true
-    }], null, false, 3418040308)
-  }, _vm.$listeners), [_vm._t("default")], 2) : _c("dt-button", _vm._g({
-    staticClass: "settings-menu-button",
-    attrs: {
-      "importance": "clear",
-      "kind": "inverted",
-      "aria-label": _vm.ariaLabel
-    },
-    scopedSlots: _vm._u([{
-      key: "icon",
-      fn: function() {
-        return [_c("dt-icon", {
-          attrs: {
-            "name": "more-vertical",
-            "size": "300"
-          }
-        })];
-      },
-      proxy: true
-    }])
-  }, _vm.$listeners));
+  return _vm.updateAvailable ? _c("dt-button", _vm._g({ staticClass: "settings-menu-button-update", attrs: { "importance": "outlined", "size": "xs", "icon-position": "right", "aria-label": _vm.ariaLabel }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_c("dt-icon", { attrs: { "name": "more-vertical", "size": "300" } })];
+  }, proxy: true }], null, false, 3418040308) }, _vm.$listeners), [_vm._t("default")], 2) : _c("dt-button", _vm._g({ staticClass: "settings-menu-button", attrs: { "importance": "clear", "kind": "inverted", "aria-label": _vm.ariaLabel }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_c("dt-icon", { attrs: { "name": "more-vertical", "size": "300" } })];
+  }, proxy: true }]) }, _vm.$listeners));
 };
 var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, "4ee1371d", null, null);
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  "4ee1371d",
+  null,
+  null
+);
 const settings_menu_button = __component__.exports;
 export {
   settings_menu_button as DtRecipeSettingsMenuButton

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

@@ -1 +1 @@
-{"version":3,"file":"settings-menu-button.js","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=\"settings-menu-button-update\"\n    :aria-label=\"ariaLabel\"\n    v-on=\"$listeners\"\n  >\n    <slot />\n    <template #icon>\n      <dt-icon\n        name=\"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=\"settings-menu-button\"\n    :aria-label=\"ariaLabel\"\n    v-on=\"$listeners\"\n  >\n    <template #icon>\n      <dt-icon\n        name=\"more-vertical\"\n        size=\"300\"\n      />\n    </template>\n  </dt-button>\n</template>\n\n<script>\nimport DtButton from '@/components/button/button.vue';\nimport { DtIcon } from '@/components/icon';\n\nexport default {\n  name: 'DtRecipeSettingsMenuButton',\n\n  components: {\n    DtButton,\n    DtIcon,\n  },\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  emits: [\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n};\n</script>\n\n<style scoped lang=\"less\">\n.settings-menu-button {\n  padding: var(--dt-space-0);\n  border-radius: var(--dt-size-550);\n  height: var(--dt-size-600);\n  width: var(--dt-size-550);\n  color: var(--dt-theme-topbar-button-color-foreground);\n  background-color: var(--dt-theme-topbar-button-color-background);\n\n  &:hover {\n    background-color: var(--dt-theme-topbar-button-color-background-hover);\n    color: var(--dt-theme-topbar-button-color-foreground-hover);\n  }\n\n  &:active {\n    background-color: var(--dt-theme-topbar-button-color-background-active);\n  }\n}\n\n.settings-menu-button-update {\n  background-color: hsla(var(--dt-color-blue-200-hsl) / 25%);\n  color: var(--dt-color-blue-500);\n  border-color: hsla(var(--dt-color-blue-200-hsl) / 25%);\n  border-radius: var(--dt-size-radius-pill);\n  height: var(--dt-size-600);\n\n  &:hover {\n    background-color: hsla(var(--dt-color-blue-200-hsl) / 50%);\n    color: var(--dt-theme-topbar-button-color-foreground-hover);\n  }\n}\n</style>\n"],"names":["_sfc_main","name","components","DtButton","DtIcon","props","updateAvailable","type","Boolean","default","ariaLabel","String","required","emits"],"mappings":";;;;;;;;AAuCA,MAAAA,YAAA;AAAA,EACAC,MAAA;AAAA,EAEAC,YAAA;AAAA,IACAC;AAAAA,IACAC;AAAAA,EACA;AAAA,EAEAC,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMAC,iBAAA;AAAA,MACAC,MAAAC;AAAAA,MACAC,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKAC,WAAA;AAAA,MACAH,MAAAI;AAAAA,MACAC,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEAC,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EAAA;AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"settings-menu-button.js","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=\"settings-menu-button-update\"\n    :aria-label=\"ariaLabel\"\n    v-on=\"$listeners\"\n  >\n    <slot />\n    <template #icon>\n      <dt-icon\n        name=\"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=\"settings-menu-button\"\n    :aria-label=\"ariaLabel\"\n    v-on=\"$listeners\"\n  >\n    <template #icon>\n      <dt-icon\n        name=\"more-vertical\"\n        size=\"300\"\n      />\n    </template>\n  </dt-button>\n</template>\n\n<script>\nimport DtButton from '@/components/button/button.vue';\nimport { DtIcon } from '@/components/icon';\n\nexport default {\n  name: 'DtRecipeSettingsMenuButton',\n\n  components: {\n    DtButton,\n    DtIcon,\n  },\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  emits: [\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n};\n</script>\n\n<style scoped lang=\"less\">\n.settings-menu-button {\n  padding: var(--dt-space-0);\n  border-radius: var(--dt-size-550);\n  height: var(--dt-size-600);\n  width: var(--dt-size-550);\n  color: var(--dt-theme-topbar-button-color-foreground);\n  background-color: var(--dt-theme-topbar-button-color-background);\n\n  &:hover {\n    background-color: var(--dt-theme-topbar-button-color-background-hover);\n    color: var(--dt-theme-topbar-button-color-foreground-hover);\n  }\n\n  &:active {\n    background-color: var(--dt-theme-topbar-button-color-background-active);\n  }\n}\n\n.settings-menu-button-update {\n  background-color: hsla(var(--dt-color-blue-200-hsl) / 25%);\n  color: var(--dt-color-blue-500);\n  border-color: hsla(var(--dt-color-blue-200-hsl) / 25%);\n  border-radius: var(--dt-size-radius-pill);\n  height: var(--dt-size-600);\n\n  &:hover {\n    background-color: hsla(var(--dt-color-blue-200-hsl) / 50%);\n    color: var(--dt-theme-topbar-button-color-foreground-hover);\n  }\n}\n</style>\n"],"names":[],"mappings":";;;;;;;;AAuCA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,iBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AAEA;;;;;;;;;;;;;;;;;;;;;"}