npm - @adyen/bento-vue2 - Versions diffs - 2.0.1 → 2.1.0 - Mend

@adyen/bento-vue2 2.0.1 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (320) hide show

package/dist/chunks/{progress-bar.RlF3a0Gb.js → progress-bar.CaurNYsc.js} RENAMED Viewed

@@ -1,10 +1,10 @@
 import { defineComponent as w, useSlots as S, computed as t, ref as _, watch as x } from "vue";
-import { B as T } from "./typography.D1OZJbEa.js";
+import { B as T } from "./typography.Cd386LC_.js";
 import { u as E } from "./use-has-slot.C9lQZ6nz.js";
 import { g as p } from "./generate-uid.DBWe4g6T.js";
 import { u as F } from "./index.CPOlyau9.js";
-import { F as P } from "./field-label.C7BCsofY.js";
-import { E as V } from "./error-message.DKnoUezI.js";
+import { F as P } from "./field-label.BQaDr37D.js";
+import { E as V } from "./error-message.B-n8wzFo.js";
 import { n as $ } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/progress-bar.css";
 const z = {
@@ -98,4 +98,4 @@ const X = N.exports;
 export {
   X as p
 };
-//# sourceMappingURL=progress-bar.RlF3a0Gb.js.map
+//# sourceMappingURL=progress-bar.CaurNYsc.js.map

package/dist/chunks/{progress-bar.RlF3a0Gb.js.map → progress-bar.CaurNYsc.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"progress-bar.RlF3a0Gb.js","sources":["../../src/components/progress-bar/progress-bar.vue"],"sourcesContent":["<template>\n <div class=\"b-progress-bar\" :class=\"conditionalClasses\">\n <div class=\"b-progress-bar__header\">\n <field-label\n v-if=\"label\"\n :id=\"labelId\"\n class=\"b-progress-bar__label\"\n :label=\"label\"\n :tooltip-text=\"tooltipText\"\n />\n\n <div v-if=\"shouldShowValue\" class=\"b-progress-bar__value\">\n <slot name=\"value\">\n <bento-typography el=\"span\" stronger>{{ valueText }}</bento-typography>\n </slot>\n </div>\n </div>\n\n <div class=\"b-progress-bar__track\" :class=\"conditionalTrackClasses\" role=\"progressbar\" v-bind=\"trackA11yAttrs\">\n <div\n class=\"b-progress-bar__track-indicator\"\n :class=\"conditionalIndicatorClasses\"\n :style=\"indicatorStyle\"\n @animationend=\"onIndicatorAnimationEnd\"\n ></div>\n </div>\n\n <error-message\n v-if=\"!!errorMessage\"\n :id=\"errorId\"\n :error-message=\"errorMessage\"\n class=\"b-progress-bar__error-message\"\n />\n\n <bento-typography\n v-if=\"description\"\n :id=\"descriptionId\"\n el=\"span\"\n class=\"b-progress-bar__description\"\n :class=\"conditionalDescriptionClasses\"\n >\n {{ description }}\n </bento-typography>\n\n <div class=\"b-progress-bar__announcement\" role=\"status\" aria-live=\"polite\">\n {{ completionMessage }}\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, ref, useSlots, watch } from 'vue';\n import { BentoTypography } from '@/components/typography';\n import { ErrorMessage, FieldLabel } from '@/internal';\n import { useHasSlot } from '@/composables';\n import { generateUid } from '@/utils/ts/generate-uid';\n import { useI18n } from '@/utils/ts/i18n';\n import { type BentoProgressBarProps } from './progress-bar.types';\n import messages from './messages.json';\n\n type MessageSchema = (typeof messages)['en-US'];\n\n const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n const props = defineProps({\n staticAnimation: { type: Boolean, default: true },\n completionAnnouncement: { default: undefined },\n description: { default: undefined },\n direction: { default: 'default' },\n errorMessage: { default: undefined },\n height: { default: 'default' },\n shimmer: { type: Boolean, default: true },\n stopIndicator: { type: Boolean, default: true },\n successFlash: { type: Boolean, default: true },\n valueVisible: { type: Boolean, default: true },\n label: { default: undefined },\n tooltipText: { default: undefined },\n type: { default: 'default' },\n value: { default: undefined },\n variant: { default: 'determinate' }\n});\n\n const slots = useSlots();\n const hasSlot = useHasSlot(slots);\n\n const labelId = generateUid('progress-bar-label');\n const descriptionId = generateUid('progress-bar-description');\n const errorId = generateUid('progress-bar-error');\n\n // Value\n const clampedValue = computed(() => {\n if (props.value === undefined) {\n return 0;\n }\n return Math.min(Math.max(props.value, 0), 100);\n });\n\n const valueText = computed(() => `${clampedValue.value}%`);\n\n // Success flash, triggered once when the value crosses into 100\n const isSuccessFlashing = ref(false);\n\n // Screen readers do not reliably announce progressbar value changes, so completion is announced\n // through a polite live region when the value crosses into 100.\n const completionMessage = ref('');\n\n watch(clampedValue, (value, previousValue) => {\n if (props.variant !== 'determinate' \|\| previousValue >= 100 \|\| value < 100) {\n return;\n }\n\n if (props.successFlash) {\n isSuccessFlashing.value = true;\n }\n\n completionMessage.value = props.completionAnnouncement ?? t('progressComplete');\n });\n\n // Variant state\n const effectiveVariant = computed(() => {\n if (props.valueVisible && props.value === undefined && !hasSlot('value')) {\n return 'indeterminate';\n }\n\n return props.variant;\n });\n\n const isIndeterminate = computed(() => effectiveVariant.value === 'indeterminate');\n\n // Display flags\n const shouldShowValue = computed(\n () => props.valueVisible && !isIndeterminate.value && (hasSlot('value') \|\| props.value !== undefined)\n );\n\n const shouldShowError = computed(() => !!props.errorMessage);\n\n // Indicator styling\n const indicatorStyle = computed(() => {\n if (isIndeterminate.value) {\n return undefined;\n }\n\n const width = props.direction === 'default' ? `${clampedValue.value}%` : `${100 - clampedValue.value}%`;\n\n return { width };\n });\n\n // Accessibility\n const trackA11yAttrs = computed(() => {\n const describedBy =\n [props.description ? descriptionId : null, props.errorMessage ? errorId : null].filter(Boolean).join(' ') \|\|\n undefined;\n\n return {\n 'aria-labelledby': props.label ? labelId : undefined,\n 'aria-describedby': describedBy,\n 'aria-busy': isIndeterminate.value \|\| undefined,\n 'aria-valuemin': isIndeterminate.value ? undefined : 0,\n 'aria-valuemax': isIndeterminate.value ? undefined : 100,\n 'aria-valuenow': isIndeterminate.value ? undefined : clampedValue.value,\n };\n });\n\n // Conditional classes\n const conditionalClasses = computed(() => ({\n [`b-progress-bar--${props.height}`]: props.height !== 'default',\n [`b-progress-bar--${props.type}`]: props.type !== 'default',\n 'b-progress-bar--error': shouldShowError.value,\n }));\n\n const conditionalTrackClasses = computed(() => ({\n 'b-progress-bar__track--reverse': props.direction === 'reverse',\n 'b-progress-bar__track--with-stop-indicator': props.stopIndicator && effectiveVariant.value === 'determinate',\n 'b-progress-bar__track--with-success-flash':\n isSuccessFlashing.value && effectiveVariant.value === 'determinate',\n }));\n\n const conditionalIndicatorClasses = computed(() => ({\n 'b-progress-bar__track-indicator--indeterminate': isIndeterminate.value,\n 'b-progress-bar__track-indicator--static': effectiveVariant.value === 'static',\n 'b-progress-bar__track-indicator--static-animated':\n props.staticAnimation && effectiveVariant.value === 'static',\n 'b-progress-bar__track-indicator--with-shimmer':\n props.shimmer && !props.errorMessage && effectiveVariant.value === 'determinate',\n 'b-progress-bar__track-indicator--with-success-flash':\n isSuccessFlashing.value && effectiveVariant.value === 'determinate',\n [`b-progress-bar__track-indicator--${props.type}`]: props.type !== 'default',\n 'b-progress-bar__track-indicator--error': shouldShowError.value,\n }));\n\n const conditionalDescriptionClasses = computed(() => ({\n 'b-progress-bar__description--error': !!props.errorMessage,\n }));\n\n const onIndicatorAnimationEnd = (event: AnimationEvent) => {\n if (event.animationName?.includes('success-flash')) {\n isSuccessFlashing.value = false;\n }\n };\n</script>\n\n<script lang=\"ts\">\n /*\n A progress bar communicates the completion status of a task or process.\n \n @usage\n * import { BentoProgressBar } from '@adyen/bento-vue2';\n \n export default {\n * components: { BentoProgressBar },\n * template: `\n * <bento-progress-bar :value=\"40\" label=\"Uploading files\" />\n * `\n * };\n */\n export default {\n name: 'bento-progress-bar',\n i18n: { messages },\n };\n</script>\n\n<style lang=\"scss\" scoped src=\"./progress-bar.scss\" />\n"],"names":["__default__","messages","t","useI18n","slots","useSlots","hasSlot","useHasSlot","labelId","generateUid","descriptionId","errorId","clampedValue","computed","props","valueText","isSuccessFlashing","ref","completionMessage","watch","value","previousValue","effectiveVariant","isIndeterminate","shouldShowValue","shouldShowError","indicatorStyle","trackA11yAttrs","describedBy","conditionalClasses","conditionalTrackClasses","conditionalIndicatorClasses","conditionalDescriptionClasses","event"],"mappings":"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"}
1	+ {"version":3,"file":"progress-bar.CaurNYsc.js","sources":["../../src/components/progress-bar/progress-bar.vue"],"sourcesContent":["<template>\n <div class=\"b-progress-bar\" :class=\"conditionalClasses\">\n <div class=\"b-progress-bar__header\">\n <field-label\n v-if=\"label\"\n :id=\"labelId\"\n class=\"b-progress-bar__label\"\n :label=\"label\"\n :tooltip-text=\"tooltipText\"\n />\n\n <div v-if=\"shouldShowValue\" class=\"b-progress-bar__value\">\n <slot name=\"value\">\n <bento-typography el=\"span\" stronger>{{ valueText }}</bento-typography>\n </slot>\n </div>\n </div>\n\n <div class=\"b-progress-bar__track\" :class=\"conditionalTrackClasses\" role=\"progressbar\" v-bind=\"trackA11yAttrs\">\n <div\n class=\"b-progress-bar__track-indicator\"\n :class=\"conditionalIndicatorClasses\"\n :style=\"indicatorStyle\"\n @animationend=\"onIndicatorAnimationEnd\"\n ></div>\n </div>\n\n <error-message\n v-if=\"!!errorMessage\"\n :id=\"errorId\"\n :error-message=\"errorMessage\"\n class=\"b-progress-bar__error-message\"\n />\n\n <bento-typography\n v-if=\"description\"\n :id=\"descriptionId\"\n el=\"span\"\n class=\"b-progress-bar__description\"\n :class=\"conditionalDescriptionClasses\"\n >\n {{ description }}\n </bento-typography>\n\n <div class=\"b-progress-bar__announcement\" role=\"status\" aria-live=\"polite\">\n {{ completionMessage }}\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, ref, useSlots, watch } from 'vue';\n import { BentoTypography } from '@/components/typography';\n import { ErrorMessage, FieldLabel } from '@/internal';\n import { useHasSlot } from '@/composables';\n import { generateUid } from '@/utils/ts/generate-uid';\n import { useI18n } from '@/utils/ts/i18n';\n import { type BentoProgressBarProps } from './progress-bar.types';\n import messages from './messages.json';\n\n type MessageSchema = (typeof messages)['en-US'];\n\n const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n const props = defineProps({\n staticAnimation: { type: Boolean, default: true },\n completionAnnouncement: { default: undefined },\n description: { default: undefined },\n direction: { default: 'default' },\n errorMessage: { default: undefined },\n height: { default: 'default' },\n shimmer: { type: Boolean, default: true },\n stopIndicator: { type: Boolean, default: true },\n successFlash: { type: Boolean, default: true },\n valueVisible: { type: Boolean, default: true },\n label: { default: undefined },\n tooltipText: { default: undefined },\n type: { default: 'default' },\n value: { default: undefined },\n variant: { default: 'determinate' }\n});\n\n const slots = useSlots();\n const hasSlot = useHasSlot(slots);\n\n const labelId = generateUid('progress-bar-label');\n const descriptionId = generateUid('progress-bar-description');\n const errorId = generateUid('progress-bar-error');\n\n // Value\n const clampedValue = computed(() => {\n if (props.value === undefined) {\n return 0;\n }\n return Math.min(Math.max(props.value, 0), 100);\n });\n\n const valueText = computed(() => `${clampedValue.value}%`);\n\n // Success flash, triggered once when the value crosses into 100\n const isSuccessFlashing = ref(false);\n\n // Screen readers do not reliably announce progressbar value changes, so completion is announced\n // through a polite live region when the value crosses into 100.\n const completionMessage = ref('');\n\n watch(clampedValue, (value, previousValue) => {\n if (props.variant !== 'determinate' \|\| previousValue >= 100 \|\| value < 100) {\n return;\n }\n\n if (props.successFlash) {\n isSuccessFlashing.value = true;\n }\n\n completionMessage.value = props.completionAnnouncement ?? t('progressComplete');\n });\n\n // Variant state\n const effectiveVariant = computed(() => {\n if (props.valueVisible && props.value === undefined && !hasSlot('value')) {\n return 'indeterminate';\n }\n\n return props.variant;\n });\n\n const isIndeterminate = computed(() => effectiveVariant.value === 'indeterminate');\n\n // Display flags\n const shouldShowValue = computed(\n () => props.valueVisible && !isIndeterminate.value && (hasSlot('value') \|\| props.value !== undefined)\n );\n\n const shouldShowError = computed(() => !!props.errorMessage);\n\n // Indicator styling\n const indicatorStyle = computed(() => {\n if (isIndeterminate.value) {\n return undefined;\n }\n\n const width = props.direction === 'default' ? `${clampedValue.value}%` : `${100 - clampedValue.value}%`;\n\n return { width };\n });\n\n // Accessibility\n const trackA11yAttrs = computed(() => {\n const describedBy =\n [props.description ? descriptionId : null, props.errorMessage ? errorId : null].filter(Boolean).join(' ') \|\|\n undefined;\n\n return {\n 'aria-labelledby': props.label ? labelId : undefined,\n 'aria-describedby': describedBy,\n 'aria-busy': isIndeterminate.value \|\| undefined,\n 'aria-valuemin': isIndeterminate.value ? undefined : 0,\n 'aria-valuemax': isIndeterminate.value ? undefined : 100,\n 'aria-valuenow': isIndeterminate.value ? undefined : clampedValue.value,\n };\n });\n\n // Conditional classes\n const conditionalClasses = computed(() => ({\n [`b-progress-bar--${props.height}`]: props.height !== 'default',\n [`b-progress-bar--${props.type}`]: props.type !== 'default',\n 'b-progress-bar--error': shouldShowError.value,\n }));\n\n const conditionalTrackClasses = computed(() => ({\n 'b-progress-bar__track--reverse': props.direction === 'reverse',\n 'b-progress-bar__track--with-stop-indicator': props.stopIndicator && effectiveVariant.value === 'determinate',\n 'b-progress-bar__track--with-success-flash':\n isSuccessFlashing.value && effectiveVariant.value === 'determinate',\n }));\n\n const conditionalIndicatorClasses = computed(() => ({\n 'b-progress-bar__track-indicator--indeterminate': isIndeterminate.value,\n 'b-progress-bar__track-indicator--static': effectiveVariant.value === 'static',\n 'b-progress-bar__track-indicator--static-animated':\n props.staticAnimation && effectiveVariant.value === 'static',\n 'b-progress-bar__track-indicator--with-shimmer':\n props.shimmer && !props.errorMessage && effectiveVariant.value === 'determinate',\n 'b-progress-bar__track-indicator--with-success-flash':\n isSuccessFlashing.value && effectiveVariant.value === 'determinate',\n [`b-progress-bar__track-indicator--${props.type}`]: props.type !== 'default',\n 'b-progress-bar__track-indicator--error': shouldShowError.value,\n }));\n\n const conditionalDescriptionClasses = computed(() => ({\n 'b-progress-bar__description--error': !!props.errorMessage,\n }));\n\n const onIndicatorAnimationEnd = (event: AnimationEvent) => {\n if (event.animationName?.includes('success-flash')) {\n isSuccessFlashing.value = false;\n }\n };\n</script>\n\n<script lang=\"ts\">\n /*\n A progress bar communicates the completion status of a task or process.\n \n @usage\n * import { BentoProgressBar } from '@adyen/bento-vue2';\n \n export default {\n * components: { BentoProgressBar },\n * template: `\n * <bento-progress-bar :value=\"40\" label=\"Uploading files\" />\n * `\n * };\n */\n export default {\n name: 'bento-progress-bar',\n i18n: { messages },\n };\n</script>\n\n<style lang=\"scss\" scoped src=\"./progress-bar.scss\" />\n"],"names":["__default__","messages","t","useI18n","slots","useSlots","hasSlot","useHasSlot","labelId","generateUid","descriptionId","errorId","clampedValue","computed","props","valueText","isSuccessFlashing","ref","completionMessage","watch","value","previousValue","effectiveVariant","isIndeterminate","shouldShowValue","shouldShowError","indicatorStyle","trackA11yAttrs","describedBy","conditionalClasses","conditionalTrackClasses","conditionalIndicatorClasses","conditionalDescriptionClasses","event"],"mappings":"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"}

package/dist/chunks/{promo-banner.B5szTysj.js → promo-banner.CcYpFY9b.js} RENAMED Viewed

@@ -1,8 +1,8 @@
 import { defineComponent as v, ref as B, computed as o } from "vue";
 import { h as y } from "./index.CL3TXc0a.js";
-import { B as R } from "./button.DII5Ifwa.js";
+import { B as R } from "./button.tsTeQRcP.js";
 import { a as l, b as I, B as T } from "./image.C2D2hKat.js";
-import { B as C } from "./typography.D1OZJbEa.js";
+import { B as C } from "./typography.Cd386LC_.js";
 import { u as b } from "./index.CPOlyau9.js";
 import { g as h } from "./generate-uid.DBWe4g6T.js";
 import { n as O } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
@@ -69,4 +69,4 @@ export {
   c as a,
   V as p
 };
-//# sourceMappingURL=promo-banner.B5szTysj.js.map
+//# sourceMappingURL=promo-banner.CcYpFY9b.js.map

package/dist/chunks/{promo-banner.B5szTysj.js.map → promo-banner.CcYpFY9b.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"promo-banner.B5szTysj.js","sources":["../../src/components/promo-banner/promo-banner.types.ts","../../src/components/promo-banner/promo-banner.vue"],"sourcesContent":["import { type BentoButtonActionObject } from '@/components/button';\nimport { type BentoButtonVariant } from '../button';\nimport { type BentoImageAspectRatio, type BentoImageProps } from '../image';\n\nexport interface BentoPromoBannerProps {\n /*\n List of actions that will be used to render the buttons.\n \n Each object in the list should have a `title`, an `event` and a `variant`.\n \n `title`: Button's text.\n * `event`: Event triggered when clicking the Button.\n * `variant`: Button's style.\n \n ```\n * [{\n * title: 'Primary',\n * event: () => { ... },\n * variant: 'primary'\n * }, {\n * title: 'Secondary',\n * event: () => { ... }\n * variant: 'secondary'\n * }]\n * ```\n /\n actions?: Array<BentoPromoBannerAction>;\n\n /\n Defines the color of banner's background\n /\n color?: `${BentoPromoBannerColor}`;\n\n /\n Defines whether the banner has a `Dismiss` button\n /\n isDismissible?: boolean;\n\n /\n Defines whether the banner has a `Dismiss` button\n /\n dismissButtonText?: string;\n\n /\n Defines the image used in the banner.\n \n The promotional banner adapts to different container sizes based on the image's `aspect-ratio`.\n * Only the following `aspect-ratio` values are supported: `16:9`, `2:1`, and `1:1`.\n \n In Storybook, to verify the image display, update `image.src` and `image.aspectRatio` as follows:\n * - `./1-1.png` with an aspect ratio of `1:1`\n * - `./2-1.png` with an aspect ratio of `2:1`\n * - `./16-9.png` with an aspect ratio of `16:9`\n /\n image: BentoPromoBannerImage;\n\n /\n Defines style of the banner.\n \n The horizontal layout is responsive to the container size and\n * changes depending on the image aspect ratio.\n \n The vertical layout remains the same regardless of container size.\n /\n layout?: `${BentoPromoBannerLayout}`;\n\n /\n Defines the title text to be shown on the banner\n /\n title: string;\n}\n\nexport type BentoPromoBannerImageAspectRatio = `${\n \| BentoImageAspectRatio.P16_9\n \| BentoImageAspectRatio.P2_1\n \| BentoImageAspectRatio.P1_1}`;\n\nexport type BentoPromoBannerButtonVariant = `${BentoButtonVariant.PRIMARY \| BentoButtonVariant.SECONDARY}`;\n\n/\n @deprecated Since v2.0.0. Use `BentoPromoBannerAction` without the generic instead.\n /\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport type BentoPromoBannerAction<IconType = object> = BentoButtonActionObject & {\n variant: BentoPromoBannerButtonVariant;\n};\n\nexport interface BentoPromoBannerImage {\n src: BentoImageProps['src'];\n alt?: BentoImageProps['alt'];\n aspectRatio: BentoPromoBannerImageAspectRatio;\n}\n\nexport enum BentoPromoBannerColor {\n BLUE = 'blue',\n GREY = 'grey',\n GREEN = 'green',\n}\n\nexport enum BentoPromoBannerLayout {\n HORIZONTAL = 'horizontal',\n VERTICAL = 'vertical',\n}\n","<template>\n <section\n ref=\"promoBannerRef\"\n class=\"b-promo-banner\"\n :class=\"bannerConditionalClass\"\n :aria-labelledby=\"promoBannerTitleId\"\n >\n <div class=\"b-promo-banner__content\">\n <div class=\"b-promo-banner__content-header\">\n <bento-typography :id=\"promoBannerTitleId\" variant=\"title\" large>\n {{ title }}\n </bento-typography>\n\n <slot name=\"description\" />\n </div>\n\n <div class=\"b-promo-banner__content-actions\">\n <template v-if=\"actions\">\n <bento-button\n v-for=\"(button, index) in actions\"\n :key=\"index\"\n :variant=\"button.variant\"\n :critical=\"button.critical\"\n :disabled=\"button.disabled\"\n :inverse=\"button.inverse\"\n :icon-only=\"button.iconOnly\"\n :link=\"button.link\"\n @click=\"button.event\"\n >\n <template v-if=\"button.icon \|\| button.iconLeft\" #iconLeft>\n <component :is=\"button.icon \|\| button.iconLeft\" :svg-title=\"button.title\"></component>\n </template>\n\n <template v-if=\"!isIconOnly(button)\" #default>\n {{ button.title }}\n </template>\n\n <template v-if=\"button.iconRight\" #iconRight>\n <component :is=\"button.iconRight\" :svg-title=\"button.title\"></component>\n </template>\n </bento-button>\n </template>\n\n <bento-button v-if=\"isDismissible\" variant=\"secondary\" @click=\"emit('dismiss')\">\n {{ computedDismissButtonText }}\n </bento-button>\n </div>\n </div>\n\n <div class=\"b-promo-banner__image\">\n <bento-image\n class=\"b-promo-banner__image-item\"\n :src=\"image.src\"\n :alt=\"image.alt ?? ''\"\n :aspect-ratio=\"image.aspectRatio\"\n :object-fit=\"BentoImageObjectFit.CONTAIN\"\n ></bento-image>\n </div>\n </section>\n</template>\n\n<script setup lang=\"ts\">\n import { useElementSize } from '@vueuse/core';\n import { computed, ref } from 'vue';\n\n // Components\n import { BentoButton, type BentoButtonActionObject } from '@/components/button';\n import { BentoImage, BentoImageAspectRatio, BentoImageObjectFit } from '@/components/image';\n import { BentoTypography } from '@/components/typography';\n import { BentoPromoBannerColor, BentoPromoBannerLayout, type BentoPromoBannerProps } from './promo-banner.types';\n\n // Utils\n import { useI18n } from '@/utils/ts/i18n';\n\n import { generateUid } from '@/utils/ts/generate-uid';\n import messages from './messages.json';\n\n type MessageSchema = (typeof messages)['en-US'];\n\n const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n const props = defineProps({\n actions: { default: null },\n color: { default: BentoPromoBannerColor.GREY },\n isDismissible: { type: Boolean, default: true },\n dismissButtonText: { default: null },\n image: null,\n layout: { default: BentoPromoBannerLayout.HORIZONTAL },\n title: null\n});\n\n const emit = defineEmits([\"dismiss\"]);\n\n const promoBannerRef = ref(null);\n const promoBannerSize = useElementSize(promoBannerRef);\n const promoBannerTitleId = generateUid('promoBannerTitle');\n\n const horizontalLayoutBreakpoint = computed(() => {\n if (props.image.aspectRatio === BentoImageAspectRatio.P16_9) {\n return 800;\n } else if (props.image.aspectRatio === BentoImageAspectRatio.P2_1) {\n return 850;\n } else if (props.image.aspectRatio === BentoImageAspectRatio.P1_1) {\n return 623;\n }\n\n return 0;\n });\n\n const bannerLayoutClass = computed(() => {\n // only horizontal layout is responsive and, by design, follows the container size\n if (\n props.layout === BentoPromoBannerLayout.HORIZONTAL &&\n promoBannerSize.width.value <= horizontalLayoutBreakpoint.value\n ) {\n return BentoPromoBannerLayout.VERTICAL;\n }\n\n return props.layout;\n });\n\n const bannerConditionalClass = computed(() =>\n [`b-promo-banner--${bannerLayoutClass.value}`, `b-promo-banner--${props.color}`].join(' ')\n );\n\n const isIconOnly = (button: BentoButtonActionObject) =>\n button.iconOnly && (button.iconLeft \|\| button.iconRight \|\| button.icon);\n\n const computedDismissButtonText = computed(() => props.dismissButtonText \|\| t('dismiss'));\n</script>\n\n<script lang=\"ts\">\n /\n Promotional Banner highlights important information, announcements, or promotions.\n \n @example\n * import { BentoPromoBanner } from '@adyen/bento-vue2';\n \n export default {\n * components: { BentoPromoBanner },\n * template: `\n * <bento-promo-banner\n * title=\"Title\"\n * description=\"Brief description explaining and giving more information about the title\"\n * :image=\"{ src: '16-1.png', aspectRatio: '16:9' }\"\n * :actions=\"[{ title: 'Primary', event: () => {} }]\"\n * >\n * </bento-promo-banner>\n * `\n * };\n */\n export default {\n i18n: { messages },\n name: 'bento-promo-banner',\n };\n</script>\n\n<style lang=\"scss\" scoped src=\"./promo-banner.scss\" />\n"],"names":["BentoPromoBannerColor","BentoPromoBannerColor2","BentoPromoBannerLayout","BentoPromoBannerLayout2","__default__","messages","t","useI18n","promoBannerRef","ref","promoBannerSize","useElementSize","promoBannerTitleId","generateUid","horizontalLayoutBreakpoint","computed","props","BentoImageAspectRatio","bannerLayoutClass","bannerConditionalClass","isIconOnly","button","computedDismissButtonText"],"mappings":";;;;;;;;;AA6FO,IAAAA,IAAA,kBAAAC,OACHA,EAAA,OAAA,QACAA,EAAA,OAAA,QACAA,EAAA,QAAA,SAHQA,IAAAD,KAAA,CAAA,CAAA,GAMLE,IAAA,kBAAAC,OACHA,EAAA,aAAA,cACAA,EAAA,WAAA,YAFQA,IAAAD,KAAA,CAAA,CAAA;;;;;;;;;;;;;GCoDRE,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;;;;;;iBA3EA,EAAA,GAAAC,EAAA,IAAAC,EAAA,GAcAC,IAAAC,EAAA,IAAA,GACAC,IAAAC,EAAAH,CAAA,GACAI,IAAAC,EAAA,kBAAA,GAEAC,IAAAC,EAAA,MACIC,EAAA,MAAA,gBAAAC,EAAA,QACI,MAAOD,EAAA,MAAA,gBAAAC,EAAA,OAEP,MAAOD,EAAA,MAAA,gBAAAC,EAAA,OAEP,MAGJ,CAAO,GAGXC,IAAAH,EAAA,MAEIC,EAAA,WAAAd,EAAA,cAAAQ,EAAA,MAAA,SAAAI,EAAA,QAIIZ,EAAA,WAGJc,EAAA,MAAa,GAGjBG,IAAAJ;AAAA,MAA+B,MAAA,CAAA,mBAAAG,EAAA,KAAA,IAAA,mBAAAF,EAAA,KAAA,EAAA,EAAA,KAAA,GAAA;AAAA,IAC8D,GAG7FI,IAAA,CAAAC,MAAAA,EAAA,aAAAA,EAAA,YAAAA,EAAA,aAAAA,EAAA,OAGAC,IAAAP,EAAA,MAAAC,EAAA,qBAAAV,EAAA,SAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"promo-banner.CcYpFY9b.js","sources":["../../src/components/promo-banner/promo-banner.types.ts","../../src/components/promo-banner/promo-banner.vue"],"sourcesContent":["import { type BentoButtonActionObject } from '@/components/button';\nimport { type BentoButtonVariant } from '../button';\nimport { type BentoImageAspectRatio, type BentoImageProps } from '../image';\n\nexport interface BentoPromoBannerProps {\n /*\n List of actions that will be used to render the buttons.\n \n Each object in the list should have a `title`, an `event` and a `variant`.\n \n `title`: Button's text.\n * `event`: Event triggered when clicking the Button.\n * `variant`: Button's style.\n \n ```\n * [{\n * title: 'Primary',\n * event: () => { ... },\n * variant: 'primary'\n * }, {\n * title: 'Secondary',\n * event: () => { ... }\n * variant: 'secondary'\n * }]\n * ```\n /\n actions?: Array<BentoPromoBannerAction>;\n\n /\n Defines the color of banner's background\n /\n color?: `${BentoPromoBannerColor}`;\n\n /\n Defines whether the banner has a `Dismiss` button\n /\n isDismissible?: boolean;\n\n /\n Defines whether the banner has a `Dismiss` button\n /\n dismissButtonText?: string;\n\n /\n Defines the image used in the banner.\n \n The promotional banner adapts to different container sizes based on the image's `aspect-ratio`.\n * Only the following `aspect-ratio` values are supported: `16:9`, `2:1`, and `1:1`.\n \n In Storybook, to verify the image display, update `image.src` and `image.aspectRatio` as follows:\n * - `./1-1.png` with an aspect ratio of `1:1`\n * - `./2-1.png` with an aspect ratio of `2:1`\n * - `./16-9.png` with an aspect ratio of `16:9`\n /\n image: BentoPromoBannerImage;\n\n /\n Defines style of the banner.\n \n The horizontal layout is responsive to the container size and\n * changes depending on the image aspect ratio.\n \n The vertical layout remains the same regardless of container size.\n /\n layout?: `${BentoPromoBannerLayout}`;\n\n /\n Defines the title text to be shown on the banner\n /\n title: string;\n}\n\nexport type BentoPromoBannerImageAspectRatio = `${\n \| BentoImageAspectRatio.P16_9\n \| BentoImageAspectRatio.P2_1\n \| BentoImageAspectRatio.P1_1}`;\n\nexport type BentoPromoBannerButtonVariant = `${BentoButtonVariant.PRIMARY \| BentoButtonVariant.SECONDARY}`;\n\n/\n @deprecated Since v3.0.0. Use `BentoPromoBannerAction` without the generic instead.\n /\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport type BentoPromoBannerAction<IconType = object> = BentoButtonActionObject & {\n variant: BentoPromoBannerButtonVariant;\n};\n\nexport interface BentoPromoBannerImage {\n src: BentoImageProps['src'];\n alt?: BentoImageProps['alt'];\n aspectRatio: BentoPromoBannerImageAspectRatio;\n}\n\nexport enum BentoPromoBannerColor {\n BLUE = 'blue',\n GREY = 'grey',\n GREEN = 'green',\n}\n\nexport enum BentoPromoBannerLayout {\n HORIZONTAL = 'horizontal',\n VERTICAL = 'vertical',\n}\n","<template>\n <section\n ref=\"promoBannerRef\"\n class=\"b-promo-banner\"\n :class=\"bannerConditionalClass\"\n :aria-labelledby=\"promoBannerTitleId\"\n >\n <div class=\"b-promo-banner__content\">\n <div class=\"b-promo-banner__content-header\">\n <bento-typography :id=\"promoBannerTitleId\" variant=\"title\" large>\n {{ title }}\n </bento-typography>\n\n <slot name=\"description\" />\n </div>\n\n <div class=\"b-promo-banner__content-actions\">\n <template v-if=\"actions\">\n <bento-button\n v-for=\"(button, index) in actions\"\n :key=\"index\"\n :variant=\"button.variant\"\n :critical=\"button.critical\"\n :disabled=\"button.disabled\"\n :inverse=\"button.inverse\"\n :icon-only=\"button.iconOnly\"\n :link=\"button.link\"\n @click=\"button.event\"\n >\n <template v-if=\"button.icon \|\| button.iconLeft\" #iconLeft>\n <component :is=\"button.icon \|\| button.iconLeft\" :svg-title=\"button.title\"></component>\n </template>\n\n <template v-if=\"!isIconOnly(button)\" #default>\n {{ button.title }}\n </template>\n\n <template v-if=\"button.iconRight\" #iconRight>\n <component :is=\"button.iconRight\" :svg-title=\"button.title\"></component>\n </template>\n </bento-button>\n </template>\n\n <bento-button v-if=\"isDismissible\" variant=\"secondary\" @click=\"emit('dismiss')\">\n {{ computedDismissButtonText }}\n </bento-button>\n </div>\n </div>\n\n <div class=\"b-promo-banner__image\">\n <bento-image\n class=\"b-promo-banner__image-item\"\n :src=\"image.src\"\n :alt=\"image.alt ?? ''\"\n :aspect-ratio=\"image.aspectRatio\"\n :object-fit=\"BentoImageObjectFit.CONTAIN\"\n ></bento-image>\n </div>\n </section>\n</template>\n\n<script setup lang=\"ts\">\n import { useElementSize } from '@vueuse/core';\n import { computed, ref } from 'vue';\n\n // Components\n import { BentoButton, type BentoButtonActionObject } from '@/components/button';\n import { BentoImage, BentoImageAspectRatio, BentoImageObjectFit } from '@/components/image';\n import { BentoTypography } from '@/components/typography';\n import { BentoPromoBannerColor, BentoPromoBannerLayout, type BentoPromoBannerProps } from './promo-banner.types';\n\n // Utils\n import { useI18n } from '@/utils/ts/i18n';\n\n import { generateUid } from '@/utils/ts/generate-uid';\n import messages from './messages.json';\n\n type MessageSchema = (typeof messages)['en-US'];\n\n const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n const props = defineProps({\n actions: { default: null },\n color: { default: BentoPromoBannerColor.GREY },\n isDismissible: { type: Boolean, default: true },\n dismissButtonText: { default: null },\n image: null,\n layout: { default: BentoPromoBannerLayout.HORIZONTAL },\n title: null\n});\n\n const emit = defineEmits([\"dismiss\"]);\n\n const promoBannerRef = ref(null);\n const promoBannerSize = useElementSize(promoBannerRef);\n const promoBannerTitleId = generateUid('promoBannerTitle');\n\n const horizontalLayoutBreakpoint = computed(() => {\n if (props.image.aspectRatio === BentoImageAspectRatio.P16_9) {\n return 800;\n } else if (props.image.aspectRatio === BentoImageAspectRatio.P2_1) {\n return 850;\n } else if (props.image.aspectRatio === BentoImageAspectRatio.P1_1) {\n return 623;\n }\n\n return 0;\n });\n\n const bannerLayoutClass = computed(() => {\n // only horizontal layout is responsive and, by design, follows the container size\n if (\n props.layout === BentoPromoBannerLayout.HORIZONTAL &&\n promoBannerSize.width.value <= horizontalLayoutBreakpoint.value\n ) {\n return BentoPromoBannerLayout.VERTICAL;\n }\n\n return props.layout;\n });\n\n const bannerConditionalClass = computed(() =>\n [`b-promo-banner--${bannerLayoutClass.value}`, `b-promo-banner--${props.color}`].join(' ')\n );\n\n const isIconOnly = (button: BentoButtonActionObject) =>\n button.iconOnly && (button.iconLeft \|\| button.iconRight \|\| button.icon);\n\n const computedDismissButtonText = computed(() => props.dismissButtonText \|\| t('dismiss'));\n</script>\n\n<script lang=\"ts\">\n /\n Promotional Banner highlights important information, announcements, or promotions.\n \n @example\n * import { BentoPromoBanner } from '@adyen/bento-vue2';\n \n export default {\n * components: { BentoPromoBanner },\n * template: `\n * <bento-promo-banner\n * title=\"Title\"\n * description=\"Brief description explaining and giving more information about the title\"\n * :image=\"{ src: '16-1.png', aspectRatio: '16:9' }\"\n * :actions=\"[{ title: 'Primary', event: () => {} }]\"\n * >\n * </bento-promo-banner>\n * `\n * };\n */\n export default {\n i18n: { messages },\n name: 'bento-promo-banner',\n };\n</script>\n\n<style lang=\"scss\" scoped src=\"./promo-banner.scss\" />\n"],"names":["BentoPromoBannerColor","BentoPromoBannerColor2","BentoPromoBannerLayout","BentoPromoBannerLayout2","__default__","messages","t","useI18n","promoBannerRef","ref","promoBannerSize","useElementSize","promoBannerTitleId","generateUid","horizontalLayoutBreakpoint","computed","props","BentoImageAspectRatio","bannerLayoutClass","bannerConditionalClass","isIconOnly","button","computedDismissButtonText"],"mappings":";;;;;;;;;AA6FO,IAAAA,IAAA,kBAAAC,OACHA,EAAA,OAAA,QACAA,EAAA,OAAA,QACAA,EAAA,QAAA,SAHQA,IAAAD,KAAA,CAAA,CAAA,GAMLE,IAAA,kBAAAC,OACHA,EAAA,aAAA,cACAA,EAAA,WAAA,YAFQA,IAAAD,KAAA,CAAA,CAAA;;;;;;;;;;;;;GCoDRE,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;;;;;;iBA3EA,EAAA,GAAAC,EAAA,IAAAC,EAAA,GAcAC,IAAAC,EAAA,IAAA,GACAC,IAAAC,EAAAH,CAAA,GACAI,IAAAC,EAAA,kBAAA,GAEAC,IAAAC,EAAA,MACIC,EAAA,MAAA,gBAAAC,EAAA,QACI,MAAOD,EAAA,MAAA,gBAAAC,EAAA,OAEP,MAAOD,EAAA,MAAA,gBAAAC,EAAA,OAEP,MAGJ,CAAO,GAGXC,IAAAH,EAAA,MAEIC,EAAA,WAAAd,EAAA,cAAAQ,EAAA,MAAA,SAAAI,EAAA,QAIIZ,EAAA,WAGJc,EAAA,MAAa,GAGjBG,IAAAJ;AAAA,MAA+B,MAAA,CAAA,mBAAAG,EAAA,KAAA,IAAA,mBAAAF,EAAA,KAAA,EAAA,EAAA,KAAA,GAAA;AAAA,IAC8D,GAG7FI,IAAA,CAAAC,MAAAA,EAAA,aAAAA,EAAA,YAAAA,EAAA,aAAAA,EAAA,OAGAC,IAAAP,EAAA,MAAAC,EAAA,qBAAAV,EAAA,SAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{radio-group.CvsQDlHi.js → radio-group.CLbYlzD7.js} RENAMED Viewed

@@ -3,15 +3,15 @@ import { u as O } from "./use-form-layout-loading.CWbjZiwP.js";
 import { u as R } from "./use-has-slot.C9lQZ6nz.js";
 import { g as y } from "./generate-uid.DBWe4g6T.js";
 import { u as M } from "./form-field.B60VsF8d.js";
-import { B as N } from "./tag.Dz1FQSZb.js";
-import { B as k } from "./typography.D1OZJbEa.js";
+import { B as N } from "./tag.CgsX8v2m.js";
+import { B as k } from "./typography.Cd386LC_.js";
 import { u as A } from "./aria-label.CaUURpnB.js";
 import { u as w } from "./use-default-slot-validator.BDn0wkYP.js";
 import { g as F } from "./get-slot-text.DM_NdrUC.js";
 import { R as B, a as $ } from "./radio-input.CLlYadKI.js";
 import { n as T } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import { C as q } from "./controls-group.fdGc6epa.js";
-import { E as D } from "./error-message.DKnoUezI.js";
+import { C as q } from "./controls-group.Bku83Fm_.js";
+import { E as D } from "./error-message.B-n8wzFo.js";
 import "../assets/radio-group.css";
 const P = {
   name: "bento-radio-button",
@@ -166,4 +166,4 @@ export {
   pe as a,
   v as b
 };
-//# sourceMappingURL=radio-group.CvsQDlHi.js.map
+//# sourceMappingURL=radio-group.CLbYlzD7.js.map

package/dist/chunks/{radio-group.CvsQDlHi.js.map → radio-group.CLbYlzD7.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"radio-group.CvsQDlHi.js","sources":["../../src/components/radio-group/components/radio-button/radio-button.vue","../../src/components/radio-group/radio-group.types.ts","../../src/components/radio-group/radio-group.vue"],"sourcesContent":["<template>\n <div class=\"b-radio-button\" data-testid=\"radio-button-container\" :class=\"conditionalClassContainer\">\n <radio-input\n :id=\"radioButtonId\"\n ref=\"radioInputRef\"\n :aria-label=\"ariaLabel\"\n :aria-describedby=\"hasSlot('description') ? descriptionId : ''\"\n :checked=\"isChecked\"\n :disabled=\"disabled\"\n :readonly=\"readonly\"\n :has-error=\"hasError\"\n :value=\"value\"\n :model-value=\"modelValue\"\n :name=\"name\"\n @update:model-value=\"onChange\"\n />\n <div>\n <label v-if=\"hasSlot('default')\" :for=\"radioButtonId\" class=\"b-radio-button__label-container\">\n <span v-if=\"hasSlot('default')\" class=\"b-radio-button__primary-label\">\n <bento-typography class=\"b-radio-button__label\" el=\"span\" variant=\"body\"><slot /></bento-typography>\n <bento-tag v-if=\"tag\" class=\"b-radio-button__label-tag\" v-bind=\"tag\" />\n </span>\n <bento-typography\n v-if=\"hasSlot('default') && hasSlot('description')\"\n :id=\"descriptionId\"\n class=\"b-radio-button__description\"\n el=\"span\"\n variant=\"body\"\n >\n <slot name=\"description\"></slot>\n </bento-typography>\n </label>\n <bento-typography v-if=\"hasSlot('content') && isChecked\" class=\"b-radio-button__content\" el=\"div\">\n <slot name=\"content\"></slot>\n </bento-typography>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { BentoTag } from '@/components/tag';\n import { BentoTypography } from '@/components/typography';\n import { RadioInput } from '../../../internal/radio-input';\n import { useAriaLabel } from '@/utils/ts/aria-label';\n import { generateUid } from '@/utils/ts/generate-uid';\n import { computed, type ComputedRef, type PropType, ref, toRefs, useSlots } from 'vue';\n import { useDefaultSlotValidator, useHasSlot } from '@/composables';\n import {\n BentoRadioButtonStateClass,\n type BentoRadioButtonTag,\n type BentoRadioButtonValue,\n } from './radio-button.types';\n import { getSlotText } from '@/utils/ts/get-slot-text';\n\n const slots = useSlots();\n const hasSlot = useHasSlot(slots);\n const props = defineProps({\n /*\n Disable the radio button (optional)\n /\n disabled: { type: Boolean, default: false },\n\n /\n Shows bento-radio-button in error state (optional)\n /\n hasError: { type: Boolean, default: false },\n\n /\n This property should not be used directly.\n * It will be used by v-model directive on radio component.\n /\n modelValue: {\n type: [String, Number] as PropType<BentoRadioButtonValue>,\n default: null,\n },\n\n /\n Sets the radio button to readonly (optional)\n /\n readonly: { type: Boolean, default: false },\n\n /\n Sets the properties of the BentoTag component that is placed next to the label.\n * {@see BentoTag}\n /\n tag: { type: Object as PropType<BentoRadioButtonTag>, default: undefined },\n\n /\n Indicates the value of the input that will be returned when it's checked\n /\n value: {\n type: [String, Number] as PropType<BentoRadioButtonValue>,\n required: true,\n },\n\n /\n Sets the name of the radio input.\n * Used for differentiating radio groups or accessing input via form submission.\n /\n name: {\n type: String,\n default: null,\n },\n });\n\n const emit = defineEmits([\"input\", \"update:model-value\"]);\n\n const { value } = toRefs(props);\n const radioButtonId = generateUid('bento-radio-button');\n const descriptionId = generateUid('description');\n const radioInputRef = ref(null);\n\n useDefaultSlotValidator('bento-radio-button', slots.default, slots.description);\n\n const conditionalClassContainer = computed(() => ({\n [`b-radio-button--${BentoRadioButtonStateClass.DISABLED}`]: props.disabled,\n [`b-radio-button--${BentoRadioButtonStateClass.READONLY}`]: props.readonly,\n }));\n\n const ariaLabel = useAriaLabel({\n ariaLabel: getSlotText(slots)('default'),\n label: value.value as string,\n });\n\n const isChecked: ComputedRef<boolean> = computed(() => props.value === props.modelValue);\n\n const onChange = () => {\n if (!props.disabled && !props.readonly) {\n emit('update:model-value', props.value);\n emit('input', props.value);\n }\n };\n\n const focus = () => {\n radioInputRef.value.focus();\n };\n\n defineExpose({\n focus,\n });\n</script>\n\n<script lang=\"ts\">\n /\n Radio buttons are used when two or more options are mutually exclusive,\n * the user can only select a single option from a list of pre-defined options.\n * The label tag area is also clickable.\n * Only to be used internally.\n \n @example\n * import { BentoRadioButton } from '@adyen/bento-vue2';\n \n export default {\n * components: { BentoRadioButton },\n * template: `\n * <bento-radio-button\n * disabled\n * value=\"inputRadio\"\n * model-value.sync=\"modelValue\"\n * >\n * Label text\n * <template #description>Description text below label</template>\n * <template #content>Content shown when checked</template>\n * </bento-radio-button>\n * `,\n * setup() {\n * const modelValue = ref('anyValue')\n * const value = 'option-value'\n \n return {\n * modelValue,\n * value,\n * }\n * }\n * }\n /\n export default {\n name: 'bento-radio-button',\n model: { prop: 'modelValue' },\n };\n</script>\n\n<style lang=\"scss\" scoped src=\"./radio-button.scss\" />\n","import type { FormField, FormFieldEmits } from '../../types/form-field';\nimport type { BentoRadioButtonTag, BentoRadioButtonValue } from './components/radio-button';\n\n/\n @deprecated Since v2.0.0. Use string literal instead.\n /\nexport enum BentoRadioGroupVariant {\n HORIZONTAL = 'horizontal',\n VERTICAL = 'vertical',\n}\n\nexport type BentoRadioGroupValue = BentoRadioButtonValue;\n\nexport interface BentoRadioGroupItem {\n value: BentoRadioGroupValue;\n label: string;\n description?: string;\n disabled?: boolean;\n readonly?: boolean;\n hasError?: boolean;\n tag?: BentoRadioButtonTag;\n}\n\nexport type BentoRadioGroupItems = Array<BentoRadioGroupItem>;\n\nexport type BentoRadioGroupEmits = FormFieldEmits<BentoRadioGroupValue>;\n\nexport interface BentoRadioGroupProps extends FormField {\n /\n The form id the radio group is associated with. Defaults to null, as a radio group can also be used standalone.\n * @default null\n /\n formId?: string \| null;\n\n /\n Shows/hides the group label.\n * @default null\n /\n hideLabel?: boolean \| null;\n\n /\n The radio group's items.\n * Required.\n /\n items: BentoRadioGroupItems;\n\n /\n The name associated with the group. Required for accessibility purposes.\n * Required.\n /\n label: string;\n\n /\n Determines the initially selected value of the group. Corresponds to the BentoRadioButtonItem's value.\n * Defaults to no value selected.\n * @default null\n /\n modelValue?: BentoRadioGroupValue \| null;\n\n /\n The radio group's layout. It can be vertical or horizontal. Defaults to vertical.\n * @default BentoRadioGroupVariant.VERTICAL\n /\n variant?: BentoRadioGroupVariant \| `${BentoRadioGroupVariant}`;\n}\n","<template>\n <div class=\"b-radio-group\">\n <controls-group\n class=\"b-radio-group__buttons\"\n :aria-describedby=\"shouldShowError ? errorId : ''\"\n :aria-required=\"required\"\n :component-name=\"COMPONENT_NAME\"\n :class=\"conditionalClasses\"\n :description=\"description\"\n :disabled=\"disabled\"\n :form=\"formId\"\n :label=\"label\"\n :optional=\"optional\"\n :required=\"required\"\n :hide-label=\"hideLabel\"\n :tooltip-text=\"tooltipText\"\n role=\"radiogroup\"\n :aria-readonly=\"isReadOnly\"\n >\n <bento-radio-button\n v-for=\"item in items\"\n ref=\"radioButton\"\n :key=\"item.value\"\n :model-value=\"inputValue\"\n :value=\"item.value\"\n :disabled=\"disabled \|\| item.disabled\"\n :readonly=\"isReadOnly \|\| item.readonly\"\n :has-error=\"shouldShowError \|\| item.hasError\"\n :tag=\"item.tag\"\n :name=\"formId \|\| label\"\n @update:model-value=\"onUpdateModelValue\"\n >\n <template #default>{{ item.label }}</template>\n <template v-if=\"item.description\" #description>{{ item.description }}</template>\n <template v-if=\"hasSlot('content') && isVertical\" #content>\n <slot name=\"content\"></slot>\n </template>\n </bento-radio-button>\n <template v-if=\"hasSlot('description')\" #description>\n <slot name=\"description\" />\n </template>\n </controls-group>\n <error-message\n v-if=\"shouldShowError\"\n :id=\"errorId\"\n :error-message=\"errorMessage\"\n class=\"b-radio-group__error-message\"\n />\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, ref, toRef, useSlots, watch } from 'vue';\n import { ControlsGroup, ErrorMessage } from '@/components/internal';\n import { BentoRadioButton } from './components/radio-button';\n import { useHasSlot } from '@/composables';\n import { generateUid } from '@/utils/ts/generate-uid';\n import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n import { type BentoRadioGroupEmits, type BentoRadioGroupProps, BentoRadioGroupVariant } from './radio-group.types';\n import { useFormLayoutFieldLoading } from '@/composables/use-form-layout-loading/use-form-layout-loading';\n\n /\n The name of the component to be used in the Vue devtools and console warnings.\n /\n const COMPONENT_NAME = 'bento-radio-group';\n\n const slots = useSlots();\n const hasSlot = useHasSlot(slots);\n\n const emit = defineEmits([\"update:model-value\"]);\n\n const props = defineProps({\n description: { default: null },\n disabled: { type: Boolean, default: false },\n errorMessage: { default: null },\n label: null,\n optional: { type: Boolean, default: false },\n placeholder: null,\n readonly: { type: Boolean, default: false },\n required: { type: Boolean, default: false },\n tooltipText: { default: null },\n formId: { default: null },\n hideLabel: { type: Boolean, default: null },\n items: null,\n modelValue: { default: null },\n variant: { default: BentoRadioGroupVariant.VERTICAL }\n});\n\n const inputValue = toRef(props, 'modelValue');\n const errorId = generateUid('error');\n const { isReadOnly } = useFormLayoutFieldLoading(toRef(props, 'readonly'));\n const { emitValue } = useFormFieldEmits(emit);\n const radioButton = ref(null);\n\n const shouldShowError = computed(() => !props.disabled && !isReadOnly.value && !!props.errorMessage);\n\n const conditionalClasses = computed(() => ({\n 'b-radio-group__buttons--horizontal': props.variant === BentoRadioGroupVariant.HORIZONTAL,\n }));\n\n // Content slot logic\n const isVertical = computed(() => props.variant === 'vertical');\n const shouldShowSlotError = computed(() => hasSlot('content') && !isVertical?.value);\n\n const onUpdateModelValue = value => {\n emitValue(value);\n };\n\n watch(\n shouldShowSlotError,\n newVal => {\n if (newVal) {\n throw new Error('The content slot is only available for the vertical radio group layout');\n }\n },\n {\n immediate: true,\n }\n );\n\n const focus = () => {\n radioButton.value[0].focus();\n };\n\n defineExpose({\n focus,\n });\n</script>\n\n<script lang=\"ts\">\n /\n A radio group component should be used whenever it is necessary to use a set of radio buttons\n * This component conforms to the official WAI-ARIA guidelines for grouping controls: https://www.w3.org/WAI/tutorials/forms/grouping/\n \n import { BentoRadioGroup } from '@adyen/bento-vue2/';\n \n export default {\n * components: { BentoRadioGroup },\n * template: `\n * <bento-radio-group\n * label=\"Your group label\"\n * :items=\"[\n * { value: 1, label: 'Your label' },\n * { value: 2, label: 'Another label', description: 'Your descriptive sub label' },\n * ]\"\n * variant=\"horizontal\"\n * />\n * `\n * };\n */\n export default {\n name: 'bento-radio-group',\n model: { prop: 'modelValue', event: 'update:model-value' },\n };\n</script>\n\n<style lang=\"scss\" scoped src=\"./radio-group.scss\" />\n"],"names":["__default__$1","slots","useSlots","hasSlot","useHasSlot","value","toRefs","props","radioButtonId","generateUid","descriptionId","radioInputRef","ref","useDefaultSlotValidator","conditionalClassContainer","computed","RadioInputStateClass","ariaLabel","useAriaLabel","getSlotText","isChecked","onChange","emit","focus","expose","BentoRadioGroupVariant","BentoRadioGroupVariant2","__default__","COMPONENT_NAME","inputValue","toRef","errorId","isReadOnly","useFormLayoutFieldLoading","emitValue","useFormFieldEmits","radioButton","shouldShowError","conditionalClasses","isVertical","shouldShowSlotError","onUpdateModelValue","watch","newVal"],"mappings":";;;;;;;;;;;;;;;AAgLI,MAAAA,IAAA;AAAA,EAAe,MAAA;AAAA,EACL,OAAA,EAAA,MAAA,aAAA;AAEV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA7HAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAoDA,EAAA,OAAAI,EAAA,IAAAC,EAAAC,CAAA,GACAC,IAAAC,EAAA,oBAAA,GACAC,IAAAD,EAAA,aAAA,GACAE,IAAAC,EAAA,IAAA;AAEA,IAAAC,EAAA,sBAAAZ,EAAA,SAAAA,EAAA,WAAA;AAEA,UAAAa,IAAAC,EAAA,OAAA;AAAA,MAAkD,CAAA,mBAAAC,EAAA,QAAA,EAAA,GAAAT,EAAA;AAAA,MACoB,CAAA,mBAAAS,EAAA,QAAA,EAAA,GAAAT,EAAA;AAAA,IACA,EAAA,GAGtEU,IAAAC,EAAA;AAAA,MAA+B,WAAAC,EAAAlB,CAAA,EAAA,SAAA;AAAA,MACY,OAAAI,EAAA;AAAA,IAC1B,CAAA,GAGjBe,IAAAL,EAAA,MAAAR,EAAA,UAAAA,EAAA,UAAA,GAEAc,IAAA,MAAA;AACI,MAAA,CAAAd,EAAA,YAAA,CAAAA,EAAA,aACIe,EAAA,sBAAAf,EAAA,KAAA,GACAe,EAAA,SAAAf,EAAA,KAAA;AAAA,IACJ,GAGJgB,IAAA,MAAA;AACI,MAAAZ,EAAA,MAAA,MAAA;AAAA,IAA0B;AAG9B,WAAAa,EAAA;AAAA,MAAa,OAAAD;AAAA,IACT,CAAA;;;;;;;;;;;;;;;ACpID,IAAAE,IAAA,kBAAAC,OACHA,EAAA,aAAA,cACAA,EAAA,WAAA,YAFQA,IAAAD,KAAA,CAAA,CAAA;ACgJR,MAAAE,IAAA;AAAA,EAAe,MAAA;AAAA,EACL,OAAA,EAAA,MAAA,cAAA,OAAA,qBAAA;AAEV;;;;;;;;;;;;;;;;;;;;iBAzFAC,IAAA,qBAEA3B,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAqBA4B,IAAAC,EAAAvB,GAAA,YAAA,GACAwB,IAAAtB,EAAA,OAAA,GACA,EAAA,YAAAuB,EAAA,IAAAC,EAAAH,EAAAvB,GAAA,UAAA,CAAA,GACA,EAAA,WAAA2B,EAAA,IAAAC,EAAAb,CAAA,GACAc,IAAAxB,EAAA,IAAA,GAEAyB,IAAAtB,EAAA,MAAA,CAAAR,EAAA,YAAA,CAAAyB,EAAA,SAAA,CAAA,CAAAzB,EAAA,YAAA,GAEA+B,IAAAvB,EAAA,OAAA;AAAA,MAA2C,sCAAAR,EAAA,YAAAkB,EAAA;AAAA,IACwC,EAAA,GAInFc,IAAAxB,EAAA,MAAAR,EAAA,YAAA,UAAA,GACAiC,IAAAzB,EAAA,MAAAZ,EAAA,SAAA,KAAA,CAAAoC,GAAA,KAAA,GAEAE,IAAA,CAAApC,MAAA;AACI,MAAA6B,EAAA7B,CAAA;AAAA,IAAe;AAGnB,IAAAqC;AAAA,MAAAF;AAAA,MACI,CAAAG,MAAA;AAEI,YAAAA;AACI,gBAAA,IAAA,MAAA,wEAAA;AAAA,MACJ;AAAA,MACJ;AAAA,QACA,WAAA;AAAA,MACe;AAAA,IACf;AAGJ,UAAApB,IAAA,MAAA;AACI,MAAAa,EAAA,MAAA,CAAA,EAAA,MAAA;AAAA,IAA2B;AAG/B,WAAAZ,EAAA;AAAA,MAAa,OAAAD;AAAA,IACT,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"radio-group.CLbYlzD7.js","sources":["../../src/components/radio-group/components/radio-button/radio-button.vue","../../src/components/radio-group/radio-group.types.ts","../../src/components/radio-group/radio-group.vue"],"sourcesContent":["<template>\n <div class=\"b-radio-button\" data-testid=\"radio-button-container\" :class=\"conditionalClassContainer\">\n <radio-input\n :id=\"radioButtonId\"\n ref=\"radioInputRef\"\n :aria-label=\"ariaLabel\"\n :aria-describedby=\"hasSlot('description') ? descriptionId : ''\"\n :checked=\"isChecked\"\n :disabled=\"disabled\"\n :readonly=\"readonly\"\n :has-error=\"hasError\"\n :value=\"value\"\n :model-value=\"modelValue\"\n :name=\"name\"\n @update:model-value=\"onChange\"\n />\n <div>\n <label v-if=\"hasSlot('default')\" :for=\"radioButtonId\" class=\"b-radio-button__label-container\">\n <span v-if=\"hasSlot('default')\" class=\"b-radio-button__primary-label\">\n <bento-typography class=\"b-radio-button__label\" el=\"span\" variant=\"body\"><slot /></bento-typography>\n <bento-tag v-if=\"tag\" class=\"b-radio-button__label-tag\" v-bind=\"tag\" />\n </span>\n <bento-typography\n v-if=\"hasSlot('default') && hasSlot('description')\"\n :id=\"descriptionId\"\n class=\"b-radio-button__description\"\n el=\"span\"\n variant=\"body\"\n >\n <slot name=\"description\"></slot>\n </bento-typography>\n </label>\n <bento-typography v-if=\"hasSlot('content') && isChecked\" class=\"b-radio-button__content\" el=\"div\">\n <slot name=\"content\"></slot>\n </bento-typography>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { BentoTag } from '@/components/tag';\n import { BentoTypography } from '@/components/typography';\n import { RadioInput } from '../../../internal/radio-input';\n import { useAriaLabel } from '@/utils/ts/aria-label';\n import { generateUid } from '@/utils/ts/generate-uid';\n import { computed, type ComputedRef, type PropType, ref, toRefs, useSlots } from 'vue';\n import { useDefaultSlotValidator, useHasSlot } from '@/composables';\n import {\n BentoRadioButtonStateClass,\n type BentoRadioButtonTag,\n type BentoRadioButtonValue,\n } from './radio-button.types';\n import { getSlotText } from '@/utils/ts/get-slot-text';\n\n const slots = useSlots();\n const hasSlot = useHasSlot(slots);\n const props = defineProps({\n /*\n Disable the radio button (optional)\n /\n disabled: { type: Boolean, default: false },\n\n /\n Shows bento-radio-button in error state (optional)\n /\n hasError: { type: Boolean, default: false },\n\n /\n This property should not be used directly.\n * It will be used by v-model directive on radio component.\n /\n modelValue: {\n type: [String, Number] as PropType<BentoRadioButtonValue>,\n default: null,\n },\n\n /\n Sets the radio button to readonly (optional)\n /\n readonly: { type: Boolean, default: false },\n\n /\n Sets the properties of the BentoTag component that is placed next to the label.\n * {@see BentoTag}\n /\n tag: { type: Object as PropType<BentoRadioButtonTag>, default: undefined },\n\n /\n Indicates the value of the input that will be returned when it's checked\n /\n value: {\n type: [String, Number] as PropType<BentoRadioButtonValue>,\n required: true,\n },\n\n /\n Sets the name of the radio input.\n * Used for differentiating radio groups or accessing input via form submission.\n /\n name: {\n type: String,\n default: null,\n },\n });\n\n const emit = defineEmits([\"input\", \"update:model-value\"]);\n\n const { value } = toRefs(props);\n const radioButtonId = generateUid('bento-radio-button');\n const descriptionId = generateUid('description');\n const radioInputRef = ref(null);\n\n useDefaultSlotValidator('bento-radio-button', slots.default, slots.description);\n\n const conditionalClassContainer = computed(() => ({\n [`b-radio-button--${BentoRadioButtonStateClass.DISABLED}`]: props.disabled,\n [`b-radio-button--${BentoRadioButtonStateClass.READONLY}`]: props.readonly,\n }));\n\n const ariaLabel = useAriaLabel({\n ariaLabel: getSlotText(slots)('default'),\n label: value.value as string,\n });\n\n const isChecked: ComputedRef<boolean> = computed(() => props.value === props.modelValue);\n\n const onChange = () => {\n if (!props.disabled && !props.readonly) {\n emit('update:model-value', props.value);\n emit('input', props.value);\n }\n };\n\n const focus = () => {\n radioInputRef.value.focus();\n };\n\n defineExpose({\n focus,\n });\n</script>\n\n<script lang=\"ts\">\n /\n Radio buttons are used when two or more options are mutually exclusive,\n * the user can only select a single option from a list of pre-defined options.\n * The label tag area is also clickable.\n * Only to be used internally.\n \n @example\n * import { BentoRadioButton } from '@adyen/bento-vue2';\n \n export default {\n * components: { BentoRadioButton },\n * template: `\n * <bento-radio-button\n * disabled\n * value=\"inputRadio\"\n * model-value.sync=\"modelValue\"\n * >\n * Label text\n * <template #description>Description text below label</template>\n * <template #content>Content shown when checked</template>\n * </bento-radio-button>\n * `,\n * setup() {\n * const modelValue = ref('anyValue')\n * const value = 'option-value'\n \n return {\n * modelValue,\n * value,\n * }\n * }\n * }\n /\n export default {\n name: 'bento-radio-button',\n model: { prop: 'modelValue' },\n };\n</script>\n\n<style lang=\"scss\" scoped src=\"./radio-button.scss\" />\n","import type { FormField, FormFieldEmits } from '../../types/form-field';\nimport type { BentoRadioButtonTag, BentoRadioButtonValue } from './components/radio-button';\n\n/\n @deprecated Since v3.0.0. Use string literal instead.\n /\nexport enum BentoRadioGroupVariant {\n HORIZONTAL = 'horizontal',\n VERTICAL = 'vertical',\n}\n\nexport type BentoRadioGroupValue = BentoRadioButtonValue;\n\nexport interface BentoRadioGroupItem {\n value: BentoRadioGroupValue;\n label: string;\n description?: string;\n disabled?: boolean;\n readonly?: boolean;\n hasError?: boolean;\n tag?: BentoRadioButtonTag;\n}\n\nexport type BentoRadioGroupItems = Array<BentoRadioGroupItem>;\n\nexport type BentoRadioGroupEmits = FormFieldEmits<BentoRadioGroupValue>;\n\nexport interface BentoRadioGroupProps extends FormField {\n /\n The form id the radio group is associated with. Defaults to null, as a radio group can also be used standalone.\n * @default null\n /\n formId?: string \| null;\n\n /\n Shows/hides the group label.\n * @default null\n /\n hideLabel?: boolean \| null;\n\n /\n The radio group's items.\n * Required.\n /\n items: BentoRadioGroupItems;\n\n /\n The name associated with the group. Required for accessibility purposes.\n * Required.\n /\n label: string;\n\n /\n Determines the initially selected value of the group. Corresponds to the BentoRadioButtonItem's value.\n * Defaults to no value selected.\n * @default null\n /\n modelValue?: BentoRadioGroupValue \| null;\n\n /\n The radio group's layout. It can be vertical or horizontal. Defaults to vertical.\n * @default BentoRadioGroupVariant.VERTICAL\n /\n variant?: BentoRadioGroupVariant \| `${BentoRadioGroupVariant}`;\n}\n","<template>\n <div class=\"b-radio-group\">\n <controls-group\n class=\"b-radio-group__buttons\"\n :aria-describedby=\"shouldShowError ? errorId : ''\"\n :aria-required=\"required\"\n :component-name=\"COMPONENT_NAME\"\n :class=\"conditionalClasses\"\n :description=\"description\"\n :disabled=\"disabled\"\n :form=\"formId\"\n :label=\"label\"\n :optional=\"optional\"\n :required=\"required\"\n :hide-label=\"hideLabel\"\n :tooltip-text=\"tooltipText\"\n role=\"radiogroup\"\n :aria-readonly=\"isReadOnly\"\n >\n <bento-radio-button\n v-for=\"item in items\"\n ref=\"radioButton\"\n :key=\"item.value\"\n :model-value=\"inputValue\"\n :value=\"item.value\"\n :disabled=\"disabled \|\| item.disabled\"\n :readonly=\"isReadOnly \|\| item.readonly\"\n :has-error=\"shouldShowError \|\| item.hasError\"\n :tag=\"item.tag\"\n :name=\"formId \|\| label\"\n @update:model-value=\"onUpdateModelValue\"\n >\n <template #default>{{ item.label }}</template>\n <template v-if=\"item.description\" #description>{{ item.description }}</template>\n <template v-if=\"hasSlot('content') && isVertical\" #content>\n <slot name=\"content\"></slot>\n </template>\n </bento-radio-button>\n <template v-if=\"hasSlot('description')\" #description>\n <slot name=\"description\" />\n </template>\n </controls-group>\n <error-message\n v-if=\"shouldShowError\"\n :id=\"errorId\"\n :error-message=\"errorMessage\"\n class=\"b-radio-group__error-message\"\n />\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, ref, toRef, useSlots, watch } from 'vue';\n import { ControlsGroup, ErrorMessage } from '@/components/internal';\n import { BentoRadioButton } from './components/radio-button';\n import { useHasSlot } from '@/composables';\n import { generateUid } from '@/utils/ts/generate-uid';\n import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n import { type BentoRadioGroupEmits, type BentoRadioGroupProps, BentoRadioGroupVariant } from './radio-group.types';\n import { useFormLayoutFieldLoading } from '@/composables/use-form-layout-loading/use-form-layout-loading';\n\n /\n The name of the component to be used in the Vue devtools and console warnings.\n /\n const COMPONENT_NAME = 'bento-radio-group';\n\n const slots = useSlots();\n const hasSlot = useHasSlot(slots);\n\n const emit = defineEmits([\"update:model-value\"]);\n\n const props = defineProps({\n description: { default: null },\n disabled: { type: Boolean, default: false },\n errorMessage: { default: null },\n label: null,\n optional: { type: Boolean, default: false },\n placeholder: null,\n readonly: { type: Boolean, default: false },\n required: { type: Boolean, default: false },\n tooltipText: { default: null },\n formId: { default: null },\n hideLabel: { type: Boolean, default: null },\n items: null,\n modelValue: { default: null },\n variant: { default: BentoRadioGroupVariant.VERTICAL }\n});\n\n const inputValue = toRef(props, 'modelValue');\n const errorId = generateUid('error');\n const { isReadOnly } = useFormLayoutFieldLoading(toRef(props, 'readonly'));\n const { emitValue } = useFormFieldEmits(emit);\n const radioButton = ref(null);\n\n const shouldShowError = computed(() => !props.disabled && !isReadOnly.value && !!props.errorMessage);\n\n const conditionalClasses = computed(() => ({\n 'b-radio-group__buttons--horizontal': props.variant === BentoRadioGroupVariant.HORIZONTAL,\n }));\n\n // Content slot logic\n const isVertical = computed(() => props.variant === 'vertical');\n const shouldShowSlotError = computed(() => hasSlot('content') && !isVertical?.value);\n\n const onUpdateModelValue = value => {\n emitValue(value);\n };\n\n watch(\n shouldShowSlotError,\n newVal => {\n if (newVal) {\n throw new Error('The content slot is only available for the vertical radio group layout');\n }\n },\n {\n immediate: true,\n }\n );\n\n const focus = () => {\n radioButton.value[0].focus();\n };\n\n defineExpose({\n focus,\n });\n</script>\n\n<script lang=\"ts\">\n /\n A radio group component should be used whenever it is necessary to use a set of radio buttons\n * This component conforms to the official WAI-ARIA guidelines for grouping controls: https://www.w3.org/WAI/tutorials/forms/grouping/\n \n import { BentoRadioGroup } from '@adyen/bento-vue2/';\n \n export default {\n * components: { BentoRadioGroup },\n * template: `\n * <bento-radio-group\n * label=\"Your group label\"\n * :items=\"[\n * { value: 1, label: 'Your label' },\n * { value: 2, label: 'Another label', description: 'Your descriptive sub label' },\n * ]\"\n * variant=\"horizontal\"\n * />\n * `\n * };\n */\n export default {\n name: 'bento-radio-group',\n model: { prop: 'modelValue', event: 'update:model-value' },\n };\n</script>\n\n<style lang=\"scss\" scoped src=\"./radio-group.scss\" />\n"],"names":["__default__$1","slots","useSlots","hasSlot","useHasSlot","value","toRefs","props","radioButtonId","generateUid","descriptionId","radioInputRef","ref","useDefaultSlotValidator","conditionalClassContainer","computed","RadioInputStateClass","ariaLabel","useAriaLabel","getSlotText","isChecked","onChange","emit","focus","expose","BentoRadioGroupVariant","BentoRadioGroupVariant2","__default__","COMPONENT_NAME","inputValue","toRef","errorId","isReadOnly","useFormLayoutFieldLoading","emitValue","useFormFieldEmits","radioButton","shouldShowError","conditionalClasses","isVertical","shouldShowSlotError","onUpdateModelValue","watch","newVal"],"mappings":";;;;;;;;;;;;;;;AAgLI,MAAAA,IAAA;AAAA,EAAe,MAAA;AAAA,EACL,OAAA,EAAA,MAAA,aAAA;AAEV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA7HAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAoDA,EAAA,OAAAI,EAAA,IAAAC,EAAAC,CAAA,GACAC,IAAAC,EAAA,oBAAA,GACAC,IAAAD,EAAA,aAAA,GACAE,IAAAC,EAAA,IAAA;AAEA,IAAAC,EAAA,sBAAAZ,EAAA,SAAAA,EAAA,WAAA;AAEA,UAAAa,IAAAC,EAAA,OAAA;AAAA,MAAkD,CAAA,mBAAAC,EAAA,QAAA,EAAA,GAAAT,EAAA;AAAA,MACoB,CAAA,mBAAAS,EAAA,QAAA,EAAA,GAAAT,EAAA;AAAA,IACA,EAAA,GAGtEU,IAAAC,EAAA;AAAA,MAA+B,WAAAC,EAAAlB,CAAA,EAAA,SAAA;AAAA,MACY,OAAAI,EAAA;AAAA,IAC1B,CAAA,GAGjBe,IAAAL,EAAA,MAAAR,EAAA,UAAAA,EAAA,UAAA,GAEAc,IAAA,MAAA;AACI,MAAA,CAAAd,EAAA,YAAA,CAAAA,EAAA,aACIe,EAAA,sBAAAf,EAAA,KAAA,GACAe,EAAA,SAAAf,EAAA,KAAA;AAAA,IACJ,GAGJgB,IAAA,MAAA;AACI,MAAAZ,EAAA,MAAA,MAAA;AAAA,IAA0B;AAG9B,WAAAa,EAAA;AAAA,MAAa,OAAAD;AAAA,IACT,CAAA;;;;;;;;;;;;;;;ACpID,IAAAE,IAAA,kBAAAC,OACHA,EAAA,aAAA,cACAA,EAAA,WAAA,YAFQA,IAAAD,KAAA,CAAA,CAAA;ACgJR,MAAAE,IAAA;AAAA,EAAe,MAAA;AAAA,EACL,OAAA,EAAA,MAAA,cAAA,OAAA,qBAAA;AAEV;;;;;;;;;;;;;;;;;;;;iBAzFAC,IAAA,qBAEA3B,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAqBA4B,IAAAC,EAAAvB,GAAA,YAAA,GACAwB,IAAAtB,EAAA,OAAA,GACA,EAAA,YAAAuB,EAAA,IAAAC,EAAAH,EAAAvB,GAAA,UAAA,CAAA,GACA,EAAA,WAAA2B,EAAA,IAAAC,EAAAb,CAAA,GACAc,IAAAxB,EAAA,IAAA,GAEAyB,IAAAtB,EAAA,MAAA,CAAAR,EAAA,YAAA,CAAAyB,EAAA,SAAA,CAAA,CAAAzB,EAAA,YAAA,GAEA+B,IAAAvB,EAAA,OAAA;AAAA,MAA2C,sCAAAR,EAAA,YAAAkB,EAAA;AAAA,IACwC,EAAA,GAInFc,IAAAxB,EAAA,MAAAR,EAAA,YAAA,UAAA,GACAiC,IAAAzB,EAAA,MAAAZ,EAAA,SAAA,KAAA,CAAAoC,GAAA,KAAA,GAEAE,IAAA,CAAApC,MAAA;AACI,MAAA6B,EAAA7B,CAAA;AAAA,IAAe;AAGnB,IAAAqC;AAAA,MAAAF;AAAA,MACI,CAAAG,MAAA;AAEI,YAAAA;AACI,gBAAA,IAAA,MAAA,wEAAA;AAAA,MACJ;AAAA,MACJ;AAAA,QACA,WAAA;AAAA,MACe;AAAA,IACf;AAGJ,UAAApB,IAAA,MAAA;AACI,MAAAa,EAAA,MAAA,CAAA,EAAA,MAAA;AAAA,IAA2B;AAG/B,WAAAZ,EAAA;AAAA,MAAa,OAAAD;AAAA,IACT,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{rich-text-editor.rXoS7KGY.js → rich-text-editor.5SMm2BbC.js} RENAMED Viewed

@@ -1,16 +1,16 @@
 import { defineComponent as At, ref as xt, onMounted as Nn, watch as le, computed as dt, h as Q, useAttrs as Un } from "vue";
-import { B as Wn } from "./typography.D1OZJbEa.js";
-import { B as Qn } from "./segmented-control.nYpRQTGc.js";
-import { B as Zn } from "./alert.DJDHwVeR.js";
+import { B as Wn } from "./typography.Cd386LC_.js";
+import { B as Qn } from "./segmented-control.CcQoBTfT.js";
+import { B as Zn } from "./alert.BddJPWMN.js";
 import { n as yt } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "./index.Cl4_42j5.js";
-import { B as Gn } from "./link.Cls8XShm.js";
-import { B as Yn } from "./checkbox.D5xZ5Nnh.js";
+import { B as Gn } from "./link.iNnolG9W.js";
+import { B as Yn } from "./checkbox.CnuIUi4-.js";
 import { u as Jn } from "./index.CPOlyau9.js";
 import { u as Xn } from "./aria-label.CaUURpnB.js";
 import { g as _e } from "./generate-uid.DBWe4g6T.js";
-import { F as Kn } from "./field-label.C7BCsofY.js";
-import { E as tr } from "./error-message.DKnoUezI.js";
+import { F as Kn } from "./field-label.BQaDr37D.js";
+import { E as tr } from "./error-message.B-n8wzFo.js";
 import "../assets/rich-text-editor.css";
 const er = /* @__PURE__ */ At({
   __name: "rich-text-editor-content-area",
@@ -6120,10 +6120,10 @@ const uo = {
   "pt-BR": { ariaLabelFallback: "Rich text editor", errorProcessingMarkdown: "Error processing markdown: {value}", markdown: "Markdown", visual: "Visual" },
   "zh-CN": { ariaLabelFallback: "富文本编辑器", errorProcessingMarkdown: "处理 markdown 时出错：{value}", markdown: "Markdown", visual: "可视" }
 }, ao = {
-  i18n: { messages: lo }
+  i18n: { messages: lo },
+  name: "bento-rich-text-editor"
 }, oo = /* @__PURE__ */ At({
   ...ao,
-  __name: "rich-text-editor",
   props: {
     description: { default: null },
     disabled: { type: Boolean, default: !1 },
@@ -6193,10 +6193,10 @@ var so = function() {
   co,
   !1,
   null,
-  "bdcf2e80"
+  "189681d9"
 );
 const Ao = fo.exports;
 export {
   Ao as r
 };
-//# sourceMappingURL=rich-text-editor.rXoS7KGY.js.map
+//# sourceMappingURL=rich-text-editor.5SMm2BbC.js.map