@telefonica/mistica 16.60.0 → 16.61.0

package/src/icon-button.tsx

@@ -0,0 +1,221 @@
+'use client';
+import * as React from 'react';
+import {BaseTouchable} from './touchable';
+import * as styles from './icon-button.css';
+import classNames from 'classnames';
+import Spinner from './spinner';
+import {useThemeVariant} from './theme-variant-context';
+
+import type {TouchableElement, TouchableComponentProps} from './touchable';
+import type {ExclusifyUnion} from './utils/utility-types';
+import type {DataAttributes, IconProps, TrackingEvent} from './utils/types';
+
+export type IconButtonType = 'neutral' | 'brand' | 'danger';
+export type IconButtonBackgroundType = 'transparent' | 'solid' | 'soft';
+
+type AriaProps = ExclusifyUnion<{'aria-label': string} | {'aria-labelledby': string}>;
+
+interface BaseProps {
+    children?: undefined;
+    trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
+    dataAttributes?: DataAttributes;
+    disabled?: boolean;
+    showSpinner?: boolean;
+    small?: boolean;
+    bleedLeft?: boolean;
+    bleedRight?: boolean;
+    bleedY?: boolean;
+    role?: string;
+}
+
+interface IconButtonBaseProps {
+    Icon: (props: IconProps) => JSX.Element;
+    type?: IconButtonType;
+    backgroundType?: IconButtonBackgroundType;
+}
+
+interface InternalIconButtonBaseProps {
+    hasOverlay?: boolean;
+    'aria-disabled'?: boolean;
+}
+
+export type IconButtonProps = TouchableComponentProps<BaseProps & IconButtonBaseProps & AriaProps>;
+
+export const RawIconButton = React.forwardRef<
+    TouchableElement,
+    IconButtonProps & InternalIconButtonBaseProps
+>(
+    (
+        {
+            disabled,
+            trackingEvent,
+            role,
+            dataAttributes,
+            type = 'neutral',
+            backgroundType = 'transparent',
+            hasOverlay = true,
+            small,
+            Icon,
+            bleedLeft,
+            bleedRight,
+            bleedY,
+            showSpinner: showSpinnerProp,
+            'aria-disabled': ariaDisabled,
+            ...touchableProps
+        },
+        ref
+    ) => {
+        const themeVariant = useThemeVariant();
+        const [isOnPressPromiseResolving, setIsOnPressPromiseResolving] = React.useState(false);
+
+        const showSpinner = showSpinnerProp || isOnPressPromiseResolving;
+
+        // This state is needed to not render the spinner when hidden (because it causes high CPU usage
+        // specially in iPhone). But we want the spinner to be visible during the show/hide animation.
+        // * When showSpinner prop is true, state is changed immediately.
+        // * When the transition ends this state is updated again if needed
+        const [shouldRenderSpinner, setShouldRenderSpinner] = React.useState(!!showSpinner);
+
+        React.useEffect(() => {
+            if (showSpinner && !shouldRenderSpinner) {
+                setShouldRenderSpinner(true);
+            }
+        }, [showSpinner, shouldRenderSpinner]);
+
+        const buttonSize = small ? 'small' : 'default';
+        const buttonTokensKey: keyof typeof styles.iconButtonTokens =
+            themeVariant === 'media' ? `${type}-media` : `${type}-${backgroundType}-${themeVariant}`;
+
+        const commonProps = {
+            disabled: disabled || showSpinner,
+            'aria-disabled': ariaDisabled,
+            ref,
+            trackingEvent,
+            role,
+            dataAttributes: {'component-name': 'IconButton', testid: 'IconButton', ...dataAttributes},
+            className: classNames(
+                styles.button,
+                styles.iconButtonTokens[buttonTokensKey],
+                styles.minimumInteractiveArea,
+                {
+                    [styles.disabled]: disabled || ariaDisabled,
+                    [styles.overlayContainer]: !disabled && !showSpinner && !ariaDisabled,
+                }
+            ),
+            resetMargin: !bleedLeft && !bleedRight && !bleedY,
+        };
+
+        const content = (
+            <div className={classNames(styles.iconContainer[buttonSize], {[styles.isLoading]: showSpinner})}>
+                {hasOverlay && <div className={styles.overlay} />}
+
+                <div aria-hidden={showSpinner ? true : undefined} className={styles.icon}>
+                    <Icon size={styles.iconSize[buttonSize]} color="currentColor" />
+                </div>
+
+                <div
+                    aria-hidden={showSpinner ? undefined : true}
+                    className={styles.spinner}
+                    onTransitionEnd={() => {
+                        if (showSpinner !== shouldRenderSpinner) {
+                            setShouldRenderSpinner(showSpinner);
+                        }
+                    }}
+                >
+                    {shouldRenderSpinner && (
+                        <Spinner size={styles.iconSize[buttonSize]} color="currentColor" delay="0s" />
+                    )}
+                </div>
+            </div>
+        );
+
+        if (touchableProps.onPress) {
+            const originalOnPress = touchableProps.onPress;
+            touchableProps.onPress = (e) => {
+                const promise = originalOnPress(e);
+                if (promise) {
+                    setIsOnPressPromiseResolving(true);
+                    promise.finally(() => setIsOnPressPromiseResolving(false));
+                }
+            };
+        }
+
+        return (
+            <div
+                className={classNames(styles.buttonContainer[buttonSize], {
+                    [styles.bleedLeft[buttonSize]]: bleedLeft,
+                    [styles.bleedRight[buttonSize]]: bleedRight,
+                    [styles.bleedY[buttonSize]]: bleedY,
+                })}
+            >
+                <BaseTouchable {...commonProps} {...touchableProps} maybe>
+                    {content}
+                </BaseTouchable>
+            </div>
+        );
+    }
+);
+
+export const InternalIconButton = React.forwardRef<
+    TouchableElement,
+    IconButtonProps & InternalIconButtonBaseProps
+>((props, ref) => <RawIconButton ref={ref} {...props} />);
+
+export const IconButton = React.forwardRef<TouchableElement, IconButtonProps>((props, ref) => (
+    <InternalIconButton ref={ref} {...props} />
+));
+
+type ToggleStateProps = {
+    Icon: (props: IconProps) => JSX.Element;
+    type?: IconButtonType;
+    backgroundType?: IconButtonBackgroundType;
+} & AriaProps;
+
+interface BaseToggleProps {
+    checkedProps: ToggleStateProps;
+    uncheckedProps: ToggleStateProps;
+    onChange?: (checked: boolean) => void | undefined | Promise<void>;
+    checked?: boolean;
+    defaultChecked?: boolean;
+}
+
+export type ToggleIconButtonProps = BaseProps & BaseToggleProps;
+
+export const InternalToggleIconButton = React.forwardRef<
+    TouchableElement,
+    ToggleIconButtonProps & InternalIconButtonBaseProps
+>(({checked, defaultChecked, checkedProps, uncheckedProps, onChange, dataAttributes, ...props}, ref) => {
+    const [checkedState, setCheckedState] = React.useState(!!defaultChecked);
+
+    const handleChange = () => {
+        if (checked === undefined) {
+            // if onChange is asynchronous, wait until it finishes and change the state if there was no error
+            const promise = onChange?.(!checkedState);
+            if (promise) {
+                return promise.then(() => setCheckedState((checkedState) => !checkedState)).catch(() => {});
+            } else {
+                setCheckedState((checkedState) => !checkedState);
+            }
+        } else {
+            return onChange?.(!checked);
+        }
+    };
+
+    return (
+        <RawIconButton
+            ref={ref}
+            {...props}
+            {...(checked ?? checkedState ? checkedProps : uncheckedProps)}
+            dataAttributes={{
+                'component-name': 'ToggleIconButton',
+                testid: 'ToggleIconButton',
+                ...dataAttributes,
+            }}
+            onPress={handleChange}
+        />
+    );
+});
+
+export const ToggleIconButton = React.forwardRef<TouchableElement, ToggleIconButtonProps>((props, ref) => {
+    return <InternalToggleIconButton ref={ref} {...props} />;
+});

package/src/icons/__stories__/mistica-icons-story.tsx

@@ -0,0 +1,192 @@
+import * as React from 'react';
+import {Box, ResponsiveLayout, Text} from '../..';
+import {kebabCase, camelCase, upperFirst, sortBy} from 'lodash';
+import {iconKeywords, iconCategories} from '../../generated/mistica-icons/icons-keywords';
+
+import type {Variant} from '../../theme-variant-context';
+
+/**
+ * './path/icon-name-filled.tsx' => 'IconNameFilled'
+ */
+const fileNameToComponentName = (fileName: string) => {
+    const lastSlashIdx = fileName.lastIndexOf('/');
+    return upperFirst(camelCase(fileName.slice(lastSlashIdx + 1).replace('.tsx', '')));
+};
+
+const iconModules = import.meta.glob(
+    ['../../generated/mistica-icons/**/*.tsx', '!../../generated/mistica-icons/icons-keywords.tsx'],
+    {eager: true}
+);
+
+// require all icons
+const misticaIcons = Object.entries(iconModules).map(([id, module]) => {
+    const component = (module as any).default;
+    component.componentName = fileNameToComponentName(id);
+    return component;
+});
+
+const availableCategories = ['All', ...new Set(sortBy(Object.values(iconCategories).flat()))];
+
+export default {
+    title: 'Icons/Catalog',
+    argTypes: {
+        size: {
+            control: {type: 'range', min: 16, max: 48, step: 4},
+        },
+        category: {
+            control: {type: 'select'},
+            options: availableCategories,
+        },
+        variantOutside: {
+            options: ['default', 'brand', 'negative', 'alternative'],
+            control: {type: 'select'},
+        },
+    },
+    parameters: {
+        fullScreen: true,
+    },
+};
+
+type Args = {
+    category: string;
+    filter: string;
+    size: number;
+    regular: boolean;
+    light: boolean;
+    filled: boolean;
+    variantOutside: Variant;
+    names: boolean;
+    background: boolean;
+};
+
+export const Catalog: StoryComponent<Args> = ({
+    category,
+    filter,
+    size,
+    regular,
+    light,
+    filled,
+    variantOutside,
+    names,
+    background,
+}) => {
+    const getRealName = (name: string) => name.replace(/^Icon/, '').replace(/(Regular|Filled|Light)$/, '');
+    const getTypeSortValue = (name: string) => {
+        if (name.endsWith('Regular')) {
+            return 0;
+        }
+        if (name.endsWith('Light')) {
+            return 1;
+        }
+        return 2;
+    };
+
+    const filterIcon = (name: string): boolean => {
+        if (!filled && name.endsWith('Filled')) {
+            return false;
+        }
+        if (!light && name.endsWith('Light')) {
+            return false;
+        }
+        if (!regular && name.endsWith('Regular')) {
+            return false;
+        }
+
+        const realName = getRealName(name);
+        const iconKeywordsData = iconKeywords[kebabCase(realName)];
+        const iconCategoriesData = iconCategories[kebabCase(realName)];
+
+        if (category && category !== 'All') {
+            const categories = iconCategoriesData || [];
+
+            if (!categories.includes(category)) {
+                return false;
+            }
+        }
+
+        if (filter) {
+            const keywords = iconKeywordsData || [];
+            const categories = iconCategoriesData || [];
+            const allSearchableTerms = [...keywords, ...categories, realName.toLowerCase()];
+            return allSearchableTerms.some((key) => key.toLowerCase().includes(filter.toLowerCase()));
+        }
+
+        return true;
+    };
+
+    const compareNames = (a: string, b: string): number => {
+        const realA = getRealName(a);
+        const realB = getRealName(b);
+        if (realA < realB) {
+            return -1;
+        }
+        if (realA > realB) {
+            return 1;
+        }
+        return getTypeSortValue(a) < getTypeSortValue(b) ? -1 : 1;
+    };
+
+    const breakName = (name: string) =>
+        kebabCase(name)
+            .split('-')
+            .map(upperFirst)
+            .map((part, i) => (
+                <span key={i}>
+                    {part}
+                    <wbr />
+                </span>
+            ));
+
+    const iconBackgroundColor = background ? '#aaa' : 'none';
+
+    return (
+        <ResponsiveLayout fullWidth variant={variantOutside}>
+            {misticaIcons
+                .filter(({componentName}) => filterIcon(componentName))
+                .sort((a, b) => compareNames(a.componentName, b.componentName))
+                .map((Icon, index) => (
+                    <div
+                        key={index}
+                        style={{display: 'inline-block', verticalAlign: 'top', textAlign: 'center'}}
+                    >
+                        <div
+                            style={{
+                                textAlign: 'center',
+                                padding: 16,
+                                width: size,
+                                minWidth: names ? 100 : 0,
+                            }}
+                        >
+                            <div
+                                style={{
+                                    width: size,
+                                    margin: 'auto',
+                                    background: iconBackgroundColor,
+                                    fontSize: 0,
+                                }}
+                            >
+                                <Icon size={size} />
+                            </div>
+                            {names && (
+                                <Box paddingTop={8}>
+                                    <Text size={13}>{breakName(Icon.componentName)}</Text>
+                                </Box>
+                            )}
+                        </div>
+                    </div>
+                ))}
+        </ResponsiveLayout>
+    );
+};
+
+Catalog.args = {
+    category: 'All',
+    filter: '',
+    size: 24,
+    regular: true,
+    light: true,
+    filled: true,
+    variantOutside: 'default',
+    names: true,
+    background: false,
+};

package/src/icons/icon-amex.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+
+type Props = {
+    role?: string;
+    size?: number | string;
+};
+
+const IconAmex = ({role = 'presentation', size = 24}: Props): JSX.Element => (
+    <svg width={size} height={size} role={role} viewBox="0 0 20 20" fill="none">
+        <g clipPath="url(#clip0_10652_7690)">
+            <path
+                d="M17 -2H-1C-2.65685 -2 -4 -0.656854 -4 1V19C-4 20.6569 -2.65685 22 -1 22H17C18.6569 22 20 20.6569 20 19V1C20 -0.656854 18.6569 -2 17 -2Z"
+                fill="white"
+            />
+            <path
+                d="M5.72824 17.8315V10.666H11.9982V12.2695H7.66999V13.495H11.897V15.0033H7.66999V16.276H11.9975V17.8315H5.72824Z"
+                fill="#016FD0"
+            />
+            <path
+                d="M11.9922 17.8315L14.8955 14.293L11.9232 10.666H14.2257L15.9957 12.9085L17.7717 10.666H19.9842L17.051 14.2488L19.9595 17.8315H17.657L15.9395 15.625L14.2625 17.8315H11.9922Z"
+                fill="#016FD0"
+            />
+            <path
+                d="M5.81975 2.50525L2.681 9.42775H4.724L5.303 8.04175H8.6705L9.2465 9.42775H11.3345L8.1995 2.50525H5.81975ZM6.98075 4.11625L8.00675 6.53875H5.95175L6.98075 4.11625Z"
+                fill="#016FD0"
+            />
+            <path
+                d="M11.3345 9.42775V2.50525L14.0893 2.515L15.692 6.979L17.2558 2.50525H19.9888V9.42775H18.2578V4.327L16.4233 9.42775H14.9053L13.0655 4.327V9.42775H11.3345Z"
+                fill="#016FD0"
+            />
+        </g>
+        <defs>
+            <clipPath id="clip0_10652_7690">
+                <rect width="20" height="20" fill="white" />
+            </clipPath>
+        </defs>
+    </svg>
+);
+
+export default IconAmex;

package/src/icons/icon-chevron.css.ts

@@ -0,0 +1,23 @@
+import {createVar, style} from '@vanilla-extract/css';
+
+const transitionDuration = createVar();
+
+export const vars = {transitionDuration};
+
+export const chevronRotateTransition = style({
+    transition: `transform ${transitionDuration}`,
+    '@media': {
+        ['(prefers-reduced-motion)']: {
+            transition: 'none',
+        },
+    },
+});
+
+export const chevronColorTransition = style({
+    transition: `fill ${transitionDuration}`,
+    '@media': {
+        ['(prefers-reduced-motion)']: {
+            transition: 'none',
+        },
+    },
+});

package/src/icons/icon-chevron.tsx

@@ -0,0 +1,150 @@
+'use client';
+import classNames from 'classnames';
+import * as React from 'react';
+import {vars} from '../skins/skin-contract.css';
+import {applyCssVars} from '../utils/css';
+import * as styles from './icon-chevron.css';
+import {useTheme} from '../hooks';
+import {O2_NEW_SKIN, BLAU_SKIN} from '../skins/constants';
+
+type IconChevronRightSvgProps = {
+    size: number | string;
+    color: string;
+    transform: string;
+    transitionDuration?: number;
+    className?: string;
+    style?: React.CSSProperties;
+};
+
+const IconChevronRightSvgDefault = ({
+    size,
+    color,
+    transform,
+    transitionDuration,
+    className,
+    style,
+}: IconChevronRightSvgProps) => (
+    <svg
+        role="presentation"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        className={classNames(className, styles.chevronRotateTransition)}
+        style={{
+            transform,
+            ...style,
+            ...applyCssVars({[styles.vars.transitionDuration]: `${transitionDuration}ms`}),
+        }}
+    >
+        <path
+            d="M12.0001 16.6333C11.7199 16.6333 11.4596 16.5232 11.2695 16.3131L4.2733 8.87648C3.89296 8.47613 3.91298 7.83556 4.31333 7.45523C4.71368 7.07489 5.35425 7.09491 5.73459 7.49526L12.0001 14.1511L18.2657 7.49526C18.646 7.0849 19.2866 7.07489 19.6869 7.45523C20.0873 7.83556 20.1073 8.47613 19.7269 8.87648L12.7308 16.3131C12.5406 16.5132 12.2704 16.6333 12.0001 16.6333Z"
+            className={styles.chevronColorTransition}
+            fill={color}
+        />
+    </svg>
+);
+
+const IconChevronRightSvgO2 = ({
+    size,
+    color,
+    transform,
+    transitionDuration,
+    className,
+    style,
+}: IconChevronRightSvgProps) => (
+    <svg
+        role="presentation"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        className={classNames(className, styles.chevronRotateTransition)}
+        style={{
+            transform,
+            ...style,
+            ...applyCssVars({[styles.vars.transitionDuration]: `${transitionDuration}ms`}),
+        }}
+    >
+        <path
+            d="M12.0018 16.571C11.7518 16.571 11.5118 16.481 11.3118 16.301L4.32183 9.74098C3.91183 9.36098 3.89183 8.72098 4.27183 8.32098C4.65183 7.92098 5.29183 7.89098 5.69183 8.27098L12.0018 14.181L18.3118 8.27098C18.7118 7.89098 19.3518 7.91098 19.7318 8.32098C20.1118 8.73098 20.0918 9.36098 19.6818 9.74098L12.6918 16.301C12.5018 16.481 12.2518 16.571 12.0018 16.571Z"
+            className={styles.chevronColorTransition}
+            fill={color}
+        />
+    </svg>
+);
+
+const IconChevronRightSvgBlau = ({
+    size,
+    color,
+    transform,
+    transitionDuration,
+    className,
+    style,
+}: IconChevronRightSvgProps) => (
+    <svg
+        role="presentation"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        className={classNames(className, styles.chevronRotateTransition)}
+        style={{
+            transform,
+            ...style,
+            ...applyCssVars({[styles.vars.transitionDuration]: `${transitionDuration}ms`}),
+        }}
+    >
+        <path
+            d="M12.0021 16.942L4.32208 9.74195C3.91208 9.36195 3.89208 8.72195 4.27208 8.32195C4.65208 7.92195 5.29208 7.89195 5.69208 8.27195L12.0021 14.182L18.3121 8.27195C18.7121 7.89195 19.3521 7.91195 19.7321 8.32195C20.1121 8.73195 20.0921 9.36195 19.6821 9.74195L12.0021 16.942Z"
+            className={styles.chevronColorTransition}
+            fill={color}
+        />
+    </svg>
+);
+
+type Direction = 'up' | 'down' | 'left' | 'right';
+
+const rotateAngleByDirection: Record<Direction, number> = {
+    up: -180,
+    down: 0,
+    left: 90,
+    right: -90,
+};
+
+type Props = {
+    size?: number;
+    color?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    direction?: Direction;
+    transitionDuration?: number;
+};
+
+const IconChevron = ({
+    size = 24,
+    color,
+    className,
+    style,
+    transitionDuration = 300,
+    direction = 'right',
+}: Props): JSX.Element => {
+    const {skinName} = useTheme();
+    const fillColor = color || vars.colors.neutralHigh;
+    const props = {
+        size,
+        color: fillColor,
+        transform: `rotate(${rotateAngleByDirection[direction]}deg)`,
+        className,
+        transitionDuration,
+        style,
+    };
+
+    switch (skinName) {
+        case O2_NEW_SKIN:
+            return <IconChevronRightSvgO2 {...props} />;
+        case BLAU_SKIN:
+            return <IconChevronRightSvgBlau {...props} />;
+        default:
+            return <IconChevronRightSvgDefault {...props} />;
+    }
+};
+
+export default IconChevron;

package/src/icons/icon-cvv-amex.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import {vars} from '../skins/skin-contract.css';
+
+type Props = {
+    role?: string;
+    size?: number | string;
+    color?: string;
+};
+
+const IconCvvAmex = ({role = 'presentation', size = 48, color}: Props): JSX.Element => {
+    return (
+        <svg width={size} height={size} viewBox="0 0 48 48" role={role} style={{flexShrink: 0}}>
+            <g fill={color || vars.colors.brand}>
+                <path
+                    d="M2.571 0H45.43C46.849 0 48 1.075 48 2.4v27.2c0 1.325-1.151 2.4-2.571 2.4H2.57C1.151 32 0 30.925 0 29.6V2.4C0 1.075 1.151 0 2.571 0zm0 1.2c-.71 0-1.285.537-1.285 1.2v27.2c0 .663.575 1.2 1.285 1.2H45.43c.71 0 1.285-.537 1.285-1.2V2.4c0-.663-.575-1.2-1.285-1.2H2.57z"
+                    transform="translate(0 8)"
+                />
+                <path
+                    d="M24.286 6.4H42c.473 0 .857.358.857.8v6.4c0 .442-.384.8-.857.8H24.286c-.474 0-.857-.358-.857-.8V7.2c0-.442.383-.8.857-.8zm.268 1.05v5.9h17.178v-5.9H24.554z"
+                    transform="translate(0 8)"
+                />
+                <path
+                    d="M26.949 12h.708V8.618h-.706l-.874.602v.659l.83-.572h.042V12zm2.509-2.56l-.015.202h.656c0-.326.225-.541.553-.541.31 0 .53.192.53.464 0 .22-.12.396-.595.86l-1.104 1.08V12h2.44v-.588h-1.481v-.042l.646-.617c.586-.55.786-.867.786-1.235 0-.581-.493-.987-1.198-.987-.658 0-1.13.361-1.218.91zm4.828 1.093h.42c.379 0 .61.183.61.478 0 .288-.245.487-.6.487-.362 0-.604-.18-.625-.466h-.677c.03.638.541 1.055 1.296 1.055.77 0 1.329-.43 1.329-1.022 0-.445-.291-.755-.755-.806v-.043c.377-.077.623-.382.623-.773 0-.532-.499-.912-1.193-.912-.738 0-1.214.403-1.237 1.043h.654c.019-.293.237-.478.565-.478.33 0 .541.174.541.445 0 .277-.218.464-.539.464h-.412v.528zM39.14 12h.675v-.59h.443v-.589h-.443V8.618h-.992l-.542.83c-.33.515-.593.953-.796 1.336v.625h1.655V12zm-1.02-1.195c.387-.701.69-1.175.999-1.636h.037v1.673H38.12v-.037z"
+                    transform="translate(0 8)"
+                />
+            </g>
+        </svg>
+    );
+};
+
+export default IconCvvAmex;

package/src/icons/icon-cvv-visa-mc.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import {vars} from '../skins/skin-contract.css';
+
+type Props = {
+    role?: string;
+    size?: number | string;
+    color?: string;
+};
+
+const IconCvvVisaMc = ({role = 'presentation', size = 48, color}: Props): JSX.Element => {
+    return (
+        <svg width={size} height={size} viewBox="0 0 48 48" role={role} style={{flexShrink: 0}}>
+            <g fill={color || vars.colors.brand}>
+                <path
+                    d="M2.571 0H45.43C46.849 0 48 1.075 48 2.4v27.2c0 1.325-1.151 2.4-2.571 2.4H2.57C1.151 32 0 30.925 0 29.6V2.4C0 1.075 1.151 0 2.571 0zm0 1.2c-.71 0-1.285.537-1.285 1.2v27.2c0 .663.575 1.2 1.285 1.2H45.43c.71 0 1.285-.537 1.285-1.2V2.4c0-.663-.575-1.2-1.285-1.2H2.57z"
+                    transform="translate(0 8)"
+                />
+                <path
+                    d="M0 7.2H48V12H0zM28.286 18.4H42c.473 0 .857.358.857.8v6.4c0 .442-.384.8-.857.8H28.286c-.474 0-.857-.358-.857-.8v-6.4c0-.442.383-.8.857-.8zm.268 1.05v5.9h13.178v-5.9H28.554z"
+                    transform="translate(0 8)"
+                />
+                <path
+                    d="M31.02 24v-2.693h-.045l-.89.572v-.659l.937-.602h.756V24h-.758zm2.577-2.37c0-.653.537-1.099 1.32-1.099.757 0 1.284.406 1.284.987 0 .368-.213.684-.841 1.235l-.693.617v.042h1.587V24H33.64v-.495l1.182-1.08c.51-.464.638-.64.638-.86 0-.272-.236-.464-.567-.464-.352 0-.593.215-.593.527v.014h-.703v-.012zm5.093.903v-.528h.442c.344 0 .578-.187.578-.464 0-.271-.226-.445-.58-.445-.352 0-.585.185-.605.478h-.7c.024-.64.534-1.043 1.325-1.043.743 0 1.278.38 1.278.912 0 .391-.263.696-.668.773v.043c.497.051.809.36.809.806 0 .593-.598 1.022-1.424 1.022-.809 0-1.356-.417-1.389-1.055h.726c.023.286.281.466.67.466.38 0 .643-.199.643-.487 0-.295-.248-.478-.655-.478h-.45z"
+                    transform="translate(0 8)"
+                />
+            </g>
+        </svg>
+    );
+};
+
+export default IconCvvVisaMc;