@telefonica/mistica 16.59.0-beta.1 → 16.59.0

package/src/timer.tsx

@@ -1,420 +0,0 @@
-'use client';
-import classNames from 'classnames';
-import * as React from 'react';
-import {useIsomorphicLayoutEffect, useTheme} from './hooks';
-import Inline from './inline';
-import ScreenReaderOnly from './screen-reader-only';
-import {Text2, Text6} from './text';
-import {ThemeVariant, useThemeVariant} from './theme-variant-context';
-import * as styles from './timer.css';
-import {getPrefixedDataAttributes} from './utils/dom';
-import {isEqual} from './utils/helpers';
-import {isRunningAcceptanceTest} from './utils/platform';
-import * as tokens from './text-tokens';
-
-import type {DataAttributes} from './utils/types';
-
-const DAY_IN_HOURS = 24;
-const HOUR_IN_MINUTES = 60;
-const MINUTE_IN_SECONDS = 60;
-const SECOND_IN_MS = 1000;
-
-const MINUTE_IN_MS = MINUTE_IN_SECONDS * SECOND_IN_MS;
-const HOUR_IN_MS = HOUR_IN_MINUTES * MINUTE_IN_MS;
-const DAY_IN_MS = DAY_IN_HOURS * HOUR_IN_MS;
-
-export type TimeUnit = 'days' | 'hours' | 'minutes' | 'seconds';
-type Label = 'none' | 'short' | 'long';
-
-export interface RemainingTime {
-    days?: number;
-    hours?: number;
-    minutes?: number;
-    seconds?: number;
-}
-
-interface BaseProps {
-    endTimestamp: Date | number;
-    minTimeUnit: TimeUnit;
-    maxTimeUnit: TimeUnit;
-    dataAttributes?: DataAttributes;
-    onProgress?: (value: RemainingTime) => void;
-    'aria-label'?: string;
-}
-
-interface TextTimerProps extends BaseProps {
-    labelType?: Label;
-}
-
-interface TimerProps extends BaseProps {
-    boxed?: boolean;
-}
-
-const shouldRenderUnit = (
-    unit: TimeUnit,
-    minTimeUnit: TimeUnit,
-    maxTimeUnit: TimeUnit,
-    labelType?: Label
-) => {
-    // If label is "none", days shouldn't be displayed
-    minTimeUnit = labelType === 'none' && minTimeUnit === 'days' ? 'hours' : minTimeUnit;
-    maxTimeUnit = labelType === 'none' && maxTimeUnit === 'days' ? 'hours' : maxTimeUnit;
-
-    const unitsOrder: Array<TimeUnit> = ['seconds', 'minutes', 'hours', 'days'];
-
-    const minValue = unitsOrder.indexOf(minTimeUnit);
-    // If max < min, we display only the min unit
-    const maxValue = Math.max(unitsOrder.indexOf(maxTimeUnit), minValue);
-    const unitValue = unitsOrder.indexOf(unit);
-
-    return minValue <= unitValue && unitValue <= maxValue;
-};
-
-const getFilteredTimerValue = (
-    timestamp: RemainingTime,
-    minTimeUnit: TimeUnit,
-    maxTimeUnit: TimeUnit,
-    labelType?: Label
-) => {
-    return (
-        [
-            {unit: 'days', value: timestamp.days},
-            {unit: 'hours', value: timestamp.hours},
-            {unit: 'minutes', value: timestamp.minutes},
-            {unit: 'seconds', value: timestamp.seconds},
-        ] as Array<{unit: TimeUnit; value: number}>
-    ).filter((item) => shouldRenderUnit(item.unit, minTimeUnit, maxTimeUnit, labelType));
-};
-
-const getRemainingTime = (endTimestamp: Date | number) => {
-    // Always return 0 ms remaining for screenshot tests to avoid unstable values caused by delays in browser
-    if (isRunningAcceptanceTest()) {
-        return 0;
-    }
-
-    return Math.max(
-        0,
-        (typeof endTimestamp === 'object' ? endTimestamp : new Date(endTimestamp)).valueOf() - Date.now()
-    );
-};
-
-const useTimerState = ({
-    endTimestamp,
-    labelType,
-    minTimeUnit,
-    maxTimeUnit,
-    onProgress,
-}: {
-    endTimestamp: Date | number;
-    labelType?: Label;
-    minTimeUnit: TimeUnit;
-    maxTimeUnit: TimeUnit;
-    onProgress?: (value: RemainingTime) => void;
-}) => {
-    const [remainingTime, setRemainingTime] = React.useState(getRemainingTime(endTimestamp));
-
-    useIsomorphicLayoutEffect(() => {
-        let intervalId: NodeJS.Timeout;
-
-        const updateCurrentTime = () => {
-            const currentRemainingTime = getRemainingTime(endTimestamp);
-            setRemainingTime(currentRemainingTime);
-
-            // Stop computing values if there is no time remaining
-            if (!currentRemainingTime) {
-                clearInterval(intervalId);
-            }
-        };
-
-        if (!isRunningAcceptanceTest()) {
-            updateCurrentTime();
-            intervalId = setInterval(updateCurrentTime, SECOND_IN_MS);
-            return () => clearInterval(intervalId);
-        }
-    }, [endTimestamp]);
-
-    const shouldRenderDays = shouldRenderUnit('days', minTimeUnit, maxTimeUnit, labelType);
-    const shouldRenderHours = shouldRenderUnit('hours', minTimeUnit, maxTimeUnit, labelType);
-    const shouldRenderMinutes = shouldRenderUnit('minutes', minTimeUnit, maxTimeUnit, labelType);
-
-    const maximumRenderedUnit = shouldRenderDays
-        ? 'days'
-        : shouldRenderHours
-          ? 'hours'
-          : shouldRenderMinutes
-            ? 'minutes'
-            : 'seconds';
-
-    const currentHours = Math.floor(remainingTime / HOUR_IN_MS) % 24;
-    const currentMinutes = Math.floor(remainingTime / MINUTE_IN_MS) % 60;
-    const currentSeconds = Math.floor(remainingTime / SECOND_IN_MS) % 60;
-
-    const days = Math.floor(remainingTime / DAY_IN_MS);
-
-    // if hours is the maximum unit, add remaining days
-    const hours = maximumRenderedUnit === 'hours' ? currentHours + days * DAY_IN_HOURS : currentHours;
-
-    // if minutes is the maximum unit, add remaining days and hours
-    const minutes =
-        maximumRenderedUnit === 'minutes'
-            ? currentMinutes + HOUR_IN_MINUTES * (days * DAY_IN_HOURS + hours)
-            : currentMinutes;
-
-    // if minutes is the maximum unit, add remaining days, hours and minutes
-    const seconds =
-        maximumRenderedUnit === 'seconds'
-            ? currentSeconds +
-              MINUTE_IN_SECONDS * (days * DAY_IN_HOURS * HOUR_IN_MINUTES + hours * HOUR_IN_MINUTES + minutes)
-            : currentSeconds;
-
-    const [timerValue, setTimerValue] = React.useState(
-        getFilteredTimerValue({days, hours, minutes, seconds}, minTimeUnit, maxTimeUnit, labelType)
-    );
-
-    React.useEffect(() => {
-        const currentTimerValue = getFilteredTimerValue(
-            {days, hours, minutes, seconds},
-            minTimeUnit,
-            maxTimeUnit,
-            labelType
-        );
-
-        if (!isEqual(currentTimerValue, timerValue)) {
-            setTimerValue(currentTimerValue);
-            const timestampValue: RemainingTime = {};
-            currentTimerValue.forEach((item) => (timestampValue[item.unit] = item.value));
-            onProgress?.(timestampValue);
-        }
-    }, [days, hours, minutes, seconds, labelType, minTimeUnit, maxTimeUnit, timerValue, onProgress]);
-
-    return timerValue;
-};
-
-export const TextTimer = ({
-    endTimestamp,
-    labelType = 'none',
-    minTimeUnit,
-    maxTimeUnit,
-    onProgress,
-    dataAttributes,
-    'aria-label': ariaLabel,
-}: TextTimerProps): JSX.Element => {
-    const {texts, t} = useTheme();
-    const labelId = React.useId();
-
-    const timerValue = useTimerState({endTimestamp, labelType, minTimeUnit, maxTimeUnit, onProgress});
-
-    const unitShortLabel: {[key in TimeUnit]: string} = {
-        days: texts.timerDaysShortLabel || t(tokens.timerDaysShortLabel),
-        hours: texts.timerHoursShortLabel || t(tokens.timerHoursShortLabel),
-        minutes: texts.timerMinutesShortLabel || t(tokens.timerMinutesShortLabel),
-        seconds: texts.timerSecondsShortLabel || t(tokens.timerSecondsShortLabel),
-    };
-
-    const unitLabel: {[key in TimeUnit]: string} = {
-        days: texts.timerDayLongLabel || t(tokens.timerDayLongLabel),
-        hours: texts.timerHourLongLabel || t(tokens.timerHourLongLabel),
-        minutes: texts.timerMinuteLongLabel || t(tokens.timerMinuteLongLabel),
-        seconds: texts.timerSecondLongLabel || t(tokens.timerSecondLongLabel),
-    };
-
-    const unitLabelPlural: {[key in TimeUnit]: string} = {
-        days: texts.timerDaysLongLabel || t(tokens.timerDaysLongLabel),
-        hours: texts.timerHoursLongLabel || t(tokens.timerHoursLongLabel),
-        minutes: texts.timerMinutesLongLabel || t(tokens.timerMinutesLongLabel),
-        seconds: texts.timerSecondsLongLabel || t(tokens.timerSecondsLongLabel),
-    };
-
-    const renderFormattedNumber = (value: number) => {
-        const digitCount = Math.max(String(value).length, labelType === 'long' ? 1 : 2);
-
-        // Set container's minWidth in ch to avoid it from updating it's width when numbers change
-        return (
-            <span className={styles.unitContainer} style={{minWidth: `${digitCount}ch`}}>
-                {String(value).padStart(digitCount, '0')}
-            </span>
-        );
-    };
-
-    const renderTime = () => {
-        switch (labelType) {
-            case 'none':
-                return timerValue.map((item, index) => (
-                    <React.Fragment key={index}>
-                        {index > 0 && ':'}
-                        {renderFormattedNumber(item.value)}
-                    </React.Fragment>
-                ));
-
-            case 'short':
-                return timerValue.map((item, index) => (
-                    <React.Fragment key={index}>
-                        {index > 0 && ' '}
-                        <span className={styles.shortLabelText}>
-                            {renderFormattedNumber(item.value)}
-                            {` ${unitShortLabel[item.unit]}`}
-                        </span>
-                    </React.Fragment>
-                ));
-
-            case 'long':
-            default:
-                return timerValue.map((item, index) => (
-                    <React.Fragment key={index}>
-                        {index > 0 && ' '}
-                        {renderFormattedNumber(item.value)}
-                        {` ${item.value === 1 ? unitLabel[item.unit] : unitLabelPlural[item.unit]}`}
-                        {index === timerValue.length - 2 && ` ${texts.timerAnd || t(tokens.timerAnd)}`}
-                        {index < timerValue.length - 2 && ','}
-                    </React.Fragment>
-                ));
-        }
-    };
-
-    const timerLabel = timerValue
-        .map(
-            (item, index) =>
-                `${item.value} ${item.value === 1 ? unitLabel[item.unit] : unitLabelPlural[item.unit]}${
-                    index === timerValue.length - 1
-                        ? ''
-                        : index === timerValue.length - 2
-                          ? ` ${texts.timerAnd || t(tokens.timerAnd)} `
-                          : ', '
-                }`
-        )
-        .join('');
-
-    return (
-        <span
-            role="timer"
-            aria-labelledby={labelId}
-            className={styles.inlineText}
-            style={{
-                // try to keep the timer in the same line without wrapping only when label is not long
-                display: labelType !== 'long' ? 'inline-block' : undefined,
-            }}
-            {...getPrefixedDataAttributes(dataAttributes, 'TextTimer')}
-        >
-            <ScreenReaderOnly>
-                <span id={labelId}>{ariaLabel ? `${ariaLabel}. ${timerLabel}` : timerLabel}</span>
-            </ScreenReaderOnly>
-
-            <span aria-hidden className={styles.inlineText}>
-                {renderTime()}
-            </span>
-        </span>
-    );
-};
-
-export const Timer = ({
-    boxed,
-    endTimestamp,
-    minTimeUnit,
-    maxTimeUnit,
-    onProgress,
-    dataAttributes,
-    'aria-label': ariaLabel,
-}: TimerProps): JSX.Element => {
-    const {texts, t} = useTheme();
-    const labelId = React.useId();
-    const themeVariant = useThemeVariant();
-
-    const timerValue = useTimerState({endTimestamp, minTimeUnit, maxTimeUnit, onProgress});
-
-    const displayLabel: {[key in TimeUnit]: string} = {
-        days: texts.timerDayLongLabel || t(tokens.timerDayLongLabel),
-        hours: texts.timerHourLongLabel || t(tokens.timerHourLongLabel),
-        minutes: texts.timerDisplayMinutesLabel || t(tokens.timerDisplayMinutesLabel),
-        seconds: texts.timerDisplaySecondsLabel || t(tokens.timerDisplaySecondsLabel),
-    };
-
-    const displayLabelPlural: {[key in TimeUnit]: string} = {
-        days: texts.timerDaysLongLabel || t(tokens.timerDaysLongLabel),
-        hours: texts.timerHoursLongLabel || t(tokens.timerHoursLongLabel),
-        minutes: texts.timerDisplayMinutesLabel || t(tokens.timerDisplayMinutesLabel),
-        seconds: texts.timerDisplaySecondsLabel || t(tokens.timerDisplaySecondsLabel),
-    };
-
-    const unitLabel: {[key in TimeUnit]: string} = {
-        days: texts.timerDayLongLabel || t(tokens.timerDayLongLabel),
-        hours: texts.timerHourLongLabel || t(tokens.timerHourLongLabel),
-        minutes: texts.timerMinuteLongLabel || t(tokens.timerMinuteLongLabel),
-        seconds: texts.timerSecondLongLabel || t(tokens.timerSecondLongLabel),
-    };
-
-    const unitLabelPlural: {[key in TimeUnit]: string} = {
-        days: texts.timerDaysLongLabel || t(tokens.timerDaysLongLabel),
-        hours: texts.timerHoursLongLabel || t(tokens.timerHoursLongLabel),
-        minutes: texts.timerMinutesLongLabel || t(tokens.timerMinutesLongLabel),
-        seconds: texts.timerSecondsLongLabel || t(tokens.timerSecondsLongLabel),
-    };
-
-    const renderFormattedNumber = (value: number) => {
-        const digitCount = Math.max(String(value).length, 2);
-
-        // Set container's minWidth in ch to avoid it from updating it's width when numbers change
-        return (
-            <Text6>
-                <div className={styles.unitContainer} style={{minWidth: `${digitCount}ch`}}>
-                    {String(value).padStart(digitCount, '0')}
-                </div>
-            </Text6>
-        );
-    };
-
-    const timerLabel = timerValue
-        .map(
-            (item, index) =>
-                `${item.value} ${item.value === 1 ? unitLabel[item.unit] : unitLabelPlural[item.unit]}${
-                    index === timerValue.length - 1
-                        ? ''
-                        : index === timerValue.length - 2
-                          ? ` ${texts.timerAnd || t(tokens.timerAnd)} `
-                          : ', '
-                }`
-        )
-        .join('');
-
-    const renderTime = () => {
-        return timerValue.map((item, index) => (
-            <div
-                className={classNames({
-                    [styles.boxedTimerValueContainer[themeVariant]]: boxed,
-                })}
-                key={index}
-            >
-                <ThemeVariant variant={boxed ? 'default' : themeVariant}>
-                    <div
-                        className={classNames(styles.timerDisplayValue, {
-                            [styles.boxedTimerDisplayValue]: boxed,
-                        })}
-                    >
-                        {renderFormattedNumber(item.value)}
-                        <Text2 regular>
-                            {item.value === 1 ? displayLabel[item.unit] : displayLabelPlural[item.unit]}
-                        </Text2>
-                    </div>
-                </ThemeVariant>
-            </div>
-        ));
-    };
-
-    return (
-        <div
-            role="timer"
-            aria-labelledby={labelId}
-            className={styles.timerWrapper}
-            {...getPrefixedDataAttributes(dataAttributes, 'Timer')}
-        >
-            <ScreenReaderOnly>
-                <span id={labelId}>{ariaLabel ? `${ariaLabel}. ${timerLabel}` : timerLabel}</span>
-            </ScreenReaderOnly>
-
-            <div aria-hidden>
-                <Inline space={boxed ? 8 : 16} wrap>
-                    {renderTime()}
-                </Inline>
-            </div>
-        </div>
-    );
-};

package/src/title.tsx

@@ -1,119 +0,0 @@
-'use client';
-import * as React from 'react';
-import Text, {Text2} from './text';
-import Inline from './inline';
-import Box from './box';
-import {vars} from './skins/skin-contract.css';
-import {useTheme} from './hooks';
-import {getPrefixedDataAttributes} from './utils/dom';
-
-import type {DataAttributes, HeadingType} from './utils/types';
-
-type TitleLayoutProps = {
-    title: React.ReactElement;
-    right?: React.ReactNode;
-    dataAttributes?: DataAttributes;
-};
-
-const TitleLayout = ({title, right, dataAttributes}: TitleLayoutProps): React.ReactElement => {
-    const {textPresets} = useTheme();
-    if (!right) {
-        return <div {...getPrefixedDataAttributes(dataAttributes)}>{title}</div>;
-    }
-
-    return (
-        <Inline space="between" alignItems="baseline" dataAttributes={dataAttributes}>
-            {title}
-            <Box paddingLeft={16}>
-                <Text2 weight={textPresets.link.weight}>{right}</Text2>
-            </Box>
-        </Inline>
-    );
-};
-
-const useTitleProps = (titleType: 'title1' | 'title2' | 'title3' | 'title4') => {
-    const {textPresets} = useTheme();
-    return {
-        weight: textPresets[titleType].weight,
-        size: textPresets[titleType].size.desktop,
-        mobileSize: textPresets[titleType].size.mobile,
-        lineHeight: textPresets[titleType].lineHeight.desktop,
-        mobileLineHeight: textPresets[titleType].lineHeight.mobile,
-    };
-};
-
-export type TitleProps = {
-    children: React.ReactNode;
-    id?: string;
-    right?: React.ReactNode;
-    as?: HeadingType;
-    /** "data-" prefix is automatically added. For example, use "testid" instead of "data-testid" */
-    dataAttributes?: DataAttributes;
-};
-
-export const Title1 = ({children, as = 'h3', id, right, dataAttributes}: TitleProps): React.ReactElement => {
-    const titleProps = useTitleProps('title1');
-    return (
-        <TitleLayout
-            title={
-                <Text
-                    as={as}
-                    id={id}
-                    {...titleProps}
-                    color={vars.colors.textSecondary}
-                    transform="uppercase"
-                    wordBreak={false}
-                >
-                    {children}
-                </Text>
-            }
-            right={right}
-            dataAttributes={{'component-name': 'Title1', ...dataAttributes}}
-        />
-    );
-};
-
-export const Title2 = ({children, as = 'h3', id, right, dataAttributes}: TitleProps): React.ReactElement => {
-    const titleProps = useTitleProps('title2');
-    return (
-        <TitleLayout
-            title={
-                <Text as={as} id={id} {...titleProps}>
-                    {children}
-                </Text>
-            }
-            right={right}
-            dataAttributes={{'component-name': 'Title2', ...dataAttributes}}
-        />
-    );
-};
-
-export const Title3 = ({children, as = 'h3', id, right, dataAttributes}: TitleProps): React.ReactElement => {
-    const titleProps = useTitleProps('title3');
-    return (
-        <TitleLayout
-            title={
-                <Text as={as} id={id} {...titleProps}>
-                    {children}
-                </Text>
-            }
-            right={right}
-            dataAttributes={{'component-name': 'Title3', ...dataAttributes}}
-        />
-    );
-};
-
-export const Title4 = ({children, as = 'h3', id, right, dataAttributes}: TitleProps): React.ReactElement => {
-    const titleProps = useTitleProps('title4');
-    return (
-        <TitleLayout
-            title={
-                <Text as={as} id={id} {...titleProps}>
-                    {children}
-                </Text>
-            }
-            right={right}
-            dataAttributes={{'component-name': 'Title4', ...dataAttributes}}
-        />
-    );
-};

package/src/tooltip-context-provider.tsx

@@ -1,57 +0,0 @@
-'use client';
-import * as React from 'react';
-
-type TooltipState = {
-    openTooltipId: string | null;
-};
-
-type TooltipSetter = {
-    openTooltip: (tooltipId: string) => void;
-    closeTooltip: (tooltipId: string) => void;
-};
-
-const TooltipStateContext = React.createContext<TooltipState>({openTooltipId: null});
-const TooltipStateSetterContext = React.createContext<TooltipSetter>({
-    openTooltip: () => {},
-    closeTooltip: () => {},
-});
-
-const TooltipContextProvider = ({children}: {children: React.ReactNode}): JSX.Element => {
-    /**
-     * We have to use a state and a ref to save the open tooltip id. If two targets (let's call them A and B) are next
-     * to each other (without space between them), the mouseOver/mouseLeave events will be triggered almost at the same time.
-     * Both tooltips will update their states, and it can happen that React decides to re-render B before A (i.e. it may first
-     * set the openTooltipId to B, and then to null because of mouse leaving A, causing both tooltips to be hidden).
-     *
-     * Setting the value inside the ref allows us to update the active tooltip id without triggering any re-renders, so this
-     * race condition won't happen. We also need the state with the active id because we want changes in this value to be
-     * reactive (i.e. trigger a re-render in each tooltip instance so that they can be opened/hidden accordingly).
-     */
-    const [openTooltipId, setOpenTooltipId] = React.useState<string | null>(null);
-    const openRef = React.useRef<string | null>(null);
-
-    const openTooltip = React.useCallback((tooltipId: string) => {
-        openRef.current = tooltipId;
-        setOpenTooltipId(tooltipId);
-    }, []);
-
-    const closeTooltip = React.useCallback((tooltipId: string) => {
-        if (openRef.current === tooltipId) {
-            openRef.current = null;
-            setOpenTooltipId(null);
-        }
-    }, []);
-
-    return (
-        <TooltipStateContext.Provider value={{openTooltipId}}>
-            <TooltipStateSetterContext.Provider value={{openTooltip, closeTooltip}}>
-                {children}
-            </TooltipStateSetterContext.Provider>
-        </TooltipStateContext.Provider>
-    );
-};
-
-export const useTooltipState = (): TooltipState => React.useContext(TooltipStateContext);
-export const useSetTooltipState = (): TooltipSetter => React.useContext(TooltipStateSetterContext);
-
-export default TooltipContextProvider;

package/src/tooltip.css.ts

@@ -1,106 +0,0 @@
-import {style} from '@vanilla-extract/css';
-import {vars} from './skins/skin-contract.css';
-import {sprinkles} from './sprinkles.css';
-
-export const CONTENT_MIN_WIDTH = 40;
-const ARROW_CONTAINER_SIZE = 20;
-const CONTENT_PADDING = 8;
-const ARROW_SIZE = 12;
-const BORDER_SIZE = 1;
-
-export const tooltipTransitionClasses = {
-    entering: {
-        opacity: 1,
-    },
-    entered: {
-        opacity: 1,
-    },
-    exiting: {
-        opacity: 0,
-    },
-    exited: {
-        opacity: 0,
-    },
-    unmounted: {},
-};
-
-export const container = style([
-    sprinkles({
-        position: 'absolute',
-    }),
-    {
-        zIndex: 1,
-        opacity: 1,
-        filter: 'drop-shadow(0px 2px 2px rgba(0,0,0,0.2))',
-    },
-]);
-
-export const tooltip = style([
-    sprinkles({
-        position: 'relative',
-        borderRadius: vars.borderRadii.popup,
-        background: vars.colors.backgroundContainer,
-    }),
-    {
-        // needed because the tooltip minWidth/maxWidth are being set with inline styles
-        boxSizing: 'border-box',
-    },
-]);
-
-export const contentContainer = style([
-    sprinkles({
-        position: 'relative',
-        overflow: 'hidden',
-    }),
-    {
-        minWidth: CONTENT_MIN_WIDTH - 2 * BORDER_SIZE, // border is not included in this container
-    },
-]);
-
-export const content = style({
-    padding: CONTENT_PADDING - BORDER_SIZE,
-});
-
-export const tooltipCenter = sprinkles({
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-});
-
-export const arrowContainer = style([
-    sprinkles({
-        position: 'absolute',
-        width: ARROW_CONTAINER_SIZE,
-        overflow: 'hidden',
-    }),
-    {
-        height: ARROW_CONTAINER_SIZE / 2,
-    },
-]);
-
-export const arrow = style([
-    sprinkles({
-        width: ARROW_SIZE,
-        height: ARROW_SIZE,
-        position: 'absolute',
-        top: 0,
-        background: vars.colors.backgroundContainer,
-    }),
-    {
-        left: '50%',
-        transform: 'translate(-50%, -50%) rotate(45deg)',
-        boxSizing: 'border-box',
-        borderRadius: '0 0 2px 0',
-    },
-]);
-
-export const closeButtonIcon = style([
-    sprinkles({
-        position: 'absolute',
-    }),
-    {
-        top: CONTENT_PADDING - BORDER_SIZE,
-        right: CONTENT_PADDING - BORDER_SIZE,
-        zIndex: 1,
-    },
-]);