@adyen/bento-vue3 1.0.0 → 1.1.1

package/dist/structured-list.js

@@ -1,4 +1,4 @@
-import { B as r, a as o } from "./chunks/index.36742dc7.js";
+import { B as r, a as o } from "./chunks/index.23194ad5.js";
 export {
   r as BentoStructuredList,
   o as BentoStructuredListItem

package/dist/summary-grid.js

@@ -1,17 +1,16 @@
-import { defineComponent as _, resolveComponent as f, openBlock as r, createElementBlock as E, Fragment as D, renderList as R, createBlock as p, createSlots as A, withCtx as o, renderSlot as u, toRefs as w, computed as T, normalizeStyle as z, createElementVNode as b, createVNode as P, createTextVNode as S, toDisplayString as g, createCommentVNode as h, mergeProps as U } from "vue";
-import { h as L } from "./chunks/hasSlot.dceac207.js";
-import { G as q } from "./chunks/grid-layout.195c90b6.js";
+import { defineComponent as _, resolveComponent as f, openBlock as r, createElementBlock as E, Fragment as D, renderList as R, createBlock as p, createSlots as A, withCtx as o, renderSlot as y, toRefs as w, computed as T, normalizeStyle as z, createElementVNode as h, createVNode as P, createTextVNode as S, toDisplayString as g, createCommentVNode as b, mergeProps as U } from "vue";
+import { u as L } from "./chunks/use-has-slot.068222e6.js";
+import { G as q } from "./chunks/grid-layout.a30855ff.js";
 import { _ as v } from "./chunks/_plugin-vue_export-helper.dad06003.js";
 import { BentoInfoIcon as X } from "./info-icon.js";
-import { B as j, a as B, c as W } from "./chunks/index.1d501e31.js";
+import { B as j, b as B, a as W } from "./chunks/index.a169ce0d.js";
 import { BentoTag as Y, BentoTagVariant as M } from "./tag.js";
 import { PopperContainerPosition as F } from "./popper-container.js";
-import { C as H } from "./chunks/copy.92d2d21c.js";
-import "./assets/index11.css";
+import { C as H } from "./chunks/copy.d3ce16b1.js";
+import "./assets/index25.css";
 const J = _({
   name: "bento-summary-grid",
   components: { GridLayout: q },
-  inheritAttrs: !1,
   props: {
     /**
      * Sets the responsive columns widths values for 1 of the 3 rows.
@@ -54,42 +53,42 @@ function Q(e, a, d, m, i, s) {
         e.hasSlot(`cell-${t}-1`) ? {
           name: "col-1",
           fn: o(() => [
-            u(e.$slots, `cell-${t}-1`, {}, void 0, !0)
+            y(e.$slots, `cell-${t}-1`, {}, void 0, !0)
           ]),
           key: "0"
         } : void 0,
         e.hasSlot(`cell-${t}-2`) ? {
           name: "col-2",
           fn: o(() => [
-            u(e.$slots, `cell-${t}-2`, {}, void 0, !0)
+            y(e.$slots, `cell-${t}-2`, {}, void 0, !0)
           ]),
           key: "1"
         } : void 0,
         e.hasSlot(`cell-${t}-3`) ? {
           name: "col-3",
           fn: o(() => [
-            u(e.$slots, `cell-${t}-3`, {}, void 0, !0)
+            y(e.$slots, `cell-${t}-3`, {}, void 0, !0)
           ]),
           key: "2"
         } : void 0,
         e.hasSlot(`cell-${t}-4`) ? {
           name: "col-4",
           fn: o(() => [
-            u(e.$slots, `cell-${t}-4`, {}, void 0, !0)
+            y(e.$slots, `cell-${t}-4`, {}, void 0, !0)
           ]),
           key: "3"
         } : void 0,
         e.hasSlot(`cell-${t}-5`) ? {
           name: "col-5",
           fn: o(() => [
-            u(e.$slots, `cell-${t}-5`, {}, void 0, !0)
+            y(e.$slots, `cell-${t}-5`, {}, void 0, !0)
           ]),
           key: "4"
         } : void 0,
         e.hasSlot(`cell-${t}-6`) ? {
           name: "col-6",
           fn: o(() => [
-            u(e.$slots, `cell-${t}-6`, {}, void 0, !0)
+            y(e.$slots, `cell-${t}-6`, {}, void 0, !0)
           ]),
           key: "5"
         } : void 0
@@ -97,8 +96,8 @@ function Q(e, a, d, m, i, s) {
     }), 128))
   ]);
 }
-const Ee = /* @__PURE__ */ v(J, [["render", Q], ["__scopeId", "data-v-302e9221"]]);
-var c = /* @__PURE__ */ ((e) => (e.SMALL = "small", e.MEDIUM = "medium", e.LARGE = "large", e))(c || {}), y = /* @__PURE__ */ ((e) => (e.POSITIVE = "positive", e.NEGATIVE = "negative", e.NEUTRAL = "neutral", e))(y || {}), l = /* @__PURE__ */ ((e) => (e.AMOUNT = "amount", e.PERCENTAGE = "percentage", e.NUMERIC = "numeric", e.TEXT = "text", e.CUSTOM = "custom", e))(l || {});
+const Ee = /* @__PURE__ */ v(J, [["render", Q], ["__scopeId", "data-v-1b4c3b84"]]);
+var c = /* @__PURE__ */ ((e) => (e.SMALL = "small", e.MEDIUM = "medium", e.LARGE = "large", e))(c || {}), u = /* @__PURE__ */ ((e) => (e.POSITIVE = "positive", e.NEGATIVE = "negative", e.NEUTRAL = "neutral", e))(u || {}), l = /* @__PURE__ */ ((e) => (e.AMOUNT = "amount", e.PERCENTAGE = "percentage", e.NUMERIC = "numeric", e.TEXT = "text", e.CUSTOM = "custom", e))(l || {});
 const Z = _({
   name: "summary-grid-item",
   components: { BentoInfoIcon: X, BentoTypography: j, BentoTag: Y, Copy: H },
@@ -148,7 +147,7 @@ const Z = _({
      */
     trendDirection: {
       type: String,
-      default: y.POSITIVE
+      default: u.POSITIVE
     },
     /**
      * Shows colored trend tag next to secondary metric value
@@ -162,15 +161,15 @@ const Z = _({
      */
     secondaryTrendDirection: {
       type: String,
-      default: y.POSITIVE
+      default: u.POSITIVE
     }
   },
   setup(e, { slots: a }) {
     const { trendDirection: d, secondaryTrendDirection: m, itemType: i, size: s } = w(e), n = (k) => {
       switch (k) {
-        case y.POSITIVE:
+        case u.POSITIVE:
           return M.GREEN;
-        case y.NEGATIVE:
+        case u.NEGATIVE:
           return M.RED;
         default:
           return M.BLUE;
@@ -223,7 +222,7 @@ function oe(e, a, d, m, i, s) {
     class: "b-summary-grid-item",
     style: z(e.computedStyles)
   }, [
-    b("div", x, [
+    h("div", x, [
       P(n, {
         class: "b-summary-grid-item__title",
         el: e.BentoTypographyElement.SPAN,
@@ -234,21 +233,21 @@ function oe(e, a, d, m, i, s) {
         ]),
         _: 1
       }, 8, ["el", "variant"]),
-      b("div", ee, [
+      h("div", ee, [
         e.copy ? (r(), p(t, {
           key: 0,
           class: "b-structured-list__icon",
           text: e.copy
-        }, null, 8, ["text"])) : h("", !0),
+        }, null, 8, ["text"])) : b("", !0),
         e.infoIconTooltipText ? (r(), p($, {
           key: 1,
           "tooltip-text": e.infoIconTooltipText,
           "tooltip-position": e.PopperContainerPosition.TOP,
           class: "b-summary-grid-item__title-tooltip"
-        }, null, 8, ["tooltip-text", "tooltip-position"])) : h("", !0)
+        }, null, 8, ["tooltip-text", "tooltip-position"])) : b("", !0)
       ])
     ]),
-    b("div", te, [
+    h("div", te, [
       e.isContentTypographyApplied ? (r(), p(n, U({
         key: 0,
         "data-testid": "summary-grid-item-content-typography",
@@ -257,16 +256,16 @@ function oe(e, a, d, m, i, s) {
         el: e.BentoTypographyElement.SPAN
       }), {
         default: o(() => [
-          u(e.$slots, "default", {}, void 0, !0),
+          y(e.$slots, "default", {}, void 0, !0),
           e.trend && e.itemType !== e.SummaryGridItemType.TEXT ? (r(), p(I, {
             key: 0,
             variant: e.trendVariant,
             label: e.trend,
             class: "b-summary-grid-item__content-trend"
-          }, null, 8, ["variant", "label"])) : h("", !0)
+          }, null, 8, ["variant", "label"])) : b("", !0)
         ]),
         _: 3
-      }, 16, ["el"])) : u(e.$slots, "default", { key: 1 }, void 0, !0)
+      }, 16, ["el"])) : y(e.$slots, "default", { key: 1 }, void 0, !0)
     ]),
     e.hasSlot("secondary") ? (r(), E("div", ne, [
       P(n, {
@@ -277,23 +276,22 @@ function oe(e, a, d, m, i, s) {
         stronger: ""
       }, {
         default: o(() => [
-          u(e.$slots, "secondary", {}, void 0, !0),
+          y(e.$slots, "secondary", {}, void 0, !0),
           e.secondaryTrend ? (r(), p(I, {
             key: 0,
             variant: e.secondaryTrendVariant,
             label: e.secondaryTrend,
             class: "b-summary-grid-item__content-trend"
-          }, null, 8, ["variant", "label"])) : h("", !0)
+          }, null, 8, ["variant", "label"])) : b("", !0)
         ]),
         _: 3
       }, 8, ["el", "variant"])
-    ])) : h("", !0)
+    ])) : b("", !0)
   ], 4);
 }
-const C = /* @__PURE__ */ v(Z, [["render", oe], ["__scopeId", "data-v-9a6d35ed"]]), re = _({
+const C = /* @__PURE__ */ v(Z, [["render", oe], ["__scopeId", "data-v-1455e248"]]), re = _({
   name: "bento-summary-grid-item-amount",
   components: { SummaryGridItem: C },
-  inheritAttrs: !1,
   props: {
     /**
      * Text to copy to the clipboard
@@ -353,7 +351,7 @@ const C = /* @__PURE__ */ v(Z, [["render", oe], ["__scopeId", "data-v-9a6d35ed"]
      */
     trendDirection: {
       type: String,
-      default: y.POSITIVE
+      default: u.POSITIVE
     },
     /**
      * Shows colored secondary trend tag next to the secondary metric value
@@ -367,7 +365,7 @@ const C = /* @__PURE__ */ v(Z, [["render", oe], ["__scopeId", "data-v-9a6d35ed"]
      */
     secondaryTrendDirection: {
       type: String,
-      default: y.POSITIVE
+      default: u.POSITIVE
     },
     /**
      * Defines the size of the `summary-grid-item` text content
@@ -404,9 +402,9 @@ function se(e, a, d, m, i, s) {
     class: "b-summary-grid-item-amount"
   }, A({
     default: o(() => [
-      b("div", ie, [
-        b("div", null, g(e.label), 1),
-        e.secondaryLabel ? (r(), E("div", ae, g(e.secondaryLabel), 1)) : h("", !0)
+      h("div", ie, [
+        h("div", null, g(e.label), 1),
+        e.secondaryLabel ? (r(), E("div", ae, g(e.secondaryLabel), 1)) : b("", !0)
       ])
     ]),
     _: 2
@@ -420,10 +418,9 @@ function se(e, a, d, m, i, s) {
     } : void 0
   ]), 1032, ["item-type", "info-icon-tooltip-text", "title", "copy", "fit-content", "size", "trend", "trend-direction", "secondary-trend", "secondary-trend-direction"]);
 }
-const Ce = /* @__PURE__ */ v(re, [["render", se], ["__scopeId", "data-v-504d900d"]]), de = _({
+const Ce = /* @__PURE__ */ v(re, [["render", se], ["__scopeId", "data-v-8dbd1cf8"]]), de = _({
   name: "bento-summary-grid-item-numeric",
   components: { SummaryGridItem: C },
-  inheritAttrs: !1,
   props: {
     /**
      * Text to copy to the clipboard
@@ -476,7 +473,7 @@ const Ce = /* @__PURE__ */ v(re, [["render", se], ["__scopeId", "data-v-504d900d
      */
     trendDirection: {
       type: String,
-      default: y.POSITIVE
+      default: u.POSITIVE
     },
     /**
      * Shows colored secondary trend tag next to the secondary metric value
@@ -490,7 +487,7 @@ const Ce = /* @__PURE__ */ v(re, [["render", se], ["__scopeId", "data-v-504d900d
      */
     secondaryTrendDirection: {
       type: String,
-      default: y.POSITIVE
+      default: u.POSITIVE
     },
     /**
      * Defines the size of the `summary-grid-item` text content
@@ -539,7 +536,6 @@ function le(e, a, d, m, i, s) {
 const Ae = /* @__PURE__ */ v(de, [["render", le]]), me = _({
   name: "bento-summary-grid-item-percentage",
   components: { SummaryGridItem: C },
-  inheritAttrs: !1,
   props: {
     /**
      * Amount to be shown as the main value
@@ -592,7 +588,7 @@ const Ae = /* @__PURE__ */ v(de, [["render", le]]), me = _({
      */
     trendDirection: {
       type: String,
-      default: y.POSITIVE
+      default: u.POSITIVE
     },
     /**
      * Shows colored secondary trend tag next to the secondary metric value
@@ -606,7 +602,7 @@ const Ae = /* @__PURE__ */ v(de, [["render", le]]), me = _({
      */
     secondaryTrendDirection: {
       type: String,
-      default: y.POSITIVE
+      default: u.POSITIVE
     },
     /**
      * Defines the size of the `summary-grid-item` text content
@@ -652,10 +648,9 @@ function pe(e, a, d, m, i, s) {
     } : void 0
   ]), 1032, ["item-type", "info-icon-tooltip-text", "title", "copy", "fit-content", "size", "trend", "trend-direction", "secondary-trend", "secondary-trend-direction"]);
 }
-const Be = /* @__PURE__ */ v(me, [["render", pe]]), ye = _({
+const Be = /* @__PURE__ */ v(me, [["render", pe]]), ue = _({
   name: "bento-summary-grid-item-text",
   components: { SummaryGridItem: C },
-  inheritAttrs: !1,
   props: {
     /**
      * Text to copy to the clipboard
@@ -697,7 +692,7 @@ const Be = /* @__PURE__ */ v(me, [["render", pe]]), ye = _({
     };
   }
 });
-function ue(e, a, d, m, i, s) {
+function ye(e, a, d, m, i, s) {
   const n = f("summary-grid-item");
   return r(), p(n, {
     "item-type": e.SummaryGridItemType.TEXT,
@@ -713,10 +708,9 @@ function ue(e, a, d, m, i, s) {
     _: 1
   }, 8, ["item-type", "info-icon-tooltip-text", "title", "copy", "fit-content"]);
 }
-const Me = /* @__PURE__ */ v(ye, [["render", ue]]), ce = _({
+const Me = /* @__PURE__ */ v(ue, [["render", ye]]), ce = _({
   name: "bento-summary-grid-item-custom",
   components: { SummaryGridItem: C },
-  inheritAttrs: !1,
   props: {
     /**
      * Text to copy to the clipboard
@@ -747,7 +741,7 @@ function fe(e, a, d, m, i, s) {
     onCopyToClipoard: a[0] || (a[0] = (t) => e.$emit("copy-to-clipboard"))
   }, {
     default: o(() => [
-      u(e.$slots, "default")
+      y(e.$slots, "default")
     ]),
     _: 3
   }, 8, ["title", "info-icon-tooltip-text", "copy", "fit-content"]);
@@ -761,6 +755,6 @@ export {
   Be as BentoSummaryGridItemPercentage,
   c as BentoSummaryGridItemSize,
   Me as BentoSummaryGridItemText,
-  y as BentoSummaryGridItemTrendDirection
+  u as BentoSummaryGridItemTrendDirection
 };
 //# sourceMappingURL=summary-grid.js.map

package/dist/summary-grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"summary-grid.js","sources":["../../vue2/src/components/summary-grid/summary-grid.vue","../../vue2/src/components/summary-grid/summary-grid.types.ts","../../vue2/src/components/summary-grid/components/summary-grid-item/summary-grid-item.types.ts","../../vue2/src/components/summary-grid/components/summary-grid-item/summary-grid-item.vue","../../vue2/src/components/summary-grid/components/summary-grid-item-amount/summary-grid-item-amount.vue","../../vue2/src/components/summary-grid/components/summary-grid-item-numeric/summary-grid-item-numeric.vue","../../vue2/src/components/summary-grid/components/summary-grid-item-percentage/summary-grid-item-percentage.vue","../../vue2/src/components/summary-grid/components/summary-grid-item-text/summary-grid-item-text.vue","../../vue2/src/components/summary-grid/components/summary-grid-item-custom/summary-grid-item-custom.vue"],"sourcesContent":["<template>\n    <div class=\"b-summary-grid\">\n        <grid-layout\n            v-for=\"index in numberOfRows\"\n            :key=\"`summary-grid-row-${index}`\"\n            :data-testid=\"`summary-grid-row-${index}`\"\n            :column-width=\"columnWidth?.[`row${index}`]\"\n        >\n            <template v-if=\"hasSlot(`cell-${index}-1`)\" #col-1>\n                <slot :name=\"`cell-${index}-1`\" />\n            </template>\n            <template v-if=\"hasSlot(`cell-${index}-2`)\" #col-2>\n                <slot :name=\"`cell-${index}-2`\" />\n            </template>\n            <template v-if=\"hasSlot(`cell-${index}-3`)\" #col-3>\n                <slot :name=\"`cell-${index}-3`\" />\n            </template>\n            <template v-if=\"hasSlot(`cell-${index}-4`)\" #col-4>\n                <slot :name=\"`cell-${index}-4`\" />\n            </template>\n            <template v-if=\"hasSlot(`cell-${index}-5`)\" #col-5>\n                <slot :name=\"`cell-${index}-5`\" />\n            </template>\n            <template v-if=\"hasSlot(`cell-${index}-6`)\" #col-6>\n                <slot :name=\"`cell-${index}-6`\" />\n            </template>\n        </grid-layout>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { defineComponent, PropType } from 'vue';\n    import { BentoSummaryGridColumnWidth } from './summary-grid.types';\n    import { GridLayout } from '@/components/internal';\n    import { hasSlot } from '@/utils/ts/hasSlot';\n\n    /**\n     * A summary grid component that displays a collection items.\n     *\n     * @example\n     * import { BentoSummaryGrid, BentoSummaryGridItemAmount } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSummaryGrid, BentoSummaryGridItemAmount },\n     *     template: `\n     *          <bento-summary-grid>\n     *             <template #cell-2-2>\n     *                <bento-summary-grid-item-amount\n     *                   title=\"Text Item\"\n     *                   label=\"14\"\n     *                   info-icon-tooltip-text=\"text for icon\"\n     *                   copy=\"copy this to clipboard\"\n     *                />\n     *             </template>\n     *          </bento-summary-grid>\n     *     `\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-summary-grid',\n        components: { GridLayout },\n        inheritAttrs: false,\n        props: {\n            /**\n             * Sets the responsive columns widths values for 1 of the 3 rows.\n             */\n            columnWidth: {\n                type: Object as PropType<BentoSummaryGridColumnWidth>,\n                default: null,\n            },\n        },\n\n        setup(_props, { slots }) {\n            let numberOfRows = 1;\n            if (slots) {\n                const slotRows = Object.keys(slots)\n                    ?.filter(slotName => slotName.includes('cell-'))\n                    ?.map(slotName => parseInt(slotName.split('-')?.[1], 10));\n                numberOfRows = Math.max(...slotRows);\n                if (numberOfRows > 3) {\n                    throw new Error(\n                        'BentoSummaryGrid must only have a maximum of 3 rows. Read the documentation for more information.'\n                    );\n                }\n            }\n\n            return {\n                hasSlot: hasSlot(slots),\n                numberOfRows,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./summary-grid.scss\" />\n","import { GridLayoutColumnWidth } from '@/components/internal/grid-layout/grid-layout.types';\n\nexport enum BentoSummaryGridItemSize {\n    SMALL = 'small',\n    MEDIUM = 'medium',\n    LARGE = 'large',\n}\n\nexport enum BentoSummaryGridItemTrendDirection {\n    POSITIVE = 'positive',\n    NEGATIVE = 'negative',\n    NEUTRAL = 'neutral',\n}\n\nexport interface BentoSummaryGridColumnWidth {\n    row1: Array<GridLayoutColumnWidth>;\n    row2?: Array<GridLayoutColumnWidth>;\n    row3?: Array<GridLayoutColumnWidth>;\n}\n","export enum SummaryGridItemType {\n    AMOUNT = 'amount',\n    PERCENTAGE = 'percentage',\n    NUMERIC = 'numeric',\n    TEXT = 'text',\n    CUSTOM = 'custom',\n}\n","<template>\n    <div class=\"b-summary-grid-item\" :style=\"computedStyles\">\n        <div class=\"b-summary-grid-item__header\">\n            <bento-typography\n                class=\"b-summary-grid-item__title\"\n                :el=\"BentoTypographyElement.SPAN\"\n                :variant=\"BentoTypographyVariant.BODY\"\n            >\n                {{ title }}\n            </bento-typography>\n            <div class=\"b-summary-grid-item__title-icons\">\n                <copy v-if=\"copy\" class=\"b-structured-list__icon\" :text=\"copy\" />\n\n                <bento-info-icon\n                    v-if=\"infoIconTooltipText\"\n                    :tooltip-text=\"infoIconTooltipText\"\n                    :tooltip-position=\"PopperContainerPosition.TOP\"\n                    class=\"b-summary-grid-item__title-tooltip\"\n                />\n            </div>\n        </div>\n        <div class=\"b-summary-grid-item__content--primary\">\n            <bento-typography\n                v-if=\"isContentTypographyApplied\"\n                data-testid=\"summary-grid-item-content-typography\"\n                class=\"b-summary-grid-item__title\"\n                v-bind=\"typographyProps\"\n                :el=\"BentoTypographyElement.SPAN\"\n            >\n                <slot />\n                <bento-tag\n                    v-if=\"trend && itemType !== SummaryGridItemType.TEXT\"\n                    :variant=\"trendVariant\"\n                    :label=\"trend\"\n                    class=\"b-summary-grid-item__content-trend\"\n                />\n            </bento-typography>\n\n            <slot v-else />\n        </div>\n        <div v-if=\"hasSlot('secondary')\" class=\"b-summary-grid-item__content--secondary\">\n            <bento-typography\n                class=\"b-summary-grid-item__title\"\n                data-testid=\"summary-grid-item-secondary-metric-typography\"\n                :el=\"BentoTypographyElement.SPAN\"\n                :variant=\"BentoTypographyVariant.CAPTION\"\n                stronger\n            >\n                <slot name=\"secondary\" />\n                <bento-tag\n                    v-if=\"secondaryTrend\"\n                    :variant=\"secondaryTrendVariant\"\n                    :label=\"secondaryTrend\"\n                    class=\"b-summary-grid-item__content-trend\"\n                />\n            </bento-typography>\n        </div>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, toRefs } from 'vue';\n\n    // Components\n    import { BentoInfoIcon } from '@/components/info-icon';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import { BentoTag, BentoTagVariant } from '@/components/tag';\n    import { PopperContainerPosition } from '@/components/popper-container';\n    import { Copy } from '@/internal';\n\n    // Utils\n    import { hasSlot } from '@/utils/ts/hasSlot';\n\n    // Types\n    import {\n        BentoSummaryGridItemSize,\n        BentoSummaryGridItemTrendDirection,\n    } from '@/components/summary-grid/summary-grid.types';\n    import { SummaryGridItemType } from './summary-grid-item.types';\n\n    /**\n     * A summary bar item is a piece of information to be displayed in `bento-summary-bar` component\n     *\n     * @example\n     * import { SummaryBarItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { SummaryBarItem },\n     *     template: `\n     *          <summary-grid-item :title=\"textVariable\">\n     *              Content of the item\n     *          </summary-grid-item>\n     *     `\n     * }\n     */\n    export default defineComponent({\n        name: 'summary-grid-item',\n        components: { BentoInfoIcon, BentoTypography, BentoTag, Copy },\n        props: {\n            /**\n             * Text to copy to the clipboard\n             */\n            copy: { type: String, default: undefined },\n\n            /**\n             * Applies styling based on content type\n             */\n            // TODO add text truncation for SummaryGridItemType.TEXT\n            itemType: {\n                type: String as PropType<SummaryGridItemType>,\n                default: SummaryGridItemType.CUSTOM,\n            },\n\n            /**\n             * Text showed in the info-icon tooltip on hover\n             */\n            infoIconTooltipText: { type: String, default: null },\n\n            /**\n             * Text used as a title\n             */\n            title: { type: String, required: true },\n\n            /**\n             * The width of `summary-grid-item` fits its content\n             */\n            fitContent: { type: Boolean, default: false },\n\n            // amount, percentage and numeric props\n            /**\n             * Defines the size of the `summary-grid-item` text content\n             */\n            // TODO implement logic for Large size\n            size: {\n                type: String as PropType<BentoSummaryGridItemSize>,\n                default: BentoSummaryGridItemSize.SMALL,\n            },\n\n            /**\n             * Shows colored trend label next to text content\n             */\n            trend: {\n                type: String,\n                default: null,\n            },\n\n            /**\n             * Defines the color of trend label\n             */\n            trendDirection: {\n                type: String as PropType<BentoSummaryGridItemTrendDirection>,\n                default: BentoSummaryGridItemTrendDirection.POSITIVE,\n            },\n\n            /**\n             * Shows colored trend tag next to secondary metric value\n             */\n            secondaryTrend: {\n                type: String,\n                default: null,\n            },\n\n            /**\n             * Defines the color of secondary trend tag\n             */\n            secondaryTrendDirection: {\n                type: String as PropType<BentoSummaryGridItemTrendDirection>,\n                default: BentoSummaryGridItemTrendDirection.POSITIVE,\n            },\n        },\n        setup(props, { slots }) {\n            const { trendDirection, secondaryTrendDirection, itemType, size } = toRefs(props);\n\n            const tagVariantColor = direction => {\n                switch (direction) {\n                    case BentoSummaryGridItemTrendDirection.POSITIVE:\n                        return BentoTagVariant.GREEN;\n                    case BentoSummaryGridItemTrendDirection.NEGATIVE:\n                        return BentoTagVariant.RED;\n                    default:\n                        return BentoTagVariant.BLUE;\n                }\n            };\n\n            // TODO implement plus or minus symbol logic\n            const trendVariant = computed(() => tagVariantColor(trendDirection.value));\n            const secondaryTrendVariant = computed(() => tagVariantColor(secondaryTrendDirection.value));\n\n            const isContentTypographyApplied = computed(\n                () =>\n                    itemType.value === SummaryGridItemType.TEXT ||\n                    itemType.value === SummaryGridItemType.PERCENTAGE ||\n                    itemType.value === SummaryGridItemType.AMOUNT ||\n                    itemType.value === SummaryGridItemType.NUMERIC\n            );\n\n            const typographyContentElement = computed(() => {\n                if (isContentTypographyApplied.value) {\n                    if (size.value === BentoSummaryGridItemSize.SMALL) {\n                        return BentoTypographyVariant.BODY;\n                    }\n                    if (itemType.value !== SummaryGridItemType.TEXT) {\n                        return BentoTypographyVariant.TITLE;\n                    }\n                }\n\n                return null;\n            });\n\n            const typographyProps = computed(() => ({\n                medium: size.value === BentoSummaryGridItemSize.LARGE,\n                strongest: size.value === BentoSummaryGridItemSize.SMALL,\n                wide: size.value === BentoSummaryGridItemSize.SMALL,\n                variant: typographyContentElement.value,\n            }));\n\n            const computedStyles = computed(() => (props.fitContent ? { width: 'fit-content' } : {}));\n\n            const summaryBarItemTrendConditionalClasses = computed(() => ({\n                [`b-summary-grid-item__content-trend--${props.trend}`]: props.trend,\n            }));\n\n            return {\n                // Values\n                trendVariant,\n                secondaryTrendVariant,\n                isContentTypographyApplied,\n                typographyProps,\n\n                // Styles\n                computedStyles,\n                summaryBarItemTrendConditionalClasses,\n\n                // Enums\n                BentoTypographyElement,\n                BentoTypographyVariant,\n                SummaryGridItemType,\n                BentoSummaryGridItemSize,\n                PopperContainerPosition,\n\n                // Utils\n                hasSlot: hasSlot(slots),\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./summary-grid-item.scss\" />\n","<template>\n    <summary-grid-item\n        :item-type=\"SummaryGridItemType.AMOUNT\"\n        :info-icon-tooltip-text=\"infoIconTooltipText\"\n        :title=\"title\"\n        :copy=\"copy\"\n        :fit-content=\"fitContent\"\n        :size=\"size\"\n        :trend=\"trend\"\n        :trend-direction=\"trendDirection\"\n        :secondary-trend=\"secondaryTrend\"\n        :secondary-trend-direction=\"secondaryTrendDirection\"\n        class=\"b-summary-grid-item-amount\"\n    >\n        <div class=\"b-summary-grid-item-amount__content\">\n            <div>{{ label }}</div>\n            <div v-if=\"secondaryLabel\" class=\"b-summary-grid-item-amount__secondary-label\">{{ secondaryLabel }}</div>\n        </div>\n        <template v-if=\"secondaryMetric\" #secondary>\n            {{ secondaryMetric }}\n        </template>\n    </summary-grid-item>\n</template>\n\n<script lang=\"ts\">\n    import { defineComponent, PropType } from 'vue';\n    import {\n        BentoSummaryGridItemSize,\n        BentoSummaryGridItemTrendDirection,\n    } from '@/components/summary-grid/summary-grid.types';\n    import { SummaryGridItem, SummaryGridItemType } from '../summary-grid-item';\n\n    /**\n     * Summary grid item component used to display financial data, such as currency values and monetary amounts\n     *\n     * @example\n     * import { BentoSummaryGridItemAmount, BentoSummaryGridItemSize, BentoSummaryGridItemTrendDirection } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSummaryGridItemAmount },\n     *     template: `\n     *          <bento-summary-grid-item-amount\n     *              title=\"Your title\"\n     *              label=\"200.00 EUR\"\n     *              secondary-label=\"/ day\"\n     *              info-icon-tooltip-text=\"Your tooltip text here will be toggled by the info icon\"\n     *              trend=\"+12%\"\n     *              :trend-direction=\"BentoSummaryGridItemTrendDirection.NEUTRAL\"\n     *              :size=\"BentoSummaryGridItemSize.MEDIUM\"\n     *          />\n     *     `\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-summary-grid-item-amount',\n        components: { SummaryGridItem },\n        inheritAttrs: false,\n        props: {\n            /**\n             * Text to copy to the clipboard\n             */\n            copy: { type: String, default: undefined },\n\n            /**\n             * Amount to be shown as the main value\n             */\n            label: {\n                type: String,\n                required: true,\n            },\n\n            /**\n             * Adds additional label next to amount content\n             */\n            secondaryLabel: {\n                type: String,\n                default: null,\n            },\n\n            /**\n             * Amount to be shown as the secondary metric value\n             */\n            secondaryMetric: {\n                type: String,\n                default: null,\n            },\n\n            /**\n             * Text used as a title\n             */\n            title: {\n                type: String,\n                required: true,\n            },\n\n            /**\n             * Text showed in the info-icon tooltip on hover\n             */\n            infoIconTooltipText: {\n                type: String,\n                default: null,\n            },\n\n            /**\n             * The width of `summary-grid-item` fits its content\n             */\n            fitContent: {\n                type: Boolean,\n                default: false,\n            },\n\n            /**\n             * Shows colored trend label next to main label\n             */\n            trend: {\n                type: String,\n                default: null,\n            },\n\n            /**\n             * Defines the direction (color) of the trend label\n             */\n            trendDirection: {\n                type: String as PropType<BentoSummaryGridItemTrendDirection>,\n                default: BentoSummaryGridItemTrendDirection.POSITIVE,\n            },\n\n            /**\n             * Shows colored secondary trend tag next to the secondary metric value\n             */\n            secondaryTrend: {\n                type: String,\n                default: null,\n            },\n\n            /**\n             * Defines the direction (color) of the secondary metric's trend tag\n             */\n            secondaryTrendDirection: {\n                type: String as PropType<BentoSummaryGridItemTrendDirection>,\n                default: BentoSummaryGridItemTrendDirection.POSITIVE,\n            },\n\n            /**\n             * Defines the size of the `summary-grid-item` text content\n             */\n            size: {\n                type: String as PropType<BentoSummaryGridItemSize>,\n                default: BentoSummaryGridItemSize.SMALL,\n            },\n        },\n\n        setup() {\n            return {\n                // Enums\n                SummaryGridItemType,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./summary-grid-item-amount.scss\" />\n","<template>\n    <summary-grid-item\n        :item-type=\"SummaryGridItemType.NUMERIC\"\n        :info-icon-tooltip-text=\"infoIconTooltipText\"\n        :title=\"title\"\n        :copy=\"copy\"\n        :fit-content=\"fitContent\"\n        :size=\"size\"\n        :trend=\"trend\"\n        :trend-direction=\"trendDirection\"\n        :secondary-trend=\"secondaryTrend\"\n        :secondary-trend-direction=\"secondaryTrendDirection\"\n        class=\"b-summary-grid-item-numeric\"\n    >\n        {{ label }}\n        <template v-if=\"secondaryMetric\" #secondary>\n            {{ secondaryMetric }}\n        </template>\n    </summary-grid-item>\n</template>\n\n<script lang=\"ts\">\n    import { defineComponent, PropType } from 'vue';\n    import {\n        BentoSummaryGridItemSize,\n        BentoSummaryGridItemTrendDirection,\n    } from '@/components/summary-grid/summary-grid.types';\n    import { SummaryGridItem, SummaryGridItemType } from '../summary-grid-item';\n\n    /**\n     * Summary grid item component used to display any numeric information\n     *\n     * @example\n     * import { BentoSummaryGridItemNumeric, BentoSummaryGridItemSize, BentoSummaryGridItemTrendDirection } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSummaryGridItemNumeric },\n     *     template: `\n     *          <bento-summary-grid-item-numeric\n     *              title=\"Your title\"\n     *              label=\"123\"\n     *              info-icon-tooltip-text=\"Your tooltip text here will be toggled by the info icon\"\n     *              trend=\"+12%\"\n     *              :trend-direction=\"BentoSummaryGridItemTrendDirection.NEUTRAL\"\n     *              :size=\"BentoSummaryGridItemSize.MEDIUM\"\n     *          />\n     *     `\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-summary-grid-item-numeric',\n        components: { SummaryGridItem },\n        inheritAttrs: false,\n        props: {\n            /**\n             * Text to copy to the clipboard\n             */\n            copy: { type: String, default: undefined },\n\n            /**\n             * Amount to be shown as the main value\n             */\n            label: {\n                type: String,\n                required: true,\n            },\n            /**\n             * Amount to be shown as the secondary metric value\n             */\n            secondaryMetric: {\n                type: String,\n                default: null,\n            },\n            /**\n             * Text used as a title\n             */\n            title: {\n                type: String,\n                required: true,\n            },\n            /**\n             * Text showed in the info-icon tooltip on hover\n             */\n            infoIconTooltipText: {\n                type: String,\n                default: null,\n            },\n\n            /**\n             * The width of `summary-grid-item` fits its content\n             */\n            fitContent: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Shows colored trend label next to main numeric content\n             */\n            trend: {\n                type: String,\n                default: null,\n            },\n            /**\n             * Defines the direction (color) of the trend label\n             */\n            trendDirection: {\n                type: String as PropType<BentoSummaryGridItemTrendDirection>,\n                default: BentoSummaryGridItemTrendDirection.POSITIVE,\n            },\n            /**\n             * Shows colored secondary trend tag next to the secondary metric value\n             */\n            secondaryTrend: {\n                type: String,\n                default: null,\n            },\n            /**\n             * Defines the direction (color) of the secondary metric's trend tag\n             */\n            secondaryTrendDirection: {\n                type: String as PropType<BentoSummaryGridItemTrendDirection>,\n                default: BentoSummaryGridItemTrendDirection.POSITIVE,\n            },\n            /**\n             * Defines the size of the `summary-grid-item` text content\n             */\n            size: {\n                type: String as PropType<BentoSummaryGridItemSize>,\n                default: BentoSummaryGridItemSize.SMALL,\n            },\n        },\n\n        setup() {\n            return {\n                // Enums\n                SummaryGridItemType,\n            };\n        },\n    });\n</script>\n","<template>\n    <summary-grid-item\n        :item-type=\"SummaryGridItemType.PERCENTAGE\"\n        :info-icon-tooltip-text=\"infoIconTooltipText\"\n        :title=\"title\"\n        :copy=\"copy\"\n        :fit-content=\"fitContent\"\n        :size=\"size\"\n        :trend=\"trend\"\n        :trend-direction=\"trendDirection\"\n        :secondary-trend=\"secondaryTrend\"\n        :secondary-trend-direction=\"secondaryTrendDirection\"\n        class=\"b-summary-grid-item-percentage\"\n    >\n        {{ label }}%\n        <template v-if=\"secondaryMetric\" #secondary> {{ secondaryMetric }}% </template>\n    </summary-grid-item>\n</template>\n\n<script lang=\"ts\">\n    import { defineComponent, PropType } from 'vue';\n    import {\n        BentoSummaryGridItemSize,\n        BentoSummaryGridItemTrendDirection,\n    } from '@/components/summary-grid/summary-grid.types';\n    import { SummaryGridItem, SummaryGridItemType } from '../summary-grid-item';\n\n    /**\n     * Summary grid item component used to display any percentage information\n     *\n     * @example\n     * import { BentoSummaryGridItemPercentage, BentoSummaryGridItemSize, BentoSummaryGridItemTrendDirection } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSummaryGridItemPercentage },\n     *     template: `\n     *          <bento-summary-grid-item-percentage\n     *              title=\"Your title\"\n     *              label=\"123\"\n     *              info-icon-tooltip-text=\"Your tooltip text here will be toggled by the info icon\"\n     *              trend=\"+12%\"\n     *              :trend-direction=\"BentoSummaryGridItemTrendDirection.NEUTRAL\"\n     *              :size=\"BentoSummaryGridItemSize.MEDIUM\"\n     *          />\n     *     `\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-summary-grid-item-percentage',\n        components: { SummaryGridItem },\n        inheritAttrs: false,\n        props: {\n            /**\n             * Amount to be shown as the main value\n             */\n            label: {\n                type: String,\n                required: true,\n            },\n            /**\n             * Amount to be shown as the secondary metric value\n             */\n            secondaryMetric: {\n                type: String,\n                default: null,\n            },\n            /**\n             * Text used as a title\n             */\n            title: {\n                type: String,\n                required: true,\n            },\n            /**\n             * Text showed in the info-icon tooltip on hover\n             */\n            infoIconTooltipText: {\n                type: String,\n                default: null,\n            },\n            /**\n             * Text to copy to the clipboard\n             */\n            copy: { type: String, default: undefined },\n            /**\n             * The width of `summary-grid-item` fits its content\n             */\n            fitContent: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Shows colored trend label next to text content\n             */\n            trend: {\n                type: String,\n                default: undefined,\n            },\n            /**\n             * Defines the direction (color) of the trend label\n             */\n            trendDirection: {\n                type: String as PropType<BentoSummaryGridItemTrendDirection>,\n                default: BentoSummaryGridItemTrendDirection.POSITIVE,\n            },\n            /**\n             * Shows colored secondary trend tag next to the secondary metric value\n             */\n            secondaryTrend: {\n                type: String,\n                default: undefined,\n            },\n            /**\n             * Defines the direction (color) of the secondary metric's trend tag\n             */\n            secondaryTrendDirection: {\n                type: String as PropType<BentoSummaryGridItemTrendDirection>,\n                default: BentoSummaryGridItemTrendDirection.POSITIVE,\n            },\n            /**\n             * Defines the size of the `summary-grid-item` text content\n             */\n            size: {\n                type: String as PropType<BentoSummaryGridItemSize>,\n                default: BentoSummaryGridItemSize.SMALL,\n            },\n        },\n\n        setup() {\n            return {\n                // Enums\n                SummaryGridItemType,\n            };\n        },\n    });\n</script>\n","<template>\n    <summary-grid-item\n        :item-type=\"SummaryGridItemType.TEXT\"\n        :info-icon-tooltip-text=\"infoIconTooltipText\"\n        :title=\"title\"\n        :copy=\"copy\"\n        :fit-content=\"fitContent\"\n        class=\"b-summary-grid-item-text\"\n    >\n        {{ label }}\n    </summary-grid-item>\n</template>\n\n<script lang=\"ts\">\n    import { defineComponent } from 'vue';\n    import { SummaryGridItem, SummaryGridItemType } from '../summary-grid-item';\n\n    /**\n     * Summary grid item component used to display text only. Can be used for references, IDs or any other text data.\n     *\n     * @example\n     * import { BentoSummaryGridItemText } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSummaryGridItemText },\n     *     template: `\n     *          <bento-summary-grid-item-text\n     *              title=\"Your title\"\n     *              label=\"Your text here\"\n     *              info-icon-tooltip-text=\"Your tooltip text here will be toggled by the info icon\"\n     *          />\n     *     `\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-summary-grid-item-text',\n        components: { SummaryGridItem },\n        inheritAttrs: false,\n        props: {\n            /**\n             * Text to copy to the clipboard\n             */\n            copy: { type: String, default: undefined },\n\n            /**\n             * Amount to be shown as the main value\n             */\n            label: {\n                type: String,\n                required: true,\n            },\n            /**\n             * Text used as a title\n             */\n            title: {\n                type: String,\n                required: true,\n            },\n            /**\n             * Text showed in the info-icon tooltip on hover\n             */\n            infoIconTooltipText: {\n                type: String,\n                default: null,\n            },\n\n            /**\n             * The width of `summary-grid-item` fits its content\n             */\n            fitContent: {\n                type: Boolean,\n                default: false,\n            },\n        },\n\n        setup() {\n            return {\n                // Enums\n                SummaryGridItemType,\n            };\n        },\n    });\n</script>\n","<template>\n    <summary-grid-item\n        :title=\"title\"\n        :info-icon-tooltip-text=\"infoIconTooltipText\"\n        :copy=\"copy\"\n        :fit-content=\"fitContent\"\n        @copy-to-clipoard=\"$emit('copy-to-clipboard')\"\n    >\n        <slot />\n    </summary-grid-item>\n</template>\n\n<script lang=\"ts\">\n    import { defineComponent } from 'vue';\n    import SummaryGridItem from '../summary-grid-item/summary-grid-item.vue';\n\n    /**\n     * A summary bar item is a piece of information to be displayed in `bento-summary-bar` component\n     *\n     * @example\n     * import { SummaryBarItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { SummaryBarItem },\n     *     template: `\n     *          <summary-grid-item :title=\"textVariable\">\n     *              Content of the item\n     *          </summary-grid-item>\n     *     `\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-summary-grid-item-custom',\n        components: { SummaryGridItem },\n        inheritAttrs: false,\n        props: {\n            /**\n             * Text to copy to the clipboard\n             */\n            copy: { type: String, default: undefined },\n\n            /**\n             * Text showed in the info-icon tooltip on hover\n             */\n            infoIconTooltipText: { type: String, default: null },\n\n            /**\n             * Text used as a title\n             */\n            title: { type: String, required: true },\n\n            /**\n             * The width of `summary-grid-item` fits its content\n             */\n            fitContent: { type: Boolean, default: false },\n        },\n        emits: ['copy-to-clipboard'],\n    });\n</script>\n"],"names":["_sfc_main$6","defineComponent","GridLayout","_props","slots","numberOfRows","slotRows","_b","_a","slotName","hasSlot","openBlock","createElementBlock","_hoisted_1$2","Fragment","renderList","_ctx","index","createBlock","_component_grid_layout","createSlots","withCtx","BentoSummaryGridItemSize","BentoSummaryGridItemSize2","BentoSummaryGridItemTrendDirection","BentoSummaryGridItemTrendDirection2","SummaryGridItemType","SummaryGridItemType2","_sfc_main$5","BentoInfoIcon","BentoTypography","BentoTag","Copy","props","trendDirection","secondaryTrendDirection","itemType","size","toRefs","tagVariantColor","direction","BentoTagVariant","trendVariant","computed","secondaryTrendVariant","isContentTypographyApplied","typographyContentElement","BentoTypographyVariant","typographyProps","computedStyles","summaryBarItemTrendConditionalClasses","BentoTypographyElement","PopperContainerPosition","normalizeStyle","createVNode","_component_bento_typography","createElementVNode","_hoisted_2$1","_component_copy","createCommentVNode","_component_bento_info_icon","mergeProps","renderSlot","_component_bento_tag","_hoisted_4","_sfc_main$4","SummaryGridItem","_component_summary_grid_item","resolveComponent","_hoisted_1","toDisplayString","_hoisted_2","_sfc_main$3","_sfc_main$2","_sfc_main$1","_sfc_main"],"mappings":";;;;;;;;;;AA0DI,MAAAA,IAAAC,EAAA;AAAA,EAA+B,MAAA;AAAA,EACrB,YAAA,EAAA,YAAAC,EAAA;AAAA,EACmB,cAAA;AAAA,EACX,OAAA;AAAA;AAAA;AAAA;AAAA,IACP,aAAA;AAAA,MAIU,MAAA;AAAA,MACH,SAAA;AAAA,IACG;AAAA,EACb;AAAA,EACJ,MAAAC,GAAA,EAAA,OAAAC,EAAA,GAAA;;AAGI,QAAAC,IAAA;AACA,QAAAD,GAAA;AACI,YAAAE,KAAAC,KAAAC,IAAA,OAAA,KAAAJ,CAAA,MAAA,gBAAAI,EAAA,OAAA,CAAAC,MAAAA,EAAA,SAAA,OAAA,OAAA,gBAAAF,EAAA,IAAA,CAAAE,MAAA;;AAAA,yBAAAD,IAAAC,EAAA,MAAA,GAAA,MAAA,gBAAAD,EAAA,IAAA,EAAA;AAAA;AAIA,UADAH,IAAA,KAAA,IAAA,GAAAC,CAAA,GACAD,IAAA;AACI,cAAA,IAAA;AAAA,UAAU;AAAA,QACN;AAAA;AAKZ,WAAA;AAAA,MAAO,SAAAK,EAAAN,CAAA;AAAA,MACmB,cAAAC;AAAA,IACtB;AAAA,EACJ;AAER,CAAA;;;;AAjEkB,SAAAM,EAAA,GAAAC,EAAA,OAAAC,GAAA;AAAA,KAAAF,EAAA,EAAA,GAAAC,EAAAE,GAAA,MAAAC,EAAAC,EAAA,cAAA,CAAAC,MAAA;;AArBT,aAAAN,EAAA,GAAAO,EAAAC,GAAA;AAAA,QAAsC,KAAA,oBAAAF;AAAA,QACxB,eAAA,oBAAAA;AAAA;MAEsB,GAAAG,EAAA,EAAA,GAAA,EAAA,GAAA;AAAA;UACjC,MAAA;AAAA,UAAA,IAAAC,EAAA,MAAA;AAAA;;;QAEY,IAAA;AAAA;UACZ,MAAA;AAAA,UAAA,IAAAA,EAAA,MAAA;AAAA;;;QAEY,IAAA;AAAA;UACZ,MAAA;AAAA,UAAA,IAAAA,EAAA,MAAA;AAAA;;;QAEY,IAAA;AAAA;UACZ,MAAA;AAAA,UAAA,IAAAA,EAAA,MAAA;AAAA;;;QAEY,IAAA;AAAA;UACZ,MAAA;AAAA,UAAA,IAAAA,EAAA,MAAA;AAAA;;;QAEY,IAAA;AAAA;UACZ,MAAA;AAAA,UAAA,IAAAA,EAAA,MAAA;AAAA;;;;;;;;;ACtBJ,IAAAC,IAAA,kBAAAC,OACRA,EAAA,QAAA,SACAA,EAAA,SAAA,UACAA,EAAA,QAAA,SAHQA,IAAAD,KAAA,CAAA,CAAA,GAMAE,IAAA,kBAAAC,OACRA,EAAA,WAAA,YACAA,EAAA,WAAA,YACAA,EAAA,UAAA,WAHQA,IAAAD,KAAA,CAAA,CAAA,GCRAE,IAAA,kBAAAC,OACRA,EAAA,SAAA,UACAA,EAAA,aAAA,cACAA,EAAA,UAAA,WACAA,EAAA,OAAA,QACAA,EAAA,SAAA,UALQA,IAAAD,KAAA,CAAA,CAAA;AC+FR,MAAAE,IAAA3B,EAAA;AAAA,EAA+B,MAAA;AAAA,EACrB,YAAA,EAAA,eAAA4B,GAAA,iBAAAC,GAAA,UAAAC,GAAA,MAAAC,EAAA;AAAA,EACuD,OAAA;AAAA;AAAA;AAAA;AAAA,IACtD,MAAA,EAAA,MAAA,QAAA,SAAA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAIsC,UAAA;AAAA,MAM/B,MAAA;AAAA,MACA,SAAAN,EAAA;AAAA,IACuB;AAAA;AAAA;AAAA;AAAA,IACjC,qBAAA,EAAA,MAAA,QAAA,SAAA,KAAA;AAAA;AAAA;AAAA;AAAA,IAKmD,OAAA,EAAA,MAAA,QAAA,UAAA,GAAA;AAAA;AAAA;AAAA;AAAA,IAKb,YAAA,EAAA,MAAA,SAAA,SAAA,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKM,MAAA;AAAA,MAOtC,MAAA;AAAA,MACI,SAAAJ,EAAA;AAAA,IAC4B;AAAA;AAAA;AAAA;AAAA,IACtC,OAAA;AAAA,MAKO,MAAA;AAAA,MACG,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA,IACb,gBAAA;AAAA,MAKgB,MAAA;AAAA,MACN,SAAAE,EAAA;AAAA,IACsC;AAAA;AAAA;AAAA;AAAA,IAChD,gBAAA;AAAA,MAKgB,MAAA;AAAA,MACN,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA,IACb,yBAAA;AAAA,MAKyB,MAAA;AAAA,MACf,SAAAA,EAAA;AAAA,IACsC;AAAA,EAChD;AAAA,EACJ,MAAAS,GAAA,EAAA,OAAA7B,EAAA,GAAA;AAEI,UAAA,EAAA,gBAAA8B,GAAA,yBAAAC,GAAA,UAAAC,GAAA,MAAAC,EAAA,IAAAC,EAAAL,CAAA,GAEAM,IAAA,CAAAC,MAAA;AACI,cAAAA,GAAA;AAAA,QAAmB,KAAAhB,EAAA;AAEX,iBAAAiB,EAAA;AAAA,QAAuB,KAAAjB,EAAA;AAEvB,iBAAAiB,EAAA;AAAA,QAAuB;AAEvB,iBAAAA,EAAA;AAAA,MAAuB;AAAA,IAC/B,GAIJC,IAAAC,EAAA,MAAAJ,EAAAL,EAAA,KAAA,CAAA,GACAU,IAAAD,EAAA,MAAAJ,EAAAJ,EAAA,KAAA,CAAA,GAEAU,IAAAF;AAAA,MAAmC,MAAAP,EAAA,UAAAV,EAAA,QAAAU,EAAA,UAAAV,EAAA,cAAAU,EAAA,UAAAV,EAAA,UAAAU,EAAA,UAAAV,EAAA;AAAA,IAKY,GAG/CoB,IAAAH,EAAA,MAAA;AACI,UAAAE,EAAA,OAAA;AACI,YAAAR,EAAA,UAAAf,EAAA;AACI,iBAAAyB,EAAA;AAEJ,YAAAX,EAAA,UAAAV,EAAA;AACI,iBAAAqB,EAAA;AAAA;AAIR,aAAA;AAAA,IAAO,CAAA,GAGXC,IAAAL,EAAA,OAAA;AAAA,MAAwC,QAAAN,EAAA,UAAAf,EAAA;AAAA,MACY,WAAAe,EAAA,UAAAf,EAAA;AAAA,MACG,MAAAe,EAAA,UAAAf,EAAA;AAAA,MACL,SAAAwB,EAAA;AAAA,IACZ,EAAA,GAGtCG,IAAAN,EAAA,MAAAV,EAAA,aAAA,EAAA,OAAA,cAAA,IAAA,CAAA,CAAA,GAEAiB,IAAAP,EAAA,OAAA;AAAA,MAA8D,CAAA,uCAAAV,EAAA,OAAA,GAAAA,EAAA;AAAA,IACI,EAAA;AAGlE,WAAA;AAAA;AAAA,MAAO,cAAAS;AAAA,MAEH,uBAAAE;AAAA,MACA,4BAAAC;AAAA,MACA,iBAAAG;AAAA;AAAA,MACA,gBAAAC;AAAA,MAGA,uCAAAC;AAAA;AAAA,MACA,wBAAAC;AAAA,MAGA,wBAAAJ;AAAA,MACA,qBAAArB;AAAA,MACA,0BAAAJ;AAAA,MACA,yBAAA8B;AAAA;AAAA,MACA,SAAA1C,EAAAN,CAAA;AAAA,IAGsB;AAAA,EAC1B;AAER,CAAA;;EA5M2C,KAAA;AAAA;;;;AAvCJ,SAAAO,EAAA,GAAAC,EAAA,OAAA;AAAA,IAAgB,OAAA;AAAA,IACnD,OAAAyC,EAAArC,EAAA,cAAA;AAAA,EAkBM,GAAA;AAAA;MAhBoCsC,EAAAC,GAAA;AAAA,QACF,OAAA;AAAA,QACxB,IAAAvC,EAAA,uBAAA;AAAA,QAEG,SAAAA,EAAA,uBAAA;AAAA,MAAA,GAAA;AAAA;;;QAEf,GAAA;AAAA,MAAA,GAAA,GAAA,CAAA,MAAA,SAAA,CAAA;AAAA,MACoBwC,EAAA,OAAAC,IAAA;AAAA,QAAiDzC,EAAA,QAAAL,EAAA,GAAAO,EAAAwC,GAAA;AAAA,UAAhB,KAAA;AAAA,UAAM,OAAA;AAAA;QAG7C,GAAA,MAAA,GAAA,CAAA,MAAA,CAAA,KAAAC,EAAA,IAAA,EAAA;AAAA,QAIR3C,EAAA,uBAAAL,EAAA,GAAAO,EAAA0C,GAAA;AAAA,UAHoC,KAAA;AAAA,UACjC,gBAAA5C,EAAA;AAAA,UACK,oBAAAA,EAAA,wBAAA;AAAA;;MAIlB,CAAA;AAAA,IAAA,CAAA;AAAA;MAeuBA,EAAA,8BAAAL,EAAA,GAAAO,EAAAqC,GAAAM,EAAA;AAAA,QAZmC,KAAA;AAAA,QAC7C,eAAA;AAAA,QACG,OAAA;AAAA,MACH,GAAA7C,EAAA,iBAAA;AAAA,QAEG,IAAAA,EAAA,uBAAA;AAAA,MAAA,CAAA,GAAA;AAAA,QAAR,SAAAK,EAAA,MAAA;AAAA,UAEmByC,EAAA9C,EAAA,QAAA,WAAA,CAAA,GAAA,QAAA,EAAA;AAAA,UAIjBA,EAAA,SAAAA,EAAA,aAAAA,EAAA,oBAAA,QAAAL,EAAA,GAAAO,EAAA6C,GAAA;AAAA,YAHwB,KAAA;AAAA,YAChB,SAAA/C,EAAA;AAAA,YACA,OAAAA,EAAA;AAAA;;;QAId,GAAA;AAAA,MAAA,GAAA,IAAA,CAAA,IAAA,CAAA,KAAA8C,EAAA9C,EAAA,QAAA,WAAA,EAAA,KAAA,EAAA,GAAA,QAAA,EAAA;AAAA,IAEc,CAAA;AAAA,IACdA,EAAA,QAAA,WAAA,KAAAL,EAAA,GAAAC,EAAA,OAAAoD,IAAA;AAAA,MACsCV,EAAAC,GAAA;AAAA,QACtB,OAAA;AAAA,QACP,eAAA;AAAA,QACK,IAAAvC,EAAA,uBAAA;AAAA,QACF,SAAAA,EAAA,uBAAA;AAAA;;;UAIgB8C,EAAA9C,EAAA,QAAA,aAAA,CAAA,GAAA,QAAA,EAAA;AAAA,UAItBA,EAAA,kBAAAL,EAAA,GAAAO,EAAA6C,GAAA;AAAA,YAHiC,KAAA;AAAA,YACzB,SAAA/C,EAAA;AAAA,YACA,OAAAA,EAAA;AAAA;;;;;;;;oFCAtBiD,KAAAhE,EAAA;AAAA,EAA+B,MAAA;AAAA,EACrB,YAAA,EAAA,iBAAAiE,EAAA;AAAA,EACwB,cAAA;AAAA,EAChB,OAAA;AAAA;AAAA;AAAA;AAAA,IACP,MAAA,EAAA,MAAA,QAAA,SAAA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIsC,OAAA;AAAA,MAKlC,MAAA;AAAA,MACG,UAAA;AAAA,IACI;AAAA;AAAA;AAAA;AAAA,IACd,gBAAA;AAAA,MAKgB,MAAA;AAAA,MACN,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA,IACb,iBAAA;AAAA,MAKiB,MAAA;AAAA,MACP,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA,IACb,OAAA;AAAA,MAKO,MAAA;AAAA,MACG,UAAA;AAAA,IACI;AAAA;AAAA;AAAA;AAAA,IACd,qBAAA;AAAA,MAKqB,MAAA;AAAA,MACX,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA,IACb,YAAA;AAAA,MAKY,MAAA;AAAA,MACF,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA,IACb,OAAA;AAAA,MAKO,MAAA;AAAA,MACG,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA,IACb,gBAAA;AAAA,MAKgB,MAAA;AAAA,MACN,SAAA1C,EAAA;AAAA,IACsC;AAAA;AAAA;AAAA;AAAA,IAChD,gBAAA;AAAA,MAKgB,MAAA;AAAA,MACN,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA,IACb,yBAAA;AAAA,MAKyB,MAAA;AAAA,MACf,SAAAA,EAAA;AAAA,IACsC;AAAA;AAAA;AAAA;AAAA,IAChD,MAAA;AAAA,MAKM,MAAA;AAAA,MACI,SAAAF,EAAA;AAAA,IAC4B;AAAA,EACtC;AAAA,EACJ,QAAA;AAGI,WAAA;AAAA;AAAA,MAAO,qBAAAI;AAAA,IAEH;AAAA,EACJ;AAER,CAAA;;EA9IyC,KAAA;AAAA;;;AAKrB,QAAAyC,IAAAC,EAAA,mBAAA;AAlBf,SAAAzD,EAAA,GAAAO,EAAAiD,GAAA;AAAA,IAA2C,aAAAnD,EAAA,oBAAA;AAAA,IAC/B,0BAAAA,EAAA;AAAA,IACF,OAAAA,EAAA;AAAA,IACV,MAAAA,EAAA;AAAA,IACM,eAAAA,EAAA;AAAA,IACM,MAAAA,EAAA;AAAA,IACZ,OAAAA,EAAA;AAAA,IACA,mBAAAA,EAAA;AAAA,IACA,mBAAAA,EAAA;AAAA,IACK,6BAAAA,EAAA;AAAA;EAEN,GAAAI,EAAA;AAAA,IAAA,SAAAC,EAAA,MAAA;AAAA,MAC0BmC,EAAA,OAAAa,IAAA;AAAA,QACGb,EAAA,OAAA,MAAAc,EAAAtD,EAAA,KAAA,GAAA,CAAA;AAAA,QAAgFA,EAAA,kBAAAL,EAAA,GAAAC,EAAA,OAAA2D,IAAAD,EAAAtD,EAAA,cAAA,GAAA,CAAA,KAAA2C,EAAA,IAAA,EAAA;AAAA;;IAE7F,GAAA;AAAA,EAAA,GAAA;AAAA;;;;;;;;;sFC+BpBa,KAAAvE,EAAA;AAAA,EAA+B,MAAA;AAAA,EACrB,YAAA,EAAA,iBAAAiE,EAAA;AAAA,EACwB,cAAA;AAAA,EAChB,OAAA;AAAA;AAAA;AAAA;AAAA,IACP,MAAA,EAAA,MAAA,QAAA,SAAA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIsC,OAAA;AAAA,MAKlC,MAAA;AAAA,MACG,UAAA;AAAA,IACI;AAAA;AAAA;AAAA;AAAA,IACd,iBAAA;AAAA,MAIiB,MAAA;AAAA,MACP,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA,IACb,OAAA;AAAA,MAIO,MAAA;AAAA,MACG,UAAA;AAAA,IACI;AAAA;AAAA;AAAA;AAAA,IACd,qBAAA;AAAA,MAIqB,MAAA;AAAA,MACX,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA,IACb,YAAA;AAAA,MAKY,MAAA;AAAA,MACF,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA,IACb,OAAA;AAAA,MAIO,MAAA;AAAA,MACG,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA,IACb,gBAAA;AAAA,MAIgB,MAAA;AAAA,MACN,SAAA1C,EAAA;AAAA,IACsC;AAAA;AAAA;AAAA;AAAA,IAChD,gBAAA;AAAA,MAIgB,MAAA;AAAA,MACN,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA,IACb,yBAAA;AAAA,MAIyB,MAAA;AAAA,MACf,SAAAA,EAAA;AAAA,IACsC;AAAA;AAAA;AAAA;AAAA,IAChD,MAAA;AAAA,MAIM,MAAA;AAAA,MACI,SAAAF,EAAA;AAAA,IAC4B;AAAA,EACtC;AAAA,EACJ,QAAA;AAGI,WAAA;AAAA;AAAA,MAAO,qBAAAI;AAAA,IAEH;AAAA,EACJ;AAER,CAAA;;AAxHoB,QAAAyC,IAAAC,EAAA,mBAAA;AAff,SAAAzD,EAAA,GAAAO,EAAAiD,GAAA;AAAA,IAA2C,aAAAnD,EAAA,oBAAA;AAAA,IAC/B,0BAAAA,EAAA;AAAA,IACF,OAAAA,EAAA;AAAA,IACV,MAAAA,EAAA;AAAA,IACM,eAAAA,EAAA;AAAA,IACM,MAAAA,EAAA;AAAA,IACZ,OAAAA,EAAA;AAAA,IACA,mBAAAA,EAAA;AAAA,IACA,mBAAAA,EAAA;AAAA,IACK,6BAAAA,EAAA;AAAA;;;;;IAGU,GAAA;AAAA,EAAA,GAAA;AAAA;;;;;;;;;oDCgCpByD,KAAAxE,EAAA;AAAA,EAA+B,MAAA;AAAA,EACrB,YAAA,EAAA,iBAAAiE,EAAA;AAAA,EACwB,cAAA;AAAA,EAChB,OAAA;AAAA;AAAA;AAAA;AAAA,IACP,OAAA;AAAA,MAII,MAAA;AAAA,MACG,UAAA;AAAA,IACI;AAAA;AAAA;AAAA;AAAA,IACd,iBAAA;AAAA,MAIiB,MAAA;AAAA,MACP,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA,IACb,OAAA;AAAA,MAIO,MAAA;AAAA,MACG,UAAA;AAAA,IACI;AAAA;AAAA;AAAA;AAAA,IACd,qBAAA;AAAA,MAIqB,MAAA;AAAA,MACX,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA,IACb,MAAA,EAAA,MAAA,QAAA,SAAA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIyC,YAAA;AAAA,MAI7B,MAAA;AAAA,MACF,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA,IACb,OAAA;AAAA,MAIO,MAAA;AAAA,MACG,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA,IACb,gBAAA;AAAA,MAIgB,MAAA;AAAA,MACN,SAAA1C,EAAA;AAAA,IACsC;AAAA;AAAA;AAAA;AAAA,IAChD,gBAAA;AAAA,MAIgB,MAAA;AAAA,MACN,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA,IACb,yBAAA;AAAA,MAIyB,MAAA;AAAA,MACf,SAAAA,EAAA;AAAA,IACsC;AAAA;AAAA;AAAA;AAAA,IAChD,MAAA;AAAA,MAIM,MAAA;AAAA,MACI,SAAAF,EAAA;AAAA,IAC4B;AAAA,EACtC;AAAA,EACJ,QAAA;AAGI,WAAA;AAAA;AAAA,MAAO,qBAAAI;AAAA,IAEH;AAAA,EACJ;AAER,CAAA;;AAtHoB,QAAAyC,IAAAC,EAAA,mBAAA;AAbf,SAAAzD,EAAA,GAAAO,EAAAiD,GAAA;AAAA,IAA2C,aAAAnD,EAAA,oBAAA;AAAA,IAC/B,0BAAAA,EAAA;AAAA,IACF,OAAAA,EAAA;AAAA,IACV,MAAAA,EAAA;AAAA,IACM,eAAAA,EAAA;AAAA,IACM,MAAAA,EAAA;AAAA,IACZ,OAAAA,EAAA;AAAA,IACA,mBAAAA,EAAA;AAAA,IACA,mBAAAA,EAAA;AAAA,IACK,6BAAAA,EAAA;AAAA;;;;;IAGU,GAAA;AAAA,EAAA,GAAA;AAAA;;;;;;;;;oDCmBpB0D,KAAAzE,EAAA;AAAA,EAA+B,MAAA;AAAA,EACrB,YAAA,EAAA,iBAAAiE,EAAA;AAAA,EACwB,cAAA;AAAA,EAChB,OAAA;AAAA;AAAA;AAAA;AAAA,IACP,MAAA,EAAA,MAAA,QAAA,SAAA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIsC,OAAA;AAAA,MAKlC,MAAA;AAAA,MACG,UAAA;AAAA,IACI;AAAA;AAAA;AAAA;AAAA,IACd,OAAA;AAAA,MAIO,MAAA;AAAA,MACG,UAAA;AAAA,IACI;AAAA;AAAA;AAAA;AAAA,IACd,qBAAA;AAAA,MAIqB,MAAA;AAAA,MACX,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA,IACb,YAAA;AAAA,MAKY,MAAA;AAAA,MACF,SAAA;AAAA,IACG;AAAA,EACb;AAAA,EACJ,QAAA;AAGI,WAAA;AAAA;AAAA,MAAO,qBAAAxC;AAAA,IAEH;AAAA,EACJ;AAER,CAAA;;AAvEoB,QAAAyC,IAAAC,EAAA,mBAAA;AAPf,SAAAzD,EAAA,GAAAO,EAAAiD,GAAA;AAAA,IAA2C,aAAAnD,EAAA,oBAAA;AAAA,IAC/B,0BAAAA,EAAA;AAAA,IACF,OAAAA,EAAA;AAAA,IACV,MAAAA,EAAA;AAAA,IACK,eAAAA,EAAA;AAAA;;;;;;;;oDCwBV2D,KAAA1E,EAAA;AAAA,EAA+B,MAAA;AAAA,EACrB,YAAA,EAAA,iBAAAiE,EAAA;AAAA,EACwB,cAAA;AAAA,EAChB,OAAA;AAAA;AAAA;AAAA;AAAA,IACP,MAAA,EAAA,MAAA,QAAA,SAAA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIsC,qBAAA,EAAA,MAAA,QAAA,SAAA,KAAA;AAAA;AAAA;AAAA;AAAA,IAKU,OAAA,EAAA,MAAA,QAAA,UAAA,GAAA;AAAA;AAAA;AAAA;AAAA,IAKb,YAAA,EAAA,MAAA,SAAA,SAAA,GAAA;AAAA,EAKM;AAAA,EAChD,OAAA,CAAA,mBAAA;AAEJ,CAAA;;AAhDoB,QAAAC,IAAAC,EAAA,mBAAA;AANf,SAAAzD,EAAA,GAAAO,EAAAiD,GAAA;AAAA,IAA2C,OAAAnD,EAAA;AAAA,IACrC,0BAAAA,EAAA;AAAA,IACiB,MAAAA,EAAA;AAAA,IACvB,eAAAA,EAAA;AAAA;EAEO,GAAA;AAAA;;;;;;;"}
+{"version":3,"file":"summary-grid.js","sources":["../../vue2/src/components/summary-grid/summary-grid.vue","../../vue2/src/components/summary-grid/summary-grid.types.ts","../../vue2/src/components/summary-grid/components/summary-grid-item/summary-grid-item.types.ts","../../vue2/src/components/summary-grid/components/summary-grid-item/summary-grid-item.vue","../../vue2/src/components/summary-grid/components/summary-grid-item-amount/summary-grid-item-amount.vue","../../vue2/src/components/summary-grid/components/summary-grid-item-numeric/summary-grid-item-numeric.vue","../../vue2/src/components/summary-grid/components/summary-grid-item-percentage/summary-grid-item-percentage.vue","../../vue2/src/components/summary-grid/components/summary-grid-item-text/summary-grid-item-text.vue","../../vue2/src/components/summary-grid/components/summary-grid-item-custom/summary-grid-item-custom.vue"],"sourcesContent":["<template>\n    <div class=\"b-summary-grid\">\n        <grid-layout\n            v-for=\"index in numberOfRows\"\n            :key=\"`summary-grid-row-${index}`\"\n            :data-testid=\"`summary-grid-row-${index}`\"\n            :column-width=\"columnWidth?.[`row${index}`]\"\n        >\n            <template v-if=\"hasSlot(`cell-${index}-1`)\" #col-1>\n                <slot :name=\"`cell-${index}-1`\" />\n            </template>\n            <template v-if=\"hasSlot(`cell-${index}-2`)\" #col-2>\n                <slot :name=\"`cell-${index}-2`\" />\n            </template>\n            <template v-if=\"hasSlot(`cell-${index}-3`)\" #col-3>\n                <slot :name=\"`cell-${index}-3`\" />\n            </template>\n            <template v-if=\"hasSlot(`cell-${index}-4`)\" #col-4>\n                <slot :name=\"`cell-${index}-4`\" />\n            </template>\n            <template v-if=\"hasSlot(`cell-${index}-5`)\" #col-5>\n                <slot :name=\"`cell-${index}-5`\" />\n            </template>\n            <template v-if=\"hasSlot(`cell-${index}-6`)\" #col-6>\n                <slot :name=\"`cell-${index}-6`\" />\n            </template>\n        </grid-layout>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { defineComponent, PropType } from 'vue';\n    import { BentoSummaryGridColumnWidth } from './summary-grid.types';\n    import { GridLayout } from '@/components/internal';\n    import { useHasSlot } from '@/composables';\n\n    /**\n     * A summary grid component that displays a collection items.\n     *\n     * @example\n     * import { BentoSummaryGrid, BentoSummaryGridItemAmount } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSummaryGrid, BentoSummaryGridItemAmount },\n     *     template: `\n     *          <bento-summary-grid>\n     *             <template #cell-2-2>\n     *                <bento-summary-grid-item-amount\n     *                   title=\"Text Item\"\n     *                   label=\"14\"\n     *                   info-icon-tooltip-text=\"text for icon\"\n     *                   copy=\"copy this to clipboard\"\n     *                />\n     *             </template>\n     *          </bento-summary-grid>\n     *     `\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-summary-grid',\n        components: { GridLayout },\n        props: {\n            /**\n             * Sets the responsive columns widths values for 1 of the 3 rows.\n             */\n            columnWidth: {\n                type: Object as PropType<BentoSummaryGridColumnWidth>,\n                default: null,\n            },\n        },\n\n        setup(_props, { slots }) {\n            let numberOfRows = 1;\n            if (slots) {\n                const slotRows = Object.keys(slots)\n                    ?.filter(slotName => slotName.includes('cell-'))\n                    ?.map(slotName => parseInt(slotName.split('-')?.[1], 10));\n                numberOfRows = Math.max(...slotRows);\n                if (numberOfRows > 3) {\n                    throw new Error(\n                        'BentoSummaryGrid must only have a maximum of 3 rows. Read the documentation for more information.'\n                    );\n                }\n            }\n\n            return {\n                hasSlot: useHasSlot(slots),\n                numberOfRows,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./summary-grid.scss\" />\n","import { GridLayoutColumnWidth } from '@/components/internal/grid-layout/grid-layout.types';\n\nexport enum BentoSummaryGridItemSize {\n    SMALL = 'small',\n    MEDIUM = 'medium',\n    LARGE = 'large',\n}\n\nexport enum BentoSummaryGridItemTrendDirection {\n    POSITIVE = 'positive',\n    NEGATIVE = 'negative',\n    NEUTRAL = 'neutral',\n}\n\nexport interface BentoSummaryGridColumnWidth {\n    row1: Array<GridLayoutColumnWidth>;\n    row2?: Array<GridLayoutColumnWidth>;\n    row3?: Array<GridLayoutColumnWidth>;\n}\n","export enum SummaryGridItemType {\n    AMOUNT = 'amount',\n    PERCENTAGE = 'percentage',\n    NUMERIC = 'numeric',\n    TEXT = 'text',\n    CUSTOM = 'custom',\n}\n","<template>\n    <div class=\"b-summary-grid-item\" :style=\"computedStyles\">\n        <div class=\"b-summary-grid-item__header\">\n            <bento-typography\n                class=\"b-summary-grid-item__title\"\n                :el=\"BentoTypographyElement.SPAN\"\n                :variant=\"BentoTypographyVariant.BODY\"\n            >\n                {{ title }}\n            </bento-typography>\n            <div class=\"b-summary-grid-item__title-icons\">\n                <copy v-if=\"copy\" class=\"b-structured-list__icon\" :text=\"copy\" />\n\n                <bento-info-icon\n                    v-if=\"infoIconTooltipText\"\n                    :tooltip-text=\"infoIconTooltipText\"\n                    :tooltip-position=\"PopperContainerPosition.TOP\"\n                    class=\"b-summary-grid-item__title-tooltip\"\n                />\n            </div>\n        </div>\n        <div class=\"b-summary-grid-item__content--primary\">\n            <bento-typography\n                v-if=\"isContentTypographyApplied\"\n                data-testid=\"summary-grid-item-content-typography\"\n                class=\"b-summary-grid-item__title\"\n                v-bind=\"typographyProps\"\n                :el=\"BentoTypographyElement.SPAN\"\n            >\n                <slot />\n                <bento-tag\n                    v-if=\"trend && itemType !== SummaryGridItemType.TEXT\"\n                    :variant=\"trendVariant\"\n                    :label=\"trend\"\n                    class=\"b-summary-grid-item__content-trend\"\n                />\n            </bento-typography>\n\n            <slot v-else />\n        </div>\n        <div v-if=\"hasSlot('secondary')\" class=\"b-summary-grid-item__content--secondary\">\n            <bento-typography\n                class=\"b-summary-grid-item__title\"\n                data-testid=\"summary-grid-item-secondary-metric-typography\"\n                :el=\"BentoTypographyElement.SPAN\"\n                :variant=\"BentoTypographyVariant.CAPTION\"\n                stronger\n            >\n                <slot name=\"secondary\" />\n                <bento-tag\n                    v-if=\"secondaryTrend\"\n                    :variant=\"secondaryTrendVariant\"\n                    :label=\"secondaryTrend\"\n                    class=\"b-summary-grid-item__content-trend\"\n                />\n            </bento-typography>\n        </div>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, toRefs } from 'vue';\n\n    // Components\n    import { BentoInfoIcon } from '@/components/info-icon';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import { BentoTag, BentoTagVariant } from '@/components/tag';\n    import { PopperContainerPosition } from '@/components/popper-container';\n    import { Copy } from '@/internal';\n\n    // Utils\n    import { useHasSlot } from '@/composables';\n\n    // Types\n    import {\n        BentoSummaryGridItemSize,\n        BentoSummaryGridItemTrendDirection,\n    } from '@/components/summary-grid/summary-grid.types';\n    import { SummaryGridItemType } from './summary-grid-item.types';\n\n    /**\n     * A summary bar item is a piece of information to be displayed in `bento-summary-bar` component\n     *\n     * @example\n     * import { SummaryBarItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { SummaryBarItem },\n     *     template: `\n     *          <summary-grid-item :title=\"textVariable\">\n     *              Content of the item\n     *          </summary-grid-item>\n     *     `\n     * }\n     */\n    export default defineComponent({\n        name: 'summary-grid-item',\n        components: { BentoInfoIcon, BentoTypography, BentoTag, Copy },\n        props: {\n            /**\n             * Text to copy to the clipboard\n             */\n            copy: { type: String, default: undefined },\n\n            /**\n             * Applies styling based on content type\n             */\n            // TODO add text truncation for SummaryGridItemType.TEXT\n            itemType: {\n                type: String as PropType<SummaryGridItemType>,\n                default: SummaryGridItemType.CUSTOM,\n            },\n\n            /**\n             * Text showed in the info-icon tooltip on hover\n             */\n            infoIconTooltipText: { type: String, default: null },\n\n            /**\n             * Text used as a title\n             */\n            title: { type: String, required: true },\n\n            /**\n             * The width of `summary-grid-item` fits its content\n             */\n            fitContent: { type: Boolean, default: false },\n\n            // amount, percentage and numeric props\n            /**\n             * Defines the size of the `summary-grid-item` text content\n             */\n            // TODO implement logic for Large size\n            size: {\n                type: String as PropType<BentoSummaryGridItemSize>,\n                default: BentoSummaryGridItemSize.SMALL,\n            },\n\n            /**\n             * Shows colored trend label next to text content\n             */\n            trend: {\n                type: String,\n                default: null,\n            },\n\n            /**\n             * Defines the color of trend label\n             */\n            trendDirection: {\n                type: String as PropType<BentoSummaryGridItemTrendDirection>,\n                default: BentoSummaryGridItemTrendDirection.POSITIVE,\n            },\n\n            /**\n             * Shows colored trend tag next to secondary metric value\n             */\n            secondaryTrend: {\n                type: String,\n                default: null,\n            },\n\n            /**\n             * Defines the color of secondary trend tag\n             */\n            secondaryTrendDirection: {\n                type: String as PropType<BentoSummaryGridItemTrendDirection>,\n                default: BentoSummaryGridItemTrendDirection.POSITIVE,\n            },\n        },\n        setup(props, { slots }) {\n            const { trendDirection, secondaryTrendDirection, itemType, size } = toRefs(props);\n\n            const tagVariantColor = direction => {\n                switch (direction) {\n                    case BentoSummaryGridItemTrendDirection.POSITIVE:\n                        return BentoTagVariant.GREEN;\n                    case BentoSummaryGridItemTrendDirection.NEGATIVE:\n                        return BentoTagVariant.RED;\n                    default:\n                        return BentoTagVariant.BLUE;\n                }\n            };\n\n            // TODO implement plus or minus symbol logic\n            const trendVariant = computed(() => tagVariantColor(trendDirection.value));\n            const secondaryTrendVariant = computed(() => tagVariantColor(secondaryTrendDirection.value));\n\n            const isContentTypographyApplied = computed(\n                () =>\n                    itemType.value === SummaryGridItemType.TEXT ||\n                    itemType.value === SummaryGridItemType.PERCENTAGE ||\n                    itemType.value === SummaryGridItemType.AMOUNT ||\n                    itemType.value === SummaryGridItemType.NUMERIC\n            );\n\n            const typographyContentElement = computed(() => {\n                if (isContentTypographyApplied.value) {\n                    if (size.value === BentoSummaryGridItemSize.SMALL) {\n                        return BentoTypographyVariant.BODY;\n                    }\n                    if (itemType.value !== SummaryGridItemType.TEXT) {\n                        return BentoTypographyVariant.TITLE;\n                    }\n                }\n\n                return null;\n            });\n\n            const typographyProps = computed(() => ({\n                medium: size.value === BentoSummaryGridItemSize.LARGE,\n                strongest: size.value === BentoSummaryGridItemSize.SMALL,\n                wide: size.value === BentoSummaryGridItemSize.SMALL,\n                variant: typographyContentElement.value,\n            }));\n\n            const computedStyles = computed(() => (props.fitContent ? { width: 'fit-content' } : {}));\n\n            const summaryBarItemTrendConditionalClasses = computed(() => ({\n                [`b-summary-grid-item__content-trend--${props.trend}`]: props.trend,\n            }));\n\n            return {\n                // Values\n                trendVariant,\n                secondaryTrendVariant,\n                isContentTypographyApplied,\n                typographyProps,\n\n                // Styles\n                computedStyles,\n                summaryBarItemTrendConditionalClasses,\n\n                // Enums\n                BentoTypographyElement,\n                BentoTypographyVariant,\n                SummaryGridItemType,\n                BentoSummaryGridItemSize,\n                PopperContainerPosition,\n\n                // Utils\n                hasSlot: useHasSlot(slots),\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./summary-grid-item.scss\" />\n","<template>\n    <summary-grid-item\n        :item-type=\"SummaryGridItemType.AMOUNT\"\n        :info-icon-tooltip-text=\"infoIconTooltipText\"\n        :title=\"title\"\n        :copy=\"copy\"\n        :fit-content=\"fitContent\"\n        :size=\"size\"\n        :trend=\"trend\"\n        :trend-direction=\"trendDirection\"\n        :secondary-trend=\"secondaryTrend\"\n        :secondary-trend-direction=\"secondaryTrendDirection\"\n        class=\"b-summary-grid-item-amount\"\n    >\n        <div class=\"b-summary-grid-item-amount__content\">\n            <div>{{ label }}</div>\n            <div v-if=\"secondaryLabel\" class=\"b-summary-grid-item-amount__secondary-label\">{{ secondaryLabel }}</div>\n        </div>\n        <template v-if=\"secondaryMetric\" #secondary>\n            {{ secondaryMetric }}\n        </template>\n    </summary-grid-item>\n</template>\n\n<script lang=\"ts\">\n    import { defineComponent, PropType } from 'vue';\n    import {\n        BentoSummaryGridItemSize,\n        BentoSummaryGridItemTrendDirection,\n    } from '@/components/summary-grid/summary-grid.types';\n    import { SummaryGridItem, SummaryGridItemType } from '../summary-grid-item';\n\n    /**\n     * Summary grid item component used to display financial data, such as currency values and monetary amounts\n     *\n     * @example\n     * import { BentoSummaryGridItemAmount, BentoSummaryGridItemSize, BentoSummaryGridItemTrendDirection } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSummaryGridItemAmount },\n     *     template: `\n     *          <bento-summary-grid-item-amount\n     *              title=\"Your title\"\n     *              label=\"200.00 EUR\"\n     *              secondary-label=\"/ day\"\n     *              info-icon-tooltip-text=\"Your tooltip text here will be toggled by the info icon\"\n     *              trend=\"+12%\"\n     *              :trend-direction=\"BentoSummaryGridItemTrendDirection.NEUTRAL\"\n     *              :size=\"BentoSummaryGridItemSize.MEDIUM\"\n     *          />\n     *     `\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-summary-grid-item-amount',\n        components: { SummaryGridItem },\n        props: {\n            /**\n             * Text to copy to the clipboard\n             */\n            copy: { type: String, default: undefined },\n\n            /**\n             * Amount to be shown as the main value\n             */\n            label: {\n                type: String,\n                required: true,\n            },\n\n            /**\n             * Adds additional label next to amount content\n             */\n            secondaryLabel: {\n                type: String,\n                default: null,\n            },\n\n            /**\n             * Amount to be shown as the secondary metric value\n             */\n            secondaryMetric: {\n                type: String,\n                default: null,\n            },\n\n            /**\n             * Text used as a title\n             */\n            title: {\n                type: String,\n                required: true,\n            },\n\n            /**\n             * Text showed in the info-icon tooltip on hover\n             */\n            infoIconTooltipText: {\n                type: String,\n                default: null,\n            },\n\n            /**\n             * The width of `summary-grid-item` fits its content\n             */\n            fitContent: {\n                type: Boolean,\n                default: false,\n            },\n\n            /**\n             * Shows colored trend label next to main label\n             */\n            trend: {\n                type: String,\n                default: null,\n            },\n\n            /**\n             * Defines the direction (color) of the trend label\n             */\n            trendDirection: {\n                type: String as PropType<BentoSummaryGridItemTrendDirection>,\n                default: BentoSummaryGridItemTrendDirection.POSITIVE,\n            },\n\n            /**\n             * Shows colored secondary trend tag next to the secondary metric value\n             */\n            secondaryTrend: {\n                type: String,\n                default: null,\n            },\n\n            /**\n             * Defines the direction (color) of the secondary metric's trend tag\n             */\n            secondaryTrendDirection: {\n                type: String as PropType<BentoSummaryGridItemTrendDirection>,\n                default: BentoSummaryGridItemTrendDirection.POSITIVE,\n            },\n\n            /**\n             * Defines the size of the `summary-grid-item` text content\n             */\n            size: {\n                type: String as PropType<BentoSummaryGridItemSize>,\n                default: BentoSummaryGridItemSize.SMALL,\n            },\n        },\n\n        setup() {\n            return {\n                // Enums\n                SummaryGridItemType,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./summary-grid-item-amount.scss\" />\n","<template>\n    <summary-grid-item\n        :item-type=\"SummaryGridItemType.NUMERIC\"\n        :info-icon-tooltip-text=\"infoIconTooltipText\"\n        :title=\"title\"\n        :copy=\"copy\"\n        :fit-content=\"fitContent\"\n        :size=\"size\"\n        :trend=\"trend\"\n        :trend-direction=\"trendDirection\"\n        :secondary-trend=\"secondaryTrend\"\n        :secondary-trend-direction=\"secondaryTrendDirection\"\n        class=\"b-summary-grid-item-numeric\"\n    >\n        {{ label }}\n        <template v-if=\"secondaryMetric\" #secondary>\n            {{ secondaryMetric }}\n        </template>\n    </summary-grid-item>\n</template>\n\n<script lang=\"ts\">\n    import { defineComponent, PropType } from 'vue';\n    import {\n        BentoSummaryGridItemSize,\n        BentoSummaryGridItemTrendDirection,\n    } from '@/components/summary-grid/summary-grid.types';\n    import { SummaryGridItem, SummaryGridItemType } from '../summary-grid-item';\n\n    /**\n     * Summary grid item component used to display any numeric information\n     *\n     * @example\n     * import { BentoSummaryGridItemNumeric, BentoSummaryGridItemSize, BentoSummaryGridItemTrendDirection } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSummaryGridItemNumeric },\n     *     template: `\n     *          <bento-summary-grid-item-numeric\n     *              title=\"Your title\"\n     *              label=\"123\"\n     *              info-icon-tooltip-text=\"Your tooltip text here will be toggled by the info icon\"\n     *              trend=\"+12%\"\n     *              :trend-direction=\"BentoSummaryGridItemTrendDirection.NEUTRAL\"\n     *              :size=\"BentoSummaryGridItemSize.MEDIUM\"\n     *          />\n     *     `\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-summary-grid-item-numeric',\n        components: { SummaryGridItem },\n        props: {\n            /**\n             * Text to copy to the clipboard\n             */\n            copy: { type: String, default: undefined },\n\n            /**\n             * Amount to be shown as the main value\n             */\n            label: {\n                type: String,\n                required: true,\n            },\n            /**\n             * Amount to be shown as the secondary metric value\n             */\n            secondaryMetric: {\n                type: String,\n                default: null,\n            },\n            /**\n             * Text used as a title\n             */\n            title: {\n                type: String,\n                required: true,\n            },\n            /**\n             * Text showed in the info-icon tooltip on hover\n             */\n            infoIconTooltipText: {\n                type: String,\n                default: null,\n            },\n\n            /**\n             * The width of `summary-grid-item` fits its content\n             */\n            fitContent: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Shows colored trend label next to main numeric content\n             */\n            trend: {\n                type: String,\n                default: null,\n            },\n            /**\n             * Defines the direction (color) of the trend label\n             */\n            trendDirection: {\n                type: String as PropType<BentoSummaryGridItemTrendDirection>,\n                default: BentoSummaryGridItemTrendDirection.POSITIVE,\n            },\n            /**\n             * Shows colored secondary trend tag next to the secondary metric value\n             */\n            secondaryTrend: {\n                type: String,\n                default: null,\n            },\n            /**\n             * Defines the direction (color) of the secondary metric's trend tag\n             */\n            secondaryTrendDirection: {\n                type: String as PropType<BentoSummaryGridItemTrendDirection>,\n                default: BentoSummaryGridItemTrendDirection.POSITIVE,\n            },\n            /**\n             * Defines the size of the `summary-grid-item` text content\n             */\n            size: {\n                type: String as PropType<BentoSummaryGridItemSize>,\n                default: BentoSummaryGridItemSize.SMALL,\n            },\n        },\n\n        setup() {\n            return {\n                // Enums\n                SummaryGridItemType,\n            };\n        },\n    });\n</script>\n","<template>\n    <summary-grid-item\n        :item-type=\"SummaryGridItemType.PERCENTAGE\"\n        :info-icon-tooltip-text=\"infoIconTooltipText\"\n        :title=\"title\"\n        :copy=\"copy\"\n        :fit-content=\"fitContent\"\n        :size=\"size\"\n        :trend=\"trend\"\n        :trend-direction=\"trendDirection\"\n        :secondary-trend=\"secondaryTrend\"\n        :secondary-trend-direction=\"secondaryTrendDirection\"\n        class=\"b-summary-grid-item-percentage\"\n    >\n        {{ label }}%\n        <template v-if=\"secondaryMetric\" #secondary> {{ secondaryMetric }}% </template>\n    </summary-grid-item>\n</template>\n\n<script lang=\"ts\">\n    import { defineComponent, PropType } from 'vue';\n    import {\n        BentoSummaryGridItemSize,\n        BentoSummaryGridItemTrendDirection,\n    } from '@/components/summary-grid/summary-grid.types';\n    import { SummaryGridItem, SummaryGridItemType } from '../summary-grid-item';\n\n    /**\n     * Summary grid item component used to display any percentage information\n     *\n     * @example\n     * import { BentoSummaryGridItemPercentage, BentoSummaryGridItemSize, BentoSummaryGridItemTrendDirection } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSummaryGridItemPercentage },\n     *     template: `\n     *          <bento-summary-grid-item-percentage\n     *              title=\"Your title\"\n     *              label=\"123\"\n     *              info-icon-tooltip-text=\"Your tooltip text here will be toggled by the info icon\"\n     *              trend=\"+12%\"\n     *              :trend-direction=\"BentoSummaryGridItemTrendDirection.NEUTRAL\"\n     *              :size=\"BentoSummaryGridItemSize.MEDIUM\"\n     *          />\n     *     `\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-summary-grid-item-percentage',\n        components: { SummaryGridItem },\n        props: {\n            /**\n             * Amount to be shown as the main value\n             */\n            label: {\n                type: String,\n                required: true,\n            },\n            /**\n             * Amount to be shown as the secondary metric value\n             */\n            secondaryMetric: {\n                type: String,\n                default: null,\n            },\n            /**\n             * Text used as a title\n             */\n            title: {\n                type: String,\n                required: true,\n            },\n            /**\n             * Text showed in the info-icon tooltip on hover\n             */\n            infoIconTooltipText: {\n                type: String,\n                default: null,\n            },\n            /**\n             * Text to copy to the clipboard\n             */\n            copy: { type: String, default: undefined },\n            /**\n             * The width of `summary-grid-item` fits its content\n             */\n            fitContent: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Shows colored trend label next to text content\n             */\n            trend: {\n                type: String,\n                default: undefined,\n            },\n            /**\n             * Defines the direction (color) of the trend label\n             */\n            trendDirection: {\n                type: String as PropType<BentoSummaryGridItemTrendDirection>,\n                default: BentoSummaryGridItemTrendDirection.POSITIVE,\n            },\n            /**\n             * Shows colored secondary trend tag next to the secondary metric value\n             */\n            secondaryTrend: {\n                type: String,\n                default: undefined,\n            },\n            /**\n             * Defines the direction (color) of the secondary metric's trend tag\n             */\n            secondaryTrendDirection: {\n                type: String as PropType<BentoSummaryGridItemTrendDirection>,\n                default: BentoSummaryGridItemTrendDirection.POSITIVE,\n            },\n            /**\n             * Defines the size of the `summary-grid-item` text content\n             */\n            size: {\n                type: String as PropType<BentoSummaryGridItemSize>,\n                default: BentoSummaryGridItemSize.SMALL,\n            },\n        },\n\n        setup() {\n            return {\n                // Enums\n                SummaryGridItemType,\n            };\n        },\n    });\n</script>\n","<template>\n    <summary-grid-item\n        :item-type=\"SummaryGridItemType.TEXT\"\n        :info-icon-tooltip-text=\"infoIconTooltipText\"\n        :title=\"title\"\n        :copy=\"copy\"\n        :fit-content=\"fitContent\"\n        class=\"b-summary-grid-item-text\"\n    >\n        {{ label }}\n    </summary-grid-item>\n</template>\n\n<script lang=\"ts\">\n    import { defineComponent } from 'vue';\n    import { SummaryGridItem, SummaryGridItemType } from '../summary-grid-item';\n\n    /**\n     * Summary grid item component used to display text only. Can be used for references, IDs or any other text data.\n     *\n     * @example\n     * import { BentoSummaryGridItemText } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSummaryGridItemText },\n     *     template: `\n     *          <bento-summary-grid-item-text\n     *              title=\"Your title\"\n     *              label=\"Your text here\"\n     *              info-icon-tooltip-text=\"Your tooltip text here will be toggled by the info icon\"\n     *          />\n     *     `\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-summary-grid-item-text',\n        components: { SummaryGridItem },\n        props: {\n            /**\n             * Text to copy to the clipboard\n             */\n            copy: { type: String, default: undefined },\n\n            /**\n             * Amount to be shown as the main value\n             */\n            label: {\n                type: String,\n                required: true,\n            },\n            /**\n             * Text used as a title\n             */\n            title: {\n                type: String,\n                required: true,\n            },\n            /**\n             * Text showed in the info-icon tooltip on hover\n             */\n            infoIconTooltipText: {\n                type: String,\n                default: null,\n            },\n\n            /**\n             * The width of `summary-grid-item` fits its content\n             */\n            fitContent: {\n                type: Boolean,\n                default: false,\n            },\n        },\n\n        setup() {\n            return {\n                // Enums\n                SummaryGridItemType,\n            };\n        },\n    });\n</script>\n","<template>\n    <summary-grid-item\n        :title=\"title\"\n        :info-icon-tooltip-text=\"infoIconTooltipText\"\n        :copy=\"copy\"\n        :fit-content=\"fitContent\"\n        @copy-to-clipoard=\"$emit('copy-to-clipboard')\"\n    >\n        <slot />\n    </summary-grid-item>\n</template>\n\n<script lang=\"ts\">\n    import { defineComponent } from 'vue';\n    import SummaryGridItem from '../summary-grid-item/summary-grid-item.vue';\n\n    /**\n     * A summary bar item is a piece of information to be displayed in `bento-summary-bar` component\n     *\n     * @example\n     * import { SummaryBarItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { SummaryBarItem },\n     *     template: `\n     *          <summary-grid-item :title=\"textVariable\">\n     *              Content of the item\n     *          </summary-grid-item>\n     *     `\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-summary-grid-item-custom',\n        components: { SummaryGridItem },\n        props: {\n            /**\n             * Text to copy to the clipboard\n             */\n            copy: { type: String, default: undefined },\n\n            /**\n             * Text showed in the info-icon tooltip on hover\n             */\n            infoIconTooltipText: { type: String, default: null },\n\n            /**\n             * Text used as a title\n             */\n            title: { type: String, required: true },\n\n            /**\n             * The width of `summary-grid-item` fits its content\n             */\n            fitContent: { type: Boolean, default: false },\n        },\n        emits: ['copy-to-clipboard'],\n    });\n</script>\n"],"names":["_sfc_main$6","defineComponent","GridLayout","_props","slots","numberOfRows","slotRows","_b","_a","slotName","useHasSlot","openBlock","createElementBlock","_hoisted_1$2","Fragment","renderList","_ctx","index","createBlock","_component_grid_layout","createSlots","withCtx","BentoSummaryGridItemSize","BentoSummaryGridItemSize2","BentoSummaryGridItemTrendDirection","BentoSummaryGridItemTrendDirection2","SummaryGridItemType","SummaryGridItemType2","_sfc_main$5","BentoInfoIcon","BentoTypography","BentoTag","Copy","props","trendDirection","secondaryTrendDirection","itemType","size","toRefs","tagVariantColor","direction","BentoTagVariant","trendVariant","computed","secondaryTrendVariant","isContentTypographyApplied","typographyContentElement","BentoTypographyVariant","typographyProps","computedStyles","summaryBarItemTrendConditionalClasses","BentoTypographyElement","PopperContainerPosition","normalizeStyle","createVNode","_component_bento_typography","createElementVNode","_hoisted_2$1","_component_copy","createCommentVNode","_component_bento_info_icon","mergeProps","renderSlot","_component_bento_tag","_hoisted_4","_sfc_main$4","SummaryGridItem","_component_summary_grid_item","resolveComponent","_hoisted_1","toDisplayString","_hoisted_2","_sfc_main$3","_sfc_main$2","_sfc_main$1","_sfc_main"],"mappings":"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"}

package/dist/tabs.js

@@ -1,8 +1,8 @@
 import { defineComponent as g, inject as T, withDirectives as h, openBlock as b, createElementBlock as c, renderSlot as m, vShow as I, ref as u, provide as y, watch as N, nextTick as S, resolveComponent as K, createElementVNode as f, Fragment as k, renderList as D, normalizeClass as V, withKeys as x, createVNode as R, withCtx as L, createTextVNode as O, toDisplayString as X } from "vue";
 import { _ as B } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import { B as Y, c as j, a as P } from "./chunks/index.1d501e31.js";
+import { B as Y, a as j, b as P } from "./chunks/index.a169ce0d.js";
 import { g as q } from "./chunks/unique-id.a2a2b458.js";
-import "./assets/index7.css";
+import "./assets/index32.css";
 const A = Symbol("tabs registerTab injection key"), w = Symbol("tabs active tab ID key"), z = g({
   props: {
     /**

package/dist/tag.js

@@ -1,16 +1,15 @@
-import { defineComponent as p, computed as a, resolveComponent as d, resolveDirective as m, withDirectives as _, openBlock as v, createElementBlock as b, normalizeClass as g, createVNode as f, withCtx as y, createTextVNode as h, toDisplayString as E } from "vue";
-import { B as T, a as C, c as S } from "./chunks/index.1d501e31.js";
+import { defineComponent as p, computed as a, resolveComponent as d, resolveDirective as m, withDirectives as _, openBlock as b, createElementBlock as f, normalizeClass as v, createVNode as g, withCtx as y, createTextVNode as h, toDisplayString as E } from "vue";
+import { B as T, b as C, a as S } from "./chunks/index.a169ce0d.js";
+import { b as N } from "./chunks/tooltip.86176c7d.js";
 import { u as A } from "./chunks/aria-label.ac9651a5.js";
 import { g as c } from "./chunks/get-slot-text.2db867f8.js";
-import { b as N } from "./chunks/tooltip.68fc3821.js";
 import { _ as B } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import "./assets/index5.css";
+import "./assets/index33.css";
 var n = /* @__PURE__ */ ((e) => (e.GREY = "grey", e.BLUE = "blue", e.GREEN = "green", e.ORANGE = "orange", e.RED = "red", e.WHITE = "white", e))(n || {});
 const $ = p({
   name: "bento-tag",
   components: { BentoTypography: T },
   directives: { BentoTooltipDirective: N },
-  inheritAttrs: !1,
   props: {
     /**
      * The label text content of the Tag.
@@ -52,12 +51,12 @@ const $ = p({
 const w = ["aria-label"];
 function D(e, o, i, s, t, r) {
   const l = d("bento-typography"), u = m("bento-tooltip-directive");
-  return _((v(), b("span", {
-    class: g(["b-tag", e.tagConditionalClasses]),
+  return _((b(), f("span", {
+    class: v(["b-tag", e.tagConditionalClasses]),
     "aria-label": e.computedAriaLabel,
     role: "mark"
   }, [
-    f(l, {
+    g(l, {
       class: "b-tag__label",
       el: e.BentoTypographyElement.SPAN,
       variant: e.BentoTypographyVariant.CAPTION,
@@ -72,7 +71,7 @@ function D(e, o, i, s, t, r) {
     [u, e.shouldShowTooltip ? e.textFromSlot : null]
   ]);
 }
-const I = /* @__PURE__ */ B($, [["render", D], ["__scopeId", "data-v-4264e56e"]]);
+const I = /* @__PURE__ */ B($, [["render", D], ["__scopeId", "data-v-1cf0a538"]]);
 export {
   I as BentoTag,
   n as BentoTagVariant