@adyen/bento-vue2 1.81.0 → 1.82.0

package/dist/chunks/cross-circle-fill.DTDtgLMf.js

@@ -0,0 +1,24 @@
+/* empty css              */
+import { n as r } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+let i = 0;
+const e = {
+  beforeCreate() {
+    this.uuid = i.toString(), i += 1;
+  }
+};
+var l = function() {
+  var t = this, s = t._self._c;
+  return s("svg", t._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", t.$attrs, !1), [t.$attrs["svg-title"] ? s("title", [t._v(t._s(t.$attrs["svg-title"]))]) : t._e(), s("g", { attrs: { "clip-path": "url(#uia-ui-assets/icons-16-cross_circle_fill__a" + t.uuid + ")" } }, [s("path", { attrs: { fill: "#001222", d: "M0.25 8C0.25 3.71979 3.71979 0.25 8 0.25C12.2802 0.25 15.75 3.71979 15.75 8C15.75 12.2802 12.2802 15.75 8 15.75C3.71979 15.75 0.25 12.2802 0.25 8ZM6.00011 4.93945L4.93945 6.00011L6.93945 8.00011L4.93945 10.0001L6.00011 11.0608L8.00011 9.06077L10.0001 11.0608L11.0608 10.0001L9.06077 8.00011L11.0608 6.00011L10.0001 4.93945L8.00011 6.93945L6.00011 4.93945Z" } })]), s("defs", [s("clipPath", { attrs: { id: "uia-ui-assets/icons-16-cross_circle_fill__a" + t.uuid } }, [s("rect", { attrs: { width: "16", height: "16", fill: "#fff" } })])])]);
+}, a = [], n = /* @__PURE__ */ r(
+  e,
+  l,
+  a,
+  !1,
+  null,
+  null
+);
+const f = n.exports;
+export {
+  f as C
+};
+//# sourceMappingURL=cross-circle-fill.DTDtgLMf.js.map

package/dist/chunks/cross-circle-fill.DTDtgLMf.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cross-circle-fill.DTDtgLMf.js","sources":["../../../ui-assets/icons-16/dist/vue/cross-circle-fill.vue"],"sourcesContent":["\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><g :clip-path=\"'url(#uia-ui-assets/icons-16-cross_circle_fill__a' + uuid + ')'\"><path fill=\"#001222\" d=\"M0.25 8C0.25 3.71979 3.71979 0.25 8 0.25C12.2802 0.25 15.75 3.71979 15.75 8C15.75 12.2802 12.2802 15.75 8 15.75C3.71979 15.75 0.25 12.2802 0.25 8ZM6.00011 4.93945L4.93945 6.00011L6.93945 8.00011L4.93945 10.0001L6.00011 11.0608L8.00011 9.06077L10.0001 11.0608L11.0608 10.0001L9.06077 8.00011L11.0608 6.00011L10.0001 4.93945L8.00011 6.93945L6.00011 4.93945Z\"/></g><defs><clipPath :id=\"'uia-ui-assets/icons-16-cross_circle_fill__a' + uuid\"><rect width=\"16\" height=\"16\" fill=\"#fff\"/></clipPath></defs></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n"],"names":["uuid","_sfc_main"],"mappings":";;AAOA,IAAAA,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;"}

package/dist/chunks/cross-small.CoQUe8SS.js

@@ -0,0 +1,24 @@
+/* empty css              */
+import { n as r } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+let e = 0;
+const n = {
+  beforeCreate() {
+    this.uuid = e.toString(), e += 1;
+  }
+};
+var i = function() {
+  var t = this, s = t._self._c;
+  return s("svg", t._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", t.$attrs, !1), [t.$attrs["svg-title"] ? s("title", [t._v(t._s(t.$attrs["svg-title"]))]) : t._e(), s("path", { attrs: { fill: "#001222", d: "M9.06089 8L11.5608 5.50011L10.5001 4.43945L8.00023 6.93934L5.50034 4.43945L4.43968 5.50011L6.93957 8L4.43945 10.5001L5.50011 11.5608L8.00023 9.06066L10.5003 11.5608L11.561 10.5001L9.06089 8Z" } })]);
+}, a = [], o = /* @__PURE__ */ r(
+  n,
+  i,
+  a,
+  !1,
+  null,
+  null
+);
+const L = o.exports;
+export {
+  L as C
+};
+//# sourceMappingURL=cross-small.CoQUe8SS.js.map

package/dist/chunks/cross-small.CoQUe8SS.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cross-small.CoQUe8SS.js","sources":["../../../ui-assets/icons-16/dist/vue/cross-small.vue"],"sourcesContent":["\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#001222\" d=\"M9.06089 8L11.5608 5.50011L10.5001 4.43945L8.00023 6.93934L5.50034 4.43945L4.43968 5.50011L6.93957 8L4.43945 10.5001L5.50011 11.5608L8.00023 9.06066L10.5003 11.5608L11.561 10.5001L9.06089 8Z\"/></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n"],"names":["uuid","_sfc_main"],"mappings":";;AAOA,IAAAA,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;"}

package/dist/chunks/cross.CC_B-vG-.js

@@ -0,0 +1,24 @@
+/* empty css              */
+import { n as r } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+let e = 0;
+const n = {
+  beforeCreate() {
+    this.uuid = e.toString(), e += 1;
+  }
+};
+var i = function() {
+  var t = this, s = t._self._c;
+  return s("svg", t._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", t.$attrs, !1), [t.$attrs["svg-title"] ? s("title", [t._v(t._s(t.$attrs["svg-title"]))]) : t._e(), s("path", { attrs: { fill: "#001222", d: "M8.00023 9.06089L12.0001 13.0608L13.0608 12.0001L9.06089 8.00023L13.061 4.00011L12.0003 2.93945L8.00023 6.93957L4.00011 2.93945L2.93945 4.00011L6.93957 8.00023L2.93968 12.0001L4.00034 13.0608L8.00023 9.06089Z" } })]);
+}, a = [], o = /* @__PURE__ */ r(
+  n,
+  i,
+  a,
+  !1,
+  null,
+  null
+);
+const L = o.exports;
+export {
+  L as C
+};
+//# sourceMappingURL=cross.CC_B-vG-.js.map

package/dist/chunks/cross.CC_B-vG-.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cross.CC_B-vG-.js","sources":["../../../ui-assets/icons-16/dist/vue/cross.vue"],"sourcesContent":["\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#001222\" d=\"M8.00023 9.06089L12.0001 13.0608L13.0608 12.0001L9.06089 8.00023L13.061 4.00011L12.0003 2.93945L8.00023 6.93957L4.00011 2.93945L2.93945 4.00011L6.93957 8.00023L2.93968 12.0001L4.00034 13.0608L8.00023 9.06089Z\"/></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n"],"names":["uuid","_sfc_main"],"mappings":";;AAOA,IAAAA,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;"}

package/dist/chunks/currency.Cwhzzxw2.js

@@ -0,0 +1,114 @@
+import { defineComponent as m, useSlots as p, computed as _, onMounted as Y } from "vue";
+import { p as f, d as g, B as H } from "./typography.hlOAxsEn.js";
+import { u as Z } from "./index.B6WW_F-J.js";
+import { g as L } from "./get-slot-text.Bjb9dTSV.js";
+import { n as W } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/currency.css";
+const V = [
+  {
+    exponent: 0,
+    currencies: [
+      "CVE",
+      "DJF",
+      "GNF",
+      "IDR",
+      "JPY",
+      "KMF",
+      "KRW",
+      "PYG",
+      "RWF",
+      "UGX",
+      "VND",
+      "VUV",
+      "XAF",
+      "XOF",
+      "XPF"
+    ]
+  },
+  {
+    exponent: 1,
+    currencies: ["MRO"]
+  },
+  {
+    exponent: 3,
+    currencies: ["BHD", "IQD", "JOD", "KWD", "LYD", "OMR", "TND"]
+  }
+], A = (D) => V.find((s) => s.currencies.includes(D));
+function l(D) {
+  const s = A(D);
+  return (s == null ? void 0 : s.exponent) ?? 2;
+}
+const v = (D, s) => D / 10 ** l(s);
+function X() {
+  const { n: D } = Z(), s = "USD", R = "standard";
+  return {
+    formatCurrency: (M, a) => {
+      var T;
+      const K = (a == null ? void 0 : a.currency) ?? s, N = Number(M) || 0;
+      isNaN(Number(M)) && f(
+        "The value provided is not a valid string with numbers or valid number. Falling back to 0."
+      );
+      const F = a != null && a.majorUnits ? N : v(N, K), P = ((T = A(K)) == null ? void 0 : T.exponent) ?? l(K), U = D(F, {
+        style: "currency",
+        currency: K,
+        currencySign: (a == null ? void 0 : a.currencySign) ?? R,
+        currencyDisplay: "code",
+        minimumFractionDigits: P,
+        maximumFractionDigits: P
+      }), E = new RegExp(`\\s*${K}\\s*`);
+      return `${U.replace(E, "")} ${K}`;
+    }
+  };
+}
+var G = /* @__PURE__ */ ((D) => (D.AED = "AED", D.AFA = "AFA", D.ALL = "ALL", D.AMD = "AMD", D.ANG = "ANG", D.AOA = "AOA", D.ARS = "ARS", D.AUD = "AUD", D.AWG = "AWG", D.AZN = "AZN", D.BAM = "BAM", D.BBD = "BBD", D.BDT = "BDT", D.BEF = "BEF", D.BGN = "BGN", D.BHD = "BHD", D.BIF = "BIF", D.BMD = "BMD", D.BND = "BND", D.BOB = "BOB", D.BRL = "BRL", D.BSD = "BSD", D.BTC = "BTC", D.BTN = "BTN", D.BWP = "BWP", D.BYR = "BYR", D.BZD = "BZD", D.CAD = "CAD", D.CDF = "CDF", D.CHF = "CHF", D.CLF = "CLF", D.CLP = "CLP", D.CNY = "CNY", D.COP = "COP", D.CRC = "CRC", D.CUC = "CUC", D.CVE = "CVE", D.CZK = "CZK", D.DEM = "DEM", D.DJF = "DJF", D.DKK = "DKK", D.DOP = "DOP", D.DZD = "DZD", D.EEK = "EEK", D.EGP = "EGP", D.ERN = "ERN", D.ETB = "ETB", D.EUR = "EUR", D.FJD = "FJD", D.FKP = "FKP", D.GBP = "GBP", D.GEL = "GEL", D.GHS = "GHS", D.GIP = "GIP", D.GMD = "GMD", D.GNF = "GNF", D.GRD = "GRD", D.GTQ = "GTQ", D.GYD = "GYD", D.HKD = "HKD", D.HNL = "HNL", D.HRK = "HRK", D.HTG = "HTG", D.HUF = "HUF", D.IDR = "IDR", D.ILS = "ILS", D.INR = "INR", D.IQD = "IQD", D.IRR = "IRR", D.ISK = "ISK", D.ITL = "ITL", D.JMD = "JMD", D.JOD = "JOD", D.JPY = "JPY", D.KES = "KES", D.KGS = "KGS", D.KHR = "KHR", D.KMF = "KMF", D.KPW = "KPW", D.KRW = "KRW", D.KWD = "KWD", D.KYD = "KYD", D.KZT = "KZT", D.LAK = "LAK", D.LBP = "LBP", D.LKR = "LKR", D.LRD = "LRD", D.LSL = "LSL", D.LTC = "LTC", D.LTL = "LTL", D.LVL = "LVL", D.LYD = "LYD", D.MAD = "MAD", D.MDL = "MDL", D.MGA = "MGA", D.MKD = "MKD", D.MMK = "MMK", D.MNT = "MNT", D.MOP = "MOP", D.MRO = "MRO", D.MRU = "MRU", D.MUR = "MUR", D.MVR = "MVR", D.MWK = "MWK", D.MXN = "MXN", D.MYR = "MYR", D.MZM = "MZM", D.NAD = "NAD", D.NGN = "NGN", D.NIO = "NIO", D.NOK = "NOK", D.NPR = "NPR", D.NZD = "NZD", D.OMR = "OMR", D.PAB = "PAB", D.PEN = "PEN", D.PGK = "PGK", D.PHP = "PHP", D.PKR = "PKR", D.PLN = "PLN", D.PYG = "PYG", D.QAR = "QAR", D.RON = "RON", D.RSD = "RSD", D.RUB = "RUB", D.RWF = "RWF", D.SAR = "SAR", D.SBD = "SBD", D.SCR = "SCR", D.SDG = "SDG", D.SEK = "SEK", D.SGD = "SGD", D.SHP = "SHP", D.SKK = "SKK", D.SLL = "SLL", D.SOS = "SOS", D.SRD = "SRD", D.SSP = "SSP", D.STD = "STD", D.SVC = "SVC", D.SYP = "SYP", D.SZL = "SZL", D.THB = "THB", D.TJS = "TJS", D.TMT = "TMT", D.TND = "TND", D.TOP = "TOP", D.TRY = "TRY", D.TTD = "TTD", D.TWD = "TWD", D.TZS = "TZS", D.UAH = "UAH", D.UGX = "UGX", D.USD = "USD", D.UYU = "UYU", D.UZS = "UZS", D.VEF = "VEF", D.VND = "VND", D.VUV = "VUV", D.WST = "WST", D.XAF = "XAF", D.XCD = "XCD", D.XDR = "XDR", D.XOF = "XOF", D.XPF = "XPF", D.YER = "YER", D.ZAR = "ZAR", D.ZMK = "ZMK", D.ZWL = "ZWL", D))(G || {});
+const b = {
+  name: "bento-currency",
+  i18n: {}
+  // required to enable E2E to run as they do not have vue-i18n set up
+}, J = /* @__PURE__ */ m({
+  ...b,
+  props: {
+    currency: { default: G.EUR },
+    disableTypography: { type: Boolean, default: !1 },
+    majorUnits: { type: Boolean, default: !1 },
+    value: { default: void 0 },
+    currencySign: { default: "standard" }
+  },
+  setup(D) {
+    const s = D, R = p(), { formatCurrency: i } = X(), M = _(() => {
+      const a = s.value ?? L(R)("default");
+      return i(a, {
+        currency: s.currency,
+        currencySign: s.currencySign,
+        majorUnits: s.majorUnits
+      });
+    });
+    return Y(() => {
+      L(R)("default") && g(
+        'BentoCurrency "default" slot',
+        `The use of "default" slot in "BentoCurrency" is no longer supported as it causes issues with dynamic content.
+                Use the "value" property instead.
+                <bento-currency :value="12345.67" currency="USD" major-units="false" />`,
+        "2.0.0"
+      );
+    }), { __sfc: !0, slots: R, props: s, formatCurrency: i, formattedCurrency: M, BentoTypography: H };
+  }
+});
+var x = function() {
+  var s = this, R = s._self._c, i = s._self._setupProxy;
+  return R("div", { staticClass: "b-currency" }, [s.disableTypography ? [s._v(s._s(i.formattedCurrency))] : R(i.BentoTypography, { staticClass: "b-currency__amount", attrs: { el: "span", variant: "body", strong: "" } }, [s._v(" " + s._s(i.formattedCurrency) + " ")])], 2);
+}, h = [], Q = /* @__PURE__ */ W(
+  J,
+  x,
+  h,
+  !1,
+  null,
+  "b35cc13f"
+);
+const t = Q.exports;
+export {
+  G as B,
+  t as c,
+  X as u
+};
+//# sourceMappingURL=currency.Cwhzzxw2.js.map

package/dist/chunks/currency.Cwhzzxw2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"currency.Cwhzzxw2.js","sources":["../../src/utils/ts/currency/currency-map.ts","../../src/utils/ts/currency/currency.ts","../../src/composables/use-bento-currency/use-bento-currency.ts","../../src/components/currency/currency.types.ts","../../src/components/currency/currency.vue"],"sourcesContent":["export interface CurrencyMap {\n    exponent: number;\n    currencies: Array<string>;\n}\n\n/**\n * Contains mapping configuration between currency code and exponent for amount in the corresponding currency.\n * https://docs.adyen.com/development-resources/currency-codes\n *\n * @internal\n */\nexport const currencyMap: Array<CurrencyMap> = [\n    {\n        exponent: 0,\n        currencies: [\n            'CVE',\n            'DJF',\n            'GNF',\n            'IDR',\n            'JPY',\n            'KMF',\n            'KRW',\n            'PYG',\n            'RWF',\n            'UGX',\n            'VND',\n            'VUV',\n            'XAF',\n            'XOF',\n            'XPF',\n        ],\n    },\n    {\n        exponent: 1,\n        currencies: ['MRO'],\n    },\n    {\n        exponent: 3,\n        currencies: ['BHD', 'IQD', 'JOD', 'KWD', 'LYD', 'OMR', 'TND'],\n    },\n];\n","import { currencyMap, type CurrencyMap } from './currency-map';\nimport { type CurrencyAmount } from './currency.types';\n\n/**\n * Returns exponent for specified currency code that do not adhere to the ISO 4217 standard.\n */\nexport const getNonStandardCurrency = (currency: string): CurrencyMap =>\n    currencyMap.find(item => item.currencies.includes(currency));\n\n/**\n * Returns the number of minor units (decimal places) for a given currency.\n * The function uses an internal map for currencies with non-standard decimal places and defaults to 2 for all others.\n *\n * @param currency - The three-letter ISO 4217 currency code (e.g., 'USD', 'JPY').\n * @returns The number of decimal places for the currency.\n *\n * @example\n * getMinorUnitDigits('USD'); // Returns 2\n * getMinorUnitDigits('JPY'); // Returns 0\n */\nexport function getMinorUnitDigits(currency: string): number {\n    const exception = getNonStandardCurrency(currency);\n\n    return exception?.exponent ?? 2;\n}\n\n/**\n * Converts a currency amount from minor units to major units.\n *\n * @param amount The amount in minor units (e.g., cents).\n * @param currency The three-letter ISO 4217 currency code.\n * @returns The amount in major units (e.g., dollars).\n */\nexport const getNormalizedAmount = (amount: CurrencyAmount['value'], currency: string) =>\n    amount / 10 ** getMinorUnitDigits(currency);\n","import { getMinorUnitDigits, getNonStandardCurrency, getNormalizedAmount } from '@/utils/ts/currency';\nimport { useI18n } from '@/utils/ts/i18n';\nimport { printDevelopmentWarning } from '@/utils/ts/print-development-warning';\nimport { type BentoCurrencyISOCode } from '../../components/currency/currency.types';\n\nexport interface UseBentoCurrencyFormatCurrencyOptions {\n    currency: `${BentoCurrencyISOCode}`;\n    currencySign?: Intl.NumberFormatOptions['currencySign'];\n    majorUnits?: boolean;\n}\n\n/**\n * A composable that returns a fully formatted and localized currency string.\n * It enforces the format `[localized number][non-breaking space][ISO code]`.\n *\n * @remarks\n * The formatting process involves several steps:\n * 1.  It safely resolves the input `value`, whether it's from a prop or a slot, into a valid number.\n *\n * 2.  If `majorUnits` is false, it converts the amount from minor units to major units\n * (e.g., cents to dollars) by dividing by 10 to the power of the currency's\n * decimal places (the \"exponent\"). For example, `12345 / (10 ** 2)` becomes `123.45`.\n *\n * 3.  It determines the correct number of decimal places, respecting any non-standard\n * currency exceptions.\n *\n * 4.  It uses `vue-i18n` to format the number with the correct sign placement and decimal/thousand\n * separators for the current locale, then manually reconstructs the string to ensure\n * the ISO code is always at the end.\n *\n * @returns An object with a function to format the currency string.\n */\nexport function useBentoCurrency() {\n    const { n } = useI18n();\n\n    const DEFAULT_CURRENCY = 'USD';\n    const DEFAULT_CURRENCY_SIGN = 'standard';\n\n    /**\n     * Formats a given amount into a localized currency string with a specific structure.\n     *\n     * This function ensures that the output format is always `[localized number][non-breaking space][ISO code]`,\n     * providing a consistent and predictable currency representation across different locales.\n     *\n     * @param amount The numeric value to be formatted. If `formatOptions.majorUnits` is `false` or undefined,\n     * this value is treated as being in the currency's minor units (e.g., cents).\n     * @param formatOptions An optional object containing options for currency formatting.\n     * - `currency`: The 3-letter ISO currency code (e.g., `'USD'`, `'EUR'`). Defaults to `'USD'`.\n     * - `currencySign`: The currency sign to use. Can be `'standard'` or `'accounting'`. Defaults to `'standard'`. In `accounting` mode, negative values are typically wrapped in parentheses.\n     * - `majorUnits`: Set to `true` if the `amount` is already in major units (e.g., dollars instead of cents). Defaults to `false`.\n     *\n     * @returns A fully formatted and localized currency string (e.g., \"1,234.56 EUR\").\n     */\n    const formatCurrency = (amount: string | number, formatOptions?: UseBentoCurrencyFormatCurrencyOptions): string => {\n        const targetCurrency = formatOptions?.currency ?? DEFAULT_CURRENCY;\n\n        // Parse and Fallback\n        const parsedValue = Number(amount) || 0;\n\n        if (isNaN(Number(amount))) {\n            printDevelopmentWarning(\n                'The value provided is not a valid string with numbers or valid number. Falling back to 0.'\n            );\n        }\n\n        // Normalize Amount\n        const normalizedAmount = formatOptions?.majorUnits\n            ? parsedValue\n            : getNormalizedAmount(parsedValue, targetCurrency);\n\n        // Determine Precision\n        const fractionDigits = getNonStandardCurrency(targetCurrency)?.exponent ?? getMinorUnitDigits(targetCurrency);\n\n        // Format with Locale\n        const localizedCurrencyString = n(normalizedAmount, {\n            style: 'currency',\n            currency: targetCurrency,\n            currencySign: formatOptions?.currencySign ?? DEFAULT_CURRENCY_SIGN,\n            currencyDisplay: 'code',\n            minimumFractionDigits: fractionDigits,\n            maximumFractionDigits: fractionDigits,\n        });\n\n        // Enforce Standard Format: `[number][nbsp][code]`\n        const isoCodeRegex = new RegExp(`\\\\s*${targetCurrency}\\\\s*`);\n        const numberPart = localizedCurrencyString.replace(isoCodeRegex, '');\n\n        return `${numberPart}\\u00A0${targetCurrency}`;\n    };\n\n    return {\n        formatCurrency,\n    };\n}\n","export interface BentoCurrencyProps {\n    /**\n     * Currency code based on the ISO 4217 standard\n     */\n    currency?: BentoCurrencyISOCode | `${BentoCurrencyISOCode}`;\n\n    /**\n     * Disable the default typography for the component. Only use this when the component is inside another typography component.\n     */\n    disableTypography?: boolean;\n\n    /**\n     * Accepts currency value in major units instead of minor ones\n     */\n    majorUnits?: boolean;\n\n    /**\n     * Currency value to be formatted\n     */\n    value?: number;\n\n    /**\n     * Determines how the currency symbol and negative values are displayed.\n     * This is only applicable to certain countries such as `en-US`.\n     *\n     * - `'standard'`: Default format (e.g., `-1,234.56 USD`).\n     * - `'accounting'`: Uses accounting conventions, such as wrapping negative numbers in parentheses (e.g., `(1,234.56) USD`).\n     *\n     * @default 'standard'\n     */\n    currencySign?: Intl.NumberFormatOptions['currencySign'];\n}\n\nexport enum BentoCurrencyISOCode {\n    AED = 'AED',\n    AFA = 'AFA',\n    ALL = 'ALL',\n    AMD = 'AMD',\n    ANG = 'ANG',\n    AOA = 'AOA',\n    ARS = 'ARS',\n    AUD = 'AUD',\n    AWG = 'AWG',\n    AZN = 'AZN',\n    BAM = 'BAM',\n    BBD = 'BBD',\n    BDT = 'BDT',\n    BEF = 'BEF',\n    BGN = 'BGN',\n    BHD = 'BHD',\n    BIF = 'BIF',\n    BMD = 'BMD',\n    BND = 'BND',\n    BOB = 'BOB',\n    BRL = 'BRL',\n    BSD = 'BSD',\n    BTC = 'BTC',\n    BTN = 'BTN',\n    BWP = 'BWP',\n    BYR = 'BYR',\n    BZD = 'BZD',\n    CAD = 'CAD',\n    CDF = 'CDF',\n    CHF = 'CHF',\n    CLF = 'CLF',\n    CLP = 'CLP',\n    CNY = 'CNY',\n    COP = 'COP',\n    CRC = 'CRC',\n    CUC = 'CUC',\n    CVE = 'CVE',\n    CZK = 'CZK',\n    DEM = 'DEM',\n    DJF = 'DJF',\n    DKK = 'DKK',\n    DOP = 'DOP',\n    DZD = 'DZD',\n    EEK = 'EEK',\n    EGP = 'EGP',\n    ERN = 'ERN',\n    ETB = 'ETB',\n    EUR = 'EUR',\n    FJD = 'FJD',\n    FKP = 'FKP',\n    GBP = 'GBP',\n    GEL = 'GEL',\n    GHS = 'GHS',\n    GIP = 'GIP',\n    GMD = 'GMD',\n    GNF = 'GNF',\n    GRD = 'GRD',\n    GTQ = 'GTQ',\n    GYD = 'GYD',\n    HKD = 'HKD',\n    HNL = 'HNL',\n    HRK = 'HRK',\n    HTG = 'HTG',\n    HUF = 'HUF',\n    IDR = 'IDR',\n    ILS = 'ILS',\n    INR = 'INR',\n    IQD = 'IQD',\n    IRR = 'IRR',\n    ISK = 'ISK',\n    ITL = 'ITL',\n    JMD = 'JMD',\n    JOD = 'JOD',\n    JPY = 'JPY',\n    KES = 'KES',\n    KGS = 'KGS',\n    KHR = 'KHR',\n    KMF = 'KMF',\n    KPW = 'KPW',\n    KRW = 'KRW',\n    KWD = 'KWD',\n    KYD = 'KYD',\n    KZT = 'KZT',\n    LAK = 'LAK',\n    LBP = 'LBP',\n    LKR = 'LKR',\n    LRD = 'LRD',\n    LSL = 'LSL',\n    LTC = 'LTC',\n    LTL = 'LTL',\n    LVL = 'LVL',\n    LYD = 'LYD',\n    MAD = 'MAD',\n    MDL = 'MDL',\n    MGA = 'MGA',\n    MKD = 'MKD',\n    MMK = 'MMK',\n    MNT = 'MNT',\n    MOP = 'MOP',\n    MRO = 'MRO',\n    MRU = 'MRU',\n    MUR = 'MUR',\n    MVR = 'MVR',\n    MWK = 'MWK',\n    MXN = 'MXN',\n    MYR = 'MYR',\n    MZM = 'MZM',\n    NAD = 'NAD',\n    NGN = 'NGN',\n    NIO = 'NIO',\n    NOK = 'NOK',\n    NPR = 'NPR',\n    NZD = 'NZD',\n    OMR = 'OMR',\n    PAB = 'PAB',\n    PEN = 'PEN',\n    PGK = 'PGK',\n    PHP = 'PHP',\n    PKR = 'PKR',\n    PLN = 'PLN',\n    PYG = 'PYG',\n    QAR = 'QAR',\n    RON = 'RON',\n    RSD = 'RSD',\n    RUB = 'RUB',\n    RWF = 'RWF',\n    SAR = 'SAR',\n    SBD = 'SBD',\n    SCR = 'SCR',\n    SDG = 'SDG',\n    SEK = 'SEK',\n    SGD = 'SGD',\n    SHP = 'SHP',\n    SKK = 'SKK',\n    SLL = 'SLL',\n    SOS = 'SOS',\n    SRD = 'SRD',\n    SSP = 'SSP',\n    STD = 'STD',\n    SVC = 'SVC',\n    SYP = 'SYP',\n    SZL = 'SZL',\n    THB = 'THB',\n    TJS = 'TJS',\n    TMT = 'TMT',\n    TND = 'TND',\n    TOP = 'TOP',\n    TRY = 'TRY',\n    TTD = 'TTD',\n    TWD = 'TWD',\n    TZS = 'TZS',\n    UAH = 'UAH',\n    UGX = 'UGX',\n    USD = 'USD',\n    UYU = 'UYU',\n    UZS = 'UZS',\n    VEF = 'VEF',\n    VND = 'VND',\n    VUV = 'VUV',\n    WST = 'WST',\n    XAF = 'XAF',\n    XCD = 'XCD',\n    XDR = 'XDR',\n    XOF = 'XOF',\n    XPF = 'XPF',\n    YER = 'YER',\n    ZAR = 'ZAR',\n    ZMK = 'ZMK',\n    ZWL = 'ZWL',\n}\n","<template>\n    <div class=\"b-currency\">\n        <bento-typography v-if=\"!disableTypography\" class=\"b-currency__amount\" el=\"span\" variant=\"body\" strong>\n            {{ formattedCurrency }}\n        </bento-typography>\n\n        <template v-else>{{ formattedCurrency }}</template>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onMounted, useSlots } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { useBentoCurrency } from '@/composables/use-bento-currency/use-bento-currency';\n    import { deprecate } from '@/utils/ts/deprecate';\n    import { getSlotText } from '@/utils/ts/get-slot-text';\n    import { BentoCurrencyISOCode, type BentoCurrencyProps } from './currency.types';\n\n    const slots = useSlots();\n\n    const props = defineProps({\n  currency: { default: BentoCurrencyISOCode.EUR },\n  disableTypography: { type: Boolean, default: false },\n  majorUnits: { type: Boolean, default: false },\n  value: { default: undefined },\n  currencySign: { default: 'standard' }\n});\n\n    const { formatCurrency } = useBentoCurrency();\n\n    const formattedCurrency = computed(() => {\n        const rawCurrencyValue = props.value ?? getSlotText(slots)('default');\n\n        return formatCurrency(rawCurrencyValue, {\n            currency: props.currency,\n            currencySign: props.currencySign,\n            majorUnits: props.majorUnits,\n        });\n    });\n\n    onMounted(() => {\n        if (getSlotText(slots)('default')) {\n            deprecate(\n                'BentoCurrency \"default\" slot',\n                `The use of \"default\" slot in \"BentoCurrency\" is no longer supported as it causes issues with dynamic content.\n                Use the \"value\" property instead.\n                <bento-currency :value=\"12345.67\" currency=\"USD\" major-units=\"false\" />`,\n                '2.0.0'\n            );\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A Currency component is used to display a formatted currency value.\n     *\n     * @example\n     * import { BentoCurrency, BentoCurrencyISOCode } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoCurrency },\n     *     template: `\n     *          <bento-currency\n     *              :currency=\"BentoCurrencyISOCode.USD\"\n     *              :value=\"76.33\"\n     *          />\n     *     `\n     * }\n     */\n    export default {\n        name: 'bento-currency',\n        i18n: {}, // required to enable E2E to run as they do not have vue-i18n set up\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./currency.scss\" />\n"],"names":["currencyMap","getNonStandardCurrency","currency","item","getMinorUnitDigits","exception","getNormalizedAmount","amount","useBentoCurrency","n","useI18n","DEFAULT_CURRENCY","DEFAULT_CURRENCY_SIGN","formatOptions","targetCurrency","parsedValue","printDevelopmentWarning","normalizedAmount","fractionDigits","_a","localizedCurrencyString","isoCodeRegex","BentoCurrencyISOCode","BentoCurrencyISOCode2","__default__","slots","useSlots","formatCurrency","formattedCurrency","computed","rawCurrencyValue","props","getSlotText","onMounted","deprecate"],"mappings":";;;;;;AAWO,MAAAA,IAAA;AAAA,EAAwC;AAAA,IAC3C,UAAA;AAAA,IACc,YAAA;AAAA,MACE;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACA;AAAA,EACJ;AAAA,EACJ;AAAA,IACA,UAAA;AAAA,IACc,YAAA,CAAA,KAAA;AAAA,EACQ;AAAA,EACtB;AAAA,IACA,UAAA;AAAA,IACc,YAAA,CAAA,OAAA,OAAA,OAAA,OAAA,OAAA,OAAA,KAAA;AAAA,EACkD;AAEpE,GClCaC,IAAA,CAAAC,MAAAF,EAAA,KAAA,CAAAG,MAAAA,EAAA,WAAA,SAAAD,CAAA,CAAA;AAcN,SAAAE,EAAAF,GAAA;AACH,QAAAG,IAAAJ,EAAAC,CAAA;AAEA,UAAAG,KAAA,gBAAAA,EAAA,aAAA;AACJ;AASO,MAAAC,IAAA,CAAAC,GAAAL,MAAAK,IAAA,MAAAH,EAAAF,CAAA;ACDA,SAAAM,IAAA;AACH,QAAA,EAAA,GAAAC,EAAA,IAAAC,EAAA,GAEAC,IAAA,OACAC,IAAA;AAsDA,SAAA;AAAA,IAAO,gBArCP,CAAAL,GAAAM,MAAA;;AACI,YAAAC,KAAAD,KAAA,gBAAAA,EAAA,aAAAF,GAGAI,IAAA,OAAAR,CAAA,KAAA;AAEA,MAAA,MAAA,OAAAA,CAAA,CAAA,KACIS;AAAA,QAAA;AAAA,MACI;AAKR,YAAAC,IAAAJ,KAAA,QAAAA,EAAA,aAAAE,IAAAT,EAAAS,GAAAD,CAAA,GAKAI,MAAAC,IAAAlB,EAAAa,CAAA,MAAA,gBAAAK,EAAA,aAAAf,EAAAU,CAAA,GAGAM,IAAAX,EAAAQ,GAAA;AAAA,QAAoD,OAAA;AAAA,QACzC,UAAAH;AAAA,QACG,eAAAD,KAAA,gBAAAA,EAAA,iBAAAD;AAAA,QACmC,iBAAA;AAAA,QAC5B,uBAAAM;AAAA,QACM,uBAAAA;AAAA,MACA,CAAA,GAI3BG,IAAA,IAAA,OAAA,OAAAP,CAAA,MAAA;AAGA,aAAA,GAFAM,EAAA,QAAAC,GAAA,EAAA,CAEA,IAAAP,CAAA;AAAA,IAA2C;AAAA,EAI3C;AAER;AC5DY,IAAAQ,IAAA,kBAAAC,OACRA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OAzKQA,IAAAD,KAAA,CAAA,CAAA;ACqCR,MAAAE,IAAA;AAAA,EAAe,MAAA;AAAA,EACL,MAAA,CAAA;AAAA;AAEV;;;;;;;;;;iBAvDAC,IAAAC,EAAA,GAUA,EAAA,gBAAAC,EAAA,IAAAnB,EAAA,GAEAoB,IAAAC,EAAA,MAAA;AACI,YAAAC,IAAAC,EAAA,SAAAC,EAAAP,CAAA,EAAA,SAAA;AAEA,aAAAE,EAAAG,GAAA;AAAA,QAAwC,UAAAC,EAAA;AAAA,QACpB,cAAAA,EAAA;AAAA,QACI,YAAAA,EAAA;AAAA,MACF,CAAA;AAAA,IACrB,CAAA;AAGL,WAAAE,EAAA,MAAA;AACI,MAAAD,EAAAP,CAAA,EAAA,SAAA,KACIS;AAAA,QAAA;AAAA,QACI;AAAA;AAAA;AAAA,QACA;AAAA,MAGA;AAAA,IAER,CAAA;;;;;;;;;;;;;;;"}

package/dist/chunks/dashboard-section.CgAfEay4.js

@@ -0,0 +1,102 @@
+import { defineComponent as v, useSlots as C, ref as _, computed as n, watch as m, onUnmounted as $, onMounted as I } from "vue";
+import { B as y } from "./header.QYvN86kI.js";
+import { B as R, a as x } from "./tab.DXE68qVf.js";
+import { c as H } from "./index.BDK4hwK_.js";
+import { o as P } from "./resize.Bqks3WUm.js";
+import { u as T } from "./use-has-slot.C9lQZ6nz.js";
+import { n as S } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { B as W } from "./divider.DX5gwN7p.js";
+import "../assets/dashboard-section.css";
+const O = {}, z = /* @__PURE__ */ v({
+  ...O,
+  __name: "dashboard-template",
+  props: {
+    header: null,
+    tabs: { default: void 0 },
+    stickyTabs: { type: Boolean, default: !1 },
+    stickyFilters: { type: Boolean, default: !1 }
+  },
+  setup(i) {
+    const t = i, a = C(), s = T(a), r = _(), e = _(null), b = _(!1);
+    let l = null;
+    const c = _(0), d = n(() => e.value && t.stickyFilters), f = n(() => r.value && t.stickyTabs), k = n(() => ({
+      "b-dashboard-template__filters--sticky": t.stickyFilters,
+      "b-dashboard-template__filters--show-border": d.value && !f.value && b.value
+    })), B = n(() => ({
+      "b-dashboard-template__top-section--sticky": t.stickyTabs || t.stickyFilters
+    })), F = n(() => Object.keys(a).filter((o) => o == null ? void 0 : o.includes("tab-"))), g = (o) => {
+      var p, h;
+      return ((h = (p = t == null ? void 0 : t.tabs.tabs) == null ? void 0 : p[o]) == null ? void 0 : h.title) ?? `Tab ${o + 1}`;
+    }, w = n(() => c.value ? { top: c.value } : void 0), { y: u } = H();
+    return m(
+      () => e.value,
+      () => {
+        !l && e.value && (l = P(e.value, () => {
+          if (e.value && f.value) {
+            const o = e.value.offsetHeight;
+            c.value = d.value ? o : 0;
+          }
+        }));
+      }
+    ), m(
+      () => u.value,
+      () => {
+        var o;
+        d.value && (b.value = ((o = e.value) == null ? void 0 : o.getBoundingClientRect().top) === 0);
+      }
+    ), $(() => {
+      l == null || l.disconnect();
+    }), { __sfc: !0, props: t, slots: a, hasSlot: s, tabsRef: r, filtersRef: e, isFiltersPinned: b, filtersElementObserver: l, tabsPosition: c, hasStickyFilters: d, hasStickyTabs: f, dashboardFiltersConditionalClasses: k, dashboardTopSectionConditionalClasses: B, tabsSlots: F, getTabTitle: g, computedTabsOptions: w, y: u, BentoHeader: y, BentoTab: x, BentoTabs: R };
+  }
+});
+var D = function() {
+  var t = this, a = t._self._c, s = t._self._setupProxy;
+  return a("main", { staticClass: "b-dashboard-template" }, [a(s.BentoHeader, t._b({ staticClass: "b-dashboard-template__header", attrs: { variant: "page" }, scopedSlots: t._u([s.hasSlot("infoIconTooltipContent") ? { key: "infoIconTooltipContent", fn: function() {
+    return [t._t("infoIconTooltipContent")];
+  }, proxy: !0 } : null], null, !0) }, "bento-header", t.header, !1)), a("div", { staticClass: "b-dashboard-template__top-section", class: s.dashboardTopSectionConditionalClasses }, [s.hasSlot("filters") ? a("div", { ref: "filtersRef", staticClass: "b-dashboard-template__filters", class: s.dashboardFiltersConditionalClasses, attrs: { "data-testid": "filters" } }, [t._t("filters")], 2) : t._e(), s.tabsSlots.length > 1 ? a(s.BentoTabs, { ref: "tabsRef", attrs: { "active-tab-index": t.tabs.activeTabIndex, sticky: t.stickyTabs, "sticky-options": s.computedTabsOptions, "data-testid": "tabs" } }, t._l(s.tabsSlots, function(r, e) {
+    return a(s.BentoTab, { key: `tab-${e}`, attrs: { title: s.getTabTitle(e) } }, [a("div", { staticClass: "b-dashboard-template__container b-dashboard-template__container--tabs" }, [t._t(`tab-${e + 1}`)], 2)]);
+  }), 1) : a("div", { staticClass: "b-dashboard-template__container" }, [t._t("default")], 2)], 1)], 1);
+}, j = [], E = /* @__PURE__ */ S(
+  z,
+  D,
+  j,
+  !1,
+  null,
+  "075794ed"
+);
+const Z = E.exports, M = {}, U = /* @__PURE__ */ v({
+  ...M,
+  __name: "dashboard-section",
+  props: {
+    header: null,
+    halfWidth: { type: Boolean, default: !1 }
+  },
+  setup(i) {
+    const t = i, a = C(), s = T(a), r = n(() => ({
+      "b-dashboard-section--half-width": t.halfWidth
+    }));
+    return I(() => {
+      if ((s("content-col-1") || s("content-col-2")) && t.halfWidth)
+        throw new Error("`content-col-1` and `content-col-2` cannot be used with half-width prop");
+    }), { __sfc: !0, props: t, slots: a, hasSlot: s, conditionalClasses: r, BentoHeader: y, BentoDivider: W };
+  }
+});
+var q = function() {
+  var t = this, a = t._self._c, s = t._self._setupProxy;
+  return a("div", { staticClass: "b-dashboard-section", class: s.conditionalClasses }, [a(s.BentoHeader, t._b({ staticClass: "b-dashboard-template__header", attrs: { variant: "component" }, scopedSlots: t._u([s.hasSlot("infoIconTooltipContent") ? { key: "infoIconTooltipContent", fn: function() {
+    return [t._t("infoIconTooltipContent")];
+  }, proxy: !0 } : null], null, !0) }, "bento-header", t.header, !1)), s.hasSlot("controls") ? a("div", { staticClass: "b-dashboard-section__controls" }, [t._t("controls")], 2) : t._e(), !s.hasSlot("content-col-1") && !s.hasSlot("content-col-2") ? a("div", { staticClass: "b-dashboard-section__content" }, [t._t("default")], 2) : a("div", { staticClass: "b-dashboard-section__columns" }, [a("div", { staticClass: "b-dashboard-section__content" }, [t._t("content-col-1")], 2), a("div", { staticClass: "b-dashboard-section__content" }, [t._t("content-col-2")], 2)]), a(s.BentoDivider, { staticClass: "b-dashboard-section__divider" })], 1);
+}, A = [], G = /* @__PURE__ */ S(
+  U,
+  q,
+  A,
+  !1,
+  null,
+  "df6a2511"
+);
+const tt = G.exports;
+export {
+  tt as a,
+  Z as d
+};
+//# sourceMappingURL=dashboard-section.CgAfEay4.js.map

package/dist/chunks/dashboard-section.CgAfEay4.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashboard-section.CgAfEay4.js","sources":["../../src/templates/dashboard-template/dashboard-template.vue","../../src/templates/dashboard-template/components/dashboard-section/dashboard-section.vue"],"sourcesContent":["<template>\n    <main class=\"b-dashboard-template\">\n        <bento-header v-bind=\"header\" variant=\"page\" class=\"b-dashboard-template__header\">\n            <template v-if=\"hasSlot('infoIconTooltipContent')\" #infoIconTooltipContent>\n                <slot name=\"infoIconTooltipContent\" />\n            </template>\n        </bento-header>\n        <div class=\"b-dashboard-template__top-section\" :class=\"dashboardTopSectionConditionalClasses\">\n            <div\n                v-if=\"hasSlot('filters')\"\n                ref=\"filtersRef\"\n                class=\"b-dashboard-template__filters\"\n                :class=\"dashboardFiltersConditionalClasses\"\n                data-testid=\"filters\"\n            >\n                <slot name=\"filters\" />\n            </div>\n\n            <bento-tabs\n                v-if=\"tabsSlots.length > 1\"\n                ref=\"tabsRef\"\n                :active-tab-index=\"tabs.activeTabIndex\"\n                :sticky=\"stickyTabs\"\n                :sticky-options=\"computedTabsOptions\"\n                data-testid=\"tabs\"\n            >\n                <bento-tab v-for=\"(_item, index) in tabsSlots\" :key=\"`tab-${index}`\" :title=\"getTabTitle(index)\">\n                    <div class=\"b-dashboard-template__container b-dashboard-template__container--tabs\">\n                        <slot :name=\"`tab-${index + 1}`\" />\n                    </div>\n                </bento-tab>\n            </bento-tabs>\n            <div v-else class=\"b-dashboard-template__container\">\n                <slot />\n            </div>\n        </div>\n    </main>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onUnmounted, ref, useSlots, watch } from 'vue';\n    import { BentoHeader } from '@/components/header';\n    import { BentoTab, BentoTabs } from '@/components/tabs';\n    import { useWindowScroll } from '@vueuse/core';\n    import { observeSizeOfElement } from '@/utils/ts/resize';\n    import { useHasSlot } from '@/composables';\n    import type { BentoDashboardTemplateHeader, BentoDashboardTemplateTabs } from './dashboard-template.types';\n\n    const props = defineProps({\n  header: null,\n  tabs: { default: undefined },\n  stickyTabs: { type: Boolean, default: false },\n  stickyFilters: { type: Boolean, default: false }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const tabsRef = ref<InstanceType<typeof BentoTabs>>();\n    const filtersRef = ref<HTMLDivElement>(null);\n    const isFiltersPinned = ref(false);\n    let filtersElementObserver: ResizeObserver | null = null;\n    const tabsPosition = ref(0);\n\n    const hasStickyFilters = computed(() => filtersRef.value && props.stickyFilters);\n    const hasStickyTabs = computed(() => tabsRef.value && props.stickyTabs);\n\n    const dashboardFiltersConditionalClasses = computed(() => ({\n        'b-dashboard-template__filters--sticky': props.stickyFilters,\n        'b-dashboard-template__filters--show-border':\n            hasStickyFilters.value && !hasStickyTabs.value && isFiltersPinned.value,\n    }));\n\n    const dashboardTopSectionConditionalClasses = computed(() => ({\n        'b-dashboard-template__top-section--sticky': props.stickyTabs || props.stickyFilters,\n    }));\n\n    const tabsSlots = computed(() => Object.keys(slots).filter(el => el?.includes('tab-')));\n\n    const getTabTitle = (index: number) => props?.tabs.tabs?.[index]?.title ?? `Tab ${index + 1}`;\n\n    const computedTabsOptions = computed(() => (tabsPosition.value ? { top: tabsPosition.value } : undefined));\n\n    const { y } = useWindowScroll();\n\n    watch(\n        () => filtersRef.value,\n        () => {\n            if (!filtersElementObserver && filtersRef.value) {\n                filtersElementObserver = observeSizeOfElement(filtersRef.value, () => {\n                    if (filtersRef.value && hasStickyTabs.value) {\n                        const filtersHeight = filtersRef.value.offsetHeight;\n                        tabsPosition.value = hasStickyFilters.value ? filtersHeight : 0;\n                    }\n                });\n            }\n        }\n    );\n\n    watch(\n        () => y.value,\n        () => {\n            if (hasStickyFilters.value) {\n                isFiltersPinned.value = filtersRef.value?.getBoundingClientRect().top === 0;\n            }\n        }\n    );\n\n    onUnmounted(() => {\n        filtersElementObserver?.disconnect();\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Dashboard template is a full page template used to visualize data on pages such as data dashboards and reports.\n     *\n     * @example\n     * import { BentoDashboardTemplate, BentoDashboardSection } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoDashboardTemplate, BentoDashboardSection },\n     *     template: `\n     *          <bento-dashboard-template :header=\"{ title: 'Dashboard'}\" :tabs=\"tabs: [{ title: 'Tab 1' }, { title: 'Tab 2' }]\" sticky-tabs sticky-filters>\n     *              <template #tab-1>\n     *                  <bento-dashboard-section :header=\"{ title: 'Section'}\">\n     *                      <template #controls>\n     *                          // Add your controls here\n     *                      </template>\n     *                      // Add your content here\n     *                  </bento-dashboard-section>\n     *              </template>\n     *              <template #tab-2>\n     *                  <bento-dashboard-section :header=\"{ title: 'Section'}\">\n     *                      // Add your content here\n     *                  </bento-dashboard-section>\n     *              </template>\n     *          </bento-dashboard-template>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./dashboard-template.scss\" />\n","<template>\n    <div class=\"b-dashboard-section\" :class=\"conditionalClasses\">\n        <bento-header v-bind=\"header\" variant=\"component\" class=\"b-dashboard-template__header\">\n            <template v-if=\"hasSlot('infoIconTooltipContent')\" #infoIconTooltipContent>\n                <slot name=\"infoIconTooltipContent\" />\n            </template>\n        </bento-header>\n        <div v-if=\"hasSlot('controls')\" class=\"b-dashboard-section__controls\">\n            <slot name=\"controls\"></slot>\n        </div>\n        <div v-if=\"!hasSlot('content-col-1') && !hasSlot('content-col-2')\" class=\"b-dashboard-section__content\">\n            <slot name=\"default\"></slot>\n        </div>\n        <div v-else class=\"b-dashboard-section__columns\">\n            <div class=\"b-dashboard-section__content\"><slot name=\"content-col-1\"></slot></div>\n            <div class=\"b-dashboard-section__content\"><slot name=\"content-col-2\"></slot></div>\n        </div>\n        <bento-divider class=\"b-dashboard-section__divider\" />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onMounted, useSlots } from 'vue';\n    import { BentoHeader } from '@/components/header';\n    import { BentoDivider } from '@/components/divider';\n    import { useHasSlot } from '@/composables';\n    import type { BentoDashboardTemplateHeader } from '../../dashboard-template.types';\n\n    const props = defineProps({\n  header: null,\n  halfWidth: { type: Boolean, default: false }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const conditionalClasses = computed(() => ({\n        'b-dashboard-section--half-width': props.halfWidth,\n    }));\n\n    onMounted(() => {\n        if ((hasSlot('content-col-1') || hasSlot('content-col-2')) && props.halfWidth) {\n            throw new Error('`content-col-1` and `content-col-2` cannot be used with half-width prop');\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Dashboard section is subcomponent of Dashboard template meant to be used to create the different sections within the page.\n     *\n     * @example\n     * import { BentoDashboardSection } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoDashboardSection },\n     *     template: `\n     *          <bento-dashboard-section :header=\"{ title: 'Section' }\" half-width>\n     *              <template #controls>\n     *                  // Add your controls here\n     *              </template>\n     *              // You can render content with two cols\n     *              <template #content-col-1>\n     *                  // Add your content here\n     *              </template>\n     *              <template #content-col-2>\n     *                  // Add your content here\n     *              </template>\n     *              // Or you can render full width content by using default slot\n     *              // Add your content here\n     *          </bento-dashboard-section>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./dashboard-section.scss\" />\n"],"names":["__default__$1","slots","useSlots","hasSlot","useHasSlot","tabsRef","ref","filtersRef","isFiltersPinned","filtersElementObserver","tabsPosition","hasStickyFilters","computed","props","hasStickyTabs","dashboardFiltersConditionalClasses","dashboardTopSectionConditionalClasses","tabsSlots","el","getTabTitle","index","_b","_a","computedTabsOptions","y","useWindowScroll","watch","observeSizeOfElement","filtersHeight","onUnmounted","__default__","conditionalClasses","onMounted"],"mappings":";;;;;;;;;AA6II,MAAAA,IAAA,CAAA;;;;;;;;;;iBAtFAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAA,GACAC,IAAAD,EAAA,IAAA,GACAE,IAAAF,EAAA,EAAA;AACA,QAAAG,IAAA;AACA,UAAAC,IAAAJ,EAAA,CAAA,GAEAK,IAAAC,EAAA,MAAAL,EAAA,SAAAM,EAAA,aAAA,GACAC,IAAAF,EAAA,MAAAP,EAAA,SAAAQ,EAAA,UAAA,GAEAE,IAAAH,EAAA,OAAA;AAAA,MAA2D,yCAAAC,EAAA;AAAA,MACR,8CAAAF,EAAA,SAAA,CAAAG,EAAA,SAAAN,EAAA;AAAA,IAEuB,EAAA,GAG1EQ,IAAAJ,EAAA,OAAA;AAAA,MAA8D,6CAAAC,EAAA,cAAAA,EAAA;AAAA,IACa,EAAA,GAG3EI,IAAAL,EAAA,MAAA,OAAA,KAAAX,CAAA,EAAA,OAAA,CAAAiB,MAAAA,KAAA,gBAAAA,EAAA,SAAA,OAAA,CAAA,GAEAC,IAAA,CAAAC,MAAA;;AAAA,eAAAC,KAAAC,IAAAT,KAAA,gBAAAA,EAAA,KAAA,SAAA,gBAAAS,EAAAF,OAAA,gBAAAC,EAAA,UAAA,OAAAD,IAAA,CAAA;AAAA,OAEAG,IAAAX,EAAA,MAAAF,EAAA,QAAA,EAAA,KAAAA,EAAA,MAAA,IAAA,MAAA,GAEA,EAAA,GAAAc,EAAA,IAAAC,EAAA;AAEA,WAAAC;AAAA,MAAA,MAAAnB,EAAA;AAAA,MACqB,MAAA;AAEb,QAAA,CAAAE,KAAAF,EAAA,UACIE,IAAAkB,EAAApB,EAAA,OAAA,MAAA;AACI,cAAAA,EAAA,SAAAO,EAAA,OAAA;AACI,kBAAAc,IAAArB,EAAA,MAAA;AACA,YAAAG,EAAA,QAAAC,EAAA,QAAAiB,IAAA;AAAA,UAA8D;AAAA,QAClE,CAAA;AAAA,MAER;AAAA,IACJ,GAGJF;AAAA,MAAA,MAAAF,EAAA;AAAA,MACY,MAAA;;AAEJ,QAAAb,EAAA,UACIH,EAAA,UAAAc,IAAAf,EAAA,UAAA,gBAAAe,EAAA,wBAAA,SAAA;AAAA,MACJ;AAAA,IACJ,GAGJO,EAAA,MAAA;AACI,MAAApB,KAAA,QAAAA,EAAA;AAAA,IAAmC,CAAA;;;;;;;;;;;;;;;;;;qBCnCvCqB,IAAA,CAAA;;;;;;;;iBAzCA7B,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEA8B,IAAAnB,EAAA,OAAA;AAAA,MAA2C,mCAAAC,EAAA;AAAA,IACE,EAAA;AAG7C,WAAAmB,EAAA,MAAA;AACI,WAAA7B,EAAA,eAAA,KAAAA,EAAA,eAAA,MAAAU,EAAA;AACI,cAAA,IAAA,MAAA,yEAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;;;"}

package/dist/chunks/dashed-underline.CMdNukpN.js

@@ -0,0 +1,77 @@
+import { defineComponent as T, useSlots as P, ref as u, computed as d, watch as b } from "vue";
+import { d as O, h as x } from "./button-actions.N3D-Bb_x.js";
+import { B } from "./typography.hlOAxsEn.js";
+import { u as g } from "./use-has-slot.C9lQZ6nz.js";
+import { b as S } from "./tooltip.BcQ24pKP.js";
+import { n as C } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/dashed-underline.css";
+const E = {}, U = /* @__PURE__ */ T({
+  ...E,
+  __name: "dashed-underline",
+  props: {
+    popoverText: { default: null },
+    popoverTitle: { default: null },
+    popoverPosition: { default: "top" },
+    popoverSize: { default: "fit-content" },
+    teleport: { default: () => ({
+      disabled: !0
+    }) },
+    tooltipText: { default: null },
+    tooltipPosition: { default: "top" }
+  },
+  setup(c) {
+    const e = c, n = 200, o = P(), s = g(o), r = u(null), l = u(!1), i = u(), p = () => {
+      l.value = !0, i.value && clearTimeout(i.value);
+    }, a = () => {
+      const t = setTimeout(() => {
+        l.value = !1;
+      }, n);
+      i.value = t;
+    }, v = () => {
+      p();
+    }, f = (t) => {
+      (!r.value || !((t == null ? void 0 : t.relatedTarget) instanceof Element) || !r.value.contains(t.relatedTarget)) && a();
+    }, m = d(() => e.popoverText || s("popover-content")), _ = d(() => !e.tooltipText && !m.value);
+    b(
+      _,
+      (t) => {
+        if (t)
+          throw new Error(
+            "BentoDashedUnderline requires either a tooltip or a popover to be configured. Check the docs for more info."
+          );
+      },
+      { immediate: !0 }
+    );
+    const h = d(
+      () => {
+        var t;
+        return ((t = e.teleport) == null ? void 0 : t.disabled) === !1 ? {
+          mouseenter: p,
+          mouseleave: a,
+          focus: v,
+          focusout: f
+        } : {};
+      }
+    );
+    return { __sfc: !0, CLOSING_POPOVER_DELAY_MS: n, props: e, slots: o, hasSlot: s, element: r, isOpen: l, closingTimeOutId: i, openPopover: p, closePopover: a, dashedUnderlineOnFocus: v, dashedUnderlineOnFocusOut: f, hasPopover: m, shouldShowTooltipPopoverError: _, computedPopoverContainerEvents: h, BentoPopover: x, vBentoTooltipDirective: S, BentoTypography: B, BentoTeleport: O };
+  }
+});
+var w = function() {
+  var s, r;
+  var e = this, n = e._self._c, o = e._self._setupProxy;
+  return n("span", { directives: [{ name: "bento-tooltip-directive", rawName: "v-bento-tooltip-directive:[tooltipPosition]", value: e.tooltipText, expression: "tooltipText", arg: e.tooltipPosition }], ref: "element", staticClass: "b-dashed-underline", attrs: { tabindex: "0" }, on: { mouseenter: o.openPopover, mouseleave: o.closePopover, focus: o.dashedUnderlineOnFocus, focusout: o.dashedUnderlineOnFocusOut } }, [n("span", { staticClass: "b-dashed-underline__content" }, [e._t("default")], 2), o.element && o.hasPopover ? n(o.BentoTeleport, { attrs: { disabled: (s = e.teleport) == null ? void 0 : s.disabled, to: (r = e.teleport) == null ? void 0 : r.to } }, [n("span", e._g({}, o.computedPopoverContainerEvents), [n(o.BentoPopover, { attrs: { open: o.isOpen, "target-element": o.element, position: e.popoverPosition, role: "tooltip", "fit-content": e.popoverSize === "fit-content" || void 0, large: e.popoverSize === "large" || void 0, small: e.popoverSize === "small" || void 0, title: e.popoverTitle, "disable-focus-trap": "" } }, [e._t("popover-content", function() {
+    return [n(o.BentoTypography, [e._v(" " + e._s(e.popoverText) + " ")])];
+  })], 2)], 1)]) : e._e()], 1);
+}, y = [], z = /* @__PURE__ */ C(
+  U,
+  w,
+  y,
+  !1,
+  null,
+  "2b09c5c5"
+);
+const k = z.exports;
+export {
+  k as B
+};
+//# sourceMappingURL=dashed-underline.CMdNukpN.js.map

package/dist/chunks/dashed-underline.CMdNukpN.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashed-underline.CMdNukpN.js","sources":["../../src/components/dashed-underline/dashed-underline.vue"],"sourcesContent":["<template>\n    <span\n        ref=\"element\"\n        v-bento-tooltip-directive:[tooltipPosition]=\"tooltipText\"\n        class=\"b-dashed-underline\"\n        tabindex=\"0\"\n        @mouseenter=\"openPopover\"\n        @mouseleave=\"closePopover\"\n        @focus=\"dashedUnderlineOnFocus\"\n        @focusout=\"dashedUnderlineOnFocusOut\"\n    >\n        <span class=\"b-dashed-underline__content\">\n            <slot></slot>\n        </span>\n        <bento-teleport v-if=\"element && hasPopover\" :disabled=\"teleport?.disabled\" :to=\"teleport?.to\">\n            <span v-on=\"computedPopoverContainerEvents\">\n                <bento-popover\n                    :open=\"isOpen\"\n                    :target-element=\"element\"\n                    :position=\"popoverPosition\"\n                    role=\"tooltip\"\n                    :fit-content=\"popoverSize === 'fit-content' || undefined\"\n                    :large=\"popoverSize === 'large' || undefined\"\n                    :small=\"popoverSize === 'small' || undefined\"\n                    :title=\"popoverTitle\"\n                    disable-focus-trap\n                >\n                    <slot name=\"popover-content\">\n                        <bento-typography>\n                            {{ popoverText }}\n                        </bento-typography>\n                    </slot>\n                </bento-popover>\n            </span>\n        </bento-teleport>\n    </span>\n</template>\n\n<script lang=\"ts\" setup>\n    import { computed, ref, useSlots, watch } from 'vue';\n    import { BentoPopover } from '@/components/popover';\n    import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives/tooltip/index';\n    import { BentoTypography } from '@/components/typography';\n    import { useHasSlot } from '@/composables';\n    import { BentoTeleport } from '@/internal';\n    import { type BentoDashedUnderlineProps } from './dashed-underline.types';\n\n    const CLOSING_POPOVER_DELAY_MS = 200;\n\n    const props = defineProps({\n  popoverText: { default: null },\n  popoverTitle: { default: null },\n  popoverPosition: { default: 'top' },\n  popoverSize: { default: 'fit-content' },\n  teleport: { default: () => ({\n            disabled: true,\n        }) },\n  tooltipText: { default: null },\n  tooltipPosition: { default: 'top' }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const element = ref<HTMLSpanElement>(null);\n    const isOpen = ref(false);\n\n    const closingTimeOutId = ref();\n\n    const openPopover = () => {\n        isOpen.value = true;\n        if (closingTimeOutId.value) {\n            clearTimeout(closingTimeOutId.value);\n        }\n    };\n\n    const closePopover = () => {\n        // We want to delay closing for a couple of seconds so\n        // it doesn't flicker if a user hovers over the icon and then inside the popover.\n        const timeOutId = setTimeout(() => {\n            isOpen.value = false;\n        }, CLOSING_POPOVER_DELAY_MS);\n        closingTimeOutId.value = timeOutId;\n    };\n\n    const dashedUnderlineOnFocus = () => {\n        openPopover();\n    };\n\n    /**\n     * Only close popover on blur if the newly focus element is not a child of this element\n     * @param e - the event that contains the newly focused element\n     */\n    const dashedUnderlineOnFocusOut = (e: FocusEvent) => {\n        if (!element.value || !(e?.relatedTarget instanceof Element) || !element.value.contains(e.relatedTarget)) {\n            closePopover();\n        }\n    };\n\n    const hasPopover = computed(() => props.popoverText || hasSlot('popover-content'));\n\n    const shouldShowTooltipPopoverError = computed(() => !props.tooltipText && !hasPopover.value);\n\n    watch(\n        shouldShowTooltipPopoverError,\n        value => {\n            if (value) {\n                throw new Error(\n                    'BentoDashedUnderline requires either a tooltip or a popover to be configured. Check the docs for more info.'\n                );\n            }\n        },\n        { immediate: true }\n    );\n\n    /**\n     * When the popover is teleported, it is no longer a DOM descendant of the trigger element.\n     * We add these event listeners to the popover's container to keep the popover open when\n     * the user moves their mouse or focuses out from the trigger to the popover BUT then mouses over\n     * or focuses on the popover content.\n     */\n    const computedPopoverContainerEvents = computed(() =>\n        props.teleport?.disabled === false\n            ? {\n                  mouseenter: openPopover,\n                  mouseleave: closePopover,\n                  focus: dashedUnderlineOnFocus,\n                  focusout: dashedUnderlineOnFocusOut,\n              }\n            : {}\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Provides a dashed underline to text, indicating that more information is available on\n     * hover or focus. The additional information is displayed in a tooltip or a popover.\n     *\n     * @example\n     * import { BentoDashedUnderline } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoDashedUnderline },\n     *     template: `\n     *       <p>\n     *         This is some <bento-dashed-underline tooltip-text=\"A short explanation\">annotated text</bento-dashed-underline>.\n     *       </p>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./dashed-underline.scss\" />\n"],"names":["__default__","CLOSING_POPOVER_DELAY_MS","slots","useSlots","hasSlot","useHasSlot","element","ref","isOpen","closingTimeOutId","openPopover","closePopover","timeOutId","dashedUnderlineOnFocus","dashedUnderlineOnFocusOut","e","hasPopover","computed","props","shouldShowTooltipPopoverError","watch","value","computedPopoverContainerEvents","_a"],"mappings":";;;;;;;AAsJI,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;iBAvGAC,IAAA,KAcAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAA,EAAA,GAEAE,IAAAF,EAAA,GAEAG,IAAA,MAAA;AACI,MAAAF,EAAA,QAAA,IACAC,EAAA,SACI,aAAAA,EAAA,KAAA;AAAA,IACJ,GAGJE,IAAA,MAAA;AAGI,YAAAC,IAAA,WAAA,MAAA;AACI,QAAAJ,EAAA,QAAA;AAAA,MAAe,GAAAP,CAAA;AAEnB,MAAAQ,EAAA,QAAAG;AAAA,IAAyB,GAG7BC,IAAA,MAAA;AACI,MAAAH,EAAA;AAAA,IAAY,GAOhBI,IAAA,CAAAC,MAAA;AACI,OAAA,CAAAT,EAAA,SAAA,GAAAS,KAAA,gBAAAA,EAAA,0BAAA,YAAA,CAAAT,EAAA,MAAA,SAAAS,EAAA,aAAA,MACIJ,EAAA;AAAA,IACJ,GAGJK,IAAAC,EAAA,MAAAC,EAAA,eAAAd,EAAA,iBAAA,CAAA,GAEAe,IAAAF,EAAA,MAAA,CAAAC,EAAA,eAAA,CAAAF,EAAA,KAAA;AAEA,IAAAI;AAAA,MAAAD;AAAA,MACI,CAAAE,MAAA;AAEI,YAAAA;AACI,gBAAA,IAAA;AAAA,YAAU;AAAA,UACN;AAAA,MAER;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB;AAStB,UAAAC,IAAAL;AAAA,MAAuC,MAAA;;AAAA,iBAAAM,IAAAL,EAAA,aAAA,gBAAAK,EAAA,cAAA,KAAA;AAAA,UAE7B,YAAAb;AAAA,UACgB,YAAAC;AAAA,UACA,OAAAE;AAAA,UACL,UAAAC;AAAA,QACG,IAAA,CAAA;AAAA;AAAA,IAEb;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/data-grid-template.keys.VezYtHtM.js

@@ -0,0 +1,5 @@
+const t = /* @__PURE__ */ Symbol("data-grid-template injection key");
+export {
+  t as D
+};
+//# sourceMappingURL=data-grid-template.keys.VezYtHtM.js.map

package/dist/chunks/data-grid-template.keys.VezYtHtM.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-grid-template.keys.VezYtHtM.js","sources":["../../src/templates/data-grid-template/data-grid-template.keys.ts"],"sourcesContent":["export const DATA_GRID_REGISTER_TEMPLATE_INJECTION_KEY = Symbol('data-grid-template injection key');\n"],"names":["DATA_GRID_REGISTER_TEMPLATE_INJECTION_KEY"],"mappings":"AAAa,MAAAA,2BAAmD,kCAAkC;"}

package/dist/chunks/data-grid-template.m4hsFMe2.js

@@ -0,0 +1,111 @@
+import { defineComponent as R, useSlots as S, ref as d, computed as i, provide as I, toRef as _ } from "vue";
+import { B as h } from "./header.QYvN86kI.js";
+import { B } from "./inspector.C6bbjQC0.js";
+import { B as x, a as A } from "./tab.DXE68qVf.js";
+import { u as E } from "./use-has-slot.C9lQZ6nz.js";
+import { D } from "./data-grid-template.keys.VezYtHtM.js";
+import { n as G } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/data-grid-template.css";
+const H = {}, O = /* @__PURE__ */ R({
+  ...H,
+  __name: "data-grid-template",
+  props: {
+    /**
+     * The header that goes to the top of the template
+     */
+    header: {
+      type: Object,
+      default: void 0
+    },
+    /**
+     * All the tab properties that can be set on the inner tab components.
+     *  - tabs.activeTabIndex: the currenly active tab index.
+     *  - tabs.tabs: an array of BentoTab props, the first item in the array will affect the `tab-1` slot and so on.
+     */
+    tabs: {
+      type: Object,
+      default: void 0
+    },
+    /**
+     * Renders the additional content slot with a sticky positioning
+     */
+    stickyAdditionalContent: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Renders the tabs with a sticky positioning
+     */
+    stickyTabs: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * All the inspector properties that can be set on the inner inspector component.
+     */
+    inspector: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["update:tabs", "update:is-open:inspector", "update:active-page:inspector", "expand:inspector"],
+  setup(l, { emit: t }) {
+    const o = l, n = S(), p = E(n), s = d(null), r = d(null), b = d(null), m = i(() => ({
+      "b-data-grid-template__additional-content--sticky": o.stickyAdditionalContent
+    })), T = i(() => ({
+      title: "",
+      ...o.inspector
+    })), y = i(() => {
+      var e;
+      return (e = r == null ? void 0 : r.value) == null ? void 0 : e.offsetHeight;
+    }), u = i(() => {
+      var e, a;
+      return (a = (e = s.value) == null ? void 0 : e.$refs) == null ? void 0 : a.tablistwrapper;
+    }), C = i(() => Object.keys(n).filter((e) => e == null ? void 0 : e.includes("tab-"))), v = i(() => ({
+      "update:is-open": (e) => t("update:is-open:inspector", e),
+      "update:active-page": (e) => t("update:active-page:inspector", e),
+      expand: (e) => t("expand:inspector", e)
+    })), k = (e) => {
+      t("update:tabs", { ...o.tabs, activeTabIndex: e });
+    }, g = (e) => {
+      var a, c;
+      return ((c = (a = o == null ? void 0 : o.tabs.tabs) == null ? void 0 : a[e]) == null ? void 0 : c.title) ?? `Tab ${e + 1}`;
+    }, f = () => {
+      const a = _(o, "stickyTabs"), c = _(o, "stickyAdditionalContent");
+      return {
+        isDataGridTemplate: !0,
+        stickyTabs: a,
+        tabsRef: u,
+        stickyAdditionalContent: c,
+        additionalContentSlotRef: r
+      };
+    };
+    return I(D, f), { __sfc: !0, props: o, slots: n, hasSlot: p, emit: t, tabsRef: s, additionalContentRef: r, inspectorRef: b, additionalContentConditionalClasses: m, computedInspectorProps: T, computedStickyAdditionalContentHeight: y, computedTabsRef: u, tabsSlots: C, inspectorEvents: v, emitTabs: k, getTabTitle: g, registerDatagridInDataGridTemplate: f, BentoHeader: h, BentoInspector: B, BentoTab: A, BentoTabs: x };
+  }
+});
+var j = function() {
+  var t = this, o = t._self._c, n = t._self._setupProxy;
+  return o("main", { staticClass: "b-data-grid-template" }, [o(n.BentoInspector, t._g(t._b({ ref: "inspectorRef", scopedSlots: t._u([{ key: "page", fn: function() {
+    return [o("div", { staticClass: "b-data-grid-template__header" }, [t._t("header", function() {
+      return [o(n.BentoHeader, t._b({ scopedSlots: t._u([n.hasSlot("infoIconTooltipContent") ? { key: "infoIconTooltipContent", fn: function() {
+        return [t._t("infoIconTooltipContent")];
+      }, proxy: !0 } : null], null, !0) }, "bento-header", t.header, !1))];
+    })], 2), n.hasSlot("additionalContent") ? o("div", { ref: "additionalContentRef", staticClass: "b-data-grid-template__additional-content", class: n.additionalContentConditionalClasses }, [t._t("additionalContent")], 2) : t._e(), n.tabsSlots.length > 1 ? o(n.BentoTabs, { ref: "tabsRef", attrs: { "active-tab-index": t.tabs.activeTabIndex, sticky: t.stickyTabs, "sticky-options": t.stickyAdditionalContent ? { top: n.computedStickyAdditionalContentHeight } : null }, on: { "update:active-tab-index": n.emitTabs } }, t._l(n.tabsSlots, function(p, s) {
+      return o(n.BentoTab, { key: `tab-${s}`, attrs: { title: n.getTabTitle(s) } }, [t._t(`tab-${s + 1}`)], 2);
+    }), 1) : t._t("default")];
+  }, proxy: !0 }, { key: "content", fn: function() {
+    return [t._t("inspector-content")];
+  }, proxy: !0 }], null, !0) }, "bento-inspector", n.computedInspectorProps, !1), n.inspectorEvents))], 1);
+}, P = [], $ = /* @__PURE__ */ G(
+  O,
+  j,
+  P,
+  !1,
+  null,
+  "2ce69cd0"
+);
+const q = $.exports;
+export {
+  q as d
+};
+//# sourceMappingURL=data-grid-template.m4hsFMe2.js.map