@dialpad/dialtone-vue 2.159.0-beta.1 → 2.159.0

package/dist/style.css

@@ -359,11 +359,11 @@
   background-color: var(--dt-color-purple-200);
   max-width: var(--dt-size-730);
 }
-.combobox__input-wrapper[data-v-a66c77a1] {
+.combobox__input-wrapper[data-v-8e1c26f6] {
   position: relative;
   display: block;
 }
-.combobox__chip-wrapper[data-v-a66c77a1] {
+.combobox__chip-wrapper[data-v-8e1c26f6] {
   position: absolute;
   margin-left: var(--dt-space-200);
   margin-right: var(--dt-space-200);
@@ -372,26 +372,26 @@
   max-height: initial;
   overflow-y: visible;
 }
-.combobox__chip-wrapper-md--collapsed[data-v-a66c77a1] {
+.combobox__chip-wrapper-md--collapsed[data-v-8e1c26f6] {
   max-height: 2.8rem;
   overflow-y: hidden;
 }
-.combobox__chip-wrapper-sm--collapsed[data-v-a66c77a1],
-.combobox__chip-wrapper-xs--collapsed[data-v-a66c77a1] {
+.combobox__chip-wrapper-sm--collapsed[data-v-8e1c26f6],
+.combobox__chip-wrapper-xs--collapsed[data-v-8e1c26f6] {
   max-height: 2.5rem;
   overflow-y: hidden;
 }
-.combobox__chip[data-v-a66c77a1] {
+.combobox__chip[data-v-8e1c26f6] {
   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-a66c77a1] {
+.combobox__input[data-v-8e1c26f6] {
   flex-grow: 1;
 }
-.combobox__list--loading[data-v-a66c77a1] {
+.combobox__list--loading[data-v-8e1c26f6] {
   text-align: center;
   padding-top: var(--dt-space-500);
   padding-bottom: var(--dt-space-500);
@@ -814,7 +814,7 @@
   background-color: var(--dt-color-surface-primary);
   padding: var(--dt-space-300) var(--dt-space-500);
 }
-.settings-menu-button[data-v-be46bf19] {
+.settings-menu-button[data-v-4ee1371d] {
   padding: var(--dt-space-0);
   border-radius: var(--dt-size-550);
   height: var(--dt-size-600);
@@ -822,21 +822,21 @@
   color: var(--dt-theme-topbar-button-color-foreground);
   background-color: var(--dt-theme-topbar-button-color-background);
 }
-.settings-menu-button[data-v-be46bf19]:hover {
+.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-be46bf19]:active {
+.settings-menu-button[data-v-4ee1371d]:active {
   background-color: var(--dt-theme-topbar-button-color-background-active);
 }
-.settings-menu-button-update[data-v-be46bf19] {
+.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-be46bf19]:hover {
+.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);
 }
@@ -1283,7 +1283,7 @@
 }
 }
 /* stylelint-disable selector-pseudo-class-no-unknown */
-.dt-leftbar-row[data-v-5a114d36] {
+.dt-leftbar-row[data-v-f626c1e7] {
   --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);
@@ -1314,49 +1314,49 @@
   transition-duration: var(--td200);
   transition-property: background-color, border, box-shadow;
 }
-.dt-leftbar-row[data-v-5a114d36]:not(.dt-leftbar-row--no-action):hover,
-.dt-leftbar-row[data-v-5a114d36]:not(.dt-leftbar-row--no-action):focus-within {
+.dt-leftbar-row[data-v-f626c1e7]:not(.dt-leftbar-row--no-action):hover,
+.dt-leftbar-row[data-v-f626c1e7]:not(.dt-leftbar-row--no-action):focus-within {
   --leftbar-row-unread-badge-display: none;
 }
-.dt-leftbar-row[data-v-5a114d36]:not(.dt-leftbar-row--no-action):hover .dt-leftbar-row__action,
-.dt-leftbar-row[data-v-5a114d36]:not(.dt-leftbar-row--no-action):focus-within .dt-leftbar-row__action {
+.dt-leftbar-row[data-v-f626c1e7]:not(.dt-leftbar-row--no-action):hover .dt-leftbar-row__action,
+.dt-leftbar-row[data-v-f626c1e7]:not(.dt-leftbar-row--no-action):focus-within .dt-leftbar-row__action {
   display: inline-flex;
 }
-.dt-leftbar-row[data-v-5a114d36]:not(.dt-leftbar-row--no-action):hover .dt-leftbar-row__action-button,
-.dt-leftbar-row[data-v-5a114d36]:not(.dt-leftbar-row--no-action):focus-within .dt-leftbar-row__action-button {
+.dt-leftbar-row[data-v-f626c1e7]:not(.dt-leftbar-row--no-action):hover .dt-leftbar-row__action-button,
+.dt-leftbar-row[data-v-f626c1e7]:not(.dt-leftbar-row--no-action):focus-within .dt-leftbar-row__action-button {
   opacity: 1;
 }
-.dt-leftbar-row[data-v-5a114d36]:hover,
-.dt-leftbar-row[data-v-5a114d36]:focus-within {
+.dt-leftbar-row[data-v-f626c1e7]:hover,
+.dt-leftbar-row[data-v-f626c1e7]:focus-within {
   --leftbar-row-color-background: var(--dt-theme-sidebar-row-color-background-hover);
 }
-.dt-leftbar-row[data-v-5a114d36]:hover .d-presence,
-.dt-leftbar-row[data-v-5a114d36]:focus-within .d-presence {
+.dt-leftbar-row[data-v-f626c1e7]:hover .d-presence,
+.dt-leftbar-row[data-v-f626c1e7]:focus-within .d-presence {
   --presence-color-border-base: var(--dt-color-black-200);
 }
-.dt-leftbar-row[data-v-5a114d36]:hover .d-avatar__count,
-.dt-leftbar-row[data-v-5a114d36]:focus-within .d-avatar__count {
+.dt-leftbar-row[data-v-f626c1e7]:hover .d-avatar__count,
+.dt-leftbar-row[data-v-f626c1e7]:focus-within .d-avatar__count {
   --avatar-count-color-shadow: var(--dt-theme-sidebar-selected-row-color-background);
 }
-.dt-leftbar-row--has-unread[data-v-5a114d36] {
+.dt-leftbar-row--has-unread[data-v-f626c1e7] {
   --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--muted[data-v-5a114d36] {
+.dt-leftbar-row--muted[data-v-f626c1e7] {
   --leftbar-row-opacity: 60%;
 }
-.dt-leftbar-row--selected[data-v-5a114d36] {
+.dt-leftbar-row--selected[data-v-f626c1e7] {
   --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-5a114d36] .d-presence {
+.dt-leftbar-row--selected[data-v-f626c1e7] .d-presence {
   --presence-color-border-base: var(--dt-color-black-200);
 }
-.dt-leftbar-row--selected[data-v-5a114d36] .d-avatar__count {
+.dt-leftbar-row--selected[data-v-f626c1e7] .d-avatar__count {
   --avatar-count-color-shadow: var(--dt-theme-sidebar-selected-row-color-background);
 }
-.dt-leftbar-row__is-typing[data-v-5a114d36] {
+.dt-leftbar-row__is-typing[data-v-f626c1e7] {
   --is-typing-size-shape: var(--dt-size-550);
   position: absolute;
   display: flex;
@@ -1368,7 +1368,7 @@
   border-radius: var(--dt-size-radius-pill);
   opacity: 0.75;
 }
-.dt-leftbar-row__is-typing span[data-v-5a114d36] {
+.dt-leftbar-row__is-typing span[data-v-f626c1e7] {
   display: inline-block;
   width: var(--dt-size-300);
   height: var(--dt-size-300);
@@ -1377,18 +1377,18 @@
   border-radius: var(--dt-size-radius-pill);
   opacity: 0.3;
   transition: all 500ms ease;
-  animation: wave-5a114d36 1.5s ease infinite;
+  animation: wave-f626c1e7 1.5s ease infinite;
 }
-.dt-leftbar-row__is-typing span[data-v-5a114d36]:nth-child(1) {
+.dt-leftbar-row__is-typing span[data-v-f626c1e7]:nth-child(1) {
   animation-delay: 0ms;
 }
-.dt-leftbar-row__is-typing span[data-v-5a114d36]:nth-child(2) {
+.dt-leftbar-row__is-typing span[data-v-f626c1e7]:nth-child(2) {
   animation-delay: var(--td100);
 }
-.dt-leftbar-row__is-typing span[data-v-5a114d36]:nth-child(3) {
+.dt-leftbar-row__is-typing span[data-v-f626c1e7]:nth-child(3) {
   animation-delay: var(--td200);
 }
-.dt-leftbar-row__primary[data-v-5a114d36] {
+.dt-leftbar-row__primary[data-v-f626c1e7] {
   display: flex;
   flex: 1;
   align-items: center;
@@ -1405,18 +1405,18 @@
   border-radius: var(--leftbar-row-radius);
   appearance: none;
 }
-.dt-leftbar-row__primary[data-v-5a114d36]:active {
+.dt-leftbar-row__primary[data-v-f626c1e7]:active {
   --leftbar-row-color-background: var(--dt-theme-sidebar-row-color-background-active);
 }
-.dt-leftbar-row__primary[data-v-5a114d36]:focus-visible {
+.dt-leftbar-row__primary[data-v-f626c1e7]:focus-visible {
   box-shadow: var(--dt-shadow-focus-inset);
 }
-.dt-leftbar-row__action-button[data-v-5a114d36] {
+.dt-leftbar-row__action-button[data-v-f626c1e7] {
   width: var(--leftbar-row-action-width);
   height: var(--leftbar-row-action-height);
   opacity: 0;
 }
-.dt-leftbar-row__alpha[data-v-5a114d36] {
+.dt-leftbar-row__alpha[data-v-f626c1e7] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1428,11 +1428,11 @@
   color: var(--leftbar-row-alpha-color-foreground);
   border-radius: var(--leftbar-row-radius) 0 0 var(--leftbar-row-radius);
 }
-.dt-leftbar-row__label[data-v-5a114d36] {
+.dt-leftbar-row__label[data-v-f626c1e7] {
   flex: 0 1;
   min-width: 0;
 }
-.dt-leftbar-row__omega[data-v-5a114d36] {
+.dt-leftbar-row__omega[data-v-f626c1e7] {
   position: absolute;
   top: var(--leftbar-row-action-position-bottom);
   right: var(--leftbar-row-action-position-right);
@@ -1444,34 +1444,34 @@
   border-radius: var(--leftbar-row-radius);
   transform: translateY(calc(var(--leftbar-row-action-position-bottom) * -1));
 }
-.dt-leftbar-row__unread-badge[data-v-5a114d36] {
+.dt-leftbar-row__unread-badge[data-v-f626c1e7] {
   display: var(--leftbar-row-unread-badge-display);
   color: var(--dt-theme-mention-color-foreground);
   background-color: var(--dt-theme-mention-color-background);
 }
-.dt-leftbar-row--unread-count[data-v-5a114d36] .dt-leftbar-row__action {
+.dt-leftbar-row--unread-count[data-v-f626c1e7] .dt-leftbar-row__action {
   display: none;
 }
-.dt-leftbar-row__unread-count-badge[data-v-5a114d36] {
+.dt-leftbar-row__unread-count-badge[data-v-f626c1e7] {
   border-top-right-radius: var(--dt-size-radius-0);
   border-bottom-right-radius: var(--dt-size-radius-0);
 }
-.dt-leftbar-row__unread-mention-count-badge[data-v-5a114d36] {
+.dt-leftbar-row__unread-mention-count-badge[data-v-f626c1e7] {
   color: var(--dt-theme-mention-color-foreground-strong);
   background-color: var(--dt-theme-mention-color-background-strong);
   border-top-left-radius: var(--dt-size-radius-0);
   border-bottom-left-radius: var(--dt-size-radius-0);
 }
-.dt-leftbar-row__unread-mention-only-count-badge[data-v-5a114d36] {
+.dt-leftbar-row__unread-mention-only-count-badge[data-v-f626c1e7] {
   color: var(--dt-theme-mention-color-foreground-strong);
   background-color: var(--dt-theme-mention-color-background-strong);
 }
-.dt-leftbar-row__active-voice[data-v-5a114d36] {
+.dt-leftbar-row__active-voice[data-v-f626c1e7] {
   display: inline-flex;
   color: var(--dt-color-purple-400);
-  -webkit-animation-name: opacity-pulsate-5a114d36;
-  -moz-animation-name: opacity-pulsate-5a114d36;
-  animation-name: opacity-pulsate-5a114d36;
+  -webkit-animation-name: opacity-pulsate-f626c1e7;
+  -moz-animation-name: opacity-pulsate-f626c1e7;
+  animation-name: opacity-pulsate-f626c1e7;
   -webkit-animation-duration: 1s;
   -moz-animation-duration: 1s;
   animation-duration: 1s;
@@ -1482,7 +1482,7 @@
   -moz-animation-fill-mode: both;
   animation-fill-mode: both;
 }
-.dt-leftbar-row__dnd[data-v-5a114d36] {
+.dt-leftbar-row__dnd[data-v-f626c1e7] {
   padding-top: var(--dt-space-200);
   padding-right: var(--dt-space-300);
   color: var(--dt-color-foreground-tertiary);
@@ -1490,26 +1490,26 @@
   font-size: var(--dt-font-size-100);
   line-height: var(--dt-font-line-height-400);
 }
-.dt-leftbar-row__container--off-duty[data-v-5a114d36] {
+.dt-leftbar-row__container--off-duty[data-v-f626c1e7] {
   background-color: var(--dt-badge-color-background-critical);
   border: var(--dt-size-100) solid var(--dt-color-border-subtle);
   border-radius: var(--dt-size-radius-500);
 }
-.dt-leftbar-row__container--off-duty[data-v-5a114d36] .dt-leftbar-row__primary {
+.dt-leftbar-row__container--off-duty[data-v-f626c1e7] .dt-leftbar-row__primary {
   margin: calc(var(--dt-size-100) * -1);
 }
-.dt-leftbar-row--contact-centers[data-v-5a114d36] .dt-leftbar-row__alpha {
+.dt-leftbar-row--contact-centers[data-v-f626c1e7] .dt-leftbar-row__alpha {
   padding-right: var(--dt-space-450);
   padding-left: var(--dt-space-450);
 }
-.dt-leftbar-row--contact-centers .dt-leftbar-row__action-container[data-v-5a114d36] {
+.dt-leftbar-row--contact-centers .dt-leftbar-row__action-container[data-v-f626c1e7] {
   display: inline-flex;
   align-items: center;
   justify-content: flex-end;
   min-width: var(--dt-size-600);
   height: var(--dt-size-500);
 }
-.dt-leftbar-row[data-v-5a114d36] .dt-leftbar-row__description {
+.dt-leftbar-row[data-v-f626c1e7] .dt-leftbar-row__description {
   overflow: hidden;
   color: var(--leftbar-row-description-color-foreground);
   font-weight: var(--leftbar-row-description-font-weight);
@@ -1518,7 +1518,7 @@
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-.dt-leftbar-row[data-v-5a114d36] .dt-leftbar-row__status {
+.dt-leftbar-row[data-v-f626c1e7] .dt-leftbar-row__status {
   padding-bottom: var(--dt-space-100);
   overflow: hidden;
   color: var(--leftbar-row-status-color-foreground);
@@ -1527,19 +1527,19 @@
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-.dt-leftbar-row[data-v-5a114d36] .dt-leftbar-row__meta-context ~ .dt-leftbar-row__meta-custom:not(:empty)::before {
+.dt-leftbar-row[data-v-f626c1e7] .dt-leftbar-row__meta-context ~ .dt-leftbar-row__meta-custom:not(:empty)::before {
   color: var(--dt-theme-sidebar-status-color-foreground);
   content: " • ";
 }
-.dt-leftbar-row__icon-cc[data-v-5a114d36] {
+.dt-leftbar-row__icon-cc[data-v-f626c1e7] {
   width: calc(var(--dt-size-300) * 3.5);
   height: calc(var(--dt-size-300) * 3.5);
   border-radius: var(--dt-size-200);
 }
-.opacity-pulsate[data-v-5a114d36] {
-  -webkit-animation-name: opacity-pulsate-5a114d36;
-  -moz-animation-name: opacity-pulsate-5a114d36;
-  animation-name: opacity-pulsate-5a114d36;
+.opacity-pulsate[data-v-f626c1e7] {
+  -webkit-animation-name: opacity-pulsate-f626c1e7;
+  -moz-animation-name: opacity-pulsate-f626c1e7;
+  animation-name: opacity-pulsate-f626c1e7;
   -webkit-animation-duration: 1s;
   -moz-animation-duration: 1s;
   animation-duration: 1s;
@@ -1550,7 +1550,7 @@
   -moz-animation-fill-mode: both;
   animation-fill-mode: both;
 }
-@keyframes opacity-pulsate-5a114d36 {
+@keyframes opacity-pulsate-f626c1e7 {
 0%,
   100% {
     opacity: 0.2;
@@ -1559,7 +1559,7 @@
     opacity: 1;
 }
 }
-@keyframes opacity-pulsate-5a114d36 {
+@keyframes opacity-pulsate-f626c1e7 {
 0%,
   100% {
     opacity: 0.2;
@@ -1568,7 +1568,7 @@
     opacity: 1;
 }
 }
-@keyframes opacity-pulsate-5a114d36 {
+@keyframes opacity-pulsate-f626c1e7 {
 0%,
   100% {
     opacity: 0.2;
@@ -1577,7 +1577,7 @@
     opacity: 1;
 }
 }
-@keyframes wave-5a114d36 {
+@keyframes wave-f626c1e7 {
 0%,
   50%,
   100% {

package/dist/types/common/sr_only_close_button.vue.d.ts

@@ -9,7 +9,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {}, {}, {}, {
     close(): void;
-}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, "close"[], string, Readonly<import("vue").ExtractPropTypes<{
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "close"[], string, Readonly<import("vue").ExtractPropTypes<{
     /**
      * Label for the visually hidden close button
      * Required if visuallyHiddenClose is set to `true`

package/dist/types/components/avatar/avatar.vue.d.ts

@@ -200,7 +200,7 @@ declare const _default: import("vue").DefineComponent<{
     _erroredImageEventHandler(el: any): void;
     validateProps(): void;
     handleClick(e: any): void;
-}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, "click"[], string, Readonly<import("vue").ExtractPropTypes<{
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], string, Readonly<import("vue").ExtractPropTypes<{
     /**
      * Id of the avatar content wrapper element
      */

package/dist/types/components/badge/badge.vue.d.ts

@@ -1,4 +1,21 @@
 declare const _default: import("vue").DefineComponent<{
+    /**
+     * Icon on the left side of the badge. Supports any valid icon name from the icon catalog at
+     * https://dialtone.dialpad.com/components/icon.html#icon-catalog. If type:'ai' is set, the ai icon
+     * will automatically be shown here, but this can be overridden by setting this prop.
+     */
+    iconLeft: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Icon on the right side of the badge. Supports any valid icon name from the icon catalog at
+     * https://dialtone.dialpad.com/components/icon.html#icon-catalog
+     */
+    iconRight: {
+        type: StringConstructor;
+        default: string;
+    };
     /**
      * Text for the badge content
      */
@@ -26,7 +43,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     /**
      * Decoration for the badge. This can be only used with kind: label and type: default
-     * with no left and right icons
+     * with no iconLeft and iconRight
      * @values default, black-400, black-500, black-900, red-200, red-300, red-400, purple-200,
      * purple-300, purple-400, purple-500, blue-200, blue-300, blue-400, green-300, green-400,
      * green-500, gold-300, gold-400, gold-500, magenta-200, magenta-300, magenta-400
@@ -76,28 +93,23 @@ declare const _default: import("vue").DefineComponent<{
         'black-400': string;
         'black-500': string;
         'black-900': string;
+        /**
+         * Icon on the left side of the badge. Supports any valid icon name from the icon catalog at
+         * https://dialtone.dialpad.com/components/icon.html#icon-catalog. If type:'ai' is set, the ai icon
+         * will automatically be shown here, but this can be overridden by setting this prop.
+         */
         'red-200': string;
         'red-300': string;
         'red-400': string;
         'purple-200': string;
         'purple-300': string;
         'purple-400': string;
-        /**
-         * Color for the badge background
-         * @values default, info, success, warning, critical, bulletin, ai
-         */
         'purple-500': string;
         'blue-200': string;
         'blue-300': string;
         'blue-400': string;
         'green-300': string;
-        'green-400': string; /**
-         * Decoration for the badge. This can be only used with kind: label and type: default
-         * with no left and right icons
-         * @values default, black-400, black-500, black-900, red-200, red-300, red-400, purple-200,
-         * purple-300, purple-400, purple-500, blue-200, blue-300, blue-400, green-300, green-400,
-         * green-500, gold-300, gold-400, gold-500, magenta-200, magenta-300, magenta-400
-         */
+        'green-400': string;
         'green-500': string;
         'gold-300': string;
         'gold-400': string;
@@ -107,14 +119,29 @@ declare const _default: import("vue").DefineComponent<{
         'magenta-400': string;
     };
 }, {
-    hasLeftIcon(): import("vue/types/vnode.js").ScopedSlotChildren;
-    hasRightIcon(): import("vue/types/vnode.js").ScopedSlotChildren;
-    hasIcons(): import("vue/types/vnode.js").ScopedSlotChildren;
+    hasIcons(): boolean;
 }, {
     validateProps(): void;
     validateTypePropCombination(): void;
     validateDecorationPropCombination(): void;
-}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * Icon on the left side of the badge. Supports any valid icon name from the icon catalog at
+     * https://dialtone.dialpad.com/components/icon.html#icon-catalog. If type:'ai' is set, the ai icon
+     * will automatically be shown here, but this can be overridden by setting this prop.
+     */
+    iconLeft: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Icon on the right side of the badge. Supports any valid icon name from the icon catalog at
+     * https://dialtone.dialpad.com/components/icon.html#icon-catalog
+     */
+    iconRight: {
+        type: StringConstructor;
+        default: string;
+    };
     /**
      * Text for the badge content
      */
@@ -142,7 +169,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     /**
      * Decoration for the badge. This can be only used with kind: label and type: default
-     * with no left and right icons
+     * with no iconLeft and iconRight
      * @values default, black-400, black-500, black-900, red-200, red-300, red-400, purple-200,
      * purple-300, purple-400, purple-500, blue-200, blue-300, blue-400, green-300, green-400,
      * green-500, gold-300, gold-400, gold-500, magenta-200, magenta-300, magenta-400
@@ -177,6 +204,8 @@ declare const _default: import("vue").DefineComponent<{
 }>>, {
     type: string;
     text: string;
+    iconLeft: string;
+    iconRight: string;
     kind: string;
     decoration: string;
     labelClass: string | Record<string, any> | unknown[];

package/dist/types/components/badge/badge.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"badge.vue.d.ts","sourceRoot":"","sources":["../../../../components/badge/badge.vue.js"],"names":[],"mappings":";IAaI;;OAEG;;;;;IAMH;;;OAGG;;;;;;IAOH;;;OAGG;;;;;;IAOH;;;;;;OAMG;;;;;;IAOH;;OAEG;;;;;IAMH;;;OAGG;;;;;IAMH;;OAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QA1CH;;;WAGG;;;;;;6BAOH;;;;;;WAMG;;;;;;;;;;;;;;;;;;IAlCH;;OAEG;;;;;IAMH;;;OAGG;;;;;;IAOH;;;OAGG;;;;;;IAOH;;;;;;OAMG;;;;;;IAOH;;OAEG;;;;;IAMH;;;OAGG;;;;;IAMH;;OAEG"}
+{"version":3,"file":"badge.vue.d.ts","sourceRoot":"","sources":["../../../../components/badge/badge.vue.js"],"names":[],"mappings":";IAkBI;;;;OAIG;;;;;IAMH;;;OAGG;;;;;IAMH;;OAEG;;;;;IAMH;;;OAGG;;;;;;IAOH;;;OAGG;;;;;;IAOH;;;;;;OAMG;;;;;;IAOH;;OAEG;;;;;IAMH;;;OAGG;;;;;IAMH;;OAEG;;;;;;;;;;;;;;;;;;;;;;;QA/EH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAJH;;;;OAIG;;;;;IAMH;;;OAGG;;;;;IAMH;;OAEG;;;;;IAMH;;;OAGG;;;;;;IAOH;;;OAGG;;;;;;IAOH;;;;;;OAMG;;;;;;IAOH;;OAEG;;;;;IAMH;;;OAGG;;;;;IAMH;;OAEG"}

package/dist/types/components/banner/banner.vue.d.ts

@@ -146,7 +146,7 @@ declare const _default: import("vue").DefineComponent<{
         _getFocusableElements(el?: object, includeNegativeTabIndex?: bool): any[];
         focusTrappedTabPress(e: object, el: object): void;
     };
-}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, "close"[], string, Readonly<import("vue").ExtractPropTypes<{
+}, import("vue").ComponentOptionsMixin, "close"[], string, Readonly<import("vue").ExtractPropTypes<{
     /**
      * Sets an ID on the title element of the component. Useful for aria-describedby
      * or aria-labelledby or any other reason you may need an id to refer to the title.

package/dist/types/components/breadcrumbs/breadcrumb_item.vue.d.ts

@@ -26,7 +26,7 @@ declare const _default: import("vue").DefineComponent<{
     linkKind(): "" | "muted";
     linkInverted(): boolean;
     ariaCurrent(): "location" | undefined;
-}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
     /**
      * Passed through to link. If true, applies inverted styles to the link.
      */

package/dist/types/components/breadcrumbs/breadcrumbs.vue.d.ts

@@ -26,7 +26,7 @@ declare const _default: import("vue").DefineComponent<{
     BREADCRUMBS_INVERTED_MODIFIER: string;
 }, {}, {
     getBreadcrumbItemKey(index: any): string;
-}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
     /**
      * A provided list of breadcrumbs. Overridden by default slot
      */

package/dist/types/components/button/button.vue.d.ts

@@ -159,7 +159,7 @@ declare const _default: import("vue").DefineComponent<{
     shouldRenderIcon(): boolean | undefined;
     isIconOnly(): boolean | undefined;
     isVerticalIconLayout(): boolean;
-}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, ("click" | "focusin" | "focusout")[], string, Readonly<import("vue").ExtractPropTypes<{
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "focusin" | "focusout")[], string, Readonly<import("vue").ExtractPropTypes<{
     /**
      * Whether the button is a circle or not.
      * @values true, false

package/dist/types/components/button_group/button_group.vue.d.ts

@@ -13,7 +13,7 @@ declare const _default: import("vue").DefineComponent<{
         end: string;
         'space-between': string;
     };
-}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
     /**
      * Alignment of the buttons inside the container
      */

package/dist/types/components/button_group/buttons_decorator.vue.d.ts

@@ -1,3 +1,3 @@
-declare const _default: import("vue").DefineComponent<{}, any, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+declare const _default: import("vue").DefineComponent<{}, any, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
 export default _default;
 //# sourceMappingURL=buttons_decorator.vue.d.ts.map

package/dist/types/components/card/card.vue.d.ts

@@ -35,7 +35,7 @@ declare const _default: import("vue").DefineComponent<{
         type: (ObjectConstructor | StringConstructor | ArrayConstructor)[];
         default: string;
     };
-}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
     /**
      * The maximum height of the card content.
      * If given, makes content area scrollable.

package/dist/types/components/checkbox/checkbox.vue.d.ts

@@ -150,6 +150,6 @@ declare const _default: import("vue").DefineComponent<{}, any, {}, {
     computed: {
         formattedMessages(): any;
     };
-}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, ("input" | "focusin" | "focusout")[], string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+}, import("vue").ComponentOptionsMixin, ("input" | "focusin" | "focusout")[], string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
 export default _default;
 //# sourceMappingURL=checkbox.vue.d.ts.map

package/dist/types/components/checkbox_group/checkbox_group.vue.d.ts

@@ -44,7 +44,7 @@ declare const _default: import("vue").DefineComponent<{
 }, {}, {
     setGroupValue(value: any, checked: any): void;
     getMessageKey(type: any, index: any): any;
-}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue").DefineComponent<{
+}, import("vue").ComponentOptionsMixin, import("vue").DefineComponent<{
     dataQaGroup: {
         type: StringConstructor;
         default: string;
@@ -90,7 +90,7 @@ declare const _default: import("vue").DefineComponent<{
         }, {
             getMessageKey(type: any, index: any): string;
             messageTypeClass(type: any): any;
-        }, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+        }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
             id: {
                 type: StringConstructor;
                 default(): string;
@@ -183,7 +183,7 @@ declare const _default: import("vue").DefineComponent<{
         setGroupValue(newValue: any): void;
     };
     mounted(): void;
-}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, "input"[], string, Readonly<import("vue").ExtractPropTypes<{
+}, import("vue").ComponentOptionsMixin, "input"[], string, Readonly<import("vue").ExtractPropTypes<{
     dataQaGroup: {
         type: StringConstructor;
         default: string;

package/dist/types/components/checkbox_group/checkboxes_decorator.vue.d.ts

@@ -1,3 +1,3 @@
-declare const _default: import("vue").DefineComponent<{}, any, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+declare const _default: import("vue").DefineComponent<{}, any, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
 export default _default;
 //# sourceMappingURL=checkboxes_decorator.vue.d.ts.map

package/dist/types/components/chip/chip.vue.d.ts

@@ -76,7 +76,7 @@ declare const _default: import("vue").DefineComponent<{
     chipClasses(): any[];
     chipCloseButtonClasses(): any[];
     onClose(): void;
-}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, ("close" | "click" | "keyup")[], string, Readonly<import("vue").ExtractPropTypes<{
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "click" | "keyup")[], string, Readonly<import("vue").ExtractPropTypes<{
     /**
      * A set of props to be passed into the modal's close button. Requires an 'ariaLabel' property.
      */

package/dist/types/components/codeblock/codeblock.vue.d.ts

@@ -3,7 +3,7 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         required: true;
     };
-}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
     text: {
         type: StringConstructor;
         required: true;