@dialpad/dialtone-vue 2.125.1 → 2.127.0

package/dist/lib/toast.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.cjs","sources":["../../components/toast/toast_constants.js","../../components/toast/toast.vue"],"sourcesContent":["export const TOAST_ROLES = ['status', 'alert'];\nexport const TOAST_MIN_DURATION = 6000;\n\nexport default {\n  TOAST_ROLES,\n  TOAST_MIN_DURATION,\n};\n","<template>\n  <div\n    v-if=\"isShown\"\n    :class=\"[\n      'd-toast',\n      kindClass,\n      { 'd-toast--important': important },\n    ]\"\n    data-qa=\"dt-toast\"\n    :aria-hidden=\"(!isShown).toString()\"\n  >\n    <div class=\"d-toast__dialog\">\n      <dt-notice-icon\n        v-if=\"!hideIcon\"\n        :kind=\"kind\"\n        v-on=\"$listeners\"\n      >\n        <!-- @slot Slot for custom icon -->\n        <slot name=\"icon\" />\n      </dt-notice-icon>\n      <dt-notice-content\n        :title-id=\"titleId\"\n        :content-id=\"contentId\"\n        :title=\"title\"\n        :role=\"role\"\n        v-on=\"$listeners\"\n      >\n        <template #titleOverride>\n          <!-- @slot Allows you to override the title, only use this if you need to override\n          with something other than text. Otherwise use the \"title\" prop. -->\n          <slot name=\"titleOverride\" />\n        </template>\n        <!-- @slot the main textual content of the toast -->\n        <slot>\n          {{ message }}\n        </slot>\n      </dt-notice-content>\n      <dt-notice-action\n        :hide-action=\"hideAction\"\n        :hide-close=\"hideClose\"\n        :close-button-props=\"closeButtonProps\"\n        :visually-hidden-close=\"visuallyHiddenClose\"\n        :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n        v-on=\"noticeActionListeners\"\n      >\n        <!-- @slot Enter a possible action for the user to take, such as a link to another page -->\n        <slot name=\"action\" />\n      </dt-notice-action>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { DtNoticeIcon, DtNoticeContent, DtNoticeAction, NOTICE_KINDS } from '@/components/notice';\nimport utils from '@/common/utils';\nimport { TOAST_ROLES, TOAST_MIN_DURATION } from './toast_constants.js';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\n\n/**\n * A toast notice, sometimes called a snackbar, is a time-based message that appears based on users' actions.\n * It contains at-a-glance information about outcomes and can be paired with actions.\n * @see https://dialtone.dialpad.com/components/toast.html\n */\nexport default {\n  name: 'DtToast',\n\n  components: {\n    DtNoticeIcon,\n    DtNoticeContent,\n    DtNoticeAction,\n  },\n\n  mixins: [SrOnlyCloseButtonMixin],\n\n  props: {\n    /**\n     * Sets an ID on the title element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the title.\n     */\n    titleId: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * Sets an ID on the content element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the content.\n     */\n    contentId: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * Title header of the toast. This can be left blank to remove the title from the toast entirely.\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Message of the toast. Overridden by default slot.\n     */\n    message: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Provides a role for the toast. 'status' is used by default to communicate a message. 'alert' is used to\n     * communicate an important message like an error that does not contain any interactive elements.\n     * @values status, alert\n     */\n    role: {\n      type: String,\n      default: 'status',\n      validator: (role) => {\n        return TOAST_ROLES.includes(role);\n      },\n    },\n\n    /**\n     * Severity level of the toast, sets the icon and background\n     * @values base, error, info, success, warning\n     */\n    kind: {\n      type: String,\n      default: 'base',\n      validator: (kind) => {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Used in scenarios where the message needs to visually dominate the screen.\n     * @values true, false\n     */\n    important: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Controls whether the toast is shown. If a valid duration is provided, the toast will disappear\n     * after reaching the duration time, so it's convenient to use `.sync` modifier with this prop to update\n     * the data in your component.\n     * Supports .sync modifier\n     * @values true, false\n     */\n    show: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Props for the toast close button.\n     */\n    closeButtonProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Hides the close button from the toast\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the icon from the notice\n     * @values true, false\n     */\n    hideIcon: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the action from the notice\n     * @values true, false\n     */\n    hideAction: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The duration in ms the toast will display before disappearing.\n     * The toast won't disappear if the duration is not provided.\n     * If it's provided, it should be equal to or greater than 6000.\n     */\n    duration: {\n      type: Number,\n      default: null,\n      validator: (duration) => {\n        return duration >= TOAST_MIN_DURATION;\n      },\n    },\n  },\n\n  emits: [\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n\n    /**\n     * Sync show value\n     *\n     * @event update:show\n     */\n    'update:show',\n  ],\n\n  data () {\n    return {\n      isShown: false,\n      minDuration: TOAST_MIN_DURATION,\n    };\n  },\n\n  computed: {\n    kindClass () {\n      const kindClasses = {\n        error: 'd-toast--error',\n        info: 'd-toast--info',\n        success: 'd-toast--success',\n        warning: 'd-toast--warning',\n        base: 'd-toast--base',\n      };\n\n      return kindClasses[this.kind];\n    },\n\n    noticeActionListeners () {\n      return {\n        ...this.$listeners,\n\n        close: event => {\n          this.isShown = false;\n          this.$emit('update:show', false);\n          this.$emit('close', event);\n        },\n      };\n    },\n\n    shouldSetTimeout () {\n      return !!this.duration && this.duration >= this.minDuration;\n    },\n  },\n\n  watch: {\n    show: {\n      handler: function (show) {\n        this.isShown = show;\n        if (show) {\n          this.setTimeout();\n        } else {\n          clearTimeout(this.displayTimer);\n        }\n      },\n\n      immediate: true,\n    },\n  },\n\n  destroyed () {\n    if (this.shouldSetTimeout) {\n      clearTimeout(this.displayTimer);\n    }\n  },\n\n  methods: {\n    setTimeout () {\n      if (this.shouldSetTimeout) {\n        this.displayTimer = setTimeout(() => {\n          this.isShown = false;\n          this.$emit('update:show', false);\n        }, this.duration);\n      }\n    },\n  },\n};\n</script>\n"],"names":["TOAST_ROLES","TOAST_MIN_DURATION","_sfc_main","DtNoticeIcon","DtNoticeContent","DtNoticeAction","SrOnlyCloseButtonMixin","utils","role","kind","NOTICE_KINDS","duration","event","show"],"mappings":"qlBAAY,MAACA,EAAc,CAAC,SAAU,OAAO,EAChCC,EAAqB,IC8DlCC,EAAA,CACA,KAAA,UAEA,WAAA,CACA,aAAAC,EAAA,EACA,gBAAAC,EAAA,EACA,eAAAC,EAAA,CACA,EAEA,OAAA,CAAAC,EAAAA,CAAA,EAEA,MAAA,CAKA,QAAA,CACA,KAAA,OACA,SAAA,CAAA,OAAAC,UAAA,gBAAA,CAAA,CACA,EAMA,UAAA,CACA,KAAA,OACA,SAAA,CAAA,OAAAA,UAAA,gBAAA,CAAA,CACA,EAKA,MAAA,CACA,KAAA,OACA,QAAA,EACA,EAKA,QAAA,CACA,KAAA,OACA,QAAA,EACA,EAOA,KAAA,CACA,KAAA,OACA,QAAA,SACA,UAAAC,GACAR,EAAA,SAAAQ,CAAA,CAEA,EAMA,KAAA,CACA,KAAA,OACA,QAAA,OACA,UAAAC,GACAC,EAAA,EAAA,SAAAD,CAAA,CAEA,EAMA,UAAA,CACA,KAAA,QACA,QAAA,EACA,EASA,KAAA,CACA,KAAA,QACA,QAAA,EACA,EAKA,iBAAA,CACA,KAAA,OACA,QAAA,KAAA,CAAA,EACA,EAMA,UAAA,CACA,KAAA,QACA,QAAA,EACA,EAMA,SAAA,CACA,KAAA,QACA,QAAA,EACA,EAMA,WAAA,CACA,KAAA,QACA,QAAA,EACA,EAOA,SAAA,CACA,KAAA,OACA,QAAA,KACA,UAAAE,GACAA,GAAAV,CAEA,CACA,EAEA,MAAA,CAMA,QAOA,aACA,EAEA,MAAA,CACA,MAAA,CACA,QAAA,GACA,YAAAA,CACA,CACA,EAEA,SAAA,CACA,WAAA,CASA,MARA,CACA,MAAA,iBACA,KAAA,gBACA,QAAA,mBACA,QAAA,mBACA,KAAA,eACA,EAEA,KAAA,IAAA,CACA,EAEA,uBAAA,CACA,MAAA,CACA,GAAA,KAAA,WAEA,MAAAW,GAAA,CACA,KAAA,QAAA,GACA,KAAA,MAAA,cAAA,EAAA,EACA,KAAA,MAAA,QAAAA,CAAA,CACA,CACA,CACA,EAEA,kBAAA,CACA,MAAA,CAAA,CAAA,KAAA,UAAA,KAAA,UAAA,KAAA,WACA,CACA,EAEA,MAAA,CACA,KAAA,CACA,QAAA,SAAAC,EAAA,CACA,KAAA,QAAAA,EACAA,EACA,KAAA,WAAA,EAEA,aAAA,KAAA,YAAA,CAEA,EAEA,UAAA,EACA,CACA,EAEA,WAAA,CACA,KAAA,kBACA,aAAA,KAAA,YAAA,CAEA,EAEA,QAAA,CACA,YAAA,CACA,KAAA,mBACA,KAAA,aAAA,WAAA,IAAA,CACA,KAAA,QAAA,GACA,KAAA,MAAA,cAAA,EAAA,CACA,EAAA,KAAA,QAAA,EAEA,CACA,CACA"}

package/dist/lib/toast.js

@@ -9,7 +9,6 @@ import "./icon.js";
 import "@dialpad/dialtone-icons/vue2";
 import "../chunks/icon_constants-OpYAAKwF.js";
 import "@dialpad/dialtone-icons/icons.json";
-import "./skeleton.js";
 import "./button.js";
 import "../chunks/link_constants-vIUB92L4.js";
 const c = ["status", "alert"], o = 6e3, m = {
@@ -217,9 +216,9 @@ var p = function() {
   null,
   null
 );
-const A = f.exports;
+const O = f.exports;
 export {
-  A as DtToast,
+  O as DtToast,
   o as TOAST_MIN_DURATION,
   c as TOAST_ROLES
 };

package/dist/lib/toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast.js","sources":["../../components/toast/toast_constants.js","../../components/toast/toast.vue"],"sourcesContent":["export const TOAST_ROLES = ['status', 'alert'];\nexport const TOAST_MIN_DURATION = 6000;\n\nexport default {\n  TOAST_ROLES,\n  TOAST_MIN_DURATION,\n};\n","<template>\n  <div\n    v-if=\"isShown\"\n    :class=\"[\n      'd-toast',\n      kindClass,\n      { 'd-toast--important': important },\n    ]\"\n    data-qa=\"dt-toast\"\n    :aria-hidden=\"(!isShown).toString()\"\n  >\n    <div class=\"d-toast__dialog\">\n      <dt-notice-icon\n        v-if=\"!hideIcon\"\n        :kind=\"kind\"\n        v-on=\"$listeners\"\n      >\n        <!-- @slot Slot for custom icon -->\n        <slot name=\"icon\" />\n      </dt-notice-icon>\n      <dt-notice-content\n        :title-id=\"titleId\"\n        :content-id=\"contentId\"\n        :title=\"title\"\n        :role=\"role\"\n        v-on=\"$listeners\"\n      >\n        <template #titleOverride>\n          <!-- @slot Allows you to override the title, only use this if you need to override\n          with something other than text. Otherwise use the \"title\" prop. -->\n          <slot name=\"titleOverride\" />\n        </template>\n        <!-- @slot the main textual content of the toast -->\n        <slot>\n          {{ message }}\n        </slot>\n      </dt-notice-content>\n      <dt-notice-action\n        :hide-action=\"hideAction\"\n        :hide-close=\"hideClose\"\n        :close-button-props=\"closeButtonProps\"\n        :visually-hidden-close=\"visuallyHiddenClose\"\n        :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n        v-on=\"noticeActionListeners\"\n      >\n        <!-- @slot Enter a possible action for the user to take, such as a link to another page -->\n        <slot name=\"action\" />\n      </dt-notice-action>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { DtNoticeIcon, DtNoticeContent, DtNoticeAction, NOTICE_KINDS } from '@/components/notice';\nimport utils from '@/common/utils';\nimport { TOAST_ROLES, TOAST_MIN_DURATION } from './toast_constants.js';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\n\n/**\n * A toast notice, sometimes called a snackbar, is a time-based message that appears based on users' actions.\n * It contains at-a-glance information about outcomes and can be paired with actions.\n * @see https://dialtone.dialpad.com/components/toast.html\n */\nexport default {\n  name: 'DtToast',\n\n  components: {\n    DtNoticeIcon,\n    DtNoticeContent,\n    DtNoticeAction,\n  },\n\n  mixins: [SrOnlyCloseButtonMixin],\n\n  props: {\n    /**\n     * Sets an ID on the title element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the title.\n     */\n    titleId: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * Sets an ID on the content element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the content.\n     */\n    contentId: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * Title header of the toast. This can be left blank to remove the title from the toast entirely.\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Message of the toast. Overridden by default slot.\n     */\n    message: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Provides a role for the toast. 'status' is used by default to communicate a message. 'alert' is used to\n     * communicate an important message like an error that does not contain any interactive elements.\n     * @values status, alert\n     */\n    role: {\n      type: String,\n      default: 'status',\n      validator: (role) => {\n        return TOAST_ROLES.includes(role);\n      },\n    },\n\n    /**\n     * Severity level of the toast, sets the icon and background\n     * @values base, error, info, success, warning\n     */\n    kind: {\n      type: String,\n      default: 'base',\n      validator: (kind) => {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Used in scenarios where the message needs to visually dominate the screen.\n     * @values true, false\n     */\n    important: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Controls whether the toast is shown. If a valid duration is provided, the toast will disappear\n     * after reaching the duration time, so it's convenient to use `.sync` modifier with this prop to update\n     * the data in your component.\n     * Supports .sync modifier\n     * @values true, false\n     */\n    show: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Props for the toast close button.\n     */\n    closeButtonProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Hides the close button from the toast\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the icon from the notice\n     * @values true, false\n     */\n    hideIcon: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the action from the notice\n     * @values true, false\n     */\n    hideAction: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The duration in ms the toast will display before disappearing.\n     * The toast won't disappear if the duration is not provided.\n     * If it's provided, it should be equal to or greater than 6000.\n     */\n    duration: {\n      type: Number,\n      default: null,\n      validator: (duration) => {\n        return duration >= TOAST_MIN_DURATION;\n      },\n    },\n  },\n\n  emits: [\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n\n    /**\n     * Sync show value\n     *\n     * @event update:show\n     */\n    'update:show',\n  ],\n\n  data () {\n    return {\n      isShown: false,\n      minDuration: TOAST_MIN_DURATION,\n    };\n  },\n\n  computed: {\n    kindClass () {\n      const kindClasses = {\n        error: 'd-toast--error',\n        info: 'd-toast--info',\n        success: 'd-toast--success',\n        warning: 'd-toast--warning',\n        base: 'd-toast--base',\n      };\n\n      return kindClasses[this.kind];\n    },\n\n    noticeActionListeners () {\n      return {\n        ...this.$listeners,\n\n        close: event => {\n          this.isShown = false;\n          this.$emit('update:show', false);\n          this.$emit('close', event);\n        },\n      };\n    },\n\n    shouldSetTimeout () {\n      return !!this.duration && this.duration >= this.minDuration;\n    },\n  },\n\n  watch: {\n    show: {\n      handler: function (show) {\n        this.isShown = show;\n        if (show) {\n          this.setTimeout();\n        } else {\n          clearTimeout(this.displayTimer);\n        }\n      },\n\n      immediate: true,\n    },\n  },\n\n  destroyed () {\n    if (this.shouldSetTimeout) {\n      clearTimeout(this.displayTimer);\n    }\n  },\n\n  methods: {\n    setTimeout () {\n      if (this.shouldSetTimeout) {\n        this.displayTimer = setTimeout(() => {\n          this.isShown = false;\n          this.$emit('update:show', false);\n        }, this.duration);\n      }\n    },\n  },\n};\n</script>\n"],"names":["TOAST_ROLES","TOAST_MIN_DURATION","_sfc_main","DtNoticeIcon","DtNoticeContent","DtNoticeAction","SrOnlyCloseButtonMixin","utils","role","kind","NOTICE_KINDS","duration","event","show"],"mappings":"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"}
+{"version":3,"file":"toast.js","sources":["../../components/toast/toast_constants.js","../../components/toast/toast.vue"],"sourcesContent":["export const TOAST_ROLES = ['status', 'alert'];\nexport const TOAST_MIN_DURATION = 6000;\n\nexport default {\n  TOAST_ROLES,\n  TOAST_MIN_DURATION,\n};\n","<template>\n  <div\n    v-if=\"isShown\"\n    :class=\"[\n      'd-toast',\n      kindClass,\n      { 'd-toast--important': important },\n    ]\"\n    data-qa=\"dt-toast\"\n    :aria-hidden=\"(!isShown).toString()\"\n  >\n    <div class=\"d-toast__dialog\">\n      <dt-notice-icon\n        v-if=\"!hideIcon\"\n        :kind=\"kind\"\n        v-on=\"$listeners\"\n      >\n        <!-- @slot Slot for custom icon -->\n        <slot name=\"icon\" />\n      </dt-notice-icon>\n      <dt-notice-content\n        :title-id=\"titleId\"\n        :content-id=\"contentId\"\n        :title=\"title\"\n        :role=\"role\"\n        v-on=\"$listeners\"\n      >\n        <template #titleOverride>\n          <!-- @slot Allows you to override the title, only use this if you need to override\n          with something other than text. Otherwise use the \"title\" prop. -->\n          <slot name=\"titleOverride\" />\n        </template>\n        <!-- @slot the main textual content of the toast -->\n        <slot>\n          {{ message }}\n        </slot>\n      </dt-notice-content>\n      <dt-notice-action\n        :hide-action=\"hideAction\"\n        :hide-close=\"hideClose\"\n        :close-button-props=\"closeButtonProps\"\n        :visually-hidden-close=\"visuallyHiddenClose\"\n        :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n        v-on=\"noticeActionListeners\"\n      >\n        <!-- @slot Enter a possible action for the user to take, such as a link to another page -->\n        <slot name=\"action\" />\n      </dt-notice-action>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { DtNoticeIcon, DtNoticeContent, DtNoticeAction, NOTICE_KINDS } from '@/components/notice';\nimport utils from '@/common/utils';\nimport { TOAST_ROLES, TOAST_MIN_DURATION } from './toast_constants.js';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\n\n/**\n * A toast notice, sometimes called a snackbar, is a time-based message that appears based on users' actions.\n * It contains at-a-glance information about outcomes and can be paired with actions.\n * @see https://dialtone.dialpad.com/components/toast.html\n */\nexport default {\n  name: 'DtToast',\n\n  components: {\n    DtNoticeIcon,\n    DtNoticeContent,\n    DtNoticeAction,\n  },\n\n  mixins: [SrOnlyCloseButtonMixin],\n\n  props: {\n    /**\n     * Sets an ID on the title element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the title.\n     */\n    titleId: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * Sets an ID on the content element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the content.\n     */\n    contentId: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * Title header of the toast. This can be left blank to remove the title from the toast entirely.\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Message of the toast. Overridden by default slot.\n     */\n    message: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Provides a role for the toast. 'status' is used by default to communicate a message. 'alert' is used to\n     * communicate an important message like an error that does not contain any interactive elements.\n     * @values status, alert\n     */\n    role: {\n      type: String,\n      default: 'status',\n      validator: (role) => {\n        return TOAST_ROLES.includes(role);\n      },\n    },\n\n    /**\n     * Severity level of the toast, sets the icon and background\n     * @values base, error, info, success, warning\n     */\n    kind: {\n      type: String,\n      default: 'base',\n      validator: (kind) => {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Used in scenarios where the message needs to visually dominate the screen.\n     * @values true, false\n     */\n    important: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Controls whether the toast is shown. If a valid duration is provided, the toast will disappear\n     * after reaching the duration time, so it's convenient to use `.sync` modifier with this prop to update\n     * the data in your component.\n     * Supports .sync modifier\n     * @values true, false\n     */\n    show: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Props for the toast close button.\n     */\n    closeButtonProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Hides the close button from the toast\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the icon from the notice\n     * @values true, false\n     */\n    hideIcon: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the action from the notice\n     * @values true, false\n     */\n    hideAction: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The duration in ms the toast will display before disappearing.\n     * The toast won't disappear if the duration is not provided.\n     * If it's provided, it should be equal to or greater than 6000.\n     */\n    duration: {\n      type: Number,\n      default: null,\n      validator: (duration) => {\n        return duration >= TOAST_MIN_DURATION;\n      },\n    },\n  },\n\n  emits: [\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n\n    /**\n     * Sync show value\n     *\n     * @event update:show\n     */\n    'update:show',\n  ],\n\n  data () {\n    return {\n      isShown: false,\n      minDuration: TOAST_MIN_DURATION,\n    };\n  },\n\n  computed: {\n    kindClass () {\n      const kindClasses = {\n        error: 'd-toast--error',\n        info: 'd-toast--info',\n        success: 'd-toast--success',\n        warning: 'd-toast--warning',\n        base: 'd-toast--base',\n      };\n\n      return kindClasses[this.kind];\n    },\n\n    noticeActionListeners () {\n      return {\n        ...this.$listeners,\n\n        close: event => {\n          this.isShown = false;\n          this.$emit('update:show', false);\n          this.$emit('close', event);\n        },\n      };\n    },\n\n    shouldSetTimeout () {\n      return !!this.duration && this.duration >= this.minDuration;\n    },\n  },\n\n  watch: {\n    show: {\n      handler: function (show) {\n        this.isShown = show;\n        if (show) {\n          this.setTimeout();\n        } else {\n          clearTimeout(this.displayTimer);\n        }\n      },\n\n      immediate: true,\n    },\n  },\n\n  destroyed () {\n    if (this.shouldSetTimeout) {\n      clearTimeout(this.displayTimer);\n    }\n  },\n\n  methods: {\n    setTimeout () {\n      if (this.shouldSetTimeout) {\n        this.displayTimer = setTimeout(() => {\n          this.isShown = false;\n          this.$emit('update:show', false);\n        }, this.duration);\n      }\n    },\n  },\n};\n</script>\n"],"names":["TOAST_ROLES","TOAST_MIN_DURATION","_sfc_main","DtNoticeIcon","DtNoticeContent","DtNoticeAction","SrOnlyCloseButtonMixin","utils","role","kind","NOTICE_KINDS","duration","event","show"],"mappings":"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"}

package/dist/lib/toggle.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("vue"),n=require("./utils.cjs"),r=require("../chunks/_plugin-vue2_normalizer-ZK80B3OL.js");require("./constants.cjs");const a={sm:"d-toggle--small",md:""},s=[!1,!0,"mixed"],d={name:"DtToggle",inheritAttrs:!1,model:{prop:"checked",event:"change"},props:{id:{type:String,default(){return n.default.getUniqueString()}},disabled:{type:Boolean,default:!1},checked:{type:[Boolean,String],default:!1,validator:t=>s.includes(t)},toggleOnClick:{type:Boolean,default:!0},size:{type:String,default:"md",validator:t=>Object.keys(a).includes(t)},showIcon:{type:Boolean,default:!0},labelClass:{type:[String,Array,Object],default:""},labelChildProps:{type:Object,default:()=>({})}},emits:["change"],data(){return{internalChecked:this.checked}},computed:{inputListeners(){return{...this.$listeners,click:t=>this.toggleCheckedValue()}},isIndeterminate(){return this.internalChecked==="mixed"},toggleRole(){return this.isIndeterminate?"checkbox":"switch"},toggleClasses(){return["d-toggle",a[this.size],{"d-toggle--checked":this.internalChecked===!0,"d-toggle--disabled":this.disabled,"d-toggle--indeterminate":this.isIndeterminate}]}},watch:{checked(t){this.internalChecked=t}},mounted(){this.runValidations()},methods:{toggleCheckedValue(){this.$emit("change",!this.internalChecked),this.toggleOnClick&&(this.internalChecked=!this.internalChecked)},hasSlotLabel(){return!!this.$slots.default},runValidations(){this.validateInputLabels(this.hasSlotLabel(),this.$attrs["aria-label"])},validateInputLabels(t,e){!t&&!e&&i.util.warn("You must provide an aria-label when there is no label passed",this)}}};var o=function(){var e=this,l=e._self._c;return l("div",{staticClass:"d-toggle-wrapper"},[e.$slots.default?l("label",e._b({class:e.labelClass,attrs:{for:e.id,"data-qa":"toggle-label"}},"label",e.labelChildProps,!1),[e._t("default")],2):e._e(),l("button",e._g(e._b({class:e.toggleClasses,attrs:{id:e.id,role:e.toggleRole,type:"button","aria-checked":e.internalChecked.toString(),disabled:e.disabled,"aria-disabled":e.disabled.toString()}},"button",e.$attrs,!1),e.inputListeners),[e.showIcon?l("span",{staticClass:"d-toggle__inner"}):e._e()])])},c=[],u=r.n(d,o,c,!1,null,null,null,null);const h=u.exports;exports.DtToggle=h;exports.TOGGLE_CHECKED_VALUES=s;exports.TOGGLE_SIZE_MODIFIERS=a;
+//# sourceMappingURL=toggle.cjs.map

package/dist/lib/toggle.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.cjs","sources":["../../components/toggle/toggle_constants.js","../../components/toggle/toggle.vue"],"sourcesContent":["export const TOGGLE_SIZE_MODIFIERS = {\n  sm: 'd-toggle--small',\n  md: '',\n};\n\nexport const TOGGLE_CHECKED_VALUES = [false, true, 'mixed'];\n\nexport default {\n  TOGGLE_SIZE_MODIFIERS,\n  TOGGLE_CHECKED_VALUES,\n};\n","<template>\n  <div class=\"d-toggle-wrapper\">\n    <label\n      v-if=\"$slots.default\"\n      :class=\"labelClass\"\n      :for=\"id\"\n      v-bind=\"labelChildProps\"\n      data-qa=\"toggle-label\"\n    >\n      <!-- @slot Slot for the main content -->\n      <slot />\n    </label>\n    <button\n      :id=\"id\"\n      :role=\"toggleRole\"\n      type=\"button\"\n      :aria-checked=\"internalChecked.toString()\"\n      :disabled=\"disabled\"\n      :aria-disabled=\"disabled.toString()\"\n      :class=\"toggleClasses\"\n      v-bind=\"$attrs\"\n      v-on=\"inputListeners\"\n    >\n      <span\n        v-if=\"showIcon\"\n        class=\"d-toggle__inner\"\n      />\n    </button>\n  </div>\n</template>\n\n<script>\nimport Vue from 'vue';\nimport utils from '@/common/utils';\nimport { TOGGLE_CHECKED_VALUES, TOGGLE_SIZE_MODIFIERS } from '@/components/toggle/toggle_constants';\n\n/**\n * A toggle (or \"switch\") is a button control element that allows the user to make a binary (on/off) selection.\n * @see https://dialtone.dialpad.com/components/toggle.html\n */\nexport default {\n\n  name: 'DtToggle',\n\n  inheritAttrs: false,\n\n  model: {\n    prop: 'checked',\n    event: 'change',\n  },\n\n  props: {\n\n    /**\n     * The id of the toggle\n     */\n    id: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * Disables the toggle interactions\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Value of the toggle\n     * @model checked\n     * @values true, false, 'mixed'\n     */\n    checked: {\n      type: [Boolean, String],\n      default: false,\n      validator: (v) => TOGGLE_CHECKED_VALUES.includes(v),\n    },\n\n    /**\n     * Whether the component toggles on click. If you set this to false it means you will handle the toggling manually\n     * via the checked prop or v-model. Change events will still be triggered.\n     * @values true, false\n     */\n    toggleOnClick: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * The size of the toggle.\n     * @values sm, md\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(TOGGLE_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Shows the icon\n     * @values true, false\n     */\n    showIcon: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\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  emits: [\n    /**\n     * Toggle change event\n     *\n     * @event change\n     * @type {Boolean}\n     * @model change\n     */\n    'change',\n  ],\n\n  data () {\n    return {\n      internalChecked: this.checked,\n    };\n  },\n\n  computed: {\n    inputListeners () {\n      return {\n        ...this.$listeners,\n        click: _ => this.toggleCheckedValue(),\n      };\n    },\n\n    isIndeterminate () {\n      return this.internalChecked === 'mixed';\n    },\n\n    toggleRole () {\n      return this.isIndeterminate ? 'checkbox' : 'switch';\n    },\n\n    toggleClasses () {\n      return [\n        'd-toggle',\n        TOGGLE_SIZE_MODIFIERS[this.size],\n        {\n          'd-toggle--checked': this.internalChecked === true,\n          'd-toggle--disabled': this.disabled,\n          'd-toggle--indeterminate': this.isIndeterminate,\n        },\n      ];\n    },\n  },\n\n  watch: {\n    checked (newChecked) {\n      this.internalChecked = newChecked;\n    },\n  },\n\n  mounted () {\n    this.runValidations();\n  },\n\n  methods: {\n    toggleCheckedValue () {\n      this.$emit('change', !this.internalChecked);\n\n      if (this.toggleOnClick) {\n        this.internalChecked = !this.internalChecked;\n      }\n    },\n\n    hasSlotLabel () {\n      return !!(this.$slots.default);\n    },\n\n    runValidations () {\n      this.validateInputLabels(this.hasSlotLabel(), this.$attrs['aria-label']);\n    },\n\n    validateInputLabels (hasLabel, ariaLabel) {\n      if (!hasLabel && !ariaLabel) {\n        Vue.util.warn(\n          'You must provide an aria-label when there is no label passed',\n          this,\n        );\n      }\n    },\n  },\n};\n</script>\n"],"names":["TOGGLE_SIZE_MODIFIERS","TOGGLE_CHECKED_VALUES","_sfc_main","utils","v","s","_","newChecked","hasLabel","ariaLabel","Vue"],"mappings":"sNAAY,MAACA,EAAwB,CACnC,GAAI,kBACJ,GAAI,EACN,EAEaC,EAAwB,CAAC,GAAO,GAAM,OAAO,ECmC1DC,EAAA,CAEA,KAAA,WAEA,aAAA,GAEA,MAAA,CACA,KAAA,UACA,MAAA,QACA,EAEA,MAAA,CAKA,GAAA,CACA,KAAA,OACA,SAAA,CAAA,OAAAC,UAAA,gBAAA,CAAA,CACA,EAMA,SAAA,CACA,KAAA,QACA,QAAA,EACA,EAOA,QAAA,CACA,KAAA,CAAA,QAAA,MAAA,EACA,QAAA,GACA,UAAAC,GAAAH,EAAA,SAAAG,CAAA,CACA,EAOA,cAAA,CACA,KAAA,QACA,QAAA,EACA,EAMA,KAAA,CACA,KAAA,OACA,QAAA,KACA,UAAAC,GAAA,OAAA,KAAAL,CAAA,EAAA,SAAAK,CAAA,CACA,EAMA,SAAA,CACA,KAAA,QACA,QAAA,EACA,EAKA,WAAA,CACA,KAAA,CAAA,OAAA,MAAA,MAAA,EACA,QAAA,EACA,EAKA,gBAAA,CACA,KAAA,OACA,QAAA,KAAA,CAAA,EACA,CACA,EAEA,MAAA,CAQA,QACA,EAEA,MAAA,CACA,MAAA,CACA,gBAAA,KAAA,OACA,CACA,EAEA,SAAA,CACA,gBAAA,CACA,MAAA,CACA,GAAA,KAAA,WACA,MAAAC,GAAA,KAAA,mBAAA,CACA,CACA,EAEA,iBAAA,CACA,OAAA,KAAA,kBAAA,OACA,EAEA,YAAA,CACA,OAAA,KAAA,gBAAA,WAAA,QACA,EAEA,eAAA,CACA,MAAA,CACA,WACAN,EAAA,KAAA,IAAA,EACA,CACA,oBAAA,KAAA,kBAAA,GACA,qBAAA,KAAA,SACA,0BAAA,KAAA,eACA,CACA,CACA,CACA,EAEA,MAAA,CACA,QAAAO,EAAA,CACA,KAAA,gBAAAA,CACA,CACA,EAEA,SAAA,CACA,KAAA,eAAA,CACA,EAEA,QAAA,CACA,oBAAA,CACA,KAAA,MAAA,SAAA,CAAA,KAAA,eAAA,EAEA,KAAA,gBACA,KAAA,gBAAA,CAAA,KAAA,gBAEA,EAEA,cAAA,CACA,MAAA,CAAA,CAAA,KAAA,OAAA,OACA,EAEA,gBAAA,CACA,KAAA,oBAAA,KAAA,aAAA,EAAA,KAAA,OAAA,YAAA,CAAA,CACA,EAEA,oBAAAC,EAAAC,EAAA,CACA,CAAAD,GAAA,CAAAC,GACAC,EAAA,KAAA,KACA,+DACA,IACA,CAEA,CACA,CACA"}

package/dist/lib/tooltip-directive.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("./utils.cjs"),n=require("./tooltip.cjs");require("./constants.cjs");require("vue");require("../chunks/popover_constants-hOEhklvr.js");require("tippy.js");require("../chunks/_plugin-vue2_normalizer-ZK80B3OL.js");require("./lazy-show.cjs");const c={name:"dt-tooltip-directive",install(l){const d=document.createElement("div");document.body.appendChild(d);const a="top",p=new l({name:"DtTooltipDirectiveApp",components:{DtTooltip:n.DtTooltip},data(){return{tooltips:[]}},methods:{addOrUpdateTooltip(t,o,e){const i=this.tooltips.findIndex(r=>r.id===t);i!==-1?(this.tooltips[i].message=o,this.tooltips[i].placement=e):this.tooltips.push({id:t,message:o,placement:e})},removeTooltip(t){this.tooltips=this.tooltips.filter(o=>o.id!==t)}},render(t){return t("div",{domProps:{id:"dt-tooltip-directive-app"}},[this.tooltips.map(({id:o,message:e,placement:i})=>t(n.DtTooltip,{key:o,props:{message:e,placement:i,delay:process.env.NODE_ENV!=="test",externalAnchor:`[data-dt-tooltip-id="${o}"]`}}))])}});p.$mount(d),l.directive("dt-tooltip",{bind(t,o){s(t,o)},update(t,o){o.value!==o.oldValue&&s(t,o)},unbind(t){p.removeTooltip(t.getAttribute("data-dt-tooltip-id"))}});function s(t,o){const e=t.getAttribute("data-dt-tooltip-id")||u.getUniqueString(),i=o.value,r=o.arg||a;t.setAttribute("data-dt-tooltip-id",e),p.addOrUpdateTooltip(e,i,r)}}};exports.DtTooltipDirective=c;
+//# sourceMappingURL=tooltip-directive.cjs.map

package/dist/lib/tooltip-directive.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-directive.cjs","sources":["../../directives/tooltip/tooltip.js"],"sourcesContent":["import { DtTooltip } from '@/components/tooltip';\nimport { getUniqueString } from '@/common/utils';\n\nexport const DtTooltipDirective = {\n  name: 'dt-tooltip-directive',\n  install (Vue) {\n    const mountPoint = document.createElement('div');\n    document.body.appendChild(mountPoint);\n\n    const DEFAULT_PLACEMENT = 'top';\n    const DtTooltipDirectiveApp = new Vue({\n      name: 'DtTooltipDirectiveApp',\n      components: { DtTooltip },\n      data () {\n        return {\n          tooltips: [],\n        };\n      },\n\n      methods: {\n        addOrUpdateTooltip (id, message, placement) {\n          const index = this.tooltips.findIndex(tooltip => tooltip.id === id);\n          if (index !== -1) {\n            // Update existing tooltip\n            this.tooltips[index].message = message;\n            this.tooltips[index].placement = placement;\n          } else {\n            // Add new tooltip\n            this.tooltips.push({ id, message, placement });\n          }\n        },\n\n        removeTooltip (id) {\n          this.tooltips = this.tooltips.filter(tooltip => tooltip.id !== id);\n        },\n      },\n\n      render (h) {\n        return h('div',\n          {\n            domProps: { id: 'dt-tooltip-directive-app' },\n          },\n          [\n            this.tooltips.map(({ id, message, placement }) => {\n              return h(DtTooltip, {\n                key: id,\n                props: {\n                  message,\n                  placement,\n                  /**\n                   * Set the delay to false when running tests only.\n                   */\n                  delay: process.env.NODE_ENV !== 'test',\n                  externalAnchor: `[data-dt-tooltip-id=\"${id}\"]`,\n                },\n              });\n            }),\n          ],\n        );\n      },\n    });\n\n    DtTooltipDirectiveApp.$mount(mountPoint);\n\n    Vue.directive('dt-tooltip', {\n      bind (anchor, binding) {\n        // Initial tooltip setup\n        setupTooltip(anchor, binding);\n      },\n      update (anchor, binding) {\n        // Update tooltip on binding value change\n        if (binding.value !== binding.oldValue) {\n          setupTooltip(anchor, binding);\n        }\n      },\n      unbind (anchor) {\n        DtTooltipDirectiveApp.removeTooltip(anchor.getAttribute('data-dt-tooltip-id'));\n      },\n    });\n\n    function setupTooltip (anchor, binding) {\n      const tooltipId = anchor.getAttribute('data-dt-tooltip-id') || getUniqueString();\n      const message = binding.value;\n      const placement = binding.arg || DEFAULT_PLACEMENT;\n\n      anchor.setAttribute('data-dt-tooltip-id', tooltipId);\n      DtTooltipDirectiveApp.addOrUpdateTooltip(tooltipId, message, placement);\n    }\n  },\n};\n\nexport default DtTooltipDirective;\n"],"names":["DtTooltipDirective","Vue","mountPoint","DEFAULT_PLACEMENT","DtTooltipDirectiveApp","DtTooltip","id","message","placement","index","tooltip","h","anchor","binding","setupTooltip","tooltipId","getUniqueString"],"mappings":"+UAGY,MAACA,EAAqB,CAChC,KAAM,uBACN,QAASC,EAAK,CACZ,MAAMC,EAAa,SAAS,cAAc,KAAK,EAC/C,SAAS,KAAK,YAAYA,CAAU,EAEpC,MAAMC,EAAoB,MACpBC,EAAwB,IAAIH,EAAI,CACpC,KAAM,wBACN,WAAY,CAAEI,UAAAA,EAAAA,SAAW,EACzB,MAAQ,CACN,MAAO,CACL,SAAU,CAAE,CACtB,CACO,EAED,QAAS,CACP,mBAAoBC,EAAIC,EAASC,EAAW,CAC1C,MAAMC,EAAQ,KAAK,SAAS,UAAUC,GAAWA,EAAQ,KAAOJ,CAAE,EAC9DG,IAAU,IAEZ,KAAK,SAASA,CAAK,EAAE,QAAUF,EAC/B,KAAK,SAASE,CAAK,EAAE,UAAYD,GAGjC,KAAK,SAAS,KAAK,CAAE,GAAAF,EAAI,QAAAC,EAAS,UAAAC,CAAS,CAAE,CAEhD,EAED,cAAeF,EAAI,CACjB,KAAK,SAAW,KAAK,SAAS,OAAOI,GAAWA,EAAQ,KAAOJ,CAAE,CAClE,CACF,EAED,OAAQK,EAAG,CACT,OAAOA,EAAE,MACP,CACE,SAAU,CAAE,GAAI,0BAA4B,CAC7C,EACD,CACE,KAAK,SAAS,IAAI,CAAC,CAAE,GAAAL,EAAI,QAAAC,EAAS,UAAAC,KACzBG,EAAEN,EAAAA,UAAW,CAClB,IAAKC,EACL,MAAO,CACL,QAAAC,EACA,UAAAC,EAIA,MAAO,QAAQ,IAAI,WAAa,OAChC,eAAgB,wBAAwBF,CAAE,IAC3C,CACjB,CAAe,CACF,CACF,CACX,CACO,CACP,CAAK,EAEDF,EAAsB,OAAOF,CAAU,EAEvCD,EAAI,UAAU,aAAc,CAC1B,KAAMW,EAAQC,EAAS,CAErBC,EAAaF,EAAQC,CAAO,CAC7B,EACD,OAAQD,EAAQC,EAAS,CAEnBA,EAAQ,QAAUA,EAAQ,UAC5BC,EAAaF,EAAQC,CAAO,CAE/B,EACD,OAAQD,EAAQ,CACdR,EAAsB,cAAcQ,EAAO,aAAa,oBAAoB,CAAC,CAC9E,CACP,CAAK,EAED,SAASE,EAAcF,EAAQC,EAAS,CACtC,MAAME,EAAYH,EAAO,aAAa,oBAAoB,GAAKI,EAAe,gBAAA,EACxET,EAAUM,EAAQ,MAClBL,EAAYK,EAAQ,KAAOV,EAEjCS,EAAO,aAAa,qBAAsBG,CAAS,EACnDX,EAAsB,mBAAmBW,EAAWR,EAASC,CAAS,CACvE,CACF,CACH"}

package/dist/lib/tooltip.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("../chunks/popover_constants-hOEhklvr.js"),a=require("./utils.cjs"),l=require("../chunks/_plugin-vue2_normalizer-ZK80B3OL.js"),h=require("./lazy-show.cjs");require("tippy.js");require("./constants.cjs");require("vue");const c={name:"DtTooltip",components:{DtLazyShow:h.DtLazyShow},props:{id:{type:String,default(){return a.getUniqueString()}},fallbackPlacements:{type:Array,default:()=>["auto"]},inverted:{type:Boolean,default:!1},offset:{type:Array,default:()=>[0,-4]},placement:{type:String,default:"top",validator(e){return n.T.includes(e)}},sticky:{type:[Boolean,String],default:!1,validator:e=>n.j.includes(e)},appendTo:{type:[HTMLElement,String],default:"body",validator:e=>n.e.includes(e)||e instanceof HTMLElement},contentClass:{type:[String,Object,Array],default:""},message:{type:String,default:""},enabled:{type:Boolean,default:!0},show:{type:Boolean,default:null},transition:{type:String,default:"fade"},delay:{type:Boolean,default:!0},externalAnchor:{type:String,default:null}},emits:["shown","update:show"],data(){return{TOOLTIP_KIND_MODIFIERS:n.i,tip:null,inTimer:null,isShown:!1,currentPlacement:this.placement,isTouchDevice:!1}},computed:{isVisible(){var o,r;const e=!!((o=this.message)!=null&&o.trim()),t=!!((r=this.$slots)!=null&&r.default),i=!this.isTouchDevice;return this.isShown&&this.enabled&&(e||t)&&i},tooltipListeners(){return{...this.$listeners,"after-leave":()=>{this.onLeaveTransitionComplete()},"after-enter":()=>{this.onEnterTransitionComplete()}}},tippyProps(){return{offset:this.offset,interactive:!1,trigger:"manual",placement:this.placement,sticky:this.sticky,popperOptions:n.l({fallbackPlacements:this.fallbackPlacements,hasHideModifierEnabled:!0,onChangePlacement:this.onChangePlacement})}},anchor(){return this.externalAnchor?document.body.querySelector(this.externalAnchor):n.m(this.$refs.anchor)}},watch:{tippyProps:{handler:"setProps",deep:!0},show:{handler:function(e){e!==null&&(this.isShown=e)},immediate:!0},isShown(e){e?(this.setProps(),this.tip.show()):this.tip.hide()},sticky(e){this.tip.setProps({sticky:e})}},mounted(){!this.enabled&&this.show!=null&&(console.warn("Tooltip: You cannot use both the enabled and show props at the same time."),console.warn("The show prop will be ignored.")),this.externalAnchor&&this.addExternalAnchorEventListeners(),this.tip=n.n(this.anchor,this.initOptions()),this.isShown&&this.tip.show()},beforeDestroy(){var e;this.externalAnchor&&this.removeExternalAnchorEventListeners(),this.tip&&((e=this.tip)==null||e.destroy())},methods:{calculateAnchorZindex(){return this.$el.getRootNode().querySelector('.d-modal[aria-hidden="false"], .d-modal--transparent[aria-hidden="false"]')||this.$el.closest(".d-zi-drawer")?651:400},hasVisibleFocus(){return this.anchor.matches(":focus-visible")},onEnterAnchor(e){this.isTouchDevice&&!e.relatedTarget||(this.delay?this.inTimer=setTimeout((function(t){this.triggerShow(t)}).bind(this,e),n.h):this.triggerShow(e),this.isTouchDevice=!1)},triggerShow(e){e.type==="focusin"?this.show===null&&this.hasVisibleFocus()&&(this.isShown=!0):this.show===null&&(this.isShown=!0)},onLeaveAnchor(e){e.type==="keydown"&&e.code!=="Escape"||(clearTimeout(this.inTimer),this.triggerHide())},triggerHide(){this.show===null&&(this.isShown=!1)},onChangePlacement(e){this.currentPlacement=e},onLeaveTransitionComplete(){var e;(e=this.tip)==null||e.unmount(),this.$emit("shown",!1),this.show!==null&&this.$emit("update:show",!1)},onEnterTransitionComplete(){this.$emit("shown",!0),this.show!==null&&this.$emit("update:show",!0)},setProps(){var e,t;this.tip&&this.tip.setProps&&this.tip.setProps({...this.tippyProps,zIndex:this.calculateAnchorZindex(),appendTo:this.appendTo==="body"?(t=(e=this.anchor)==null?void 0:e.getRootNode())==null?void 0:t.querySelector("body"):this.appendTo})},onMount(){this.setProps()},initOptions(){return{contentElement:this.$refs.content.$el,allowHTML:!0,zIndex:this.calculateAnchorZindex(),onMount:this.onMount,...this.tippyProps}},addExternalAnchorEventListeners(){["focusin","mouseenter"].forEach(e=>{this.anchor.addEventListener(e,t=>this.onEnterAnchor(t))}),["focusout","mouseleave","keydown"].forEach(e=>{this.anchor.addEventListener(e,t=>this.onLeaveAnchor(t))})},removeExternalAnchorEventListeners(){["focusin","mouseenter"].forEach(e=>{this.anchor.removeEventListener(e,t=>this.onEnterAnchor(t))}),["focusout","mouseleave","keydown"].forEach(e=>{this.anchor.removeEventListener(e,t=>this.onLeaveAnchor(t))})},onTouchStart(){this.isTouchDevice=!0}}};var u=function(){var t=this,i=t._self._c;return i("div",{attrs:{"data-qa":"dt-tooltip-container"}},[t.externalAnchor?t._e():i("span",{ref:"anchor",attrs:{"data-qa":"dt-tooltip-anchor"},on:{focusin:t.onEnterAnchor,focusout:t.onLeaveAnchor,mouseenter:t.onEnterAnchor,mouseleave:t.onLeaveAnchor,keydown:function(s){return!s.type.indexOf("key")&&t._k(s.keyCode,"esc",27,s.key,["Esc","Escape"])?null:t.onLeaveAnchor.apply(null,arguments)},touchstart:t.onTouchStart}},[t._t("anchor")],2),i("dt-lazy-show",t._g({ref:"content",class:["d-tooltip",`d-tooltip__arrow-tippy--${t.currentPlacement}`,{[t.TOOLTIP_KIND_MODIFIERS.inverted]:t.inverted},t.contentClass],attrs:{id:t.id,show:t.isVisible,role:"tooltip","aria-hidden":"false","data-qa":"dt-tooltip",appear:"",transition:t.transition}},t.tooltipListeners),[t._t("default",function(){return[t._v(" "+t._s(t.message)+" ")]})],2)],1)},d=[],p=l.n(c,u,d,!1,null,null,null,null);const f=p.exports;exports.TOOLTIP_DELAY_MS=n.h;exports.TOOLTIP_DIRECTIONS=n.T;exports.TOOLTIP_HIDE_ON_CLICK_VARIANTS=n.k;exports.TOOLTIP_KIND_MODIFIERS=n.i;exports.TOOLTIP_STICKY_VALUES=n.j;exports.DtTooltip=f;
+//# sourceMappingURL=tooltip.cjs.map

package/dist/lib/tooltip.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.cjs","sources":["../../components/tooltip/tooltip.vue"],"sourcesContent":["<template>\n  <div data-qa=\"dt-tooltip-container\">\n    <!-- disabling as the below events are for capturing events from interactive\n         elements within the span rather than on the span itself -->\n    <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n    <span\n      v-if=\"!externalAnchor\"\n      ref=\"anchor\"\n      data-qa=\"dt-tooltip-anchor\"\n      @focusin=\"onEnterAnchor\"\n      @focusout=\"onLeaveAnchor\"\n      @mouseenter=\"onEnterAnchor\"\n      @mouseleave=\"onLeaveAnchor\"\n      @keydown.esc=\"onLeaveAnchor\"\n      @touchstart=\"onTouchStart\"\n    >\n      <!-- @slot Slot for the anchor element -->\n      <slot\n        name=\"anchor\"\n      />\n    </span>\n    <dt-lazy-show\n      :id=\"id\"\n      ref=\"content\"\n      :show=\"isVisible\"\n      role=\"tooltip\"\n      aria-hidden=\"false\"\n      data-qa=\"dt-tooltip\"\n      appear\n      :transition=\"transition\"\n      :class=\"[\n        'd-tooltip',\n        `d-tooltip__arrow-tippy--${currentPlacement}`,\n        {\n          [ TOOLTIP_KIND_MODIFIERS.inverted ]: inverted,\n        },\n        contentClass,\n      ]\"\n      v-on=\"tooltipListeners\"\n    >\n      <!-- In case when transitionend event doesn't work correct (for ex. tooltip component with custom trigger) -->\n      <!-- after-leave event can be used instead of transitionend -->\n      <!-- @slot Slot for the content, defaults to message prop -->\n      <slot>\n        {{ message }}\n      </slot>\n    </dt-lazy-show>\n  </div>\n</template>\n\n<script>\nimport {\n  TOOLTIP_KIND_MODIFIERS,\n  TOOLTIP_DIRECTIONS,\n  TOOLTIP_STICKY_VALUES,\n  TOOLTIP_DELAY_MS,\n} from './tooltip_constants.js';\nimport {\n  POPOVER_APPEND_TO_VALUES,\n} from '../popover/popover_constants';\nimport { getUniqueString } from '@/common/utils';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport {\n  createTippy,\n  getAnchor,\n  getPopperOptions,\n} from '@/components/popover/tippy_utils';\n\n/**\n * A tooltip is a floating label that briefly explains an action, function, or an element.\n * Its content is exclusively text and shouldn't be vital information for users.\n * If richer media is desired, consider using a popover instead.\n * @see https://dialtone.dialpad.com/components/tooltip.html\n */\nexport default {\n  name: 'DtTooltip',\n  components: {\n    DtLazyShow,\n  },\n\n  props: {\n    /**\n     * The id of the tooltip\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * If the popover does not fit in the direction described by \"placement\",\n     * it will attempt to change its direction to the \"fallbackPlacements\"\n     * if defined, otherwise it will automatically position to a new location\n     * as it sees best fit. See\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements\"\n     *   target=\"_blank\"\n     * >\n     *   Popper.js docs\n     * </a>\n     * */\n    fallbackPlacements: {\n      type: Array,\n      default: () => ['auto'],\n    },\n\n    /**\n     * If true, applies inverted styles to the tooltip\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     *  Displaces the tooltip from its reference element\n     *  by the specified number of pixels. See\n     *  <a\n     *    class=\"d-link\"\n     *    href=\"https://atomiks.github.io/tippyjs/v6/all-props/#offset\"\n     *    target=\"_blank\"\n     *  >\n     *    Tippy.js docs\n     *  </a>\n     */\n    offset: {\n      type: Array,\n      default: () => [0, -4],\n    },\n\n    /**\n     * The direction the popover displays relative to the anchor. See\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://atomiks.github.io/tippyjs/v6/all-props/#placement\"\n     *   target=\"_blank\"\n     * >\n     *   Tippy.js docs\n     * </a>\n     * @values top, top-start, top-end,\n     * right, right-start, right-end,\n     * left, left-start, left-end,\n     * bottom, bottom-start, bottom-end,\n     * auto, auto-start, auto-end\n     */\n    placement: {\n      type: String,\n      default: 'top',\n      validator (placement) {\n        return TOOLTIP_DIRECTIONS.includes(placement);\n      },\n    },\n\n    /**\n     * If the tooltip sticks to the anchor. This is usually not needed, but can be needed\n     * if the reference element's position is animating, or to automatically update the popover\n     * position in those cases the DOM layout changes the reference element's position.\n     * `true` enables it, `reference` only checks the \"reference\" rect for changes and `popper` only\n     * checks the \"popper\" rect for changes. See\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://atomiks.github.io/tippyjs/v6/all-props/#sticky\"\n     *   target=\"_blank\"\n     * >\n     *   Tippy.js docs\n     * </a>\n     * @values true, false, reference, popper\n     */\n    sticky: {\n      type: [Boolean, String],\n      default: false,\n      validator: (sticky) => {\n        return TOOLTIP_STICKY_VALUES.includes(sticky);\n      },\n    },\n\n    /**\n     * Sets the element to which the tooltip is going to append to.\n     * 'body' will append to the nearest body (supports shadow DOM).\n     * This prop is not reactive, must be set on initial render.\n     * @values 'body', 'parent', HTMLElement,\n     */\n    appendTo: {\n      type: [HTMLElement, String],\n      default: 'body',\n      validator: appendTo => {\n        return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n            (appendTo instanceof HTMLElement);\n      },\n    },\n\n    /**\n     * Additional css classes for the tooltip content element.\n     * Can accept all of String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    contentClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * A provided message for the tooltip content\n     */\n    message: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Controls whether hover/focus causes the tooltip to appear.\n     * Cannot be combined with the show prop. show value will be ignored.\n     * by default this is true, if you override with false, the tooltip will never show up.\n     */\n    enabled: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Controls whether the tooltip is shown. Leaving this null will have the tooltip trigger on mouseover by default.\n     * If you set this value, the default mouseover behavior will be disabled and you can control it as you need.\n     * Supports .sync modifier\n     * @values null, true, false\n     */\n    show: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * Named transition when the content display is toggled.\n     * @see DtLazyShow\n     */\n    transition: {\n      type: String,\n      default: 'fade',\n    },\n\n    /**\n     * Whether the tooltip will have a delay when being focused or moused over.\n     * @values true, false\n     */\n    delay: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * External anchor id to use in those cases the anchor can't be provided via the slot.\n     * For instance, using the combobox's input as the anchor for the popover.\n     */\n    externalAnchor: {\n      type: String,\n      default: null,\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when tooltip is shown or hidden\n     *\n     * @event shown\n     * @type {Boolean}\n     */\n    'shown',\n\n    /**\n     * Sync show value\n     *\n     * @event update:show\n     */\n    'update:show',\n  ],\n\n  data () {\n    return {\n      TOOLTIP_KIND_MODIFIERS,\n      tip: null,\n\n      inTimer: null,\n\n      // Internal state for whether the tooltip is shown. Changing the prop\n      // will update this.\n      isShown: false,\n\n      // this is where the placement currently is, this can be different than\n      // the placement prop when there is not enough available room for the tip\n      // to display and it uses a fallback placement.\n      currentPlacement: this.placement,\n\n      // flag check touch based device\n      isTouchDevice: false,\n    };\n  },\n\n  computed: {\n    // whether the tooltip is visible or not.\n    isVisible () {\n      const hasMessage = !!this.message?.trim();\n      const hasDefaultSlot = !!this.$slots?.default;\n      const isDeviceCompatible = !this.isTouchDevice;\n\n      const shouldBeVisible = this.isShown && this.enabled && (hasMessage || hasDefaultSlot);\n\n      return shouldBeVisible && isDeviceCompatible;\n    },\n\n    tooltipListeners () {\n      return {\n        ...this.$listeners,\n\n        'after-leave': () => {\n          this.onLeaveTransitionComplete();\n        },\n\n        'after-enter': () => {\n          this.onEnterTransitionComplete();\n        },\n      };\n    },\n\n    tippyProps () {\n      return {\n        offset: this.offset,\n        interactive: false,\n        trigger: 'manual',\n        placement: this.placement,\n        sticky: this.sticky,\n        popperOptions: getPopperOptions({\n          fallbackPlacements: this.fallbackPlacements,\n          hasHideModifierEnabled: true,\n          onChangePlacement: this.onChangePlacement,\n        }),\n      };\n    },\n\n    anchor () {\n      return this.externalAnchor ? document.body.querySelector(this.externalAnchor) : getAnchor(this.$refs.anchor);\n    },\n  },\n\n  watch: {\n\n    tippyProps: {\n      handler: 'setProps',\n      deep: true,\n    },\n\n    show: {\n      handler: function (show) {\n        if (show !== null) {\n          this.isShown = show;\n        }\n      },\n\n      immediate: true,\n    },\n\n    isShown (isShown) {\n      if (isShown) {\n        this.setProps();\n        this.tip.show();\n      } else {\n        this.tip.hide();\n      }\n    },\n\n    sticky (sticky) {\n      this.tip.setProps({\n        sticky,\n      });\n    },\n  },\n\n  mounted () {\n    if (!this.enabled && this.show != null) {\n      console.warn('Tooltip: You cannot use both the enabled and show props at the same time.');\n      console.warn('The show prop will be ignored.');\n    }\n    this.externalAnchor && this.addExternalAnchorEventListeners();\n    this.tip = createTippy(this.anchor, this.initOptions());\n\n    // immediate watcher fires before mounted, so have this here in case\n    // show prop was initially set to true.\n    if (this.isShown) {\n      this.tip.show();\n    }\n  },\n\n  beforeDestroy () {\n    this.externalAnchor && this.removeExternalAnchorEventListeners();\n\n    if (this.tip) {\n      this.tip?.destroy();\n    }\n  },\n\n  methods: {\n    calculateAnchorZindex () {\n      // if a modal is currently active render at modal-element z-index, otherwise at tooltip z-index\n      if (this.$el.getRootNode()\n        .querySelector('.d-modal[aria-hidden=\"false\"], .d-modal--transparent[aria-hidden=\"false\"]') ||\n        // Special case because we don't have any dialtone drawer component yet. Render at 651 when\n        // anchor of popover is within a drawer.\n        this.$el.closest('.d-zi-drawer')) {\n        return 651;\n      } else {\n        return 400;\n      }\n    },\n\n    hasVisibleFocus () {\n      return this.anchor.matches(':focus-visible');\n    },\n\n    onEnterAnchor (e) {\n      // Note: This is to stop the call of mouseenter event when touchstart event is triggered,\n      //       as when triggered by click or touch, the relatedTarget property of MouseEvent is null\n      if (this.isTouchDevice && !e.relatedTarget) return;\n\n      if (this.delay) {\n        this.inTimer = setTimeout(function (event) {\n          this.triggerShow(event);\n        }.bind(this, e), TOOLTIP_DELAY_MS);\n      } else {\n        this.triggerShow(e);\n      }\n\n      // since this method will be trigger by mouse event, updating the flag is non-touch device\n      this.isTouchDevice = false;\n    },\n\n    triggerShow (e) {\n      if (e.type === 'focusin') {\n        // only show tooltips on visible focus when triggered via focus.\n        // when the user is using the mouse they only want tooltips to display\n        // on mouseover.\n        //\n        // Example: anchor of a popover is a button with tooltip.\n        // closing it with the mouse would trigger the tooltip to display as\n        // the anchor is focused on close. Not what we want.\n        if (this.show === null && this.hasVisibleFocus()) {\n          this.isShown = true;\n        }\n      } else {\n        if (this.show === null) this.isShown = true;\n      }\n    },\n\n    onLeaveAnchor (e) {\n      if (e.type === 'keydown' && e.code !== 'Escape') return;\n\n      clearTimeout(this.inTimer);\n      this.triggerHide();\n    },\n\n    triggerHide () {\n      if (this.show === null) this.isShown = false;\n    },\n\n    onChangePlacement (placement) {\n      this.currentPlacement = placement;\n    },\n\n    onLeaveTransitionComplete () {\n      this.tip?.unmount();\n      this.$emit('shown', false);\n      if (this.show !== null) {\n        this.$emit('update:show', false);\n      }\n    },\n\n    onEnterTransitionComplete () {\n      this.$emit('shown', true);\n      if (this.show !== null) {\n        this.$emit('update:show', true);\n      }\n    },\n\n    setProps () {\n      if (this.tip && this.tip.setProps) {\n        this.tip.setProps({\n          ...this.tippyProps,\n          zIndex: this.calculateAnchorZindex(),\n          appendTo: this.appendTo === 'body' ? this.anchor?.getRootNode()?.querySelector('body') : this.appendTo,\n        });\n      }\n    },\n\n    onMount () {\n      this.setProps();\n    },\n\n    initOptions () {\n      return {\n        contentElement: this.$refs.content.$el,\n        allowHTML: true,\n        zIndex: this.calculateAnchorZindex(),\n        onMount: this.onMount,\n        ...this.tippyProps,\n      };\n    },\n\n    addExternalAnchorEventListeners () {\n      ['focusin', 'mouseenter'].forEach(listener => {\n        this.anchor.addEventListener(listener, (event) => this.onEnterAnchor(event));\n      });\n      ['focusout', 'mouseleave', 'keydown'].forEach(listener => {\n        this.anchor.addEventListener(listener, (event) => this.onLeaveAnchor(event));\n      });\n    },\n\n    removeExternalAnchorEventListeners () {\n      ['focusin', 'mouseenter'].forEach(listener => {\n        this.anchor.removeEventListener(listener, (event) => this.onEnterAnchor(event));\n      });\n      ['focusout', 'mouseleave', 'keydown'].forEach(listener => {\n        this.anchor.removeEventListener(listener, (event) => this.onLeaveAnchor(event));\n      });\n    },\n\n    onTouchStart () {\n      this.isTouchDevice = true;\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.tippy-box[data-popper-reference-hidden] {\n  .d-tooltip {\n    visibility: hidden;\n    pointer-events: none;\n  }\n}\n</style>\n"],"names":["_sfc_main","DtLazyShow","getUniqueString","placement","TOOLTIP_DIRECTIONS","sticky","TOOLTIP_STICKY_VALUES","appendTo","POPOVER_APPEND_TO_VALUES","TOOLTIP_KIND_MODIFIERS","hasMessage","_a","hasDefaultSlot","_b","isDeviceCompatible","getPopperOptions","getAnchor","show","isShown","createTippy","event","TOOLTIP_DELAY_MS","listener"],"mappings":"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"}

package/dist/lib/top-banner-info.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("../chunks/_plugin-vue2_normalizer-ZK80B3OL.js"),r=["green300","green100","red200","red100","gold100","gold200","black100","white"],o={name:"DtRecipeTopBannerInfo",props:{colorCode:{type:String,default:"green300",validator:function(t){return r.includes(t)}}},computed:{bannerInfoClass(){return[{green300:"d-bgc-success",green100:"d-bgc-success",red200:"d-bgc-critical",red100:"d-bgc-critical",gold200:"d-bgc-warning",gold100:"d-bgc-warning",black100:"d-bgc-info",white:"d-bgc-primary"}[this.colorCode]]}}};var s=function(){var n=this,e=n._self._c;return e("div",{staticClass:"dt-top-banner-info",class:n.bannerInfoClass,attrs:{"data-qa":"banner-info"}},[e("div",{staticClass:"dt-top-banner-info__left"},[n._t("left")],2),e("div",{staticClass:"dt-top-banner-info__middle",attrs:{"data-qa":"banner-info--middle"}},[n._t("default")],2),e("div",{staticClass:"dt-top-banner-info__right"},[n._t("right")],2)])},i=[],c=a.n(o,s,i,!1,null,null,null,null);const d=c.exports;exports.COLOR_CODES=r;exports.DtRecipeTopBannerInfo=d;
+//# sourceMappingURL=top-banner-info.cjs.map

package/dist/lib/top-banner-info.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"top-banner-info.cjs","sources":["../../recipes/notices/top_banner_info/top_banner_info_constants.js","../../recipes/notices/top_banner_info/top_banner_info.vue"],"sourcesContent":["export const COLOR_CODES = ['green300', 'green100', 'red200', 'red100', 'gold100',\n  'gold200', 'black100', 'white'];\n\nexport default {\n  COLOR_CODES,\n};\n","<template>\n  <div\n    class=\"dt-top-banner-info\"\n    :class=\"bannerInfoClass\"\n    data-qa=\"banner-info\"\n  >\n    <div class=\"dt-top-banner-info__left\">\n      <slot name=\"left\" />\n    </div>\n\n    <div\n      class=\"dt-top-banner-info__middle\"\n      data-qa=\"banner-info--middle\"\n    >\n      <slot />\n    </div>\n\n    <div class=\"dt-top-banner-info__right\">\n      <slot name=\"right\" />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { COLOR_CODES } from './top_banner_info_constants';\n\nexport default {\n  name: 'DtRecipeTopBannerInfo',\n\n  props: {\n    /**\n     * color of the banner background\n     */\n    colorCode: {\n      type: String,\n      default: 'green300',\n      validator: function (kind) {\n        return COLOR_CODES.includes(kind);\n      },\n    },\n  },\n\n  computed: {\n    bannerInfoClass () {\n      const bgColors = {\n        // these are too specific, so for now I'm at least updating the resultant semantic value\n        // TODO: breaking change: update to be more abstract\n        green300: 'd-bgc-success',\n        green100: 'd-bgc-success',\n        red200: 'd-bgc-critical',\n        red100: 'd-bgc-critical',\n        gold200: 'd-bgc-warning',\n        gold100: 'd-bgc-warning',\n        black100: 'd-bgc-info',\n        white: 'd-bgc-primary',\n      };\n      return [bgColors[this.colorCode]];\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-top-banner-info {\n  font-size: var(--dt-font-size-100);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  color: var(--dt-color-foreground-primary);\n\n   &__left {\n     margin: var(--dt-space-300) 0 var(--dt-space-300) var(--dt-space-400);\n     min-width: 20%;\n  }\n  &__middle {\n     display: flex;\n     align-items: center;\n     gap: var(--dt-size-300);\n     margin-top: var(--dt-space-300);\n    margin-bottom: var(--dt-space-300);\n  }\n  &__right {\n     display: flex;\n     align-items: baseline;\n     justify-content: flex-end;\n     gap: var(--dt-size-300);\n     margin: var(--dt-space-300) var(--dt-space-500) var(--dt-space-300) 0;\n     min-width: 20%;\n     text-align: right;\n  }\n}\n</style>\n"],"names":["COLOR_CODES","_sfc_main","kind"],"mappings":"iJAAaA,EAAc,CAAC,WAAY,WAAY,SAAU,SAAU,UACtE,UAAW,WAAY,OAAO,ECyBhCC,EAAA,CACA,KAAA,wBAEA,MAAA,CAIA,UAAA,CACA,KAAA,OACA,QAAA,WACA,UAAA,SAAAC,EAAA,CACA,OAAAF,EAAA,SAAAE,CAAA,CACA,CACA,CACA,EAEA,SAAA,CACA,iBAAA,CAaA,MAAA,CAZA,CAGA,SAAA,gBACA,SAAA,gBACA,OAAA,iBACA,OAAA,iBACA,QAAA,gBACA,QAAA,gBACA,SAAA,aACA,MAAA,eACA,EACA,KAAA,SAAA,CAAA,CACA,CACA,CACA"}

package/dist/lib/unread-pill.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("../chunks/_plugin-vue2_normalizer-ZK80B3OL.js"),a=require("./icon.cjs");require("@dialpad/dialtone-icons/vue2");require("../chunks/icon_constants-2S_OSQ1t.js");require("@dialpad/dialtone-icons/icons.json");const n=["up","down"],i=["mentions","messages"],s={name:"DtRecipeUnreadPill",components:{DtIcon:a.DtIcon},props:{kind:{type:String,required:!0,validator:t=>i.includes(t)},direction:{type:String,required:!0,validator:t=>n.includes(t)}},emits:["click"]};var d=function(){var e=this,r=e._self._c;return r("button",e._g({class:["dt-leftbar-unread-pill",`dt-leftbar-unread-pill--${e.kind}`],attrs:{type:"button","data-qa":"dt-leftbar-unread-pill"}},e.$listeners),[r("dt-icon",{attrs:{name:`arrow-${e.direction}`,size:"300"}}),r("span",{attrs:{"data-qa":"dt-leftbar-unread-pill__label"}},[e._t("default")],2)],1)},o=[],u=l.n(s,d,o,!1,null,null,null,null);const c=u.exports;exports.DtRecipeUnreadPill=c;exports.UNREAD_PILL_DIRECTIONS=n;exports.UNREAD_PILL_KINDS=i;
+//# sourceMappingURL=unread-pill.cjs.map

package/dist/lib/unread-pill.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"unread-pill.cjs","sources":["../../recipes/leftbar/unread_pill/unread_pill_constants.js","../../recipes/leftbar/unread_pill/unread_pill.vue"],"sourcesContent":["export const UNREAD_PILL_DIRECTIONS = ['up', 'down'];\nexport const UNREAD_PILL_KINDS = ['mentions', 'messages'];\n\nexport default {\n  UNREAD_PILL_DIRECTIONS,\n  UNREAD_PILL_KINDS,\n};\n","<template>\n  <button\n    :class=\"['dt-leftbar-unread-pill', `dt-leftbar-unread-pill--${kind}`]\"\n    type=\"button\"\n    data-qa=\"dt-leftbar-unread-pill\"\n    v-on=\"$listeners\"\n  >\n    <dt-icon\n      :name=\"`arrow-${direction}`\"\n      size=\"300\"\n    />\n    <span data-qa=\"dt-leftbar-unread-pill__label\">\n      <slot />\n    </span>\n  </button>\n</template>\n\n<script>\nimport { DtIcon } from '@/components/icon';\nimport { UNREAD_PILL_DIRECTIONS, UNREAD_PILL_KINDS } from './unread_pill_constants';\nexport default {\n  name: 'DtRecipeUnreadPill',\n\n  components: {\n    DtIcon,\n  },\n\n  props: {\n    /**\n     * The kind of unread pill which determines the styling\n     * @values 'mentions', 'messages'\n     **/\n    kind: {\n      type: String,\n      required: true,\n      validator: (kind) => UNREAD_PILL_KINDS.includes(kind),\n    },\n\n    /**\n     * The direction of the arrow icon\n     * @values 'up', 'down'\n     **/\n    direction: {\n      type: String,\n      required: true,\n      validator: (dir) => UNREAD_PILL_DIRECTIONS.includes(dir),\n    },\n  },\n\n  emits: [\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n};\n</script>\n\n<style lang=\"less\">\n.dt-leftbar-unread-pill {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--dt-space-200) var(--dt-space-500) var(--dt-space-200) var(--dt-space-400);\n  gap: var(--dt-space-300);\n  font-size: var(--dt-font-size-100);\n  box-shadow: var(--dt-shadow-medium);\n  border-radius: var(--dt-size-radius-pill);\n  border: none;\n  line-height: var(--dt-font-line-height-600);\n  cursor: pointer;\n\n  &--mentions {\n    font-weight: var(--dt-font-weight-bold);\n    background-color: var(--dt-theme-mention-color-background);\n    color: var(--dt-theme-mention-color-foreground);\n  }\n\n  &--messages {\n    background-color: var(--dt-color-surface-contrast);\n    color: var(--dt-color-foreground-secondary-inverted);\n  }\n}\n</style>\n"],"names":["UNREAD_PILL_DIRECTIONS","UNREAD_PILL_KINDS","_sfc_main","DtIcon","kind","dir"],"mappings":"+SAAY,MAACA,EAAyB,CAAC,KAAM,MAAM,EACtCC,EAAoB,CAAC,WAAY,UAAU,ECmBxDC,EAAA,CACA,KAAA,qBAEA,WAAA,CACA,OAAAC,EAAA,MACA,EAEA,MAAA,CAKA,KAAA,CACA,KAAA,OACA,SAAA,GACA,UAAAC,GAAAH,EAAA,SAAAG,CAAA,CACA,EAMA,UAAA,CACA,KAAA,OACA,SAAA,GACA,UAAAC,GAAAL,EAAA,SAAAK,CAAA,CACA,CACA,EAEA,MAAA,CAOA,OACA,CACA"}

package/dist/lib/unread-pill.js

@@ -3,7 +3,6 @@ import { DtIcon as a } from "./icon.js";
 import "@dialpad/dialtone-icons/vue2";
 import "../chunks/icon_constants-OpYAAKwF.js";
 import "@dialpad/dialtone-icons/icons.json";
-import "./skeleton.js";
 const i = ["up", "down"], l = ["mentions", "messages"], o = {
   name: "DtRecipeUnreadPill",
   components: {
@@ -42,7 +41,7 @@ const i = ["up", "down"], l = ["mentions", "messages"], o = {
 var s = function() {
   var t = this, r = t._self._c;
   return r("button", t._g({ class: ["dt-leftbar-unread-pill", `dt-leftbar-unread-pill--${t.kind}`], attrs: { type: "button", "data-qa": "dt-leftbar-unread-pill" } }, t.$listeners), [r("dt-icon", { attrs: { name: `arrow-${t.direction}`, size: "300" } }), r("span", { attrs: { "data-qa": "dt-leftbar-unread-pill__label" } }, [t._t("default")], 2)], 1);
-}, d = [], p = /* @__PURE__ */ n(
+}, d = [], c = /* @__PURE__ */ n(
   o,
   s,
   d,
@@ -52,9 +51,9 @@ var s = function() {
   null,
   null
 );
-const v = p.exports;
+const b = c.exports;
 export {
-  v as DtRecipeUnreadPill,
+  b as DtRecipeUnreadPill,
   i as UNREAD_PILL_DIRECTIONS,
   l as UNREAD_PILL_KINDS
 };

package/dist/lib/unread-pill.js.map

@@ -1 +1 @@
-{"version":3,"file":"unread-pill.js","sources":["../../recipes/leftbar/unread_pill/unread_pill_constants.js","../../recipes/leftbar/unread_pill/unread_pill.vue"],"sourcesContent":["export const UNREAD_PILL_DIRECTIONS = ['up', 'down'];\nexport const UNREAD_PILL_KINDS = ['mentions', 'messages'];\n\nexport default {\n  UNREAD_PILL_DIRECTIONS,\n  UNREAD_PILL_KINDS,\n};\n","<template>\n  <button\n    :class=\"['dt-leftbar-unread-pill', `dt-leftbar-unread-pill--${kind}`]\"\n    type=\"button\"\n    data-qa=\"dt-leftbar-unread-pill\"\n    v-on=\"$listeners\"\n  >\n    <dt-icon\n      :name=\"`arrow-${direction}`\"\n      size=\"300\"\n    />\n    <span data-qa=\"dt-leftbar-unread-pill__label\">\n      <slot />\n    </span>\n  </button>\n</template>\n\n<script>\nimport { DtIcon } from '@/components/icon';\nimport { UNREAD_PILL_DIRECTIONS, UNREAD_PILL_KINDS } from './unread_pill_constants';\nexport default {\n  name: 'DtRecipeUnreadPill',\n\n  components: {\n    DtIcon,\n  },\n\n  props: {\n    /**\n     * The kind of unread pill which determines the styling\n     * @values 'mentions', 'messages'\n     **/\n    kind: {\n      type: String,\n      required: true,\n      validator: (kind) => UNREAD_PILL_KINDS.includes(kind),\n    },\n\n    /**\n     * The direction of the arrow icon\n     * @values 'up', 'down'\n     **/\n    direction: {\n      type: String,\n      required: true,\n      validator: (dir) => UNREAD_PILL_DIRECTIONS.includes(dir),\n    },\n  },\n\n  emits: [\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n};\n</script>\n\n<style lang=\"less\">\n.dt-leftbar-unread-pill {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--dt-space-200) var(--dt-space-500) var(--dt-space-200) var(--dt-space-400);\n  gap: var(--dt-space-300);\n  font-size: var(--dt-font-size-100);\n  box-shadow: var(--dt-shadow-medium);\n  border-radius: var(--dt-size-radius-pill);\n  border: none;\n  line-height: var(--dt-font-line-height-600);\n  cursor: pointer;\n\n  &--mentions {\n    font-weight: var(--dt-font-weight-bold);\n    background-color: var(--dt-theme-mention-color-background);\n    color: var(--dt-theme-mention-color-foreground);\n  }\n\n  &--messages {\n    background-color: var(--dt-color-surface-contrast);\n    color: var(--dt-color-foreground-secondary-inverted);\n  }\n}\n</style>\n"],"names":["UNREAD_PILL_DIRECTIONS","UNREAD_PILL_KINDS","_sfc_main","DtIcon","kind","dir"],"mappings":";;;;;;AAAY,MAACA,IAAyB,CAAC,MAAM,MAAM,GACtCC,IAAoB,CAAC,YAAY,UAAU,GCmBxDC,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,QAAAC;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,WAAA,CAAAC,MAAAH,EAAA,SAAAG,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,WAAA,CAAAC,MAAAL,EAAA,SAAAK,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AACA;;;;;;;;;;;;;;;"}
+{"version":3,"file":"unread-pill.js","sources":["../../recipes/leftbar/unread_pill/unread_pill_constants.js","../../recipes/leftbar/unread_pill/unread_pill.vue"],"sourcesContent":["export const UNREAD_PILL_DIRECTIONS = ['up', 'down'];\nexport const UNREAD_PILL_KINDS = ['mentions', 'messages'];\n\nexport default {\n  UNREAD_PILL_DIRECTIONS,\n  UNREAD_PILL_KINDS,\n};\n","<template>\n  <button\n    :class=\"['dt-leftbar-unread-pill', `dt-leftbar-unread-pill--${kind}`]\"\n    type=\"button\"\n    data-qa=\"dt-leftbar-unread-pill\"\n    v-on=\"$listeners\"\n  >\n    <dt-icon\n      :name=\"`arrow-${direction}`\"\n      size=\"300\"\n    />\n    <span data-qa=\"dt-leftbar-unread-pill__label\">\n      <slot />\n    </span>\n  </button>\n</template>\n\n<script>\nimport { DtIcon } from '@/components/icon';\nimport { UNREAD_PILL_DIRECTIONS, UNREAD_PILL_KINDS } from './unread_pill_constants';\nexport default {\n  name: 'DtRecipeUnreadPill',\n\n  components: {\n    DtIcon,\n  },\n\n  props: {\n    /**\n     * The kind of unread pill which determines the styling\n     * @values 'mentions', 'messages'\n     **/\n    kind: {\n      type: String,\n      required: true,\n      validator: (kind) => UNREAD_PILL_KINDS.includes(kind),\n    },\n\n    /**\n     * The direction of the arrow icon\n     * @values 'up', 'down'\n     **/\n    direction: {\n      type: String,\n      required: true,\n      validator: (dir) => UNREAD_PILL_DIRECTIONS.includes(dir),\n    },\n  },\n\n  emits: [\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n};\n</script>\n\n<style lang=\"less\">\n.dt-leftbar-unread-pill {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--dt-space-200) var(--dt-space-500) var(--dt-space-200) var(--dt-space-400);\n  gap: var(--dt-space-300);\n  font-size: var(--dt-font-size-100);\n  box-shadow: var(--dt-shadow-medium);\n  border-radius: var(--dt-size-radius-pill);\n  border: none;\n  line-height: var(--dt-font-line-height-600);\n  cursor: pointer;\n\n  &--mentions {\n    font-weight: var(--dt-font-weight-bold);\n    background-color: var(--dt-theme-mention-color-background);\n    color: var(--dt-theme-mention-color-foreground);\n  }\n\n  &--messages {\n    background-color: var(--dt-color-surface-contrast);\n    color: var(--dt-color-foreground-secondary-inverted);\n  }\n}\n</style>\n"],"names":["UNREAD_PILL_DIRECTIONS","UNREAD_PILL_KINDS","_sfc_main","DtIcon","kind","dir"],"mappings":";;;;;AAAY,MAACA,IAAyB,CAAC,MAAM,MAAM,GACtCC,IAAoB,CAAC,YAAY,UAAU,GCmBxDC,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,QAAAC;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,WAAA,CAAAC,MAAAH,EAAA,SAAAG,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,WAAA,CAAAC,MAAAL,EAAA,SAAAK,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AACA;;;;;;;;;;;;;;;"}

package/dist/lib/utils.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("./constants.cjs"),F=require("vue");let U=0,a;const D="input:not([type=hidden]):not(:disabled)",v="select:not(:disabled),textarea:not(:disabled),button:not(:disabled)",$=`${D},${v}`,y=`a,frame,iframe,${$},*[tabindex]`,M=typeof setImmediate=="function"?setImmediate:setTimeout;function l(e=o.DEFAULT_PREFIX){return`${e}${U++}`}function d(e,t){if(t){const n=f(t);return e[Math.abs(n)%e.length]}else return e[s(e.length)]}function f(e){let t;for(let n=0;n<e.length;n++)t=Math.imul(31,t)+e.charCodeAt(n)|0;return t}function s(e){return Math.floor(Math.random()*e)}function E(e){return e?e.map(t=>typeof t=="string"?{message:t,type:o.DEFAULT_VALIDATION_MESSAGE_TYPE}:t):[]}function m(e){const t=u(e);return!e||!t?[]:e.filter(n=>!!n.message&&n.type===t)}function u(e){return e?r(e,o.VALIDATION_MESSAGE_TYPES.ERROR)?o.VALIDATION_MESSAGE_TYPES.ERROR:r(e,o.VALIDATION_MESSAGE_TYPES.WARNING)?o.VALIDATION_MESSAGE_TYPES.WARNING:r(e,o.VALIDATION_MESSAGE_TYPES.SUCCESS)?o.VALIDATION_MESSAGE_TYPES.SUCCESS:null:null}function r(e,t){return!e||!t?!1:e.some(n=>(n==null?void 0:n.type)===t)}function j(e){return e==null?void 0:e.querySelector(y)}const g={name:"html-fragment",functional:!0,props:["html"],render(e,t){return new F({name:"Inner",beforeCreate(){this.$createElement=e},template:`<div>${t.props.html}</div>`}).$mount()._vnode.children}},h=()=>new Promise(e=>{M(e)}),S=e=>e==null?void 0:e.toLowerCase().split("-").map(t=>t.charAt(0).toUpperCase()+t.slice(1)).join(""),z=e=>e.replace(/\.?([A-Z0-9]+)/g,(t,n)=>"-"+n.toLowerCase()).replace(/^-/,"");function b(e,t=300){clearTimeout(a),a=setTimeout(e,t)}function R(e){const t=e.getBoundingClientRect(),n={top:t.top<0,left:t.left<0,bottom:t.bottom>(window.innerHeight||document.documentElement.clientHeight),right:t.right>(window.innerWidth||document.documentElement.clientWidth)};return n.any=Object.values(n).some(i=>i),n.all=Object.values(n).every(i=>i),n}const V=/(?:(?:[^\s!@#$%^&*()_=+[\]{}\\|;:'",.<>/?]+)\.)/,k=new RegExp("(?:com|ru|org|net|de|jp|uk|br|it|pl|fr|in|au|ir|info|nl|cn|es|cz|kr|ca|eu|ua|co|gr|za|ro|biz|ch|se|tw|mx|vn|hu|be|tr|at|dk|tv|me|ar|sk|no|us|fi|id|cl|xyz|io|pt|by|il|ie|nz|kz|hk|lt|cc|my|sg|club|bg|edu|рф|pk|su|top|th|hr|rs|pe|pro|si|az|lv|pw|ae|ph|online|ng|ee|ws|ve|cat)"),W=new RegExp("(?:(?:[0-9]|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])\\.){3}(?:[0-9]|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])"),p=new RegExp("(?:"+[[V.source,k.source].join("+"),W.source].join("|")+")"),G=/(?:(?:[;/][^#?<>\s]*)?)/,A=/(?:(?:\?[^#<>\s]+)?(?:#[^<>\s]+)?)/,_=new RegExp("\\b"+[p.source,G.source,A.source,"(?!\\w)"].join("+")),T=/\b[a-z\d.-]+:\/\/[^<>\s]+/,C=new RegExp("(?:mailto:)?[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@"+[p.source,A.source].join("+")+"(?!\\w)");function c(e=7,t=15){return new RegExp(`(?:^|(?<=\\W))(?![\\s\\-])\\+?(?:[0-9()\\- \\t]{${e},${t}})(?=\\b)(?=\\W(?=\\W|$)|\\s|$)`)}const O=c(),x=new RegExp([_.source,T.source,C.source,O.source].join("|"),"gi");function I(e){var t;return!e||!["string","number"].includes(typeof e)?!1:(e=e.toString(),((t=O.exec(e))==null?void 0:t[0])===e)}function L(e){var t,n;return!e||typeof e!="string"?!1:((t=_.exec(e))==null?void 0:t[0])===e||((n=T.exec(e))==null?void 0:n[0])===e}function N(e){var t;return!e||typeof e!="string"?!1:((t=C.exec(e))==null?void 0:t[0])===e}function P(e){return e.filter(t=>!!t).join(" ")}function w(e,t="en-US"){return e.replace(new RegExp("^\\p{CWU}","u"),n=>n.toLocaleUpperCase(t))}const B={getUniqueString:l,getRandomElement:d,getRandomInt:s,formatMessages:E,filterFormattedMessages:m,hasFormattedMessageOfType:r,getValidationState:u,htmlFragment:g,flushPromises:h,kebabCaseToPascalCase:S,debounce:b,isOutOfViewPort:R,getPhoneNumberRegex:c,linkRegex:x,isEmailAddress:N,isPhoneNumber:I,isURL:L,safeConcatStrings:P,capitalizeFirstLetter:w};exports.capitalizeFirstLetter=w;exports.debounce=b;exports.default=B;exports.filterFormattedMessages=m;exports.findFirstFocusableNode=j;exports.flushPromises=h;exports.formatMessages=E;exports.getPhoneNumberRegex=c;exports.getRandomElement=d;exports.getRandomInt=s;exports.getUniqueString=l;exports.getValidationState=u;exports.hasFormattedMessageOfType=r;exports.htmlFragment=g;exports.isEmailAddress=N;exports.isOutOfViewPort=R;exports.isPhoneNumber=I;exports.isURL=L;exports.javaHashCode=f;exports.kebabCaseToPascalCase=S;exports.linkRegex=x;exports.pascalCaseToKebabCase=z;exports.safeConcatStrings=P;
+//# sourceMappingURL=utils.cjs.map

package/dist/lib/utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.cjs","sources":["../../common/utils/index.js"],"sourcesContent":["import {\n  DEFAULT_PREFIX,\n  DEFAULT_VALIDATION_MESSAGE_TYPE,\n  VALIDATION_MESSAGE_TYPES,\n} from '../constants';\nimport Vue from 'vue';\n\nlet UNIQUE_ID_COUNTER = 0;\nlet TIMER;\n\n// selector to find focusable not hidden inputs\nconst FOCUSABLE_SELECTOR_NOT_HIDDEN = 'input:not([type=hidden]):not(:disabled)';\n// selector to find focusable not disables elements\nconst FOCUSABLE_SELECTOR_NOT_DISABLED = 'select:not(:disabled),textarea:not(:disabled),button:not(:disabled)';\n// // selector to find focusable not hidden and disabled elements\nconst FOCUSABLE_SELECTOR_NOT_HIDDEN_DISABLED = `${FOCUSABLE_SELECTOR_NOT_HIDDEN},${FOCUSABLE_SELECTOR_NOT_DISABLED}`;\n// selector to find focusable elements\nconst FOCUSABLE_SELECTOR = `a,frame,iframe,${FOCUSABLE_SELECTOR_NOT_HIDDEN_DISABLED},*[tabindex]`;\n\nconst scheduler = typeof setImmediate === 'function' ? setImmediate : setTimeout;\n\nexport function getUniqueString (prefix = DEFAULT_PREFIX) {\n  return `${prefix}${UNIQUE_ID_COUNTER++}`;\n}\n\n/**\n * Returns a random element from array\n * @param array - the array to return a random element from\n * @param {string} seed - use a string to seed the randomization, so it returns the same element each time\n * based on that string.\n * @returns {*} - the random element\n */\nexport function getRandomElement (array, seed) {\n  if (seed) {\n    const hash = javaHashCode(seed);\n    return array[Math.abs(hash) % array.length];\n  } else {\n    return array[getRandomInt(array.length)];\n  }\n}\n\n/**\n * Returns a hash code for a string.\n * (Compatible to Java's String.hashCode())\n * We use this algo to be in sync with android.\n *\n * The hash code for a string object is computed as\n *     s[0]*31^(n-1) + s[1]*31^(n-2) + ... + s[n-1]\n * using number arithmetic, where s[i] is the i th character\n * of the given string, n is the length of the string,\n * and ^ indicates exponentiation.\n * (The hash value of the empty string is zero.)\n *\n * @param {string} str a string\n * @return {number} a hash code value for the given string.\n */\nexport function javaHashCode (str) {\n  let h;\n  for (let i = 0; i < str.length; i++) {\n    h = Math.imul(31, h) + str.charCodeAt(i) | 0;\n  }\n\n  return h;\n}\n\n/**\n * Generate a random integer\n * @param {number} max - max range of integer to generate\n * @returns {number} randomly generated integer between 0 and max\n */\nexport function getRandomInt (max) {\n  return Math.floor(Math.random() * max);\n}\n\nexport function formatMessages (messages) {\n  if (!messages) {\n    return [];\n  }\n\n  return messages.map(message => {\n    if (typeof message === 'string') {\n      return {\n        message,\n        type: DEFAULT_VALIDATION_MESSAGE_TYPE,\n      };\n    }\n\n    return message;\n  });\n}\n\nexport function filterFormattedMessages (formattedMessages) {\n  const validationState = getValidationState(formattedMessages);\n\n  if (!formattedMessages || !validationState) {\n    return [];\n  }\n\n  return formattedMessages.filter(message => !!message.message && message.type === validationState);\n}\n\n/*\n * The priority order of message types is as flows: 'error' > 'warning' > 'success'.\n * If any message of type 'error' is present in messages, the input state is considered\n * to be 'error', then 'warning' and lastly 'success'.\n */\nexport function getValidationState (formattedMessages) {\n  if (!formattedMessages) {\n    return null;\n  }\n\n  if (hasFormattedMessageOfType(formattedMessages, VALIDATION_MESSAGE_TYPES.ERROR)) {\n    return VALIDATION_MESSAGE_TYPES.ERROR;\n  }\n  if (hasFormattedMessageOfType(formattedMessages, VALIDATION_MESSAGE_TYPES.WARNING)) {\n    return VALIDATION_MESSAGE_TYPES.WARNING;\n  }\n  if (hasFormattedMessageOfType(formattedMessages, VALIDATION_MESSAGE_TYPES.SUCCESS)) {\n    return VALIDATION_MESSAGE_TYPES.SUCCESS;\n  }\n\n  return null;\n}\n\nexport function hasFormattedMessageOfType (formattedMessages, messageType) {\n  if (!formattedMessages || !messageType) {\n    return false;\n  }\n\n  return formattedMessages.some(message => message?.type === messageType);\n}\n\nexport function findFirstFocusableNode (element) {\n  return element?.querySelector(FOCUSABLE_SELECTOR);\n}\n\n/* html-fragment component:\n * To render html without wrapping in another element as when using v-html.\n * props: html\n */\nexport const htmlFragment = {\n  name: 'html-fragment',\n  functional: true,\n  props: ['html'],\n  render (h, ctx) {\n    return new Vue({\n      // eslint-disable-next-line vue/multi-word-component-names\n      name: 'Inner',\n      beforeCreate () { this.$createElement = h; },\n      template: `<div>${ctx.props.html}</div>`,\n    }).$mount()._vnode.children;\n  },\n};\n\nexport const flushPromises = () => {\n  return new Promise((resolve) => {\n    scheduler(resolve);\n  });\n};\n\n/**\n * Transform a string from kebab-case to PascalCase\n * @param string\n * @returns {string}\n */\nexport const kebabCaseToPascalCase = (string) => {\n  return string?.toLowerCase()\n    .split('-')\n    .map(word => word.charAt(0).toUpperCase() + word.slice(1))\n    .join('');\n};\n\n/**\n * Transform a string from PascalCase to kebab-case\n * @param string\n * @returns {string}\n */\nexport const pascalCaseToKebabCase = (string) => {\n  return string\n    .replace(/\\.?([A-Z0-9]+)/g, (x, y) => '-' + y.toLowerCase())\n    .replace(/^-/, '');\n};\n\n/*\n* Set's a global timer to debounce the execution of a function.\n* @param { object } func - the function that is going to be called after timeout\n* @param { number } [timeout=300] timeout\n* */\nexport function debounce (func, timeout = 300) {\n  clearTimeout(TIMER);\n  TIMER = setTimeout(func, timeout);\n}\n\n/**\n * Checks if the element is out of the viewport\n * https://gomakethings.com/how-to-check-if-any-part-of-an-element-is-out-of-the-viewport-with-vanilla-js/\n * @param  {HTMLElement} element The element to check\n * @return {Object} A set of booleans for each side of the element\n */\n\nexport function isOutOfViewPort (element) {\n  const bounding = element.getBoundingClientRect();\n\n  const isOut = {\n    top: bounding.top < 0,\n    left: bounding.left < 0,\n    bottom: bounding.bottom > (window.innerHeight || document.documentElement.clientHeight),\n    right: bounding.right > (window.innerWidth || document.documentElement.clientWidth),\n  };\n  isOut.any = Object.values(isOut).some(val => val);\n  isOut.all = Object.values(isOut).every(val => val);\n  return isOut;\n}\n\n// match valid characters for a domain name followed by a dot, e.g. \"dialpad.\"\nconst domainNameRegex = /(?:(?:[^\\s!@#$%^&*()_=+[\\]{}\\\\|;:'\",.<>/?]+)\\.)/;\n\n// match valid TLDs for a hostname (outdated list from ~2017)\nconst tldRegerx = new RegExp(\n  '(?:' +\n  'com|ru|org|net|de|jp|uk|br|it|pl|fr|in|au|ir|info|nl|cn|es|cz|kr|ca|eu|ua|co|gr|' +\n  'za|ro|biz|ch|se|tw|mx|vn|hu|be|tr|at|dk|tv|me|ar|sk|no|us|fi|id|cl|xyz|io|pt|by|' +\n  'il|ie|nz|kz|hk|lt|cc|my|sg|club|bg|edu|рф|pk|su|top|th|hr|rs|pe|pro|si|az|lv|pw|' +\n  'ae|ph|online|ng|ee|ws|ve|cat' +\n  ')',\n);\n\n// match valid IPv4 addresses, e.g. \"192.158.1.38\"\nconst ipv4Regex = new RegExp(\n  '(?:(?:[0-9]|[1-9]\\\\d|1\\\\d{2}|2[0-4]\\\\d|25[0-5])\\\\.){3}' +\n  '(?:[0-9]|[1-9]\\\\d|1\\\\d{2}|2[0-4]\\\\d|25[0-5])',\n);\n\n// match hostnames OR IPv4 addresses, e.g. \"dialpad.com\" or \"192.158.1.38\"\nconst hostnameOrIpRegex = new RegExp(\n  '(?:' +\n  [\n    [\n      domainNameRegex.source,\n      tldRegerx.source,\n    ].join('+'),\n    ipv4Regex.source,\n  ].join('|') +\n  ')',\n);\n\n// match URL paths, e.g. \"/news\"\nconst urlPathRegex = /(?:(?:[;/][^#?<>\\s]*)?)/;\n\n// match URL queries and fragments, e.g. \"?cache=1&new=true\" or \"#heading1\"\nconst urlQueryOrFragmentRegex = /(?:(?:\\?[^#<>\\s]+)?(?:#[^<>\\s]+)?)/;\n\n// match complete hostnames or IPv4 addresses without a protocol and with optional\n// URL paths, queries and fragments e.g. \"dialpad.com/news?cache=1#heading1\"\nconst urlWithoutProtocolRegex = new RegExp(\n  '\\\\b' +\n  [\n    hostnameOrIpRegex.source,\n    urlPathRegex.source,\n    urlQueryOrFragmentRegex.source,\n    '(?!\\\\w)',\n  ].join('+'),\n);\n\n// match complete hostnames with protocols and optional URL paths, queries and fragments,\n// e.g. \"ws://localhost:9010\" or \"https://dialpad.com/news?cache=1#heading1\"\nconst urlWithProtocolRegex = /\\b[a-z\\d.-]+:\\/\\/[^<>\\s]+/;\n\n// match email addresses with an optional \"mailto:\" prefix and URL queries, e.g.\n// \"hey@dialpad.com\" or \"mailto:hey@dialpad.com?subject=Hi&body=Hey%20there\"\nconst emailAddressRegex = new RegExp(\n  '(?:mailto:)?' +\n  '[a-z0-9!#$%&\\'*+/=?^_`{|}~-]+(?:\\\\.[a-z0-9!#$%&\\'*+/=?^_`{|}~-]+)*@' +\n  [\n    hostnameOrIpRegex.source,\n    urlQueryOrFragmentRegex.source,\n  ].join('+') +\n  '(?!\\\\w)',\n);\n\n/**\n * Match phone numbers, e.g. \"765-8813\", \"(778) 765-8813\" or \"+17787658813\".\n * @param {number} minLength\n * @param {number} maxLength\n * @returns {RegExp}\n */\nexport function getPhoneNumberRegex (minLength = 7, maxLength = 15) {\n  // Some older browser versions don't support lookbehind, so provide a RegExp\n  // version without it. It fails just one test case, so IMO it's still good\n  // enough to use. https://caniuse.com/js-regexp-lookbehind\n  let canUseLookBehind = true;\n  try {\n    // eslint-disable-next-line prefer-regex-literals\n    RegExp('(?<=\\\\W)');\n  } catch (e) {\n    canUseLookBehind = false;\n  }\n  return new RegExp(\n    `${canUseLookBehind ? '(?:^|(?<=\\\\W))' : ''}` +\n    '(?![\\\\s\\\\-])\\\\+?(?:[0-9()\\\\- \\\\t]' +\n    `{${minLength},${maxLength}}` +\n    ')(?=\\\\b)(?=\\\\W(?=\\\\W|$)|\\\\s|$)',\n  );\n}\n\nconst phoneNumberRegex = getPhoneNumberRegex();\n\n// match all link types\nexport const linkRegex = new RegExp(\n  [\n    urlWithoutProtocolRegex.source,\n    urlWithProtocolRegex.source,\n    emailAddressRegex.source,\n    phoneNumberRegex.source,\n  ].join('|'),\n  'gi',\n);\n\n/**\n * Check if a string is a phone number. Validates only exact matches.\n * @param {string|number} input\n * @returns {boolean}\n */\nexport function isPhoneNumber (input) {\n  if (!input || (!['string', 'number'].includes(typeof input))) return false;\n  input = input.toString();\n  return phoneNumberRegex.exec(input)?.[0] === input;\n}\n\n/**\n * Check if a string is an URL. Validates only exact matches.\n * @param {string} input\n * @returns {boolean}\n */\nexport function isURL (input) {\n  if (!input || typeof input !== 'string') return false;\n  return urlWithoutProtocolRegex.exec(input)?.[0] === input ||\n    urlWithProtocolRegex.exec(input)?.[0] === input;\n}\n\n/**\n * Check if a string is an email address. Validates only exact matches.\n * @param {string} input\n * @returns {boolean}\n */\nexport function isEmailAddress (input) {\n  if (!input || typeof input !== 'string') return false;\n  return emailAddressRegex.exec(input)?.[0] === input;\n}\n\n/**\n * Concatenate a string removing null or undefined elements\n * avoiding parsing them as string with template strings\n * @param {Array} elements\n * @returns {String}\n */\nexport function safeConcatStrings (elements) {\n  return elements.filter(str => !!str).join(' ');\n}\n\n/**\n * Locale safe function to capitalize the first letter of a string.\n * @param {string} str the string to capitalize the first letter of\n * @param {string} locale a string representing the locale to be used. Defaults to 'en-US'\n * @returns The passed in string with the first letter capitalized\n */\nexport function capitalizeFirstLetter (str, locale = 'en-US') {\n  return str.replace(/^\\p{CWU}/u, char => char.toLocaleUpperCase(locale));\n}\n\nexport default {\n  getUniqueString,\n  getRandomElement,\n  getRandomInt,\n  formatMessages,\n  filterFormattedMessages,\n  hasFormattedMessageOfType,\n  getValidationState,\n  htmlFragment,\n  flushPromises,\n  kebabCaseToPascalCase,\n  debounce,\n  isOutOfViewPort,\n  getPhoneNumberRegex,\n  linkRegex,\n  isEmailAddress,\n  isPhoneNumber,\n  isURL,\n  safeConcatStrings,\n  capitalizeFirstLetter,\n};\n"],"names":["UNIQUE_ID_COUNTER","TIMER","FOCUSABLE_SELECTOR_NOT_HIDDEN","FOCUSABLE_SELECTOR_NOT_DISABLED","FOCUSABLE_SELECTOR_NOT_HIDDEN_DISABLED","FOCUSABLE_SELECTOR","scheduler","getUniqueString","prefix","DEFAULT_PREFIX","getRandomElement","array","seed","hash","javaHashCode","getRandomInt","str","h","i","max","formatMessages","messages","message","DEFAULT_VALIDATION_MESSAGE_TYPE","filterFormattedMessages","formattedMessages","validationState","getValidationState","hasFormattedMessageOfType","VALIDATION_MESSAGE_TYPES","messageType","findFirstFocusableNode","element","htmlFragment","ctx","Vue","flushPromises","resolve","kebabCaseToPascalCase","string","word","pascalCaseToKebabCase","x","y","debounce","func","timeout","isOutOfViewPort","bounding","isOut","val","domainNameRegex","tldRegerx","ipv4Regex","hostnameOrIpRegex","urlPathRegex","urlQueryOrFragmentRegex","urlWithoutProtocolRegex","urlWithProtocolRegex","emailAddressRegex","getPhoneNumberRegex","minLength","maxLength","phoneNumberRegex","linkRegex","isPhoneNumber","input","_a","isURL","_b","isEmailAddress","safeConcatStrings","elements","capitalizeFirstLetter","locale","char","utils"],"mappings":"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"}

package/dist/lib/validation-messages.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("./validators.cjs"),t=require("./utils.cjs"),o=require("../chunks/_plugin-vue2_normalizer-ZK80B3OL.js");require("./constants.cjs");require("vue");const d={name:"DtValidationMessages",props:{id:{type:String,default(){return t.getUniqueString()}},validationMessages:{type:Array,default:()=>[],validator:s=>l.validationMessageValidator(s)},showMessages:{type:Boolean,default:!0}},computed:{isFilteredValidationMessagesEmpty(){return this.filteredValidationMessages.length===0},filteredValidationMessages(){return t.filterFormattedMessages(this.validationMessages)},validationState(){return t.getValidationState(this.validationMessages)}},methods:{getMessageKey(s,e){return`validation-message-${s}-${e}-${this.id}`},messageTypeClass(s){return{error:"base-input__message--error d-validation-message--error",warning:"base-input__message--warning d-validation-message--warning",success:"base-input__message--success d-validation-message--success"}[s]}}};var g=function(){var e=this,a=e._self._c;return e.showMessages&&!e.isFilteredValidationMessagesEmpty?a("div",{staticClass:"base-input__messages d-validation-message__container",attrs:{"data-qa":"validation-messages-container"}},e._l(e.filteredValidationMessages,function({message:n,type:i},r){return a("div",{key:e.getMessageKey(i,r),class:["base-input__message","d-validation-message",e.messageTypeClass(i)],attrs:{role:"status","aria-live":"polite","data-qa":"validation-message"}},[a("p",{domProps:{innerHTML:e._s(n)}})])}),0):e._e()},u=[],_=o.n(d,g,u,!1,null,null,null,null);const m=_.exports;exports.DtValidationMessages=m;
+//# sourceMappingURL=validation-messages.cjs.map

package/dist/lib/validation-messages.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation-messages.cjs","sources":["../../components/validation_messages/validation_messages.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"showMessages && !isFilteredValidationMessagesEmpty\"\n    class=\"base-input__messages d-validation-message__container\"\n    data-qa=\"validation-messages-container\"\n  >\n    <div\n      v-for=\"({ message, type }, index) in filteredValidationMessages\"\n      :key=\"getMessageKey(type, index)\"\n      role=\"status\"\n      aria-live=\"polite\"\n      data-qa=\"validation-message\"\n      :class=\"[\n        'base-input__message',\n        'd-validation-message',\n        messageTypeClass(type),\n      ]\"\n    >\n      <p v-html=\"message\" />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { validationMessageValidator } from '@/common/validators';\nimport {\n  getUniqueString,\n  filterFormattedMessages,\n  getValidationState,\n} from '@/common/utils';\n\n/**\n * Validation messages are used to convey information to the user about the current state of the input element.\n * These messages can have an error, warning or success type.\n * @see https://dialtone.dialpad.com/components/validation_messages.html\n */\nexport default {\n  name: 'DtValidationMessages',\n\n  props: {\n    /**\n     * The id of the validation message\n     */\n    id: {\n      type: String,\n      default () {\n        return getUniqueString();\n      },\n    },\n\n    /**\n     * Array of validation messages. Each message has the following structure:\n     * `{ message: \"Some informative message\", type: \"error|warning|success\"}`\n     */\n    validationMessages: {\n      type: Array,\n      default: () => [],\n      validator: messages => validationMessageValidator(messages),\n    },\n\n    /**\n     * Show Validation messages\n     * @values true, false\n     */\n    showMessages: {\n      type: Boolean,\n      default: true,\n    },\n  },\n\n  computed: {\n    isFilteredValidationMessagesEmpty () {\n      return this.filteredValidationMessages.length === 0;\n    },\n\n    filteredValidationMessages () {\n      return filterFormattedMessages(this.validationMessages);\n    },\n\n    validationState () {\n      return getValidationState(this.validationMessages);\n    },\n  },\n\n  methods: {\n    getMessageKey (type, index) {\n      return `validation-message-${type}-${index}-${this.id}`;\n    },\n\n    messageTypeClass (type) {\n      const messageTypesClasses = {\n        error: 'base-input__message--error d-validation-message--error',\n        warning: 'base-input__message--warning d-validation-message--warning',\n        success: 'base-input__message--success d-validation-message--success',\n      };\n\n      return messageTypesClasses[type];\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","getUniqueString","messages","validationMessageValidator","filterFormattedMessages","getValidationState","type","index"],"mappings":"kPAoCA,MAAAA,EAAA,CACA,KAAA,uBAEA,MAAA,CAIA,GAAA,CACA,KAAA,OACA,SAAA,CACA,OAAAC,EAAA,gBAAA,CACA,CACA,EAMA,mBAAA,CACA,KAAA,MACA,QAAA,IAAA,CAAA,EACA,UAAAC,GAAAC,EAAA,2BAAAD,CAAA,CACA,EAMA,aAAA,CACA,KAAA,QACA,QAAA,EACA,CACA,EAEA,SAAA,CACA,mCAAA,CACA,OAAA,KAAA,2BAAA,SAAA,CACA,EAEA,4BAAA,CACA,OAAAE,EAAA,wBAAA,KAAA,kBAAA,CACA,EAEA,iBAAA,CACA,OAAAC,EAAA,mBAAA,KAAA,kBAAA,CACA,CACA,EAEA,QAAA,CACA,cAAAC,EAAAC,EAAA,CACA,MAAA,sBAAAD,CAAA,IAAAC,CAAA,IAAA,KAAA,EAAA,EACA,EAEA,iBAAAD,EAAA,CAOA,MANA,CACA,MAAA,yDACA,QAAA,6DACA,QAAA,4DACA,EAEAA,CAAA,CACA,CACA,CACA"}

package/dist/lib/validators.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("./constants.cjs");function r(e){return e?e.every(t=>typeof t=="string"?!0:typeof t=="object"?Object.values(i.VALIDATION_MESSAGE_TYPES).includes(t==null?void 0:t.type):!1):!0}const n={validationMessageValidator:r};exports.default=n;exports.validationMessageValidator=r;
+//# sourceMappingURL=validators.cjs.map

package/dist/lib/validators.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"validators.cjs","sources":["../../common/validators/index.js"],"sourcesContent":["import {\n  VALIDATION_MESSAGE_TYPES,\n} from '../constants';\n\nexport function validationMessageValidator (rawMessages) {\n  if (!rawMessages) {\n    return true;\n  }\n\n  return rawMessages.every(message => {\n    if (typeof message === 'string') {\n      return true;\n    }\n\n    if (typeof message === 'object') {\n      return Object.values(VALIDATION_MESSAGE_TYPES).includes(message?.type);\n    }\n\n    return false;\n  });\n}\n\nexport default {\n  validationMessageValidator,\n};\n"],"names":["validationMessageValidator","rawMessages","message","VALIDATION_MESSAGE_TYPES","index"],"mappings":"+IAIO,SAASA,EAA4BC,EAAa,CACvD,OAAKA,EAIEA,EAAY,MAAMC,GACnB,OAAOA,GAAY,SACd,GAGL,OAAOA,GAAY,SACd,OAAO,OAAOC,EAAwB,wBAAA,EAAE,SAASD,GAAA,YAAAA,EAAS,IAAI,EAGhE,EACR,EAbQ,EAcX,CAEA,MAAeE,EAAA,CACb,2BAAAJ,CACF"}

package/dist/style.css

@@ -1 +1 @@
-.skeleton-placeholder{display:flex;stroke:none;fill:var(--placeholder-from-color, var(--dt-color-black-300));background:var(--placeholder-from-color, var(--dt-color-black-300))}.skeleton-placeholder--animate{animation-name:placeholder-throb;animation-iteration-count:infinite}@keyframes placeholder-throb{10%{fill:var(--placeholder-from-color, var(--dt-color-black-300));background:var(--placeholder-from-color, var(--dt-color-black-300))}50%{fill:var(--placeholder-to-color, var(--dt-color-black-100));background:var(--placeholder-to-color, var(--dt-color-black-100))}90%{fill:var(--placeholder-from-color, var(--dt-color-black-300));background:var(--placeholder-from-color, var(--dt-color-black-300))}}.d-context-menu-list{width:var(--dt-size-850)}.d-dropdown-list{position:relative;margin:var(--dt-space-300);padding-left:var(--dt-space-0);padding-right:var(--dt-space-0)}.d-dropdown-list>.dt-list-item{margin-top:var(--dt-space-200)}.tippy-box[data-popper-reference-hidden] .d-tooltip{visibility:hidden;pointer-events:none}.dt-list-item{list-style:none;background-color:var(--dt-action-color-background-muted-default)}.dt-list-item:not(.dt-list-item--static){cursor:pointer;border-radius:var(--dt-size-radius-300)}.dt-list-item--focusable:focus,.dt-list-item--focusable:focus-within,.dt-list-item--highlighted{background-color:var(--dt-action-color-background-muted-hover)}.dt-list-item--highlighted:active{background-color:var(--dt-action-color-background-muted-active)}.dt-list-item--selected-icon{margin-left:var(--dt-space-400)}.dt-list-item :focus-visible{outline:none;box-shadow:var(--dt-shadow-focus)}.d-avatar--image-loaded{background-color:transparent;background-image:unset}.d-avatar__count,.d-avatar__presence{z-index:var(--zi-base)}.d-avatar__overlay{background-color:var(--dt-color-surface-contrast-opaque);opacity:var(--dt-opacity-900);position:absolute;width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:var(--dt-size-radius-circle);z-index:var(--zi-base)}.d-avatar__overlay-icon{color:var(--dt-color-foreground-primary-inverted);width:100%}.d-avatar__overlay-text{color:var(--dt-color-foreground-primary-inverted);font-weight:var(--dt-font-weight-bold);font-size:var(--dt-font-size-200);width:100%;text-align:center}.d-avatar--clickable{--avatar-color-border: transparent;cursor:pointer;padding:0;background-color:transparent;border-radius:var(--dt-size-radius-circle);border:var(--dt-size-border-100) solid var(--avatar-color-border)}.d-avatar--clickable:focus-visible{outline:none;box-shadow:var(--dt-shadow-focus)}.d-avatar--clickable:hover{--avatar-color-border: var(--dt-color-border-default)}.d-avatar--clickable:active{--avatar-color-border: var(--dt-color-border-moderate);transform:scale(.98)}.dt-suggestion-list{position:relative;padding:var(--dt-size-300);max-height:var(--dt-size-875)!important;min-width:var(--dt-size-925);max-width:var(--dt-size-975)}.dt-suggestion-list--item{border:var(--dt-size-100) solid transparent}.ProseMirror p.is-editor-empty:first-child:before{content:attr(data-placeholder);float:left;color:var(--dt-color-foreground-placeholder);pointer-events:none;height:0}.ProseMirror ul>li{list-style-type:disc}.ProseMirror ol>li{list-style-type:decimal}.ProseMirror blockquote{padding-left:var(--dt-space-400);border-left:var(--dt-size-border-300) solid var(--dt-color-foreground-muted-inverted);margin-left:0}.dt-rich-text-editor--code-block{background:var(--dt-color-surface-secondary);padding:var(--dt-space-400)}.dt-rich-text-editor{overflow:hidden}.dt-list-item[role=menuitem]{border-radius:var(--dt-size-300)}.dt-list-separator{border-top:var(--dt-size-100) solid var(--dt-color-border-default);list-style:none;margin:var(--dt-space-300) var(--dt-space-300-negative)}.dt-description-list{display:flex;flex-wrap:wrap;align-items:flex-start;flex-direction:row;line-height:var(--dt-font-line-height-300);font-size:var(--dt-font-size-100);--description-list-gap: var(--dt-space-400);gap:var(--description-list-gap)}.dt-description-list--gap-0{--description-list-gap: var(--dt-space-0)}.dt-description-list--gap-100{--description-list-gap: var(--dt-space-100)}.dt-description-list--gap-200{--description-list-gap: var(--dt-space-200)}.dt-description-list--gap-300{--description-list-gap: var(--dt-space-300)}.dt-description-list--gap-400{--description-list-gap: var(--dt-space-400)}.dt-description-list--gap-500{--description-list-gap: var(--dt-space-500)}.dt-description-list--gap-600{--description-list-gap: var(--dt-space-600)}.dt-description-list--column{flex-direction:column}.dt-description-list__term{color:var(--dt-color-foreground-tertiary);flex:0 1 40%}.dt-description-list__description{color:var(--dt-color-foreground-primary);flex:1 1 50%;margin-left:0}.dt-empty-list-item{display:flex;align-items:center;justify-content:center;font-size:var(--dt-font-size-200);line-height:var(--lh4);padding:var(--dt-space-300) var(--dt-space-450)}.enter-active,.leave-active{overflow:hidden;transition:height var(--td300) var(--ttf-out-quint)}.dt-top-banner-info{font-size:var(--dt-font-size-100);display:flex;justify-content:space-between;align-items:center;color:var(--dt-color-foreground-primary)}.dt-top-banner-info__left{margin:var(--dt-space-300) 0 var(--dt-space-300) var(--dt-space-400);min-width:20%}.dt-top-banner-info__middle{display:flex;align-items:center;gap:var(--dt-size-300);margin-top:var(--dt-space-300);margin-bottom:var(--dt-space-300)}.dt-top-banner-info__right{display:flex;align-items:baseline;justify-content:flex-end;gap:var(--dt-size-300);margin:var(--dt-space-300) var(--dt-space-500) var(--dt-space-300) 0;min-width:20%;text-align:right}.dt-leftbar-unread-pill{display:flex;align-items:center;justify-content:center;padding:var(--dt-space-200) var(--dt-space-500) var(--dt-space-200) var(--dt-space-400);gap:var(--dt-space-300);font-size:var(--dt-font-size-100);box-shadow:var(--dt-shadow-medium);border-radius:var(--dt-size-radius-pill);border:none;line-height:var(--dt-font-line-height-600);cursor:pointer}.dt-leftbar-unread-pill--mentions{font-weight:var(--dt-font-weight-bold);background-color:var(--dt-theme-mention-color-background);color:var(--dt-theme-mention-color-foreground)}.dt-leftbar-unread-pill--messages{background-color:var(--dt-color-surface-contrast);color:var(--dt-color-foreground-secondary-inverted)}.dt-leftbar-row[data-v-ca5d7362]{--leftbar-row-color-foreground: var(--dt-theme-sidebar-color-foreground);--leftbar-row-color-background: var(--dt-theme-sidebar-row-color-background);--leftbar-row-radius: var(--dt-size-radius-pill);--leftbar-row-opacity: 100%;--leftbar-row-alpha-color-foreground: var(--dt-theme-sidebar-icon-color-foreground);--leftbar-row-alpha-width: calc(var(--dt-size-300) * 10);--leftbar-row-alpha-height: calc(var(--dt-size-300) * 9);--leftbar-row-omega-height: var(--leftbar-row-alpha-height);--leftbar-row-unread-badge-display: inline-flex;--leftbar-row-description-color-foreground: var(--dt-theme-sidebar-color-foreground);--leftbar-row-description-font-weight: var(--dt-font-weight-normal);--leftbar-row-description-font-size: var(--dt-font-size-200);--leftbar-row-description-line-height: var(--dt-font-line-height-200);--leftbar-row-status-color-foreground: var(--dt-theme-sidebar-status-color-foreground);--leftbar-row-status-font-size: var(--dt-font-size-100);--leftbar-row-status-line-height: var(--dt-font-line-height-100);--leftbar-row-action-position-right: var(--dt-size-400);--leftbar-row-action-position-bottom: 50%;--leftbar-row-action-width: var(--dt-size-550);--leftbar-row-action-height: var(--leftbar-row-action-width);position:relative;opacity:var(--leftbar-row-opacity);display:flex;background-color:var(--dt-theme-sidebar-row-color-background);border-radius:var(--leftbar-row-radius);transition-duration:var(--td200);transition-property:background-color,border,box-shadow;transition-timing-function:var(--ttf-out-quint);cursor:pointer}.dt-leftbar-row[data-v-ca5d7362]:not(.dt-leftbar-row--no-action):hover,.dt-leftbar-row[data-v-ca5d7362]:not(.dt-leftbar-row--no-action):focus-within{--leftbar-row-unread-badge-display: none}.dt-leftbar-row[data-v-ca5d7362]:not(.dt-leftbar-row--no-action):hover .dt-leftbar-row__action,.dt-leftbar-row[data-v-ca5d7362]:not(.dt-leftbar-row--no-action):focus-within .dt-leftbar-row__action{display:inline-flex}.dt-leftbar-row[data-v-ca5d7362]:not(.dt-leftbar-row--no-action):hover .dt-leftbar-row__action-button,.dt-leftbar-row[data-v-ca5d7362]:not(.dt-leftbar-row--no-action):focus-within .dt-leftbar-row__action-button{opacity:1}.dt-leftbar-row[data-v-ca5d7362]:hover,.dt-leftbar-row[data-v-ca5d7362]:focus-within{--leftbar-row-color-background: var(--dt-theme-sidebar-row-color-background-hover)}.dt-leftbar-row[data-v-ca5d7362]:hover .d-presence,.dt-leftbar-row[data-v-ca5d7362]:focus-within .d-presence{--presence-color-border-base: var(--dt-color-black-200)}.dt-leftbar-row[data-v-ca5d7362]:hover .d-avatar__count,.dt-leftbar-row[data-v-ca5d7362]:focus-within .d-avatar__count{--avatar-count-color-shadow: var(--dt-theme-sidebar-selected-row-color-background)}.dt-leftbar-row--has-unread[data-v-ca5d7362]{--leftbar-row-description-font-weight: var(--dt-font-weight-bold);--leftbar-row-description-color-foreground: var(--dt-theme-sidebar-color-foreground-unread);--leftbar-row-alpha-color-foreground: var(--dt-theme-sidebar-color-foreground-unread)}.dt-leftbar-row--unread-count[data-v-ca5d7362] .dt-leftbar-row__action{display:none}.dt-leftbar-row--muted[data-v-ca5d7362]{--leftbar-row-opacity: 60%}.dt-leftbar-row--selected[data-v-ca5d7362]{--leftbar-row-color-background: var(--dt-theme-sidebar-selected-row-color-background);--leftbar-row-description-color-foreground: var(--dt-theme-sidebar-selected-row-color-foreground)}.dt-leftbar-row--selected[data-v-ca5d7362] .d-presence{--presence-color-border-base: var(--dt-color-black-200)}.dt-leftbar-row--selected[data-v-ca5d7362] .d-avatar__count{--avatar-count-color-shadow: var(--dt-theme-sidebar-selected-row-color-background)}.dt-leftbar-row__is-typing[data-v-ca5d7362]{--is-typing-size-shape: var(--dt-size-550);height:var(--is-typing-size-shape);width:var(--is-typing-size-shape);position:absolute;display:flex;align-items:center;justify-content:center;gap:2px;border-radius:var(--dt-size-radius-pill);opacity:.75}.dt-leftbar-row__is-typing span[data-v-ca5d7362]{transition:all .5s ease;background:var(--dt-color-surface-strong);height:4px;width:4px;display:inline-block;padding:0;opacity:.3;border-radius:var(--dt-size-radius-pill);animation:wave-ca5d7362 1.5s ease infinite}.dt-leftbar-row__is-typing span[data-v-ca5d7362]:nth-child(1){animation-delay:0ms}.dt-leftbar-row__is-typing span[data-v-ca5d7362]:nth-child(2){animation-delay:var(--td100)}.dt-leftbar-row__is-typing span[data-v-ca5d7362]:nth-child(3){animation-delay:var(--td200)}.dt-leftbar-row__primary[data-v-ca5d7362]{display:flex;align-items:center;flex:1;width:100%;text-align:left;background-color:var(--leftbar-row-color-background);color:var(--leftbar-row-color-foreground);text-decoration:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:inherit;line-height:inherit;margin:0;border:0;padding:0;border-radius:var(--leftbar-row-radius)}.dt-leftbar-row__primary[data-v-ca5d7362]:active{--leftbar-row-color-background: var(--dt-theme-sidebar-row-color-background-active)}.dt-leftbar-row__primary[data-v-ca5d7362]:focus-visible{box-shadow:var(--dt-shadow-focus-inset)}.dt-leftbar-row__action-button[data-v-ca5d7362]{opacity:0;width:var(--leftbar-row-action-width);height:var(--leftbar-row-action-height)}.dt-leftbar-row__alpha[data-v-ca5d7362]{color:var(--leftbar-row-alpha-color-foreground);display:flex;box-sizing:border-box;justify-content:center;align-items:center;padding-left:var(--dt-space-400);padding-right:var(--dt-space-400);width:var(--leftbar-row-alpha-width);height:var(--leftbar-row-alpha-height);border-radius:var(--leftbar-row-radius) 0 0 var(--leftbar-row-radius)}.dt-leftbar-row__label[data-v-ca5d7362]{flex:0 1;min-width:0}.dt-leftbar-row__omega[data-v-ca5d7362]{position:absolute;display:flex;right:var(--leftbar-row-action-position-right);top:var(--leftbar-row-action-position-bottom);transform:translateY(calc(var(--leftbar-row-action-position-bottom) * -1));gap:var(--dt-space-300);justify-content:flex-end;align-items:center;box-sizing:border-box;border-radius:var(--leftbar-row-radius)}.dt-leftbar-row__unread-badge[data-v-ca5d7362]{display:var(--leftbar-row-unread-badge-display)}.dt-leftbar-row__active-voice[data-v-ca5d7362]{color:var(--dt-color-purple-400);display:inline-flex;-webkit-animation-name:opacity-pulsate-ca5d7362;-webkit-animation-duration:1s;-webkit-animation-iteration-count:infinite;-webkit-animation-fill-mode:both;-moz-animation-name:opacity-pulsate-ca5d7362;-moz-animation-duration:1s;-moz-animation-iteration-count:infinite;-moz-animation-fill-mode:both;animation-name:opacity-pulsate-ca5d7362;animation-duration:1s;animation-iteration-count:infinite;animation-fill-mode:both}.dt-leftbar-row__dnd[data-v-ca5d7362]{padding-top:var(--dt-space-200);padding-right:var(--dt-space-300);color:var(--dt-color-foreground-tertiary);font-size:var(--dt-font-size-100);line-height:var(--dt-font-line-height-400);font-weight:var(--dt-font-weight-medium)}.dt-leftbar-row[data-v-ca5d7362] .dt-leftbar-row__description{display:block;font-weight:var(--leftbar-row-description-font-weight);font-size:var(--leftbar-row-description-font-size);line-height:var(--leftbar-row-description-line-height);color:var(--leftbar-row-description-color-foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dt-leftbar-row[data-v-ca5d7362] .dt-leftbar-row__status{display:block;color:var(--leftbar-row-status-color-foreground);font-size:var(--leftbar-row-status-font-size);line-height:var(--leftbar-row-status-line-height);padding-bottom:var(--dt-space-100);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dt-leftbar-row[data-v-ca5d7362] .dt-leftbar-row__meta-context~.dt-leftbar-row__meta-custom:not(:empty):before{content:" • ";color:var(--dt-theme-sidebar-status-color-foreground)}.dt-leftbar-row__icon-cc[data-v-ca5d7362]{border-radius:var(--dt-size-200);width:calc(var(--dt-size-300) * 3.5);height:calc(var(--dt-size-300) * 3.5)}.opacity-pulsate[data-v-ca5d7362]{-webkit-animation-name:opacity-pulsate-ca5d7362;-webkit-animation-duration:1s;-webkit-animation-iteration-count:infinite;-webkit-animation-fill-mode:both;-moz-animation-name:opacity-pulsate-ca5d7362;-moz-animation-duration:1s;-moz-animation-iteration-count:infinite;-moz-animation-fill-mode:both;animation-name:opacity-pulsate-ca5d7362;animation-duration:1s;animation-iteration-count:infinite;animation-fill-mode:both}@-webkit-keyframes opacity-pulsate-ca5d7362{0%,to{opacity:.2}50%{opacity:1}}@-moz-keyframes opacity-pulsate-ca5d7362{0%,to{opacity:.2}50%{opacity:1}}@keyframes opacity-pulsate-ca5d7362{0%,to{opacity:.2}50%{opacity:1}}@keyframes wave-ca5d7362{0%,50%,to{transform:translate(0)}10%{transform:translateY(-5px);opacity:90%}}.dt-recipe-callbox[data-v-ef08f46e]{padding:0;color:var(--dt-color-foreground-primary);background-color:var(--dt-color-surface-primary);border-radius:var(--dt-size-radius-300)}.dt-recipe-callbox--video[data-v-ef08f46e]{display:flex;border-radius:var(--dt-size-radius-200) var(--dt-size-radius-200) 0 0;overflow:clip;margin-bottom:var(--dt-space-300-negative)}.dt-recipe-callbox--main-content[data-v-ef08f46e]{padding:0;border-radius:var(--dt-size-radius-300);border:var(--dt-size-border-100) solid transparent;align-items:stretch}.dt-recipe-callbox--main-content.dt-recipe-callbox--border-default[data-v-ef08f46e]{border-color:var(--dt-color-border-default)}.dt-recipe-callbox--main-content.dt-recipe-callbox--border-ai[data-v-ef08f46e]{background:linear-gradient(var(--dt-color-surface-primary),var(--dt-color-surface-primary)) padding-box,linear-gradient(135deg,var(--dt-color-border-accent),var(--dt-color-border-brand)) border-box}.dt-recipe-callbox--main-content.dt-recipe-callbox--border-critical[data-v-ef08f46e]{background:radial-gradient(var(--dt-color-surface-primary),var(--dt-color-surface-primary)) padding-box,radial-gradient(circle,#E7301D,#F78B23) border-box}.dt-recipe-callbox--main-content-top[data-v-ef08f46e]{display:flex;align-items:center;padding:var(--dt-space-350) var(--dt-space-400)}.dt-recipe-callbox--main-content-bottom[data-v-ef08f46e]{border-top:1px solid var(--dt-color-border-subtle)}.dt-recipe-callbox--avatar[data-v-ef08f46e]{margin-right:var(--dt-space-400)}.dt-recipe-callbox--content[data-v-ef08f46e]{display:flex;flex-direction:column;flex:1 0 auto;min-width:0}.dt-recipe-callbox--content-title[data-v-ef08f46e]{overflow:clip;white-space:nowrap;text-overflow:ellipsis;color:var(--dt-color-foreground-primary);background-color:var(--dt-color-surface-primary);font-weight:var(--dt-font-weight-bold);border:none;padding:0;width:0;min-width:100%;text-align:left;-webkit-user-select:text;user-select:text;line-height:normal}.dt-recipe-callbox--content-badge[data-v-ef08f46e]{line-height:normal}.dt-recipe-callbox--content-subtitle[data-v-ef08f46e]{padding:0;font-size:var(--dt-font-size-100);color:var(--dt-color-foreground-tertiary);line-height:normal;overflow:hidden;width:0;min-width:100%}.dt-recipe-callbox--right[data-v-ef08f46e]{display:flex;justify-content:right}.dt-recipe-callbox--clickable .dt-recipe-callbox--content-title[data-v-ef08f46e]{cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:var(--dt-size-100)}.dt-recipe-callbox--clickable .dt-recipe-callbox--content-title[data-v-ef08f46e]:focus-visible{outline:none;box-shadow:var(--dt-shadow-focus)}.dt-recipe-callbox--clickable .dt-recipe-callbox--content-title[data-v-ef08f46e]:hover,.dt-recipe-callbox--clickable .dt-recipe-callbox--content-title[data-v-ef08f46e]:active{text-decoration:underline}.dt-recipe-callbox .dt-recipe-callbox-badge--warning[data-v-ef08f46e]{background-color:var(--dt-color-surface-warning)}.dt-contact-info[data-v-a3c913d1]{--contact-info-avatar-border-color: var(--dt-color-surface-primary);display:flex}.dt-contact-info[data-v-a3c913d1] .dt-item-layout{flex:1 1 0}.dt-contact-info[data-v-a3c913d1] .dt-item-layout--content{min-width:var(--dt-space-825)}.dt-contact-info[data-v-a3c913d1] .dt-item-layout--left{min-width:var(--dt-space-650);justify-content:flex-start;align-items:center}.dt-contact-info[data-v-a3c913d1] .dt-item-layout--right{min-width:0;align-items:center}.dt-contact-info__left[data-v-a3c913d1]{position:relative;background-color:transparent;background-image:none;border-width:0;cursor:pointer}.dt-contact-info--avatars[data-v-a3c913d1]{margin-right:var(--dt-space-300-negative);display:flex;flex-direction:row}.dt-contact-info--avatars .d-avatar[data-v-a3c913d1]{border-radius:var(--dt-size-radius-pill);border:var(--dt-size-300) solid var(--contact-info-avatar-border-color);box-sizing:unset}.settings-menu-button[data-v-4ee1371d]{padding:var(--dt-space-0);border-radius:var(--dt-size-550);height:var(--dt-size-600);width:var(--dt-size-550);color:var(--dt-theme-topbar-button-color-foreground);background-color:var(--dt-theme-topbar-button-color-background)}.settings-menu-button[data-v-4ee1371d]:hover{background-color:var(--dt-theme-topbar-button-color-background-hover);color:var(--dt-theme-topbar-button-color-foreground-hover)}.settings-menu-button[data-v-4ee1371d]:active{background-color:var(--dt-theme-topbar-button-color-background-active)}.settings-menu-button-update[data-v-4ee1371d]{background-color:hsla(var(--dt-color-blue-200-hsl) / 25%);color:var(--dt-color-blue-500);border-color:hsla(var(--dt-color-blue-200-hsl) / 25%);border-radius:var(--dt-size-radius-pill);height:var(--dt-size-600)}.settings-menu-button-update[data-v-4ee1371d]:hover{background-color:hsla(var(--dt-color-blue-200-hsl) / 50%);color:var(--dt-theme-topbar-button-color-foreground-hover)}.dt-time-pill{color:var(--dt-color-foreground-primary);border-radius:var(--dt-size-radius-pill);line-height:var(--dt-font-line-height-300);font-size:var(--dt-font-size-100);border:var(--dt-size-border-100) solid var(--dt-color-border-default);background-color:var(--dt-color-surface-primary);padding:var(--dt-space-300) var(--dt-space-500)}.dt-message-input--remaining-char-tooltip{margin-top:auto;margin-bottom:auto}.dt-message-input--remaining-char{font-size:1.2rem}.message-input-button__disabled{background-color:unset;color:var(--theme-sidebar-icon-color);cursor:default}.dt-message-input--cancel-button{margin-right:var(--dt-space-300)}.dt-recipe-feed-item-pill__wrapper[data-v-dab5b252]{background-color:var(--dt-color-surface-secondary);padding:var(--dt-space-400)}.dt-recipe-feed-item-pill__button[data-v-dab5b252]{background-color:var(--dt-color-surface-moderate);text-align:left;width:100%;cursor:pointer;border-width:0;border-radius:var(--dt-size-radius-600);--button-padding-x: var(--button-padding-y-md);--button-padding-y: var(--button-padding-y-md);--button-color-text: var(--dt-action-color-foreground-muted-default);--button-border-radius: var(--dt-size-radius-600)}.dt-recipe-feed-item-pill__layout[data-v-dab5b252]{padding:var(--dt-space-400);gap:var(--dt-space-300);width:100%}.dt-recipe-feed-item-pill__layout[data-v-dab5b252]>.dt-item-layout--left{padding-right:var(--dt-space-0);justify-content:center}.dt-recipe-feed-item-pill__icon[data-v-dab5b252]{animation:fade-dab5b252 .15s ease-in}.dt-recipe-feed-item-pill__content[data-v-dab5b252]{display:flex;justify-content:center}.dt-recipe-feed-item-pill__title[data-v-dab5b252]{font-weight:var(--dt-font-weight-bold)}.dt-recipe-feed-item-pill__border[data-v-dab5b252]{border:double 1px transparent;border-radius:var(--dt-size-radius-600);background-origin:border-box;background-clip:content-box,border-box;overflow:hidden}.dt-recipe-feed-item-pill__border-default[data-v-dab5b252]{background:var(--dt-color-border-default)}.dt-recipe-feed-item-pill__border-ai[data-v-dab5b252]{background-image:linear-gradient(var(--dt-color-surface-primary),var(--dt-color-surface-primary)),var(--dt-badge-color-background-ai)}.dt-recipe-feed-item-pill__border-critical[data-v-dab5b252]{background:var(--dt-color-foreground-critical)}@keyframes fade-dab5b252{0%{transform:scale(0)}to{transform:scale(1)}}.dt-feed-item-row[data-v-5d0ac8f1]{width:var(--dt-size-100-percent);box-sizing:border-box;position:relative;padding:var(--dt-space-300) var(--dt-space-500)}.dt-feed-item-row[data-v-5d0ac8f1]:focus-visible{box-shadow:var(--dt-shadow-focus-inset)}.dt-feed-item-row--state-searched[data-v-5d0ac8f1]{background-color:var(--dt-color-surface-warning-subtle)}.dt-feed-item-row--state-error[data-v-5d0ac8f1]{background-color:var(--dt-color-surface-critical-subtle)}.dt-feed-item-row--active[data-v-5d0ac8f1]{background-color:var(--dt-color-surface-secondary-opaque)}.dt-feed-item-row--state-transition[data-v-5d0ac8f1]{transition-duration:2s;transition-delay:0s;transition-timing-function:var(--ttf-in-out);transition-property:background-color}.dt-feed-item-row__avatar-container[data-v-5d0ac8f1]{padding-top:var(--dt-space-300);padding-bottom:var(--dt-space-300)}.dt-feed-item-row__content[data-v-5d0ac8f1]{padding-left:var(--dt-space-300)}.dt-feed-item-row__attachment[data-v-5d0ac8f1]{padding-top:var(--dt-space-200);padding-bottom:var(--dt-space-300)}.dt-feed-item-row__attachment[data-v-5d0ac8f1] .dt-feed-item-row__image{border:var(--dt-color-border-subtle) solid var(--dt-size-border-100);border-radius:var(--dt-size-radius-400);display:block;max-width:30rem;max-height:30rem;min-width:5.6rem;min-height:5.6rem}.dt-feed-item-row__attachment[data-v-5d0ac8f1] .dt-feed-item-row__video{display:block;height:25rem}.dt-feed-item-row__header[data-v-5d0ac8f1]{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--dt-space-300);font-size:var(--dt-font-size-200);line-height:var(--dt-font-line-height-300)}.dt-feed-item-row__header__name[data-v-5d0ac8f1]{font-weight:var(--dt-font-weight-bold)}.dt-feed-item-row__header__time[data-v-5d0ac8f1]{font-size:var(--dt-font-size-100);color:var(--dt-color-foreground-tertiary);flex-shrink:0}.dt-feed-item-row__reactions[data-v-5d0ac8f1]{display:flex;flex-wrap:wrap;padding-top:var(--dt-space-200);padding-bottom:var(--dt-space-200);padding-left:var(--dt-space-300)}.dt-feed-item-row__threading[data-v-5d0ac8f1]{padding-top:var(--dt-space-200);padding-bottom:var(--dt-space-200)}.dt-feed-item-row__left-time[data-v-5d0ac8f1]{color:var(--dt-color-foreground-tertiary);font-size:var(--dt-font-size-100);font-weight:var(--dt-font-weight-normal);vertical-align:middle;white-space:nowrap}.dt-feed-item-row__menu[data-v-5d0ac8f1]{position:absolute;top:var(--dt-space-550-negative);right:var(--dt-space-450)}.dt-feed-item-row[data-v-5d0ac8f1]>.dt-item-layout{font:var(--dt-typography-body-md-compact);min-height:initial;padding:0}.dt-feed-item-row[data-v-5d0ac8f1]>.dt-item-layout>.dt-item-layout--left{align-self:flex-start;text-align:end;display:block;padding-right:var(--dt-space-300);padding-left:var(--dt-space-0);min-width:calc(var(--dt-space-600) + var(--dt-space-300))}.dt-feed-item-row[data-v-5d0ac8f1]>.dt-item-layout>.dt-item-layout--right{padding:0;min-width:initial}.dt-feed-item-row[data-v-5d0ac8f1]>.dt-item-layout>.dt-item-layout--content>.dt-item-layout--bottom{display:flex;flex-direction:column;margin-top:0}.dt-emoji-row{display:flex;flex-wrap:wrap;gap:var(--dt-space-300)}.dt-emoji-row__tooltip{display:inline-block}.dt-emoji-row__reaction{--emoji-item-color-inset-shadow: transparent;--emoji-item-color-foreground: var(--dt-action-color-foreground-muted-default);--emoji-item-color-background: var(--dt-action-color-background-muted-hover);padding:var(--dt-space-300) var(--dt-space-400);border-radius:var(--dt-size-radius-pill);border:0;color:var(--emoji-item-color-foreground);background-color:var(--emoji-item-color-background);box-shadow:inset 0 0 0 var(--dt-size-border-150) var(--emoji-item-color-inset-shadow);height:var(--dt-size-550)}.dt-emoji-row__reaction.dt-emoji-row__picker{padding:var(--dt-space-200) var(--dt-space-350)}.dt-emoji-row__reaction:hover{--emoji-item-color-inset-shadow: var(--dt-color-border-subtle);--emoji-item-color-foreground: var(--dt-action-color-foreground-muted-hover)}.dt-emoji-row__reaction:active{--emoji-item-color-background: var(--dt-action-color-background-muted-active);--emoji-item-color-foreground: var(--dt-action-color-foreground-muted-active);transform:scale(.98)}.dt-emoji-row__reaction--selected{--emoji-item-color-inset-shadow: var(--dt-color-border-brand);--emoji-item-color-foreground: var(--dt-color-link-primary);--emoji-item-color-background: var(--dt-action-color-background-base-hover)}.dt-emoji-row__reaction--selected .dt-emoji-row__reaction-number{font-weight:var(--dt-font-weight-bold)}.dt-emoji-row__reaction--selected:hover{--emoji-item-color-inset-shadow: var(--dt-color-border-brand-strong);--emoji-item-color-foreground: var(--dt-color-link-primary-hover)}.dt-emoji-row__reaction--selected:active{--emoji-item-color-background: var(--dt-action-color-background-base-active)}.dt-emoji-row__emoji{margin-right:var(--dt-space-300);display:inline-flex}.dt-emoji-row__reaction-number{font-weight:var(--dt-typography-body-sm-font-weight);font-size:var(--dt-typography-body-sm-font-size);font-family:var(--dt-typography-body-sm-font-family);line-height:var(--dt-font-line-height-100);font-variant:tabular-nums}.dt-editor--top-bar-background{background-color:var(--dt-color-surface-secondary)}.dt-editor--button-group-divider{margin-left:var(--dt-space-400);height:calc(var(--dt-size-550) + var(--dt-size-300));width:var(--dt-size-100);background:var(--dt-color-border-subtle)}.progress-bar{width:var(--dt-size-550);height:var(--dt-size-550)}.progress-bar__circle{fill:none;stroke-width:2;stroke-dasharray:var(--stroke-dasharray)}.progress-bar__circle:nth-child(1){stroke-dashoffset:0;stroke:var(--dt-color-black-100)}.progress-bar__circle:nth-child(2){stroke-dashoffset:var(--stroke-dashoffset);stroke:var(--dt-color-purple-500);transition:stroke-dashoffset .5s linear}.dt-attachment-image{position:relative}.dt-attachment-image:focus-within .dt-attachment-image__close-button,.dt-attachment-image:hover .dt-attachment-image__close-button{opacity:1}.dt-attachment-image__image-viewer{height:var(--dt-size-700);width:var(--dt-size-700);border:var(--dt-space-100) solid;border-radius:var(--br4);border-width:var(--dt-size-350);border-color:var(--dt-color-border-subtle);object-fit:cover}.dt-attachment-image__top-right{position:absolute;top:var(--dt-size-100);right:var(--dt-size-100)}.dt-attachment-image__close-button{opacity:0;position:absolute;top:inherit;right:inherit;color:var(--dt-color-neutral-white);background-color:var(--dt-color-black-400);border:var(--dt-space-100) solid;border-width:var(--dt-size-200);border-color:var(--dt-color-neutral-white)}.dt-attachment-image__progress-bar{position:absolute;top:inherit;right:inherit;background-color:var(--dt-color-neutral-white);border-radius:50%;display:flex;transform:rotate(-90deg);border:var(--dt-space-100) solid;border-width:var(--dt-size-200);border-color:var(--dt-color-border-subtle)}.dt-attachment-carousel{position:relative;max-height:100px;width:var(--dt-space-1000)}.dt-attachment-carousel__media-list{display:flex;flex-direction:row;padding-left:0;overflow-x:scroll}.dt-attachment-carousel__media-list::-webkit-scrollbar{display:none}.dt-attachment-carousel__arrow{position:absolute;opacity:0;background-color:var(--dt-color-neutral-white);top:var(--dt-space-30-percent);border:var(--dt-space-100) solid;border-width:var(--dt-size-100);border-color:var(--bc-default)}.dt-attachment-carousel:hover .dt-attachment-carousel__arrow{opacity:1}.dt-attachment-carousel__arrow--left{left:var(--dt-space-300)}.dt-attachment-carousel__arrow--right{right:var(--dt-space-300)}.dt-attachment-carousel__image-viewer{height:var(--dt-size-700);width:var(--dt-size-700);border-radius:var(--br4);border:var(--dt-space-100) solid;border-width:var(--dt-size-350);border-color:var(--dt-color-border-subtle)}.combobox__input-wrapper[data-v-e8b2c5a4]{position:relative;display:block}.combobox__chip-wrapper[data-v-e8b2c5a4]{position:absolute;margin-left:var(--dt-space-200);margin-right:var(--dt-space-200);padding-left:var(--dt-space-100);max-width:calc(var(--dt-size-100-percent) - var(--dt-space-400))}.combobox__chip[data-v-e8b2c5a4]{margin-top:var(--dt-space-300);margin-left:var(--dt-space-200);margin-right:var(--dt-space-200);z-index:var(--zi-base1);max-width:var(--dt-size-100-percent)}.combobox__input[data-v-e8b2c5a4]{flex-grow:1}.combobox__list--loading[data-v-e8b2c5a4]{text-align:center;padding-top:var(--dt-space-500);padding-bottom:var(--dt-space-500)}.dt-grouped-chip{display:inline-flex;white-space:nowrap;background-color:unset;background-image:unset}.dt-chip-content{font-variant-numeric:tabular-nums}.dt-chip-content--left{border-top-left-radius:var(--dt-size-radius-pill);border-bottom-left-radius:var(--dt-size-radius-pill);background-color:var(--dt-color-surface-moderate-opaque);max-width:var(--dt-size-730)}.dt-chip-content--right{border-top-right-radius:var(--dt-size-radius-pill);border-bottom-right-radius:var(--dt-size-radius-pill);background-color:var(--dt-color-purple-200);max-width:var(--dt-size-730)}.ivr_node{width:280px;display:flex;flex-direction:column;align-items:center;cursor:pointer}.ivr_node__header-left{display:flex;align-items:center}.ivr_node__label{font-size:var(--dt-font-size-200);font-weight:var(--dt-font-weight-bold)}.ivr_node__dropdown-list{width:var(--dt-size-825)}.ivr_node__goto_icon{transform:rotate(90deg)}.ivr-connector{z-index:var(--zi-base);display:flex;justify-content:center;align-items:center;border-color:var(--dt-color-purple-600);background-color:var(--dt-color-purple-600);width:var(--dt-size-400);height:var(--dt-size-400);border-radius:var(--dt-size-radius-circle);margin-bottom:var(--dt-space-300-negative)}.ivr-connector--selected{margin-bottom:var(--dt-space-400-negative)}.ivr-connector.ivr-connector--dtmf{width:var(--dt-size-550);height:var(--dt-size-550);margin-bottom:var(--dt-space-450-negative);color:var(--dt-color-neutral-white);font-size:var(--dt-font-size-200)}.ivr-connector.ivr-connector--dtmf--selected{margin-bottom:var(--dt-space-500-negative)}.dt-recipe-callbar-button:not(.dt-recipe-callbar-button--circle){line-height:var(--dt-font-line-height-300)}.dt-recipe-callbar-button--circle{border-radius:var(--dt-size-radius-circle)}.dt-recipe-callbar-button.d-btn[disabled]{background-color:unset;opacity:.5}.dt-recipe-callbar-button--circle.d-btn[disabled]{border-color:unset}.dt-recipe-callbar-button--active .base-button__icon,.dt-recipe-callbar-button--active:hover .base-button__icon{color:var(--primary-color)}.dt-recipe-callbar-button--disabled{cursor:not-allowed}.dt-recipe--callbar-button-with-popover--arrow{margin-top:var(--dt-space-350-negative);margin-left:calc(var(--dt-space-300-negative) * 5);width:var(--dt-size-500);height:var(--dt-size-500);padding:var(--dt-space-400);border-radius:var(--dt-size-300)}.dt-recipe--callbar-button-with-popover--arrow.d-btn--active{background:var(--dt-color-surface-moderate-opaque)}.dt-recipe--callbar-button-with-popover--arrow--large{margin-left:var(--dt-space-550-negative)}.dt-recipe--callbar-button-with-popover--arrow__icon{color:var(--dt-color-black-800)}.dt-recipe--callbar-button-with-popover--popover .d-popover__header{background:var(--dt-color-surface-contrast);color:var(--dt-color-foreground-primary-inverted)}.dt-recipe--callbar-button-with-popover--popover .d-popover__header .d-btn{color:var(--dt-color-foreground-primary-inverted)}.dt-recipe--callbar-button-with-popover--button .d-tab--selected:after,.dt-recipe--callbar-button-with-popover--button .d-tab--selected:hover:after{--tab--bgc: var(--dt-color-surface-contrast)}.dt-recipe--callbar-button-with-popover--button .tab-group{display:flex;flex-direction:column;height:100%}.dt-recipe--callbar-button-with-popover--button .tab-content{flex:1 1 100%;overflow-y:auto}.dt-recipe--callbar-button-with-popover{display:flex;align-items:center}
+.d-context-menu-list{width:var(--dt-size-850)}.d-dropdown-list{position:relative;margin:var(--dt-space-300);padding-left:var(--dt-space-0);padding-right:var(--dt-space-0)}.d-dropdown-list>.dt-list-item{margin-top:var(--dt-space-200)}.tippy-box[data-popper-reference-hidden] .d-tooltip{visibility:hidden;pointer-events:none}.skeleton-placeholder{display:flex;stroke:none;fill:var(--placeholder-from-color, var(--dt-color-black-300));background:var(--placeholder-from-color, var(--dt-color-black-300))}.skeleton-placeholder--animate{animation-name:placeholder-throb;animation-iteration-count:infinite}@keyframes placeholder-throb{10%{fill:var(--placeholder-from-color, var(--dt-color-black-300));background:var(--placeholder-from-color, var(--dt-color-black-300))}50%{fill:var(--placeholder-to-color, var(--dt-color-black-100));background:var(--placeholder-to-color, var(--dt-color-black-100))}90%{fill:var(--placeholder-from-color, var(--dt-color-black-300));background:var(--placeholder-from-color, var(--dt-color-black-300))}}.dt-list-item{list-style:none;background-color:var(--dt-action-color-background-muted-default)}.dt-list-item:not(.dt-list-item--static){cursor:pointer;border-radius:var(--dt-size-radius-300)}.dt-list-item--focusable:focus,.dt-list-item--focusable:focus-within,.dt-list-item--highlighted{background-color:var(--dt-action-color-background-muted-hover)}.dt-list-item--highlighted:active{background-color:var(--dt-action-color-background-muted-active)}.dt-list-item--selected-icon{margin-left:var(--dt-space-400)}.dt-list-item :focus-visible{outline:none;box-shadow:var(--dt-shadow-focus)}.d-avatar--image-loaded{background-color:transparent;background-image:unset}.d-avatar__count,.d-avatar__presence{z-index:var(--zi-base)}.d-avatar__overlay{background-color:var(--dt-color-surface-contrast-opaque);opacity:var(--dt-opacity-900);position:absolute;width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:var(--dt-size-radius-circle);z-index:var(--zi-base)}.d-avatar__overlay-icon{color:var(--dt-color-foreground-primary-inverted);width:100%}.d-avatar__overlay-text{color:var(--dt-color-foreground-primary-inverted);font-weight:var(--dt-font-weight-bold);font-size:var(--dt-font-size-200);width:100%;text-align:center}.d-avatar--clickable{--avatar-color-border: transparent;cursor:pointer;padding:0;background-color:transparent;border-radius:var(--dt-size-radius-circle);border:var(--dt-size-border-100) solid var(--avatar-color-border)}.d-avatar--clickable:focus-visible{outline:none;box-shadow:var(--dt-shadow-focus)}.d-avatar--clickable:hover{--avatar-color-border: var(--dt-color-border-default)}.d-avatar--clickable:active{--avatar-color-border: var(--dt-color-border-moderate);transform:scale(.98)}.dt-suggestion-list{position:relative;padding:var(--dt-size-300);max-height:var(--dt-size-875)!important;min-width:var(--dt-size-925);max-width:var(--dt-size-975)}.dt-suggestion-list--item{border:var(--dt-size-100) solid transparent}.ProseMirror p.is-editor-empty:first-child:before{content:attr(data-placeholder);float:left;color:var(--dt-color-foreground-placeholder);pointer-events:none;height:0}.ProseMirror ul>li{list-style-type:disc}.ProseMirror ol>li{list-style-type:decimal}.ProseMirror blockquote{padding-left:var(--dt-space-400);border-left:var(--dt-size-border-300) solid var(--dt-color-foreground-muted-inverted);margin-left:0}.dt-rich-text-editor--code-block{background:var(--dt-color-surface-secondary);padding:var(--dt-space-400)}.dt-rich-text-editor{overflow:hidden}.dt-list-item[role=menuitem]{border-radius:var(--dt-size-300)}.dt-list-separator{border-top:var(--dt-size-100) solid var(--dt-color-border-default);list-style:none;margin:var(--dt-space-300) var(--dt-space-300-negative)}.dt-description-list{display:flex;flex-wrap:wrap;align-items:flex-start;flex-direction:row;line-height:var(--dt-font-line-height-300);font-size:var(--dt-font-size-100);--description-list-gap: var(--dt-space-400);gap:var(--description-list-gap)}.dt-description-list--gap-0{--description-list-gap: var(--dt-space-0)}.dt-description-list--gap-100{--description-list-gap: var(--dt-space-100)}.dt-description-list--gap-200{--description-list-gap: var(--dt-space-200)}.dt-description-list--gap-300{--description-list-gap: var(--dt-space-300)}.dt-description-list--gap-400{--description-list-gap: var(--dt-space-400)}.dt-description-list--gap-500{--description-list-gap: var(--dt-space-500)}.dt-description-list--gap-600{--description-list-gap: var(--dt-space-600)}.dt-description-list--column{flex-direction:column}.dt-description-list__term{color:var(--dt-color-foreground-tertiary);flex:0 1 40%}.dt-description-list__description{color:var(--dt-color-foreground-primary);flex:1 1 50%;margin-left:0}.dt-empty-list-item{display:flex;align-items:center;justify-content:center;font-size:var(--dt-font-size-200);line-height:var(--lh4);padding:var(--dt-space-300) var(--dt-space-450)}.enter-active,.leave-active{overflow:hidden;transition:height var(--td300) var(--ttf-out-quint)}.dt-top-banner-info{font-size:var(--dt-font-size-100);display:flex;justify-content:space-between;align-items:center;color:var(--dt-color-foreground-primary)}.dt-top-banner-info__left{margin:var(--dt-space-300) 0 var(--dt-space-300) var(--dt-space-400);min-width:20%}.dt-top-banner-info__middle{display:flex;align-items:center;gap:var(--dt-size-300);margin-top:var(--dt-space-300);margin-bottom:var(--dt-space-300)}.dt-top-banner-info__right{display:flex;align-items:baseline;justify-content:flex-end;gap:var(--dt-size-300);margin:var(--dt-space-300) var(--dt-space-500) var(--dt-space-300) 0;min-width:20%;text-align:right}.dt-leftbar-unread-pill{display:flex;align-items:center;justify-content:center;padding:var(--dt-space-200) var(--dt-space-500) var(--dt-space-200) var(--dt-space-400);gap:var(--dt-space-300);font-size:var(--dt-font-size-100);box-shadow:var(--dt-shadow-medium);border-radius:var(--dt-size-radius-pill);border:none;line-height:var(--dt-font-line-height-600);cursor:pointer}.dt-leftbar-unread-pill--mentions{font-weight:var(--dt-font-weight-bold);background-color:var(--dt-theme-mention-color-background);color:var(--dt-theme-mention-color-foreground)}.dt-leftbar-unread-pill--messages{background-color:var(--dt-color-surface-contrast);color:var(--dt-color-foreground-secondary-inverted)}.dt-leftbar-row[data-v-ca5d7362]{--leftbar-row-color-foreground: var(--dt-theme-sidebar-color-foreground);--leftbar-row-color-background: var(--dt-theme-sidebar-row-color-background);--leftbar-row-radius: var(--dt-size-radius-pill);--leftbar-row-opacity: 100%;--leftbar-row-alpha-color-foreground: var(--dt-theme-sidebar-icon-color-foreground);--leftbar-row-alpha-width: calc(var(--dt-size-300) * 10);--leftbar-row-alpha-height: calc(var(--dt-size-300) * 9);--leftbar-row-omega-height: var(--leftbar-row-alpha-height);--leftbar-row-unread-badge-display: inline-flex;--leftbar-row-description-color-foreground: var(--dt-theme-sidebar-color-foreground);--leftbar-row-description-font-weight: var(--dt-font-weight-normal);--leftbar-row-description-font-size: var(--dt-font-size-200);--leftbar-row-description-line-height: var(--dt-font-line-height-200);--leftbar-row-status-color-foreground: var(--dt-theme-sidebar-status-color-foreground);--leftbar-row-status-font-size: var(--dt-font-size-100);--leftbar-row-status-line-height: var(--dt-font-line-height-100);--leftbar-row-action-position-right: var(--dt-size-400);--leftbar-row-action-position-bottom: 50%;--leftbar-row-action-width: var(--dt-size-550);--leftbar-row-action-height: var(--leftbar-row-action-width);position:relative;opacity:var(--leftbar-row-opacity);display:flex;background-color:var(--dt-theme-sidebar-row-color-background);border-radius:var(--leftbar-row-radius);transition-duration:var(--td200);transition-property:background-color,border,box-shadow;transition-timing-function:var(--ttf-out-quint);cursor:pointer}.dt-leftbar-row[data-v-ca5d7362]:not(.dt-leftbar-row--no-action):hover,.dt-leftbar-row[data-v-ca5d7362]:not(.dt-leftbar-row--no-action):focus-within{--leftbar-row-unread-badge-display: none}.dt-leftbar-row[data-v-ca5d7362]:not(.dt-leftbar-row--no-action):hover .dt-leftbar-row__action,.dt-leftbar-row[data-v-ca5d7362]:not(.dt-leftbar-row--no-action):focus-within .dt-leftbar-row__action{display:inline-flex}.dt-leftbar-row[data-v-ca5d7362]:not(.dt-leftbar-row--no-action):hover .dt-leftbar-row__action-button,.dt-leftbar-row[data-v-ca5d7362]:not(.dt-leftbar-row--no-action):focus-within .dt-leftbar-row__action-button{opacity:1}.dt-leftbar-row[data-v-ca5d7362]:hover,.dt-leftbar-row[data-v-ca5d7362]:focus-within{--leftbar-row-color-background: var(--dt-theme-sidebar-row-color-background-hover)}.dt-leftbar-row[data-v-ca5d7362]:hover .d-presence,.dt-leftbar-row[data-v-ca5d7362]:focus-within .d-presence{--presence-color-border-base: var(--dt-color-black-200)}.dt-leftbar-row[data-v-ca5d7362]:hover .d-avatar__count,.dt-leftbar-row[data-v-ca5d7362]:focus-within .d-avatar__count{--avatar-count-color-shadow: var(--dt-theme-sidebar-selected-row-color-background)}.dt-leftbar-row--has-unread[data-v-ca5d7362]{--leftbar-row-description-font-weight: var(--dt-font-weight-bold);--leftbar-row-description-color-foreground: var(--dt-theme-sidebar-color-foreground-unread);--leftbar-row-alpha-color-foreground: var(--dt-theme-sidebar-color-foreground-unread)}.dt-leftbar-row--unread-count[data-v-ca5d7362] .dt-leftbar-row__action{display:none}.dt-leftbar-row--muted[data-v-ca5d7362]{--leftbar-row-opacity: 60%}.dt-leftbar-row--selected[data-v-ca5d7362]{--leftbar-row-color-background: var(--dt-theme-sidebar-selected-row-color-background);--leftbar-row-description-color-foreground: var(--dt-theme-sidebar-selected-row-color-foreground)}.dt-leftbar-row--selected[data-v-ca5d7362] .d-presence{--presence-color-border-base: var(--dt-color-black-200)}.dt-leftbar-row--selected[data-v-ca5d7362] .d-avatar__count{--avatar-count-color-shadow: var(--dt-theme-sidebar-selected-row-color-background)}.dt-leftbar-row__is-typing[data-v-ca5d7362]{--is-typing-size-shape: var(--dt-size-550);height:var(--is-typing-size-shape);width:var(--is-typing-size-shape);position:absolute;display:flex;align-items:center;justify-content:center;gap:2px;border-radius:var(--dt-size-radius-pill);opacity:.75}.dt-leftbar-row__is-typing span[data-v-ca5d7362]{transition:all .5s ease;background:var(--dt-color-surface-strong);height:4px;width:4px;display:inline-block;padding:0;opacity:.3;border-radius:var(--dt-size-radius-pill);animation:wave-ca5d7362 1.5s ease infinite}.dt-leftbar-row__is-typing span[data-v-ca5d7362]:nth-child(1){animation-delay:0ms}.dt-leftbar-row__is-typing span[data-v-ca5d7362]:nth-child(2){animation-delay:var(--td100)}.dt-leftbar-row__is-typing span[data-v-ca5d7362]:nth-child(3){animation-delay:var(--td200)}.dt-leftbar-row__primary[data-v-ca5d7362]{display:flex;align-items:center;flex:1;width:100%;text-align:left;background-color:var(--leftbar-row-color-background);color:var(--leftbar-row-color-foreground);text-decoration:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:inherit;line-height:inherit;margin:0;border:0;padding:0;border-radius:var(--leftbar-row-radius)}.dt-leftbar-row__primary[data-v-ca5d7362]:active{--leftbar-row-color-background: var(--dt-theme-sidebar-row-color-background-active)}.dt-leftbar-row__primary[data-v-ca5d7362]:focus-visible{box-shadow:var(--dt-shadow-focus-inset)}.dt-leftbar-row__action-button[data-v-ca5d7362]{opacity:0;width:var(--leftbar-row-action-width);height:var(--leftbar-row-action-height)}.dt-leftbar-row__alpha[data-v-ca5d7362]{color:var(--leftbar-row-alpha-color-foreground);display:flex;box-sizing:border-box;justify-content:center;align-items:center;padding-left:var(--dt-space-400);padding-right:var(--dt-space-400);width:var(--leftbar-row-alpha-width);height:var(--leftbar-row-alpha-height);border-radius:var(--leftbar-row-radius) 0 0 var(--leftbar-row-radius)}.dt-leftbar-row__label[data-v-ca5d7362]{flex:0 1;min-width:0}.dt-leftbar-row__omega[data-v-ca5d7362]{position:absolute;display:flex;right:var(--leftbar-row-action-position-right);top:var(--leftbar-row-action-position-bottom);transform:translateY(calc(var(--leftbar-row-action-position-bottom) * -1));gap:var(--dt-space-300);justify-content:flex-end;align-items:center;box-sizing:border-box;border-radius:var(--leftbar-row-radius)}.dt-leftbar-row__unread-badge[data-v-ca5d7362]{display:var(--leftbar-row-unread-badge-display)}.dt-leftbar-row__active-voice[data-v-ca5d7362]{color:var(--dt-color-purple-400);display:inline-flex;-webkit-animation-name:opacity-pulsate-ca5d7362;-webkit-animation-duration:1s;-webkit-animation-iteration-count:infinite;-webkit-animation-fill-mode:both;-moz-animation-name:opacity-pulsate-ca5d7362;-moz-animation-duration:1s;-moz-animation-iteration-count:infinite;-moz-animation-fill-mode:both;animation-name:opacity-pulsate-ca5d7362;animation-duration:1s;animation-iteration-count:infinite;animation-fill-mode:both}.dt-leftbar-row__dnd[data-v-ca5d7362]{padding-top:var(--dt-space-200);padding-right:var(--dt-space-300);color:var(--dt-color-foreground-tertiary);font-size:var(--dt-font-size-100);line-height:var(--dt-font-line-height-400);font-weight:var(--dt-font-weight-medium)}.dt-leftbar-row[data-v-ca5d7362] .dt-leftbar-row__description{display:block;font-weight:var(--leftbar-row-description-font-weight);font-size:var(--leftbar-row-description-font-size);line-height:var(--leftbar-row-description-line-height);color:var(--leftbar-row-description-color-foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dt-leftbar-row[data-v-ca5d7362] .dt-leftbar-row__status{display:block;color:var(--leftbar-row-status-color-foreground);font-size:var(--leftbar-row-status-font-size);line-height:var(--leftbar-row-status-line-height);padding-bottom:var(--dt-space-100);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dt-leftbar-row[data-v-ca5d7362] .dt-leftbar-row__meta-context~.dt-leftbar-row__meta-custom:not(:empty):before{content:" • ";color:var(--dt-theme-sidebar-status-color-foreground)}.dt-leftbar-row__icon-cc[data-v-ca5d7362]{border-radius:var(--dt-size-200);width:calc(var(--dt-size-300) * 3.5);height:calc(var(--dt-size-300) * 3.5)}.opacity-pulsate[data-v-ca5d7362]{-webkit-animation-name:opacity-pulsate-ca5d7362;-webkit-animation-duration:1s;-webkit-animation-iteration-count:infinite;-webkit-animation-fill-mode:both;-moz-animation-name:opacity-pulsate-ca5d7362;-moz-animation-duration:1s;-moz-animation-iteration-count:infinite;-moz-animation-fill-mode:both;animation-name:opacity-pulsate-ca5d7362;animation-duration:1s;animation-iteration-count:infinite;animation-fill-mode:both}@-webkit-keyframes opacity-pulsate-ca5d7362{0%,to{opacity:.2}50%{opacity:1}}@-moz-keyframes opacity-pulsate-ca5d7362{0%,to{opacity:.2}50%{opacity:1}}@keyframes opacity-pulsate-ca5d7362{0%,to{opacity:.2}50%{opacity:1}}@keyframes wave-ca5d7362{0%,50%,to{transform:translate(0)}10%{transform:translateY(-5px);opacity:90%}}.dt-recipe-callbox[data-v-ef08f46e]{padding:0;color:var(--dt-color-foreground-primary);background-color:var(--dt-color-surface-primary);border-radius:var(--dt-size-radius-300)}.dt-recipe-callbox--video[data-v-ef08f46e]{display:flex;border-radius:var(--dt-size-radius-200) var(--dt-size-radius-200) 0 0;overflow:clip;margin-bottom:var(--dt-space-300-negative)}.dt-recipe-callbox--main-content[data-v-ef08f46e]{padding:0;border-radius:var(--dt-size-radius-300);border:var(--dt-size-border-100) solid transparent;align-items:stretch}.dt-recipe-callbox--main-content.dt-recipe-callbox--border-default[data-v-ef08f46e]{border-color:var(--dt-color-border-default)}.dt-recipe-callbox--main-content.dt-recipe-callbox--border-ai[data-v-ef08f46e]{background:linear-gradient(var(--dt-color-surface-primary),var(--dt-color-surface-primary)) padding-box,linear-gradient(135deg,var(--dt-color-border-accent),var(--dt-color-border-brand)) border-box}.dt-recipe-callbox--main-content.dt-recipe-callbox--border-critical[data-v-ef08f46e]{background:radial-gradient(var(--dt-color-surface-primary),var(--dt-color-surface-primary)) padding-box,radial-gradient(circle,#E7301D,#F78B23) border-box}.dt-recipe-callbox--main-content-top[data-v-ef08f46e]{display:flex;align-items:center;padding:var(--dt-space-350) var(--dt-space-400)}.dt-recipe-callbox--main-content-bottom[data-v-ef08f46e]{border-top:1px solid var(--dt-color-border-subtle)}.dt-recipe-callbox--avatar[data-v-ef08f46e]{margin-right:var(--dt-space-400)}.dt-recipe-callbox--content[data-v-ef08f46e]{display:flex;flex-direction:column;flex:1 0 auto;min-width:0}.dt-recipe-callbox--content-title[data-v-ef08f46e]{overflow:clip;white-space:nowrap;text-overflow:ellipsis;color:var(--dt-color-foreground-primary);background-color:var(--dt-color-surface-primary);font-weight:var(--dt-font-weight-bold);border:none;padding:0;width:0;min-width:100%;text-align:left;-webkit-user-select:text;user-select:text;line-height:normal}.dt-recipe-callbox--content-badge[data-v-ef08f46e]{line-height:normal}.dt-recipe-callbox--content-subtitle[data-v-ef08f46e]{padding:0;font-size:var(--dt-font-size-100);color:var(--dt-color-foreground-tertiary);line-height:normal;overflow:hidden;width:0;min-width:100%}.dt-recipe-callbox--right[data-v-ef08f46e]{display:flex;justify-content:right}.dt-recipe-callbox--clickable .dt-recipe-callbox--content-title[data-v-ef08f46e]{cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:var(--dt-size-100)}.dt-recipe-callbox--clickable .dt-recipe-callbox--content-title[data-v-ef08f46e]:focus-visible{outline:none;box-shadow:var(--dt-shadow-focus)}.dt-recipe-callbox--clickable .dt-recipe-callbox--content-title[data-v-ef08f46e]:hover,.dt-recipe-callbox--clickable .dt-recipe-callbox--content-title[data-v-ef08f46e]:active{text-decoration:underline}.dt-recipe-callbox .dt-recipe-callbox-badge--warning[data-v-ef08f46e]{background-color:var(--dt-color-surface-warning)}.dt-contact-info[data-v-a3c913d1]{--contact-info-avatar-border-color: var(--dt-color-surface-primary);display:flex}.dt-contact-info[data-v-a3c913d1] .dt-item-layout{flex:1 1 0}.dt-contact-info[data-v-a3c913d1] .dt-item-layout--content{min-width:var(--dt-space-825)}.dt-contact-info[data-v-a3c913d1] .dt-item-layout--left{min-width:var(--dt-space-650);justify-content:flex-start;align-items:center}.dt-contact-info[data-v-a3c913d1] .dt-item-layout--right{min-width:0;align-items:center}.dt-contact-info__left[data-v-a3c913d1]{position:relative;background-color:transparent;background-image:none;border-width:0;cursor:pointer}.dt-contact-info--avatars[data-v-a3c913d1]{margin-right:var(--dt-space-300-negative);display:flex;flex-direction:row}.dt-contact-info--avatars .d-avatar[data-v-a3c913d1]{border-radius:var(--dt-size-radius-pill);border:var(--dt-size-300) solid var(--contact-info-avatar-border-color);box-sizing:unset}.settings-menu-button[data-v-4ee1371d]{padding:var(--dt-space-0);border-radius:var(--dt-size-550);height:var(--dt-size-600);width:var(--dt-size-550);color:var(--dt-theme-topbar-button-color-foreground);background-color:var(--dt-theme-topbar-button-color-background)}.settings-menu-button[data-v-4ee1371d]:hover{background-color:var(--dt-theme-topbar-button-color-background-hover);color:var(--dt-theme-topbar-button-color-foreground-hover)}.settings-menu-button[data-v-4ee1371d]:active{background-color:var(--dt-theme-topbar-button-color-background-active)}.settings-menu-button-update[data-v-4ee1371d]{background-color:hsla(var(--dt-color-blue-200-hsl) / 25%);color:var(--dt-color-blue-500);border-color:hsla(var(--dt-color-blue-200-hsl) / 25%);border-radius:var(--dt-size-radius-pill);height:var(--dt-size-600)}.settings-menu-button-update[data-v-4ee1371d]:hover{background-color:hsla(var(--dt-color-blue-200-hsl) / 50%);color:var(--dt-theme-topbar-button-color-foreground-hover)}.dt-time-pill{color:var(--dt-color-foreground-primary);border-radius:var(--dt-size-radius-pill);line-height:var(--dt-font-line-height-300);font-size:var(--dt-font-size-100);border:var(--dt-size-border-100) solid var(--dt-color-border-default);background-color:var(--dt-color-surface-primary);padding:var(--dt-space-300) var(--dt-space-500)}.dt-message-input--remaining-char-tooltip{margin-top:auto;margin-bottom:auto}.dt-message-input--remaining-char{font-size:1.2rem}.message-input-button__disabled{background-color:unset;color:var(--theme-sidebar-icon-color);cursor:default}.dt-message-input--cancel-button{margin-right:var(--dt-space-300)}.dt-recipe-feed-item-pill__wrapper[data-v-dab5b252]{background-color:var(--dt-color-surface-secondary);padding:var(--dt-space-400)}.dt-recipe-feed-item-pill__button[data-v-dab5b252]{background-color:var(--dt-color-surface-moderate);text-align:left;width:100%;cursor:pointer;border-width:0;border-radius:var(--dt-size-radius-600);--button-padding-x: var(--button-padding-y-md);--button-padding-y: var(--button-padding-y-md);--button-color-text: var(--dt-action-color-foreground-muted-default);--button-border-radius: var(--dt-size-radius-600)}.dt-recipe-feed-item-pill__layout[data-v-dab5b252]{padding:var(--dt-space-400);gap:var(--dt-space-300);width:100%}.dt-recipe-feed-item-pill__layout[data-v-dab5b252]>.dt-item-layout--left{padding-right:var(--dt-space-0);justify-content:center}.dt-recipe-feed-item-pill__icon[data-v-dab5b252]{animation:fade-dab5b252 .15s ease-in}.dt-recipe-feed-item-pill__content[data-v-dab5b252]{display:flex;justify-content:center}.dt-recipe-feed-item-pill__title[data-v-dab5b252]{font-weight:var(--dt-font-weight-bold)}.dt-recipe-feed-item-pill__border[data-v-dab5b252]{border:double 1px transparent;border-radius:var(--dt-size-radius-600);background-origin:border-box;background-clip:content-box,border-box;overflow:hidden}.dt-recipe-feed-item-pill__border-default[data-v-dab5b252]{background:var(--dt-color-border-default)}.dt-recipe-feed-item-pill__border-ai[data-v-dab5b252]{background-image:linear-gradient(var(--dt-color-surface-primary),var(--dt-color-surface-primary)),var(--dt-badge-color-background-ai)}.dt-recipe-feed-item-pill__border-critical[data-v-dab5b252]{background:var(--dt-color-foreground-critical)}@keyframes fade-dab5b252{0%{transform:scale(0)}to{transform:scale(1)}}.dt-feed-item-row[data-v-5d0ac8f1]{width:var(--dt-size-100-percent);box-sizing:border-box;position:relative;padding:var(--dt-space-300) var(--dt-space-500)}.dt-feed-item-row[data-v-5d0ac8f1]:focus-visible{box-shadow:var(--dt-shadow-focus-inset)}.dt-feed-item-row--state-searched[data-v-5d0ac8f1]{background-color:var(--dt-color-surface-warning-subtle)}.dt-feed-item-row--state-error[data-v-5d0ac8f1]{background-color:var(--dt-color-surface-critical-subtle)}.dt-feed-item-row--active[data-v-5d0ac8f1]{background-color:var(--dt-color-surface-secondary-opaque)}.dt-feed-item-row--state-transition[data-v-5d0ac8f1]{transition-duration:2s;transition-delay:0s;transition-timing-function:var(--ttf-in-out);transition-property:background-color}.dt-feed-item-row__avatar-container[data-v-5d0ac8f1]{padding-top:var(--dt-space-300);padding-bottom:var(--dt-space-300)}.dt-feed-item-row__content[data-v-5d0ac8f1]{padding-left:var(--dt-space-300)}.dt-feed-item-row__attachment[data-v-5d0ac8f1]{padding-top:var(--dt-space-200);padding-bottom:var(--dt-space-300)}.dt-feed-item-row__attachment[data-v-5d0ac8f1] .dt-feed-item-row__image{border:var(--dt-color-border-subtle) solid var(--dt-size-border-100);border-radius:var(--dt-size-radius-400);display:block;max-width:30rem;max-height:30rem;min-width:5.6rem;min-height:5.6rem}.dt-feed-item-row__attachment[data-v-5d0ac8f1] .dt-feed-item-row__video{display:block;height:25rem}.dt-feed-item-row__header[data-v-5d0ac8f1]{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--dt-space-300);font-size:var(--dt-font-size-200);line-height:var(--dt-font-line-height-300)}.dt-feed-item-row__header__name[data-v-5d0ac8f1]{font-weight:var(--dt-font-weight-bold)}.dt-feed-item-row__header__time[data-v-5d0ac8f1]{font-size:var(--dt-font-size-100);color:var(--dt-color-foreground-tertiary);flex-shrink:0}.dt-feed-item-row__reactions[data-v-5d0ac8f1]{display:flex;flex-wrap:wrap;padding-top:var(--dt-space-200);padding-bottom:var(--dt-space-200);padding-left:var(--dt-space-300)}.dt-feed-item-row__threading[data-v-5d0ac8f1]{padding-top:var(--dt-space-200);padding-bottom:var(--dt-space-200)}.dt-feed-item-row__left-time[data-v-5d0ac8f1]{color:var(--dt-color-foreground-tertiary);font-size:var(--dt-font-size-100);font-weight:var(--dt-font-weight-normal);vertical-align:middle;white-space:nowrap}.dt-feed-item-row__menu[data-v-5d0ac8f1]{position:absolute;top:var(--dt-space-550-negative);right:var(--dt-space-450)}.dt-feed-item-row[data-v-5d0ac8f1]>.dt-item-layout{font:var(--dt-typography-body-md-compact);min-height:initial;padding:0}.dt-feed-item-row[data-v-5d0ac8f1]>.dt-item-layout>.dt-item-layout--left{align-self:flex-start;text-align:end;display:block;padding-right:var(--dt-space-300);padding-left:var(--dt-space-0);min-width:calc(var(--dt-space-600) + var(--dt-space-300))}.dt-feed-item-row[data-v-5d0ac8f1]>.dt-item-layout>.dt-item-layout--right{padding:0;min-width:initial}.dt-feed-item-row[data-v-5d0ac8f1]>.dt-item-layout>.dt-item-layout--content>.dt-item-layout--bottom{display:flex;flex-direction:column;margin-top:0}.dt-emoji-row{display:flex;flex-wrap:wrap;gap:var(--dt-space-300)}.dt-emoji-row__tooltip{display:inline-block}.dt-emoji-row__reaction{--emoji-item-color-inset-shadow: transparent;--emoji-item-color-foreground: var(--dt-action-color-foreground-muted-default);--emoji-item-color-background: var(--dt-action-color-background-muted-hover);padding:var(--dt-space-300) var(--dt-space-400);border-radius:var(--dt-size-radius-pill);border:0;color:var(--emoji-item-color-foreground);background-color:var(--emoji-item-color-background);box-shadow:inset 0 0 0 var(--dt-size-border-150) var(--emoji-item-color-inset-shadow);height:var(--dt-size-550)}.dt-emoji-row__reaction.dt-emoji-row__picker{padding:var(--dt-space-200) var(--dt-space-350)}.dt-emoji-row__reaction:hover{--emoji-item-color-inset-shadow: var(--dt-color-border-subtle);--emoji-item-color-foreground: var(--dt-action-color-foreground-muted-hover)}.dt-emoji-row__reaction:active{--emoji-item-color-background: var(--dt-action-color-background-muted-active);--emoji-item-color-foreground: var(--dt-action-color-foreground-muted-active);transform:scale(.98)}.dt-emoji-row__reaction--selected{--emoji-item-color-inset-shadow: var(--dt-color-border-brand);--emoji-item-color-foreground: var(--dt-color-link-primary);--emoji-item-color-background: var(--dt-action-color-background-base-hover)}.dt-emoji-row__reaction--selected .dt-emoji-row__reaction-number{font-weight:var(--dt-font-weight-bold)}.dt-emoji-row__reaction--selected:hover{--emoji-item-color-inset-shadow: var(--dt-color-border-brand-strong);--emoji-item-color-foreground: var(--dt-color-link-primary-hover)}.dt-emoji-row__reaction--selected:active{--emoji-item-color-background: var(--dt-action-color-background-base-active)}.dt-emoji-row__emoji{margin-right:var(--dt-space-300);display:inline-flex}.dt-emoji-row__reaction-number{font-weight:var(--dt-typography-body-sm-font-weight);font-size:var(--dt-typography-body-sm-font-size);font-family:var(--dt-typography-body-sm-font-family);line-height:var(--dt-font-line-height-100);font-variant:tabular-nums}.dt-editor--top-bar-background{background-color:var(--dt-color-surface-secondary)}.dt-editor--button-group-divider{margin-left:var(--dt-space-400);height:calc(var(--dt-size-550) + var(--dt-size-300));width:var(--dt-size-100);background:var(--dt-color-border-subtle)}.progress-bar{width:var(--dt-size-550);height:var(--dt-size-550)}.progress-bar__circle{fill:none;stroke-width:2;stroke-dasharray:var(--stroke-dasharray)}.progress-bar__circle:nth-child(1){stroke-dashoffset:0;stroke:var(--dt-color-black-100)}.progress-bar__circle:nth-child(2){stroke-dashoffset:var(--stroke-dashoffset);stroke:var(--dt-color-purple-500);transition:stroke-dashoffset .5s linear}.dt-attachment-image{position:relative}.dt-attachment-image:focus-within .dt-attachment-image__close-button,.dt-attachment-image:hover .dt-attachment-image__close-button{opacity:1}.dt-attachment-image__image-viewer{height:var(--dt-size-700);width:var(--dt-size-700);border:var(--dt-space-100) solid;border-radius:var(--br4);border-width:var(--dt-size-350);border-color:var(--dt-color-border-subtle);object-fit:cover}.dt-attachment-image__top-right{position:absolute;top:var(--dt-size-100);right:var(--dt-size-100)}.dt-attachment-image__close-button{opacity:0;position:absolute;top:inherit;right:inherit;color:var(--dt-color-neutral-white);background-color:var(--dt-color-black-400);border:var(--dt-space-100) solid;border-width:var(--dt-size-200);border-color:var(--dt-color-neutral-white)}.dt-attachment-image__progress-bar{position:absolute;top:inherit;right:inherit;background-color:var(--dt-color-neutral-white);border-radius:50%;display:flex;transform:rotate(-90deg);border:var(--dt-space-100) solid;border-width:var(--dt-size-200);border-color:var(--dt-color-border-subtle)}.dt-attachment-carousel{position:relative;max-height:100px;width:var(--dt-space-1000)}.dt-attachment-carousel__media-list{display:flex;flex-direction:row;padding-left:0;overflow-x:scroll}.dt-attachment-carousel__media-list::-webkit-scrollbar{display:none}.dt-attachment-carousel__arrow{position:absolute;opacity:0;background-color:var(--dt-color-neutral-white);top:var(--dt-space-30-percent);border:var(--dt-space-100) solid;border-width:var(--dt-size-100);border-color:var(--bc-default)}.dt-attachment-carousel:hover .dt-attachment-carousel__arrow{opacity:1}.dt-attachment-carousel__arrow--left{left:var(--dt-space-300)}.dt-attachment-carousel__arrow--right{right:var(--dt-space-300)}.dt-attachment-carousel__image-viewer{height:var(--dt-size-700);width:var(--dt-size-700);border-radius:var(--br4);border:var(--dt-space-100) solid;border-width:var(--dt-size-350);border-color:var(--dt-color-border-subtle)}.combobox__input-wrapper[data-v-e8b2c5a4]{position:relative;display:block}.combobox__chip-wrapper[data-v-e8b2c5a4]{position:absolute;margin-left:var(--dt-space-200);margin-right:var(--dt-space-200);padding-left:var(--dt-space-100);max-width:calc(var(--dt-size-100-percent) - var(--dt-space-400))}.combobox__chip[data-v-e8b2c5a4]{margin-top:var(--dt-space-300);margin-left:var(--dt-space-200);margin-right:var(--dt-space-200);z-index:var(--zi-base1);max-width:var(--dt-size-100-percent)}.combobox__input[data-v-e8b2c5a4]{flex-grow:1}.combobox__list--loading[data-v-e8b2c5a4]{text-align:center;padding-top:var(--dt-space-500);padding-bottom:var(--dt-space-500)}.dt-grouped-chip{display:inline-flex;white-space:nowrap;background-color:unset;background-image:unset}.dt-chip-content{font-variant-numeric:tabular-nums}.dt-chip-content--left{border-top-left-radius:var(--dt-size-radius-pill);border-bottom-left-radius:var(--dt-size-radius-pill);background-color:var(--dt-color-surface-moderate-opaque);max-width:var(--dt-size-730)}.dt-chip-content--right{border-top-right-radius:var(--dt-size-radius-pill);border-bottom-right-radius:var(--dt-size-radius-pill);background-color:var(--dt-color-purple-200);max-width:var(--dt-size-730)}.ivr_node{width:280px;display:flex;flex-direction:column;align-items:center;cursor:pointer}.ivr_node__header-left{display:flex;align-items:center}.ivr_node__label{font-size:var(--dt-font-size-200);font-weight:var(--dt-font-weight-bold)}.ivr_node__dropdown-list{width:var(--dt-size-825)}.ivr_node__goto_icon{transform:rotate(90deg)}.ivr-connector{z-index:var(--zi-base);display:flex;justify-content:center;align-items:center;border-color:var(--dt-color-purple-600);background-color:var(--dt-color-purple-600);width:var(--dt-size-400);height:var(--dt-size-400);border-radius:var(--dt-size-radius-circle);margin-bottom:var(--dt-space-300-negative)}.ivr-connector--selected{margin-bottom:var(--dt-space-400-negative)}.ivr-connector.ivr-connector--dtmf{width:var(--dt-size-550);height:var(--dt-size-550);margin-bottom:var(--dt-space-450-negative);color:var(--dt-color-neutral-white);font-size:var(--dt-font-size-200)}.ivr-connector.ivr-connector--dtmf--selected{margin-bottom:var(--dt-space-500-negative)}.dt-recipe-callbar-button:not(.dt-recipe-callbar-button--circle){line-height:var(--dt-font-line-height-300)}.dt-recipe-callbar-button--circle{border-radius:var(--dt-size-radius-circle)}.dt-recipe-callbar-button.d-btn[disabled]{background-color:unset;opacity:.5}.dt-recipe-callbar-button--circle.d-btn[disabled]{border-color:unset}.dt-recipe-callbar-button--active .base-button__icon,.dt-recipe-callbar-button--active:hover .base-button__icon{color:var(--primary-color)}.dt-recipe-callbar-button--disabled{cursor:not-allowed}.dt-recipe--callbar-button-with-popover--arrow{margin-top:var(--dt-space-350-negative);margin-left:calc(var(--dt-space-300-negative) * 5);width:var(--dt-size-500);height:var(--dt-size-500);padding:var(--dt-space-400);border-radius:var(--dt-size-300)}.dt-recipe--callbar-button-with-popover--arrow.d-btn--active{background:var(--dt-color-surface-moderate-opaque)}.dt-recipe--callbar-button-with-popover--arrow--large{margin-left:var(--dt-space-550-negative)}.dt-recipe--callbar-button-with-popover--arrow__icon{color:var(--dt-color-black-800)}.dt-recipe--callbar-button-with-popover--popover .d-popover__header{background:var(--dt-color-surface-contrast);color:var(--dt-color-foreground-primary-inverted)}.dt-recipe--callbar-button-with-popover--popover .d-popover__header .d-btn{color:var(--dt-color-foreground-primary-inverted)}.dt-recipe--callbar-button-with-popover--button .d-tab--selected:after,.dt-recipe--callbar-button-with-popover--button .d-tab--selected:hover:after{--tab--bgc: var(--dt-color-surface-contrast)}.dt-recipe--callbar-button-with-popover--button .tab-group{display:flex;flex-direction:column;height:100%}.dt-recipe--callbar-button-with-popover--button .tab-content{flex:1 1 100%;overflow-y:auto}.dt-recipe--callbar-button-with-popover{display:flex;align-items:center}