@apify/ui-library 1.138.0 → 1.138.1

package/src/components/simple_markdown/simple_markdown.tsx

@@ -16,12 +16,7 @@ import { Image } from '../image.js';
 import { isUrlExternal } from '../link.js';
 import { cleanMarkdown } from '../readme_renderer/utils.js';
 import { Heading, HeadingContent, Text, TextContent } from '../text/index.js';
-import {
-    MarkdownBlockQuote,
-    MarkdownCode,
-    MarkdownLink,
-    MarkdownTable,
-} from './simple_markdown_components.js';
+import { MarkdownBlockQuote, MarkdownCode, MarkdownLink, MarkdownTable } from './simple_markdown_components.js';
 
 export type SimpleMarkdownComponents = Components;
 
@@ -66,8 +61,8 @@ const StyledMarkdownWrapper = styled(Box)`
     word-break: break-word;
 
     @font-face {
-        font-family: "ellipsis-font";
-        src: local("Courier");
+        font-family: 'ellipsis-font';
+        src: local('Courier');
         unicode-range: U+2026;
         size-adjust: 0%;
     }
@@ -97,9 +92,7 @@ const unwrapUnsupportedElement = (node: Element): (Element | TextNode)[] => {
     });
 };
 
-const getUnsupportedRehypeTagsSanitationPlugIn = (
-    allowedElements: string[],
-) => () => (tree: Root) => {
+const getUnsupportedRehypeTagsSanitationPlugIn = (allowedElements: string[]) => () => (tree: Root) => {
     visit(tree, 'element', (node, index, parent) => {
         if (!allowedElements.includes(node.tagName) && parent && typeof index === 'number') {
             // Replace unsupported element with its valid children
@@ -135,44 +128,148 @@ export const defaultRemarkPlugins = [remarkGfm];
 
 // TODO: Add Image component
 const regularMarkdownSizeComponents: Components = {
-    h1: ({ children }) => <HeadingContent mb='space16' type='heading1'>{children}</HeadingContent>,
-    h2: ({ children }) => <HeadingContent mb='space16' type='heading2'>{children}</HeadingContent>,
-    h3: ({ children }) => <HeadingContent mb='space16' type='heading3'>{children}</HeadingContent>,
-    h4: ({ children }) => <HeadingContent mb='space16' type='heading4'>{children}</HeadingContent>,
-    h5: ({ children }) => <HeadingContent mb='space16' type='heading5'>{children}</HeadingContent>,
-    h6: ({ children }) => <HeadingContent mb='space16' type='heading6'>{children}</HeadingContent>,
-    p: ({ children }) => (<TextContent my='space16'>{children}</TextContent>),
-    strong: ({ children }) => <TextContent as='strong' weight='bold'>{children}</TextContent>,
-    b: ({ children }) => <TextContent as='b' weight='bold'>{children}</TextContent>,
-    th: ({ children }) => <TextContent as='th' weight='bold'>{children}</TextContent>,
+    h1: ({ children }) => (
+        <HeadingContent mb="space16" type="heading1">
+            {children}
+        </HeadingContent>
+    ),
+    h2: ({ children }) => (
+        <HeadingContent mb="space16" type="heading2">
+            {children}
+        </HeadingContent>
+    ),
+    h3: ({ children }) => (
+        <HeadingContent mb="space16" type="heading3">
+            {children}
+        </HeadingContent>
+    ),
+    h4: ({ children }) => (
+        <HeadingContent mb="space16" type="heading4">
+            {children}
+        </HeadingContent>
+    ),
+    h5: ({ children }) => (
+        <HeadingContent mb="space16" type="heading5">
+            {children}
+        </HeadingContent>
+    ),
+    h6: ({ children }) => (
+        <HeadingContent mb="space16" type="heading6">
+            {children}
+        </HeadingContent>
+    ),
+    p: ({ children }) => <TextContent my="space16">{children}</TextContent>,
+    strong: ({ children }) => (
+        <TextContent as="strong" weight="bold">
+            {children}
+        </TextContent>
+    ),
+    b: ({ children }) => (
+        <TextContent as="b" weight="bold">
+            {children}
+        </TextContent>
+    ),
+    th: ({ children }) => (
+        <TextContent as="th" weight="bold">
+            {children}
+        </TextContent>
+    ),
     blockquote: ({ children }) => <MarkdownBlockQuote>{children}</MarkdownBlockQuote>,
     table: ({ children }) => <MarkdownTable>{children}</MarkdownTable>,
-    ul: ({ children }) => <Box as='ul' pl='space32'>{children}</Box>,
-    ol: ({ children, start }) => <TextContent as='ol' pl='space32' start={start}>{children}</TextContent>,
-    li: ({ children }) => <TextContent as='li' mt='space4'>{children}</TextContent>,
+    ul: ({ children }) => (
+        <Box as="ul" pl="space32">
+            {children}
+        </Box>
+    ),
+    ol: ({ children, start }) => (
+        <TextContent as="ol" pl="space32" start={start}>
+            {children}
+        </TextContent>
+    ),
+    li: ({ children }) => (
+        <TextContent as="li" mt="space4">
+            {children}
+        </TextContent>
+    ),
     a: ({ children, href }) => <MarkdownLink to={href}>{children}</MarkdownLink>,
-    code: ({ children, node }) => <MarkdownCode node={node} size='regular'>{children}</MarkdownCode>,
+    code: ({ children, node }) => (
+        <MarkdownCode node={node} size="regular">
+            {children}
+        </MarkdownCode>
+    ),
     img: ({ src, alt, height, width }) => <MarkdownImage src={src} alt={alt} height={height} width={width} />,
 };
 
 const smallMarkdownSizeComponents: Components = {
-    h1: ({ children }) => <Heading mb='space16' type='title2xl'>{children}</Heading>,
-    h2: ({ children }) => <Heading mb='space16' type='titleXl'>{children}</Heading>,
-    h3: ({ children }) => <Heading mb='space16' type='titleL'>{children}</Heading>,
-    h4: ({ children }) => <Heading mb='space16' type='titleM'>{children}</Heading>,
-    h5: ({ children }) => <Heading mb='space16' type='titleS'>{children}</Heading>,
-    h6: ({ children }) => <Heading mb='space16' type='titleXs'>{children}</Heading>,
-    p: ({ children }) => (<Text my='space16'>{children}</Text>),
-    strong: ({ children }) => <Text as='strong' weight='bold'>{children}</Text>,
-    b: ({ children }) => <Text as='b' weight='bold'>{children}</Text>,
-    th: ({ children }) => <Text as='th' weight='bold'>{children}</Text>,
+    h1: ({ children }) => (
+        <Heading mb="space16" type="title2xl">
+            {children}
+        </Heading>
+    ),
+    h2: ({ children }) => (
+        <Heading mb="space16" type="titleXl">
+            {children}
+        </Heading>
+    ),
+    h3: ({ children }) => (
+        <Heading mb="space16" type="titleL">
+            {children}
+        </Heading>
+    ),
+    h4: ({ children }) => (
+        <Heading mb="space16" type="titleM">
+            {children}
+        </Heading>
+    ),
+    h5: ({ children }) => (
+        <Heading mb="space16" type="titleS">
+            {children}
+        </Heading>
+    ),
+    h6: ({ children }) => (
+        <Heading mb="space16" type="titleXs">
+            {children}
+        </Heading>
+    ),
+    p: ({ children }) => <Text my="space16">{children}</Text>,
+    strong: ({ children }) => (
+        <Text as="strong" weight="bold">
+            {children}
+        </Text>
+    ),
+    b: ({ children }) => (
+        <Text as="b" weight="bold">
+            {children}
+        </Text>
+    ),
+    th: ({ children }) => (
+        <Text as="th" weight="bold">
+            {children}
+        </Text>
+    ),
     blockquote: ({ children }) => <MarkdownBlockQuote>{children}</MarkdownBlockQuote>,
     table: ({ children }) => <MarkdownTable>{children}</MarkdownTable>,
-    ul: ({ children }) => <Box as='ul' pl='space32'>{children}</Box>,
-    ol: ({ children, start }) => <Text as='ol' pl='space32' start={start}>{children}</Text>,
-    li: ({ children }) => <Text as='li' mt='space4'>{children}</Text>,
+    ul: ({ children }) => (
+        <Box as="ul" pl="space32">
+            {children}
+        </Box>
+    ),
+    ol: ({ children, start }) => (
+        <Text as="ol" pl="space32" start={start}>
+            {children}
+        </Text>
+    ),
+    li: ({ children }) => (
+        <Text as="li" mt="space4">
+            {children}
+        </Text>
+    ),
     a: ({ children, href }) => <MarkdownLink to={href}>{children}</MarkdownLink>,
-    code: ({ children, node }) => <MarkdownCode node={node} size='small'>{children}</MarkdownCode>,
+    code: ({ children, node }) => (
+        <MarkdownCode node={node} size="small">
+            {children}
+        </MarkdownCode>
+    ),
     img: ({ src, alt, height, width }) => <MarkdownImage src={src} alt={alt} height={height} width={width} />,
 };
 
@@ -182,27 +279,30 @@ export type SimpleMarkdownProps = Omit<ReactMarkdownOptions, 'urlTransform' | 'c
     /**
      * @deprecated use urlTransform instead
      */
-    transformLinkUri?: UrlTransform,
+    transformLinkUri?: UrlTransform;
     /**
      * @deprecated use urlTransform instead
      */
-    transformImageUri?: UrlTransform,
-    size?: MarkdownSize,
-    children: string,
-    className?: string,
+    transformImageUri?: UrlTransform;
+    size?: MarkdownSize;
+    children: string;
+    className?: string;
 };
 
 export const useDefaultUrlTransform = () => {
     const { windowLocationHost } = useSharedUiDependencies();
 
-    return useCallback((url: string) => {
-        if (!isUrlExternal(url, windowLocationHost)) {
-            // We want to make sure internal links will be relative links without https://host at the beginning because Link doesn't work with these
-            return url.replace(/^(https?:\/\/)?(www\.)?[^/]+/, '') || '/';
-        }
+    return useCallback(
+        (url: string) => {
+            if (!isUrlExternal(url, windowLocationHost)) {
+                // We want to make sure internal links will be relative links without https://host at the beginning because Link doesn't work with these
+                return url.replace(/^(https?:\/\/)?(www\.)?[^/]+/, '') || '/';
+            }
 
-        return url;
-    }, [windowLocationHost]);
+            return url;
+        },
+        [windowLocationHost],
+    );
 };
 
 export const SimpleMarkdown: React.FC<SimpleMarkdownProps> = ({
@@ -234,10 +334,7 @@ export const SimpleMarkdown: React.FC<SimpleMarkdownProps> = ({
             getUnsupportedRehypeTagsSanitationPlugIn(effectiveAllowedElements.current as string[]),
         ];
 
-        return [
-            ...plugins,
-            rehypeSanitize,
-        ];
+        return [...plugins, rehypeSanitize];
     }, [rehypePlugins]);
 
     return (

package/src/components/simple_markdown/simple_markdown_components.tsx

@@ -23,19 +23,11 @@ const simpleMarkdownClassNames = {
     HEADING_ICON_LINK: 'headingIconLink',
 } as const;
 
-export const MarkdownPlainHeading: React.FC<HeadingSharedProps> = ({
-    children,
-    ...rest
-}) => {
+export const MarkdownPlainHeading: React.FC<HeadingSharedProps> = ({ children, ...rest }) => {
     const id = slugifyHeadingChildren(children);
 
     return (
-        <Heading
-            mt='space32'
-            mb='space16'
-            id={id}
-            {...rest}
-        >
+        <Heading mt="space32" mb="space16" id={id} {...rest}>
             {children}
         </Heading>
     );
@@ -67,10 +59,7 @@ const StyledMarkdownHeading = styled(Box)`
  * Use `MarkdownPlainHeading` if you want to render simple heading instead
  */
 // TODO: This should be used for readmes
-export const MarkdownHeadingWrapper: React.FC<HeadingSharedProps> = ({
-    children,
-    ...rest
-}) => {
+export const MarkdownHeadingWrapper: React.FC<HeadingSharedProps> = ({ children, ...rest }) => {
     const id = slugifyHeadingChildren(children);
 
     const { isCopied, copyToClipboard } = useCopyToClipboard();
@@ -82,28 +71,13 @@ export const MarkdownHeadingWrapper: React.FC<HeadingSharedProps> = ({
     }
 
     return (
-        <StyledMarkdownHeading
-            mt='space32'
-            mb='space16'
-            id={id}
-            {...rest}
-        >
+        <StyledMarkdownHeading mt="space32" mb="space16" id={id} {...rest}>
             {children}
-            <Link
-                className={simpleMarkdownClassNames.HEADING_ICON_LINK}
-                onClick={handleClick}
-                to={`#${id}`}
-            >
+            <Link className={simpleMarkdownClassNames.HEADING_ICON_LINK} onClick={handleClick} to={`#${id}`}>
                 {isCopied ? (
-                    <CheckIcon
-                        size="16"
-                        color={theme.color.success.action}
-                    />
+                    <CheckIcon size="16" color={theme.color.success.action} />
                 ) : (
-                    <LinkIcon
-                        size="16"
-                        color={theme.color.primary.text}
-                    />
+                    <LinkIcon size="16" color={theme.color.primary.text} />
                 )}
             </Link>
         </StyledMarkdownHeading>
@@ -113,32 +87,36 @@ export const MarkdownHeadingWrapper: React.FC<HeadingSharedProps> = ({
 const StyledInlineCode = styled(InlineCode)`
     /* If code is rendered within heading, it should inherit its font styles */
     /* TODO: Look at implementation of InlineCode - maybe we can live without it */
-    h1 & code, h2 & code, h3 & code, h4 & code, h5 & code {
+    h1 & code,
+    h2 & code,
+    h3 & code,
+    h4 & code,
+    h5 & code {
         font-size: inherit !important;
         line-height: inherit !important;
     }
 
-    b & code, strong & code{
+    b & code,
+    strong & code {
         font-weight: inherit !important;
     }
 `;
 
 type MarkdownCodeProps = {
-    size: SharedTextSize,
-    className?: string,
-    children: React.ReactNode,
+    size: SharedTextSize;
+    className?: string;
+    children: React.ReactNode;
 } & MarkdownComponentExtraProps;
 
-export const MarkdownCode: React.FC<MarkdownCodeProps> = ({
-    className,
-    children,
-    size,
-    node,
-}) => {
+export const MarkdownCode: React.FC<MarkdownCodeProps> = ({ className, children, size, node }) => {
     const isInline = node?.position?.start?.line === node?.position?.end?.line;
 
     if (isInline) {
-        return <StyledInlineCode size={size} className={className}>{children}</StyledInlineCode>;
+        return (
+            <StyledInlineCode size={size} className={className}>
+                {children}
+            </StyledInlineCode>
+        );
     }
 
     const code = String(children).replace(/\n$/, '').trim();
@@ -148,11 +126,7 @@ export const MarkdownCode: React.FC<MarkdownCodeProps> = ({
 
     if (isOneLineCode) {
         return (
-            <OneLineCode
-                language={language}
-                size={size}
-                fullWidth
-            >
+            <OneLineCode language={language} size={size} fullWidth>
                 {code}
             </OneLineCode>
         );
@@ -171,7 +145,8 @@ export const MarkdownCode: React.FC<MarkdownCodeProps> = ({
     );
 };
 
-const youtubeRegex = /^(?:https?:\/\/)?(?:www\.)?(?:m\.)?(?:youtube(?:-nocookie)?\.com|youtu\.be)\/(?:watch\?v=|embed\/|v\/)?([a-zA-Z0-9\-_]+)(?:\S*)?$/;
+const youtubeRegex =
+    /^(?:https?:\/\/)?(?:www\.)?(?:m\.)?(?:youtube(?:-nocookie)?\.com|youtu\.be)\/(?:watch\?v=|embed\/|v\/)?([a-zA-Z0-9\-_]+)(?:\S*)?$/;
 const vimeoRegex = /^((?:https?:\/\/)?(?:player\.)?vimeo\.com(?:\/video)?\/(\d+))$/;
 
 const getVideoSrc = (link: string) => {
@@ -181,7 +156,10 @@ const getVideoSrc = (link: string) => {
     if (youtubeLink) {
         // add rel=0 to disable related videos from other channels at the end of the video
         // add enablejsapi=1 to enable tracking videos via API through Google Analytics
-        src = qs.stringifyUrl({ url: `https://www.youtube.com/embed/${youtubeLink[1]}`, query: { rel: 0, enablejsapi: 1 } });
+        src = qs.stringifyUrl({
+            url: `https://www.youtube.com/embed/${youtubeLink[1]}`,
+            query: { rel: 0, enablejsapi: 1 },
+        });
     }
     if (vimeoLink) src = `https://player.vimeo.com/video/${vimeoLink[2]}`;
 
@@ -227,7 +205,11 @@ const MarkdownVideo = ({ src }: MarkdownVideoProps) => {
 const StyledMarkdownLink = styled(Link)`
     overflow-wrap: break-word;
 
-    h1 &, h2 &, h3 &, h4 &, h5 & {
+    h1 &,
+    h2 &,
+    h3 &,
+    h4 &,
+    h5 & {
         overflow-wrap: normal;
     }
 
@@ -244,10 +226,12 @@ export const MarkdownLink: React.FC<WithOptional<LinkProps, 'to'>> = ({
     className,
     hideExternalIcon = true,
 }) => {
-    return (to && typeof to === 'string') ? (
-        <StyledMarkdownLink to={to} hideExternalIcon={hideExternalIcon} rel={rel} className={className}>{children}</StyledMarkdownLink>
+    return to && typeof to === 'string' ? (
+        <StyledMarkdownLink to={to} hideExternalIcon={hideExternalIcon} rel={rel} className={className}>
+            {children}
+        </StyledMarkdownLink>
     ) : (
-        (<span>{children}</span>) // Invalid links can be rendered as a regular span instead
+        <span>{children}</span> // Invalid links can be rendered as a regular span instead
     );
 };
 
@@ -271,14 +255,16 @@ export const MarkdownTable = styled.table`
     overflow: auto;
     border-collapse: collapse;
 
-    td, th {
+    td,
+    th {
         border: 1px solid ${theme.color.neutral.border};
         padding: ${theme.space.space16};
         text-align: left;
     }
 
     tr:nth-child(even):not([class]) {
-        > th, > td {
+        > th,
+        > td {
             background-color: inherit;
         }
     }
@@ -317,5 +303,9 @@ export function MarkdownParagraphContent({
     if (videoSrc) return <MarkdownVideo src={videoSrc} />;
 
     // Render the children as a paragraph
-    return <TextContent my='space16' {...textProps}>{children}</TextContent>;
+    return (
+        <TextContent my="space16" {...textProps}>
+            {children}
+        </TextContent>
+    );
 }

package/src/components/spinner.stories.tsx

@@ -15,13 +15,15 @@ export const Standalone = Template.bind({});
 
 export const WithinContainer = (args: SpinnerProps) => {
     return (
-        <div style={{
-            minWidth: '100px',
-            minHeight: '200px',
-            border: 'solid 1px lightgray',
-            borderRadius: '1rem',
-            position: 'relative',
-        }}>
+        <div
+            style={{
+                minWidth: '100px',
+                minHeight: '200px',
+                border: 'solid 1px lightgray',
+                borderRadius: '1rem',
+                position: 'relative',
+            }}
+        >
             <Spinner {...args} />
         </div>
     );
@@ -31,7 +33,11 @@ export const Inline = () => {
     const elements: React.ElementType[] = ['h1', 'h2', 'h3', 'p'];
     return (
         <div style={{ width: '100%' }}>
-            {elements.map((Element) => <Element key={Element}>{Element}: There was a <InlineSpinner /> in New Orleans.</Element>)}
+            {elements.map((Element) => (
+                <Element key={Element}>
+                    {Element}: There was a <InlineSpinner /> in New Orleans.
+                </Element>
+            ))}
         </div>
     );
 };

package/src/components/spinner.tsx

@@ -33,8 +33,8 @@ export type SpinnerProps = {
     as?: React.ElementType;
     className?: string;
     style?: React.CSSProperties;
-    small?: boolean,
-    loadingReason?: string,
+    small?: boolean;
+    loadingReason?: string;
 };
 
 type SpinnerWrapperProps = WithTransientProps<Pick<SpinnerProps, 'small'>>;
@@ -58,7 +58,9 @@ const SpinnerWrapper = styled.span<SpinnerWrapperProps>`
         & .path {
             transform-origin: center;
             stroke: ${theme.color.primary.text};
-            animation: ${dash} 1.5s ease-in-out infinite, ${rotate} 2s linear infinite;
+            animation:
+                ${dash} 1.5s ease-in-out infinite,
+                ${rotate} 2s linear infinite;
         }
     }
 `;

package/src/components/store/store_actor_header.stories.tsx

@@ -78,20 +78,11 @@ export const Variants: Story = {
             <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px', alignItems: 'center' }}>
                 <div>
                     <h4>Basic</h4>
-                    <StoreActorHeader
-                        name="web-scraper"
-                        title="Web Scraper"
-                        username="apify"
-                    />
+                    <StoreActorHeader name="web-scraper" title="Web Scraper" username="apify" />
                 </div>
                 <div>
                     <h4>Basic</h4>
-                    <StoreActorHeader
-                        compact
-                        name="web-scraper"
-                        title="Web Scraper"
-                        username="apify"
-                    />
+                    <StoreActorHeader compact name="web-scraper" title="Web Scraper" username="apify" />
                 </div>
                 <div>
                     <h4>With Picture</h4>

package/src/components/store/store_actor_header.tsx

@@ -71,13 +71,13 @@ const ActorTitleWrapper = styled(Box)`
 `;
 
 export type StoreActorHeaderProps = {
-    name: string,
-    title: string,
-    pictureUrl?: string | null,
-    username: string,
-    isUnderMaintenance?: boolean,
-    hasRisingStarBadge?: boolean,
-    avatarSize?: number,
+    name: string;
+    title: string;
+    pictureUrl?: string | null;
+    username: string;
+    isUnderMaintenance?: boolean;
+    hasRisingStarBadge?: boolean;
+    avatarSize?: number;
     compact?: boolean;
 };
 
@@ -101,21 +101,25 @@ export const StoreActorHeader: React.FC<StoreActorHeaderProps & BoxProps> = ({
                     name={title}
                     borderRadius={compact ? theme.radius.radius4 : theme.radius.radius8}
                 />
-                {!compact && hasRisingStarBadge && <StyledCompactBadge
-                    variant='primary_blue'
-                    size='small'
-                    LeadingIcon={StarEmptyIcon}
-                    className={storeActorHeaderClassNames.badge}
-                />}
+                {!compact && hasRisingStarBadge && (
+                    <StyledCompactBadge
+                        variant="primary_blue"
+                        size="small"
+                        LeadingIcon={StarEmptyIcon}
+                        className={storeActorHeaderClassNames.badge}
+                    />
+                )}
             </ActorAvatarWrapper>
             <ActorTitleWrapper>
                 <div className={storeActorHeaderClassNames.title}>
-                    <Text as='h3' weight={compact ? 'medium' : 'bold'} color={theme.color.neutral.text}>{title}</Text>
-                    {isUnderMaintenance && (<WarningTriangleIcon size="12" color={theme.color.warning.icon} />)}
+                    <Text as="h3" weight={compact ? 'medium' : 'bold'} color={theme.color.neutral.text}>
+                        {title}
+                    </Text>
+                    {isUnderMaintenance && <WarningTriangleIcon size="12" color={theme.color.warning.icon} />}
                 </div>
                 <Text
                     size="small"
-                    weight='medium'
+                    weight="medium"
                     type="code"
                     color={theme.color.neutral.textSubtle}
                     className={storeActorHeaderClassNames.slug}

package/src/components/switch/switch.stories.jsx

@@ -13,7 +13,7 @@ const Grid = styled.div`
     grid-template-columns: repeat(2, auto);
     gap: 1rem 5rem;
 
-    input{
+    input {
         width: 100%;
     }
 `;
@@ -22,17 +22,9 @@ export const SwitchPrimitive = () => {
     const [value, setValue] = useState(1);
     return (
         <Grid>
-            <Switch value={value} setValue={setValue}/> <p>checked vs unchecked</p>
-            <Switch name="Disabled"
-                disabled
-                value={false}
-                setValue={() => {}}
-            /> <p>disabled</p>
-            <Switch name="Error"
-                error='Test error'
-                value={value}
-                setValue={setValue}
-            /> <p>error</p>
+            <Switch value={value} setValue={setValue} /> <p>checked vs unchecked</p>
+            <Switch name="Disabled" disabled value={false} setValue={() => {}} /> <p>disabled</p>
+            <Switch name="Error" error="Test error" value={value} setValue={setValue} /> <p>error</p>
         </Grid>
     );
 };

package/src/components/switch/switch.style.ts

@@ -8,7 +8,9 @@ export const switchStyle = css`
     background-color: ${theme.color.neutral.actionSecondary};
     border-radius: 100px;
     position: relative;
-    transition: border-color 120ms ease-out, background-color 120ms ease-out !important;
+    transition:
+        border-color 120ms ease-out,
+        background-color 120ms ease-out !important;
     vertical-align: middle;
 
     &:focus-visible {
@@ -28,11 +30,11 @@ export const switchStyle = css`
         background-color: ${theme.color.danger.action};
 
         &:hover {
-        background-color: ${theme.color.danger.actionHover};
+            background-color: ${theme.color.danger.actionHover};
         }
     }
 
-    &[data-state="checked"] {
+    &[data-state='checked'] {
         background-color: ${theme.color.success.action};
 
         &:hover {