@adyen/bento-vue3 1.55.1 → 1.56.0

package/dist/chunks/{structured-list-item.CWiwoP5F.js.map → structured-list-item.BMsATRrU.js.map}

@@ -1 +1 @@
-{"version":3,"file":"structured-list-item.CWiwoP5F.js","sources":["../../../vue2/src/components/structured-list/structured-list.keys.ts","../../../vue2/src/components/structured-list/structured-list.types.ts","../../../vue2/src/components/structured-list/structured-list.vue","../../../vue2/src/components/structured-list/components/structered-list-item/structured-list-item.vue"],"sourcesContent":["export const STRUCTURED_LIST_CONDENSED_INJECTION_KEY = Symbol('structured list condensed style injection key');\nexport const STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY = Symbol('structured list labels width injection key');\n","export type BentoStructuredListLayoutOptions = '25-75' | '33-66' | '42-58' | '50-50';\nexport const BentoStructuredListLayoutOptions = ['25-75', '33-66', '42-58', '50-50'];\n","<template>\n    <dl class=\"b-structured-list\">\n        <slot />\n    </dl>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, provide } from 'vue';\n    import {\n        STRUCTURED_LIST_CONDENSED_INJECTION_KEY,\n        STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY,\n    } from '@/components/structured-list/structured-list.keys';\n    import { BentoStructuredListLayoutOptions } from './structured-list.types';\n\n    const props = withDefaults(\n        defineProps<{\n            /**\n             * Width of the labels container, in pixels. Overrides layout prop.\n             */\n            labelsWidth?: number;\n            /**\n             * The layout of the label value pair in percentage.\n             * If labelsWidth is set, layout will be overriden by the static pixel value.\n             *\n             * If the value entered is not listed in the example\n             * list below '33-66' will be applied\n             * @example\n             * '25-75'\n             * '33-66'\n             * '42-58'\n             * '50-50'\n             */\n            layout?: BentoStructuredListLayoutOptions;\n        }>(),\n        {\n            labelsWidth: null,\n            layout: '33-66',\n        }\n    );\n\n    const isCondensed = inject(STRUCTURED_LIST_CONDENSED_INJECTION_KEY, false);\n\n    const computedLayout = computed(() =>\n        BentoStructuredListLayoutOptions.includes(props.layout) ? props.layout : '33-66'\n    );\n\n    const computedLabelsWidth = computed(() => {\n        if (isCondensed) {\n            return '130px';\n        }\n\n        if (props.labelsWidth) {\n            return `${props.labelsWidth}px`;\n        }\n\n        return `${computedLayout.value.split('-')[0]}%`;\n    });\n\n    provide(STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY, computedLabelsWidth);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * This is a list used to display pairs of information in a clear and organized manner.\n     * `BentoStructureListItem` should be used to pass the label/value pairs to the list.\n     *\n     * @example\n     * import { BentoStructuredListItem, BentoStructuredListItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoStructuredList, BentoStructuredListItem },\n     *     template: `\n     *       <bento-structured-list>\n     *         <bento-structured-list-item label=\"Payment\">\n     *               <bento-payment-method label=\"Klarna\" type=\"Klarna\"  />\n     *         </bento-structured-list-item>\n     *         <bento-structured-list-item label=\"Amount\">\n     *               <bento-currency :currency=\"BentoCurrencyISOCode.USD\" :value=\"123456\" />\n     *         </bento-structured-list-item>\n     *       </bento-structured-list>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./structured-list.scss\" />\n","<template>\n    <div class=\"b-structured-list-item\" :class=\"conditionalClasses\">\n        <dt class=\"b-structured-list-item__label\" :style=\"computedLabelStyle\">\n            <bento-typography :variant=\"labelTypographyVariant\">{{ label }}</bento-typography>\n            <bento-info-icon v-if=\"labelInfo\" class=\"b-structured-list-item__icon\" :tooltip-text=\"labelInfo\" />\n        </dt>\n        <dd class=\"b-structured-list-item__value\" :class=\"valueConditionalClasses\">\n            <slot />\n            <copy v-if=\"copy\" class=\"b-structured-list-item__icon\" :text=\"copy\" />\n            <bento-button\n                v-if=\"search\"\n                v-bento-tooltip-directive:top=\"searchTooltip ? searchTooltip : t('search')\"\n                class=\"b-structured-list-item__icon\"\n                variant=\"tertiary\"\n                @click=\"search\"\n            >\n                <template #iconLeft>\n                    <search-icon :svg-title=\"t('search')\" />\n                </template>\n            </bento-button>\n        </dd>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, ref, Ref } from 'vue';\n\n    // Components\n    import { BentoButton } from '@/components/button';\n    import { BentoInfoIcon } from '@/components/info-icon';\n    import { BentoTypography } from '@/components/typography';\n    import Copy from '@/components/internal/copy/copy.vue';\n    import SearchIcon from '@adyen/ui-assets-icons-16/vue/search';\n\n    // Utils\n    import { useI18n } from '@/utils/ts/i18n';\n\n    // Directives\n    import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives';\n\n    // Keys\n    import {\n        STRUCTURED_LIST_CONDENSED_INJECTION_KEY,\n        STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY,\n    } from '../../structured-list.keys';\n\n    import messages from '../../messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const DEFAULT_LABELS_WIDTH = '33%';\n\n    const props = defineProps<{\n        /**\n         * Label to display for the value\n         */\n        label: string;\n        /**\n         * Text to display in info icon tooltip in the label to display for the value\n         */\n        labelInfo?: string;\n        /**\n         * Text to copy when the user clicks `Copy` icon\n         */\n        copy?: string;\n        /**\n         * Function to trigger when user clicks `Search` icon\n         */\n        search?: (event: Event) => void;\n        /**\n         * Text to display when the user hovers over `Search` icon\n         */\n        searchTooltip?: string;\n        /**\n         * Truncates the value of the item\n         */\n        truncate?: boolean;\n    }>();\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n    const isCondensed = inject(STRUCTURED_LIST_CONDENSED_INJECTION_KEY, false);\n    const labelsWidth = inject<Ref<string>>(STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY, ref(DEFAULT_LABELS_WIDTH));\n    const computedLabelStyle = computed(() => `flex-basis:${labelsWidth.value}`);\n    const conditionalClasses = computed(() => ({\n        'b-structured-list-item--condensed': isCondensed,\n    }));\n\n    const valueConditionalClasses = computed(() => ({\n        'b-structured-list-item__value--truncate': props.truncate,\n    }));\n\n    const labelTypographyVariant = computed(() => (isCondensed ? 'caption' : 'body'));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * This is an item of the `BentoStructuredList` meant to be used only with that component.\n     * It consists of a label/value pair, and also the optional copy and search modifiers.\n     *\n     * @example\n     * import { BentoCurrencyISOCode, BentoStructuredListItem, BentoStructuredListItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoStructuredListItem, BentoStructuredListItem },\n     *     template: `\n     *       <bento-structured-list>\n     *         <bento-structured-list-item label=\"Shopper\" search='searchShopper' search-tooltip='Find shopper'>\n     *               <bento-typography>\n     *                  143442642\n     *               </bento-status>\n     *         </bento-structured-list-item>\n     *         <bento-structured-list-item label=\"Amount\" copy='123456'>\n     *               <bento-currency :currency=\"BentoCurrencyISOCode.USD\" :value=\"123456\" />\n     *         </bento-structured-list-item>\n     *       </bento-structured-list>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./structured-list-item.scss\" />\n"],"names":["STRUCTURED_LIST_CONDENSED_INJECTION_KEY","STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY","BentoStructuredListLayoutOptions","__default__$1","props","__props","isCondensed","inject","computedLayout","computed","computedLabelsWidth","provide","__default__","messages","DEFAULT_LABELS_WIDTH","t","useI18n","labelsWidth","ref","computedLabelStyle","conditionalClasses","valueConditionalClasses","labelTypographyVariant"],"mappings":";;;;;;;;;;;AAAa,MAAAA,IAAA,OAAA,+CAAA,GACAC,IAAA,OAAA,4CAAA,GCANC,IAAA,CAAA,SAAA,SAAA,SAAA,OAAA,uCCkFHC,IAAA,CAAA;;;;;;;;AArEA,UAAAC,IAAAC,GA0BAC,IAAAC,EAAAP,GAAA,EAAA,GAEAQ,IAAAC;AAAA,MAAuB,MAAAP,EAAA,SAAAE,EAAA,MAAA,IAAAA,EAAA,SAAA;AAAA,IACsD,GAG7EM,IAAAD,EAAA,MACIH,IACI,UAGJF,EAAA,cACI,GAAAA,EAAA,WAAA,OAGJ,GAAAI,EAAA,MAAA,MAAA,GAAA,EAAA,CAAA,CAAA,GAA4C;AAGhD,WAAAG,EAAAV,GAAAS,CAAA;;;;;;;;;;;;;;GC4DAE,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;AAtEA,UAAAC,IAAA,OAEAV,IAAAC,GA2BA,EAAA,GAAAU,EAAA,IAAAC,EAAA,EAAA,UAAAH,EAAA,CAAA,GACAP,IAAAC,EAAAP,GAAA,EAAA,GACAiB,IAAAV,EAAAN,GAAAiB,EAAAJ,CAAA,CAAA,GACAK,IAAAV,EAAA,MAAA,cAAAQ,EAAA,KAAA,EAAA,GACAG,IAAAX,EAAA,OAAA;AAAA,MAA2C,qCAAAH;AAAA,IACF,EAAA,GAGzCe,IAAAZ,EAAA,OAAA;AAAA,MAAgD,2CAAAL,EAAA;AAAA,IACK,EAAA,GAGrDkB,IAAAb,EAAA,MAAAH,IAAA,YAAA,MAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"structured-list-item.BMsATRrU.js","sources":["../../../vue2/src/components/structured-list/structured-list.keys.ts","../../../vue2/src/components/structured-list/structured-list.types.ts","../../../vue2/src/components/structured-list/structured-list.vue","../../../vue2/src/components/structured-list/components/structered-list-item/structured-list-item.vue"],"sourcesContent":["export const STRUCTURED_LIST_CONDENSED_INJECTION_KEY = Symbol('structured list condensed style injection key');\nexport const STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY = Symbol('structured list labels width injection key');\n","export type BentoStructuredListLayoutOptions = '25-75' | '33-66' | '42-58' | '50-50';\nexport const BentoStructuredListLayoutOptions = ['25-75', '33-66', '42-58', '50-50'];\n","<template>\n    <dl class=\"b-structured-list\">\n        <slot />\n    </dl>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, provide } from 'vue';\n    import {\n        STRUCTURED_LIST_CONDENSED_INJECTION_KEY,\n        STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY,\n    } from '@/components/structured-list/structured-list.keys';\n    import { BentoStructuredListLayoutOptions } from './structured-list.types';\n\n    const props = withDefaults(\n        defineProps<{\n            /**\n             * Width of the labels container, in pixels. Overrides layout prop.\n             */\n            labelsWidth?: number;\n            /**\n             * The layout of the label value pair in percentage.\n             * If labelsWidth is set, layout will be overriden by the static pixel value.\n             *\n             * If the value entered is not listed in the example\n             * list below '33-66' will be applied\n             * @example\n             * '25-75'\n             * '33-66'\n             * '42-58'\n             * '50-50'\n             */\n            layout?: BentoStructuredListLayoutOptions;\n        }>(),\n        {\n            labelsWidth: null,\n            layout: '33-66',\n        }\n    );\n\n    const isCondensed = inject(STRUCTURED_LIST_CONDENSED_INJECTION_KEY, false);\n\n    const computedLayout = computed(() =>\n        BentoStructuredListLayoutOptions.includes(props.layout) ? props.layout : '33-66'\n    );\n\n    const computedLabelsWidth = computed(() => {\n        if (isCondensed) {\n            return '130px';\n        }\n\n        if (props.labelsWidth) {\n            return `${props.labelsWidth}px`;\n        }\n\n        return `${computedLayout.value.split('-')[0]}%`;\n    });\n\n    provide(STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY, computedLabelsWidth);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * This is a list used to display pairs of information in a clear and organized manner.\n     * `BentoStructureListItem` should be used to pass the label/value pairs to the list.\n     *\n     * @example\n     * import { BentoStructuredListItem, BentoStructuredListItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoStructuredList, BentoStructuredListItem },\n     *     template: `\n     *       <bento-structured-list>\n     *         <bento-structured-list-item label=\"Payment\">\n     *               <bento-payment-method label=\"Klarna\" type=\"Klarna\"  />\n     *         </bento-structured-list-item>\n     *         <bento-structured-list-item label=\"Amount\">\n     *               <bento-currency :currency=\"BentoCurrencyISOCode.USD\" :value=\"123456\" />\n     *         </bento-structured-list-item>\n     *       </bento-structured-list>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./structured-list.scss\" />\n","<template>\n    <div class=\"b-structured-list-item\" :class=\"conditionalClasses\">\n        <dt class=\"b-structured-list-item__label\" :style=\"computedLabelStyle\">\n            <bento-typography :variant=\"labelTypographyVariant\">{{ label }}</bento-typography>\n            <bento-info-icon v-if=\"labelInfo\" class=\"b-structured-list-item__icon\" :tooltip-text=\"labelInfo\" />\n        </dt>\n        <dd class=\"b-structured-list-item__value\" :class=\"valueConditionalClasses\">\n            <slot />\n            <copy v-if=\"copy\" class=\"b-structured-list-item__icon\" :text=\"copy\" />\n            <bento-button\n                v-if=\"search\"\n                v-bento-tooltip-directive:top=\"searchTooltip ? searchTooltip : t('search')\"\n                class=\"b-structured-list-item__icon\"\n                variant=\"tertiary\"\n                @click=\"search\"\n            >\n                <template #iconLeft>\n                    <search-icon :svg-title=\"t('search')\" />\n                </template>\n            </bento-button>\n        </dd>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, ref, Ref } from 'vue';\n\n    // Components\n    import { BentoButton } from '@/components/button';\n    import { BentoInfoIcon } from '@/components/info-icon';\n    import { BentoTypography } from '@/components/typography';\n    import Copy from '@/components/internal/copy/copy.vue';\n    import SearchIcon from '@adyen/ui-assets-icons-16/vue/search';\n\n    // Utils\n    import { useI18n } from '@/utils/ts/i18n';\n\n    // Directives\n    import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives';\n\n    // Keys\n    import {\n        STRUCTURED_LIST_CONDENSED_INJECTION_KEY,\n        STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY,\n    } from '../../structured-list.keys';\n\n    import messages from '../../messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const DEFAULT_LABELS_WIDTH = '33%';\n\n    const props = defineProps<{\n        /**\n         * Label to display for the value\n         */\n        label: string;\n        /**\n         * Text to display in info icon tooltip in the label to display for the value\n         */\n        labelInfo?: string;\n        /**\n         * Text to copy when the user clicks `Copy` icon\n         */\n        copy?: string;\n        /**\n         * Function to trigger when user clicks `Search` icon\n         */\n        search?: (event: Event) => void;\n        /**\n         * Text to display when the user hovers over `Search` icon\n         */\n        searchTooltip?: string;\n        /**\n         * Truncates the value of the item\n         */\n        truncate?: boolean;\n    }>();\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n    const isCondensed = inject(STRUCTURED_LIST_CONDENSED_INJECTION_KEY, false);\n    const labelsWidth = inject<Ref<string>>(STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY, ref(DEFAULT_LABELS_WIDTH));\n    const computedLabelStyle = computed(() => `flex-basis:${labelsWidth.value}`);\n    const conditionalClasses = computed(() => ({\n        'b-structured-list-item--condensed': isCondensed,\n    }));\n\n    const valueConditionalClasses = computed(() => ({\n        'b-structured-list-item__value--truncate': props.truncate,\n    }));\n\n    const labelTypographyVariant = computed(() => (isCondensed ? 'caption' : 'body'));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * This is an item of the `BentoStructuredList` meant to be used only with that component.\n     * It consists of a label/value pair, and also the optional copy and search modifiers.\n     *\n     * @example\n     * import { BentoCurrencyISOCode, BentoStructuredListItem, BentoStructuredListItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoStructuredListItem, BentoStructuredListItem },\n     *     template: `\n     *       <bento-structured-list>\n     *         <bento-structured-list-item label=\"Shopper\" search='searchShopper' search-tooltip='Find shopper'>\n     *               <bento-typography>\n     *                  143442642\n     *               </bento-status>\n     *         </bento-structured-list-item>\n     *         <bento-structured-list-item label=\"Amount\" copy='123456'>\n     *               <bento-currency :currency=\"BentoCurrencyISOCode.USD\" :value=\"123456\" />\n     *         </bento-structured-list-item>\n     *       </bento-structured-list>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./structured-list-item.scss\" />\n"],"names":["STRUCTURED_LIST_CONDENSED_INJECTION_KEY","STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY","BentoStructuredListLayoutOptions","__default__$1","props","__props","isCondensed","inject","computedLayout","computed","computedLabelsWidth","provide","__default__","messages","DEFAULT_LABELS_WIDTH","t","useI18n","labelsWidth","ref","computedLabelStyle","conditionalClasses","valueConditionalClasses","labelTypographyVariant"],"mappings":";;;;;;;;;;;AAAa,MAAAA,IAAA,OAAA,+CAAA,GACAC,IAAA,OAAA,4CAAA,GCANC,IAAA,CAAA,SAAA,SAAA,SAAA,OAAA,uCCkFHC,IAAA,CAAA;;;;;;;;AArEA,UAAAC,IAAAC,GA0BAC,IAAAC,EAAAP,GAAA,EAAA,GAEAQ,IAAAC;AAAA,MAAuB,MAAAP,EAAA,SAAAE,EAAA,MAAA,IAAAA,EAAA,SAAA;AAAA,IACsD,GAG7EM,IAAAD,EAAA,MACIH,IACI,UAGJF,EAAA,cACI,GAAAA,EAAA,WAAA,OAGJ,GAAAI,EAAA,MAAA,MAAA,GAAA,EAAA,CAAA,CAAA,GAA4C;AAGhD,WAAAG,EAAAV,GAAAS,CAAA;;;;;;;;;;;;;;GC4DAE,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;AAtEA,UAAAC,IAAA,OAEAV,IAAAC,GA2BA,EAAA,GAAAU,EAAA,IAAAC,EAAA,EAAA,UAAAH,EAAA,CAAA,GACAP,IAAAC,EAAAP,GAAA,EAAA,GACAiB,IAAAV,EAAAN,GAAAiB,EAAAJ,CAAA,CAAA,GACAK,IAAAV,EAAA,MAAA,cAAAQ,EAAA,KAAA,EAAA,GACAG,IAAAX,EAAA,OAAA;AAAA,MAA2C,qCAAAH;AAAA,IACF,EAAA,GAGzCe,IAAAZ,EAAA,OAAA;AAAA,MAAgD,2CAAAL,EAAA;AAAA,IACK,EAAA,GAGrDkB,IAAAb,EAAA,MAAAH,IAAA,YAAA,MAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{summary-grid.types.DOYW579A.js → summary-grid.types.lGX16F4w.js}

@@ -1,13 +1,13 @@
-import { defineComponent as v, useSlots as T, onMounted as Y, provide as E, toRef as Z, createElementBlock as I, openBlock as i, Fragment as G, renderList as P, unref as t, createBlock as c, createSlots as h, withCtx as o, renderSlot as d, toRefs as j, inject as H, ref as W, computed as y, normalizeStyle as F, normalizeClass as J, createElementVNode as M, createVNode as L, createCommentVNode as $, createTextVNode as f, toDisplayString as p, mergeProps as K } from "vue";
+import { defineComponent as v, useSlots as T, onMounted as O, provide as P, toRef as Y, createElementBlock as S, openBlock as r, Fragment as R, renderList as Z, unref as t, createBlock as c, createSlots as h, withCtx as o, renderSlot as s, toRefs as j, inject as H, ref as W, computed as y, normalizeStyle as F, normalizeClass as J, createElementVNode as D, createVNode as E, createCommentVNode as $, createTextVNode as f, toDisplayString as m, mergeProps as K } from "vue";
 import { u as _ } from "./use-has-slot.B7eQSabc.js";
-import { S as q, a as A } from "./summary-grid.keys.CxTf_FOc.js";
+import { S as q, a as G } from "./summary-grid.keys.CxTf_FOc.js";
 import { G as Q } from "./grid-layout.BTLE3rac.js";
-import { _ as z } from "./_plugin-vue_export-helper.CHgC5LLL.js";
-import { B as X } from "./dashed-underline.DWhGZIhS.js";
+import { _ as w } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import { B as X } from "./dashed-underline.B2cIJkg_.js";
 import { B as x } from "./info-icon.7uhGVIn5.js";
-import { B as w } from "./typography.DN5eC5ch.js";
-import { B as R } from "./tag.CmYkknFj.js";
-import { C as ee } from "./copy.MId-I684.js";
+import { B } from "./typography.DN5eC5ch.js";
+import { B as L } from "./tag.CmYkknFj.js";
+import { C as ee } from "./copy.CfFh4b_c.js";
 import "../assets/summary-grid.css";
 const te = { class: "b-summary-grid" }, oe = {}, ne = /* @__PURE__ */ v({
   ...oe,
@@ -16,69 +16,69 @@ const te = { class: "b-summary-grid" }, oe = {}, ne = /* @__PURE__ */ v({
     columnWidth: { default: null },
     slashedZero: { type: Boolean, default: !1 }
   },
-  setup(l) {
-    var S, k;
-    const a = l, s = T(), e = _(s);
-    let m = 1;
-    if (s) {
-      const u = (k = (S = Object.keys(s)) == null ? void 0 : S.filter((g) => g.includes("cell-"))) == null ? void 0 : k.map((g) => {
+  setup(i) {
+    var I, z;
+    const d = i, a = T(), e = _(a);
+    let p = 1;
+    if (a) {
+      const u = (z = (I = Object.keys(a)) == null ? void 0 : I.filter((g) => g.includes("cell-"))) == null ? void 0 : z.map((g) => {
         var n;
         return parseInt((n = g.split("-")) == null ? void 0 : n[1], 10);
       });
-      m = Math.max(...u);
+      p = Math.max(...u);
     }
-    return Y(() => {
-      if (m > 3)
+    return O(() => {
+      if (p > 3)
         throw new Error(
           "BentoSummaryGrid must only have a maximum of 3 rows. Read the documentation for more information."
         );
-    }), E(q, () => ({ isSummaryGridLayout: !0 })), E(A, Z(a, "slashedZero")), (u, g) => (i(), I("div", te, [
-      (i(!0), I(G, null, P(t(m), (n) => {
-        var D;
-        return i(), c(t(Q), {
+    }), P(q, () => ({ isSummaryGridLayout: !0 })), P(G, Y(d, "slashedZero")), (u, g) => (r(), S("div", te, [
+      (r(!0), S(R, null, Z(t(p), (n) => {
+        var C;
+        return r(), c(t(Q), {
           key: `summary-grid-row-${n}`,
           "data-testid": `summary-grid-row-${n}`,
-          "column-width": (D = u.columnWidth) == null ? void 0 : D[`row${n}`]
+          "column-width": (C = u.columnWidth) == null ? void 0 : C[`row${n}`]
         }, h({ _: 2 }, [
           t(e)(`cell-${n}-1`) ? {
             name: "col-1",
             fn: o(() => [
-              d(u.$slots, `cell-${n}-1`, {}, void 0, !0)
+              s(u.$slots, `cell-${n}-1`, {}, void 0, !0)
             ]),
             key: "0"
           } : void 0,
           t(e)(`cell-${n}-2`) ? {
             name: "col-2",
             fn: o(() => [
-              d(u.$slots, `cell-${n}-2`, {}, void 0, !0)
+              s(u.$slots, `cell-${n}-2`, {}, void 0, !0)
             ]),
             key: "1"
           } : void 0,
           t(e)(`cell-${n}-3`) ? {
             name: "col-3",
             fn: o(() => [
-              d(u.$slots, `cell-${n}-3`, {}, void 0, !0)
+              s(u.$slots, `cell-${n}-3`, {}, void 0, !0)
             ]),
             key: "2"
           } : void 0,
           t(e)(`cell-${n}-4`) ? {
             name: "col-4",
             fn: o(() => [
-              d(u.$slots, `cell-${n}-4`, {}, void 0, !0)
+              s(u.$slots, `cell-${n}-4`, {}, void 0, !0)
             ]),
             key: "3"
           } : void 0,
           t(e)(`cell-${n}-5`) ? {
             name: "col-5",
             fn: o(() => [
-              d(u.$slots, `cell-${n}-5`, {}, void 0, !0)
+              s(u.$slots, `cell-${n}-5`, {}, void 0, !0)
             ]),
             key: "4"
           } : void 0,
           t(e)(`cell-${n}-6`) ? {
             name: "col-6",
             fn: o(() => [
-              d(u.$slots, `cell-${n}-6`, {}, void 0, !0)
+              s(u.$slots, `cell-${n}-6`, {}, void 0, !0)
             ]),
             key: "5"
           } : void 0
@@ -86,7 +86,7 @@ const te = { class: "b-summary-grid" }, oe = {}, ne = /* @__PURE__ */ v({
       }), 128))
     ]));
   }
-}), Be = /* @__PURE__ */ z(ne, [["__scopeId", "data-v-14d3ddaf"]]), le = { class: "b-summary-grid-item__header" }, ie = { class: "b-summary-grid-item__title-icons" }, re = {}, ae = /* @__PURE__ */ v({
+}), Me = /* @__PURE__ */ w(ne, [["__scopeId", "data-v-14d3ddaf"]]), ie = { class: "b-summary-grid-item__header" }, le = { class: "b-summary-grid-item__title-icons" }, re = {}, de = /* @__PURE__ */ v({
   ...re,
   __name: "summary-grid-item",
   props: {
@@ -100,11 +100,12 @@ const te = { class: "b-summary-grid" }, oe = {}, ne = /* @__PURE__ */ v({
     trendDirection: { default: "positive" },
     secondaryTrend: { default: null },
     secondaryTrendDirection: { default: "positive" },
+    underlinePopoverSize: { default: "fit-content" },
     underlineTooltipText: { default: null }
   },
-  setup(l) {
-    const a = l, { trendDirection: s, secondaryTrendDirection: e, itemType: m, size: b } = j(a), S = H(A, W(!1)), k = (r) => {
-      switch (r) {
+  setup(i) {
+    const d = i, { trendDirection: a, secondaryTrendDirection: e, itemType: p, size: b } = j(d), I = H(G, W(!1)), z = (l) => {
+      switch (l) {
         case "positive":
           return "green";
         case "negative":
@@ -112,75 +113,76 @@ const te = { class: "b-summary-grid" }, oe = {}, ne = /* @__PURE__ */ v({
         default:
           return "blue";
       }
-    }, u = y(() => k(s.value)), g = y(() => k(e.value)), n = y(() => b.value === "small" ? "body" : m.value !== "text" ? "title" : null), D = y(() => ({
+    }, u = y(() => z(a.value)), g = y(() => z(e.value)), n = y(() => b.value === "small" ? "body" : p.value !== "text" ? "title" : null), C = y(() => ({
       medium: b.value === "large",
       strongest: b.value === "small",
       wide: b.value === "small",
       variant: n.value
-    })), V = y(() => a.fitContent ? { width: "fit-content" } : {}), N = y(() => ({ "b-summary-grid-item--slashed-zero": S.value })), U = T(), B = _(U), O = y(() => a.underlineTooltipText || B("dashed-underline"));
-    return (r, he) => (i(), I("div", {
-      class: J(["b-summary-grid-item", N.value]),
-      style: F(V.value)
+    })), A = y(() => d.fitContent ? { width: "fit-content" } : {}), V = y(() => ({ "b-summary-grid-item--slashed-zero": I.value })), N = T(), M = _(N), U = y(() => d.underlineTooltipText || M("dashed-underline"));
+    return (l, he) => (r(), S("div", {
+      class: J(["b-summary-grid-item", V.value]),
+      style: F(A.value)
     }, [
-      M("div", le, [
-        L(t(w), {
+      D("div", ie, [
+        E(t(B), {
           class: "b-summary-grid-item__title",
           el: "span",
           variant: "body"
         }, {
           default: o(() => [
-            O.value ? (i(), c(t(X), {
+            U.value ? (r(), c(t(X), {
               key: 0,
-              "tooltip-text": r.underlineTooltipText
+              "tooltip-text": l.underlineTooltipText,
+              "popover-size": l.underlinePopoverSize
             }, h({
               default: o(() => [
-                f(p(r.title) + " ", 1)
+                f(m(l.title) + " ", 1)
               ]),
               _: 2
             }, [
-              t(B)("dashed-underline") ? {
+              t(M)("dashed-underline") ? {
                 name: "popover-content",
                 fn: o(() => [
-                  d(r.$slots, "dashed-underline", {}, void 0, !0)
+                  s(l.$slots, "dashed-underline", {}, void 0, !0)
                 ]),
                 key: "0"
               } : void 0
-            ]), 1032, ["tooltip-text"])) : (i(), I(G, { key: 1 }, [
-              f(p(r.title), 1)
+            ]), 1032, ["tooltip-text", "popover-size"])) : (r(), S(R, { key: 1 }, [
+              f(m(l.title), 1)
             ], 64))
           ]),
           _: 3
         }),
-        M("div", ie, [
-          r.copy ? (i(), c(t(ee), {
+        D("div", le, [
+          l.copy ? (r(), c(t(ee), {
             key: 0,
             class: "b-structured-list__icon",
-            text: r.copy
+            text: l.copy
           }, null, 8, ["text"])) : $("", !0),
-          r.infoIconTooltipText ? (i(), c(t(x), {
+          l.infoIconTooltipText ? (r(), c(t(x), {
             key: 1,
-            "tooltip-text": r.infoIconTooltipText,
+            "tooltip-text": l.infoIconTooltipText,
             "tooltip-position": "top",
             class: "b-summary-grid-item__title-tooltip"
           }, null, 8, ["tooltip-text"])) : $("", !0)
         ])
       ]),
-      L(t(w), K({
+      E(t(B), K({
         "data-testid": "summary-grid-item-content-typography",
         class: "b-summary-grid-item__title"
-      }, D.value, { el: "span" }), {
+      }, C.value, { el: "span" }), {
         default: o(() => [
-          d(r.$slots, "default", {}, void 0, !0),
-          r.trend && t(m) !== "text" ? (i(), c(t(R), {
+          s(l.$slots, "default", {}, void 0, !0),
+          l.trend && t(p) !== "text" ? (r(), c(t(L), {
             key: 0,
             variant: u.value,
-            label: r.trend,
+            label: l.trend,
             class: "b-summary-grid-item__content-trend"
           }, null, 8, ["variant", "label"])) : $("", !0)
         ]),
         _: 3
       }, 16),
-      t(B)("secondary") ? (i(), c(t(w), {
+      t(M)("secondary") ? (r(), c(t(B), {
         key: 0,
         class: "b-summary-grid-item__title",
         "data-testid": "summary-grid-item-secondary-metric-typography",
@@ -189,11 +191,11 @@ const te = { class: "b-summary-grid" }, oe = {}, ne = /* @__PURE__ */ v({
         stronger: ""
       }, {
         default: o(() => [
-          d(r.$slots, "secondary", {}, void 0, !0),
-          r.secondaryTrend ? (i(), c(t(R), {
+          s(l.$slots, "secondary", {}, void 0, !0),
+          l.secondaryTrend ? (r(), c(t(L), {
             key: 0,
             variant: g.value,
-            label: r.secondaryTrend,
+            label: l.secondaryTrend,
             class: "b-summary-grid-item__content-trend"
           }, null, 8, ["variant", "label"])) : $("", !0)
         ]),
@@ -201,7 +203,7 @@ const te = { class: "b-summary-grid" }, oe = {}, ne = /* @__PURE__ */ v({
       })) : $("", !0)
     ], 6));
   }
-}), C = /* @__PURE__ */ z(ae, [["__scopeId", "data-v-65135ddf"]]), se = { class: "b-summary-grid-item-amount__content" }, de = {
+}), k = /* @__PURE__ */ w(de, [["__scopeId", "data-v-f887fd83"]]), ae = { class: "b-summary-grid-item-amount__content" }, se = {
   key: 0,
   class: "b-summary-grid-item-amount__secondary-label"
 }, ue = {}, ce = /* @__PURE__ */ v({
@@ -220,11 +222,12 @@ const te = { class: "b-summary-grid" }, oe = {}, ne = /* @__PURE__ */ v({
     trendDirection: { default: "positive" },
     secondaryTrend: { default: null },
     secondaryTrendDirection: { default: "positive" },
+    underlinePopoverSize: { default: "fit-content" },
     underlineTooltipText: { default: null }
   },
-  setup(l) {
-    const a = T(), s = _(a);
-    return (e, m) => (i(), c(t(C), {
+  setup(i) {
+    const d = T(), a = _(d);
+    return (e, p) => (r(), c(t(k), {
       "item-type": "amount",
       "info-icon-tooltip-text": e.infoIconTooltipText,
       title: e.title,
@@ -235,35 +238,36 @@ const te = { class: "b-summary-grid" }, oe = {}, ne = /* @__PURE__ */ v({
       "trend-direction": e.trendDirection,
       "secondary-trend": e.secondaryTrend,
       "secondary-trend-direction": e.secondaryTrendDirection,
+      "underline-popover-size": e.underlinePopoverSize,
       "underline-tooltip-text": e.underlineTooltipText,
       class: "b-summary-grid-item-amount"
     }, h({
       default: o(() => [
-        M("div", se, [
-          M("div", null, p(e.label), 1),
-          e.secondaryLabel ? (i(), I("div", de, p(e.secondaryLabel), 1)) : $("", !0)
+        D("div", ae, [
+          D("div", null, m(e.label), 1),
+          e.secondaryLabel ? (r(), S("div", se, m(e.secondaryLabel), 1)) : $("", !0)
         ])
       ]),
       _: 2
     }, [
-      t(s)("dashed-underline") ? {
+      t(a)("dashed-underline") ? {
         name: "dashed-underline",
         fn: o(() => [
-          d(e.$slots, "dashed-underline", {}, void 0, !0)
+          s(e.$slots, "dashed-underline", {}, void 0, !0)
         ]),
         key: "0"
       } : void 0,
       e.secondaryMetric ? {
         name: "secondary",
         fn: o(() => [
-          f(p(e.secondaryMetric), 1)
+          f(m(e.secondaryMetric), 1)
         ]),
         key: "1"
       } : void 0
-    ]), 1032, ["info-icon-tooltip-text", "title", "copy", "fit-content", "size", "trend", "trend-direction", "secondary-trend", "secondary-trend-direction", "underline-tooltip-text"]));
+    ]), 1032, ["info-icon-tooltip-text", "title", "copy", "fit-content", "size", "trend", "trend-direction", "secondary-trend", "secondary-trend-direction", "underline-popover-size", "underline-tooltip-text"]));
   }
-}), we = /* @__PURE__ */ z(ce, [["__scopeId", "data-v-8219d760"]]), me = {}, ze = /* @__PURE__ */ v({
-  ...me,
+}), Be = /* @__PURE__ */ w(ce, [["__scopeId", "data-v-70d30125"]]), pe = {}, we = /* @__PURE__ */ v({
+  ...pe,
   __name: "summary-grid-item-numeric",
   props: {
     label: {},
@@ -277,11 +281,12 @@ const te = { class: "b-summary-grid" }, oe = {}, ne = /* @__PURE__ */ v({
     trendDirection: { default: "positive" },
     secondaryTrend: { default: null },
     secondaryTrendDirection: { default: "positive" },
+    underlinePopoverSize: { default: "fit-content" },
     underlineTooltipText: { default: null }
   },
-  setup(l) {
-    const a = T(), s = _(a);
-    return (e, m) => (i(), c(t(C), {
+  setup(i) {
+    const d = T(), a = _(d);
+    return (e, p) => (r(), c(t(k), {
       "item-type": "numeric",
       "info-icon-tooltip-text": e.infoIconTooltipText,
       title: e.title,
@@ -292,32 +297,33 @@ const te = { class: "b-summary-grid" }, oe = {}, ne = /* @__PURE__ */ v({
       "trend-direction": e.trendDirection,
       "secondary-trend": e.secondaryTrend,
       "secondary-trend-direction": e.secondaryTrendDirection,
+      "underline-popover-size": e.underlinePopoverSize,
       "underline-tooltip-text": e.underlineTooltipText,
       class: "b-summary-grid-item-numeric"
     }, h({
       default: o(() => [
-        f(" " + p(e.label) + " ", 1)
+        f(" " + m(e.label) + " ", 1)
       ]),
       _: 2
     }, [
-      t(s)("dashed-underline") ? {
+      t(a)("dashed-underline") ? {
         name: "dashed-underline",
         fn: o(() => [
-          d(e.$slots, "dashed-underline")
+          s(e.$slots, "dashed-underline")
         ]),
         key: "0"
       } : void 0,
       e.secondaryMetric ? {
         name: "secondary",
         fn: o(() => [
-          f(p(e.secondaryMetric), 1)
+          f(m(e.secondaryMetric), 1)
         ]),
         key: "1"
       } : void 0
-    ]), 1032, ["info-icon-tooltip-text", "title", "copy", "fit-content", "size", "trend", "trend-direction", "secondary-trend", "secondary-trend-direction", "underline-tooltip-text"]));
+    ]), 1032, ["info-icon-tooltip-text", "title", "copy", "fit-content", "size", "trend", "trend-direction", "secondary-trend", "secondary-trend-direction", "underline-popover-size", "underline-tooltip-text"]));
   }
-}), pe = {}, Ee = /* @__PURE__ */ v({
-  ...pe,
+}), me = {}, Pe = /* @__PURE__ */ v({
+  ...me,
   __name: "summary-grid-item-percentage",
   props: {
     label: {},
@@ -331,11 +337,12 @@ const te = { class: "b-summary-grid" }, oe = {}, ne = /* @__PURE__ */ v({
     trendDirection: { default: "positive" },
     secondaryTrend: { default: null },
     secondaryTrendDirection: { default: "positive" },
+    underlinePopoverSize: { default: "fit-content" },
     underlineTooltipText: { default: null }
   },
-  setup(l) {
-    const a = T(), s = _(a);
-    return (e, m) => (i(), c(t(C), {
+  setup(i) {
+    const d = T(), a = _(d);
+    return (e, p) => (r(), c(t(k), {
       "item-type": "percentage",
       "info-icon-tooltip-text": e.infoIconTooltipText,
       title: e.title,
@@ -346,31 +353,32 @@ const te = { class: "b-summary-grid" }, oe = {}, ne = /* @__PURE__ */ v({
       "trend-direction": e.trendDirection,
       "secondary-trend": e.secondaryTrend,
       "secondary-trend-direction": e.secondaryTrendDirection,
+      "underline-popover-size": e.underlinePopoverSize,
       "underline-tooltip-text": e.underlineTooltipText,
       class: "b-summary-grid-item-percentage"
     }, h({
       default: o(() => [
-        f(" " + p(e.label) + "% ", 1)
+        f(" " + m(e.label) + "% ", 1)
       ]),
       _: 2
     }, [
-      t(s)("dashed-underline") ? {
+      t(a)("dashed-underline") ? {
         name: "dashed-underline",
         fn: o(() => [
-          d(e.$slots, "dashed-underline")
+          s(e.$slots, "dashed-underline")
         ]),
         key: "0"
       } : void 0,
       e.secondaryMetric ? {
         name: "secondary",
         fn: o(() => [
-          f(p(e.secondaryMetric) + "% ", 1)
+          f(m(e.secondaryMetric) + "% ", 1)
         ]),
         key: "1"
       } : void 0
-    ]), 1032, ["info-icon-tooltip-text", "title", "copy", "fit-content", "size", "trend", "trend-direction", "secondary-trend", "secondary-trend-direction", "underline-tooltip-text"]));
+    ]), 1032, ["info-icon-tooltip-text", "title", "copy", "fit-content", "size", "trend", "trend-direction", "secondary-trend", "secondary-trend-direction", "underline-popover-size", "underline-tooltip-text"]));
   }
-}), fe = {}, Le = /* @__PURE__ */ v({
+}), fe = {}, Ee = /* @__PURE__ */ v({
   ...fe,
   __name: "summary-grid-item-text",
   props: {
@@ -379,34 +387,36 @@ const te = { class: "b-summary-grid" }, oe = {}, ne = /* @__PURE__ */ v({
     infoIconTooltipText: { default: null },
     label: {},
     title: {},
+    underlinePopoverSize: { default: "fit-content" },
     underlineTooltipText: { default: null }
   },
-  setup(l) {
-    const a = T(), s = _(a);
-    return (e, m) => (i(), c(t(C), {
+  setup(i) {
+    const d = T(), a = _(d);
+    return (e, p) => (r(), c(t(k), {
       "item-type": "text",
       "info-icon-tooltip-text": e.infoIconTooltipText,
       title: e.title,
       copy: e.copy,
       "fit-content": e.fitContent,
+      "underline-popover-size": e.underlinePopoverSize,
       "underline-tooltip-text": e.underlineTooltipText,
       class: "b-summary-grid-item-text"
     }, h({
       default: o(() => [
-        f(" " + p(e.label), 1)
+        f(" " + m(e.label), 1)
       ]),
       _: 2
     }, [
-      t(s)("dashed-underline") ? {
+      t(a)("dashed-underline") ? {
         name: "dashed-underline",
         fn: o(() => [
-          d(e.$slots, "dashed-underline")
+          s(e.$slots, "dashed-underline")
         ]),
         key: "0"
       } : void 0
-    ]), 1032, ["info-icon-tooltip-text", "title", "copy", "fit-content", "underline-tooltip-text"]));
+    ]), 1032, ["info-icon-tooltip-text", "title", "copy", "fit-content", "underline-popover-size", "underline-tooltip-text"]));
   }
-}), ye = {}, Re = /* @__PURE__ */ v({
+}), ye = {}, Le = /* @__PURE__ */ v({
   ...ye,
   __name: "summary-grid-item-custom",
   props: {
@@ -414,41 +424,43 @@ const te = { class: "b-summary-grid" }, oe = {}, ne = /* @__PURE__ */ v({
     infoIconTooltipText: { default: null },
     title: {},
     fitContent: { type: Boolean, default: !1 },
+    underlinePopoverSize: { default: "fit-content" },
     underlineTooltipText: { default: null }
   },
-  setup(l) {
-    const a = T(), s = _(a);
-    return (e, m) => (i(), c(C, {
+  setup(i) {
+    const d = T(), a = _(d);
+    return (e, p) => (r(), c(k, {
       title: e.title,
       "info-icon-tooltip-text": e.infoIconTooltipText,
       copy: e.copy,
       "fit-content": e.fitContent,
+      "underline-popover-size": e.underlinePopoverSize,
       "underline-tooltip-text": e.underlineTooltipText
     }, h({
       default: o(() => [
-        d(e.$slots, "default")
+        s(e.$slots, "default")
       ]),
       _: 2
     }, [
-      t(s)("dashed-underline") ? {
+      t(a)("dashed-underline") ? {
         name: "dashed-underline",
         fn: o(() => [
-          d(e.$slots, "dashed-underline")
+          s(e.$slots, "dashed-underline")
         ]),
         key: "0"
       } : void 0
-    ]), 1032, ["title", "info-icon-tooltip-text", "copy", "fit-content", "underline-tooltip-text"]));
+    ]), 1032, ["title", "info-icon-tooltip-text", "copy", "fit-content", "underline-popover-size", "underline-tooltip-text"]));
   }
 });
-var ve = /* @__PURE__ */ ((l) => (l.SMALL = "small", l.MEDIUM = "medium", l.LARGE = "large", l))(ve || {}), Te = /* @__PURE__ */ ((l) => (l.POSITIVE = "positive", l.NEGATIVE = "negative", l.NEUTRAL = "neutral", l))(Te || {});
+var ve = /* @__PURE__ */ ((i) => (i.SMALL = "small", i.MEDIUM = "medium", i.LARGE = "large", i))(ve || {}), Te = /* @__PURE__ */ ((i) => (i.POSITIVE = "positive", i.NEGATIVE = "negative", i.NEUTRAL = "neutral", i))(Te || {});
 export {
   ve as B,
-  ze as _,
-  we as a,
-  Ee as b,
-  Le as c,
-  Re as d,
+  we as _,
+  Be as a,
+  Pe as b,
+  Ee as c,
+  Le as d,
   Te as e,
-  Be as s
+  Me as s
 };
-//# sourceMappingURL=summary-grid.types.DOYW579A.js.map
+//# sourceMappingURL=summary-grid.types.lGX16F4w.js.map