@dialpad/dialtone 9.66.0 → 9.67.0

package/dist/vue2/lib/feed-pill.cjs

@@ -5,7 +5,7 @@ const lib_itemLayout = require("./item-layout.cjs");
 const lib_icon = require("./icon.cjs");
 const lib_collapsible = require("./collapsible.cjs");
 require("@dialpad/dialtone-icons/vue2");
-require("../chunks/icon_constants-VEA0wI5C.js");
+require("../chunks/icon_constants-QYpmdE0R.js");
 require("@dialpad/dialtone-icons/icons.json");
 require("../common/utils.cjs");
 require("../common/constants.cjs");
@@ -20,11 +20,7 @@ const FEED_ITEM_PILL_BORDER_COLORS = {
 };
 const _sfc_main = {
   name: "DtRecipeFeedItemPill",
-  components: {
-    DtItemLayout: lib_itemLayout.DtItemLayout,
-    DtIcon: lib_icon.DtIcon,
-    DtCollapsible: lib_collapsible.DtCollapsible
-  },
+  components: { DtItemLayout: lib_itemLayout.DtItemLayout, DtIcon: lib_icon.DtIcon, DtCollapsible: lib_collapsible.DtCollapsible },
   props: {
     /**
      * Accepts a DtIcon name to be shown in the left
@@ -113,92 +109,41 @@ const _sfc_main = {
 };
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c("div", {
-    class: ["dt-recipe-feed-item-pill__border", _vm.borderClass, _vm.wrapperClass]
-  }, [_c("div", {
-    staticClass: "dt-recipe-feed-item-pill__wrapper"
-  }, [_c("dt-collapsible", {
-    attrs: {
-      "open": _vm.expanded
-    },
-    scopedSlots: _vm._u([{
-      key: "anchor",
-      fn: function() {
-        return [_c("button", {
-          class: ["dt-recipe-feed-item-pill__button", _vm.toggleableClass, _vm.buttonClass],
-          attrs: {
-            "data-qa": "dt-recipe-feed-item-pill",
-            "aria-label": _vm.ariaLabel
-          },
-          on: {
-            "focusin": function($event) {
-              _vm.hover = true;
-            },
-            "focusout": function($event) {
-              _vm.hover = false;
-            },
-            "mouseenter": function($event) {
-              _vm.hover = true;
-            },
-            "mouseleave": function($event) {
-              _vm.hover = false;
-            },
-            "click": _vm.onClick
-          }
-        }, [_c("dt-item-layout", {
-          staticClass: "dt-recipe-feed-item-pill__layout",
-          scopedSlots: _vm._u([{
-            key: "left",
-            fn: function() {
-              return [_c("dt-icon", {
-                staticClass: "dt-recipe-feed-item-pill__icon",
-                attrs: {
-                  "data-qa": "dt-recipe-feed-item-pill__icon",
-                  "size": "300",
-                  "name": _vm.computedIcon
-                }
-              })];
-            },
-            proxy: true
-          }, {
-            key: "subtitle",
-            fn: function() {
-              return [_vm._t("subtitle")];
-            },
-            proxy: true
-          }, {
-            key: "bottom",
-            fn: function() {
-              return [_vm._t("bottom")];
-            },
-            proxy: true
-          }, {
-            key: "right",
-            fn: function() {
-              return [_vm._t("right")];
-            },
-            proxy: true
-          }], null, true)
-        }, [_vm._t("title", function() {
-          return [_c("span", {
-            staticClass: "dt-recipe-feed-item-pill__title"
-          }, [_vm._v(_vm._s(_vm.title))])];
-        })], 2)], 1)];
-      },
-      proxy: true
-    }, {
-      key: "content",
-      fn: function() {
-        return [_c("div", {
-          staticClass: "dt-recipe-feed-item-pill__content"
-        }, [_vm._t("content")], 2)];
-      },
-      proxy: true
-    }], null, true)
-  })], 1)]);
+  return _c("div", { class: ["dt-recipe-feed-item-pill__border", _vm.borderClass, _vm.wrapperClass] }, [_c("div", { staticClass: "dt-recipe-feed-item-pill__wrapper" }, [_c("dt-collapsible", { attrs: { "open": _vm.expanded }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
+    return [_c("button", { class: ["dt-recipe-feed-item-pill__button", _vm.toggleableClass, _vm.buttonClass], attrs: { "data-qa": "dt-recipe-feed-item-pill", "aria-label": _vm.ariaLabel }, on: { "focusin": function($event) {
+      _vm.hover = true;
+    }, "focusout": function($event) {
+      _vm.hover = false;
+    }, "mouseenter": function($event) {
+      _vm.hover = true;
+    }, "mouseleave": function($event) {
+      _vm.hover = false;
+    }, "click": _vm.onClick } }, [_c("dt-item-layout", { staticClass: "dt-recipe-feed-item-pill__layout", scopedSlots: _vm._u([{ key: "left", fn: function() {
+      return [_c("dt-icon", { staticClass: "dt-recipe-feed-item-pill__icon", attrs: { "data-qa": "dt-recipe-feed-item-pill__icon", "size": "300", "name": _vm.computedIcon } })];
+    }, proxy: true }, { key: "subtitle", fn: function() {
+      return [_vm._t("subtitle")];
+    }, proxy: true }, { key: "bottom", fn: function() {
+      return [_vm._t("bottom")];
+    }, proxy: true }, { key: "right", fn: function() {
+      return [_vm._t("right")];
+    }, proxy: true }], null, true) }, [_vm._t("title", function() {
+      return [_c("span", { staticClass: "dt-recipe-feed-item-pill__title" }, [_vm._v(_vm._s(_vm.title))])];
+    })], 2)], 1)];
+  }, proxy: true }, { key: "content", fn: function() {
+    return [_c("div", { staticClass: "dt-recipe-feed-item-pill__content" }, [_vm._t("content")], 2)];
+  }, proxy: true }], null, true) })], 1)]);
 };
 var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, "dab5b252", null, null);
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  "dab5b252",
+  null,
+  null
+);
 const feed_item_pill = __component__.exports;
 exports.DtRecipeFeedItemPill = feed_item_pill;
 exports.FEED_ITEM_PILL_BORDER_COLORS = FEED_ITEM_PILL_BORDER_COLORS;

package/dist/vue2/lib/feed-pill.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"feed-pill.cjs","sources":["../../recipes/conversation_view/feed_pill/feed_item_pill_constants.js","../../recipes/conversation_view/feed_pill/feed_item_pill.vue"],"sourcesContent":["export const FEED_ITEM_PILL_BORDER_COLORS = {\n  default: 'dt-recipe-feed-item-pill__border-default',\n  ai: 'dt-recipe-feed-item-pill__border-ai',\n  critical: 'dt-recipe-feed-item-pill__border-critical',\n};\n\nexport default {\n  FEED_ITEM_PILL_BORDER_COLORS,\n};\n","<template>\n  <div :class=\"['dt-recipe-feed-item-pill__border', borderClass, wrapperClass]\">\n    <div class=\"dt-recipe-feed-item-pill__wrapper\">\n      <dt-collapsible :open=\"expanded\">\n        <template #anchor>\n          <button\n            data-qa=\"dt-recipe-feed-item-pill\"\n            :aria-label=\"ariaLabel\"\n            :class=\"['dt-recipe-feed-item-pill__button', toggleableClass, buttonClass]\"\n            @focusin=\"hover = true\"\n            @focusout=\"hover = false\"\n            @mouseenter=\"hover = true\"\n            @mouseleave=\"hover = false\"\n            @click=\"onClick\"\n          >\n            <dt-item-layout class=\"dt-recipe-feed-item-pill__layout\">\n              <slot name=\"title\">\n                <span class=\"dt-recipe-feed-item-pill__title\">{{ title }}</span>\n              </slot>\n              <template #left>\n                <dt-icon\n                  data-qa=\"dt-recipe-feed-item-pill__icon\"\n                  size=\"300\"\n                  class=\"dt-recipe-feed-item-pill__icon\"\n                  :name=\"computedIcon\"\n                />\n              </template>\n              <template #subtitle>\n                <slot name=\"subtitle\" />\n              </template>\n              <template #bottom>\n                <slot name=\"bottom\" />\n              </template>\n              <template #right>\n                <slot name=\"right\" />\n              </template>\n            </dt-item-layout>\n          </button>\n        </template>\n        <template #content>\n          <div class=\"dt-recipe-feed-item-pill__content\">\n            <slot name=\"content\" />\n          </div>\n        </template>\n      </dt-collapsible>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { FEED_ITEM_PILL_BORDER_COLORS } from './feed_item_pill_constants';\nimport { DtIcon } from '@/components/icon';\nimport { DtItemLayout } from '@/components/item_layout';\nimport { DtCollapsible } from '@/components/collapsible';\n\nexport default {\n  name: 'DtRecipeFeedItemPill',\n\n  components: { DtItemLayout, DtIcon, DtCollapsible },\n\n  props: {\n    /**\n     * Accepts a DtIcon name to be shown in the left\n     */\n    iconName: {\n      type: String,\n      default: () => '',\n    },\n\n    /**\n     * Bolded primary text\n     */\n    title: {\n      type: String,\n      default: () => '',\n    },\n\n    /**\n     * Additional styling around the pill\n     */\n    wrapperClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional styling for the pill\n     */\n    buttonClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Aria label for feed pill\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Sets whether the pill can be toggled (Icon changing on hover, expanding and collapsing, pointer)\n     */\n    toggleable: {\n      type: Boolean,\n      default: () => true,\n    },\n\n    defaultToggled: {\n      type: Boolean,\n      default: () => false,\n    },\n\n    /**\n     * Callbox border color\n     * @values default, ai, critical\n     */\n    borderColor: {\n      type: String,\n      default: 'default',\n      validator: (color) => Object.keys(FEED_ITEM_PILL_BORDER_COLORS).includes(color),\n    },\n  },\n\n  data () {\n    return {\n      hover: false,\n      expanded: this.defaultToggled,\n    };\n  },\n\n  computed: {\n    computedIcon () {\n      if (this.toggleable && this.hover) {\n        return this.expanded ? 'chevron-down' : 'chevron-right';\n      } else {\n        return this.iconName;\n      }\n    },\n\n    toggleableClass () {\n      return this.toggleable ? 'd-c-pointer' : '';\n    },\n\n    borderClass () {\n      return FEED_ITEM_PILL_BORDER_COLORS[this.borderColor];\n    },\n  },\n\n  methods: {\n    onClick () {\n      if (!this.toggleable) return;\n\n      this.expanded = !this.expanded;\n    },\n  },\n};\n</script>\n\n<style lang=\"less\" scoped>\n.dt-recipe-feed-item-pill {\n  &__wrapper {\n    background-color: var(--dt-color-surface-secondary);\n    padding: var(--dt-space-400);\n  }\n\n  &__button {\n    background-color: var(--dt-color-surface-moderate);\n    text-align: left;\n    width: 100%;\n    cursor: pointer;\n    border-width: 0;\n    border-radius: var(--dt-size-radius-600);\n    --button-padding-x: var(--button-padding-y-md);\n    --button-padding-y: var(--button-padding-y-md);\n    --button-color-text: var(--dt-action-color-foreground-muted-default);\n    --button-border-radius: var(--dt-size-radius-600);\n  }\n\n  &__layout {\n    padding: var(--dt-space-400);\n    gap: var(--dt-space-300);\n    width: 100%;\n\n    &:deep(> .dt-item-layout--left) {\n      padding-right: var(--dt-space-0);\n      justify-content: center;\n    }\n  }\n\n  &__icon {\n    animation: fade 0.15s ease-in;\n  }\n\n  &__content {\n    display: flex;\n    justify-content: center;\n  }\n\n  &__title {\n    font-weight: var(--dt-font-weight-bold);\n  }\n\n  // Gradient radius solution taken from https://stackoverflow.com/a/53037637\n  &__border {\n    border: double 1px transparent;\n    border-radius: var(--dt-size-radius-600);\n    background-origin: border-box;\n    background-clip: content-box, border-box;\n    overflow: hidden;\n  }\n\n  &__border-default {\n    background: var(--dt-color-border-default)\n  }\n\n  &__border-ai {\n    background-image:\n      linear-gradient(var(--dt-color-surface-primary), var(--dt-color-surface-primary)),\n      var(--dt-badge-color-background-ai);\n  }\n\n  &__border-critical {\n    background: var(--dt-color-foreground-critical);\n  }\n\n  @keyframes fade {\n    0%   {transform: scale(0);}\n    100% {transform: scale(1);}\n  }\n}\n</style>\n"],"names":["FEED_ITEM_PILL_BORDER_COLORS","default","ai","critical","_sfc_main","name","components","DtItemLayout","DtIcon","DtCollapsible","props","iconName","type","String","title","wrapperClass","Array","Object","buttonClass","ariaLabel","required","toggleable","Boolean","defaultToggled","borderColor","validator","color","keys","includes","data","hover","expanded","computed","computedIcon","toggleableClass","borderClass","methods","onClick"],"mappings":";;;;;;;;;;;;;;;AAAO,MAAMA,+BAA+B;AAAA,EAC1CC,SAAS;AAAA,EACTC,IAAI;AAAA,EACJC,UAAU;AACZ;ACmDA,MAAAC,YAAA;AAAA,EACAC,MAAA;AAAA,EAEAC,YAAA;AAAA,kBAAAC,eAAA;AAAA,YAAAC,SAAA;AAAA,IAAAC,eAAAA,gBAAAA;AAAAA,EAAA;AAAA,EAEAC,OAAA;AAAA;AAAA;AAAA;AAAA,IAIAC,UAAA;AAAA,MACAC,MAAAC;AAAAA,MACAZ,SAAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKAa,OAAA;AAAA,MACAF,MAAAC;AAAAA,MACAZ,SAAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKAc,cAAA;AAAA,MACAH,MAAA,CAAAC,QAAAG,OAAAC,MAAA;AAAA,MACAhB,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKAiB,aAAA;AAAA,MACAN,MAAA,CAAAC,QAAAG,OAAAC,MAAA;AAAA,MACAhB,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKAkB,WAAA;AAAA,MACAP,MAAAC;AAAAA,MACAO,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKAC,YAAA;AAAA,MACAT,MAAAU;AAAAA,MACArB,SAAAA,MAAA;AAAA,IACA;AAAA,IAEAsB,gBAAA;AAAA,MACAX,MAAAU;AAAAA,MACArB,SAAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMAuB,aAAA;AAAA,MACAZ,MAAAC;AAAAA,MACAZ,SAAA;AAAA,MACAwB,WAAAC,WAAAT,OAAAU,KAAA3B,4BAAA,EAAA4B,SAAAF,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEAG,OAAA;AACA,WAAA;AAAA,MACAC,OAAA;AAAA,MACAC,UAAA,KAAAR;AAAAA;EAEA;AAAA,EAEAS,UAAA;AAAA,IACAC,eAAA;AACA,UAAA,KAAAZ,cAAA,KAAAS,OAAA;AACA,eAAA,KAAAC,WAAA,iBAAA;AAAA,MACA,OAAA;AACA,eAAA,KAAApB;AAAAA,MACA;AAAA,IACA;AAAA,IAEAuB,kBAAA;AACA,aAAA,KAAAb,aAAA,gBAAA;AAAA,IACA;AAAA,IAEAc,cAAA;AACA,aAAAnC,6BAAA,KAAAwB,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEAY,SAAA;AAAA,IACAC,UAAA;AACA,UAAA,CAAA,KAAAhB;AAAA;AAEA,WAAAU,WAAA,CAAA,KAAAA;AAAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"feed-pill.cjs","sources":["../../recipes/conversation_view/feed_pill/feed_item_pill_constants.js","../../recipes/conversation_view/feed_pill/feed_item_pill.vue"],"sourcesContent":["export const FEED_ITEM_PILL_BORDER_COLORS = {\n  default: 'dt-recipe-feed-item-pill__border-default',\n  ai: 'dt-recipe-feed-item-pill__border-ai',\n  critical: 'dt-recipe-feed-item-pill__border-critical',\n};\n\nexport default {\n  FEED_ITEM_PILL_BORDER_COLORS,\n};\n","<template>\n  <div :class=\"['dt-recipe-feed-item-pill__border', borderClass, wrapperClass]\">\n    <div class=\"dt-recipe-feed-item-pill__wrapper\">\n      <dt-collapsible :open=\"expanded\">\n        <template #anchor>\n          <button\n            data-qa=\"dt-recipe-feed-item-pill\"\n            :aria-label=\"ariaLabel\"\n            :class=\"['dt-recipe-feed-item-pill__button', toggleableClass, buttonClass]\"\n            @focusin=\"hover = true\"\n            @focusout=\"hover = false\"\n            @mouseenter=\"hover = true\"\n            @mouseleave=\"hover = false\"\n            @click=\"onClick\"\n          >\n            <dt-item-layout class=\"dt-recipe-feed-item-pill__layout\">\n              <slot name=\"title\">\n                <span class=\"dt-recipe-feed-item-pill__title\">{{ title }}</span>\n              </slot>\n              <template #left>\n                <dt-icon\n                  data-qa=\"dt-recipe-feed-item-pill__icon\"\n                  size=\"300\"\n                  class=\"dt-recipe-feed-item-pill__icon\"\n                  :name=\"computedIcon\"\n                />\n              </template>\n              <template #subtitle>\n                <slot name=\"subtitle\" />\n              </template>\n              <template #bottom>\n                <slot name=\"bottom\" />\n              </template>\n              <template #right>\n                <slot name=\"right\" />\n              </template>\n            </dt-item-layout>\n          </button>\n        </template>\n        <template #content>\n          <div class=\"dt-recipe-feed-item-pill__content\">\n            <slot name=\"content\" />\n          </div>\n        </template>\n      </dt-collapsible>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { FEED_ITEM_PILL_BORDER_COLORS } from './feed_item_pill_constants';\nimport { DtIcon } from '@/components/icon';\nimport { DtItemLayout } from '@/components/item_layout';\nimport { DtCollapsible } from '@/components/collapsible';\n\nexport default {\n  name: 'DtRecipeFeedItemPill',\n\n  components: { DtItemLayout, DtIcon, DtCollapsible },\n\n  props: {\n    /**\n     * Accepts a DtIcon name to be shown in the left\n     */\n    iconName: {\n      type: String,\n      default: () => '',\n    },\n\n    /**\n     * Bolded primary text\n     */\n    title: {\n      type: String,\n      default: () => '',\n    },\n\n    /**\n     * Additional styling around the pill\n     */\n    wrapperClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional styling for the pill\n     */\n    buttonClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Aria label for feed pill\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Sets whether the pill can be toggled (Icon changing on hover, expanding and collapsing, pointer)\n     */\n    toggleable: {\n      type: Boolean,\n      default: () => true,\n    },\n\n    defaultToggled: {\n      type: Boolean,\n      default: () => false,\n    },\n\n    /**\n     * Callbox border color\n     * @values default, ai, critical\n     */\n    borderColor: {\n      type: String,\n      default: 'default',\n      validator: (color) => Object.keys(FEED_ITEM_PILL_BORDER_COLORS).includes(color),\n    },\n  },\n\n  data () {\n    return {\n      hover: false,\n      expanded: this.defaultToggled,\n    };\n  },\n\n  computed: {\n    computedIcon () {\n      if (this.toggleable && this.hover) {\n        return this.expanded ? 'chevron-down' : 'chevron-right';\n      } else {\n        return this.iconName;\n      }\n    },\n\n    toggleableClass () {\n      return this.toggleable ? 'd-c-pointer' : '';\n    },\n\n    borderClass () {\n      return FEED_ITEM_PILL_BORDER_COLORS[this.borderColor];\n    },\n  },\n\n  methods: {\n    onClick () {\n      if (!this.toggleable) return;\n\n      this.expanded = !this.expanded;\n    },\n  },\n};\n</script>\n\n<style lang=\"less\" scoped>\n.dt-recipe-feed-item-pill {\n  &__wrapper {\n    background-color: var(--dt-color-surface-secondary);\n    padding: var(--dt-space-400);\n  }\n\n  &__button {\n    background-color: var(--dt-color-surface-moderate);\n    text-align: left;\n    width: 100%;\n    cursor: pointer;\n    border-width: 0;\n    border-radius: var(--dt-size-radius-600);\n    --button-padding-x: var(--button-padding-y-md);\n    --button-padding-y: var(--button-padding-y-md);\n    --button-color-text: var(--dt-action-color-foreground-muted-default);\n    --button-border-radius: var(--dt-size-radius-600);\n  }\n\n  &__layout {\n    padding: var(--dt-space-400);\n    gap: var(--dt-space-300);\n    width: 100%;\n\n    &:deep(> .dt-item-layout--left) {\n      padding-right: var(--dt-space-0);\n      justify-content: center;\n    }\n  }\n\n  &__icon {\n    animation: fade 0.15s ease-in;\n  }\n\n  &__content {\n    display: flex;\n    justify-content: center;\n  }\n\n  &__title {\n    font-weight: var(--dt-font-weight-bold);\n  }\n\n  // Gradient radius solution taken from https://stackoverflow.com/a/53037637\n  &__border {\n    border: double 1px transparent;\n    border-radius: var(--dt-size-radius-600);\n    background-origin: border-box;\n    background-clip: content-box, border-box;\n    overflow: hidden;\n  }\n\n  &__border-default {\n    background: var(--dt-color-border-default)\n  }\n\n  &__border-ai {\n    background-image:\n      linear-gradient(var(--dt-color-surface-primary), var(--dt-color-surface-primary)),\n      var(--dt-badge-color-background-ai);\n  }\n\n  &__border-critical {\n    background: var(--dt-color-foreground-critical);\n  }\n\n  @keyframes fade {\n    0%   {transform: scale(0);}\n    100% {transform: scale(1);}\n  }\n}\n</style>\n"],"names":["DtItemLayout","DtIcon","DtCollapsible"],"mappings":";;;;;;;;;;;;;;;AAAY,MAAC,+BAA+B;AAAA,EAC1C,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,UAAU;AACZ;ACmDA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA,EAAAA,cAAAA,eAAAA,sBAAAC,SAAA,QAAA,eAAAC,8BAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,IACA;AAAA,IAEA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,UAAA,OAAA,KAAA,4BAAA,EAAA,SAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,eAAA;AACA,UAAA,KAAA,cAAA,KAAA,OAAA;AACA,eAAA,KAAA,WAAA,iBAAA;AAAA,MACA,OAAA;AACA,eAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAA,KAAA,aAAA,gBAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,aAAA,6BAAA,KAAA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,UAAA;AACA,UAAA,CAAA,KAAA;AAAA;AAEA,WAAA,WAAA,CAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue2/lib/feed-pill.js

@@ -3,7 +3,7 @@ import { DtItemLayout } from "./item-layout.js";
 import { DtIcon } from "./icon.js";
 import { DtCollapsible } from "./collapsible.js";
 import "@dialpad/dialtone-icons/vue2";
-import "../chunks/icon_constants-TdxqLsS2.js";
+import "../chunks/icon_constants-Dy4MEUJL.js";
 import "@dialpad/dialtone-icons/icons.json";
 import "../common/utils.js";
 import "../common/constants.js";
@@ -18,11 +18,7 @@ const FEED_ITEM_PILL_BORDER_COLORS = {
 };
 const _sfc_main = {
   name: "DtRecipeFeedItemPill",
-  components: {
-    DtItemLayout,
-    DtIcon,
-    DtCollapsible
-  },
+  components: { DtItemLayout, DtIcon, DtCollapsible },
   props: {
     /**
      * Accepts a DtIcon name to be shown in the left
@@ -111,92 +107,41 @@ const _sfc_main = {
 };
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c("div", {
-    class: ["dt-recipe-feed-item-pill__border", _vm.borderClass, _vm.wrapperClass]
-  }, [_c("div", {
-    staticClass: "dt-recipe-feed-item-pill__wrapper"
-  }, [_c("dt-collapsible", {
-    attrs: {
-      "open": _vm.expanded
-    },
-    scopedSlots: _vm._u([{
-      key: "anchor",
-      fn: function() {
-        return [_c("button", {
-          class: ["dt-recipe-feed-item-pill__button", _vm.toggleableClass, _vm.buttonClass],
-          attrs: {
-            "data-qa": "dt-recipe-feed-item-pill",
-            "aria-label": _vm.ariaLabel
-          },
-          on: {
-            "focusin": function($event) {
-              _vm.hover = true;
-            },
-            "focusout": function($event) {
-              _vm.hover = false;
-            },
-            "mouseenter": function($event) {
-              _vm.hover = true;
-            },
-            "mouseleave": function($event) {
-              _vm.hover = false;
-            },
-            "click": _vm.onClick
-          }
-        }, [_c("dt-item-layout", {
-          staticClass: "dt-recipe-feed-item-pill__layout",
-          scopedSlots: _vm._u([{
-            key: "left",
-            fn: function() {
-              return [_c("dt-icon", {
-                staticClass: "dt-recipe-feed-item-pill__icon",
-                attrs: {
-                  "data-qa": "dt-recipe-feed-item-pill__icon",
-                  "size": "300",
-                  "name": _vm.computedIcon
-                }
-              })];
-            },
-            proxy: true
-          }, {
-            key: "subtitle",
-            fn: function() {
-              return [_vm._t("subtitle")];
-            },
-            proxy: true
-          }, {
-            key: "bottom",
-            fn: function() {
-              return [_vm._t("bottom")];
-            },
-            proxy: true
-          }, {
-            key: "right",
-            fn: function() {
-              return [_vm._t("right")];
-            },
-            proxy: true
-          }], null, true)
-        }, [_vm._t("title", function() {
-          return [_c("span", {
-            staticClass: "dt-recipe-feed-item-pill__title"
-          }, [_vm._v(_vm._s(_vm.title))])];
-        })], 2)], 1)];
-      },
-      proxy: true
-    }, {
-      key: "content",
-      fn: function() {
-        return [_c("div", {
-          staticClass: "dt-recipe-feed-item-pill__content"
-        }, [_vm._t("content")], 2)];
-      },
-      proxy: true
-    }], null, true)
-  })], 1)]);
+  return _c("div", { class: ["dt-recipe-feed-item-pill__border", _vm.borderClass, _vm.wrapperClass] }, [_c("div", { staticClass: "dt-recipe-feed-item-pill__wrapper" }, [_c("dt-collapsible", { attrs: { "open": _vm.expanded }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
+    return [_c("button", { class: ["dt-recipe-feed-item-pill__button", _vm.toggleableClass, _vm.buttonClass], attrs: { "data-qa": "dt-recipe-feed-item-pill", "aria-label": _vm.ariaLabel }, on: { "focusin": function($event) {
+      _vm.hover = true;
+    }, "focusout": function($event) {
+      _vm.hover = false;
+    }, "mouseenter": function($event) {
+      _vm.hover = true;
+    }, "mouseleave": function($event) {
+      _vm.hover = false;
+    }, "click": _vm.onClick } }, [_c("dt-item-layout", { staticClass: "dt-recipe-feed-item-pill__layout", scopedSlots: _vm._u([{ key: "left", fn: function() {
+      return [_c("dt-icon", { staticClass: "dt-recipe-feed-item-pill__icon", attrs: { "data-qa": "dt-recipe-feed-item-pill__icon", "size": "300", "name": _vm.computedIcon } })];
+    }, proxy: true }, { key: "subtitle", fn: function() {
+      return [_vm._t("subtitle")];
+    }, proxy: true }, { key: "bottom", fn: function() {
+      return [_vm._t("bottom")];
+    }, proxy: true }, { key: "right", fn: function() {
+      return [_vm._t("right")];
+    }, proxy: true }], null, true) }, [_vm._t("title", function() {
+      return [_c("span", { staticClass: "dt-recipe-feed-item-pill__title" }, [_vm._v(_vm._s(_vm.title))])];
+    })], 2)], 1)];
+  }, proxy: true }, { key: "content", fn: function() {
+    return [_c("div", { staticClass: "dt-recipe-feed-item-pill__content" }, [_vm._t("content")], 2)];
+  }, proxy: true }], null, true) })], 1)]);
 };
 var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, "dab5b252", null, null);
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  "dab5b252",
+  null,
+  null
+);
 const feed_item_pill = __component__.exports;
 export {
   feed_item_pill as DtRecipeFeedItemPill,

package/dist/vue2/lib/feed-pill.js.map

@@ -1 +1 @@
-{"version":3,"file":"feed-pill.js","sources":["../../recipes/conversation_view/feed_pill/feed_item_pill_constants.js","../../recipes/conversation_view/feed_pill/feed_item_pill.vue"],"sourcesContent":["export const FEED_ITEM_PILL_BORDER_COLORS = {\n  default: 'dt-recipe-feed-item-pill__border-default',\n  ai: 'dt-recipe-feed-item-pill__border-ai',\n  critical: 'dt-recipe-feed-item-pill__border-critical',\n};\n\nexport default {\n  FEED_ITEM_PILL_BORDER_COLORS,\n};\n","<template>\n  <div :class=\"['dt-recipe-feed-item-pill__border', borderClass, wrapperClass]\">\n    <div class=\"dt-recipe-feed-item-pill__wrapper\">\n      <dt-collapsible :open=\"expanded\">\n        <template #anchor>\n          <button\n            data-qa=\"dt-recipe-feed-item-pill\"\n            :aria-label=\"ariaLabel\"\n            :class=\"['dt-recipe-feed-item-pill__button', toggleableClass, buttonClass]\"\n            @focusin=\"hover = true\"\n            @focusout=\"hover = false\"\n            @mouseenter=\"hover = true\"\n            @mouseleave=\"hover = false\"\n            @click=\"onClick\"\n          >\n            <dt-item-layout class=\"dt-recipe-feed-item-pill__layout\">\n              <slot name=\"title\">\n                <span class=\"dt-recipe-feed-item-pill__title\">{{ title }}</span>\n              </slot>\n              <template #left>\n                <dt-icon\n                  data-qa=\"dt-recipe-feed-item-pill__icon\"\n                  size=\"300\"\n                  class=\"dt-recipe-feed-item-pill__icon\"\n                  :name=\"computedIcon\"\n                />\n              </template>\n              <template #subtitle>\n                <slot name=\"subtitle\" />\n              </template>\n              <template #bottom>\n                <slot name=\"bottom\" />\n              </template>\n              <template #right>\n                <slot name=\"right\" />\n              </template>\n            </dt-item-layout>\n          </button>\n        </template>\n        <template #content>\n          <div class=\"dt-recipe-feed-item-pill__content\">\n            <slot name=\"content\" />\n          </div>\n        </template>\n      </dt-collapsible>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { FEED_ITEM_PILL_BORDER_COLORS } from './feed_item_pill_constants';\nimport { DtIcon } from '@/components/icon';\nimport { DtItemLayout } from '@/components/item_layout';\nimport { DtCollapsible } from '@/components/collapsible';\n\nexport default {\n  name: 'DtRecipeFeedItemPill',\n\n  components: { DtItemLayout, DtIcon, DtCollapsible },\n\n  props: {\n    /**\n     * Accepts a DtIcon name to be shown in the left\n     */\n    iconName: {\n      type: String,\n      default: () => '',\n    },\n\n    /**\n     * Bolded primary text\n     */\n    title: {\n      type: String,\n      default: () => '',\n    },\n\n    /**\n     * Additional styling around the pill\n     */\n    wrapperClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional styling for the pill\n     */\n    buttonClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Aria label for feed pill\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Sets whether the pill can be toggled (Icon changing on hover, expanding and collapsing, pointer)\n     */\n    toggleable: {\n      type: Boolean,\n      default: () => true,\n    },\n\n    defaultToggled: {\n      type: Boolean,\n      default: () => false,\n    },\n\n    /**\n     * Callbox border color\n     * @values default, ai, critical\n     */\n    borderColor: {\n      type: String,\n      default: 'default',\n      validator: (color) => Object.keys(FEED_ITEM_PILL_BORDER_COLORS).includes(color),\n    },\n  },\n\n  data () {\n    return {\n      hover: false,\n      expanded: this.defaultToggled,\n    };\n  },\n\n  computed: {\n    computedIcon () {\n      if (this.toggleable && this.hover) {\n        return this.expanded ? 'chevron-down' : 'chevron-right';\n      } else {\n        return this.iconName;\n      }\n    },\n\n    toggleableClass () {\n      return this.toggleable ? 'd-c-pointer' : '';\n    },\n\n    borderClass () {\n      return FEED_ITEM_PILL_BORDER_COLORS[this.borderColor];\n    },\n  },\n\n  methods: {\n    onClick () {\n      if (!this.toggleable) return;\n\n      this.expanded = !this.expanded;\n    },\n  },\n};\n</script>\n\n<style lang=\"less\" scoped>\n.dt-recipe-feed-item-pill {\n  &__wrapper {\n    background-color: var(--dt-color-surface-secondary);\n    padding: var(--dt-space-400);\n  }\n\n  &__button {\n    background-color: var(--dt-color-surface-moderate);\n    text-align: left;\n    width: 100%;\n    cursor: pointer;\n    border-width: 0;\n    border-radius: var(--dt-size-radius-600);\n    --button-padding-x: var(--button-padding-y-md);\n    --button-padding-y: var(--button-padding-y-md);\n    --button-color-text: var(--dt-action-color-foreground-muted-default);\n    --button-border-radius: var(--dt-size-radius-600);\n  }\n\n  &__layout {\n    padding: var(--dt-space-400);\n    gap: var(--dt-space-300);\n    width: 100%;\n\n    &:deep(> .dt-item-layout--left) {\n      padding-right: var(--dt-space-0);\n      justify-content: center;\n    }\n  }\n\n  &__icon {\n    animation: fade 0.15s ease-in;\n  }\n\n  &__content {\n    display: flex;\n    justify-content: center;\n  }\n\n  &__title {\n    font-weight: var(--dt-font-weight-bold);\n  }\n\n  // Gradient radius solution taken from https://stackoverflow.com/a/53037637\n  &__border {\n    border: double 1px transparent;\n    border-radius: var(--dt-size-radius-600);\n    background-origin: border-box;\n    background-clip: content-box, border-box;\n    overflow: hidden;\n  }\n\n  &__border-default {\n    background: var(--dt-color-border-default)\n  }\n\n  &__border-ai {\n    background-image:\n      linear-gradient(var(--dt-color-surface-primary), var(--dt-color-surface-primary)),\n      var(--dt-badge-color-background-ai);\n  }\n\n  &__border-critical {\n    background: var(--dt-color-foreground-critical);\n  }\n\n  @keyframes fade {\n    0%   {transform: scale(0);}\n    100% {transform: scale(1);}\n  }\n}\n</style>\n"],"names":["FEED_ITEM_PILL_BORDER_COLORS","default","ai","critical","_sfc_main","name","components","DtItemLayout","DtIcon","DtCollapsible","props","iconName","type","String","title","wrapperClass","Array","Object","buttonClass","ariaLabel","required","toggleable","Boolean","defaultToggled","borderColor","validator","color","keys","includes","data","hover","expanded","computed","computedIcon","toggleableClass","borderClass","methods","onClick"],"mappings":";;;;;;;;;;;;;AAAO,MAAMA,+BAA+B;AAAA,EAC1CC,SAAS;AAAA,EACTC,IAAI;AAAA,EACJC,UAAU;AACZ;ACmDA,MAAAC,YAAA;AAAA,EACAC,MAAA;AAAA,EAEAC,YAAA;AAAA,IAAAC;AAAAA,IAAAC;AAAAA,IAAAC;AAAAA,EAAA;AAAA,EAEAC,OAAA;AAAA;AAAA;AAAA;AAAA,IAIAC,UAAA;AAAA,MACAC,MAAAC;AAAAA,MACAZ,SAAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKAa,OAAA;AAAA,MACAF,MAAAC;AAAAA,MACAZ,SAAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKAc,cAAA;AAAA,MACAH,MAAA,CAAAC,QAAAG,OAAAC,MAAA;AAAA,MACAhB,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKAiB,aAAA;AAAA,MACAN,MAAA,CAAAC,QAAAG,OAAAC,MAAA;AAAA,MACAhB,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKAkB,WAAA;AAAA,MACAP,MAAAC;AAAAA,MACAO,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKAC,YAAA;AAAA,MACAT,MAAAU;AAAAA,MACArB,SAAAA,MAAA;AAAA,IACA;AAAA,IAEAsB,gBAAA;AAAA,MACAX,MAAAU;AAAAA,MACArB,SAAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMAuB,aAAA;AAAA,MACAZ,MAAAC;AAAAA,MACAZ,SAAA;AAAA,MACAwB,WAAAC,WAAAT,OAAAU,KAAA3B,4BAAA,EAAA4B,SAAAF,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEAG,OAAA;AACA,WAAA;AAAA,MACAC,OAAA;AAAA,MACAC,UAAA,KAAAR;AAAAA;EAEA;AAAA,EAEAS,UAAA;AAAA,IACAC,eAAA;AACA,UAAA,KAAAZ,cAAA,KAAAS,OAAA;AACA,eAAA,KAAAC,WAAA,iBAAA;AAAA,MACA,OAAA;AACA,eAAA,KAAApB;AAAAA,MACA;AAAA,IACA;AAAA,IAEAuB,kBAAA;AACA,aAAA,KAAAb,aAAA,gBAAA;AAAA,IACA;AAAA,IAEAc,cAAA;AACA,aAAAnC,6BAAA,KAAAwB,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEAY,SAAA;AAAA,IACAC,UAAA;AACA,UAAA,CAAA,KAAAhB;AAAA;AAEA,WAAAU,WAAA,CAAA,KAAAA;AAAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"feed-pill.js","sources":["../../recipes/conversation_view/feed_pill/feed_item_pill_constants.js","../../recipes/conversation_view/feed_pill/feed_item_pill.vue"],"sourcesContent":["export const FEED_ITEM_PILL_BORDER_COLORS = {\n  default: 'dt-recipe-feed-item-pill__border-default',\n  ai: 'dt-recipe-feed-item-pill__border-ai',\n  critical: 'dt-recipe-feed-item-pill__border-critical',\n};\n\nexport default {\n  FEED_ITEM_PILL_BORDER_COLORS,\n};\n","<template>\n  <div :class=\"['dt-recipe-feed-item-pill__border', borderClass, wrapperClass]\">\n    <div class=\"dt-recipe-feed-item-pill__wrapper\">\n      <dt-collapsible :open=\"expanded\">\n        <template #anchor>\n          <button\n            data-qa=\"dt-recipe-feed-item-pill\"\n            :aria-label=\"ariaLabel\"\n            :class=\"['dt-recipe-feed-item-pill__button', toggleableClass, buttonClass]\"\n            @focusin=\"hover = true\"\n            @focusout=\"hover = false\"\n            @mouseenter=\"hover = true\"\n            @mouseleave=\"hover = false\"\n            @click=\"onClick\"\n          >\n            <dt-item-layout class=\"dt-recipe-feed-item-pill__layout\">\n              <slot name=\"title\">\n                <span class=\"dt-recipe-feed-item-pill__title\">{{ title }}</span>\n              </slot>\n              <template #left>\n                <dt-icon\n                  data-qa=\"dt-recipe-feed-item-pill__icon\"\n                  size=\"300\"\n                  class=\"dt-recipe-feed-item-pill__icon\"\n                  :name=\"computedIcon\"\n                />\n              </template>\n              <template #subtitle>\n                <slot name=\"subtitle\" />\n              </template>\n              <template #bottom>\n                <slot name=\"bottom\" />\n              </template>\n              <template #right>\n                <slot name=\"right\" />\n              </template>\n            </dt-item-layout>\n          </button>\n        </template>\n        <template #content>\n          <div class=\"dt-recipe-feed-item-pill__content\">\n            <slot name=\"content\" />\n          </div>\n        </template>\n      </dt-collapsible>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { FEED_ITEM_PILL_BORDER_COLORS } from './feed_item_pill_constants';\nimport { DtIcon } from '@/components/icon';\nimport { DtItemLayout } from '@/components/item_layout';\nimport { DtCollapsible } from '@/components/collapsible';\n\nexport default {\n  name: 'DtRecipeFeedItemPill',\n\n  components: { DtItemLayout, DtIcon, DtCollapsible },\n\n  props: {\n    /**\n     * Accepts a DtIcon name to be shown in the left\n     */\n    iconName: {\n      type: String,\n      default: () => '',\n    },\n\n    /**\n     * Bolded primary text\n     */\n    title: {\n      type: String,\n      default: () => '',\n    },\n\n    /**\n     * Additional styling around the pill\n     */\n    wrapperClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional styling for the pill\n     */\n    buttonClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Aria label for feed pill\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Sets whether the pill can be toggled (Icon changing on hover, expanding and collapsing, pointer)\n     */\n    toggleable: {\n      type: Boolean,\n      default: () => true,\n    },\n\n    defaultToggled: {\n      type: Boolean,\n      default: () => false,\n    },\n\n    /**\n     * Callbox border color\n     * @values default, ai, critical\n     */\n    borderColor: {\n      type: String,\n      default: 'default',\n      validator: (color) => Object.keys(FEED_ITEM_PILL_BORDER_COLORS).includes(color),\n    },\n  },\n\n  data () {\n    return {\n      hover: false,\n      expanded: this.defaultToggled,\n    };\n  },\n\n  computed: {\n    computedIcon () {\n      if (this.toggleable && this.hover) {\n        return this.expanded ? 'chevron-down' : 'chevron-right';\n      } else {\n        return this.iconName;\n      }\n    },\n\n    toggleableClass () {\n      return this.toggleable ? 'd-c-pointer' : '';\n    },\n\n    borderClass () {\n      return FEED_ITEM_PILL_BORDER_COLORS[this.borderColor];\n    },\n  },\n\n  methods: {\n    onClick () {\n      if (!this.toggleable) return;\n\n      this.expanded = !this.expanded;\n    },\n  },\n};\n</script>\n\n<style lang=\"less\" scoped>\n.dt-recipe-feed-item-pill {\n  &__wrapper {\n    background-color: var(--dt-color-surface-secondary);\n    padding: var(--dt-space-400);\n  }\n\n  &__button {\n    background-color: var(--dt-color-surface-moderate);\n    text-align: left;\n    width: 100%;\n    cursor: pointer;\n    border-width: 0;\n    border-radius: var(--dt-size-radius-600);\n    --button-padding-x: var(--button-padding-y-md);\n    --button-padding-y: var(--button-padding-y-md);\n    --button-color-text: var(--dt-action-color-foreground-muted-default);\n    --button-border-radius: var(--dt-size-radius-600);\n  }\n\n  &__layout {\n    padding: var(--dt-space-400);\n    gap: var(--dt-space-300);\n    width: 100%;\n\n    &:deep(> .dt-item-layout--left) {\n      padding-right: var(--dt-space-0);\n      justify-content: center;\n    }\n  }\n\n  &__icon {\n    animation: fade 0.15s ease-in;\n  }\n\n  &__content {\n    display: flex;\n    justify-content: center;\n  }\n\n  &__title {\n    font-weight: var(--dt-font-weight-bold);\n  }\n\n  // Gradient radius solution taken from https://stackoverflow.com/a/53037637\n  &__border {\n    border: double 1px transparent;\n    border-radius: var(--dt-size-radius-600);\n    background-origin: border-box;\n    background-clip: content-box, border-box;\n    overflow: hidden;\n  }\n\n  &__border-default {\n    background: var(--dt-color-border-default)\n  }\n\n  &__border-ai {\n    background-image:\n      linear-gradient(var(--dt-color-surface-primary), var(--dt-color-surface-primary)),\n      var(--dt-badge-color-background-ai);\n  }\n\n  &__border-critical {\n    background: var(--dt-color-foreground-critical);\n  }\n\n  @keyframes fade {\n    0%   {transform: scale(0);}\n    100% {transform: scale(1);}\n  }\n}\n</style>\n"],"names":[],"mappings":";;;;;;;;;;;;;AAAY,MAAC,+BAA+B;AAAA,EAC1C,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,UAAU;AACZ;ACmDA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA,EAAA,cAAA,QAAA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,IACA;AAAA,IAEA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,UAAA,OAAA,KAAA,4BAAA,EAAA,SAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,eAAA;AACA,UAAA,KAAA,cAAA,KAAA,OAAA;AACA,eAAA,KAAA,WAAA,iBAAA;AAAA,MACA,OAAA;AACA,eAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAA,KAAA,aAAA,gBAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,aAAA,6BAAA,KAAA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,UAAA;AACA,UAAA,CAAA,KAAA;AAAA;AAEA,WAAA,WAAA,CAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}