@telefonica/mistica 16.59.0-beta.1 → 16.60.0

package/src/list.tsx

@@ -1,963 +0,0 @@
-/*
- * Specs:
- *   - Structure: https://www.figma.com/file/Be8QB9onmHunKCCAkIBAVr/Lists-Component-Specs?node-id=0%3A2
- *   - Behavior: https://www.figma.com/file/Be8QB9onmHunKCCAkIBAVr/Lists-Component-Specs?node-id=0%3A608
- *   - Assets: https://www.figma.com/file/Be8QB9onmHunKCCAkIBAVr/Lists-Component-Specs?node-id=0%3A1
- */
-
-'use client';
-import * as React from 'react';
-import classNames from 'classnames';
-import {BaseTouchable} from './touchable';
-import {Text, Text2, Text1} from './text';
-import Box from './box';
-import Stack from './stack';
-import Badge from './badge';
-import {useThemeVariant} from './theme-variant-context';
-import IconChevronRightFilled from './generated/mistica-icons/icon-chevron-right-filled';
-import Switch from './switch-component';
-import RadioButton, {useRadioContext} from './radio-button';
-import Checkbox from './checkbox';
-import {InternalBoxed} from './boxed';
-import Divider from './divider';
-import {getPrefixedDataAttributes} from './utils/dom';
-import * as styles from './list.css';
-import * as mediaStyles from './image.css';
-import {vars} from './skins/skin-contract.css';
-import {applyCssVars} from './utils/css';
-import {IconButton, ToggleIconButton} from './icon-button';
-import ScreenReaderOnly from './screen-reader-only';
-import {useTheme} from './hooks';
-
-import type {IconButtonProps, ToggleIconButtonProps} from './icon-button';
-import type {TouchableElement, TouchableProps} from './touchable';
-import type {DataAttributes, TrackingEvent, IconProps} from './utils/types';
-import type {ExclusifyUnion} from './utils/utility-types';
-
-type Right = (({centerY}: {centerY: boolean}) => React.ReactNode) | React.ReactNode;
-
-interface CommonProps {
-    children?: void; // no children allowed
-    headline?: string | React.ReactNode;
-    title: string;
-    titleAs?: string;
-    titleLinesMax?: number;
-    subtitle?: string;
-    subtitleLinesMax?: number;
-    description?: string | null;
-    descriptionLinesMax?: number;
-    detail?: string;
-    asset?: React.ReactNode;
-    badge?: boolean | number;
-    role?: string;
-    touchableRole?: string;
-    extra?: React.ReactNode;
-    dataAttributes?: DataAttributes;
-    disabled?: boolean;
-    withChevron?: boolean;
-    'aria-label'?: string;
-    right?: Right;
-    danger?: boolean;
-    tabIndex?: number;
-}
-
-const renderRight = (right: Right, centerY: boolean) => {
-    if (typeof right === 'function') return right?.({centerY});
-
-    return centerY ? (
-        <div style={{display: 'flex', alignItems: 'center', height: '100%'}}>
-            <div>{right}</div>
-        </div>
-    ) : (
-        right
-    );
-};
-
-interface ContentProps extends CommonProps {
-    headlineRef?: React.Ref<HTMLDivElement>;
-    rightRef?: React.Ref<HTMLDivElement>;
-    extraRef?: React.Ref<HTMLDivElement>;
-    control?: React.ReactNode;
-    /** This id is to link the title with the related control */
-    labelId?: string;
-}
-
-export const Content = ({
-    withChevron,
-    headline,
-    headlineRef,
-    extraRef,
-    title,
-    titleAs,
-    titleLinesMax,
-    subtitle,
-    subtitleLinesMax,
-    description,
-    descriptionLinesMax,
-    detail,
-    asset,
-    danger,
-    badge,
-    right,
-    rightRef,
-    extra,
-    labelId,
-    disabled,
-    control,
-}: ContentProps): JSX.Element => {
-    const outsideVariant = useThemeVariant();
-    const numTextLines = [headline, title, subtitle, description, extra].filter(Boolean).length;
-    const centerY = numTextLines === 1;
-    const {textPresets} = useTheme();
-
-    return (
-        <div className={styles.content} id={labelId}>
-            {asset && (
-                <div
-                    className={classNames(styles.assetContainer, {
-                        [styles.center]: centerY,
-                        [styles.disabled]: disabled,
-                    })}
-                    // We don't want asset to be readable by screen readers
-                    aria-hidden
-                    data-testid="asset"
-                >
-                    <div
-                        className={styles.asset}
-                        style={applyCssVars({
-                            color: danger
-                                ? {
-                                      default: vars.colors.textError,
-                                      alternative: vars.colors.textError,
-                                      brand: vars.colors.textErrorBrand,
-                                      negative: vars.colors.textErrorNegative,
-                                      media: vars.colors.textErrorBrand,
-                                  }[outsideVariant]
-                                : {
-                                      default: vars.colors.textPrimary,
-                                      alternative: vars.colors.textPrimary,
-                                      brand: vars.colors.textPrimaryBrand,
-                                      negative: vars.colors.textPrimaryNegative,
-                                      media: vars.colors.textPrimaryMedia,
-                                  }[outsideVariant],
-                            [mediaStyles.vars.mediaBorderRadius]: vars.borderRadii.mediaSmall,
-                        })}
-                    >
-                        {asset}
-                    </div>
-                </div>
-            )}
-
-            <div
-                className={classNames(styles.rowBody, {[styles.disabled]: disabled})}
-                style={{justifyContent: centerY ? 'center' : 'flex-start'}}
-            >
-                <Text
-                    mobileSize={textPresets.text3.size.mobile}
-                    desktopSize={textPresets.text3.size.desktop}
-                    mobileLineHeight={textPresets.text3.lineHeight.mobile}
-                    desktopLineHeight={textPresets.text3.lineHeight.desktop}
-                    weight={textPresets.rowTitle.weight}
-                    color={danger ? vars.colors.textError : vars.colors.textPrimary}
-                    truncate={titleLinesMax}
-                    hyphens="auto"
-                    as={titleAs}
-                    dataAttributes={{testid: 'title'}}
-                >
-                    {title}
-                </Text>
-                {headline && (
-                    <div ref={headlineRef} style={{order: -1, paddingBottom: 4}}>
-                        <Text1
-                            regular
-                            color={vars.colors.textPrimary}
-                            hyphens="auto"
-                            dataAttributes={{testid: 'headline'}}
-                        >
-                            {headline}
-                        </Text1>
-                    </div>
-                )}
-                {subtitle && (
-                    <Box paddingTop={2}>
-                        <Text2
-                            regular
-                            color={vars.colors.textPrimary}
-                            truncate={subtitleLinesMax}
-                            hyphens="auto"
-                            dataAttributes={{testid: 'subtitle'}}
-                        >
-                            {subtitle}
-                        </Text2>
-                    </Box>
-                )}
-                {description && (
-                    <Box paddingTop={2}>
-                        <Text2
-                            regular
-                            color={vars.colors.textSecondary}
-                            truncate={descriptionLinesMax}
-                            hyphens="auto"
-                            dataAttributes={{testid: 'description'}}
-                        >
-                            {description}
-                        </Text2>
-                    </Box>
-                )}
-                {extra && (
-                    <Box ref={extraRef} paddingTop={2} dataAttributes={{testid: 'slot'}}>
-                        {extra}
-                    </Box>
-                )}
-            </div>
-
-            {badge && (
-                <Box paddingLeft={16}>
-                    <div className={classNames(styles.badge, {[styles.disabled]: disabled})}>
-                        <Badge value={badge === true ? undefined : badge} />
-                    </div>
-                </Box>
-            )}
-
-            {(detail || right || withChevron || control) && (
-                <div className={classNames(styles.rightContent, {[styles.rightRestrictedWidth]: !!detail})}>
-                    {detail && (
-                        <div className={classNames(styles.detail, {[styles.disabled]: disabled})}>
-                            <Text2
-                                regular
-                                color={vars.colors.textSecondary}
-                                hyphens="auto"
-                                dataAttributes={{testid: 'detail'}}
-                            >
-                                {detail}
-                            </Text2>
-                        </div>
-                    )}
-
-                    {right && (
-                        <div
-                            className={classNames({
-                                [styles.detailRight]: !!detail,
-                                [styles.disabled]: disabled,
-                            })}
-                            ref={rightRef}
-                            data-testid="endSlot"
-                        >
-                            {renderRight(right, centerY)}
-                        </div>
-                    )}
-
-                    {withChevron && (
-                        <div
-                            style={{paddingLeft: detail || right ? 4 : 0}}
-                            className={classNames(styles.center, {[styles.disabled]: disabled})}
-                            data-testid="chevron"
-                        >
-                            <IconChevronRightFilled
-                                size={16}
-                                color={
-                                    {
-                                        default: vars.colors.chevronIndicator,
-                                        alternative: vars.colors.chevronIndicator,
-                                        brand: vars.colors.textSecondaryBrand,
-                                        negative: vars.colors.textSecondaryNegative,
-                                        media: vars.colors.textSecondaryBrand,
-                                    }[outsideVariant]
-                                }
-                            />
-                        </div>
-                    )}
-
-                    {control && (
-                        <div style={{paddingLeft: detail || right ? 8 : 0}} className={styles.center}>
-                            {control}
-                        </div>
-                    )}
-                </div>
-            )}
-        </div>
-    );
-};
-
-type ControlProps = {
-    name?: string;
-    value?: boolean;
-    defaultValue?: boolean;
-    onChange?: (checked: boolean) => void;
-};
-
-interface BasicRowContentProps extends CommonProps {
-    atomicReading?: boolean;
-}
-
-interface SwitchRowContentProps extends CommonProps {
-    onPress?: (() => void) | undefined;
-    trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
-
-    switch: ControlProps | undefined;
-}
-
-interface CheckboxRowContentProps extends CommonProps {
-    onPress?: (() => void) | undefined;
-    trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
-
-    checkbox: ControlProps | undefined;
-}
-
-interface RadioRowContentProps extends CommonProps {
-    onPress?: (() => void) | undefined;
-    trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
-
-    radioValue: string;
-}
-
-interface IconButtonRowContentProps extends CommonProps {
-    onPress?: (() => void) | undefined;
-    trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
-
-    iconButton: ExclusifyUnion<IconButtonProps | ToggleIconButtonProps> | undefined;
-}
-
-type TouchableCommonProps = {
-    trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
-    'aria-label'?: string;
-    'aria-labelledby'?: string;
-    'aria-description'?: string;
-    'aria-describedby'?: string;
-    'aria-current'?: React.AriaAttributes['aria-current'];
-};
-
-interface HrefRowContentProps extends CommonProps, TouchableCommonProps {
-    href: string | undefined;
-    newTab?: boolean;
-    loadOnTop?: boolean;
-    onNavigate?: () => void | Promise<void>;
-}
-
-interface ToRowContentProps extends CommonProps, TouchableCommonProps {
-    to: string | undefined;
-    newTab?: boolean;
-    fullPageOnWebView?: boolean;
-    replace?: boolean;
-    onNavigate?: () => void | Promise<void>;
-}
-
-interface OnPressRowContentProps extends CommonProps, TouchableCommonProps {
-    onPress: (() => void) | undefined;
-}
-
-type RowContentProps = ExclusifyUnion<
-    | BasicRowContentProps
-    | SwitchRowContentProps
-    | RadioRowContentProps
-    | IconButtonRowContentProps
-    | CheckboxRowContentProps
-    | HrefRowContentProps
-    | ToRowContentProps
-    | OnPressRowContentProps
->;
-
-const useControlState = ({
-    value,
-    defaultValue,
-    onChange,
-}: {
-    value?: boolean;
-    defaultValue?: boolean;
-    onChange?: (isChecked: boolean) => void;
-}): [boolean, () => void] => {
-    const isControlledByParent = value !== undefined;
-    const [isChecked, setIsChecked] = React.useState<boolean>(!!defaultValue);
-
-    const toggle = () => {
-        if (!isControlledByParent) {
-            setIsChecked(!isChecked);
-        }
-        onChange?.(isControlledByParent ? !value : !isChecked);
-    };
-
-    return [isControlledByParent ? !!value : isChecked, toggle];
-};
-
-const hasControlProps = (
-    obj: any
-): obj is
-    | SwitchRowContentProps
-    | CheckboxRowContentProps
-    | RadioRowContentProps
-    | IconButtonRowContentProps => {
-    return ['switch', 'checkbox', 'radioValue', 'iconButton'].some((prop) => obj[prop] !== undefined);
-};
-
-const getAssetText = (asset: React.ReactNode): string => {
-    let text = '';
-
-    const visit = (node: React.ReactNode) => {
-        if (!node) return;
-
-        if (React.isValidElement(node)) {
-            const props: any = node.props;
-
-            if (typeof props.alt === 'string' && props.alt.trim()) {
-                text += (text ? ' ' : '') + props.alt.trim();
-            }
-            if (typeof props['aria-label'] === 'string' && props['aria-label'].trim()) {
-                text += (text ? ' ' : '') + props['aria-label'].trim();
-            }
-            React.Children.forEach(props.children, visit);
-        }
-    };
-
-    visit(asset);
-
-    return text.trim();
-};
-
-const getNodeText = (node: HTMLElement | null): string => {
-    const raw = node?.innerText || node?.textContent || '';
-    /* In the real browser, innerText preserves line breaks between elements, but jsdom does not. 
-    As a result, when rows contain multiline content (e.g. `extra` with several Text components), jsdom returns the text concatenated without spaces. 
-    This causes the computed aria-label to differ from the real behaviour. 
-    To make tests reflect what VoiceOver would read in the browser, we normalise whitespace and insert missing spaces in test mode. */
-    if (process.env.NODE_ENV === 'test') {
-        return (
-            raw
-                // Normalise whitespace sequences to a single space
-                .replace(/\s+/g, ' ')
-                // Insert space between "non-space character" + "Uppercase"
-                // Ex: "lineExtra" -> "line Extra", "1Extra" -> "1 Extra"
-                .replace(/([^ ])([A-ZÁÉÍÓÚÑ])/g, '$1 $2')
-                .trim()
-        );
-    }
-    return raw;
-};
-
-const RowContent = React.forwardRef<TouchableElement, RowContentProps>((props, ref) => {
-    const titleId = React.useId();
-    const outsideVariant = useThemeVariant();
-    const isOverBrand =
-        outsideVariant === 'brand' || outsideVariant === 'media' || outsideVariant === 'negative';
-    const {
-        asset,
-        headline,
-        title,
-        titleAs,
-        titleLinesMax,
-        subtitle,
-        subtitleLinesMax,
-        description,
-        descriptionLinesMax,
-        detail,
-        danger,
-        badge,
-        role,
-        touchableRole,
-        extra,
-        withChevron,
-        dataAttributes,
-        right,
-        'aria-label': ariaLabelProp,
-        tabIndex,
-        atomicReading,
-    } = props;
-
-    const [headlineText, setHeadlineText] = React.useState<string>('');
-    const [extraText, setExtraText] = React.useState<string>('');
-    const [rightText, setRightText] = React.useState<string>('');
-    const assetText = getAssetText(asset);
-
-    // iOS voiceover reads links with multiple lines as separate links. By setting aria-label and marking content as aria-hidden, we can make it read the whole row as one link.
-    const computedAriaLabel = [
-        title,
-        assetText,
-        headlineText,
-        subtitle,
-        description,
-        extraText,
-        detail,
-        rightText,
-    ]
-        .filter(Boolean)
-        .join(' ');
-
-    const isInteractive = !!props.onPress || !!props.href || !!props.to;
-    const ariaLabel = ariaLabelProp ?? (isInteractive ? computedAriaLabel : undefined);
-
-    const radioContext = useRadioContext();
-    const disabled = props.disabled || (props.radioValue !== undefined && radioContext.disabled);
-    const hasHoverDefault = !disabled && !isOverBrand;
-    const hasHoverInverse = !disabled && isOverBrand;
-    const hasControl = hasControlProps(props);
-    const hasChevron = hasControl ? false : withChevron ?? isInteractive;
-
-    const interactiveProps = {
-        href: props.href,
-        newTab: props.newTab,
-        loadOnTop: props.loadOnTop,
-
-        to: props.to,
-        fullPageOnWebView: props.fullPageOnWebView,
-        replace: props.replace,
-
-        onNavigate: props.onNavigate,
-        onPress: props.onPress,
-        trackingEvent: props.trackingEvent,
-
-        'aria-label': ariaLabel,
-        'aria-labelledby': props['aria-labelledby'],
-        'aria-description': props['aria-description'],
-        'aria-describedby': props['aria-describedby'],
-        'aria-current': props['aria-current'],
-    } as TouchableProps;
-
-    const [isChecked, toggle] = useControlState(props.switch || props.checkbox || {});
-
-    const renderContent = (contentProps?: {control?: React.ReactNode; labelId?: string; role?: string}) => (
-        <Content
-            asset={asset}
-            headline={headline}
-            headlineRef={(node) => {
-                if (node) {
-                    setHeadlineText(getNodeText(node));
-                }
-            }}
-            title={title}
-            titleAs={titleAs}
-            subtitle={subtitle}
-            description={description}
-            badge={badge}
-            titleLinesMax={titleLinesMax}
-            subtitleLinesMax={subtitleLinesMax}
-            descriptionLinesMax={descriptionLinesMax}
-            detail={detail}
-            danger={danger}
-            right={right}
-            rightRef={(node) => {
-                if (node) {
-                    setRightText(getNodeText(node));
-                }
-            }}
-            control={contentProps?.control}
-            role={contentProps?.role}
-            extra={extra}
-            extraRef={(node) => {
-                if (node) {
-                    setExtraText(getNodeText(node));
-                }
-            }}
-            labelId={contentProps?.labelId}
-            disabled={disabled}
-            withChevron={hasChevron}
-        />
-    );
-
-    if (isInteractive && !hasControl) {
-        return (
-            <BaseTouchable
-                ref={ref}
-                className={classNames(styles.rowContent, {
-                    [styles.touchableBackground]: hasHoverDefault,
-                    [styles.touchableBackgroundBrand]: hasHoverInverse,
-                    [styles.pointer]: !disabled,
-                })}
-                {...interactiveProps}
-                role={touchableRole}
-                dataAttributes={dataAttributes}
-                disabled={disabled}
-                tabIndex={tabIndex}
-            >
-                <Box
-                    paddingX={16}
-                    aria-hidden={!!props.to || !!props.href || props.touchableRole === 'link' || undefined}
-                    dataAttributes={{testid: 'content-container'}}
-                >
-                    {renderContent({role})}
-                </Box>
-            </BaseTouchable>
-        );
-    }
-
-    const renderRowWithDoubleInteraction = (control: React.ReactNode) => (
-        <div
-            className={styles.dualActionContainer}
-            ref={ref as React.Ref<HTMLDivElement>}
-            {...getPrefixedDataAttributes(dataAttributes)}
-        >
-            <BaseTouchable
-                disabled={disabled}
-                {...interactiveProps}
-                role={touchableRole}
-                className={classNames(styles.dualActionLeft, {
-                    [styles.touchableBackground]: hasHoverDefault,
-                    [styles.touchableBackgroundBrand]: hasHoverInverse,
-                })}
-                tabIndex={tabIndex}
-            >
-                {renderContent({labelId: titleId, role})}
-            </BaseTouchable>
-
-            <div className={styles.dualActionDivider} />
-
-            {control}
-        </div>
-    );
-
-    const renderRowWithSingleControl = (content: React.ReactNode, isContentInsideControl?: boolean) => (
-        <div
-            className={classNames(styles.rowContent, {
-                [styles.touchableBackground]: hasHoverDefault && isContentInsideControl,
-                [styles.touchableBackgroundBrand]: hasHoverInverse && isContentInsideControl,
-                [styles.pointer]: !disabled && isContentInsideControl,
-            })}
-            ref={ref as React.Ref<HTMLDivElement>}
-            {...getPrefixedDataAttributes(dataAttributes)}
-        >
-            {content}
-        </div>
-    );
-
-    if (props.switch || props.checkbox) {
-        const Control = props.switch ? Switch : Checkbox;
-        const name = props.switch?.name ?? props.checkbox?.name ?? titleId;
-
-        return isInteractive
-            ? renderRowWithDoubleInteraction(
-                  <Control
-                      disabled={disabled}
-                      name={name}
-                      checked={isChecked}
-                      aria-label={ariaLabel}
-                      aria-labelledby={titleId}
-                      onChange={toggle}
-                      render={({controlElement}) => (
-                          <div className={styles.dualActionRight}>{controlElement}</div>
-                      )}
-                  />
-              )
-            : renderRowWithSingleControl(
-                  <Control
-                      disabled={disabled}
-                      name={name}
-                      checked={isChecked}
-                      aria-label={ariaLabel}
-                      aria-labelledby={titleId}
-                      onChange={toggle}
-                      render={({controlElement, labelId}) => (
-                          <Box paddingX={16} role={role}>
-                              {renderContent({
-                                  labelId,
-                                  control: <Stack space="around">{controlElement}</Stack>,
-                              })}
-                          </Box>
-                      )}
-                  />,
-                  true
-              );
-    }
-
-    if (props.radioValue) {
-        return isInteractive
-            ? renderRowWithDoubleInteraction(
-                  <RadioButton
-                      value={props.radioValue}
-                      aria-label={ariaLabel}
-                      aria-labelledby={titleId}
-                      render={({controlElement}) => (
-                          <Stack space="around">
-                              <Box paddingX={16}>{controlElement}</Box>
-                          </Stack>
-                      )}
-                  />
-              )
-            : renderRowWithSingleControl(
-                  <RadioButton
-                      value={props.radioValue}
-                      aria-label={ariaLabel}
-                      aria-labelledby={titleId}
-                      render={({controlElement}) => (
-                          <Box paddingX={16} role={role}>
-                              {renderContent({
-                                  labelId: titleId,
-                                  control: <Stack space="around">{controlElement}</Stack>,
-                              })}
-                          </Box>
-                      )}
-                  />,
-                  true
-              );
-    }
-
-    if (props.iconButton) {
-        return isInteractive
-            ? renderRowWithDoubleInteraction(
-                  <Box padding={16}>
-                      <Stack space="around">
-                          {props.iconButton.Icon ? (
-                              <IconButton {...props.iconButton} disabled={props.disabled} />
-                          ) : (
-                              <ToggleIconButton {...props.iconButton} disabled={props.disabled} />
-                          )}
-                      </Stack>
-                  </Box>
-              )
-            : renderRowWithSingleControl(
-                  <Box paddingX={16}>
-                      {renderContent({
-                          labelId: titleId,
-                          control: (
-                              <Stack space="around">
-                                  {props.iconButton.Icon ? (
-                                      <IconButton
-                                          {...props.iconButton}
-                                          disabled={props.disabled}
-                                          role={role}
-                                      />
-                                  ) : (
-                                      <ToggleIconButton
-                                          {...props.iconButton}
-                                          disabled={props.disabled}
-                                          role={role}
-                                      />
-                                  )}
-                              </Stack>
-                          ),
-                      })}
-                  </Box>
-              );
-    }
-
-    const shouldRenderScreenReaderOnly = !!ariaLabelProp || atomicReading;
-
-    return (
-        <div role={role}>
-            <div
-                className={classNames(styles.rowContent, styles.rowContentPadding)}
-                // role="text" makes VoiceOver read the whole div as a single text block. This is needed for VoiceOver rectangle to
-                // cover the whole row, otherwise it only covers the text inside ScreenReaderOnly
-                role={shouldRenderScreenReaderOnly ? 'text' : undefined}
-                {...getPrefixedDataAttributes(dataAttributes)}
-                ref={ref as React.Ref<HTMLDivElement>}
-                tabIndex={tabIndex}
-            >
-                <div aria-hidden={shouldRenderScreenReaderOnly}>{renderContent({role})}</div>
-                {shouldRenderScreenReaderOnly && (
-                    <ScreenReaderOnly>
-                        <span>{ariaLabelProp ?? computedAriaLabel}</span>
-                    </ScreenReaderOnly>
-                )}
-            </div>
-        </div>
-    );
-});
-
-export const Row = React.forwardRef<TouchableElement, RowContentProps>(
-    ({dataAttributes, role = 'listitem', ...props}, ref) => (
-        <div role={role} className={styles.row}>
-            <RowContent
-                {...props}
-                ref={ref}
-                dataAttributes={{'component-name': 'Row', testid: 'Row', ...dataAttributes}}
-            />
-        </div>
-    )
-);
-
-type CommonAccessibilityProps = {
-    'aria-live'?: 'polite' | 'off' | 'assertive';
-    'aria-atomic'?: boolean;
-};
-
-type RowListProps = {
-    children: React.ReactNode;
-    'aria-label'?: string;
-    'aria-labelledby'?: string;
-    /**
-     * @deprecated Use 'aria-labelledby' instead. This will be removed in a future release.
-     */
-    ariaLabelledby?: string;
-    role?: string;
-    dataAttributes?: DataAttributes;
-} & CommonAccessibilityProps;
-
-export const RowList = ({
-    children,
-    ariaLabelledby,
-    role = 'list',
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledBy = ariaLabelledby,
-    'aria-live': ariaLive = 'off',
-    'aria-atomic': ariaAtomic = false,
-    dataAttributes,
-}: RowListProps): JSX.Element => {
-    const childrenContent = React.Children.toArray(children).filter(Boolean);
-    const lastIndex = childrenContent.length - 1;
-
-    return (
-        <div
-            role={role}
-            aria-labelledby={ariaLabelledBy}
-            aria-label={ariaLabel}
-            aria-live={ariaLive}
-            aria-atomic={ariaAtomic}
-            {...getPrefixedDataAttributes(dataAttributes, 'RowList')}
-        >
-            {childrenContent.map((child, index) => (
-                <React.Fragment key={index}>
-                    {child}
-                    {index < lastIndex && (
-                        <Box paddingX={16}>
-                            <Divider />
-                        </Box>
-                    )}
-                </React.Fragment>
-            ))}
-        </div>
-    );
-};
-
-// danger + isInverse is not allowed
-type CommonBoxedRowProps =
-    | {
-          /**
-           * @deprecated Use variant instead
-           */
-          isInverse?: false;
-          variant?: 'default';
-          danger: true;
-      }
-    | {
-          /**
-           * @deprecated Use variant instead
-           */
-          isInverse?: boolean;
-          variant?: 'brand' | 'default';
-          danger?: false;
-      }
-    | {
-          /**
-           * @deprecated Use variant instead
-           */
-          isInverse?: false;
-          variant?: 'default';
-          danger: boolean;
-      };
-
-type BoxedRowProps = ExclusifyUnion<
-    | BasicRowContentProps
-    | SwitchRowContentProps
-    | RadioRowContentProps
-    | IconButtonRowContentProps
-    | CheckboxRowContentProps
-    | HrefRowContentProps
-    | ToRowContentProps
-    | OnPressRowContentProps
-> &
-    CommonBoxedRowProps;
-
-export const BoxedRow = React.forwardRef<HTMLDivElement, BoxedRowProps>(({dataAttributes, ...props}, ref) => (
-    <InternalBoxed
-        overflow="visible"
-        className={styles.boxed}
-        variant={props.variant ?? (props.isInverse ? 'brand' : 'default')}
-        ref={ref}
-        dataAttributes={{'component-name': 'BoxedRow', testid: 'BoxedRow', ...dataAttributes}}
-    >
-        <RowContent {...props} />
-    </InternalBoxed>
-));
-
-type BoxedRowListProps = {
-    children: React.ReactNode;
-    'aria-label'?: string;
-    'aria-labelledby'?: string;
-    /**
-     * @deprecated Use 'aria-labelledby' instead. This will be removed in a future release.
-     */
-    ariaLabelledby?: string;
-    role?: string;
-    dataAttributes?: DataAttributes;
-} & CommonAccessibilityProps;
-
-export const BoxedRowList = ({
-    children,
-    ariaLabelledby,
-    role = 'list',
-    dataAttributes,
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledBy = ariaLabelledby,
-    'aria-live': ariaLive = 'off',
-    'aria-atomic': ariaAtomic = false,
-}: BoxedRowListProps): JSX.Element => (
-    <Stack
-        space={16}
-        role={role}
-        aria-label={ariaLabel}
-        aria-labelledby={ariaLabelledBy}
-        aria-live={ariaLive}
-        aria-atomic={ariaAtomic}
-        dataAttributes={{'component-name': 'BoxedRowList', testid: 'BoxedRowList', ...dataAttributes}}
-    >
-        {children}
-    </Stack>
-);
-
-type UnorderedListProps = {
-    children: React.ReactNode;
-    'aria-label'?: string;
-    'aria-labelledby'?: string;
-};
-
-type OrderedListProps = UnorderedListProps;
-
-export const UnorderedList = ({
-    children,
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledBy,
-}: UnorderedListProps): JSX.Element => {
-    return (
-        // role="list" is needed for accesibility in Safari+VoiceOver. See: https://developer.mozilla.org/en-US/docs/Web/CSS/list-style#accessibility
-        // eslint-disable-next-line jsx-a11y/no-redundant-roles
-        <ul role="list" className={styles.ul} aria-label={ariaLabel} aria-labelledby={ariaLabelledBy}>
-            {children}
-        </ul>
-    );
-};
-
-export const OrderedList = ({
-    children,
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledBy,
-}: OrderedListProps): JSX.Element => {
-    return (
-        // role="list" is needed for accesibility in Safari+VoiceOver. See: https://developer.mozilla.org/en-US/docs/Web/CSS/list-style#accessibility
-        // eslint-disable-next-line jsx-a11y/no-redundant-roles
-        <ol role="list" className={styles.ul} aria-label={ariaLabel} aria-labelledby={ariaLabelledBy}>
-            {children}
-        </ol>
-    );
-};
-
-type ListItemProps = {
-    children: React.ReactNode;
-    Icon?: (props: IconProps) => JSX.Element;
-    icon?: JSX.Element;
-    withMarker?: boolean;
-};
-
-export const ListItem = ({children, Icon, icon, withMarker = true}: ListItemProps): JSX.Element => {
-    return !withMarker ? (
-        <li className={styles.liWithoutMarker}>
-            <div className={styles.liContent}>{children}</div>
-        </li>
-    ) : Icon || icon ? (
-        <li className={styles.liWithCustomIcon}>
-            <Box paddingRight={{mobile: 8, desktop: 16}}>
-                {Icon ? <Icon size="1em" color="currentColor" /> : icon}
-            </Box>
-            <div className={styles.liContent}>{children}</div>
-        </li>
-    ) : (
-        <li className={styles.li}>{children}</li>
-    );
-};