@telefonica/mistica 16.71.0 → 17.0.0

package/src/community/advanced-data-card.tsx

@@ -256,7 +256,7 @@ const CardFooter = ({button, footerImage, footerText, footerTextLinesMax, button
     );
 };
 
-type AllowedExtra =
+type AllowedSlot =
     | typeof StackingGroup
     | typeof HighlightedValueBlock
     | typeof InformationBlock
@@ -278,9 +278,9 @@ type AdvancedDataCardProps = MaybeTouchableCard<{
     subtitleLinesMax?: number;
     description?: string;
     descriptionLinesMax?: number;
-    extra?: ReadonlyArray<RendersNullableElement<AllowedExtra>>;
-    extraDividerPadding?: 8 | 16 | 24;
-    noExtraDivider?: boolean;
+    slot?: ReadonlyArray<RendersNullableElement<AllowedSlot>>;
+    slotDividerPadding?: 8 | 16 | 24;
+    noSlotDivider?: boolean;
     button?: RendersNullableElement<typeof ButtonPrimary>;
     footerImage?: RendersNullableElement<typeof Image>;
     footerText?: string;
@@ -308,9 +308,9 @@ export const AdvancedDataCard = React.forwardRef<HTMLDivElement, AdvancedDataCar
             description,
             descriptionLinesMax,
 
-            extra,
-            extraDividerPadding = 24,
-            noExtraDivider = false,
+            slot,
+            slotDividerPadding = 24,
+            noSlotDivider = false,
 
             button,
             footerImage,
@@ -331,18 +331,18 @@ export const AdvancedDataCard = React.forwardRef<HTMLDivElement, AdvancedDataCar
         const footerProps = {button, footerImage, footerText, footerTextLinesMax, buttonLink};
 
         const hasFooter = !!button || !!footerImage || !!footerText || !!buttonLink;
-        const hasExtras = !!extra?.length;
+        const hasSlots = !!slot?.length;
 
         const topActionsCount = (actions?.length || 0) + (onClose ? 1 : 0);
 
         const {text: headlineText, ref: headlineRef} = useInnerText();
-        const {text: extraText, ref: extraRef} = useInnerText();
+        const {text: slotText, ref: slotRef} = useInnerText();
 
         const ariaLabel =
             ariaLabelProp ||
             (isBiggerHeading(titleAs, pretitleAs)
-                ? [title, headlineText, pretitle, subtitle, description, extraText]
-                : [pretitle, headlineText, title, subtitle, description, extraText]
+                ? [title, headlineText, pretitle, subtitle, description, slotText]
+                : [pretitle, headlineText, title, subtitle, description, slotText]
             )
                 .filter(Boolean)
                 .join(' ');
@@ -350,7 +350,7 @@ export const AdvancedDataCard = React.forwardRef<HTMLDivElement, AdvancedDataCar
         return (
             <section
                 className={styles.container}
-                {...getPrefixedDataAttributes(dataAttributes, 'AdvancedDataCard')}
+                {...getPrefixedDataAttributes({testid: 'AdvancedDataCard', ...dataAttributes})}
                 ref={ref}
                 aria-label={isTouchable ? undefined : ariaLabel}
             >
@@ -366,7 +366,7 @@ export const AdvancedDataCard = React.forwardRef<HTMLDivElement, AdvancedDataCar
                         <div
                             className={classNames(
                                 styles.cardContentStyle,
-                                !hasFooter && !hasExtras ? styles.minHeight : ''
+                                !hasFooter && !hasSlots ? styles.minHeight : ''
                             )}
                             aria-hidden={isTouchable}
                         >
@@ -402,16 +402,16 @@ export const AdvancedDataCard = React.forwardRef<HTMLDivElement, AdvancedDataCar
                             </Box>
                         </div>
                         <div style={{flexGrow: 1}} />
-                        {hasExtras && (
-                            <div className={styles.extra} ref={extraRef} aria-hidden={isTouchable}>
-                                {extra.map((item, index) => {
+                        {hasSlots && (
+                            <div className={styles.slot} ref={slotRef} aria-hidden={isTouchable}>
+                                {slot.map((item, index) => {
                                     return (
                                         <div key={index}>
                                             <div className={styles.paddingX}>{item}</div>
 
-                                            {index + 1 !== extra.length && (
-                                                <Box paddingY={extraDividerPadding}>
-                                                    {!noExtraDivider && <Divider />}
+                                            {index + 1 !== slot.length && (
+                                                <Box paddingY={slotDividerPadding}>
+                                                    {!noSlotDivider && <Divider />}
                                                 </Box>
                                             )}
                                         </div>

package/src/community/ai-card.tsx

@@ -191,7 +191,7 @@ const AiCard = ({
                       })
                     : undefined
             }
-            dataAttributes={{'component-name': 'AiCard', testid: 'AiCard', ...dataAttributes}}
+            dataAttributes={{testid: 'AiCard', ...dataAttributes}}
             {...(touchableProps as any)}
             aria-label={ariaLabel ?? autoAriaLabel}
         >

package/src/community/skins/cyber-skin.tsx

@@ -656,7 +656,6 @@ export const getCyberSkin = (): Skin => {
             chip: '24px',
             tag: '24px',
             input: '12px',
-            legacyDisplay: '0px',
             popup: '4px',
             sheet: '0px',
             mediaSmall: '2px',

package/src/counter.tsx

@@ -121,7 +121,7 @@ const Counter = ({
     return (
         <div
             className={classNames(styles.counter, {[styles.disabled]: disabled})}
-            {...getPrefixedDataAttributes(dataAttributes, 'Counter')}
+            {...getPrefixedDataAttributes({testid: 'Counter', ...dataAttributes})}
             style={{
                 border: `1px solid ${(variant === 'brand' || variant === 'media' || variant === 'negative') && !isDarkMode ? vars.colors.backgroundContainer : vars.colors.inputBorder}`,
             }}

package/src/cover-hero.css.ts

@@ -68,7 +68,7 @@ globalStyle(`${slideshowWithBullets} ${coverHero}:after`, {
     },
 });
 
-export const hasSideExtra = style({});
+export const hasSideSlot = style({});
 
 export const centered = style([
     sprinkles({
@@ -77,7 +77,7 @@ export const centered = style([
     {
         textAlign: 'center',
         selectors: {
-            [`${hasSideExtra}&`]: {
+            [`${hasSideSlot}&`]: {
                 '@media': {
                     [mq.tabletOrBigger]: {
                         textAlign: 'left',
@@ -117,7 +117,7 @@ export const sixColumns = style({
         [mq.tabletOrBigger]: {
             width: '75%',
             selectors: {
-                [`${centered}:not(${hasSideExtra}) &`]: {
+                [`${centered}:not(${hasSideSlot}) &`]: {
                     margin: '0 auto',
                 },
             },
@@ -125,7 +125,7 @@ export const sixColumns = style({
     },
 });
 
-export const sideExtra = sprinkles({position: 'relative'});
+export const sideSlot = sprinkles({position: 'relative'});
 
 export const flexColumn = sprinkles({
     display: 'flex',

package/src/cover-hero.tsx

@@ -33,8 +33,8 @@ type BaseProps = {
     titleAs?: HeadingType;
     description?: string;
     descriptionLinesMax?: number;
-    extra?: React.ReactNode;
-    sideExtra?: React.ReactNode;
+    slot?: React.ReactNode;
+    sideSlot?: React.ReactNode;
     button?: RendersNullableElement<typeof ButtonPrimary>;
     secondaryButton?: RendersNullableElement<typeof ButtonSecondary>;
     buttonLink?: RendersNullableElement<typeof ButtonLink>;
@@ -81,8 +81,8 @@ const CoverHero = React.forwardRef<HTMLDivElement, CoverHeroProps>(
             titleAs = 'h1',
             description,
             descriptionLinesMax,
-            extra,
-            sideExtra,
+            slot,
+            sideSlot,
             button,
             secondaryButton,
             buttonLink,
@@ -191,7 +191,7 @@ const CoverHero = React.forwardRef<HTMLDivElement, CoverHeroProps>(
                         </div>
                     )}
                 </Stack>
-                {extra && <div data-testid="slot">{extra}</div>}
+                {slot && <div data-testid="slot">{slot}</div>}
             </div>
         );
 
@@ -199,7 +199,7 @@ const CoverHero = React.forwardRef<HTMLDivElement, CoverHeroProps>(
 
         return (
             <section
-                {...getPrefixedDataAttributes(dataAttributes, 'CoverHero')}
+                {...getPrefixedDataAttributes({testid: 'CoverHero', ...dataAttributes})}
                 aria-label={ariaLabel}
                 ref={ref}
                 className={classnames(styles.coverHeroContainer, {
@@ -219,14 +219,14 @@ const CoverHero = React.forwardRef<HTMLDivElement, CoverHeroProps>(
                 <div
                     className={classnames(styles.coverHero, {
                         [styles.centered]: centered,
-                        [styles.hasSideExtra]: sideExtra,
+                        [styles.hasSideSlot]: sideSlot,
                     })}
                 >
                     {hasMedia ? <CoverHeroMedia {...mediaProps} /> : null}
                     <ResponsiveLayout variant={hasMedia ? 'media' : variant}>
                         <Box paddingY={noPaddingY ? 0 : {desktop: 56, tablet: 56, mobile: 24}}>
                             <Stack space={24}>
-                                {centered && !sideExtra ? (
+                                {centered && !sideSlot ? (
                                     <GridLayout template="8">{mainContent}</GridLayout>
                                 ) : (
                                     <GridLayout
@@ -234,8 +234,8 @@ const CoverHero = React.forwardRef<HTMLDivElement, CoverHeroProps>(
                                         collapseBreakpoint="mobile"
                                         left={mainContent}
                                         right={
-                                            <div className={styles.sideExtra} data-testid="sideSlot">
-                                                {sideExtra}
+                                            <div className={styles.sideSlot} data-testid="sideSlot">
+                                                {sideSlot}
                                             </div>
                                         }
                                     />
@@ -243,8 +243,8 @@ const CoverHero = React.forwardRef<HTMLDivElement, CoverHeroProps>(
                                 <ButtonGroup
                                     align={{
                                         mobile: centered ? 'center' : 'left',
-                                        tablet: centered && !sideExtra ? 'center' : 'left',
-                                        desktop: centered && !sideExtra ? 'center' : 'left',
+                                        tablet: centered && !sideSlot ? 'center' : 'left',
+                                        desktop: centered && !sideSlot ? 'center' : 'left',
                                     }}
                                     primaryButton={button}
                                     secondaryButton={secondaryButton}

package/src/credit-card-expiration-field.tsx

@@ -176,7 +176,6 @@ const CreditCardExpirationField = ({
             autoComplete={autoComplete}
             inputComponent={MonthYearDateInput}
             dataAttributes={{
-                'component-name': 'CreditCardExpirationField',
                 testid: 'CreditCardExpirationField',
                 ...dataAttributes,
             }}

package/src/credit-card-number-field.tsx

@@ -234,7 +234,6 @@ const CreditCardNumberField = ({
             autoComplete={autoComplete}
             endIcon={<CreditcardAdornment value={value ?? rawValues[name] ?? ''} />}
             dataAttributes={{
-                'component-name': 'CreditCardNumberField',
                 testid: 'CreditCardNumberField',
                 ...dataAttributes,
             }}

package/src/cvv-field.tsx

@@ -161,7 +161,7 @@ const CvvField = ({
             }
             autoComplete={autoComplete}
             inputComponent={IntegerInput}
-            dataAttributes={{'component-name': 'CvvField', testid: 'CvvField', ...dataAttributes}}
+            dataAttributes={{testid: 'CvvField', ...dataAttributes}}
         />
     );
 };

package/src/date-field.tsx

@@ -106,7 +106,7 @@ const DateField = ({
                     <IconCalendarRegular size={iconSize.small} />
                 </div>
             }
-            dataAttributes={{'component-name': 'DateField', testid: 'DateField', ...dataAttributes}}
+            dataAttributes={{testid: 'DateField', ...dataAttributes}}
         />
     );
 
@@ -121,7 +121,7 @@ const DateField = ({
                 {...fieldProps}
                 optional={optional}
                 isValidDate={(currentDate) => isInRange(getLocalDateString(currentDate.toDate()))}
-                dataAttributes={{'component-name': 'DateField', testid: 'DateField', ...dataAttributes}}
+                dataAttributes={{testid: 'DateField', ...dataAttributes}}
             />
         </React.Suspense>
     );

package/src/date-time-field.tsx

@@ -112,7 +112,7 @@ const FormDateField = ({
                     <IconCalendarRegular size={iconSize.small} />
                 </div>
             }
-            dataAttributes={{'component-name': 'DateTimeField', testid: 'DateTimeField', ...dataAttributes}}
+            dataAttributes={{testid: 'DateTimeField', ...dataAttributes}}
         />
     );
 
@@ -129,7 +129,6 @@ const FormDateField = ({
                 withTime
                 isValidDate={(currentDate) => isInRange(getLocalDateTimeString(currentDate.toDate()))}
                 dataAttributes={{
-                    'component-name': 'DateTimeField',
                     testid: 'DateTimeField',
                     ...dataAttributes,
                 }}

package/src/decimal-field.tsx

@@ -152,7 +152,7 @@ const DecimalField = ({
             {...fieldProps}
             inputComponent={DecimalInput}
             inputProps={{maxDecimals}}
-            dataAttributes={{'component-name': 'DecimalField', testid: 'DecimalField', ...dataAttributes}}
+            dataAttributes={{testid: 'DecimalField', ...dataAttributes}}
         />
     );
 };

package/src/dialog.tsx

@@ -46,7 +46,7 @@ export interface ConfirmProps extends BaseDialogProps {
 export interface ExtendedDialogProps extends BaseDialogProps {
     asset?: React.ReactElement;
     subtitle?: string;
-    extra?: React.ReactNode;
+    slot?: React.ReactNode;
     cancelText?: string;
     onCancel?: () => void;
     link?: RendersNullableElement<typeof ButtonLink>;
@@ -66,7 +66,7 @@ const InternalDialog = (props: InternalDialogProps) => {
         title,
         message,
         asset,
-        extra,
+        slot,
         showCancelButton,
         showAcceptButton,
         cancelText = texts.dialogCancelButton || t(tokens.dialogCancelButton),
@@ -111,7 +111,7 @@ const InternalDialog = (props: InternalDialogProps) => {
                     <Text3 color={vars.colors.textSecondary} regular>
                         {message}
                     </Text3>
-                    {extra}
+                    {slot}
                 </Stack>
             </div>
 
@@ -366,7 +366,7 @@ const ModalDialog = (props: ModalDialogProps): JSX.Element => {
                     aria-hidden={isClosing || !isReady}
                 >
                     {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
-                    <div role="dialog" onClick={(e) => e.stopPropagation()} data-component-name="Dialog">
+                    <div role="dialog" onClick={(e) => e.stopPropagation()} data-testid="Dialog">
                         <div
                             ref={dialogContentRef}
                             onAnimationEnd={(e) => {

package/src/drawer.tsx

@@ -188,7 +188,7 @@ const Drawer = ({
                 aria-modal="true"
                 className={styles.drawer}
                 ref={setScrollableParentElement}
-                {...getPrefixedDataAttributes(dataAttributes, 'Drawer')}
+                {...getPrefixedDataAttributes({testid: 'Drawer', ...dataAttributes})}
             >
                 {onDismiss && (
                     <div className={styles.closeButtonContainer}>

package/src/email-field.tsx

@@ -68,7 +68,7 @@ const EmailField = ({
             type="email"
             inputMode="email"
             autoComplete={autoComplete}
-            dataAttributes={{'component-name': 'EmailField', testid: 'EmailField', ...dataAttributes}}
+            dataAttributes={{testid: 'EmailField', ...dataAttributes}}
         />
     );
 };

package/src/empty-state.css.ts

@@ -21,7 +21,7 @@ export const container = style([
                 maxWidth: 368,
             },
             [mq.desktopOrBigger]: {
-                borderRadius: skin.vars.borderRadii.legacyDisplay,
+                borderRadius: skin.vars.borderRadii.container,
                 flexDirection: 'row',
                 overflow: 'hidden',
                 backgroundColor,

package/src/empty-state.tsx

@@ -87,7 +87,7 @@ const EmptyState = ({
             })}
             aria-label={ariaLabel}
             role="region"
-            {...getPrefixedDataAttributes(dataAttributes, 'EmptyState')}
+            {...getPrefixedDataAttributes({testid: 'EmptyState', ...dataAttributes})}
         >
             <div style={{flex: 1}}>
                 <Stack

package/src/fade-in.tsx

@@ -23,7 +23,7 @@ const FadeIn = ({
 }: Props): JSX.Element => {
     return (
         <div
-            {...getPrefixedDataAttributes(dataAttributes, 'FadeIn')}
+            {...getPrefixedDataAttributes({testid: 'FadeIn', ...dataAttributes})}
             className={`${styles.wrapper} ${className}`}
             style={{
                 animationDelay: delay,

package/src/feedback.tsx

@@ -2,10 +2,9 @@
 import * as React from 'react';
 import {useTheme, useScreenSize} from './hooks';
 import ButtonFixedFooterLayout from './button-fixed-footer-layout';
-import {VIVO_NEW_SKIN, VIVO_SKIN} from './skins/constants';
+import {VIVO_EVOLUTION_SKIN, VIVO_SKIN} from './skins/constants';
 import {useSetOverscrollColor} from './overscroll-color-context';
 import IconSuccess from './icons/icon-success';
-import IconSuccessVivo from './icons/icon-success-vivo';
 import IconError from './icons/icon-error';
 import IconInfo from './icons/icon-info';
 import {
@@ -60,12 +59,7 @@ const useHapticFeedback = (type?: HapticFeedback) => {
 };
 
 const renderFeedbackBody = (
-    {
-        asset,
-        title,
-        description,
-        extra,
-    }: Pick<FeedbackScreenProps, 'asset' | 'title' | 'description' | 'extra'>,
+    {asset, title, description, slot}: Pick<FeedbackScreenProps, 'asset' | 'title' | 'description' | 'slot'>,
     animateText: boolean
 ) => {
     const normalizedDescription =
@@ -101,7 +95,7 @@ const renderFeedbackBody = (
                     </div>
                 )}
 
-                {extra && (
+                {slot && (
                     <div
                         className={classnames(
                             animateText &&
@@ -111,7 +105,7 @@ const renderFeedbackBody = (
                         )}
                         data-testid="slot"
                     >
-                        {extra}
+                        {slot}
                     </div>
                 )}
             </Stack>
@@ -143,7 +137,7 @@ const renderFeedback = ({
     dataAttributes?: DataAttributes;
 }) => (
     <InternalBoxed
-        borderRadius={vars.borderRadii.legacyDisplay}
+        borderRadius={vars.borderRadii.container}
         desktopOnly
         variant={isBrandVariant ? 'brand' : 'default'}
         dataAttributes={dataAttributes}
@@ -181,7 +175,7 @@ type FeedbackButtonsProps = ButtonGroupProps;
 interface FeedbackProps extends FeedbackButtonsProps {
     title: string;
     description?: string | ReadonlyArray<string>;
-    extra?: React.ReactNode;
+    slot?: React.ReactNode;
     unstable_inlineInDesktop?: boolean;
     dataAttributes?: DataAttributes;
 }
@@ -195,24 +189,19 @@ interface FeedbackScreenProps extends AssetFeedbackProps {
     hapticFeedback?: HapticFeedback;
     asset?: React.ReactNode;
     animateText?: boolean;
-    /**
-     * @deprecated use variant="brand" instead
-     */
-    isInverse?: boolean;
     variant?: 'default' | 'brand';
 }
 
 export const FeedbackScreen = ({
     title,
     description,
-    extra,
+    slot,
     primaryButton,
     secondaryButton,
     link,
     hapticFeedback,
     asset,
     animateText = false,
-    isInverse = false,
     variant = 'default',
     unstable_inlineInDesktop,
     imageUrl,
@@ -226,7 +215,7 @@ export const FeedbackScreen = ({
     const hasButtons = checkHasButtons({primaryButton, secondaryButton, link});
 
     const feedbackBody = renderFeedbackBody(
-        {asset, title, description, extra},
+        {asset, title, description, slot},
         animateText && areAnimationsSupported(platformOverrides)
     );
 
@@ -238,7 +227,7 @@ export const FeedbackScreen = ({
         });
     }
 
-    const isBrandVariant = variant === 'brand' || isInverse;
+    const isBrandVariant = variant === 'brand';
 
     return (
         <div style={{position: 'relative'}}>
@@ -305,9 +294,7 @@ export const SuccessFeedbackScreen = ({dataAttributes, ...props}: AssetFeedbackP
             }
             hapticFeedback="success"
             asset={
-                skinName === VIVO_SKIN ? (
-                    <IconSuccessVivo size="100%" />
-                ) : skinName === VIVO_NEW_SKIN ? (
+                skinName === VIVO_SKIN || skinName === VIVO_EVOLUTION_SKIN ? (
                     <IconSuccessVivoNew size="100%" />
                 ) : (
                     <IconSuccess size="100%" />
@@ -317,7 +304,6 @@ export const SuccessFeedbackScreen = ({dataAttributes, ...props}: AssetFeedbackP
             imageUrl={props.imageUrl}
             imageFit={props.imageFit}
             dataAttributes={{
-                'component-name': 'SuccessFeedbackScreen',
                 testid: 'SuccessFeedbackScreen',
                 ...dataAttributes,
             }}
@@ -341,13 +327,12 @@ export const ErrorFeedbackScreen = ({
             asset={<IconError size="100%" />}
             animateText
             dataAttributes={{
-                'component-name': 'ErrorFeedbackScreen',
                 testid: 'ErrorFeedbackScreen',
                 ...dataAttributes,
             }}
-            extra={
+            slot={
                 <Stack space={16}>
-                    {otherProps.extra}
+                    {otherProps.slot}
                     {errorReference && (
                         <Text2 color={vars.colors.textSecondary} regular>
                             {errorReference}
@@ -371,7 +356,6 @@ export const InfoFeedbackScreen = ({
     return (
         <FeedbackScreen
             dataAttributes={{
-                'component-name': 'InfoFeedbackScreen',
                 testid: 'InfoFeedbackScreen',
                 ...dataAttributes,
             }}
@@ -384,7 +368,7 @@ export const InfoFeedbackScreen = ({
 export const SuccessFeedback = ({
     title,
     description,
-    extra,
+    slot,
     primaryButton,
     secondaryButton,
     link,
@@ -396,15 +380,13 @@ export const SuccessFeedback = ({
     const {skinName, platformOverrides, themeVariants} = useTheme();
 
     const asset =
-        skinName === VIVO_SKIN ? (
-            <IconSuccessVivo size="100%" />
-        ) : skinName === VIVO_NEW_SKIN ? (
+        skinName === VIVO_SKIN || skinName === VIVO_EVOLUTION_SKIN ? (
             <IconSuccessVivoNew size="100%" />
         ) : (
             <IconSuccess size="100%" />
         );
     const feedbackBody = renderFeedbackBody(
-        {asset, title, description, extra},
+        {asset, title, description, slot},
         areAnimationsSupported(platformOverrides)
     );
     const inlineFeedbackBody = renderInlineFeedbackBody(feedbackBody, {
@@ -427,6 +409,6 @@ export const SuccessFeedback = ({
         ),
         imageFit,
         imageUrl,
-        dataAttributes: {'component-name': 'SuccessFeedback', testid: 'SuccessFeedback', ...dataAttributes},
+        dataAttributes: {testid: 'SuccessFeedback', ...dataAttributes},
     });
 };

package/src/file-upload.tsx

@@ -465,7 +465,6 @@ const FileUpload = (props: Props): JSX.Element => {
         return (
             <div
                 {...getPrefixedDataAttributes({
-                    'component-name': 'FileUpload',
                     testid: 'FileUpload',
                     ...dataAttributes,
                 })}
@@ -502,10 +501,7 @@ const FileUpload = (props: Props): JSX.Element => {
     const assetClassName = withDropZone && isDragActive ? styles.assetScaleActive : '';
 
     return (
-        <Stack
-            space={16}
-            dataAttributes={{'component-name': 'FileUpload', testid: 'FileUpload', ...dataAttributes}}
-        >
+        <Stack space={16} dataAttributes={{testid: 'FileUpload', ...dataAttributes}}>
             <Stack space={4}>
                 <div {...dropZoneHandlers} className={contentClassName}>
                     {withDropZone && !disabled && (

package/src/fixed-footer-layout.tsx

@@ -209,7 +209,6 @@ const FixedFooterLayout = ({
                     <div
                         role={footerRole}
                         ref={ref}
-                        data-component-name="FixedFooter"
                         data-testid="FixedFooter"
                         style={{
                             height: footerHeight,

package/src/form.tsx

@@ -267,7 +267,7 @@ const Form = ({
                 ref={formRef}
                 className={classnames(styles.form, className)}
                 noValidate
-                {...getPrefixedDataAttributes(dataAttributes, 'Form')}
+                {...getPrefixedDataAttributes({testid: 'Form', ...dataAttributes})}
             >
                 {hasMultipleFormErrors ? (
                     <ScreenReaderOnly>

package/src/grid-layout.tsx

@@ -81,7 +81,7 @@ const GridLayout = ({
     collapseBreakpoint = 'tablet',
     children,
 }: Props): JSX.Element => {
-    const prefixedDataAttributes = getPrefixedDataAttributes(dataAttributes, 'GridLayout');
+    const prefixedDataAttributes = getPrefixedDataAttributes({testid: 'GridLayout', ...dataAttributes});
 
     const spanStyles = (n: number) => ({
         className: classnames(styles.span, {