@adyen/bento-vue3 1.3.0 → 1.4.0

package/dist/chunks/index.89b00b94.js

@@ -0,0 +1,124 @@
+import { defineComponent as o, computed as d, openBlock as c, createBlock as E, resolveDynamicComponent as T, normalizeClass as u, withCtx as v, renderSlot as I } from "vue";
+import { _ as O } from "./_plugin-vue_export-helper.dad06003.js";
+import "../assets/index36.css";
+var e = /* @__PURE__ */ ((t) => (t.CAPTION = "caption", t.BODY = "body", t.SUBTITLE = "subtitle", t.TITLE = "title", t))(e || {}), a = /* @__PURE__ */ ((t) => (t.WIDE = "wide", t.STRONGER = "stronger", t.STRONGER_WIDE = "stronger-wide", t.STRONGEST = "strongest", t.STRONGEST_WIDE = "strongest-wide", t.MEDIUM = "m", t.LARGE = "l", t.MOBILE = "mobile", t))(a || {}), i = /* @__PURE__ */ ((t) => (t.H1 = "h1", t.H2 = "h2", t.H3 = "h3", t.H4 = "h4", t.H5 = "h5", t.H6 = "h6", t.DIV = "div", t.PARAGRAPH = "p", t.SPAN = "span", t))(i || {});
+const D = ["development", "DEVELOPMENT", "dev", "DEV"], $ = () => D.includes(process.env.NODE_ENV);
+function r(...t) {
+  $() && console.warn(...t);
+}
+const s = ["color: red", "background: yellow"].join(";");
+function _(t, n, l) {
+  r(`%cDEPRECATED:\x1B[0m ${t}`, s), r(`${n.replaceAll("	", "").replaceAll("  ", "").trim()}`), r(`To be removed in: %c${l}`, s);
+}
+const b = o({
+  name: "bento-typography",
+  inheritAttrs: !0,
+  props: {
+    /**
+     * Sets the HTML DOM element.
+     * @values h1, h2, h3, h4, h5, h6, div, p, span
+     */
+    el: {
+      type: String,
+      default: i.PARAGRAPH,
+      validator: (t) => Object.values(i).includes(t)
+    },
+    /**
+     * Adds the stronger class modifier.
+     * Applicable to Caption, Body and Subtitle variants.
+     */
+    stronger: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Adds the strongest class modifier.
+     * Applicable to Caption, Body and Subtitle variants.
+     */
+    strongest: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Sets the type of typography variant.
+     * @values caption, body, title.
+     */
+    variant: {
+      type: String,
+      default: e.BODY,
+      validator: (t) => Object.values(e).includes(t)
+    },
+    /**
+     * Adds the medium class modifier.
+     * Applicable to the Title variant.
+     */
+    medium: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Adds the large class modifier.
+     * Applicable to the Title variant.
+     */
+    large: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Adds the medium class modifier.
+     * Applicable to tje Body variant.
+     */
+    wide: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(t) {
+    return t.variant === e.SUBTITLE && _(
+      'BentoTypography "subtitle" variant (BentoTypographyVariant.SUBTITLE)',
+      `Use the "title" or "BentoTypographyVariant.TITLE" variant and (optionally) combine it with a size property. e.g. medium / large.
+                    <bento-typography :variant="BentoTypographyVariant.TITLE" medium>`,
+      "2.0.0"
+    ), {
+      conditionalClasses: d(() => ({
+        // Caption
+        [`b-typography--${e.CAPTION}`]: t.variant === e.CAPTION,
+        [`b-typography--${e.CAPTION}-${a.WIDE}`]: t.variant === e.CAPTION && t.wide,
+        [`b-typography--${e.CAPTION}-${a.STRONGER}`]: t.variant === e.CAPTION && t.stronger,
+        // Body
+        [`b-typography--${e.BODY}`]: t.variant === e.BODY,
+        [`b-typography--${e.BODY}-${a.WIDE}`]: t.variant === e.BODY && t.wide,
+        [`b-typography--${e.BODY}-${a.STRONGER}`]: t.variant === e.BODY && t.stronger,
+        [`b-typography--${e.BODY}-${a.STRONGEST}`]: t.variant === e.BODY && t.strongest,
+        // Subtitle
+        [`b-typography--${e.SUBTITLE}`]: t.variant === e.SUBTITLE,
+        [`b-typography--${e.SUBTITLE}-${a.STRONGER}`]: t.variant === e.SUBTITLE && t.stronger,
+        // Title
+        [`b-typography--${e.TITLE}`]: t.variant === e.TITLE && !t.medium && !t.large,
+        [`b-typography--${e.TITLE}-${a.MEDIUM}`]: t.variant === e.TITLE && t.medium,
+        [`b-typography--${e.TITLE}-${a.LARGE}`]: t.variant === e.TITLE && t.large
+      }))
+    };
+  }
+});
+function S(t, n, l, g, m, N) {
+  return c(), E(T(t.el), {
+    class: u(["b-typography", t.conditionalClasses]),
+    "data-testid": "typography"
+  }, {
+    default: v(() => [
+      I(t.$slots, "default", {}, void 0, !0)
+    ]),
+    _: 3
+  }, 8, ["class"]);
+}
+const R = /* @__PURE__ */ O(b, [["render", S], ["__scopeId", "data-v-e6e88def"]]);
+export {
+  R as B,
+  e as a,
+  a as b,
+  i as c,
+  _ as d,
+  r as p
+};
+//# sourceMappingURL=index.89b00b94.js.map

package/dist/chunks/index.89b00b94.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.89b00b94.js","sources":["../../../vue2/src/components/typography/typography.types.ts","../../../vue2/src/utils/ts/dev-environment.ts","../../../vue2/src/utils/ts/print-development-warning.ts","../../../vue2/src/utils/ts/deprecate.ts","../../../vue2/src/components/typography/typography.vue"],"sourcesContent":["/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoTypographyVariant {\n    CAPTION = 'caption',\n    BODY = 'body',\n    /** @deprecated Use \"TITLE\" instead. */\n    SUBTITLE = 'subtitle',\n    TITLE = 'title',\n}\n\nexport enum BentoTypographyModifier {\n    WIDE = 'wide',\n    STRONGER = 'stronger',\n    STRONGER_WIDE = 'stronger-wide',\n    STRONGEST = 'strongest',\n    STRONGEST_WIDE = 'strongest-wide',\n    MEDIUM = 'm',\n    LARGE = 'l',\n    MOBILE = 'mobile',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoTypographyElement {\n    H1 = 'h1',\n    H2 = 'h2',\n    H3 = 'h3',\n    H4 = 'h4',\n    H5 = 'h5',\n    H6 = 'h6',\n    DIV = 'div',\n    PARAGRAPH = 'p',\n    SPAN = 'span',\n}\n","const DEV_ENVIROMENT_NAMES = ['development', 'DEVELOPMENT', 'dev', 'DEV'];\n\nexport const isDevelopmentEnviroment = () => DEV_ENVIROMENT_NAMES.includes(process.env.NODE_ENV);\n","import { isDevelopmentEnviroment } from '@/utils/ts/dev-environment';\n\n/**\n * Prints console.warn messages in development mode only.\n *\n * @see console.warn for what parameters you can use\n */\n\nexport function printDevelopmentWarning(...args: Parameters<typeof console.warn>) {\n    if (isDevelopmentEnviroment()) {\n        // eslint-disable-next-line no-console\n        console.warn(...args);\n    }\n}\n","import { printDevelopmentWarning } from './print-development-warning';\n\nconst DEPRECATION_STYLES = ['color: red', 'background: yellow'].join(';');\n\n/**\n * Informs users about the deprecations in development mode only.\n *\n * @param title Indicates what is being deprecated.\n * @param deprecationMessage How to avoid the deprecation by giving an example of the alternatives. Backticks can be used to multi-line the message.\n * @param toBeRemovedInVersion The version it will be removed. Must be in X.Y.Z format.\n */\nexport function deprecate(title: string, deprecationMessage: string, toBeRemovedInVersion: string) {\n    printDevelopmentWarning(`%cDEPRECATED:\\x1b[0m ${title}`, DEPRECATION_STYLES);\n    // Format multi-line descriptions with the backtick\n    printDevelopmentWarning(`${deprecationMessage.replaceAll('\\t', '').replaceAll('  ', '').trim()}`);\n    printDevelopmentWarning(`To be removed in: %c${toBeRemovedInVersion}`, DEPRECATION_STYLES);\n}\n","<template>\n    <component :is=\"el\" class=\"b-typography\" :class=\"conditionalClasses\" data-testid=\"typography\">\n        <slot />\n    </component>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType } from 'vue';\n    import { BentoTypographyElement, BentoTypographyModifier, BentoTypographyVariant } from './typography.types';\n    import { deprecate } from '@/utils/ts/deprecate';\n\n    /**\n     * The Typography component makes it easy to apply a default set of font weights, sizes and other text styles\n     * easily to text. The variants and properties match with those found in Figma.\n     *\n     * For example, seeing text with the typography styling of\n     *\n     * @example\n     * import { BentoTypography } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoTypography },\n     *     template: `\n     *          <bento-typography>\n     *              ... text content\n     *          </bento-typography>\n     *     `\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-typography',\n        inheritAttrs: true,\n        props: {\n            /**\n             * Sets the HTML DOM element.\n             * @values h1, h2, h3, h4, h5, h6, div, p, span\n             */\n            el: {\n                type: String as PropType<BentoTypographyElement | `${BentoTypographyElement}`>,\n                default: BentoTypographyElement.PARAGRAPH,\n                validator: (value: BentoTypographyElement) => Object.values(BentoTypographyElement).includes(value),\n            },\n\n            /**\n             * Adds the stronger class modifier.\n             * Applicable to Caption, Body and Subtitle variants.\n             */\n            stronger: {\n                type: Boolean,\n                default: false,\n            },\n\n            /**\n             * Adds the strongest class modifier.\n             * Applicable to Caption, Body and Subtitle variants.\n             */\n            strongest: {\n                type: Boolean,\n                default: false,\n            },\n\n            /**\n             * Sets the type of typography variant.\n             * @values caption, body, title.\n             */\n            variant: {\n                type: String as PropType<BentoTypographyVariant | `${BentoTypographyVariant}`>,\n                default: BentoTypographyVariant.BODY,\n                validator: (value: BentoTypographyVariant) => Object.values(BentoTypographyVariant).includes(value),\n            },\n\n            /**\n             * Adds the medium class modifier.\n             * Applicable to the Title variant.\n             */\n            medium: {\n                type: Boolean,\n                default: false,\n            },\n\n            /**\n             * Adds the large class modifier.\n             * Applicable to the Title variant.\n             */\n            large: {\n                type: Boolean,\n                default: false,\n            },\n\n            /**\n             * Adds the medium class modifier.\n             * Applicable to tje Body variant.\n             */\n            wide: {\n                type: Boolean,\n                default: false,\n            },\n        },\n        setup(props) {\n            if (props.variant === BentoTypographyVariant.SUBTITLE) {\n                deprecate(\n                    'BentoTypography \"subtitle\" variant (BentoTypographyVariant.SUBTITLE)',\n                    `Use the \"title\" or \"BentoTypographyVariant.TITLE\" variant and (optionally) combine it with a size property. e.g. medium / large.\n                    <bento-typography :variant=\"BentoTypographyVariant.TITLE\" medium>`,\n                    '2.0.0'\n                );\n            }\n\n            const conditionalClasses = computed(() => ({\n                // Caption\n                [`b-typography--${BentoTypographyVariant.CAPTION}`]: props.variant === BentoTypographyVariant.CAPTION,\n                [`b-typography--${BentoTypographyVariant.CAPTION}-${BentoTypographyModifier.WIDE}`]:\n                    props.variant === BentoTypographyVariant.CAPTION && props.wide,\n                [`b-typography--${BentoTypographyVariant.CAPTION}-${BentoTypographyModifier.STRONGER}`]:\n                    props.variant === BentoTypographyVariant.CAPTION && props.stronger,\n\n                // Body\n                [`b-typography--${BentoTypographyVariant.BODY}`]: props.variant === BentoTypographyVariant.BODY,\n                [`b-typography--${BentoTypographyVariant.BODY}-${BentoTypographyModifier.WIDE}`]:\n                    props.variant === BentoTypographyVariant.BODY && props.wide,\n                [`b-typography--${BentoTypographyVariant.BODY}-${BentoTypographyModifier.STRONGER}`]:\n                    props.variant === BentoTypographyVariant.BODY && props.stronger,\n                [`b-typography--${BentoTypographyVariant.BODY}-${BentoTypographyModifier.STRONGEST}`]:\n                    props.variant === BentoTypographyVariant.BODY && props.strongest,\n\n                // Subtitle\n                [`b-typography--${BentoTypographyVariant.SUBTITLE}`]: props.variant === BentoTypographyVariant.SUBTITLE,\n                [`b-typography--${BentoTypographyVariant.SUBTITLE}-${BentoTypographyModifier.STRONGER}`]:\n                    props.variant === BentoTypographyVariant.SUBTITLE && props.stronger,\n\n                // Title\n                [`b-typography--${BentoTypographyVariant.TITLE}`]:\n                    props.variant === BentoTypographyVariant.TITLE && !props.medium && !props.large,\n                [`b-typography--${BentoTypographyVariant.TITLE}-${BentoTypographyModifier.MEDIUM}`]:\n                    props.variant === BentoTypographyVariant.TITLE && props.medium,\n                [`b-typography--${BentoTypographyVariant.TITLE}-${BentoTypographyModifier.LARGE}`]:\n                    props.variant === BentoTypographyVariant.TITLE && props.large,\n            }));\n\n            return {\n                conditionalClasses,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./typography.scss\" />\n"],"names":["BentoTypographyVariant","BentoTypographyVariant2","BentoTypographyModifier","BentoTypographyModifier2","BentoTypographyElement","BentoTypographyElement2","DEV_ENVIROMENT_NAMES","isDevelopmentEnviroment","printDevelopmentWarning","args","DEPRECATION_STYLES","deprecate","title","deprecationMessage","toBeRemovedInVersion","_sfc_main","defineComponent","value","props","computed","openBlock","createBlock","resolveDynamicComponent","_ctx","normalizeClass"],"mappings":"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"}

package/dist/chunks/{index.3da90517.js → index.9d8273fc.js}

@@ -1,36 +1,36 @@
-import { defineComponent as _, openBlock as o, createElementBlock as u, renderSlot as m, inject as I, computed as c, resolveComponent as e, resolveDirective as $, normalizeClass as k, createElementVNode as a, createVNode as l, withCtx as d, createTextVNode as N, toDisplayString as V, createBlock as r, createCommentVNode as i, withDirectives as D } from "vue";
+import { defineComponent as _, openBlock as o, createElementBlock as u, renderSlot as m, inject as I, computed as c, resolveComponent as e, resolveDirective as T, normalizeClass as k, createElementVNode as a, createVNode as l, withCtx as d, createTextVNode as N, toDisplayString as D, createBlock as r, createCommentVNode as i, withDirectives as E } from "vue";
 import { _ as y } from "./_plugin-vue_export-helper.dad06003.js";
-import { B as E, a as L } from "./button.e1c39f66.js";
-import { BentoInfoIcon as O } from "../info-icon.js";
-import { B as R, b as p } from "./index.222d29b0.js";
-import { C as U } from "./copy.2cf5e6c3.js";
-import { S as Y } from "./search.d18f9657.js";
-import { b as j } from "./tooltip.835d9b52.js";
+import { a as V } from "./button.a8462029.js";
+import { BentoInfoIcon as L } from "../info-icon.js";
+import { B as O, a as p } from "./index.89b00b94.js";
+import { C as U } from "./copy.1d14b783.js";
+import { S as j } from "./search.d18f9657.js";
+import { b as w } from "./tooltip.e4e34b86.js";
 import "../assets/index41.css";
-const w = _({
+const R = _({
   name: "bento-structured-list"
 });
-const A = { class: "b-structured-list" };
-function q(t, s, n, b, f, v) {
-  return o(), u("dl", A, [
+const Y = { class: "b-structured-list" };
+function q(t, s, n, f, b, h) {
+  return o(), u("dl", Y, [
     m(t.$slots, "default", {}, void 0, !0)
   ]);
 }
-const et = /* @__PURE__ */ y(w, [["render", q], ["__scopeId", "data-v-ee125315"]]), z = Symbol("structured list condensed style injection key"), F = {
+const tt = /* @__PURE__ */ y(R, [["render", q], ["__scopeId", "data-v-82de91de"]]), z = Symbol("structured list condensed style injection key"), A = {
   "en-US": {
     search: "Search"
   }
-}, J = _({
-  i18n: { messages: F },
+}, F = _({
+  i18n: { messages: A },
   name: "bento-structured-list-item",
   components: {
-    BentoButton: E,
-    BentoInfoIcon: O,
-    BentoTypography: R,
+    BentoButton: V,
+    BentoInfoIcon: L,
+    BentoTypography: O,
     Copy: U,
-    SearchIcon: Y
+    SearchIcon: j
   },
-  directives: { BentoTooltipDirective: j },
+  directives: { BentoTooltipDirective: w },
   props: {
     /**
      * Label to display for the value
@@ -77,60 +77,58 @@ const et = /* @__PURE__ */ y(w, [["render", q], ["__scopeId", "data-v-ee125315"]
     return {
       // Values
       conditionalClasses: s,
-      labelTypographyVariant: n,
-      // Types
-      BentoButtonVariant: L
+      labelTypographyVariant: n
     };
   }
 });
-const K = { class: "b-structured-list-item__label" }, P = { class: "b-structured-list-item__value" };
-function G(t, s, n, b, f, v) {
-  const h = e("bento-typography"), B = e("bento-info-icon"), S = e("copy"), g = e("search-icon"), C = e("bento-button"), T = $("bento-tooltip-directive");
+const J = { class: "b-structured-list-item__label" }, K = { class: "b-structured-list-item__value" };
+function P(t, s, n, f, b, h) {
+  const v = e("bento-typography"), S = e("bento-info-icon"), g = e("copy"), C = e("search-icon"), $ = e("bento-button"), B = T("bento-tooltip-directive");
   return o(), u("div", {
     class: k(["b-structured-list-item", t.conditionalClasses])
   }, [
-    a("dt", K, [
-      l(h, { variant: t.labelTypographyVariant }, {
+    a("dt", J, [
+      l(v, { variant: t.labelTypographyVariant }, {
         default: d(() => [
-          N(V(t.label), 1)
+          N(D(t.label), 1)
         ]),
         _: 1
       }, 8, ["variant"]),
-      t.labelInfo ? (o(), r(B, {
+      t.labelInfo ? (o(), r(S, {
         key: 0,
         class: "b-structured-list-item__icon",
         "tooltip-text": t.labelInfo
       }, null, 8, ["tooltip-text"])) : i("", !0)
     ]),
-    a("dd", P, [
+    a("dd", K, [
       m(t.$slots, "default", {}, void 0, !0),
-      t.copy ? (o(), r(S, {
+      t.copy ? (o(), r(g, {
         key: 0,
         class: "b-structured-list-item__icon",
         text: t.copy
       }, null, 8, ["text"])) : i("", !0),
-      t.search ? D((o(), r(C, {
+      t.search ? E((o(), r($, {
         key: 1,
         class: "b-structured-list-item__icon",
-        variant: t.BentoButtonVariant.TERTIARY,
+        variant: "tertiary",
         onClick: t.search
       }, {
         iconLeft: d(() => [
-          l(g, {
+          l(C, {
             "svg-title": t.$t("search")
           }, null, 8, ["svg-title"])
         ]),
         _: 1
-      }, 8, ["variant", "onClick"])), [
-        [T, t.searchTooltip ? t.searchTooltip : t.$t("search"), "top"]
+      }, 8, ["onClick"])), [
+        [B, t.searchTooltip ? t.searchTooltip : t.$t("search"), "top"]
       ]) : i("", !0)
     ])
   ], 2);
 }
-const ot = /* @__PURE__ */ y(J, [["render", G], ["__scopeId", "data-v-8d721555"]]);
+const et = /* @__PURE__ */ y(F, [["render", P], ["__scopeId", "data-v-c8b362f9"]]);
 export {
-  et as B,
+  tt as B,
   z as S,
-  ot as a
+  et as a
 };
-//# sourceMappingURL=index.3da90517.js.map
+//# sourceMappingURL=index.9d8273fc.js.map

package/dist/chunks/index.9d8273fc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.9d8273fc.js","sources":["../../../vue2/src/components/structured-list/structured-list.vue","../../../vue2/src/components/structured-list/structured-list.keys.ts","../../../vue2/src/components/structured-list/components/structered-list-item/structured-list-item.vue"],"sourcesContent":["<template>\n    <dl class=\"b-structured-list\">\n        <slot />\n    </dl>\n</template>\n\n<script lang=\"ts\">\n    import { defineComponent } from 'vue';\n\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\">\n     *                   123456\n     *               </bento-currency>\n     *         </bento-structured-list-item>\n     *       </bento-structured-list>\n     *     `\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-structured-list',\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./structured-list.scss\" />\n","export const STRUCTURED_LIST_CONDENSED_INJECTION_KEY = Symbol('structured list condensed style injection key');\n","<template>\n    <div class=\"b-structured-list-item\" :class=\"conditionalClasses\">\n        <dt class=\"b-structured-list-item__label\">\n            <bento-typography :variant=\"labelTypographyVariant\">\n                {{ label }}\n            </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\">\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 lang=\"ts\">\n    import { computed, defineComponent, inject, PropType } from 'vue';\n\n    // Components\n    import { BentoButton } from '@/components/button';\n    import { BentoInfoIcon } from '@/components/info-icon';\n    import { BentoTypography, BentoTypographyVariant } 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    // Directives\n    import { BentoTooltipDirective } from '@/directives';\n\n    // Keys\n    import { STRUCTURED_LIST_CONDENSED_INJECTION_KEY } from '../../structured-list.keys';\n\n    import messages from '../../messages.json';\n\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\">\n     *                   123456\n     *               </bento-currency>\n     *         </bento-structured-list-item>\n     *       </bento-structured-list>\n     *     `\n     * }\n     */\n    export default defineComponent({\n        i18n: { messages },\n        name: 'bento-structured-list-item',\n        components: {\n            BentoButton,\n            BentoInfoIcon,\n            BentoTypography,\n            Copy,\n            SearchIcon,\n        },\n        directives: { BentoTooltipDirective },\n        props: {\n            /**\n             * Label to display for the value\n             */\n            label: {\n                type: String,\n                required: true,\n            },\n            /**\n             * Text to display in info icon tooltip in the label to display for the value\n             */\n            labelInfo: {\n                type: String,\n                default: undefined,\n            },\n            /**\n             * Text to copy when the user clicks `Copy` icon\n             */\n            copy: {\n                type: String,\n                default: undefined,\n            },\n            /**\n             * Function to trigger when user clicks `Search` icon\n             */\n            search: {\n                type: Function as PropType<(event: Event) => void>,\n                default: undefined,\n            },\n            /**\n             * Text to display when the user hovers over `Search` icon\n             */\n            searchTooltip: {\n                type: String,\n                default: undefined,\n            },\n        },\n        setup() {\n            const isCondensed = inject(STRUCTURED_LIST_CONDENSED_INJECTION_KEY, false);\n\n            const conditionalClasses = computed(() => ({\n                'b-structured-list-item--condensed': isCondensed,\n            }));\n\n            const labelTypographyVariant = computed(() =>\n                isCondensed ? BentoTypographyVariant.CAPTION : BentoTypographyVariant.BODY\n            );\n\n            return {\n                // Values\n                conditionalClasses,\n                labelTypographyVariant,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./structured-list-item.scss\" />\n"],"names":["_sfc_main$1","defineComponent","STRUCTURED_LIST_CONDENSED_INJECTION_KEY","_sfc_main","messages","BentoButton","BentoInfoIcon","BentoTypography","Copy","SearchIcon","BentoTooltipDirective","isCondensed","inject","conditionalClasses","computed","labelTypographyVariant","BentoTypographyVariant","_directive_bento_tooltip_directive","resolveDirective","createElementVNode","_hoisted_1","createVNode","_component_bento_typography","_ctx","withCtx","createCommentVNode","_hoisted_2","renderSlot","openBlock","createBlock","_component_copy","_component_search_icon"],"mappings":";;;;;;;;;AAgCI,MAAAA,IAAAC,EAAA;AAAA,EAA+B,MAAA;AAE/B,CAAA;;;;;;;oFClCSC,IAAA,OAAA,+CAAA;;;;GCqETC,IAAAF,EAAA;AAAA,EAA+B,MAAA,EAAA,UAAAG,EAAA;AAAA,EACV,MAAA;AAAA,EACX,YAAA;AAAA,IACM,aAAAC;AAAA,IACR,eAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,MAAAC;AAAA,IACA,YAAAC;AAAA,EACA;AAAA,EACJ,YAAA,EAAA,uBAAAC,EAAA;AAAA,EACoC,OAAA;AAAA;AAAA;AAAA;AAAA,IAC7B,OAAA;AAAA,MAII,MAAA;AAAA,MACG,UAAA;AAAA,IACI;AAAA;AAAA;AAAA;AAAA,IACd,WAAA;AAAA,MAIW,MAAA;AAAA,MACD,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA,IACb,MAAA;AAAA,MAIM,MAAA;AAAA,MACI,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA,IACb,QAAA;AAAA,MAIQ,MAAA;AAAA,MACE,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA,IACb,eAAA;AAAA,MAIe,MAAA;AAAA,MACL,SAAA;AAAA,IACG;AAAA,EACb;AAAA,EACJ,QAAA;AAEI,UAAAC,IAAAC,EAAAV,GAAA,EAAA,GAEAW,IAAAC,EAAA,OAAA;AAAA,MAA2C,qCAAAH;AAAA,IACF,EAAA,GAGzCI,IAAAD;AAAA,MAA+B,MAAAH,IAAAK,EAAA,UAAAA,EAAA;AAAA,IAC2C;AAG1E,WAAA;AAAA;AAAA,MAAO,oBAAAH;AAAA,MAEH,wBAAAE;AAAA,IACA;AAAA,EACJ;AAER,CAAA;;;yHA/GME,IAAAC,EAAA,yBAAA;;;EAhBG,GAAA;AAAA,IAHcC,EAAA,MAAAC,GAAA;AAAA,MAAAC,EAAAC,GAAA,EAAA,SAAAC,EAAA,uBAAA,GAAA;AAAA,QAAH,SAAAC,EAAA,MAAA;AAAA;;QAEW,GAAA;AAAA,MAAA,GAAA,GAAA,CAAA,SAAA,CAAA;AAAA;QAA+C,KAAA;AAAA,QAAE,OAAA;AAAA;MAE5E,GAAA,MAAA,GAAA,CAAA,cAAA,CAAA,KAAAC,EAAA,IAAA,EAAA;AAAA,IAAA,CAAA;AAAA,IAEoBN,EAAA,MAAAO,GAAA;AAAA,MAAAC,EAAAJ,EAAA,QAAA,WAAA,CAAA,GAAA,QAAA,EAAA;AAAA,MAAsDA,EAAA,QAAAK,EAAA,GAAAC,EAAAC,GAAA;AAAA,QAAhB,KAAA;AAAA,QAAM,OAAA;AAAA;;;QAIpB,KAAA;AAAA,QACpC,OAAA;AAAA,QACM,SAAA;AAAA;MAEa,GAAA;AAAA,QACD,UAAAN,EAAA,MAAA;AAAA,UAAaH,EAAAU,GAAA;AAAA;;;;;;;;;;;"}