@adyen/bento-vue3 1.7.0 → 1.8.0

package/dist/chunks/index.726e2f3c.js

@@ -0,0 +1,339 @@
+import { defineComponent as T, computed as r, resolveComponent as B, openBlock as s, createBlock as f, withCtx as m, createTextVNode as R, toDisplayString as j, normalizeClass as C, createVNode as d, useSlots as x, useAttrs as U, inject as Y, ref as q, toRefs as z, Transition as H, unref as e, createElementBlock as l, createCommentVNode as i, renderSlot as g, createElementVNode as J } from "vue";
+import { c as K, a as $, b as M } from "./index.7262642e.js";
+import { B as G, a as E } from "./index.75f3672e.js";
+import { _ as h } from "./_plugin-vue_export-helper.dad06003.js";
+import { a as Q } from "./button.82ed953e.js";
+import { C as W } from "./cross.5c36a670.js";
+import { u as X } from "./use-has-slot.4d98bf29.js";
+import { u as Z } from "./aria-label.ac9651a5.js";
+import { BentoButtonActionsLayout as A, BentoButtonActions as tt } from "../button.js";
+import "../assets/index34.css";
+const et = T({
+  components: { BentoTypography: G },
+  props: {
+    /**
+     * Indicates if the popover contains an image.
+     */
+    isImageTitle: { type: Boolean, default: !1 },
+    /**
+     * Indicates the title you want to give the popover.
+     */
+    title: { type: String, default: null }
+  },
+  setup(t) {
+    const a = r(() => !t.isImageTitle), o = r(
+      () => t.isImageTitle ? E.SUBTITLE : E.BODY
+    );
+    return {
+      // Values
+      isStrongest: a,
+      titleVariant: o
+    };
+  }
+});
+function ot(t, a, o, _, b, u) {
+  const p = B("bento-typography");
+  return s(), f(p, {
+    strongest: t.isStrongest,
+    variant: t.titleVariant,
+    el: "span"
+  }, {
+    default: m(() => [
+      R(j(t.title), 1)
+    ]),
+    _: 1
+  }, 8, ["strongest", "variant"]);
+}
+const st = /* @__PURE__ */ h(et, [["render", ot]]), at = T({
+  name: "bento-popover-dismiss-button",
+  components: { BentoButton: Q, CrossIcon: W },
+  props: {
+    onImage: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(t) {
+    return {
+      // Values
+      conditionalClass: r(() => ({ "b-popover-dismiss-button--on-image": t.onImage }))
+    };
+  }
+});
+function it(t, a, o, _, b, u) {
+  const p = B("cross-icon"), v = B("bento-button");
+  return s(), f(v, {
+    class: C(t.conditionalClass),
+    variant: "tertiary",
+    onClick: a[0] || (a[0] = (k) => t.$emit("click"))
+  }, {
+    iconLeft: m(() => [
+      d(p, { "svg-title": "dismiss" })
+    ]),
+    _: 1
+  }, 8, ["class"]);
+}
+const I = /* @__PURE__ */ h(at, [["render", it], ["__scopeId", "data-v-df01cfb8"]]), O = { ...K }, nt = Symbol("popover offset injection key"), lt = {
+  key: 0,
+  class: "b-popover__image"
+}, rt = {
+  key: 0,
+  class: "b-popover__image-dismiss-button"
+}, pt = {
+  key: 1,
+  class: "b-popover__header"
+}, ct = { class: "b-popover__header-title" }, dt = { key: 0 }, ut = {
+  key: 3,
+  class: "b-popover__footer"
+}, ft = {};
+var L;
+const mt = /* @__PURE__ */ T({
+  ...ft,
+  __name: "popover",
+  props: {
+    /**
+     * List of actions that will be used to render the buttons.
+     * First element in the list will be rendered as "primary".
+     * All elements after the first will be rendered as "secondary".
+     *
+     * Each object in the list should have a `title`, an `event` and
+     * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.
+     *
+     * `title`: Button's text.
+     *
+     * `event`: Event triggered when clicking the Button.
+     *
+     * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.
+     *
+     * ```
+     * [{
+     *   title: 'Primary',
+     *   event: () => { ... },
+     *   icon: FourPeopleIcon
+     * }, {
+     *   title: 'Secondary',
+     *   event: () => { ... }
+     * }]
+     * ```
+     */
+    actions: {
+      type: Array,
+      default: null
+    },
+    /**
+     * Defines the layout in which the button actions is presented.
+     * It can be one of:
+     *
+     * @values BUTTONS_END
+     * @values FILL_CONTAINER
+     * @values SPACE_BETWEEN
+     * @values VERTICAL_STACK
+     */
+    actionsLayout: {
+      type: String,
+      default: A.BUTTONS_END,
+      validator: (t) => Object.values(A).includes(t)
+    },
+    /**
+     * @deprecated from version 2.0.0. Use the aria-label attribute instead.
+     */
+    /**
+     * Defines a string value that provides an accessible name for the popover.
+     */
+    ariaLabel: {
+      type: String,
+      default: null
+    },
+    /**
+     * Adds a divider line to the actions section, reduces the top/bottom paddings and removes all padding in the "default" slot.
+     */
+    divider: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Supports disabling focus trap functionality to avoid scroll into view behavior when we don't need it.
+     * */
+    disableFocusTrap: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Adds a "dismiss" icon that triggers the "dismiss" event. Requires the `title` prop to be set.
+     */
+    dismissible: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Allows to configure to fallback position to the one specified, it could be ['right', 'top', ...].
+     * Useful when not using auto as starting placement.
+     * https://floating-ui.com/docs/flip#fallbackplacements
+     */
+    fallbackPosition: {
+      type: Array,
+      default: () => ["bottom-start", "right-start", "top-start", "left-start"]
+    },
+    /**
+     * Sets the size of the container to fit its content
+     */
+    fitContent: { type: Boolean, default: !1 },
+    /**
+     * Instructs popover to be visible outside of the containing container.
+     * Useful when component would be used in limited containers like Modal, Side panel, etc.
+     * @see {@link https://floating-ui.com/docs/usefloating#strategy}
+     */
+    fixedPositioning: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Toggles the popover open and closed
+     */
+    open: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Displays the popover in a large size.
+     */
+    large: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @deprecated
+     * NOTE: This property no longer functions since moving to the floating-ui framework.
+     */
+    modifiers: { type: Array, default: null },
+    /**
+     * Popover's position relative to the target element.
+     * Possible values are:
+     * 'auto',    'auto-start',    'auto-end',
+     * 'top',     'top-start',     'top-end'
+     * 'right',   'right-start',   'right-end'
+     * 'bottom',  'bottom-start',  'bottom-end'
+     * 'left',    'left-start',    'left-end'
+     */
+    position: {
+      type: String,
+      default: O.BOTTOM_START,
+      validator: (t) => Object.values(O).includes(t)
+    },
+    /**
+     * Displays the popover in a small size.
+     */
+    small: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Indicates the title you want to give the popover.
+     */
+    title: {
+      type: String,
+      default: null
+    },
+    /**
+     * Popover's target element.
+     * The popover will position itself relatively to target element, in specified position.
+     */
+    targetElement: {
+      type: (L = $.props) == null ? void 0 : L.targetElement.type,
+      required: !0
+    },
+    /**
+     * Displays the popover without padding.
+     */
+    withoutSpace: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["dismiss", "placement"],
+  setup(t, { emit: a }) {
+    const o = t, _ = 2, b = x(), u = U(), p = r(() => {
+      var n;
+      return {
+        id: (n = u.id) == null ? void 0 : n.toString()
+      };
+    }), v = Y(nt, _), k = q(u["aria-label"]), { ariaLabel: V, title: y } = z(o), w = Z({
+      ariaLabel: k.value,
+      // TODO: take this line away when the aria-label props is removed
+      label: V,
+      defaultFallback: y
+    }), F = r(() => ({
+      "b-popover--small": o.small && !o.large,
+      "b-popover--with-divider": !!o.divider,
+      "b-popover--large": o.large && !o.small,
+      "b-popover--fit-content": o.fitContent,
+      "b-popover--without-space": o.withoutSpace
+    })), N = r(() => ({
+      "b-popover__content--with-title": !!o.title
+    })), S = () => a("dismiss"), c = X(b);
+    return (n, P) => (s(), f(H, { name: "b-popover__animation" }, {
+      default: m(() => [
+        t.open ? (s(), f(e($), {
+          key: 0,
+          id: e(p).id,
+          "aria-role": e(M).POPOVER,
+          "aria-label": e(w),
+          arrow: { classes: ["b-popover__arrow"] },
+          "disabled-focus-trap": t.disableFocusTrap,
+          class: C([e(F), "b-popover"]),
+          "fallback-position": t.fallbackPosition,
+          "fixed-positioning": t.fixedPositioning,
+          offset: [0, e(v)],
+          position: t.position,
+          "target-element": t.targetElement,
+          onPlacement: P[0] || (P[0] = (D) => n.$emit("placement", D))
+        }, {
+          default: m(() => [
+            e(c)("image") ? (s(), l("div", lt, [
+              t.dismissible ? (s(), l("div", rt, [
+                d(I, {
+                  "on-image": "",
+                  onClick: S
+                })
+              ])) : i("", !0),
+              g(n.$slots, "image", {}, void 0, !0)
+            ])) : i("", !0),
+            e(y) ? (s(), l("div", pt, [
+              J("div", ct, [
+                e(c)("headerIcon") ? g(n.$slots, "headerIcon", { key: 0 }, void 0, !0) : i("", !0),
+                d(st, {
+                  title: e(y),
+                  "is-image-title": !!e(c)("image")
+                }, null, 8, ["title", "is-image-title"])
+              ]),
+              t.dismissible && !e(c)("image") ? (s(), l("div", dt, [
+                d(I, { onClick: S })
+              ])) : i("", !0)
+            ])) : i("", !0),
+            e(c)("default") ? (s(), l("div", {
+              key: 2,
+              class: C(["b-popover__content", e(N)])
+            }, [
+              g(n.$slots, "default", {}, void 0, !0)
+            ], 2)) : i("", !0),
+            t.actions ? (s(), l("div", ut, [
+              d(e(tt), {
+                actions: t.actions,
+                layout: t.actionsLayout
+              }, null, 8, ["actions", "layout"])
+            ])) : i("", !0)
+          ]),
+          _: 3
+        }, 8, ["id", "aria-role", "aria-label", "disabled-focus-trap", "class", "fallback-position", "fixed-positioning", "offset", "position", "target-element"])) : i("", !0)
+      ]),
+      _: 3
+    }));
+  }
+});
+const kt = /* @__PURE__ */ h(mt, [["__scopeId", "data-v-d6ae319b"]]);
+export {
+  O as B,
+  nt as P,
+  kt as a
+};
+//# sourceMappingURL=index.726e2f3c.js.map

package/dist/chunks/index.726e2f3c.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.726e2f3c.js","sources":["../../../vue2/src/components/popover/components/popover-title/popover-title.vue","../../../vue2/src/components/popover/components/popover-dismiss-button/popover-dismiss-button.vue","../../../vue2/src/components/popover/popover.types.ts","../../../vue2/src/components/popover/popover.keys.ts","../../../vue2/src/components/popover/popover.vue"],"sourcesContent":["<template>\n    <bento-typography :strongest=\"isStrongest\" :variant=\"titleVariant\" el=\"span\">\n        {{ title }}\n    </bento-typography>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent } from 'vue';\n    import { BentoTypography, BentoTypographyVariant } from '@/components/typography';\n\n    export default defineComponent({\n        components: { BentoTypography },\n        props: {\n            /**\n             * Indicates if the popover contains an image.\n             */\n            isImageTitle: { type: Boolean, default: false },\n\n            /**\n             * Indicates the title you want to give the popover.\n             */\n            title: { type: String, default: null },\n        },\n        setup(props) {\n            // Use strongest only when it has no image\n            const isStrongest = computed(() => !props.isImageTitle);\n\n            // If an image is present, change the variant from BODY to SUBTITLE and remove the \"strongest\" property of the title\n            const titleVariant = computed(() =>\n                props.isImageTitle ? BentoTypographyVariant.SUBTITLE : BentoTypographyVariant.BODY\n            );\n\n            return {\n                // Values\n                isStrongest,\n                titleVariant,\n            };\n        },\n    });\n</script>\n","<template>\n    <bento-button :class=\"conditionalClass\" variant=\"tertiary\" @click=\"$emit('click')\">\n        <template #iconLeft>\n            <cross-icon svg-title=\"dismiss\" />\n        </template>\n    </bento-button>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent } from 'vue';\n    import { BentoButton } from '@/components/button';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n\n    export default defineComponent({\n        name: 'bento-popover-dismiss-button',\n        components: { BentoButton, CrossIcon },\n        props: {\n            onImage: {\n                type: Boolean,\n                default: false,\n            },\n        },\n        setup(props) {\n            const conditionalClass = computed(() => ({ 'b-popover-dismiss-button--on-image': props.onImage }));\n\n            return {\n                // Values\n                conditionalClass,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./popover-dismiss-button.scss\" />\n","import { PopperContainerPosition } from '../popper-container';\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport const BentoPopoverPositions = { ...PopperContainerPosition };\nexport type BentoPopoverPositions = PopperContainerPosition;\n","export const POPOVER_OFFSET_INJECTION_KEY = Symbol('popover offset injection key');\n","<template>\n    <Transition name=\"b-popover__animation\">\n        <popper-container\n            v-if=\"open\"\n            :id=\"computedAttributes['id']\"\n            :aria-role=\"PopperContainerAriaRole.POPOVER\"\n            :aria-label=\"computedAriaLabel\"\n            :arrow=\"{ classes: ['b-popover__arrow'] }\"\n            :disabled-focus-trap=\"disableFocusTrap\"\n            :class=\"conditionalClasses\"\n            :fallback-position=\"fallbackPosition\"\n            :fixed-positioning=\"fixedPositioning\"\n            :offset=\"[0, offset]\"\n            :position=\"position\"\n            :target-element=\"targetElement\"\n            class=\"b-popover\"\n            @placement=\"$emit('placement', $event)\"\n        >\n            <div v-if=\"hasSlot('image')\" class=\"b-popover__image\">\n                <div v-if=\"dismissible\" class=\"b-popover__image-dismiss-button\">\n                    <bento-popover-dismiss-button on-image @click=\"dismissPopover\" />\n                </div>\n                <slot name=\"image\"></slot>\n            </div>\n            <div v-if=\"title\" class=\"b-popover__header\">\n                <div class=\"b-popover__header-title\">\n                    <slot v-if=\"hasSlot('headerIcon')\" name=\"headerIcon\"></slot>\n                    <bento-popover-title :title=\"title\" :is-image-title=\"!!hasSlot('image')\" />\n                </div>\n                <div v-if=\"dismissible && !hasSlot('image')\">\n                    <bento-popover-dismiss-button @click=\"dismissPopover\" />\n                </div>\n            </div>\n\n            <div v-if=\"hasSlot('default')\" class=\"b-popover__content\" :class=\"contentConditionalClasses\">\n                <slot></slot>\n            </div>\n\n            <div v-if=\"actions\" class=\"b-popover__footer\">\n                <bento-button-actions :actions=\"actions\" :layout=\"actionsLayout\"></bento-button-actions>\n            </div>\n        </popper-container>\n    </Transition>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, PropType, ref, toRefs, useAttrs, useSlots } from 'vue';\n\n    import { BentoButtonActions, BentoButtonActionsLayout, BentoButtonActionsList } from '@/components/button';\n    import { PopperContainer, PopperContainerAriaRole } from '@/components/popper-container';\n    import BentoPopoverTitle from './components/popover-title/popover-title.vue';\n    import BentoPopoverDismissButton from './components/popover-dismiss-button/popover-dismiss-button.vue';\n\n    import { BentoPopoverPositions } from './popover.types';\n    import { Placement } from '@floating-ui/vue';\n\n    import { useHasSlot } from '@/composables';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n\n    import { POPOVER_OFFSET_INJECTION_KEY } from './popover.keys';\n\n    const DEFAULT_OFFSET = 2;\n\n    const props = defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * First element in the list will be rendered as \"primary\".\n         * All elements after the first will be rendered as \"secondary\".\n         *\n         * Each object in the list should have a `title`, an `event` and\n         * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n         *\n         * `title`: Button's text.\n         *\n         * `event`: Event triggered when clicking the Button.\n         *\n         * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.\n         *\n         * ```\n         * [{\n         *   title: 'Primary',\n         *   event: () => { ... },\n         *   icon: FourPeopleIcon\n         * }, {\n         *   title: 'Secondary',\n         *   event: () => { ... }\n         * }]\n         * ```\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            default: null,\n        },\n\n        /**\n         * Defines the layout in which the button actions is presented.\n         * It can be one of:\n         *\n         * @values BUTTONS_END\n         * @values FILL_CONTAINER\n         * @values SPACE_BETWEEN\n         * @values VERTICAL_STACK\n         */\n        actionsLayout: {\n            type: String as PropType<BentoButtonActionsLayout | `${BentoButtonActionsLayout}`>,\n            default: BentoButtonActionsLayout.BUTTONS_END,\n            validator: (value: BentoButtonActionsLayout) => Object.values(BentoButtonActionsLayout).includes(value),\n        },\n\n        /**\n         * @deprecated from version 2.0.0. Use the aria-label attribute instead.\n         */\n        /**\n         * Defines a string value that provides an accessible name for the popover.\n         */\n        ariaLabel: {\n            type: String,\n            default: null,\n        },\n\n        /**\n         * Adds a divider line to the actions section, reduces the top/bottom paddings and removes all padding in the \"default\" slot.\n         */\n        divider: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Supports disabling focus trap functionality to avoid scroll into view behavior when we don't need it.\n         * */\n        disableFocusTrap: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Adds a \"dismiss\" icon that triggers the \"dismiss\" event. Requires the `title` prop to be set.\n         */\n        dismissible: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Allows to configure to fallback position to the one specified, it could be ['right', 'top', ...].\n         * Useful when not using auto as starting placement.\n         * https://floating-ui.com/docs/flip#fallbackplacements\n         */\n        fallbackPosition: {\n            type: Array as PropType<Placement[]>,\n            default: () => ['bottom-start', 'right-start', 'top-start', 'left-start'],\n        },\n\n        /**\n         * Sets the size of the container to fit its content\n         */\n        fitContent: { type: Boolean, default: false },\n\n        /**\n         * Instructs popover to be visible outside of the containing container.\n         * Useful when component would be used in limited containers like Modal, Side panel, etc.\n         * @see {@link https://floating-ui.com/docs/usefloating#strategy}\n         */\n        fixedPositioning: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Toggles the popover open and closed\n         */\n        open: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Displays the popover in a large size.\n         */\n        large: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * @deprecated\n         * NOTE: This property no longer functions since moving to the floating-ui framework.\n         */\n        modifiers: { type: Array, default: null },\n\n        /**\n         * Popover's position relative to the target element.\n         * Possible values are:\n         * 'auto',    'auto-start',    'auto-end',\n         * 'top',     'top-start',     'top-end'\n         * 'right',   'right-start',   'right-end'\n         * 'bottom',  'bottom-start',  'bottom-end'\n         * 'left',    'left-start',    'left-end'\n         */\n        position: {\n            type: String as PropType<BentoPopoverPositions | `${BentoPopoverPositions}`>,\n            default: BentoPopoverPositions.BOTTOM_START,\n            validator: (value: BentoPopoverPositions) => Object.values(BentoPopoverPositions).includes(value),\n        },\n\n        /**\n         * Displays the popover in a small size.\n         */\n        small: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Indicates the title you want to give the popover.\n         */\n        title: {\n            type: String,\n            default: null,\n        },\n\n        /**\n         * Popover's target element.\n         * The popover will position itself relatively to target element, in specified position.\n         */\n        targetElement: {\n            type: PopperContainer.props?.targetElement.type,\n            required: true,\n        },\n        /**\n         * Displays the popover without padding.\n         */\n        withoutSpace: {\n            type: Boolean,\n            default: false,\n        },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Triggered when the `dismiss` button is clicked\n         */\n        (e: 'dismiss'): void;\n        /**\n         * Triggered when the popover `placement` changes\n         */\n        (e: 'placement', placement: Placement): void;\n    }>();\n\n    const slots = useSlots();\n    const attrs = useAttrs();\n\n    const computedAttributes = computed(() => ({\n        id: attrs.id?.toString() as string,\n    }));\n\n    const offset = inject<number>(POPOVER_OFFSET_INJECTION_KEY, DEFAULT_OFFSET);\n\n    const ariaLabelAttribute = ref(attrs['aria-label']);\n    const { ariaLabel, title } = toRefs(props);\n    const computedAriaLabel = useAriaLabel({\n        ariaLabel: ariaLabelAttribute.value as string,\n        // TODO: take this line away when the aria-label props is removed\n        label: ariaLabel,\n        defaultFallback: title,\n    });\n\n    const conditionalClasses = computed(() => ({\n        'b-popover--small': props.small && !props.large,\n        'b-popover--with-divider': !!props.divider,\n        'b-popover--large': props.large && !props.small,\n        'b-popover--fit-content': props.fitContent,\n        'b-popover--without-space': props.withoutSpace,\n    }));\n\n    const contentConditionalClasses = computed(() => ({\n        'b-popover__content--with-title': !!props.title,\n    }));\n\n    const dismissPopover = () => emit('dismiss');\n\n    const hasSlot = useHasSlot(slots);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Example description of the component...\n     *\n     * @example\n     * import { BentoPopover } from '@adyen/adl-vue2';\n     *\n     * export default {\n     *     components: { BentoPopover },\n     *     template: `\n     *          <bento-popover id=\"your-popover-id\">\n     *              ...Example code of the component\n     *          </bento-popover>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./popover.scss\" />\n"],"names":["_sfc_main$2","defineComponent","BentoTypography","props","isStrongest","computed","titleVariant","BentoTypographyVariant","_component_bento_typography","resolveComponent","openBlock","createBlock","_ctx","_sfc_main$1","BentoButton","CrossIcon","_component_bento_button","normalizeClass","_cache","$event","BentoPopoverPositions","PopperContainerPosition","POPOVER_OFFSET_INJECTION_KEY","__default__","DEFAULT_OFFSET","slots","useSlots","attrs","useAttrs","computedAttributes","_a","offset","inject","ariaLabelAttribute","ref","ariaLabel","title","toRefs","computedAriaLabel","useAriaLabel","conditionalClasses","contentConditionalClasses","dismissPopover","emit","hasSlot","useHasSlot"],"mappings":";;;;;;;;;;AAUI,MAAAA,KAAAC,EAAA;AAAA,EAA+B,YAAA,EAAA,iBAAAC,EAAA;AAAA,EACG,OAAA;AAAA;AAAA;AAAA;AAAA,IACvB,cAAA,EAAA,MAAA,SAAA,SAAA,GAAA;AAAA;AAAA;AAAA;AAAA,IAI2C,OAAA,EAAA,MAAA,QAAA,SAAA,KAAA;AAAA,EAKT;AAAA,EACzC,MAAAC,GAAA;AAGI,UAAAC,IAAAC,EAAA,MAAA,CAAAF,EAAA,YAAA,GAGAG,IAAAD;AAAA,MAAqB,MAAAF,EAAA,eAAAI,EAAA,WAAAA,EAAA;AAAA,IAC6D;AAGlF,WAAA;AAAA;AAAA,MAAO,aAAAH;AAAA,MAEH,cAAAE;AAAA,IACA;AAAA,EACJ;AAER,CAAA;;AAnCmB,QAAAE,IAAAC,EAAA,kBAAA;AAFyB,SAAAC,EAAA,GAAAC,EAAAH,GAAA;AAAA,IAAqB,WAAAI,EAAA;AAAA,IAAW,SAAAA,EAAA;AAAA;;;;;;;;oDCY5EC,KAAAZ,EAAA;AAAA,EAA+B,MAAA;AAAA,EACrB,YAAA,EAAA,aAAAa,GAAA,WAAAC,EAAA;AAAA,EAC+B,OAAA;AAAA,IAC9B,SAAA;AAAA,MACM,MAAA;AAAA,MACC,SAAA;AAAA,IACG;AAAA,EACb;AAAA,EACJ,MAAAZ,GAAA;AAII,WAAA;AAAA;AAAA,MAAO,kBAFPE,EAAA,OAAA,EAAA,sCAAAF,EAAA,QAAA,EAAA;AAAA,IAII;AAAA,EACJ;AAER,CAAA;;;AA7BwC,SAAAO,EAAA,GAAAC,EAAAK,GAAA;AAAA,IAAkB,OAAAC,EAAAL,EAAA,gBAAA;AAAA,IAAO,SAAA;AAAA,IAClD,SAAAM,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAAP,EAAA,MAAA,OAAA;AAAA,EAC2B,GAAA;AAAA;;;;;;qFCEjCQ,IAAA,EAAA,GAAAC,EAAA,GCLAC,KAAA,OAAA,8BAAA;;;;;;;;;;;;GC6STC,KAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAhPAC,IAAA,GA6LAC,IAAAC,EAAA,GACAC,IAAAC,EAAA,GAEAC,IAAAxB,EAAA,MAAA;;AAAA;AAAA,QAA2C,KAAAyB,IAAAH,EAAA,OAAA,gBAAAG,EAAA;AAAA,MAChB;AAAA,KAAA,GAG3BC,IAAAC,EAAAV,IAAAE,CAAA,GAEAS,IAAAC,EAAAP,EAAA,YAAA,CAAA,GACA,EAAA,WAAAQ,GAAA,OAAAC,EAAA,IAAAC,EAAAlC,CAAA,GACAmC,IAAAC,EAAA;AAAA,MAAuC,WAAAN,EAAA;AAAA;AAAA,MACL,OAAAE;AAAA,MAEvB,iBAAAC;AAAA,IACU,CAAA,GAGrBI,IAAAnC,EAAA,OAAA;AAAA,MAA2C,oBAAAF,EAAA,SAAA,CAAAA,EAAA;AAAA,MACG,2BAAA,CAAA,CAAAA,EAAA;AAAA,MACP,oBAAAA,EAAA,SAAA,CAAAA,EAAA;AAAA,MACO,0BAAAA,EAAA;AAAA,MACV,4BAAAA,EAAA;AAAA,IACE,EAAA,GAGtCsC,IAAApC,EAAA,OAAA;AAAA,MAAkD,kCAAA,CAAA,CAAAF,EAAA;AAAA,IACJ,EAAA,GAG9CuC,IAAA,MAAAC,EAAA,SAAA,GAEAC,IAAAC,EAAApB,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{index.2bd3812b.js → index.75f3672e.js}

@@ -1,6 +1,6 @@
 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/index46.css";
+import "../assets/index39.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) {
@@ -121,4 +121,4 @@ export {
   _ as d,
   r as p
 };
-//# sourceMappingURL=index.2bd3812b.js.map
+//# sourceMappingURL=index.75f3672e.js.map

package/dist/chunks/{index.2bd3812b.js.map → index.75f3672e.js.map}

@@ -1 +1 @@
-{"version":3,"file":"index.2bd3812b.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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"}
+{"version":3,"file":"index.75f3672e.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":";;;AAGY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,OAAA,QAEAA,EAAA,WAAA,YACAA,EAAA,QAAA,SALQA,IAAAD,KAAA,CAAA,CAAA,GAQAE,IAAA,kBAAAC,OACRA,EAAA,OAAA,QACAA,EAAA,WAAA,YACAA,EAAA,gBAAA,iBACAA,EAAA,YAAA,aACAA,EAAA,iBAAA,kBACAA,EAAA,SAAA,KACAA,EAAA,QAAA,KACAA,EAAA,SAAA,UARQA,IAAAD,KAAA,CAAA,CAAA,GAcAE,IAAA,kBAAAC,OACRA,EAAA,KAAA,MACAA,EAAA,KAAA,MACAA,EAAA,KAAA,MACAA,EAAA,KAAA,MACAA,EAAA,KAAA,MACAA,EAAA,KAAA,MACAA,EAAA,MAAA,OACAA,EAAA,YAAA,KACAA,EAAA,OAAA,QATQA,IAAAD,KAAA,CAAA,CAAA;ACzBZ,MAAAE,IAAA,CAAA,eAAA,eAAA,OAAA,KAAA,GAEOC,IAAA,MAAAD,EAAA,SAAA,QAAA,IAAA,QAAA;ACMA,SAAAE,KAAAC,GAAA;AACH,EAAAF,EAAA,KAEI,QAAA,KAAA,GAAAE,CAAA;AAER;ACXA,MAAAC,IAAA,CAAA,cAAA,oBAAA,EAAA,KAAA,GAAA;AASgB,SAAAC,EAAAC,GAAAC,GAAAC,GAAA;AACZ,EAAAN,EAAA,wBAAAI,KAAAF,CAAA,GAEAF,EAAA,GAAAK,EAAA,WAAA,KAAA,EAAA,EAAA,WAAA,MAAA,EAAA,EAAA,KAAA,GAAA,GACAL,EAAA,uBAAAM,KAAAJ,CAAA;AACJ;ACaI,MAAAK,IAAAC,EAAA;AAAA,EAA+B,MAAA;AAAA,EACrB,cAAA;AAAA,EACQ,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACP,IAAA;AAAA,MAKC,MAAA;AAAA,MACM,SAAAZ,EAAA;AAAA,MAC0B,WAAA,CAAAa,MAAA,OAAA,OAAAb,CAAA,EAAA,SAAAa,CAAA;AAAA,IACkE;AAAA;AAAA;AAAA;AAAA;AAAA,IACtG,UAAA;AAAA,MAMU,MAAA;AAAA,MACA,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA;AAAA,IACb,WAAA;AAAA,MAMW,MAAA;AAAA,MACD,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA;AAAA,IACb,SAAA;AAAA,MAMS,MAAA;AAAA,MACC,SAAAjB,EAAA;AAAA,MAC0B,WAAA,CAAAiB,MAAA,OAAA,OAAAjB,CAAA,EAAA,SAAAiB,CAAA;AAAA,IACkE;AAAA;AAAA;AAAA;AAAA;AAAA,IACtG,QAAA;AAAA,MAMQ,MAAA;AAAA,MACE,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA;AAAA,IACb,OAAA;AAAA,MAMO,MAAA;AAAA,MACG,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA;AAAA,IACb,MAAA;AAAA,MAMM,MAAA;AAAA,MACI,SAAA;AAAA,IACG;AAAA,EACb;AAAA,EACJ,MAAAC,GAAA;AAEI,WAAAA,EAAA,YAAAlB,EAAA,YACIW;AAAA,MAAA;AAAA,MACI;AAAA;AAAA,MACA;AAAA,IAEA,GAmCR;AAAA,MAAO,oBA/BPQ,EAAA,OAAA;AAAA;AAAA,QAA2C,CAAA,iBAAAnB,EAAA,SAAA,GAAAkB,EAAA,YAAAlB,EAAA;AAAA,QAEuD,CAAA,iBAAAA,EAAA,WAAAE,EAAA,MAAA,GAAAgB,EAAA,YAAAlB,EAAA,WAAAkB,EAAA;AAAA,QAEhC,CAAA,iBAAAlB,EAAA,WAAAE,EAAA,UAAA,GAAAgB,EAAA,YAAAlB,EAAA,WAAAkB,EAAA;AAAA;AAAA,QAEA,CAAA,iBAAAlB,EAAA,MAAA,GAAAkB,EAAA,YAAAlB,EAAA;AAAA,QAG6B,CAAA,iBAAAA,EAAA,QAAAE,EAAA,MAAA,GAAAgB,EAAA,YAAAlB,EAAA,QAAAkB,EAAA;AAAA,QAEhC,CAAA,iBAAAlB,EAAA,QAAAE,EAAA,UAAA,GAAAgB,EAAA,YAAAlB,EAAA,QAAAkB,EAAA;AAAA,QAEA,CAAA,iBAAAlB,EAAA,QAAAE,EAAA,WAAA,GAAAgB,EAAA,YAAAlB,EAAA,QAAAkB,EAAA;AAAA;AAAA,QAEA,CAAA,iBAAAlB,EAAA,UAAA,GAAAkB,EAAA,YAAAlB,EAAA;AAAA,QAGoC,CAAA,iBAAAA,EAAA,YAAAE,EAAA,UAAA,GAAAgB,EAAA,YAAAlB,EAAA,YAAAkB,EAAA;AAAA;AAAA,QAEhC,CAAA,iBAAAlB,EAAA,OAAA,GAAAkB,EAAA,YAAAlB,EAAA,SAAA,CAAAkB,EAAA,UAAA,CAAAA,EAAA;AAAA,QAIe,CAAA,iBAAAlB,EAAA,SAAAE,EAAA,QAAA,GAAAgB,EAAA,YAAAlB,EAAA,SAAAkB,EAAA;AAAA,QAElB,CAAA,iBAAAlB,EAAA,SAAAE,EAAA,OAAA,GAAAgB,EAAA,YAAAlB,EAAA,SAAAkB,EAAA;AAAA,MAEA,EAAA;AAAA,IAI5D;AAAA,EACJ;AAER,CAAA;;AA9IqE,SAAAE,EAAA,GAAAC,EAAAC,EAAAC,EAAA,EAAA,GAAA;AAAA,IAAwB,OAAAC,EAAA,CAAA,gBAAAD,EAAA,kBAAA,CAAA;AAAA;;;;;;;;;"}

package/dist/chunks/{index.6a665ade.js → index.abb2a1d5.js}

@@ -1,7 +1,7 @@
 import { ref as d, computed as i, defineComponent as u, toRefs as p, resolveComponent as _, openBlock as s, createElementBlock as n, normalizeClass as m, createVNode as v, withCtx as g, createTextVNode as f, toDisplayString as y } from "vue";
-import { B as L } from "./index.2bd3812b.js";
+import { B as L } from "./index.75f3672e.js";
 import { _ as b } from "./_plugin-vue_export-helper.dad06003.js";
-import "../assets/index8.css";
+import "../assets/index12.css";
 const h = (e) => {
   const a = d(e);
   return i(() => a.value ? a.value.trim().charAt(0).toUpperCase() : null);
@@ -98,4 +98,4 @@ export {
   t as a,
   h as u
 };
-//# sourceMappingURL=index.6a665ade.js.map
+//# sourceMappingURL=index.abb2a1d5.js.map

package/dist/chunks/{index.6a665ade.js.map → index.abb2a1d5.js.map}

@@ -1 +1 @@
-{"version":3,"file":"index.6a665ade.js","sources":["../../../vue2/src/composables/initials.ts","../../../vue2/src/components/avatar-image/avatar-image.types.ts","../../../vue2/src/components/avatar-image/avatar-image.vue"],"sourcesContent":["import { computed, ComputedRef, ref } from 'vue';\nimport { MaybeRef } from '@/types';\n\n/** Extracts the first letter of a username\n * @param username - The name to return the initials of\n * Common patterns:\n * 1. John => J\n * 2. John Smith => J\n * John Smith Doe Holly => J\n */\nexport const useInitials = (username: MaybeRef<string | null>): ComputedRef<string | null> => {\n    const computedUsername = ref(username);\n    return computed(() => (computedUsername.value ? computedUsername.value.trim().charAt(0).toUpperCase() : null));\n};\n","export enum BentoAvatarImageVariant {\n    LARGE = 'large',\n    SMALL = 'small',\n}\n\nexport enum BentoAvatarImageColor {\n    BLUE = 'blue',\n    GREEN = 'green',\n    RED = 'red',\n    YELLOW = 'yellow',\n}\n","<template>\n    <div class=\"b-avatar-image\" :class=\"conditionalClasses\" aria-hidden=\"true\" data-testid=\"avatar\">\n        <img v-if=\"src\" :src=\"src\" class=\"b-avatar-image__image\" alt=\"Profile picture\" data-testid=\"avatar-content\" />\n        <div v-else class=\"b-avatar-image__default\" data-testid=\"avatar-content\">\n            <bento-typography el=\"span\" variant=\"body\" strongest>\n                {{ initials }}\n            </bento-typography>\n        </div>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, toRefs } from 'vue';\n    import { BentoAvatarImageColor, BentoAvatarImageVariant } from './avatar-image.types';\n    import { BentoTypography } from '@/components/typography';\n    import { useInitials } from '@/composables';\n\n    export default defineComponent({\n        name: 'avatar-image',\n        components: { BentoTypography },\n        props: {\n            /**\n             * Image src to load the profile picture.\n             */\n            src: {\n                type: String,\n                default: null,\n            },\n            /**\n             * Name of the user that will be used to extract initials to display default value.\n             * John => J\n             * John Smith => JS\n             * John Smith Doe => JD\n             * John Smith Doe Holly => JH\n             */\n            username: {\n                type: String,\n                default: null,\n            },\n            /**\n             * Variants supported for small and large.\n             * Default - large\n             */\n            variant: {\n                type: String as PropType<BentoAvatarImageVariant>,\n                default: BentoAvatarImageVariant.LARGE,\n                validator: (value: BentoAvatarImageVariant) => Object.values(BentoAvatarImageVariant).includes(value),\n            },\n            /**\n             * Avatar color. Defaults to yellow.\n             */\n            color: {\n                type: String as PropType<BentoAvatarImageColor>,\n                default: BentoAvatarImageColor.YELLOW,\n                validator: (value: BentoAvatarImageColor) => Object.values(BentoAvatarImageColor).includes(value),\n            },\n        },\n        setup(props) {\n            const { username } = toRefs(props);\n            const initials = useInitials(username);\n\n            const conditionalClasses = computed(() => ({\n                [`b-avatar-image--${BentoAvatarImageVariant.SMALL}`]: props.variant === BentoAvatarImageVariant.SMALL,\n                [`b-avatar-image--${props.color}`]: props.color,\n            }));\n\n            return {\n                // Values\n                conditionalClasses,\n                initials,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./avatar-image.scss\" />\n"],"names":["useInitials","username","computedUsername","ref","computed","BentoAvatarImageVariant","BentoAvatarImageVariant2","BentoAvatarImageColor","BentoAvatarImageColor2","_sfc_main","defineComponent","BentoTypography","value","props","toRefs","initials","openBlock","createElementBlock","normalizeClass","_ctx","_hoisted_1","_hoisted_2","createVNode","_component_bento_typography"],"mappings":";;;;AAUa,MAAAA,IAAA,CAAAC,MAAA;AACT,QAAAC,IAAAC,EAAAF,CAAA;AACA,SAAAG,EAAA,MAAAF,EAAA,QAAAA,EAAA,MAAA,KAAA,EAAA,OAAA,CAAA,EAAA,YAAA,IAAA,IAAA;AACJ;ACbY,IAAAG,IAAA,kBAAAC,OACRA,EAAA,QAAA,SACAA,EAAA,QAAA,SAFQA,IAAAD,KAAA,CAAA,CAAA,GAKAE,IAAA,kBAAAC,OACRA,EAAA,OAAA,QACAA,EAAA,QAAA,SACAA,EAAA,MAAA,OACAA,EAAA,SAAA,UAJQA,IAAAD,KAAA,CAAA,CAAA;ACYR,MAAAE,IAAAC,EAAA;AAAA,EAA+B,MAAA;AAAA,EACrB,YAAA,EAAA,iBAAAC,EAAA;AAAA,EACwB,OAAA;AAAA;AAAA;AAAA;AAAA,IACvB,KAAA;AAAA,MAIE,MAAA;AAAA,MACK,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACb,UAAA;AAAA,MAQU,MAAA;AAAA,MACA,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA;AAAA,IACb,SAAA;AAAA,MAKS,MAAA;AAAA,MACC,SAAAN,EAAA;AAAA,MAC2B,WAAA,CAAAO,MAAA,OAAA,OAAAP,CAAA,EAAA,SAAAO,CAAA;AAAA,IACmE;AAAA;AAAA;AAAA;AAAA,IACxG,OAAA;AAAA,MAIO,MAAA;AAAA,MACG,SAAAL,EAAA;AAAA,MACyB,WAAA,CAAAK,MAAA,OAAA,OAAAL,CAAA,EAAA,SAAAK,CAAA;AAAA,IACiE;AAAA,EACpG;AAAA,EACJ,MAAAC,GAAA;AAEI,UAAA,EAAA,UAAAZ,EAAA,IAAAa,EAAAD,CAAA,GACAE,IAAAf,EAAAC,CAAA;AAOA,WAAA;AAAA;AAAA,MAAO,oBALPG,EAAA,OAAA;AAAA,QAA2C,CAAA,mBAAAC,EAAA,OAAA,GAAAQ,EAAA,YAAAR,EAAA;AAAA,QACyD,CAAA,mBAAAQ,EAAA,OAAA,GAAAA,EAAA;AAAA,MACtD,EAAA;AAAA,MAK1C,UAAAE;AAAA,IACA;AAAA,EACJ;AAER,CAAA;;EArEsB,KAAA;AAAA,EAA0B,OAAA;AAAA;;;;AAFQ,SAAAC,EAAA,GAAAC,EAAA,OAAA;AAAA,IAAkB,OAAAC,EAAA,CAAA,kBAAAC,EAAA,kBAAA,CAAA;AAAA,IAAqB,eAAA;AAAA,IAC7E,eAAA;AAAA,EAAA,GAAA;AAAA;MAAW,KAAA;AAAA,MAAO,KAAAA,EAAA;AAAA,MAA6B,OAAA;AAAA,MAAkB,KAAA;AAAA,MAC/E,eAAA;AAAA,IAAA,GAAA,MAAA,GAAAC,CAAA,MAAAJ,EAAA,GAAAC,EAAA,OAAAI,GAAA;AAAA,MAC+BC,EAAAC,GAAA;AAAA,QAAe,IAAA;AAAA,QAAC,SAAA;AAAA;;;;;;;;;;;"}
+{"version":3,"file":"index.abb2a1d5.js","sources":["../../../vue2/src/composables/initials.ts","../../../vue2/src/components/avatar-image/avatar-image.types.ts","../../../vue2/src/components/avatar-image/avatar-image.vue"],"sourcesContent":["import { computed, ComputedRef, ref } from 'vue';\nimport { MaybeRef } from '@/types';\n\n/** Extracts the first letter of a username\n * @param username - The name to return the initials of\n * Common patterns:\n * 1. John => J\n * 2. John Smith => J\n * John Smith Doe Holly => J\n */\nexport const useInitials = (username: MaybeRef<string | null>): ComputedRef<string | null> => {\n    const computedUsername = ref(username);\n    return computed(() => (computedUsername.value ? computedUsername.value.trim().charAt(0).toUpperCase() : null));\n};\n","export enum BentoAvatarImageVariant {\n    LARGE = 'large',\n    SMALL = 'small',\n}\n\nexport enum BentoAvatarImageColor {\n    BLUE = 'blue',\n    GREEN = 'green',\n    RED = 'red',\n    YELLOW = 'yellow',\n}\n","<template>\n    <div class=\"b-avatar-image\" :class=\"conditionalClasses\" aria-hidden=\"true\" data-testid=\"avatar\">\n        <img v-if=\"src\" :src=\"src\" class=\"b-avatar-image__image\" alt=\"Profile picture\" data-testid=\"avatar-content\" />\n        <div v-else class=\"b-avatar-image__default\" data-testid=\"avatar-content\">\n            <bento-typography el=\"span\" variant=\"body\" strongest>\n                {{ initials }}\n            </bento-typography>\n        </div>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, toRefs } from 'vue';\n    import { BentoAvatarImageColor, BentoAvatarImageVariant } from './avatar-image.types';\n    import { BentoTypography } from '@/components/typography';\n    import { useInitials } from '@/composables';\n\n    export default defineComponent({\n        name: 'avatar-image',\n        components: { BentoTypography },\n        props: {\n            /**\n             * Image src to load the profile picture.\n             */\n            src: {\n                type: String,\n                default: null,\n            },\n            /**\n             * Name of the user that will be used to extract initials to display default value.\n             * John => J\n             * John Smith => JS\n             * John Smith Doe => JD\n             * John Smith Doe Holly => JH\n             */\n            username: {\n                type: String,\n                default: null,\n            },\n            /**\n             * Variants supported for small and large.\n             * Default - large\n             */\n            variant: {\n                type: String as PropType<BentoAvatarImageVariant>,\n                default: BentoAvatarImageVariant.LARGE,\n                validator: (value: BentoAvatarImageVariant) => Object.values(BentoAvatarImageVariant).includes(value),\n            },\n            /**\n             * Avatar color. Defaults to yellow.\n             */\n            color: {\n                type: String as PropType<BentoAvatarImageColor>,\n                default: BentoAvatarImageColor.YELLOW,\n                validator: (value: BentoAvatarImageColor) => Object.values(BentoAvatarImageColor).includes(value),\n            },\n        },\n        setup(props) {\n            const { username } = toRefs(props);\n            const initials = useInitials(username);\n\n            const conditionalClasses = computed(() => ({\n                [`b-avatar-image--${BentoAvatarImageVariant.SMALL}`]: props.variant === BentoAvatarImageVariant.SMALL,\n                [`b-avatar-image--${props.color}`]: props.color,\n            }));\n\n            return {\n                // Values\n                conditionalClasses,\n                initials,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./avatar-image.scss\" />\n"],"names":["useInitials","username","computedUsername","ref","computed","BentoAvatarImageVariant","BentoAvatarImageVariant2","BentoAvatarImageColor","BentoAvatarImageColor2","_sfc_main","defineComponent","BentoTypography","value","props","toRefs","initials","openBlock","createElementBlock","normalizeClass","_ctx","_hoisted_1","_hoisted_2","createVNode","_component_bento_typography"],"mappings":";;;;AAUa,MAAAA,IAAA,CAAAC,MAAA;AACT,QAAAC,IAAAC,EAAAF,CAAA;AACA,SAAAG,EAAA,MAAAF,EAAA,QAAAA,EAAA,MAAA,KAAA,EAAA,OAAA,CAAA,EAAA,YAAA,IAAA,IAAA;AACJ;ACbY,IAAAG,IAAA,kBAAAC,OACRA,EAAA,QAAA,SACAA,EAAA,QAAA,SAFQA,IAAAD,KAAA,CAAA,CAAA,GAKAE,IAAA,kBAAAC,OACRA,EAAA,OAAA,QACAA,EAAA,QAAA,SACAA,EAAA,MAAA,OACAA,EAAA,SAAA,UAJQA,IAAAD,KAAA,CAAA,CAAA;ACYR,MAAAE,IAAAC,EAAA;AAAA,EAA+B,MAAA;AAAA,EACrB,YAAA,EAAA,iBAAAC,EAAA;AAAA,EACwB,OAAA;AAAA;AAAA;AAAA;AAAA,IACvB,KAAA;AAAA,MAIE,MAAA;AAAA,MACK,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACb,UAAA;AAAA,MAQU,MAAA;AAAA,MACA,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA;AAAA,IACb,SAAA;AAAA,MAKS,MAAA;AAAA,MACC,SAAAN,EAAA;AAAA,MAC2B,WAAA,CAAAO,MAAA,OAAA,OAAAP,CAAA,EAAA,SAAAO,CAAA;AAAA,IACmE;AAAA;AAAA;AAAA;AAAA,IACxG,OAAA;AAAA,MAIO,MAAA;AAAA,MACG,SAAAL,EAAA;AAAA,MACyB,WAAA,CAAAK,MAAA,OAAA,OAAAL,CAAA,EAAA,SAAAK,CAAA;AAAA,IACiE;AAAA,EACpG;AAAA,EACJ,MAAAC,GAAA;AAEI,UAAA,EAAA,UAAAZ,EAAA,IAAAa,EAAAD,CAAA,GACAE,IAAAf,EAAAC,CAAA;AAOA,WAAA;AAAA;AAAA,MAAO,oBALPG,EAAA,OAAA;AAAA,QAA2C,CAAA,mBAAAC,EAAA,OAAA,GAAAQ,EAAA,YAAAR,EAAA;AAAA,QACyD,CAAA,mBAAAQ,EAAA,OAAA,GAAAA,EAAA;AAAA,MACtD,EAAA;AAAA,MAK1C,UAAAE;AAAA,IACA;AAAA,EACJ;AAER,CAAA;;EArEsB,KAAA;AAAA,EAA0B,OAAA;AAAA;;;;AAFQ,SAAAC,EAAA,GAAAC,EAAA,OAAA;AAAA,IAAkB,OAAAC,EAAA,CAAA,kBAAAC,EAAA,kBAAA,CAAA;AAAA,IAAqB,eAAA;AAAA,IAC7E,eAAA;AAAA,EAAA,GAAA;AAAA;MAAW,KAAA;AAAA,MAAO,KAAAA,EAAA;AAAA,MAA6B,OAAA;AAAA,MAAkB,KAAA;AAAA,MAC/E,eAAA;AAAA,IAAA,GAAA,MAAA,GAAAC,CAAA,MAAAJ,EAAA,GAAAC,EAAA,OAAAI,GAAA;AAAA,MAC+BC,EAAAC,GAAA;AAAA,QAAe,IAAA;AAAA,QAAC,SAAA;AAAA;;;;;;;;;;;"}

package/dist/chunks/index.b043371e.js

@@ -0,0 +1,150 @@
+import { defineComponent as b, provide as L, toRef as E, openBlock as o, createElementBlock as y, renderSlot as f, inject as d, ref as D, computed as i, resolveComponent as e, resolveDirective as N, normalizeClass as $, createElementVNode as p, normalizeStyle as k, createVNode as _, withCtx as u, createTextVNode as V, toDisplayString as W, createBlock as c, createCommentVNode as a, withDirectives as U } from "vue";
+import { _ as h } from "./_plugin-vue_export-helper.dad06003.js";
+import { a as O } from "./button.82ed953e.js";
+import { BentoInfoIcon as R } from "../info-icon.js";
+import { B as A, a as m } from "./index.75f3672e.js";
+import { C as j } from "./copy.28bd4298.js";
+import { S as w } from "./search.d18f9657.js";
+import { b as Y } from "./tooltip.054d2eb6.js";
+import "../assets/index20.css";
+const z = Symbol("structured list condensed style injection key"), v = Symbol("structured list labels width injection key"), F = { class: "b-structured-list" }, H = {}, J = /* @__PURE__ */ b({
+  ...H,
+  __name: "structured-list",
+  props: {
+    /**
+     * Width of the labels container, in pixels. Default is 180 (px).
+     */
+    labelsWidth: {
+      type: Number,
+      default: 180
+    }
+  },
+  setup(t) {
+    return L(v, E(t, "labelsWidth")), (s, r) => (o(), y("dl", F, [
+      f(s.$slots, "default", {}, void 0, !0)
+    ]));
+  }
+});
+const rt = /* @__PURE__ */ h(J, [["__scopeId", "data-v-b5e06de0"]]), K = {
+  "en-US": {
+    search: "Search"
+  }
+}, q = 180, P = b({
+  i18n: { messages: K },
+  name: "bento-structured-list-item",
+  components: {
+    BentoButton: O,
+    BentoInfoIcon: R,
+    BentoTypography: A,
+    Copy: j,
+    SearchIcon: w
+  },
+  directives: { BentoTooltipDirective: Y },
+  props: {
+    /**
+     * Label to display for the value
+     */
+    label: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Text to display in info icon tooltip in the label to display for the value
+     */
+    labelInfo: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Text to copy when the user clicks `Copy` icon
+     */
+    copy: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Function to trigger when user clicks `Search` icon
+     */
+    search: {
+      type: Function,
+      default: void 0
+    },
+    /**
+     * Text to display when the user hovers over `Search` icon
+     */
+    searchTooltip: {
+      type: String,
+      default: void 0
+    }
+  },
+  setup() {
+    const t = d(z, !1), n = d(
+      v,
+      D(q)
+    ), s = i(() => t ? 130 : n.value), r = i(() => ({
+      "b-structured-list-item--condensed": t
+    })), l = i(
+      () => t ? m.CAPTION : m.BODY
+    );
+    return {
+      // Values
+      conditionalClasses: r,
+      labelTypographyVariant: l,
+      computedLabelsWidth: s
+    };
+  }
+});
+const G = { class: "b-structured-list-item__value" };
+function M(t, n, s, r, l, Q) {
+  const S = e("bento-typography"), T = e("bento-info-icon"), I = e("copy"), C = e("search-icon"), g = e("bento-button"), B = N("bento-tooltip-directive");
+  return o(), y("div", {
+    class: $(["b-structured-list-item", t.conditionalClasses])
+  }, [
+    p("dt", {
+      class: "b-structured-list-item__label",
+      style: k(`flex-basis:${t.computedLabelsWidth}px`)
+    }, [
+      _(S, { variant: t.labelTypographyVariant }, {
+        default: u(() => [
+          V(W(t.label), 1)
+        ]),
+        _: 1
+      }, 8, ["variant"]),
+      t.labelInfo ? (o(), c(T, {
+        key: 0,
+        class: "b-structured-list-item__icon",
+        "tooltip-text": t.labelInfo
+      }, null, 8, ["tooltip-text"])) : a("", !0)
+    ], 4),
+    p("dd", G, [
+      f(t.$slots, "default", {}, void 0, !0),
+      t.copy ? (o(), c(I, {
+        key: 0,
+        class: "b-structured-list-item__icon",
+        text: t.copy
+      }, null, 8, ["text"])) : a("", !0),
+      t.search ? U((o(), c(g, {
+        key: 1,
+        class: "b-structured-list-item__icon",
+        variant: "tertiary",
+        onClick: t.search
+      }, {
+        iconLeft: u(() => [
+          _(C, {
+            "svg-title": t.$t("search")
+          }, null, 8, ["svg-title"])
+        ]),
+        _: 1
+      }, 8, ["onClick"])), [
+        [B, t.searchTooltip ? t.searchTooltip : t.$t("search"), "top"]
+      ]) : a("", !0)
+    ])
+  ], 2);
+}
+const it = /* @__PURE__ */ h(P, [["render", M], ["__scopeId", "data-v-b3118764"]]);
+export {
+  rt as B,
+  z as S,
+  it as a
+};
+//# sourceMappingURL=index.b043371e.js.map