@apify/ui-library 1.138.0 → 1.138.1

package/src/components/switch/switch.tsx

@@ -19,7 +19,7 @@ const StyledThumb = styled(SwitchPrimitiveReact.Thumb)`
     transition: transform 100ms;
     transform: translateX(2px);
     will-change: transform;
-    &[data-state="checked"] {
+    &[data-state='checked'] {
         transform: translateX(18px);
     }
 `;
@@ -31,23 +31,13 @@ type SwitchPrimitiveProps = {
     readOnly?: boolean;
 } & Omit<React.ComponentPropsWithoutRef<typeof SwitchPrimitiveReact.Root>, 'checked' | 'onCheckedChange' | 'value'>;
 
-export const SwitchPrimitive = ({
-    value,
-    setValue,
-    error,
-    disabled,
-    readOnly,
-    ...rest
-}: SwitchPrimitiveProps) => (
+export const SwitchPrimitive = ({ value, setValue, error, disabled, readOnly, ...rest }: SwitchPrimitiveProps) => (
     <StyledSwitch
         {...rest}
         checked={value}
         onCheckedChange={setValue}
         disabled={disabled || readOnly}
-        className={clsx(
-            error && 'error',
-            (disabled || readOnly) && 'disabled',
-        )}
+        className={clsx(error && 'error', (disabled || readOnly) && 'disabled')}
     >
         <StyledThumb />
     </StyledSwitch>

package/src/components/table/table.stories.tsx

@@ -57,7 +57,8 @@ const meta: Meta = {
     parameters: {
         docs: {
             description: {
-                component: 'Compositional table primitives. Compose together to build any table layout. See subcomponents below.',
+                component:
+                    'Compositional table primitives. Compose together to build any table layout. See subcomponents below.',
             },
         },
     },
@@ -240,7 +241,9 @@ export const DirectData: Story = {
                     <TableBody>
                         {items.map((item) => (
                             <TableRow key={item._id}>
-                                <TableCell><Text weight="bold">{item.key}</Text></TableCell>
+                                <TableCell>
+                                    <Text weight="bold">{item.key}</Text>
+                                </TableCell>
                                 <TableCell>{item.value}</TableCell>
                                 <TableCell>{item.updatedAt}</TableCell>
                             </TableRow>

package/src/components/table/table.styled.ts

@@ -59,9 +59,9 @@ export const StyledTable = styled.table`
 
     /* Generic cell padding */
     .${tableClassNames.HEAD_CELL},
-    .${tableClassNames.BODY_CELL},
-    .${tableClassNames.ROW_EMPTY_CELL},
-    .${tableClassNames.ROW_EXPANSION_CELL} {
+        .${tableClassNames.BODY_CELL},
+        .${tableClassNames.ROW_EMPTY_CELL},
+        .${tableClassNames.ROW_EXPANSION_CELL} {
         padding: ${theme.space.space8};
         position: relative;
     }

package/src/components/table/table_error_row.tsx

@@ -4,7 +4,11 @@ import { Text } from '../text/index.js';
 import { tableClassNames } from './table.styled.js';
 import { tableTestIds } from './table_test_ids.js';
 
-export const TableErrorRow: FC<{ colSpan: number; children?: ReactNode; error?: Error | null }> = ({ colSpan, children, error }) => (
+export const TableErrorRow: FC<{ colSpan: number; children?: ReactNode; error?: Error | null }> = ({
+    colSpan,
+    children,
+    error,
+}) => (
     <tr data-test={tableTestIds.ERROR_ROW} className={tableClassNames.ROW_EMPTY}>
         <td colSpan={colSpan} className={tableClassNames.ROW_EMPTY_CELL}>
             {children ?? <Text color="error">{error?.message ?? 'Failed to load data'}</Text>}

package/src/components/table/table_row.tsx

@@ -22,9 +22,5 @@ export const TableRow: FC<TableRowProps> = ({ className, clickable, expanded, to
 
     if (!to) return row;
 
-    return (
-        <TableRowLinkContext.Provider value={to}>
-            {row}
-        </TableRowLinkContext.Provider>
-    );
+    return <TableRowLinkContext.Provider value={to}>{row}</TableRowLinkContext.Provider>;
 };

package/src/components/table/table_wrapper.tsx

@@ -2,15 +2,15 @@ import type { FC } from 'react';
 import { useCallback, useEffect, useRef } from 'react';
 
 import { Box } from '../box.js';
-import {
-    StyledHorizontallyScrollableTableWrapper,
-    StyledTableFooterWrapper,
-    tableClassNames,
-} from './table.styled.js';
+import { StyledHorizontallyScrollableTableWrapper, StyledTableFooterWrapper, tableClassNames } from './table.styled.js';
 import { tableTestIds } from './table_test_ids.js';
 import type { HorizontallyScrollableTableWrapperProps } from './types.js';
 
-export const HorizontallyScrollableTableWrapper: FC<HorizontallyScrollableTableWrapperProps> = ({ children, footer, className }) => {
+export const HorizontallyScrollableTableWrapper: FC<HorizontallyScrollableTableWrapperProps> = ({
+    children,
+    footer,
+    className,
+}) => {
     const scrollableRef = useRef<HTMLDivElement>(null);
     const wrapperRef = useRef<HTMLDivElement>(null);
     const animationFrameIdRef = useRef(0);
@@ -57,15 +57,15 @@ export const HorizontallyScrollableTableWrapper: FC<HorizontallyScrollableTableW
     }, [updateShadows, throttledUpdateShadows]);
 
     return (
-        <StyledHorizontallyScrollableTableWrapper data-test={tableTestIds.WRAPPER} ref={wrapperRef} className={className}>
+        <StyledHorizontallyScrollableTableWrapper
+            data-test={tableTestIds.WRAPPER}
+            ref={wrapperRef}
+            className={className}
+        >
             <Box className={tableClassNames.WRAPPER_SCROLLABLE} ref={scrollableRef}>
                 {children}
             </Box>
-            {footer && (
-                <StyledTableFooterWrapper>
-                    {footer}
-                </StyledTableFooterWrapper>
-            )}
+            {footer && <StyledTableFooterWrapper>{footer}</StyledTableFooterWrapper>}
         </StyledHorizontallyScrollableTableWrapper>
     );
 };

package/src/components/tabs/tab.stories.tsx

@@ -59,11 +59,7 @@ const sampleTabs = [
     { id: 'tab-5', title: 'Reports', to: '#' },
 ];
 
-export const TabVariants = (args: {
-    Icon?: boolean;
-    chip?: string;
-    rollout?: 'alpha' | 'beta' | 'none';
-}) => {
+export const TabVariants = (args: { Icon?: boolean; chip?: string; rollout?: 'alpha' | 'beta' | 'none' }) => {
     const { Icon = false, chip = '', rollout = 'none' } = args;
     const [activeTab, setActiveTab] = React.useState('tab-1');
 

package/src/components/tabs/tab.tsx

@@ -16,7 +16,9 @@ import { Link } from '../link.js';
 import { Text } from '../text/index.js';
 import type { SharedTextSize } from '../text/text_shared.js';
 
-type SharedTabProps = Omit<RegularBoxProps, 'as' | 'onClick'> & MarginSpacingProps & Omit<RegularLinkProps, 'hideExternalIcon' | 'showExternalIcon'>;
+type SharedTabProps = Omit<RegularBoxProps, 'as' | 'onClick'> &
+    MarginSpacingProps &
+    Omit<RegularLinkProps, 'hideExternalIcon' | 'showExternalIcon'>;
 
 export type TabVariant = 'default' | 'boxed' | 'buttoned';
 
@@ -32,7 +34,7 @@ export type TabData = SharedTabProps & {
 export type TabProps = TabData & {
     variant?: TabVariant;
     active?: boolean;
-    onSelect?: (data: { id: string, href: string, event: React.MouseEvent }) => void;
+    onSelect?: (data: { id: string; href: string; event: React.MouseEvent }) => void;
 };
 
 const tabVariantTextSize = {
@@ -54,7 +56,7 @@ const tabVariantStyle = {
         color: ${theme.color.neutral.textSubtle};
 
         &:hover {
-            color: ${theme.color.primaryBlack.actionHover}
+            color: ${theme.color.primaryBlack.actionHover};
         }
 
         &.active {
@@ -154,10 +156,12 @@ const TabWrapper = styled(Link)<TabWrapperProps>`
     flex-shrink: 0;
     cursor: pointer;
     position: relative;
-    transition: background-color ${theme.transition.fastEaseOut}, border-color ${theme.transition.fastEaseOut}, color ${theme.transition.fastEaseOut};
+    transition:
+        background-color ${theme.transition.fastEaseOut},
+        border-color ${theme.transition.fastEaseOut},
+        color ${theme.transition.fastEaseOut};
     z-index: 1;
 
-
     ${({ $variant }) => tabVariantStyle[$variant]};
 
     &.disabled {
@@ -178,8 +182,21 @@ const TabWrapper = styled(Link)<TabWrapperProps>`
     }
 `;
 
-export const Tab = ({ variant = 'default', id, to, Icon, title, chip, rollout, className, onSelect, active = false, disabled = false, ...props }: TabProps) => {
-    const href = typeof (to) === 'string' ? to : createPath(to);
+export const Tab = ({
+    variant = 'default',
+    id,
+    to,
+    Icon,
+    title,
+    chip,
+    rollout,
+    className,
+    onSelect,
+    active = false,
+    disabled = false,
+    ...props
+}: TabProps) => {
+    const href = typeof to === 'string' ? to : createPath(to);
     return (
         <TabWrapper
             {...props}
@@ -193,16 +210,19 @@ export const Tab = ({ variant = 'default', id, to, Icon, title, chip, rollout, c
             $variant={variant}
         >
             {Icon && <Icon size="16" className={TAB_CLASSNAMES.ICON} />}
-            <Text size={tabVariantTextSize[variant]} className={TAB_CLASSNAMES.TITLE} weight="bold" as="div">{title}</Text>
+            <Text size={tabVariantTextSize[variant]} className={TAB_CLASSNAMES.TITLE} weight="bold" as="div">
+                {title}
+            </Text>
             {chip && (
-                <Badge
-                    size={tabVariantBadgeSize[variant]}
-                    variant={active ? 'primary_black' : 'neutral_subtle'}
-                >
+                <Badge size={tabVariantBadgeSize[variant]} variant={active ? 'primary_black' : 'neutral_subtle'}>
                     {chip}
                 </Badge>
             )}
-            {rollout && <Badge size={tabVariantBadgeSize[variant]} variant="primary_blue">{rollout}</Badge>}
+            {rollout && (
+                <Badge size={tabVariantBadgeSize[variant]} variant="primary_blue">
+                    {rollout}
+                </Badge>
+            )}
         </TabWrapper>
     );
 };

package/src/components/tabs/tabs.tsx

@@ -16,7 +16,7 @@ export type TabsProps = SharedTabsProps & {
     variant?: TabVariant;
     tabs: TabData[];
     activeTab?: string;
-    onSelect?: (data: { id: string, href: string, event: React.MouseEvent }) => void;
+    onSelect?: (data: { id: string; href: string; event: React.MouseEvent }) => void;
 };
 
 const tabsVariantStyle = {
@@ -83,7 +83,7 @@ const TabsWrapper = styled(Box)<TabsWrapperProps>`
         }
     }
 
-    & > [role="cell"] {
+    & > [role='cell'] {
         position: sticky;
         top: 0;
         height: 100%;
@@ -93,7 +93,7 @@ const TabsWrapper = styled(Box)<TabsWrapperProps>`
         transition: opacity ${theme.transition.fastEaseOut};
         z-index: 2;
 
-        &[aria-hidden="false"] {
+        &[aria-hidden='false'] {
             opacity: 1;
         }
 
@@ -153,19 +153,15 @@ export const Tabs = ({ variant = 'default', tabs, activeTab, onSelect, ...props
         setOveflowState(isTabsOverflowing(event.currentTarget as HTMLDivElement));
     }, []);
 
-    return <TabsWrapper {...props} data-test="tabs-wrapper" $variant={variant}>
-        <div role="cell" aria-hidden={!overflowState?.left} />
-        <div ref={ref} role="tablist" onScroll={scrollHandler}>
-            {tabs.map((tab) => (
-                <Tab
-                    {...tab}
-                    key={tab.id}
-                    variant={variant}
-                    active={tab.id === activeTab}
-                    onSelect={onSelect}
-                />
-            ))}
-        </div>
-        <div role="cell" aria-hidden={!overflowState?.right} />
-    </TabsWrapper>;
+    return (
+        <TabsWrapper {...props} data-test="tabs-wrapper" $variant={variant}>
+            <div role="cell" aria-hidden={!overflowState?.left} />
+            <div ref={ref} role="tablist" onScroll={scrollHandler}>
+                {tabs.map((tab) => (
+                    <Tab {...tab} key={tab.id} variant={variant} active={tab.id === activeTab} onSelect={onSelect} />
+                ))}
+            </div>
+            <div role="cell" aria-hidden={!overflowState?.right} />
+        </TabsWrapper>
+    );
 };

package/src/components/tag.stories.jsx

@@ -1,15 +1,9 @@
 import { Fragment } from 'react';
 import styled from 'styled-components';
 
-import {
-    PeopleIcon, PlusIcon,
-} from '@apify/ui-icons';
+import { PeopleIcon, PlusIcon } from '@apify/ui-icons';
 
-import {
-    Tag,
-    TAG_SIZES,
-    TAG_VARIANTS,
-} from './tag.tsx';
+import { Tag, TAG_SIZES, TAG_VARIANTS } from './tag.tsx';
 import { SHARED_TEXT_TYPES } from './text/text_shared.tsx';
 
 export default {
@@ -25,7 +19,7 @@ export default {
 
 const Table = styled.table`
     td {
-        padding: 8px
+        padding: 8px;
     }
 `;
 
@@ -33,44 +27,40 @@ export const Default = () => {
     return (
         <Table>
             <tbody>
-                {TAG_VARIANTS.map((variant) => <tr key={variant}>
-                    {TAG_SIZES.map((size) => {
-                        return (
-                            <Fragment key={size}>
-                                <td>
-                                    <Tag
-                                        size={size}
-                                        variant={variant}
-                                        LeadingIcon={PeopleIcon}
-                                        TrailingIcon={PlusIcon}
-                                    >
+                {TAG_VARIANTS.map((variant) => (
+                    <tr key={variant}>
+                        {TAG_SIZES.map((size) => {
+                            return (
+                                <Fragment key={size}>
+                                    <td>
+                                        <Tag
+                                            size={size}
+                                            variant={variant}
+                                            LeadingIcon={PeopleIcon}
+                                            TrailingIcon={PlusIcon}
+                                        >
                                             Tag
-                                    </Tag>
-                                </td>
-                                <td>
-                                    <Tag
-                                        size={size}
-                                        type="code"
-                                        variant={variant}
-                                        LeadingIcon={PeopleIcon}
-                                        TrailingIcon={PlusIcon}
-                                    >
+                                        </Tag>
+                                    </td>
+                                    <td>
+                                        <Tag
+                                            size={size}
+                                            type="code"
+                                            variant={variant}
+                                            LeadingIcon={PeopleIcon}
+                                            TrailingIcon={PlusIcon}
+                                        >
                                             Tag
-                                    </Tag>
-                                </td>
-                                <td>
-                                    <Tag
-                                        size={size}
-                                        variant={variant}
-                                        LeadingIcon={PeopleIcon}
-                                    >
-                                    </Tag>
-                                </td>
-                            </Fragment>
-                        );
-                    })}
-                </tr>,
-                )}
+                                        </Tag>
+                                    </td>
+                                    <td>
+                                        <Tag size={size} variant={variant} LeadingIcon={PeopleIcon}></Tag>
+                                    </td>
+                                </Fragment>
+                            );
+                        })}
+                    </tr>
+                ))}
             </tbody>
         </Table>
     );

package/src/components/tag.tsx

@@ -23,7 +23,7 @@ const TAG_ICON_SIZES = {
 } satisfies Record<TagSize, IconSize>;
 
 export const TAG_VARIANTS = ['primary', 'secondary', 'subtle', 'accent', 'success', 'warning', 'error'] as const;
-type TagVariant = typeof TAG_VARIANTS[number];
+type TagVariant = (typeof TAG_VARIANTS)[number];
 
 type TagNodeType = Extract<React.ElementType, 'a' | 'button'>;
 type TagNodePropsMap = {
@@ -38,14 +38,15 @@ type TagNodePropsMap = {
 };
 
 type SharedTagProps = Omit<RegularBoxProps, 'as'> & MarginSpacingProps;
-export type TagProps<T extends TagNodeType> = SharedTagProps & ({
-    as?: T;
-    size?: TagSize;
-    type?: SharedTextType;
-    variant?: TagVariant;
-    LeadingIcon?: IconComponent;
-    TrailingIcon?: IconComponent;
-} & Omit<TagNodePropsMap[T]['props'], 'size' | 'type'>);
+export type TagProps<T extends TagNodeType> = SharedTagProps &
+    ({
+        as?: T;
+        size?: TagSize;
+        type?: SharedTextType;
+        variant?: TagVariant;
+        LeadingIcon?: IconComponent;
+        TrailingIcon?: IconComponent;
+    } & Omit<TagNodePropsMap[T]['props'], 'size' | 'type'>);
 
 const tagSizeStyle = {
     big: css`
@@ -136,9 +137,7 @@ const tagVariantStyle = {
     `,
 } satisfies Record<TagVariant, FlattenSimpleInterpolation>;
 
-type StyledTagProps = WithTransientProps<
-    Required<Pick<TagProps<TagNodeType>, 'size' | 'variant'>>
->;
+type StyledTagProps = WithTransientProps<Required<Pick<TagProps<TagNodeType>, 'size' | 'variant'>>>;
 
 const StyledTag = styled(Box)<StyledTagProps>`
     ${({ $size }) => tagSizeStyle[$size]};
@@ -178,21 +177,19 @@ function TagWrapper<T extends TagNodeType>(
     }: TagProps<T>,
     ref: ForwardedRef<TagNodePropsMap[T]['element']>,
 ) {
-    const component: React.ElementType = (as === 'a' ? Link : as ?? 'button');
+    const component: React.ElementType = as === 'a' ? Link : (as ?? 'button');
 
     // Map 'regular' tag size to 'small' text size for better visual balance when displayed next to small button
     const textSize: SharedTextSize = size === 'regular' ? 'small' : size;
 
     return (
-        <StyledTag
-            as={component}
-            ref={ref}
-            $variant={variant}
-            $size={size}
-            {...props}
-        >
+        <StyledTag as={component} ref={ref} $variant={variant} $size={size} {...props}>
             {LeadingIcon && <LeadingIcon size={TAG_ICON_SIZES[size]} />}
-            {children && (<Text size={textSize} type={type} weight="medium">{children}</Text>)}
+            {children && (
+                <Text size={textSize} type={type} weight="medium">
+                    {children}
+                </Text>
+            )}
             {TrailingIcon && <TrailingIcon size={TAG_ICON_SIZES[size]} />}
         </StyledTag>
     );
@@ -201,6 +198,5 @@ TagWrapper.displayName = 'Tag';
 
 // `forwardRef` can't handle generic types, should be fixable with React 19
 export const Tag = forwardRef(TagWrapper) as <T extends TagNodeType>(
-
     props: TagProps<T> & { ref?: ForwardedRef<TagNodePropsMap[T]['element']> },
 ) => ReturnType<typeof TagWrapper>;

package/src/components/text/heading_content.stories.tsx

@@ -10,9 +10,10 @@ export default {
     parameters: {
         docs: {
             description: {
-                component: '⚠️ **Internal Component**: This component is specifically designed for use within the SimpleMarkdown component. '
-                + 'It provides content-specific heading styles for markdown rendering. \n'
-                + 'For general heading usage, use HeadingShared or HeadingMarketing instead.',
+                component:
+                    '⚠️ **Internal Component**: This component is specifically designed for use within the SimpleMarkdown component. ' +
+                    'It provides content-specific heading styles for markdown rendering. \n' +
+                    'For general heading usage, use HeadingShared or HeadingMarketing instead.',
             },
         },
     },
@@ -116,52 +117,40 @@ export const AllVariants: Story = {
             <WarningBanner>
                 <strong>⚠️ Internal Component</strong>
                 <p>
-                    HeadingContent is used exclusively by the SimpleMarkdown component for rendering
-                    markdown headings. For general heading usage in your application, use HeadingShared
-                    or HeadingMarketing components instead.
+                    HeadingContent is used exclusively by the SimpleMarkdown component for rendering markdown headings.
+                    For general heading usage in your application, use HeadingShared or HeadingMarketing components
+                    instead.
                 </p>
             </WarningBanner>
 
             <HeadingShowcase>
                 <small>heading1 (default: h1) - Used for # in markdown</small>
-                <HeadingContent type="heading1">
-                    Heading 1 - Main Document Title
-                </HeadingContent>
+                <HeadingContent type="heading1">Heading 1 - Main Document Title</HeadingContent>
             </HeadingShowcase>
 
             <HeadingShowcase>
                 <small>heading2 (default: h2) - Used for ## in markdown</small>
-                <HeadingContent type="heading2">
-                    Heading 2 - Major Section
-                </HeadingContent>
+                <HeadingContent type="heading2">Heading 2 - Major Section</HeadingContent>
             </HeadingShowcase>
 
             <HeadingShowcase>
                 <small>heading3 (default: h3) - Used for ### in markdown</small>
-                <HeadingContent type="heading3">
-                    Heading 3 - Subsection
-                </HeadingContent>
+                <HeadingContent type="heading3">Heading 3 - Subsection</HeadingContent>
             </HeadingShowcase>
 
             <HeadingShowcase>
                 <small>heading4 (default: h4) - Used for #### in markdown</small>
-                <HeadingContent type="heading4">
-                    Heading 4 - Minor Section
-                </HeadingContent>
+                <HeadingContent type="heading4">Heading 4 - Minor Section</HeadingContent>
             </HeadingShowcase>
 
             <HeadingShowcase>
                 <small>heading5 (default: h5) - Used for ##### in markdown</small>
-                <HeadingContent type="heading5">
-                    Heading 5 - Sub-minor Section
-                </HeadingContent>
+                <HeadingContent type="heading5">Heading 5 - Sub-minor Section</HeadingContent>
             </HeadingShowcase>
 
             <HeadingShowcase>
                 <small>heading6 (default: h6) - Used for ###### in markdown</small>
-                <HeadingContent type="heading6">
-                    Heading 6 - Smallest Heading
-                </HeadingContent>
+                <HeadingContent type="heading6">Heading 6 - Smallest Heading</HeadingContent>
             </HeadingShowcase>
         </StoryWrapper>
     ),

package/src/components/text/heading_content.tsx

@@ -9,7 +9,7 @@ import { TextBaseComponent } from './text_base.js';
 type HeadingContentType = 'heading1' | 'heading2' | 'heading3' | 'heading4' | 'heading5' | 'heading6';
 
 interface HeadingContentTransientProps {
-    type?: HeadingContentType,
+    type?: HeadingContentType;
 }
 
 const getContentHeadingStyles = (headingType: HeadingContentType) => css`
@@ -43,16 +43,12 @@ const StyledHeadingContent = styled(TextBaseComponent)<StyledHeadingContentProps
 /**
  * @deprecated Use Heading or HeadingMarketing from ui-library
  */
-export const HeadingContent: React.FC<HeadingContentProps> = ({
-    type,
-    as,
-    ...rest
-}) => {
+export const HeadingContent: React.FC<HeadingContentProps> = ({ type, as, ...rest }) => {
     return (
         <StyledHeadingContent
             $type={type}
             forwardedAs={as || HEADING_CONTENT_DEFAULT_ELEMENTS[type || 'heading1']}
-            m='none'
+            m="none"
             {...rest}
         />
     );

package/src/components/text/heading_marketing.stories.tsx

@@ -9,9 +9,10 @@ export default {
     parameters: {
         docs: {
             description: {
-                component: 'Marketing headings are designed for promotional and web-facing content. '
-                + 'These typography elements are primarily used for marketing pages, landing pages,'
-                + ' and other web components where a strong visual presence is needed.',
+                component:
+                    'Marketing headings are designed for promotional and web-facing content. ' +
+                    'These typography elements are primarily used for marketing pages, landing pages,' +
+                    ' and other web components where a strong visual presence is needed.',
             },
         },
     },

package/src/components/text/heading_marketing.tsx

@@ -6,10 +6,18 @@ import type { WithTransientProps } from '../../type_utils.js';
 import type { TextBaseProps } from './text_base.js';
 import { TextBaseComponent } from './text_base.js';
 
-type HeadingMarketingType = 'titleXs' | 'titleS' | 'titleM' | 'titleMl' | 'titleL' | 'titleXl' | 'title2xl' | 'title3xl';
+type HeadingMarketingType =
+    | 'titleXs'
+    | 'titleS'
+    | 'titleM'
+    | 'titleMl'
+    | 'titleL'
+    | 'titleXl'
+    | 'title2xl'
+    | 'title3xl';
 
 interface HeadingMarketingTransientProps {
-    type?: HeadingMarketingType,
+    type?: HeadingMarketingType;
 }
 
 type StyledHeadingMarketingProps = WithTransientProps<HeadingMarketingTransientProps>;
@@ -40,16 +48,12 @@ const StyledHeadingMarketing = styled(TextBaseComponent)<StyledHeadingMarketingP
     `}
 `;
 
-export const HeadingMarketing: React.FC<HeadingMarketingProps> = ({
-    type,
-    as,
-    ...rest
-}) => {
+export const HeadingMarketing: React.FC<HeadingMarketingProps> = ({ type, as, ...rest }) => {
     return (
         <StyledHeadingMarketing
             $type={type}
             forwardedAs={as || HEADING_MARKETING_DEFAULT_ELEMENTS[type || 'titleL']}
-            m='none'
+            m="none"
             {...rest}
         />
     );